阅读更多

项目	描述
theme-yilia	hexo主题
theme-next	hexo主题
hexo-filter-sequence	hexo插件-序列图
hexo-filter-mermaid-diagrams	hexo插件-序列图
hexo-filter-plantuml	hexo插件-高级时序图
hexo-filter-flowchart	hexo插件-流程图
hexo-simple-mindmap	hexo插件-思维导图
hexo-markmap	hexo插件-思维导图
hexo-toc	hexo插件-目录
hexo-wordcount	hexo插件-字数统计
hexo-symbols-count-time	阅读时间统计

2 markdown-renderer

Hexo的多种Markdown渲染器对比分析

更换markdown渲染引擎，默认的是hexo-renderer-marked，换成hexo-renderer-markdown-it-plus（我更换渲染引擎的原因是，默认的引擎在更新之后，对加粗的支持反而变弱了，比如测试**加粗**测试）

# 卸载默认的渲染引擎
npm uninstall hexo-renderer-marked

# 安装新的渲染引擎
npm install hexo-renderer-markdown-it-plus

更换后会导致latex中无法通过\\进行换行，可以通过使用\begin{split}和\end{split}

$$
\begin{split}
&first \\
&second
\end{split}
$$

效果如下

$$\begin{split} &first \\ &second \end{split}$$

3 Math

Hexo渲染LaTeX公式

MathJax-配置

步骤1：安装插件

1 2	npm uninstall hexo-math --save npm install hexo-renderer-mathjax --save

步骤2：禁止markdown对-、\\、\{、\}等进行转义：修改配置文件node_modules/marked/lib/marked.js

将

1	escape: /^\\([\\`*{}\[\]()# +\-.!_>])/,

替换为

1	escape: /^\\([`*\[\]()# +\-.!_>])/,

将

1	em: /^\b_((?:[^_]\|*)+?)_\b\|^\((?:\\\|[\s\S])+?)\(?!\)/,

替换为

1	em: /^\((?:\\\|[\s\S])+?)\(?!\*)/,

3.1 Latex

LaTeX 格式、字母、符号、公式（总结）

4 Livere Comment System

来必力-配置

5 mermaid

hexo-filter-mermaid-diagrams

步骤1：安装插件

1	npm install hexo-filter-mermaid-diagrams --save

步骤2：修改主题配置文件themes/next/_config.yml，找到mermaid的配置项，将enable改为true即可

用法参考Markdown

6 plantuml

Doc：plantuml doc

步骤1：安装插件

1	npm install hexo-filter-plantuml --save

6.1 Example

源码：

skinparam backgroundColor #EEEBDC
skinparam handwritten true

skinparam sequence {
	ArrowColor DeepSkyBlue
	ActorBorderColor DeepSkyBlue
	LifeLineBorderColor blue
	LifeLineBackgroundColor #A9DCDF
	
	ParticipantBorderColor DeepSkyBlue
	ParticipantBackgroundColor DodgerBlue
	ParticipantFontName Impact
	ParticipantFontSize 17
	ParticipantFontColor #A9DCDF
	
	ActorBackgroundColor aqua
	ActorFontColor DeepSkyBlue
	ActorFontSize 17
	ActorFontName Aapex
}

actor User
box "foo1"
participant "First Class" as A
end box
box "foo2"
participant "Second Class" as B
end box
box "foo3"
participant "Last Class" as C
end box

User -> A: DoWork
activate A

A -> B: Create Request
activate B

B -> C: DoWork
activate C
C --> B: WorkDone
destroy C

B --> A: Request Created
deactivate B

A --> User: Done
deactivate A

渲染后：

7 sequence

hexo-filter-sequence

步骤1：安装插件

1	npm install --save hexo-filter-sequence

8 mindmap

8.1 simple-mindmap

hexo-simple-mindmap

步骤1：安装插件

1	npm install hexo-simple-mindmap

示例：

{% pullquote mindmap mindmap-md %}
- Test A
    - Test a
        - Test 1
        - Test 2
    - Test b
        - Test 3
        - Test 4
- Test B
    - Test c
        - Test 5
        - Test 6
    - Test d
        - Test 7
        - Test 8
{% endpullquote %}

效果：

Test A

Test a

Test 1

Test 2

Test b

Test 3

Test 4

Test B

Test c

Test 5

Test 6

Test d

Test 7

Test 8

8.2 markmap

hexo-markmap

步骤1：安装插件

1	npm install hexo-markmap --save-dev

示例：

{% markmap %}
- Test A
    - Test a
        - Test 1
        - Test 2
    - Test b
        - Test 3
        - Test 4
- Test B
    - Test c
        - Test 5
        - Test 6
    - Test d
        - Test 7
        - Test 8
{% endmarkmap %}

效果：

9 Toc

hexo-toc

步骤1：安装插件

1
2
3

npm uninstall hexo-toc --save
npm uninstall markdown-toc --save
npm install markdown-it-toc --save

10 Access Statistics

阅读次数统计-配置

解决使用LEANCLOUD配置NEXT主题文章浏览量显示不正常的问题

Hexo Next主题使用LeanCloud统计文章阅读次数、添加热度排行页面

步骤1：安装插件

1	npm install hexo-leancloud-counter-security --save

步骤2：编辑主题配置文件

关闭leancloud_visitors配置
- enable置为false
打开valine配置
- enable设置为true
- 配置appid以及appkey
- visitor设置为true

步骤3：编辑站点配置文件

deploy:
...
- type: leancloud_counter_security_sync
...

leancloud_counter_security:
  enable_sync: true # 先关了，开启有问题，总是报 Too many requests. [429 GET https://qhehlume.api.lncld.net/1.1/classes/Counter]
  app_id: xxx
  app_key: xxx
  server_url: https://leancloud.cn # 内地region需要配置这个
  username: 'liuyehcf'
  password: '19990101' # 究极大坑，这里需要用引号

11 Local Search

步骤1：安装插件

1	npm install hexo-generator-searchdb --save

本地搜索-配置

搜索失效

Mac 上的 VSCode 编写 Markdown 总是出现隐藏字符？

11.1 How to title-only search?

For theme next, we can modify source/js/local-search.js like this:

@@ -91,6 +91,7 @@ document.addEventListener('DOMContentLoaded', () => {
   const inputEventFunction = () => {
     if (!isfetched) return;
     let searchText = input.value.trim().toLowerCase();
+    let onlyTitle = searchText.startsWith('title:');
     let keywords = searchText.split(/[-\s]+/);
     if (keywords.length > 1) {
       keywords.push(searchText);
@@ -106,7 +107,9 @@ document.addEventListener('DOMContentLoaded', () => {
         let searchTextCount = 0;
         keywords.forEach(keyword => {
           indexOfTitle = indexOfTitle.concat(getIndexByWord(keyword, titleInLowerCase, false));
-          indexOfContent = indexOfContent.concat(getIndexByWord(keyword, contentInLowerCase, false));
+          if (!onlyTitle) {
+            indexOfContent = indexOfContent.concat(getIndexByWord(keyword, contentInLowerCase, false));
+          }
         });

         // Show search results

12 Background Animation

背景动画-配置

hexo new page "explore"

修改主题配置文件/themes/next/_config.yml

menu:
  home: / || home
  about: /about/ || user
  tags: /tags/ || tags
  categories: /categories/ || th
  archives: /archives/ || archive
  explore: /explore/ || sitemap # 添加这个

修改国际化配置文件/themes/next/languages/_en.yml

menu:
  home: Home
  archives: Archives
  categories: Categories
  tags: Tags
  about: About
  explore: Explore  # 添加这个
  search: Search
  schedule: Schedule
  sitemap: Sitemap
  commonweal: Commonweal 404

修改国际化配置文件/themes/next/languages/zh-CN.yml

menu:
  home: 首页
  archives: 归档
  categories: 分类
  tags: 标签
  about: 关于
  explore: 发现  # 添加这个
  search: 搜索
  schedule: 日程表
  sitemap: 站点地图
  commonweal: 公益404

主题配置文件修改如下配置，将number改为false即可

toc:
  enable: true

  # Automatically add list number to toc.
  number: false 

  # If true, all words will placed on next lines if header width longer then sidebar width.
  wrap: false

15 Modify Inline Code Style

修改方式（这个方式在最新的next版本中好像失效了）：在themes/next/source/css/_custom/custom.styl中增加如下代码

// Custom styles.
code {
    color: #C33258;
    background: #F9F2F4;
    margin: 2px;
}

修改方式：在themes/next/source/css/_common/scaffolding/highlight/highlight.styl中修改code的样式定义

// Custom styles.
code {
    color: #C33258;
    background: #F9F2F4;
    margin: 2px;
}

16 Modify Link Style

链接即如下的语法

1 2	{% post_link <文章名> %} [description](url)

修改方式：在themes\next\source\css\_common\components\post\post.styl中增加如下代码

// 文章链接文本样式
.post-body p a{
  color: #0593d3;
  border-bottom: none;
  border-bottom: 1px solid #0593d3;
  &:hover {
    color: #fc6423;
    border-bottom: none;
    border-bottom: 1px solid #fc6423;
  }
}

17 Adjust Font Size in the NexT Theme

文件相对路径：themes/next/source/css/_variables/base.styl

将Font size以及Headings font size部分的配置修改成如下内容

// Font size
$font-size-base           = 14px
$font-size-base           = unit(hexo-config('font.global.size'), px) if hexo-config('font.global.size') is a 'unit'
$font-size-small          = $font-size-base - 2px
$font-size-smaller        = $font-size-base - 4px
$font-size-large          = $font-size-base + 2px
$font-size-larger         = $font-size-base + 4px

// Headings font size
$font-size-headings-step    = 2px
$font-size-headings-base    = 24px
$font-size-headings-base    = unit(hexo-config('font.headings.size'), px) if hexo-config('font.headings.size') is a 'unit'
$font-size-headings-small   = $font-size-headings-base - $font-size-headings-step
$font-size-headings-smaller = $font-size-headings-small - $font-size-headings-step
$font-size-headings-large   = $font-size-headings-base + $font-size-headings-step
$font-size-headings-larger  = $font-size-headings-large + $font-size-headings-step

18 Pin Post

步骤1：安装插件

1 2	npm uninstall hexo-generator-index --save npm install hexo-generator-index-pin-top --save

然后在文章的header中加上top:true即可，例如

---
title: test
tags:
  - test
categories:
  - test
date: 2021-09-11 11:45:59
top: true
---

19 Deploy

步骤1：安装插件

1	npm install hexo-deployer-git --save

nodejs更新后hexo没法deploy

20 Config Migration

参考hexo-README，安装hexo
参考theme-next-README，安装hexo主题theme-next
在老电脑上查看theme-next的修改项，将改动应用于新电脑，由于新老电脑theme-next的版本可能不一致，所以可能存在一些差异，看情况调整即可
修改站点配置文件，该文件没有被git仓库管理，修改前备份一下。并根据老电脑上的改动项依次调整即可，主要包含如下几个配置
- title
- description
- author
- language
- theme
- deploy
- search

npm uninstall hexo-renderer-marked
npm install hexo-renderer-markdown-it-plus

npm uninstall hexo-math --save
npm install hexo-renderer-mathjax --save

npm install hexo-filter-mermaid-diagrams --save

npm install hexo-filter-plantuml --save

npm install --save hexo-filter-sequence

npm install hexo-simple-mindmap

npm install hexo-markmap --save-dev

npm uninstall hexo-toc --save
npm uninstall markdown-toc --save
npm install markdown-it-toc --save

npm install hexo-leancloud-counter-security --save

npm install hexo-generator-searchdb --save

npm uninstall hexo-generator-index --save
npm install hexo-generator-index-pin-top --save

Liuye Notebook

Hexo

2 markdown-renderer

3 Math

3.1 Latex

4 Livere Comment System

5 mermaid

6 plantuml

6.1 Example

7 sequence

8 mindmap

8.1 simple-mindmap

8.2 markmap

9 Toc

10 Access Statistics

11 Local Search

11.1 How to title-only search?

12 Background Animation

13 Add Menu Bar

14 Disable Sidebar Numbering

15 Modify Inline Code Style

16 Modify Link Style

17 Adjust Font Size in the NexT Theme

18 Pin Post

19 Deploy

20 Config Migration

21 参考

1 Hexo related projects

2 markdown-renderer

3 Math

3.1 Latex

4 Livere Comment System

5 mermaid

6 plantuml

6.1 Example

7 sequence

8 mindmap

8.1 simple-mindmap

8.2 markmap

9 Toc

10 Access Statistics

11 Local Search

11.1 How to title-only search?

12 Background Animation

13 Add Menu Bar

14 Disable Sidebar Numbering

15 Modify Inline Code Style

16 Modify Link Style

17 Adjust Font Size in the NexT Theme

18 Pin Post

19 Deploy

20 Config Migration

21 参考