很久之前，为了在主题中新增功能还是改主题文件实现的，不过因为没有用Git进行管理，后面带来一个很严重的问题：升级十分困难。

当然，即便早已摆脱了那种想升级又不敢升级的困境，我还是不喜欢对主题进行过多的侵入式修改，在前几个月我陆陆续续将主题中一些自定义的部分阉掉或通过外部注入实现，但随之而来又有一个问题：可自定义程度低。

罢了罢了，我自己写一篇文章来记录改动吧，免得以后出现问题时不知道怎么改回来。

叠甲

本文仅用作记录，不具备任何教程性质，仅供参考

注意

由于本站被恶意盗用，不再开源。若有需要可以参考以下信息

非直接修改主题

杂项

包括：烟花特效，运行时间，复制提醒，超链接图标等等，以注释为准

烟花特效&运行时间来自网络

加载动画

通过injector实现

对应的js

哔哔广场

与其说是广场，不如说是个人独秀（毕竟我这也不是正经的Memos

魔改自哔哔广场-木木木木木 (immmmm.com)

对应的js

配色方案

_config.stellar.yml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
######## Article ########
article:
  category_color:
    '生活小事': '#bf9936'
    '技术类': '#2196f3'
    '瞎折腾': '#ef613f'
    '杂文': '#9b47cf'
style:
  color:
    # 动态颜色（会根据明暗主题重设明度值，只用关心色相和饱和度即可）
    background: 'hsl(212 16% 98%)' # 浅色背景颜色
    block: 'hsl(212 8% 95%)' # 块背景颜色
    code: 'hsl(220 20% 10%)' # 'hsl(14 100% 48%)' # 行内代码颜色
    text: 'hsl(0 0% 20%)' # 文本颜色
    # 主题色配置（不会根据明暗动态调整，请设置为通用的颜色）
    # theme: 'hsl(192 98% 55%)' # 主题色
    theme: 'hsl(88 76% 40%)' # 主题色
    accent: 'hsl(14 100% 57%)' # 强调色
    link: 'hsl(88 76% 40%)' # 超链接颜色
    hover: 'hsl(14 100% 57%)' # 按钮高亮颜色

CSS样式调整

参考注释

部分引用来源

  1. 滚动条：纯 CSS 实现自定义浏览器滚动条 | liuzhen932 的小窝

直接修改主题

字数统计

themes\stellar\layout\_partial\main\footer.ejs
1
2
3
4
5
6
7
8
9
10
11
12
...
// footer
  el += '<div class="text">'
    if (content) {
      el += markdown(content)
    }
    el += '<script> var allpostscount = "' + site.posts.length + '" ;var allpostswords = "' + totalcount(site) + '";gtime_days = Math.floor((new Date() - new Date(' + page.updated + ')) / 1000 / 60 / 60 / 24);</script>'
    el += '</div></footer>'
    return el
  }
  %>
  <%- layoutDiv() %>

将字数信息引入到变量中供调用

1
<span id="timeDate">载入天数...</span><span>&</span><span id="times">载入时分秒...</span>，共发表了<span id="all-posts-count">load</span>篇文章，总计<span id="all-post-words">load</span>字

相关js参阅#杂项

文章内字数统计&阅读时长

themes\stellar\layout\_partial\main\navbar\article_banner.ejs
1
2
3
4
5
...
  // 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>';

CSS:

source\mcss\mcss.css
1
2
3
4
5
6
7
8
9
.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;
}

文章内过期提醒

变量获取一并放在footer里了

themes\stellar\layout\page.ejs
1
2
3
4
...
  el += `<article class="${articleClass()}">`
  //过期提醒容器
  el +=`<div id="gtime"></div>`

相关js参阅#杂项

文章内标签显示

紧跟在文章内字数统计下方

themes\stellar\layout\_partial\main\navbar\article_banner.ejs
1
2
3
4
5
6
7
8
9
10
11
12
//标签显示
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>';
}

显示Artalk最近评论

注释部分为头像获取

css:

source\mcss\mcss.css
1
2
3
4
5
6
7
8
.tag-plugin.timeline .body img[atk-emoticon] {
  max-height: 40px;
  display: initial;
  margin: 0;
}
.tag-plugin.timeline .body img {
  max-height: 200px;
}

注册为数据服务：

_config.stellar.yml
1
2
3
4
# 内置服务，按需加载（页面内用到了就会加载，没有用到就不会加载）
data_services:
  artalk:
    js: /js/services/artalk.js

组件引入：

source\_data\widgets.yml
1
2
3
4
5
6
new_comment:
  layout: timeline
  title: 最新评论
  api: https://artalk.hzchu.top/api/v2/stats/latest_comments?site_name=Thun888 # 此处为 Artalk API 地址，末尾为站点名称
  type: artalk
  limit: 10 # 限制获取数量，默认为 10

侧边栏

stellar\layout\_partial\widgets\toc.ejs
1
2
3
4
5
6
7
8
9
10
11
12
var relativePath = page.source;
<!-- 编辑本页 -->
el += `<a class="edit-btn" href="https://github.com/thun888/myblog/edit/main/source/${relativePath}">`
el += icon('myself:edit-twotone')
el += `<span>${__('btn.edit')}</span>`
el += `</a>`

<!-- 删除模式 -->
el += `<a class="delmode-btn" onclick="toggleDeleteMode()">`
el += icon('myself:close-circle')
el += `<span>${__('btn.delmode')}</span>`
el += `</a>`

部分用语改动

themes\stellar\languages\zh-CN.yml
1
2
3
4
meta:
  related_posts: 这些怎么样（￣︶￣）↗　
search:
  search: 搜搜看

配置

参考资料
许可协议

本文采用 署名-非商业性使用-相同方式共享 4.0 国际 许可协议，转载请注明出处。

分享文章

留下你的足迹吧~