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

一键配置Stellar 配置文件在 themes\stellar_config.yml 下面，一般不要直接修改，我们可以在博客根目录下建一个 _config.stellar.yml，在这个文件中的配置信息优先级高于主题文件夹中的配置文件。

然后直接把 themes\stellar_config.yml 里面的复制粘贴进来，再对 _config.stellar.yml 修改即可。

字体设置效果展示开始部署

_config.yml 文件中，最后一行加入以下指令：123inject: head: -

在 _config.stellar.yml 中找到 style.font-family，修改以下内容：1234style: font-family: logo: '"LXGW WenKai Screen", system-ui, ...' body: '"LXGW WenKai Screen", system-ui, ...'

添加运行时间/访问量效果展示开始部署_config.stellar.yml 文件下，找到 footer，在 content: 之后添加以下代码：

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556content: | # 支持 Markdown 格式

© 2024 Felicx 使用 Stellar 创建
总访问 113701 次 | 本页访问 326 次

添加评论功能效果展示开始部署目前 Staller 主题集成多种评论功能插件，包括 beaudar、utterances、giscus、twikoo、waline、artalk。今日来探讨 waline。

配置 waline，参考我的另一篇文章：Hexo 博客美化

在博客配置文件 _config.stellar.yml 中启用 waline 评论1234567891011121314151617######## Comments ########comments: service: waline # beaudar, utterances, giscus, twikoo, waline, artalk comment_title: 快来参与讨论吧~ # Waline # https://waline.js.org/ waline: js: https://gcore.jsdelivr.net/npm/@waline/client@3.1.3/dist/waline.js css: https://gcore.jsdelivr.net/npm/@waline/client@3.1.3/dist/waline.css meta_css: https://gcore.jsdelivr.net/npm/@waline/client@3.1.3/dist/waline-meta.css # Waline server address url, you should set this to your own link serverURL: https://waline.js.org/ # 这里改成自己的链接 locale: placeholder: 😎嗨，朋友，留下脚印再走呗。 reaction: true

使用 fontawesome 动态图标效果展示开始部署因为 Stellar 不再内置 fontawesome 图标库，所以我们需要手动添加。_config.yml 文件中，最后一行加入以下指令：

123inject: head: -

就可以愉快的使用 fontawesome 动态图标了。比如配置 footer 栏的图标，_config.stellar.yml 文件下，找到 footer

12345footer: social: github: icon: '' title: 'Github'

给超长代码块增加滚动条效果展示开始部署首先判断代码块是否过长，如果是，则设置最大高度并开启滚动。在 themes\stellar\source\js\ 中新建 custom.js

1234567891011121314151617181920// 给超长代码块增加滚动条function adjustCodeBlockHeight() { document.addEventListener("DOMContentLoaded", function () { // 选择所有的.md-text元素 var codeBlocks = document.querySelectorAll('.md-text'); // 遍历每个.md-text元素 codeBlocks.forEach(function (block) { // 检查是否包含.highlight类的子元素，且父元素高度超过500px var highlightBlocks = block.querySelectorAll('.highlight'); highlightBlocks.forEach(function (highlightBlock) { if (highlightBlock.clientHeight > 800) { highlightBlock.style.maxHeight = '300px'; highlightBlock.style.overflow = 'auto'; } }); }); });}adjustCodeBlockHeight()

在 _config.yml 文件中，最后一行加入以下指令：

12345inject: script: # 自定义js - -

需要注意的是，Stellar 主题有 tabs 分栏容器，如果在容器中写入长代码，这段 js 是不生效的。因为这时候生成的 HTML 结构可能与原始代码块不同，导致 JavaScript 选择器无法正确找到目标元素。解决方法也很简单，可以直接在 Markdown 文件中使用内联样式来设置代码块的最大高度和滚动条。

1234567

```javascript // 这里是你的代码 function example() { console.log("Hello, world!"); }

文章面包屑显示字数|阅读时长|标签效果展示开始部署

在 themes\stellar\layout_partial\main\article_banner.ejs 中的 // 3.left.bottom 处，新增代码：12345678910111213141516// 3.left.bottomel += partial('dateinfo')//新增：字数显示|阅读时长显示el += '

本文：' + wordcount(page.content) + '字阅读时长：' + min2read(page.content) + '分
';//新增：标签显示if (page.layout == "post" && page.tags && page.tags.length > 0) { el += '
'; // 将标签容器的创建移动到条件内部 el += '  标签：'; el += list_categories(page.tags, { class: "cap breadcrumb", show_count: false, separator: '  ', style: "none" }); el += ' 
';}

在 themes\stellar\source\css_custom.styl 文件最后添加：12345678910/* 文章内字数统计&阅读时长 */.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 插件：npm i hexo-wordcount –save

themes/stellar/layout/_partial/main/footer.ejs 文件中，找到 //footer1234567// footerel += '

'if (content) { el += markdown(content)}el += '
'return el

在 el += '