发布于 

Stellar 建站记录

  本文记录了自己使用Stellar主题建站时操作的一些内容,或简或繁,主要是为了方便日后主题升级,设备更换时能够顺利迁移。

目前我使用的`stellar 1.4.0` 版本还不支持自定义 `footer` (注:新版本已支持) ,但我需要放上 icp 备案等信息,于是修改了部分源码。我需要新设置两排内容,一排展示部署和图床信息,一排展示 icp 备案信息,最终呈现效果如下图:

需要设置三个部分

  1. zh-CN.yml.footer 语言设置
  2. footer.ejs 设置
  3. _config.stellar.yml.footer 主题设置

zh-CN.yml.footer 语言设置

..\themes\stellar\languages\zh-CN.yml 文件中设置:

..\themes\stellar\languages\zh-CN.yml
1
2
3
4
5
6
7
footer:
license: '本博客所有文章除特别声明外,均采用 %s 许可协议,转载请注明出处。'
info_not_open_source: '本站由 %s 创建,使用 %s 作为主题。'
info_open_source: '本站由 %s 创建,使用 %s 作为主题,您可以在 %s 找到本站源码。'
# 自定义部分
web_serve: '本站托管于 %s ,使用 %s 作为图床。' # 用于展示部署信息
icp: '%s' # 用于展示 icp 备案信息

其中 %s 为占位符,若使用多语言还需如此设置 zh-TW.ymlen.yml

footer.ejs 设置

..\themes\stellar\layout\_partial\main\footer.ejs 文件中设置:

..\themes\stellar\layout\_partial\main\footer.ejs
1
2
3
4
5
6
7
8
9
10
11
12
# 顶部 `const source = theme.footer.source;` 之后
const icp = theme.footer.icp;
const cloud_server = theme.footer.cloud_server;
const picture_bed = theme.footer.picture_bed;

# 下方 `if(source){...}` 之后
if (theme.footer.cloud_server) {
el += markdown(__('footer.web_serve', cloud_server, picture_bed));
}
if (theme.footer.icp){
el += markdown(__('footer.icp', icp));
}

上述代码第一部分是传入主题设置中的内容,其对应着语言设置部分中的占位符内容:

  • icp: 要展示的icp信息
  • cloud_server : 要展示的部署信息
  • pictuer_bed : 要展示的图床信息

上述代码第二部分为插入要展示的信息。

_config.stellar.yml.footer 主题设置

footer 部分添加如下内容:

_config.stellar.yml
1
2
3
icp: '渝ICP备[2021006569](https://beian.miit.gov.cn/)号,公安备[50011702500564](https://beian.miit.gov.cn/)号,萌ICP备[20201324](https://icp.gov.moe/?keyword=20201324)号'
cloud_server: '[腾讯云](https://cloud.tencent.com/),[Github](https://github.com/)'
picture_bed: '[又拍云](https://www.upyun.com/?utm_source=lianmeng&utm_medium=referral)'

其对应第二步中的 theme.footer.icptheme.footer.cloud_servertheme.footer.picture_bed

上述方法仅供参考,主题已支持该设置

2021.7.31 主题更新 Commit: custom footer ,可以使用 more 更优雅的实现上述内容,主题配置 footer.more 设置:

1
2
3
more: # string or array (support markdown)
- '本站托管于 [腾讯云](https://cloud.tencent.com/),[Github](https://github.com/) ,使用 [又拍云](https://www.upyun.com/?utm_source=lianmeng&utm_medium=referral) 作为图床。'
- '渝ICP备[2021006569](https://beian.miit.gov.cn/)号,公安备[50011702500564](https://beian.miit.gov.cn/)号,萌ICP备[20201324](https://icp.gov.moe/?keyword=20201324)号'

百度收录

见:百度收录推送

stellar 表情标签索引

见:stellar表情标签索引

调整最大边距

修改 themes/stellar/source/css/_custom.styl :

1
2
3
// 可以动态变化的属性
:root
--width-main: 820px //680

赞赏部件–sponsor-page

见:请作者喝咖啡–sponsor-page

示例:

移植 next 主题的 label 标签

仅对纯文本有效:

class: gray purple blue green orange yellow red

示例:

graypurplebluegreenorangeyellowred
查看代码
1
{% label gray gray %}{% label purple purple %}{% label blue blue %}{% label green green %}{% label orange orange %}{% label yellow yellow %}{% label red red %}

主题已集成 : mark 标签
官方效果:支持多彩标记标签,包括:默认绿 一共 10 种颜色

我也不知道为什么,这个东西在我这里就是有问题,不会提取到 `frontmatter.cover` ,而是采用文章的第一个图片。 后面成功实现了 Github Action 自动部署,发现正常了,但是把推送上去的 public 下载到本地进行 `hexo s` 还是有问题,总之就是很迷,以后应该会采用 action 自动部署的方式。之前改的源码也不能浪费,调整了一下设置为没有 `cover` 时,考虑自定义图片随机挑选,放弃了原来的根据 tags 搜索图片的设置,如果没有自定义图片就使用默认图片:
related_posts.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
    if (p) {
if (p.cover) {
if (p.cover.includes('/')) {
list.img = p.cover;
} else {
list.img = 'https://source.unsplash.com/1280x640/?' + p.cover;
}
+ } else if (cfg.selfimg.enable && cfg.selfimg.imgs && cfg.selfimg.imgs.length > 0) {
+ list.img = cfg.selfimg.imgs[Math.floor(Math.random() * cfg.selfimg.imgs.length)]
}else if (cfg.auto_cover && p.tags && p.tags.length > 0) {
var params = '';
p.tags.reverse().forEach((tag, i) => {
if (i > 0) {
params += ',';
}
params += tag.name;
});
list.img = 'https://source.unsplash.com/1280x640/?' + params;
}
}

related_posts 的问题在我本地上还是没有解决,如果我是通过本地发布,那么相关文章的图片将会是我自己设置的,如果是通过 Github Action 自动部署的那么将会是 cover 图片。所以看一下我文章相关文章大概就知道我最后一次发布是怎么发布的了。

部署效果:

Github Action

腾讯云 Serverless + Github Action 自动部署 Hexo 博客

footer.styl
1
2
3
4
5
    margin: 4px 0
line-height: 1.2
a
- text-decoration: underline
+ text-decoration: none

添加音乐播放器

播放器官网:myhkw
body 标签之前加入:

layout.ejs
1
2
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js" type="text/javascript"></script>
<script src="https://myhkw.cn/api/player/163072767496" id="myhk" key="" m="1"></script>

添加哔哔点啥

见:BBer:哔哔点啥-配置记录

自定义封面

layout\_partial\main\post_list\post_card.ejs
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
    } else if (theme.article.auto_cover) {
// 自动以 tags 作为关键词搜索封面
if (post.tags) {
var params = '';
post.tags.reverse().forEach((tag, i) => {
if (i > 0) {
params += ',';
}
params += tag.name;
});
cover_url = 'https://source.unsplash.com/1280x640/?' + params;
} else {
cover_url = 'https://source.unsplash.com/random/1280x640';
}
+ } else if (theme.article.default_cover.enable) {
+ cover_url = theme.article.default_cover.imgs[Math.floor(Math.random() * theme.article.default_cover.imgs.length)]
}

更换 HarmonyOS 字体

参考:Hexo Stellar 主题和 Next 主题使用 HarmonyOS 字体

  1. 修改主题文件 /source/css/_custom.styl,39行:
/source/css/_custom.styl
1
$ff-body = HarmonyOS_Regular
  1. 站点根目录设置文件 _config.yml 中添加 :
_config.yml
1
2
3
4
5
inject:
head:
- <link rel="preconnect" href="https://s1.hdslb.com/" />
- <link rel="stylesheet" href="//s1.hdslb.com/bfs/static/jinkela/long/font/regular.css" media="all" onload="this.media='all'" />
- <link rel="stylesheet" href="//s1.hdslb.com/bfs/static/jinkela/long/font/medium.css" media="all" onload="this.media='all'" />

打印本文:

"...\layout\_partial\main\article\article_footer.ejs" 文件添加如下代码:

1
2
3
4
5
6
7
8
9
if (theme.article.printpost && page.printpost != false) {
el += '<section id="printpost">';
el += '<div class="header">';
el += '<span>' + __('meta.printpost') + '</span>';
el += '<script>';
el += 'var pfHeaderImgUrl = "";var pfHeaderTagline = "";var pfdisableClickToDel = 0;var pfHideImages = 0;var pfImageDisplayStyle = "block";var pfDisablePDF = 0;var pfDisableEmail = 1;var pfDisablePrint = 0;var pfCustomCSS = "";var pfEncodeImages = 0;var pfShowHiddenContent = 0;var pfBtVersion="2";(function(){var js,pf;pf=document.createElement("script");pf.type="text/javascript";pf.src="//cdn.printfriendly.com/printfriendly.js";document.getElementsByTagName("head")[0].appendChild(pf)})();</script><a href="https://www.printfriendly.com" style="color:#6D9F00;text-decoration:none;" class="printfriendly" onclick="window.print();return false;" title="Printer Friendly and PDF"><img style="border:none;-webkit-box-shadow:none;box-shadow:none;" src="//cdn.printfriendly.com/buttons/printfriendly-pdf-button-nobg-md.png" alt="Print Friendly and PDF"/>';
el += '</a>';
el += '</section>';
}

注意 ‘meta.printpost’ 是主题文件中的 languages 文件,记得在其中设置相应的中英文。 并在 _config.stellar.yml 的 article 部分,添加:

1
2
article:
printpost: true

若设置为 printpost: true 则启用打印本文,反正关闭。