Stellar 建站记录 本文记录了自己使用Stellar主题建站时操作的一些内容，或简或繁，主要是为了方便日后主题升级，设备更换时能够顺利迁移。
目前我使用的`stellar 1.4.0` 版本还不支持自定义 `footer` (注:新版本已支持 ) ，但我需要放上 icp 备案等信息，于是修改了部分源码。我需要新设置两排内容，一排展示部署和图床信息，一排展示 icp 备案信息，最终呈现效果如下图：
需要设置三个部分
zh-CN.yml.footer 语言设置footer.ejs 设置_config.stellar.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'
其中 %s 为占位符，若使用多语言还需如此设置 zh-TW.yml 、en.yml。
在 ..\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 icp = theme.footer.icp; const cloud_server = theme.footer.cloud_server; const picture_bed = theme.footer.picture_bed; 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 : 要展示的图床信息
上述代码第二部分为插入要展示的信息。
在 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.icp、theme.footer.cloud_server、theme.footer.picture_bed。
2021.7.31 主题更新 Commit: custom footer ，可以使用 more 更优雅的实现上述内容，主题配置 footer.more 设置：
1 2 3 more: - '本站托管于 [腾讯云](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表情标签索引
修改 themes/stellar/source/css/_custom.styl :
1 2 3 :root --width-main : 820px
见：请作者喝咖啡–sponsor-page
示例：
next 主题的 label 标签仅对纯文本有效：
class: gray purple blue green orange yellow red
示例：
gray purple blue green orange yellow red
查看代码 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 图片。所以看一下我文章相关文章大概就知道我最后一次发布是怎么发布的了。
部署效果：
腾讯云 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)] }
参考：Hexo Stellar 主题和 Next 主题使用 HarmonyOS 字体
22.10.13更新：
主题在设置中可直接更换字体：
1 2 3 4 5 style: font-family: logo: system-ui, "Microsoft Yahei", "Segoe UI", -apple-system, Roboto, Ubuntu, "Helvetica Neue", Arial, "WenQuanYi Micro Hei", sans-serif body: HarmonyOS_Regular code: Menlo, Monaco, Consolas, system-ui, "Courier New", monospace, sans-serif
修改主题文件 /source/css/_custom.styl，39行：
/source/css/_custom.styl 1 $ff -body = HarmonyOS_Regular
站点根目录设置文件 _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 则启用打印本文，反正关闭。
xaoxuu 大佬在评论区提供了 Katex 公式在移动设备下超出显示的解决方案，用滚动条。为了避免在桌面端出现滚动条，加上主题原生的设备控制就好了：
1 2 3 .md p .katex-block @media screen and (max-width : $device-tablet) overflow: scroll;
这部分的随机自定义封面与 related_posts 随机选取图片作为相关文章封面 共用一个图片源，文章的 “banner” 用另一个图片库
需要修改三处主题代码：layout_partial\cover\post_cover.ejs、layout_partial\main\post_list\post_card.ejs、scripts\helpers\related_posts.js
三处代码修改如下：
layout_partial\cover\post_cover.ejs
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 <% function div() { var el = ''; - if ((page.banner == undefined || page.banner == false) && !theme.article.auto_banner) { + if (page.banner == false) { return el; } var url; if (page.banner != undefined) { if (page.banner.includes('/')) { url = page.banner; } else { url = 'https://source.unsplash.com/2000x400/?' + page.banner; } - } else { + } else if (theme.article.auto_banner && !theme.article.default_banner.enable) { // 自动以 tags 作为关键词搜索封面 if (page.tags) { var params = ''; page.tags.reverse().forEach((tag, i) => { if (i > 0) { params += ','; } params += tag.name; }); url = 'https://source.unsplash.com/2000x400/?' + params; } else { url = 'https://source.unsplash.com/random/2000x400'; } + } else if (theme.article.default_banner.enable) { + url = theme.article.default_banner.imgs[Math.floor(Math.random() * theme.article.default_cover.imgs.length)] }
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 18 19 20 21 22 23 24 25 26 27 28 - if (post.cover || theme.article.auto_cover) { + if (post.cover || theme.article.auto_cover || theme.article.default_cover.enable) { var cover_url; if (post.cover != undefined) { if (post.cover.includes('/')) { cover_url = post.cover; } else { cover_url = 'https://source.unsplash.com/1280x640/?' + post.cover; } - } else { + } else if (theme.article.auto_cover && !theme.article.default_cover.enable) { // 自动以 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)] }
scripts\helpers\related_posts.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 return ''; } const cfg = hexo.theme.config.article.related_posts; + const dfc = hexo.theme.config.article.default_cover; if (cfg.enable != true) return; var returnHTML = ""; var div = ` @ -42,7 +43,9 @@ hexo.extend.helper.register('popular_posts_wrapper', function(args){ } else { list.img = 'https://source.unsplash.com/1280x640/?' + p.cover; } - } else if (cfg.auto_cover && p.tags && p.tags.length > 0) { + } else if (dfc.enable && dfc.imgs && dfc.imgs.length > 0) { + list.img = dfc.imgs[Math.floor(Math.random() *dfc.imgs.length)] + } else if (cfg.auto_cover && p.tags && p.tags.length > 0) { var params = ''; p.tags.reverse().forEach((tag, i) => { if (i > 0) {
添加图片源
1 2 3 4 5 6 7 8 9 10 article: # 如果没有指定封面，是否根据 tags 作为关键词搜索封面？ auto_cover: true # search from https://source.unsplash.com/ auto_banner: true # search from https://source.unsplash.com/ + default_cover: + enable: true + imgs: + default_banner: + enable: true + imgs:
