很久之前，为了在主题中新增功能还是改主题文件实现的，不过因为没有用Git进行管理，后面带来一个很严重的问题：升级十分困难。
当然，即便早已摆脱了那种想升级又不敢升级的困境，我还是不喜欢对主题进行过多的侵入式修改，在前几个月我陆陆续续将主题中一些自定义的部分阉掉或通过外部注入实现，但随之而来又有一个问题：可自定义程度低。
罢了罢了，我自己写一篇文章来记录改动吧，免得以后出现问题时不知道怎么改回来。
非直接修改主题
烟花特效&运行时间&复制提醒&超链接图标
烟花特效&运行时间来自网络
加载动画
通过injector实现
对应的js
哔哔广场
与其说是广场，不如说是个人独秀（毕竟我这也不是正经的Memos
魔改自哔哔广场-木木木木木 (immmmm.com)
对应的js
配色方案
_config.stellar.yml1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
article:
category_color:
'日常生活': '#bf9936'
'技术分享': '#2196f3'
'瞎折腾': '#ef613f'
style:
color:
background: 'hsl(212 16% 98%)'
block: 'hsl(212 8% 95%)'
code: 'hsl(220 20% 10%)'
text: 'hsl(0 0% 20%)'
theme: 'hsl(88 76% 40%)'
accent: 'hsl(14 100% 57%)'
link: 'hsl(88 76% 40%)'
hover: 'hsl(14 100% 57%)'
|
直接修改主题
字数统计
themes\stellar\layout\_partial\main\footer.ejs1
2
3
4
5
6
7
8
9
10
11
12
| ...
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.ejs1
2
3
4
5
| ...
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.css1
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.ejs1
2
3
4
| ...
el += `<article class="${articleClass()}">`
el +=`<div id="gtime"></div>`
|
相关js参阅#烟花特效-运行时间-复制提醒-超链接图标
文章内标签显示
紧跟在文章内字数统计下方
themes\stellar\layout\_partial\main\navbar\article_banner.ejs1
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> 标签：</span>';
el += list_categories(page.tags, {
class: "cap breadcrumb",
show_count: false,
separator: ' ',
style: "none"
});
el += ' </div>';
}
|
显示Artalk最近评论
注释部分为头像获取
css:
source\mcss\mcss.css1
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.yml1
2
3
4
|
data_services:
artalk:
js: /js/services/artalk.js
|
组件引入：
source\_data\widgets.yml1
2
3
4
5
6
| new_comment:
layout: timeline
title: 最新评论
api: https://artalk.hzchu.top/api/v2/stats/latest_comments?site_name=Thun888
type: artalk
limit: 10
|
部分用语改动
themes\stellar\languages\zh-CN.yml1
2
3
4
| meta:
related_posts: 这些怎么样（￣︶￣）↗
search:
search: 搜搜看
|
