Hexo 博客使用 Stellar 主题美化,持续更新……

Stellar主题全面的配置文档可参考源码作者:Xaoxuu

使用右侧目录跳转食用更佳哦

添加运行时间/访问量

image-20250210165157211

打开 _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: | # 支持 Markdown 格式
<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>

添加评论功能

image-20250210165957078

目前 Staller 主题集成多种评论功能插件,包括 beaudar、utterances、giscus、twikoo、waline、artalk。我用的是giscus(因为它省事)。

打开 _config.stellar.yml 文件,找到 comments 选项,将 service 设置为 giscus

然后在下面找到

1
2
# giscus
# https://giscus.app/zh-CN

这两行注释

打开 giscus网站,按照教程一步一步写,最后找到

image-20250210170458655

将里面的

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'

文章前显示字数|阅读时长|标签

image-20250210172053482
  • 在 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
// 3.left.bottom
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>&nbsp标签:</span>';
el += list_categories(page.tags, {
class: "cap breadcrumb",
show_count: false,
separator: '&nbsp; ',
style: "none"
});
el += '&nbsp</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;
}

页面底部字数统计

image-20250212123009988
  • 安装 hexo-wordcount 插件
    1
    npm i hexo-wordcount –save
  • 打开 themes/stellar/layout/_partial/main/footer.ejs 文件,找到 //footer
    1
    2
    3
    4
    5
    6
    7
    // footer
    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%;
    }

侧边栏欢迎语

image-20250212130850123
  • 在 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 说说功能

image-20250212131206184

想要实现 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

共发表 5 篇Blog · 总计 4.4k 字
© 2025 AirTouch 使用 Stellar 创建
本站总访问量次 本站访客数人次 本文总阅读量