1. 修改Tag(s)井号

  • themes/Chic/layout/_page/post.ejs
1
2
3
4
// before
<a href="<%- url_for(item.path) %>"># <%- item.name %></a>
// after
<a href="<%- url_for(item.path) %>">🏷️<%- item.name %></a>

2. 文章字数和阅读时长

2.1 插件

1
npm i --save hexo-wordcount

2.2 配置文件

  • Chic/_config.yml添加内容
1
2
3
4
5
6
7
8
9
10
11
# Post wordcount display settings
# Dependencies: https://github.com/willin/hexo-wordcount

post_wordcount:
	item_text: true
	wordcount: true
	min2read: true
	# wordcout for total blog
	totalcount: false
post_wordcount_enable: true
post_min2read_enable: true
  • Chic/layout/_page/post.ejs
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
# 在该代码段之后
<% if(page.categories.length!==0 && theme.post_category_enable){ %>
    <span class="post-category">
Category:
        <% page.categories.forEach(item=>{ %>
            <a href="<%- url_for(item.path) %>"><%- item.name %></a>
        <% }) %>
    </span>
<% } %>

# 添加
<% if(page.content && theme.post_wordcount_enable){ %>
    <span class="post-count">
Words:
    <a href=""><%= wordcount(page.content) %></a> 
    </span>
<% } %>
<% if(page.content && theme.post_min2read_enable){ %>
    <span class="post-count">
Time:
    <a href=""><%= min2read(post.content) %>min</a> 
    </span>
<% } %>

3. Emoji

1
npm install hexo-filter-github-emojis --save

blog/_config.yml

1
2
3
4
5
6
githubEmojis:  
  enable: true  
  className: github-emoji  
  inject: true  
  styles:  
  customEmojis:

4. 网站浏览统计

4.1 CSS插件site-visitor.ejs

Chic/layout/_plugins/site-visitor.ejs添加内容

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// 引入插件 busuanzi.js
<script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>

<% if (theme.visit_counter.site_uv) { %>
    <span class="site-uv">
        Total visitors:
        <i class="busuanzi-value" id="busuanzi_value_site_uv"><i class="fa fa-spinner fa-spin"></i></i>
    </span>&nbsp;
<% } %>

<% if (theme.visit_counter.site_pv) { %>
    <span class="site-pv">
        | Total visits:
        <i class="busuanzi-value" id="busuanzi_value_site_pv"><i class="fa fa-spinner fa-spin"></i></i>
    </span>
<% } %>

4.2 修改页面布局

Chic/layout/_partial/footer.ejs，in tag <span><\span> add

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// befor
<footer id="footer" class="footer">
    <div class="copyright">
         <span>© <%= config.author %> | Powered by <a href="https://hexo.io" target="_blank">Hexo</a> & <a href="https://github.com/Siricee/hexo-theme-Chic" target="_blank">Chic</a></span> 
    </div>
</footer>

// after
<footer id="footer" class="footer">
    <div class="copyright">
        <span>
            © <%= config.author %> | Powered by 🥊
            <!-- 访客数量 -->
            <% if (theme.visit_counter) { %>
                <%- partial("../_plugins/site-visitor") %>
            <% } %>
        </span>
		</div>
</footer>

4.3 配置主题

Chic/_config.yml

1
2
3
4
# Record of visits  
visit_counter:   
  site_uv: true # num of visitors
  site_pv: true # num of visits

5. 图片插入设置

5.1 插件

1
npm install hexo-image-link --save

5.2 Hexo

blog/_config.yml

1
post-asset-folder: true

5.3 Typora

  • 设置->图像

6. 公式渲染设置

  • 首先安装插件hexo-math
1
npm install hexo-math --save
  • 在根目录下的_config.yml中加入：
1
2
3
4
5
6
math:
	engine: 'mathjax'
	mathjax:
		src: custom_mathjax_source
		config:
			# MathJax config
  • 在theme下的_config.yml中加入：
1
2
3
mathjax:
	enable: true
	import: demand
  • 更改hexo数学公式的渲染引擎

将默认的marked更换为kramed，之所以这么做，是因为hexo默认渲染引擎会将$$$$之间的下划线 _ 解析成HTML中的<i>。然而，在LaTex公式中，经常用下划线 _ 表示下标，这就导致冲突。而hexo-renderer-kramed在hexo-renderer-marked基础上修改了这个Bug。在安装hexo-renderer-kramed之前，需要卸载hexo-renderer-marked，顺序执行以下两行命令完成卸载与安装：

1
2
npm uninstall hexo-renderer-marked --save
npm install hexo-renderer-kramed --save
  • 解决语义冲突

在markdown中，斜体用下划线_或星号*表示，而在LaTex中，下划线_表示下标。为了解决这个冲突，需要修改两处。在博客根目录下，进入node_modules\kramed\lib\rules\inline.js，修改第11行escape变量的值（这一步是在原基础上对,{,}的转义(escape)）：

1
2
3
4
// before
escape: /^\\([\\`*{}\[\]()#$+\-.!_>])/,
// after
escape: /^\\([`*\[\]()#$+\-.!_>])/,

同时，把第20行的em变量也做相应的修改：

1
2
3
4
// before
em: /^\b_((?:__|[\s\S])+?)_\b|^\*((?:\*\*|[\s\S])+?)\*(?!\*)/,
// after
em: /^\*((?:\*\*|[\s\S])+?)\*(?!\*)/,

7. install

安装过程遇到vulnerabilities

1
npm install --no-audit