Hexo 博客使用 Stellar 主题美化,持续更新……
Stellar主题全面的配置文档可参考源码作者:Xaoxuu
添加运行时间/访问量

打开 _config.stellar.yml 文件,找到 footer,content: 改成:
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 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56
| content: | <center> <span> © 2024 <a style="font-weight: bold; auto;" target="_blank" rel="noopener" href="https://github.com/FelicxFoster">Felicx</a> 使用 <a style="font-weight: bold; auto;" target="_blank" rel="noopener" href="https://github.com/FelicxFoster/hexo-theme-stellar">Stellar</a> 创建 </span> <br> <!--不蒜子计数器--> <script async="" src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script> <!--添加一个访问量--> <span>总访问 <span id="busuanzi_value_site_pv" style="font-weight: bold;">113701</span> 次 | 本页访问 <span id="busuanzi_value_page_pv" style="font-weight: bold;">326</span> 次</span> </br> <span id="runtime_span"></span>
<script type="text/javascript"> document.addEventListener('DOMContentLoaded', function() { var runtime_span = document.getElementById('runtime_span'); function show_runtime() { // 调用定时器 setTimeout(show_runtime, 1000); var seconds = 1000; var minutes = seconds * 60; var hours = minutes * 60; var days = hours * 24; var years = days * 365; var today = new Date(); var todayYear = today.getFullYear(); var todayMonth = today.getMonth(); var todayDate = today.getDate(); var todayHour = today.getHours(); var todayMinute = today.getMinutes(); var todaySecond = today.getSeconds(); var t1 = Date.UTC(2018, 9, 12, 0, 0, 0); // UTC时间,月份从0开始 var t2 = Date.UTC(todayYear, todayMonth, todayDate, todayHour, todayMinute, todaySecond); var diff = t2 - t1; var diffYears = Math.floor(diff / years); var diffDays = Math.floor((diff / days) - diffYears * 365); var diffHours = Math.floor((diff - (diffYears * 365 + diffDays) * days) / hours); var diffMinutes = Math.floor((diff - (diffYears * 365 + diffDays) * days - diffHours * hours) / minutes); var diffSeconds = Math.floor((diff - (diffYears * 365 + diffDays) * days - diffHours * hours - diffMinutes * minutes) / seconds); // 更新显示时间的span元素内容 runtime_span.innerHTML = "🦉营业:" + diffYears + " 年 " + diffDays + " 天 " + diffHours + " 小时 " + diffMinutes + " 分钟 " + diffSeconds + " 秒🦉"; } show_runtime(); // 初次调用函数以启动定时器 }); </script> </center>
|
添加评论功能
目前 Staller 主题集成多种评论功能插件,包括 beaudar、utterances、giscus、twikoo、waline、artalk。我用的是giscus(因为它省事)。
打开 _config.stellar.yml 文件,找到 comments
选项,将 service
设置为 giscus
。
然后在下面找到
1 2
| # giscus # https://giscus.app/zh-CN
|
这两行注释
打开 giscus网站,按照教程一步一步写,最后找到
将里面的
1 2 3 4
| data-repo="xxx" data-repo-id="xxx" data-category="xxx" data-category-id="xxx"
|
一一填写到 _config.stellar.yml 文件那两行注释后面。
就像这样
1 2 3 4
| data-repo: AirTouch666/comment data-repo-id: xxx data-category: Announcements data-category-id: xxxxx
|
大功告成啦!
使用 fontawesome 动态图标
因为 Stellar 不再内置 fontawesome 图标库,所以我们需要手动添加。_config.yml 文件中,最后一行加入以下指令:
1 2 3
| inject: head: - <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
|
就可以愉快的使用 fontawesome 动态图标了。比如配置 footer 栏的图标,_config.stellar.yml 文件下,找到 footer
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
| footer: social: github: icon: '<i class="fa-solid fa-github fa-brands fa-bounce"></i>' url: title: 'Github' twitter: icon: '<i class="fa-brands fa-twitter fa-bounce"></i>' url: title: 'Twitter' bilibili: icon: '<i class="fa-brands fa-bilibili fa-bounce"></i>' url: title: 'Bilibili' zhihu: icon: '<i class="fa-brands fa-zhihu fa-bounce"></i>' url: title: 'Zhihu' email: icon: '<i class="fa-solid fa-envelope fa-bounce"></i>' url: title: 'Email' comments: icon: '<i class="fa-solid fa-comment fa-bounce"></i>' url: title: 'Comments'
|
文章前显示字数|阅读时长|标签
- 在 themes\stellar\layout\_partial\main\navbar\article_banner.ejs 中的 // 3.left.bottom 处,新增代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
| el += partial('dateinfo')
el += '<div class="flex-row" id="page-words"><span style="padding: 4px;">本文:' + wordcount(page.content) + '字</span><span class="sep updated" style="padding: 4px;"></span><span class="text updated" style="padding: 4px;">阅读时长:' + min2read(page.content) + '分</span></div>';
if (page.layout == "post" && page.tags && page.tags.length > 0) { el += '<div class="flex-row" id="tag">'; el += ' <span> 标签:</span>'; el += list_categories(page.tags, { class: "cap breadcrumb", show_count: false, separator: ' ', style: "none" }); el += ' </div>'; }
|
- 在 themes\stellar\source\css\_custom.styl 文件最后添加:
1 2 3 4 5 6 7 8 9 10
| .bread-nav div#page-words span.sep:before { content: '|'; } .bread-nav div#page-words span.updated { visibility: hidden; } .bread-nav:hover div#page-words span.updated { visibility: visible; }
|
页面底部字数统计
- 安装 hexo-wordcount 插件
1
| npm i hexo-wordcount –save
|
- 打开 themes/stellar/layout/_partial/main/footer.ejs 文件,找到 //footer
1 2 3 4 5 6 7
| el += '<div class="text">' if (content) { el += markdown(content) } el += '</div></footer>' return el
|
- 在
el += </div></footer>
前面加上:1
| el += '<span class="totalcount">共发表 ' + site.posts.length + ' 篇Blog · </span><span class="post-count">总计 ' + totalcount(site) + ' 字</span>'
|
- 在 themes\stellar\source\css\_custom.styl 文件最后添加:
1 2 3 4 5 6 7 8 9 10 11 12 13
| .post-count { scrollbar-width: none; color: var(--text-p2); } .totalcount { color: var(--text-p2); } .page-footer { text-align: center; margin: 0 auto; width: 100%; }
|
侧边栏欢迎语
- 在 themes\stellar\_data\widgets.yml 文件中新增一项侧边栏配置,写下你的网站欢迎语。
1 2 3 4 5 6 7 8 9
| welcome: layout: markdown title: 🎉欢迎 content: | 本站托管于Vercel, 加载缓慢请耐心等待,欢迎大家畅所欲言。 <hr style="border: 1px solid black; background-color: black;"> <span id="jinrishici-sentence"></span> <script src="https://sdk.jinrishici.com/v2/browser/jinrishici.js" charset="utf-8"></script>
|
- 修改主题配置 _config.stellar.yml,设置欢迎语出现的具体位置
1 2 3 4 5 6 7
| site_tree: home: leftbar: recent rightbar: welcome
|
memos 说说功能
想要实现 memos 功能,首先需要注册一个账号。注册账号可以使用别人已经搭建好的 memos,也可以自行搭建 memos(需要有服务器,我就不折腾了)。这里直接采用的杜老师的 memos。
- 查看教程,注册一个自己的账号
- 注册好后,在教程下面评论让杜老师帮忙查看自己的 ID
- 在博客 source 文件夹下,新建 bb 文件夹,在文件夹里新建 index.md,把下面的粘贴进去
1 2
| {% timeline api:https://s.dusays.com/api/v1/memo?creatorId={你的ID}&limit=10 type:memos avatar:{你的头像} %} {% endtimeline %}
|
- 如果需要在博客侧边栏 sidebar 中展示 memos,首先在 themes\stellar\_data\widgets.yml 中新增一条记录
1 2 3 4 5 6 7
| memos-du: layout: timeline title: 🥂哔哔广场 api: https://s.dusays.com/api/v1/memo?creatorId={你的ID} type: memos hide: user,footer
|
- 然后在 _config.stellar.yml 设置让其生效
1 2 3 4 5 6
| site_tree:
home: leftbar: recent rightbar: memos-du
|