Minos主题修改指南

对现在使用的 Minos 主题做了些修改, 做一下记录

再次更新

Log

2020.4.29

在github发布了修改版本

https://github.com/cjM00N/hexo-theme-minos

2020.4.28

新增友链页和选择的高亮样式

2020.4.25

更新了主题, 修复之前的html解析问题

Todo List

  • Friends 页样式
  • About 页样式
  • 侧边栏目录

主题更新(重要)

建议主题没有更新到最新版本的及时更新

更新方法是到主题目录下

git pull

即可

主要是修复了html代码在codeblock中的解析问题

对比如下, 修复前

修复后

也就是在codeblock中不会再解析<>

抛弃 Fontawesome(重要)

强烈建议放弃这个库, 因为他的引入资源已经超过了 1MB, 在网页加载中十分影响体验, 而且还有一点
他是单色的 hhh
本着轻量化(好看)的思想, 我们推荐使用阿里爸爸的
web 端使用
使用起来非常方便

  1. 选择图标, 然后添加到购物车车

  2. 把图标添加到项目, 如果没有的话会让你新建一个

  3. 生成链接

  4. 在代码中引入 js 和 css

  5. 将程序中的 fontawesome 标签替换掉
    如果你是 VSCode 党, 你可以添加一个 Global Snippet

     "iconfont": {
    "prefix": "icon",
    "body": [
    "<svg class=\"icon\" aria-hidden=\"true\">",
    "<use xlink:href=\"#$0\">>/use>",
    "</svg>"
    ],
    "description": "insert icon font"
    }

    然后输入icon就可以自动生成了, 再复制对应的标签名称即可

替换后就能感受到颜色的力量了

不不不, 主要还是快(认真)

然后我们把源码里面有些没有用 cdn 的都换上, ctrl+shift+f搜一下src, 挨个替换一下, 具体的 url 可以在这里找

https://cdnjs.com/

需要提醒一下, google 字体在国内是可以正常访问的, 不需要替换成国内源, 速度还不错, 还有我原来 cdn 用的是国内的loli.net, 但是有时候加载不上, 还是用cloudflare靠谱

延迟 Disqus 的加载

这个也是坑, 加载十分漫长, 我们根据大佬的博客

使 Disqus 不再拖累性能和页面加载

首先是取消 Disqus 的推广链接, 根据上面链接找一下就可以了, 然后我们打开

themes\minos\layout\comment\disqus.ejs

把大佬的代码复制一下

function loadDisqus(){
var disqus_config = function () {
this.page.url = '<%= page.permalink %>';
this.page.identifier = '<%= page.disqusId || page.path %>';
<% if (page_language()) { %>
this.language = '<%= getDisqusLanguage(page_language()) %>';
<% } %>
};
(function() {
var d = document, s = d.createElement('script');
s.async = true;
s.src = '//' + '<%= get_config('comment.shortname') %>' + '.disqus.com/embed.js';
s.setAttribute('data-timestamp', +new Date());
(d.head || d.body).appendChild(s);
})();
}

其实需要修改的地方就是把上面这段用一个函数包起来, 然后把下面的内容复制即可

// 通过检查 window 对象确认是否在浏览器中运行
var runningOnBrowser = typeof window !== "undefined";
// 通过检查 scroll 事件 API 和 User-Agent 来匹配爬虫
var isBot =
(runningOnBrowser && !("onscroll" in window)) ||
(typeof navigator !== "undefined" &&
/(gle|ing|ro|msn)bot|crawl|spider|yand|duckgo/i.test(
navigator.userAgent
));
// 检查当前浏览器是否支持 IntersectionObserver API
var supportsIntersectionObserver =
runningOnBrowser && "IntersectionObserver" in window;

// 一个小 hack,将耗时任务包裹在 setTimeout(() => { }, 1) 中,可以推迟到 Event Loop 的任务队列中、等待主调用栈清空后才执行,在绝大部分浏览器中都有效
// 其实这个 hack 本来是用于优化骨架屏显示的。一些浏览器总是等 JavaScript 执行完了才开始页面渲染,导致骨架屏起不到降低 FCP 的优化效果,所以通过 hack 将耗时函数放到骨架屏渲染完成后再进行。
setTimeout(function() {
if (!isBot && supportsIntersectionObserver) {
// 当前环境不是爬虫、并且浏览器兼容 IntersectionObserver API
var disqus_observer = new IntersectionObserver(
function(entries) {
// 当前视窗中已出现 Disqus 评论框所在位置
if (entries[0].isIntersecting) {
// 加载 Disqus
loadDisqus();
// 停止当前的 Observer
disqus_observer.disconnect();
}
},
{ threshold: [0] }
);
// 设置让 Observer 观察 #disqus_thread 元素
disqus_observer.observe(document.getElementById("disqus_thread"));
} else {
// 当前环境是爬虫、或当前浏览器其不兼容 IntersectionObserver API
// 直接加载 Disqus
loadDisqus();
}
}, 1);

注释很详细我就不瞎扯了, 效果提升巨大, 但是我还是达不到博客里面 100 分的效果, 不过结合上面的 iconfont 优化, 已经可以达到 84 分了, 基本能在 1-2s 内完成加载

Tags 页面修改

重大升级

打开下面的文件

theme/minos/layout/tags.ejs

我们使用全新的图标和 CSS, 首先添加 CSS 到 sytle.scss, 这里基本是照搬了Ayer主题的 css

a.tag.article-tag {
font-size: 0.9rem;
text-decoration: none;
margin: 5px;
padding: 0 14px;
display: inline-block;
text-align: center;
background: transparent;
height: 38px;
min-width: 80px;
line-height: 38px;
font-weight: 500;
border-radius: 5px;
word-wrap: break-word;
box-shadow: 0 3px 5px rgba(0, 0, 0, 0.08);
border: 1px solid #e7e7eb;
}

i.article-tag-num {
color: #007cfc !important;
font-style: normal;
margin-left: 10px;
}

然后我们修改原来的代码部分如下

<% (page._tags || page.tags).forEach(tag => {%>
<span class="column is-narrow">
<a class="tag is-light article-tag" href="<%= url_for(tag.path) %>"
><svg class="icon" aria-hidden="true">
<use xlink:href="#icon-Bookmark"></use></svg
>&nbsp;&nbsp;<%= tag.name %><i class="article-tag-num"
><%= tag.posts.length%></i
></a
>
</span>
<% }) %>

类似的, 我们可以修改 Categories 页和文章下面的标签, 效果如下

我好了我好了

友链页

参考 https://segmentfault.com/a/1190000021923137#item-3-16

自己修改了一部分实现

首先在

\themes\minos\layout

下新增一个friends.ejs

<style>
* {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}

.friends-container {
margin: 0 auto;
padding: 2rem 0;
width: 65vw;
display: -ms-grid;
display: grid;
gap: 15px;
-ms-grid-columns: (1fr)[2];
grid-template-columns: repeat(2, 1fr);
}

@media screen and (max-width: 1000px) {
.friends-container {
width: 95%;
display: block;
}
}

.friends-container .friend-card {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
padding: 10px;
-webkit-box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.1);
box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.1);
border: 1px solid rgba(0, 0, 0, 0.05);
}

@media screen and (max-width: 1000px) {
.friends-container .friend-card {
margin-bottom: 10px;
margin-left: 10px;
margin-right: 10px;
}
}

.friends-container .avatar {
width: 110px;
height: 110px;
-o-object-fit: cover;
object-fit: cover;
border-radius: 50%;
}

@media screen and (max-width: 1000px) {
.friends-container .avatar {
width: 80px;
height: 80px;
}
}

.friends-container .intro {
padding-left: 20px;
overflow: hidden;
text-overflow: ellipsis;
}

.friends-container .intro h3{
color: #555;
font-weight: 600;
font-size: 1.1rem;
}
.friends-container .intro p {
color: #555;
}

.friends-container .intro a {
color: #3b8bd0;
text-decoration: none;
}

</style>
<div class="friends-container">
<% if (site.data && site.data.friends) { %>
<% var friends = site.data.friends; %>
<% for (var i = 0, len = friends.length; i < len; i++) { %>
<% var friend = friends[i]; %>
<div class="friend-card">
<img
src="<%- friend.avatar %>"
class="avatar"
alt="logo"
/>
<div class="intro">
<h3 class="friend-name"><%- friend.name %></h3>
<a href="<%- friend.url %>">BLOG</a>
<p class="desc"><%- friend.introduction -%></p>
</div>
</div>
<% } %>
<% } %>
</div>

这里为了偷懒把css和模板嵌在一起, 写的比较丑还望见谅

感谢 @hoon 对于css样式的帮助

然后新建一个page

hexo new page friends

在文件夹

\source\friends

添加index.md文件, 内容如下

---
title: Friends
date: 2020-02-25 20:57:34
type: friends
layout: friends
comments: false
toc: false
---

之后需要添加我们的友链数据

新建文件夹

\source\_data

新建friends.json文件

[
{
"avatar": "",
"name": "",
"introduction": "",
"url": ""
},
{
"avatar": "",
"name": "",
"introduction": "",
"url": ""
}
]

到此所有准备工作结束, 渲染页面

hexo clean; hexo g;hexo d

效果如下

这里讲一下大概的思路, 我们知道hexo对于文件的模板选择, 会根据layout标签来读(默认为post), 然后调用对应的ejs, 所以我们在index.md中加入的是

type: friends
layout: friends

这里我不太确定type的作用, 应该类似于layout

在经过layout.ejs后会根据layout调用对应的ejs模板, 所以我们创建了friends.ejs

而存放友链的json数据则是放在\source\\_data\friends.json

在ejs模板中通过下面的代码去读

if (site.data && site.data.friends) {
var friends = site.data.friends;
for (var i = 0, len = friends.length; i < len; i++) {
var friend = friends[i];

了解过js的朋友应该很快就能看明白了, 这里就不废话了

选择样式更新

修改文件

\themes\minos\source\css\style.scss

添加下面的css代码

::selection {
text-shadow: none;
background-color: rgba(255,235,20,.7);;
color:rgba(0,0,0,.87);
}

修改后的效果如下

对比默认效果

截图来自google.com, 仅作对比, 内容无关

版权声明

使用的是

hexo-addlink

插件, 安装后在根目录的 _config.xml 中加入

_config.xml
addlink:
before_text: "<br/>{% colorquote info %}本文作者:author<br/>本文地址:"
after_text: "<br/>版权声明:除特别说明外,所有文章均采用 CC BY 4.0 许可协议,转载请先取得同意。{% endcolorquote %}"

效果如下

这里使用了 hexo-tag 插件优化引用效果, 不需要删除大括号内容即可

hexo-tag

这里主要是展示一下效果, 方便要用的时候可以调用, 具体可以看主题作者的使用说明

https://blog.zhangruipeng.me/hexo-theme-minos/Using-Hexo-Tag-Plugins-in-Minos/

{% colorquote [type] %}
text
{% endcolorquote %}

This is info text

This is success text

This is warning text

This is danger text

对于 VSCode 党, 可以添加 User Snippet, 首先在settings.json添加如下

"[markdown]": {
"editor.formatOnSave": true,
"editor.renderWhitespace": "all",
"editor.quickSuggestions": {
"other": true,
"comments": true,
"strings": true
},
"editor.acceptSuggestionOnEnter": "on"
},

然后就可以快乐的添加我们的 quote 了

固定导航栏

在多级界面的时候, 感觉还是固定导航栏更实用, 我的做法比较粗暴

theme/minos/source/js/script.js

第 18 行, 注释定时器即可

// setInterval(function() {
// if (didScroll) {
// hasScrolled();
// didScroll = false;
// }
// }, 250);

效果就是不会消失了 hhhh

文章访问计数

已废弃不蒜子

感觉看不到的数据和没有是一样的, 所以使用 LeanCloud 来替换文章统计, 首先要导出原来的数据
我们先随便抓一个不蒜子的访问包, 取出 url

http://busuanzi.ibruce.info/busuanzi?jsonpCallback=BusuanziCallback_203745179656

然后参考 导出不蒜子的访问量数据
其实就是先取出我们的所有文章 url, 再放到Referer字段去访问链接而已, 我的文章比较少, 后面都是手动更新的 hhh
后面我用的是hexo-leancloud-counter这个插件, 下面是官方的链接
Hexo LeanCloud Counter
不过有个地方需要注意的是, 如果要更新数据, 请在安装hookguard之前, 当然如果你已经安装了, 只需要随便找个 github 仓库的链接替换一下重新部署一个 hook, 更新数据后再部署回去即可
跟着文章操作完之后, 我们在模板的地方添加如下

<span class="column is-narrow article-category">
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-hot"></use>
</svg>&nbsp;&nbsp;热度: &nbsp;<\%- leancloud_counter({ action:'inc' }) %\><\%- leancloud_counter_script() %\> ℃
</span>

(为了避免被解析有些地方做了转义)
其中

leancloud_counter({ action:'inc' })

是输出的位置, 后面的函数则是引入脚本, 获取数据
我们的最终效果如下

RSS

使用的是

hexo-generator-feed

同样安装后在根目录的

_config.xml

添加下面的内容

_config.xml
feed:
type: atom
path: rss.xml
limit: 20
hub:
content:
content_limit:
content_limit_delim: ' '

再到

/theme/minos/_config.xml

添加图标

_config.xml
navbar_links:
RSS:
icon: fas fa-rss
url: /rss.xml

然后重新生成

hexo clean; hexo g;

效果如下

就可以快乐的添加订阅了

时间格式更新

将时间格式改为具体的日期, 其实就是改一下原来的moments库的设置, 全局搜一下format_date_full这个函数的实现, 在

themes\minos\scripts\99_content.js

改成

hexo.extend.helper.register(
"format_date_full",
injectMomentLocale(function(date) {
return moment(date).format("ll");
})
);

或者参考官方文档修改需要的样式都可

另外我对更新时间做了一点修改, 通过比较更新日期和发表日期, 如果不同, 则显示更新日期和更新图标, 如果相同则显示发表日期

<span class="column is-narrow">
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-clock"></use>
</svg>
<% if (!index) { %> <% if (format_date_full(post.date) !=
format_date_full(post.updated)) { %>
<time datetime="<%= date_xml(post.updated) %>" itemprop="datePublished"
><%= format_date_full(post.updated) %></time
><svg class="icon" aria-hidden="true" style="margin-left: 1px;">
<use xlink:href="#icon-new3"></use>
</svg>
<% } else { %>
<time datetime="<%= date_xml(post.date) %>" itemprop="datePublished"
><%= format_date_full(post.date) %></time
>
<% } %> <% } else { %>
<time datetime="<%= date_xml(post.date) %>" itemprop="datePublished"
><%= format_date_full(post.date) %></time
>
<% } %>
</span>

效果如下

image-20200306011233189


作者: cjm00n
地址: https://cjm00n.top/Blog/minos-modification-guide.html
版权声明: 除特别说明外,所有文章均采用 CC BY 4.0 许可协议,转载请先取得同意。

浅析CSRF的防御和攻击案例 2020年安恒4月月赛 writeup

评论