道隐无名
道隐无名
文章178
标签37
分类11
回到首页
文章归档
我的朋友
给我赞助
关于博主
© 2023 道隐无名 Powered by Hexo & Nexmoe

网站备案是不可能备案的，这辈子都不可能进行网站备案的

地狱通信

本站访客数人次 & 本站总访问量次

搭建Hexo静态博客

搭建Hexo静态博客

2018年08月18日
约 17.3k 字   预计需要 81 分钟   阅读量

Hexo静态博客

前置条件

一、下载安装Node.js

https://nodejs.org/zh-cn/download

二、下载安装Git

https://git-scm.com/downloads

检测安装是否成功：

1
2
3
node -v
npm -v
git --version

三、使用Git同步本地项目到Github（可选）

1、准备

1
2
3
4
5
6
7
8
9
10
11
12
13
#设置git用户名和git邮箱（随便写，和Github的用户名和邮箱无关）
git config --global user.name 'your_name'
git config --global user.email 'your_email'

#生成SSH密匙，这里的your_email和你设置的git邮箱一致，其实无所谓啦因为-C comment是提供一个新注释
ssh-keygen -t rsa -C 'your_email'

#指令执行后会让你确定密钥保存地址和设置密码，这些不用管，全部回车就好

#复制新生成的id_rsa.pub文件中的内容即公钥（打开复制）到github的setting/SSH AND GPG KEY/SSH keys

#最后测试是否关联成功,git bash输入ssh git@github.com, 如果提示successfully authenticated则成功
ssh git@github.com

2、同步

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
#cd到本地项目目录（也可以直接进入此目录然后右击Git Bash）

#初始化git仓库
git init

#把所有项目文件添加到提交暂存区
git add .

#把暂存区中的内容提交到本地仓库
git commit -m '提交说明'

#关联本地仓库和远程仓库（远程仓库提前创建）
git remote add origin https://github.com/DeltaPainS/test1
#git remote add origin git@github.com:[githubUerName]/[resName]

#远程仓库有README.md，可拉取一下
git pull --rebase origin main

#把本地仓库内容push到远程仓库的main分支
git push -u origin main

3、常见问题

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
Q：push时报错不能覆盖远程仓库代码
A：事实上远程仓库是新建的，里边或许有个README.md，就再没有其他，故直接用-f强制覆盖即git push -uf origin main

Q：error: failed to push some refs to...
A：出现错误的主要原因是github中的README.md文件不在本地代码目录中。解决办法是先执行git pull --rebase origin main，然后执行git push -u origin main

github在2020/10/1宣布所有新库都将用中性词「main」命名，取代原来的「master」，如果我们通过git push -u grigin master方法上传仓库，在github仓库中就会出现一个master的分支。
最恶心的地方是Git本地仓库的分支是master，而Github远程仓库的分支现在变成了main，原因见链接。这个坑花了很长时间才勉强解决。本地分支仍旧为master，这就导致上传之后仓库有两个分支，还得手动合并，很麻烦。不如直接把本地的分支也修改为main。


以下是一种待改进的解决方案：
#新建main分支，并转至main分支
git checkout -b main
#合并两个分支
git merge master
#然后就可以进行add、commit操作
#最后将本地main分支推送至远程的main分支
git push -u origin main

更好的解决方案：
#强制重命名分支名字为main
git branch -M main

最好的解决方案：
git --version  #查看版本
git config --global init.defaultBranch main  #git在2.28.0及以上，重新设置git默认分支为main

相关链接：https://www.jianshu.com/p/e8342a72c101

四、安装OpenSSH

需要在应用的可选功能中手动安装OpenSSH，安装后才可以使用ssh命令（太麻烦，不如直接使用git bash的ssh）。

五、命令行终端使用代理

1
2
3
4
5
6
7
8
9
10
#不使用代理访问不了
curl google.com
#设置了代理就可以访问了
set http_proxy=http://127.0.0.1:7890
set https_proxy=http://127.0.0.1:7890
curl google.com
set #查看环境变量
#不要用ping命令，ping走的是另一种协议，ping测不出来走没走代理

#以上设置的代理只能在当前终端生效，如果想要都生效，一种办法是Clash的TUN模式

​

​

Hexo安装

零、官方文档

https://hexo.io/zh-cn/docs/

吐槽：官方文档不更新，实践起来有很多坑哦

一、全局安装hexo-cli

1
2
3
4
5
#安装
npm install hexo-cli -g

#查看版本
hexo -v

二、搭建Github仓库

因为Hexo是静态博客，所以生成后可以直接部署到Github Pages，这样就不需购买VPS和域名了。

1、创建Github存储库，这里有个重点是仓库名字必须是 用户名.github.io

2、生成 SSH Keys，这里生成需要SSH客户端，在安装Git时会安装SSH，但是没有安装Git也有这个命令工具，说明微软将一个集成的OpenSSH客户端带到Windows上，可能只在专业版和企业版有（需要在应用的可选功能中手动安装OpenSSH），算了暂且不管这些发展历史。

1
ssh-keygen -t rsa -C "github账号"

具体可参考：本地创建和管理SSH密钥

3、生成之后，找到.ssh 的文件夹，找到一个名为 id_rsa.pub 的文件，将里面所有的内容全部选中复制下来。Github上找到用户头像下面的 setting 选项，找到 SSH and GPG keys 这个选项，然后点击 New SSH Key 创建一个新的 SSH，给这个新的 SSH 取一个名字，然后将刚才复制的所有内容粘贴进 Key 框中，最后点击 Add SSH key，创建成功。简而言之就是上传公钥。

4、测试，检查 SSH 是否创建成功。出现 Hi XXXXX，就是创建成功了

1
ssh -T git@github.com

三、博客搭建

1、博客生成

1
2
#指定位置运行命令，初始化生成文件夹（博客文件夹）
hexo init HxH

2、进入此目录进行本地运行，访问测试

1
2
cd HxH
hexo s

3、本地测试没问题后可以部署到Github仓库

修改_config.yml配置文件指明部署位置

1
2
3
4
5
6
7
8
# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
  type: git
  repo: https://github.com/DeltaPainS/DeltaPainS.github.io
  branch: [main]
 
# 注意YAML配置文件的格式，前后空格不能错

安装hexo git部署模块

1
npm install hexo-deployer-git --save

部署

1
hexo deploy

4、其它常用命令

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
#新建文章
hexo new "My New Post"
#本地运行
hexo server
#清理
hexo clean
#重新生成
hexo generate
#部署
hexo deploy

#常用操作
hexo clean && hexo g
hexo s
hexo d

#注意，所有命令都需要进入创建的博客文件夹中执行

5、自定义域名

1
2
购买域名，并添加A记录和CNAME记录（IP可以通过ping DeltaPainS.github.io获取）
博客仓库添加CNAME文件，其内容为购买的域名（二级域名）

6、安全证书（https）

自定义域名静态托管不用管这个，申请免费SSL证书的方式有很多，如CloudFlare、宝塔、acme.sh、freessl等

参考：https://zhuanlan.zhihu.com/p/174755007

7、遇到的问题

1
2
3
4
#错误：hexo d unable to auto-detect email address
#解决：使用下面命令添加邮箱和主机名
git config --global user.email "you@example.com"
git config --global user.name "Your Name"

​

​

主题配置

一、常见主题

1、hexo-theme-next：https://github.com/iissnan/hexo-theme-next、https://github.com/next-theme/hexo-theme-next

2、pacman：https://github.com/A-limon/pacman

3、hexo-theme-yilia：https://github.com/litten/hexo-theme-yilia

4、landscape-plus：https://github.com/xiangming/landscape-plus

5、jacman：https://github.com/wuchong/jacman

6、hexo-theme-freemind：https://github.com/wzpan/hexo-theme-freemind

7、hexo-theme-hueman：https://github.com/ppoffice/hexo-theme-hueman

8、hexo-theme-strict：https://github.com/17/hexo-theme-strict

9、hexo-theme-raytaylorism：https://github.com/raytaylorlin/hexo-theme-raytaylorism

10、hexo-theme-landscape：https://github.com/hexojs/hexo-theme-landscape

11、hexo-theme-noderce：https://github.com/willerce/hexo-theme-noderce

12、huno：https://github.com/letiantian/huno

13、hexo-theme-stellar：https://github.com/xaoxuu/hexo-theme-stellar

14、hexo-theme-fluid：https://github.com/fluid-dev/hexo-theme-fluid

15、hexo-theme-matery：https://github.com/blinkfox/hexo-theme-matery

16、hexo-blog-fly：https://github.com/shw2018/hexo-blog-fly

17、fexo：https://github.com/forsigner/fexo

18、hexo-theme-freemind.386：https://github.com/blackshow/hexo-theme-freemind.386

19、hexo-theme-yun：https://github.com/YunYouJun/hexo-theme-yun

20、hexo-theme-nexmoe：https://github.com/theme-nexmoe/hexo-theme-nexmoe

21、hexo-theme-butterfly：https://github.com/jerryc127/hexo-theme-butterfly

22、hexo-theme-icarus：https://github.com/ppoffice/hexo-theme-icarus

23、hexo-theme-volantis：https://github.com/volantis-x/hexo-theme-volantis

24、hexo-theme-snippet：https://github.com/shenliyang/hexo-theme-snippet

25、Hacker：https://github.com/CodeDaraW/Hacker

26、hexo-theme-Chic：https://github.com/Siricee/hexo-theme-Chic

27、hexo-theme-yelee：https://github.com/MOxFIVE/hexo-theme-yelee

说明：这些主题只是稍微预览一下，没有具体阅读说明文档有什么功能或个性化设置，仅仅凭感觉觉得还可以。加粗的优先考虑，没时间一一尝试，要求是简洁优雅、设计美感、功能丰富，更重要的不是博客内容吗？

此次选择：hexo-theme-nexmoe

更多主题详见：

（1）https://github.com/topics/hexo-theme

（2）https://hexo.io/themes/

（3）谷歌搜索Hexo主题推荐

​

二、配置hexo-theme-nexmoe主题

零、安装nexmoe主题

安装（这样安装是安装在node_modules下，而不是在themes文件夹中，两者区别是什么？）

1
npm i hexo-theme-nexmoe

博客相关的目录及文件说明

1
2
3
4
5
6
7
8
.
├── _config.yml		#网站的配置信息
├── package.json	#应用程序的信息。EJS,Stylus和Markdown renderer已默认安装，您可以自由移除。
├── scaffolds		#模版文件夹。当您新建文章时，Hexo会根据scaffold来建立文件。
├── source			#资源文件夹是存放用户资源的地方。除_posts文件夹之外的其它_开头的文件或文件夹将会被忽略。
|   ├── _drafts
|   └── _posts		#文章目录
└── themes			#主题文件夹。Hexo会根据主题来生成静态页面。

主题官方文档参考：https://docs.nexmoe.com/zh/v4.0/

一、修改博客中的全局配置文件_config.yml，主要修改的地方是网站、主题和部署。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/

# Site
title: 道隐无名
subtitle: 'HxH'
description: '一切有为法，如梦，如幻，如泡，如影，如露，亦如电，应作如是观'
keywords: X 宗教 哲学 科学 艺术 历史 社会 心理
author: DeltaPainS
language: zh-CN
timezone: 'Asia/Shanghai'

# URL
## Set your site url here. For example, if you use GitHub Page, set url as 'https://username.github.io/project'
url: https://deltapains.github.io/
permalink: :year/:month/:day/:title/
permalink_defaults:
pretty_urls:
  trailing_index: true # Set to false to remove trailing 'index.html' from permalinks
  trailing_html: true # Set to false to remove trailing '.html' from permalinks

# Directory
source_dir: source
public_dir: public
tag_dir: tags
archive_dir: archives
category_dir: categories
code_dir: downloads/code
i18n_dir: :lang
skip_render:

# Writing
new_post_name: :title.md # File name of new posts
default_layout: post
titlecase: false # Transform title into titlecase
external_link:
  enable: true # Open external links in new tab
  field: site # Apply to the whole site
  exclude: ''
filename_case: 0
render_drafts: false
post_asset_folder: false
relative_link: false
future: true
highlight:
  enable: true
  line_number: true
  auto_detect: true
  tab_replace: ''
  wrap: true
  hljs: true
prismjs:
  enable: false
  preprocess: true
  line_number: true
  tab_replace: ''

# Home page setting
# path: Root path for your blogs index page. (default = '')
# per_page: Posts displayed per page. (0 = disable pagination)
# order_by: Posts order. (Order by date descending by default)
index_generator:
  path: ''
  per_page: 10
  order_by: -date

# Category & Tag
default_category: uncategorized
category_map:
tag_map:

# Metadata elements
## https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta
meta_generator: true

# Date / Time format
## Hexo uses Moment.js to parse and display date
## You can customize the date format as defined in
## http://momentjs.com/docs/#/displaying/format/
date_format: YYYY-MM-DD
time_format: HH:mm:ss
## updated_option supports 'mtime', 'date', 'empty'
updated_option: 'mtime'

# Pagination
## Set per_page to 0 to disable pagination
per_page: 15
pagination_dir: page

# Include / Exclude file(s)
## include:/exclude: options only apply to the 'source/' folder
include:
exclude:
ignore:

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: nexmoe
plugins:
  hexo-generator-feed
#Feed Atom
feed:
  type: atom
  path: atom.xml
  limit: 20

# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
  type: git
  repo: https://github.com/DeltaPainS/DeltaPainS.github.io # https://bitbucket.org/JohnSmith/johnsmith.bitbucket.io
  branch: [main]

#post_asset_folder
#post_asset_folder: true

# comment: valine
# valine: 
#   appId: xxxx # leancloud application app id
#   appKey: xxxx # leancloud application app key

# If you want to use MetingJS in hexo-tag-aplayer, you need enable it in _config.yml
aplayer:
  meting: true
  asset_inject: false # 关闭自动脚本插入

网站配置文件_config.yml的内容说明：https://hexo.io/zh-cn/docs/configuration

注：要严格按照YAML语法进行配置，否则心累

二、修改nexmoe主题的配置文件_config.nexmoe.yml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
avatar: https://cdn.jsdelivr.net/gh/DeltaPainS/images/罗生门x地狱变.png # 网站 Logo
background: # 既是博客的背景，又是文章默认头图
    path: https://cdn.jsdelivr.net/gh/DeltaPainS/images/Azur_lane_Ayanami_x.jpg
    width: 1200
    height: 600
favicon:
  href: https://cdn.jsdelivr.net/gh/DeltaPainS/images/favicon.png # 网站图标
  type: image/png # 图标类型，可能的值有(image/png, image/vnd.microsoft.icon, image/x-icon, image/gif)

function: # 功能开关，可选值（true,false）
  globalToc: true # 开启该功能会自动开启文章 TOC（文章目录） 功能
  wordCount: true # 是否开启文章字数统计 (true, false)
  darkmode: true # 是否启用暗色主题，可选值（true,false）

imageCDN: # 图片 CDN 功能
  enable: false # 开启该功能
  origin: /../../images/ # 图片原始目录
  to: https://cdn.jsdelivr.net/gh/nexmoe/nexmoe.github.io@latest/images/ # 图片 CDN 域名

# 自定义样式，启用后可在站点的source文件夹下新建custom.css自定义站点样式
customStyles:
  - custom.css
  
# 附加图标库 使用说明：https://docs.nexmoe.com/config/icon
iconlib: # //at.alicdn.com/t/font_1038733_0xvrvpg9c0r.css

# 菜单
menu:
    回到首页:
        - /
        - icon-home
    文章归档:
        - /archive.html
        - icon-container
    我的朋友:
        - /PY.html
    给我赞助:
        - /donate
        - icon-coffee
    关于博主:
        - /about
        - icon-info-circle

# 小部件
widgets:
    - name: search
      enable: true
      options: 
        search: 
            type: engine # 可选engine（用搜索引擎搜索）、swiftype、或local（本地搜索）
            url: https://www.google.com/search?q=https://deltapains.github.io/ # 搜索引擎地址，在type为swiftype时无效 e.g:https://www.google.com/search?q={你的博客链接}
            id: <swiftype-id> # swiftype的id，见启用教程。在type为engine时无效
    - name: social
      enable: true
      options: 
        social:
            哔哩哔哩:
                - https://www.bilibili.com/
                - icon-bilibili
                - rgb(231, 106, 141)
                - rgba(231, 106, 141, .1)
            GitHub:
                - https://github.com/
                - icon-github
                - rgb(25, 23, 23)
                - rgba(25, 23, 23, .1)
            知乎:
                - https://www.zhihu.com
                - icon-zhihu
                - rgb(30, 136, 229)
                - rgba(30, 136, 229, .1)
            豆瓣:
                - https://www.douban.com/
                - icon-douban-fill
                - rgb(46, 180, 6)
                - rgba(46, 180, 6, .1)
            Steam:
                - https://store.steampowered.com/
                - icon-steam
                - rgb(0, 35, 190)
                - rgba(0, 35, 190, .1)
            Youtube:
                - https://www.youtube.com/
                - icon-youtube
                - rgb(240, 10, 10)
                - rgba(240, 10, 10, .1)
            Telegram:
                - https://web.telegram.org/
                - icon-telegram
                - rgb(50, 160, 220)
                - rgba(50, 160, 220, .1)
            RSS:
                - https://deltapains.github.io/atom.xml
                - icon-rss
                - rgb(247, 132, 34)
                - rgba(247, 132, 34, .1)
    - name: category
      enable: true
    - name: tagcloud
      enable: true
      options: 
        maxTagcloud: 17  # 标签云组件显示的标签数量，0 表示不限制
    - name: hitokoto # 一言 widget
      enable: true
      options: 
        widgetHitokoto: # 一言组件
            loading_placeholder: '🚀 获取中...' # 正在一言时的占位符
            loading_error_placeholder: '🐞 获取失败...' # 加载一言失败时的占位符
            category: # 一言句子类型（可选），不配置的话随机获取，详见 https://developer.hitokoto.cn/sentence/#%E5%8F%A5%E5%AD%90%E7%B1%BB%E5%9E%8B-%E5%8F%82%E6%95%B0
    - name: archive #settings: widgetAchive
      enable: true
      options:
        widgetAchive: #文章归档组件
            archive_type: 'year' #按月展示还是按年展示
            show_count: true  #是否展示数量
    - name: recent_posts
      enable: true
    - name: link #settings: widgetLink
      enable: false
      options: 
        widgetLink: #链接组件
            - title: 
              img: 
              link : 


# 自定义复制版权文案,使用 %url 代替当前页面URL, 修改为false禁用
copyTip: "著作权归作者所有。\n商业转载请联系作者获得授权，非商业转载请注明出处。\n来源：%url" 

# 主区域头部
slotHead: '<div id="binft" style="font-size: 13px;margin: 11px 0;margin-left: 55px;"></div> <head><script src="/js/auto_scroll_text.js"></script></head>'

# 主区域尾部
slotFooter: '<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-2058306854838448" crossorigin="anonymous"></script>'

# 自定义侧边栏尾部内容
slotSidebar: '<br><br><a target="_blank" href="https://beian.miit.gov.cn/">网站备案是不可能备案的，这辈子都不可能进行网站备案的</a>
    <br><br><a id="dytx" target="_blank" href="https://freenom.painliudao.tk/">地狱通信</a>
    <br><br><span id="busuanzi_container_site_uv">本站访客数<span id="busuanzi_value_site_uv"></span>人次</span> & <span id="busuanzi_container_site_pv">本站总访问量<span id="busuanzi_value_site_pv"></span>次</span>
    <br><br><span id="runtime_span"></span><head><script type="text/javascript" src="/js/day_count.js"></script></head>'

# 评论框插槽
slotComment: '<head><script src="//unpkg.com/valine/dist/Valine.min.js"></script></head> <body><div id="vcomments"></div><script>new Valine({el: "#vcomments",appId: "xxxx",appKey: "xxxx",placeholder: "来一条友善的评论！ (≧﹏≦)",visitor: true})</script></body>'

# 版权声明
slotCopyright: '<strong>版权声明：</strong>本文采用 <a href="https://creativecommons.org/licenses/by-nc-sa/3.0/cn/deed.zh" target="_blank">CC BY-NC-SA 3.0 CN</a> 协议进行许可'

# 文章结尾
slotArticleEnd: '<p></p>'

## 自定义添加的配置
# 鼠标点击自动替换彩带
ribbon: false
# 彩带自动飘动
ribbon_flow: false
# 代码雨
code_rain: false
# 在线联系
daovoice: false
# 动态线条背景
nest: true
# 鼠标点击烟花效果
fireworks: true
# 单击显示文字
click_show_text: false

nexmoe主题的配置文件_config.nexmoe.yml内容说明：https://docs.nexmoe.com/zh/v4.0/config/yml.html

三、修改nexmoe主题的菜单

1、归档页面

官方文档的描述：在站点根目录下的 source 文件夹内创建一个 .md 文件，文件名和路径根据个人喜好决定，会决定渲染生成以后页面的路径。

在文件中写入以下内容：

1
2
3
4
5
---
title: 文章归档
layout: archives
permalink: archive.html/
---

坑点（就是因为官方文档的描述不清）：

第一，source文件夹是博客站点根目录下的，不是主题下的

第二，主题配置文件中指定归档菜单项的链接，source文件夹下新建的.md 文件的路径和名称都无所谓，只需要此文件的永久链接是菜单项的链接即可（换而言之就是md文件渲染成页面指定其链接地址，这个链接地址就是点击菜单项跳转的地址）

第三，永久链接结尾别忘了加/，Hexo新版本的要求

第四，太恶心了，分类背景图片不显示，这个问题找了四个小时，只是因为多了一个=

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div class="categories nexmoe-rainbow-fill">
    <% site.categories.sort('name').map(function(category){  %>
        <% let coverx = "https://cdn.jsdelivr.net/gh/DeltaPainS/images/Hunter-X-Hunter-ED-6-hunter-x-hunter-39903358-1920-1080.jpg" %>
        <% category.posts.sort('-date').map(function(post){  %>
            
            <% if (post.cover!=undefined){ %> 
                <% coverx = post.cover %> 
            <% } %>
        <% }) %>
        <!-- 这个作者的代码好坑啊，!=和!==的区别以及只有null、undefined、0、""、''、NaN为false其余都为true的js知识点 -->
        <a class="mdui-ripple" href="<%- url_for(category.path) %>">
            <div class="bg" style="background-image:url(<%=coverx%>)"></div>
            <h1><%= category.name %></h1>
        </a>
    <% }) %>
</div>

第五，这个也很恶心，网站图标不显示，这个问题找了两个小时，只是因为代码顺序问题

1
2
3
<!-- 图标，好恶心啊，应该放在下面一行的上面 -->
<link rel="shortcut icon" href="<%=theme.favicon.href%>" type="<%=theme.favicon.type%>" />
<%- theme.slotHead %>

2、朋友页面

3、赞助页面

4、关于页面

其它几个页面依葫芦画瓢，坑在第一点已经踩过了不再叙述，以下说明遇到的新的坑点：

a、赞助和关于页面没有阅读量和错误的本文链接，原因是这些.md文件要放到source/_post/下而不能放到其外面

b、放在source/_post/下解决了上面的问题，但又多出来这些变成了文章，所以layout布局不能是post，另外永久链接路径需变化

c、所以又放到post外面（source里面）因为不是文章，layout布局改为page，永久链接路径改为/xxx.html

一个更大的坑点，花了我几个小时，又熬夜，更心累：

a、赞助和关于页面有显示本文链接和阅读量，都有问题，永久链接下多了一个index.html，阅读量总为0

b、但永久链接只是本地显示有问题，部署环境中并没有问题，所以就这样吧

c、阅读量为0修复不了，现在只能这样了，我感觉是主题结合Valine产生的问题

​

三、主题个性化

基础：首页、关于、最近、分类、标签、归档、搜索等

更多：评论、live2D看板娘、图床、音乐、视频、统计、emojis、社交、友情链接、CDN、RSS订阅、各种js特效、在线联系等

参考：https://zhuanlan.zhihu.com/p/69211731

评论

用的是Valine评论系统，使用什么评论系统得主题支持

第零步，查看文档手册，一个是主题的，一个是Valine评论系统的

1
2
https://docs.nexmoe.com/v3.2/config/comment.html
https://valine.js.org/quickstart.html

第一步，注册LeanCloud

1
2
3
4
地址：https://www.leancloud.cn/
账号：****
密码：****
邮箱：****

第二步，创建应用，获取APP ID和APP KEY，创建Comment Class，权限设为所有用户，将除了数据存储的服务全部关闭

第三步，配置评论系统，这一步就很恶心，两个文档都没有说清楚，浪费了很多时间（大概两三个小时）

1
2
3
4
# comment: valine
# valine: 
#   appId: xxxx # leancloud application app id
#   appKey: xxxx # leancloud application app key
1
2
# 评论框插槽
slotComment: '<head><script src="//unpkg.com/valine/dist/Valine.min.js"></script></head> <body><div id="vcomments"></div><script>new Valine({el: "#vcomments",appId: "xxxx",appKey: "xxxx",visitor: true})</script></body>'

真的是被弄的很烦，hexo配置文件根本不需要配置，只需主题配置中添加评论系统的HTML片段（而评论系统文档的另一部分也误导人）

第四步，绑定web安全域名，防止恶意调用

第五步，在 Front-matter 中通过comments属性设置true或false控制该页面或者是文章的评论功能是否打开

图床

可以使用Github作为免费图床，PicGo作为图床工具，具体教程谷歌一下

参考：https://zhuanlan.zhihu.com/p/489236769

阅读量统计

（1）Valine 从 v1.2.0 开始支持文章阅读量统计，所以直接使用 Valine 实现此功能。

（2）初始化时开启阅读量统计

1
2
3
4
5
new Valine({
    el:'#vcomments',
    ...
    visitor: true // 阅读量统计
})

（3）添加阅读量统计的HTML片段（这个也是坑点，因为不好确定此段代码放在哪里，花了一段时间才稍微捋清楚位置）

1
2
3
4
<a><span id="<%- url_for(post.path) %>" class="leancloud_visitors nexmoefont icon-eye-fill" data-flag-title="<%= post.title %>">
    <span class="post-meta-item-text">阅读量 </span>
    <span class="leancloud-visitors-count"></span>
</span></a>
1
<%- partial('_partial/_post/counter', {post: page}) %>

新建一个counter.ejs，片段复制到此处并稍微改一改，在post.ejs处调用即可

默认背景和字体颜色不好看，找到style.styl文件修改，不知道怎么搭配？搜索不同背景下文字颜色搭配的网页配色技巧即可

还有一个问题没解决，阅读量统计放到文章里面可以但是放到主页外面却不可以，心累

这个问题后来解决了，只需要将配置中菜单项的链接修改成同对应菜单项页面的永久链接一样即可（和创建的文件夹以及文件的名称无关，没指定布局默认是post布局，评论没指定默认是开启的），也就是说阅读量的span标签的id要和当前页面的uri地址一致即可，示例如下

1
2
3
4
5
6
http://localhost:4000/donate.html

<span id="/donate.html" class="leancloud_visitors nexmoefont icon-eye-fill" data-flag-title="赞助我">
    <span class="post-meta-item-text">阅读量 </span>
    <span class="leancloud-visitors-count">4</span>
</span>

一个很恶心的点就是浏览器缓存，因为有浏览器缓存才让我以为改了之后还是之前的效果，坑死哦（刷新没用，强制刷新也没用，重新清除生成还是没用，本质是浏览器缓存的问题，必须清除浏览数据或者无痕窗口运行才可以看到修改后的实际效果）

鼠标点击特效、点击文字特效及指针美化

1、点击特效

在/themes/主题/source/js目录（npm安装的主题在node_modules/主题/source/js目录）下新建一个firework.js文件，填入如下代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
"use strict";

function updateCoords(e) {
	pointerX = (e.clientX || e.touches[0].clientX) - canvasEl.getBoundingClientRect().left, pointerY = e.clientY || e.touches[0].clientY - canvasEl.getBoundingClientRect().top
}
function setParticuleDirection(e) {
	var t = anime.random(0, 360) * Math.PI / 180,
		a = anime.random(50, 180),
		n = [-1, 1][anime.random(0, 1)] * a;
	return {
		x: e.x + n * Math.cos(t),
		y: e.y + n * Math.sin(t)
	}
}
function createParticule(e, t) {
	var a = {};
    // 修改粒子大小
	return a.x = e, a.y = t, a.color = colors[anime.random(0, colors.length - 1)], a.radius = anime.random(12, 24), a.endPos = setParticuleDirection(a), a.draw = function() {
		ctx.beginPath(), ctx.arc(a.x, a.y, a.radius, 0, 2 * Math.PI, !0), ctx.fillStyle = a.color, ctx.fill()
	}, a
}
function createCircle(e, t) {
	var a = {};
	return a.x = e, a.y = t, a.color = "#F00", a.radius = 0.1, a.alpha = 0.5, a.lineWidth = 6, a.draw = function() {
		ctx.globalAlpha = a.alpha, ctx.beginPath(), ctx.arc(a.x, a.y, a.radius, 0, 2 * Math.PI, !0), ctx.lineWidth = a.lineWidth, ctx.strokeStyle = a.color, ctx.stroke(), ctx.globalAlpha = 1
	}, a
}
function renderParticule(e) {
	for (var t = 0; t < e.animatables.length; t++) {
		e.animatables[t].target.draw()
	}
}
function animateParticules(e, t) {
	for (var a = createCircle(e, t), n = [], i = 0; i < numberOfParticules; i++) {
		n.push(createParticule(e, t))
	}
	anime.timeline().add({
		targets: n,
		x: function(e) {
			return e.endPos.x
		},
		y: function(e) {
			return e.endPos.y
		},
		radius: 0.1,
		duration: anime.random(1200, 1800),
		easing: "easeOutExpo",
		update: renderParticule
	}).add({
		targets: a,
		radius: anime.random(80, 120),	// 修改圆圈大小
		lineWidth: 0,
		alpha: {
			value: 0,
			easing: "linear",
			duration: anime.random(600, 800)
		},
		duration: anime.random(1200, 1800),
		easing: "easeOutExpo",
		update: renderParticule,
		offset: 0
	})
}
function debounce(e, t) {
	var a;
	return function() {
		var n = this,
			i = arguments;
		clearTimeout(a), a = setTimeout(function() {
			e.apply(n, i)
		}, t)
	}
}
var canvasEl = document.querySelector(".fireworks");
if (canvasEl) {
	var ctx = canvasEl.getContext("2d"),
		numberOfParticules = 30,
		pointerX = 0,
		pointerY = 0,
		tap = "mousedown",
		colors = ["#FF1461", "#18FF92", "#5A87FF", "#FBF38C"],
		setCanvasSize = debounce(function() {
			canvasEl.width = 2 * window.innerWidth, canvasEl.height = 2 * window.innerHeight, canvasEl.style.width = window.innerWidth + "px", canvasEl.style.height = window.innerHeight + "px", canvasEl.getContext("2d").scale(2, 2)
		}, 500),
		render = anime({
			duration: 1 / 0,
			update: function() {
				ctx.clearRect(0, 0, canvasEl.width, canvasEl.height)
			}
		});
	document.addEventListener(tap, function(e) {
		"sidebar" !== e.target.id && "toggle-sidebar" !== e.target.id && "A" !== e.target.nodeName && "IMG" !== e.target.nodeName && (render.play(), updateCoords(e), animateParticules(pointerX, pointerY))
	}, !1), setCanvasSize(), window.addEventListener("resize", setCanvasSize, !1)
}

可以自行修改颜色和粒子大小。

然后在/themes/主题/layout/layout.ejs文件中加上以下代码，由于主题不同添加的位置可能不同，一般添加在body标签最后即可

1
2
3
4
<!-- 鼠标点击烟花效果 -->
<canvas class="fireworks" style="position: fixed;left: 0;top: 0;z-index: 1; pointer-events: none;" ></canvas> 
<script type="text/javascript" src="//cdn.bootcss.com/animejs/2.2.0/anime.min.js"></script> 
<script type="text/javascript" src="/js/firework.js"></script>

2、指针美化

然后改变鼠标指针样式，很久没玩前端忘得差不多了，借助网络和剩余的知识记忆勉强改出来

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
a {
    text-decoration: none;
}
a:hover,.nexmoe-post-cover:hover{
    cursor: url(../cur/link.cur), auto;
}

#search_form input:hover{
    cursor: url(../cur/text.cur), auto;
}

body {
    max-width: 1100px;
    margin: auto !important;
    cursor: url(../cur/normal.cur), auto;
}

这样只是本地有效，当部署到Github会无法引用本地光标资源，解决办法是使用图床

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
a {
    text-decoration: none;
}
a:hover,.nexmoe-post-cover:hover{
    cursor: url(https://cdn.jsdelivr.net/gh/DeltaPainS/images/cur/link.cur), auto;
}

#search_form input:hover{
    cursor: url(https://cdn.jsdelivr.net/gh/DeltaPainS/images/cur/text.cur), auto;
}

body {
    max-width: 1100px;
    margin: auto !important;
    cursor: url(https://cdn.jsdelivr.net/gh/DeltaPainS/images/cur/normal.cur), auto;
}

3、点击文字特效

最后添加鼠标点击文字特效，新建click_show_text.js文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
var a_idx = 0;
jQuery(document).ready(function($) {
    $("body").click(function(e) {
        var a = new Array
        ("富强", "民主", "文明", "和谐", "自由", "平等", "公正", "法治", "爱国", "敬业", "诚信", "友善");
        var $i = $("<span/>").text(a[a_idx]);
        a_idx = (a_idx + 1) % a.length;
        var x = e.pageX,
        y = e.pageY;
        $i.css({
            "z-index": 5,
            "top": y - 20,
            "left": x,
            "position": "absolute",
            "font-weight": "bold",
            "color": "#FF0000"
        });
        $("body").append($i);
        $i.animate({
            "top": y - 180,
            "opacity": 0
        },
            3000,
            function() {
                $i.remove();
            });
    });
    setTimeout('delay()', 2000);
});

function delay() {
    $(".buryit").removeAttr("onclick");
}

其中的社会主义核心价值观可以根据你自己的创意替换为其他文字，然后在\themes\hexo-theme-xxx\layout\layout.ejs文件head头部或body末尾添加以下代码：

1
2
3
<!--单击显示文字-->
<script src="//code.jquery.com/jquery-2.0.3.min.js"></script>
<script type="text/javascript" src="/js/click_show_text.js"></script>

注意：需要加一个jQuery脚本，click_show_text.js依赖于jQuery库

站点访问量统计

使用不蒜子，两行代码搞定计数（貌似不太准确？）

官网：

http://busuanzi.ibruce.info/

http://ibruce.info/2015/04/04/busuanzi/

参考文章（这些文章没法解决问题？）：

https://zhangdong.site/2021/01/27/jie-jue-bu-suan-zi-busuanzi-wen-zhang-ji-shu-chu-cuo-wen-ti/

https://jdhao.github.io/2020/10/31/busuanzi_pv_count_error/

两行代码：

1
2
<script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
<span id="busuanzi_container_site_pv">本站总访问量<span id="busuanzi_value_site_pv"></span>次</span>

脚本引用放在after-footer.ejs下面，span标签放在slotSidebar自定义侧边栏尾部内容的配置中

更新：本地调试不准确，但部署到Github后就准确了。也就是说有些东西本地调试不出来，和实际运行有差别，但我还不知道一个劲的找错，唉，心累。但本地测试环境可以播放但生产环境下Dplayer视频又播放不了，这里没问题那里有问题，我真的是服了，这个错误暂且不管了。

Live2D看板娘

基础实现只需两行代码，放在layout.ejs中的head头部标签里面位置

如果需要自定义，参考：https://github.com/stevenjoezhang/live2d-widget

1
2
3
<!-- Live2D -->
<link rel="stylesheet" href="https://fastly.jsdelivr.net/npm/@fortawesome/fontawesome-free@6/css/all.min.css">
<script src="https://fastly.jsdelivr.net/gh/stevenjoezhang/live2d-widget@latest/autoload.js"></script>

看板娘的项目不止一个，还有一个hexo-helper-live2d项目（已不维护），而这个项目添加的步骤又不一样。我想说的是网上搜索出来的东西有很多坑，特别是自己刚入门而各种信息又繁杂，很容易导致跳进一个又一个坑中浪费时间精力，所以好的教程很重要，能够快速帮助引导学习掌握。

还有这主题无法让看板娘完全显示，要么调整看板娘要么调整主题，前者自定义稍微麻烦只好调整主题的mdui.css样式

1
2
3
4
5
6
7
/* 使该类所在元素获得 padding-left 或 padding-right，避免被抽屉栏覆盖住页面 */
.mdui-drawer-body-left {
  padding-left: 355px;
}
.mdui-drawer-body-right {
  padding-right: 240px;
}
字体滚动特效

在source/js/下创建auto_scroll_text.js，里面滚动的文字、延迟、颜色等参数可以自定义

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
var binft = function (r) {
    function t() {
      return b[Math.floor(Math.random() * b.length)]
    }  
    function e() {
      return String.fromCharCode(94 * Math.random() + 33)
    }
    function n(r) {
      for (var n = document.createDocumentFragment(), i = 0; r > i; i++) {
        var l = document.createElement("span");
        l.textContent = e(), l.style.color = t(), n.appendChild(l)
      }
      return n
    }
    function i() {
      var t = o[c.skillI];
      c.step ? c.step-- : (c.step = g, c.prefixP < l.length ? (c.prefixP >= 0 && (c.text += l[c.prefixP]), c.prefixP++) : "forward" === c.direction ? c.skillP < t.length ? (c.text += t[c.skillP], c.skillP++) : c.delay ? c.delay-- : (c.direction = "backward", c.delay = a) : c.skillP > 0 ? (c.text = c.text.slice(0, -1), c.skillP--) : (c.skillI = (c.skillI + 1) % o.length, c.direction = "forward")), r.textContent = c.text, r.appendChild(n(c.prefixP < l.length ? Math.min(s, s + c.prefixP) : Math.min(s, t.length - c.skillP))), setTimeout(i, d)
    }

    var l = "",
    o = ["《无可救药》 夏尔·波德莱尔", "一个观念，一个形式，一个存在，始于蓝天，", "跌进冥河，泥泞如铅，天之眼亦不能透视；","一个天使，鲁莽旅者，受到诱惑，喜欢畸形，", "淹没于骇人的噩梦，如游泳者挣扎拼搏，","阴郁焦灼，苦战一个","疯子一样不断歌唱、在黑暗中回环激荡、","巨大而雄伟的漩涡；","一个不幸的中邪人，为逃出爬虫的栖息地，","在他徒劳的摸索里，寻找钥匙，寻找光明；","一个没有灯的亡魂，身旁是一个无底洞，","又深又潮气味浓重，无遮无靠阶梯无尽，","粘滑的怪物警觉着，一双巨眼磷光闪闪，","照得什么也看不见，只剩下更黑的黑夜；","一艘困在极地的船，像落入水晶的陷阱，","哪条海峡命中注定，让它进入这座牢监？","——画面完美，象征明确，这无可救药的命运","让人想到，魔鬼之君，无论做啥总是出色！","忧郁诚挚的关照中，心变成自己的明镜！","真理之井，既黑且明，有苍白的星辰颤动，","有地狱之灯在讥刺，有火炬魔鬼般妖娆，","有独特的慰籍和荣耀，","——这就是那恶的意识"].map(function (r) {
    return r + ""
    }),
    a = 2,
    g = 1,
    s = 5,
    d = 75,
    b = ["rgb(110,64,170)", "rgb(150,61,179)", "rgb(191,60,175)", "rgb(228,65,157)", "rgb(254,75,131)", "rgb(255,94,99)", "rgb(255,120,71)", "rgb(251,150,51)", "rgb(226,183,47)", "rgb(198,214,60)", "rgb(175,240,91)", "rgb(127,246,88)", "rgb(82,246,103)", "rgb(48,239,130)", "rgb(29,223,163)", "rgb(26,199,194)", "rgb(35,171,216)", "rgb(54,140,225)", "rgb(76,110,219)", "rgb(96,84,200)"],
    c = {
      text: "",
      prefixP: -s,
      skillI: 0,
      skillP: 0,
      direction: "forward",
      delay: a,
      step: g
    };
    i()
};

binft(document.getElementById('binft'));

在主题配置文件的主区域头部嵌入即可，注意这里的路径为绝对路径，source下的js文件夹经过hexo渲染后在根目录下

1
2
# 主区域头部
slotHead: '<div id="binft" style="font-size: 40px;margin: 11px 0;"></div> <head><script src="/js/auto_scroll_text.js"></script></head>'
添加背景音乐

一种简单的方式是使用网页网易云生成的外链播放器（需有版权），复制生成的HTML代码到指定位置（一般是侧边栏底部），位置放置于sidebar.ejs，这个文件大概可以看出是遍历渲染小部件

1
2
<!-- 网易云外链 -->
<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=260 height=52 src="//music.163.com/outchain/player?type=2&id=1377353535&auto=0&height=32"></iframe>

但这种网易云音乐外链的方式有很多局限性，因此推荐使用aplayer，地址为：https://github.com/MoePlayer/APlayer ，使用方式是layout.ejs中引入如下代码添加全局音乐播放器（非文章内）：

1
2
3
4
<!-- 全局音乐播放器 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer@1.10.1/dist/APlayer.min.css">
<script src="https://cdn.jsdelivr.net/npm/aplayer@1.10.1/dist/APlayer.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/meting@1.2.0/dist/Meting.min.js"></script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!-- 全局音乐播放器 -->
   <div class="aplayer" 
       data-id="1377353535" 
       data-server="netease" 
       data-type="song" 
       data-fixed="true" 
       data-mini="true" 
       data-autoplay="false" 
       data-order="list" 
       data-volume="0.3" 
       data-theme="#1da496" 
       data-preload="auto" 
       style="z-index:9999;height:0px" >
   </div>
   <style>
       .aplayer.aplayer-fixed .aplayer-lrc{
           display: none;
       }
       
       @media screen and (max-width: 1024px) {
           .aplayer {
               display: none;
           }

           #waifu {
               left: 0px;
           }
       }
   </style>

另外Hexo又有hexo-tag-aplayer插件，文章内使用，GitHub地址为：https://github.com/MoePlayer/hexo-tag-aplayer

有点乱得捋一捋。通用的方式是外链，但这种方式有限制。又有aplayer在相应的位置添加对应的代码即可，具体查看官方文档。然后又有hexo-tag-aplayer插件，此插件是依赖于aplayer的，也就是说在其基础之上封装成的Hexo插件，安装此插件后便可以在文章也就是支持Markdown语法的文件按照对应的语法插入音频，具体操作查看文档，只不过这个有一些坑，第一因为是在文章中所以全局添加音乐很麻烦，文章外添加音乐还不如直接使用原生aplayer（文章内用插件，文章外用原生），第二插件如果使用MetingJS就可以播放平台音乐，否则要音乐外链引用（不是网页链接，是*.mp3的链接）

示例如下：

1
npm install hexo-tag-aplayer
1
2
3
4
5
6
7
8
9
10
### 使用Hexo音乐播放插件在文章页面插入音乐
```bash
# 需要去音乐网站扒音乐播放链接或者下载下来存储在七牛云或本地
{% aplayer "芥川龍之介の河童 ～ Condid Friend" "Sensitive Heart" "芥川龍之介の河童.mp3" %}
# 引入 MetingJS 后，播放器将支持对于 QQ音乐、网易云音乐、虾米、酷狗、百度等平台的音乐播放
{% meting "1377353535" "netease" "song" %}
```

<!-- Simple example (id, server, type)  -->
{% meting "1377353535" "netease" "song" %}
添加视频

第一种方式，直接使用视频平台（如Youtube、BiliBili）的嵌入代码，可以调整宽高但不知道为什么没用，只好加一点自适应代码调整，以后要嵌入视频直接以此为模板，替换src的内容即可

1
2
3
<div style="position: relative; width: 100%; height: 0; padding-bottom: 75%;">
    <iframe src="https://www.youtube.com/embed/3oF6EvM5a9A"  scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true" style="position: absolute; width: 100%; height: 100%; left: 0; top: 0;"></iframe>
</div>
1
2
3
<div style="position: relative; width: 100%; height: 0; padding-bottom: 75%;">
    <iframe src="//player.bilibili.com/player.html?aid=51842925&bvid=BV144411v7iS&cid=90758469&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true" style="position: absolute; width: 100%; height: 100%; left: 0; top: 0;"> </iframe>
</div>

第二种方式，安装使用hexo-tag-dplayer插件在文章中引用本地或在线的视频地址，更多信息见官方文档，示例如下

1
npm install hexo-tag-dplayer
1
2
3
4
5
{% dplayer "url=https://moeplayer.b0.upaiyun.com/dplayer/hikarunara.mp4" "addition=https://dplayer.daoapp.io/bilibili?aid=4157142" "api=https://api.prprpr.me/dplayer/" "pic=https://moeplayer.b0.upaiyun.com/dplayer/hikarunara.jpg" "id=9E2E3368B56CDBB4" "loop=yes" "theme=#FADFA3" "autoplay=false" "token=tokendemo" %}

{% dplayer 'url=some.mp4' "id=someid" "api=https://api.prprpr.me/dplayer/" "addition=/some.json" 'code=player.on("loadstart",function(){console.log("loadstart")})' "autoplay" %} 

{% dplayer "url=http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"  "autoplay=false" "token=tokendemo" %}

注意：这里的url如果是本地资源是相对于博客的source目录，否则在线视频等静态资源只能使用对象存储的链接来引用

补充几个视频测试的URL地址：

http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4

http://vjs.zencdn.net/v/oceans.mp4

https://media.w3.org/2010/05/sintel/trailer.mp4

https://www.sample-videos.com/index.php#sample-mp4-video

浏览器搞笑标题

FunnyTitle.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// 浏览器搞笑标题
 var OriginTitle = document.title;
 var titleTime;
 document.addEventListener('visibilitychange', function () {
     if (document.hidden) {
         document.title = 'ヽ(●-`Д´-)ノ不要走啊！';
         clearTimeout(titleTime);
     }
     else {
         document.title = 'ヾ(Ő∀Ő3)ノ欢迎回来！' + OriginTitle;
         titleTime = setTimeout(function () {
             document.title = OriginTitle;
         }, 2000);
     }
 });

layout.ejs

1
2
<!--浏览器搞笑标题-->
<script type="text/javascript" src="\js\FunnyTitle.js"></script>
动态线条背景

layout.ejs

1
2
3
   <!--动态线条背景-->
<script type="text/javascript"color="20,20,20" opacity='0.7' zIndex="-2" count="200" src="//cdn.bootcss.com/canvas-nest.js/1.0.0/canvas-nest.min.js"></script>
更多网页小挂件

（1）https://www.abowman.com/

（2）https://www.revolvermaps.com/

（3）http://www.amazingcounters.com/

这些拓展功能接口需要先知道，这就要求通过各种途径拓宽视野，然后计划学习和实践

在线联系

（1）注册登录：https://dashboard.daovoice.io/app/43cf9cc9/users?segment=all-users

1
2
用户名：****
密码：****

（2）应用设置，安装到网站，这些代码放到node_modules/hexo-theme-nexmoe/source/layout.ejs即可

1
<script>(function(i,s,o,g,r,a,m){i["DaoVoiceObject"]=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;a.charset="utf-8";m.parentNode.insertBefore(a,m)})(window,document,"script",('https:' == document.location.protocol ? 'https:' : 'http:') + "//widget.daovoice.io/widget/43cf9cc9.js","daovoice")</script>
1
2
3
4
5
6
7
8
daovoice('init', {
  app_id: "43cf9cc9",
  user_id: "NO_89757", // 必填: 该用户在您系统上的唯一ID
  email: "daovoice@example.com", // 选填:  该用户在您系统上的主邮箱
  name: "道客船长", // 选填: 用户名
  signed_up: 1449821660 // 选填: 用户的注册时间，用Unix时间戳表示
});
daovoice('update');

（3）绑定微信，方便接收和回复消息（不然要到控制台）

注意：这个在线联系的位置当浏览器缩放时会有问题，会和回到顶部重叠，所以调整回到顶部的底部位置，这个琐碎的过程不再一一表述（浏览器先调试再修改样式即可）

更新：后来放弃了这个功能，这个功能没啥用处，电商类网站客服联系功能比较常见

网站统计分析

（1）进入谷歌分析，创建分析账号，设置媒体资源（这步很多设置，不懂就保持默认不用管）

（2）设置网站数据流，即指定你的网站

（3）进入数据流，复制分析代码到网站指定位置（layout.ejs）即可

1
2
3
4
5
6
7
8
9
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-3HMECE6TL8"></script>
<script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());

    gtag('config', 'G-3HMECE6TL8');
</script>

百度统计、友盟统计等统计工具步骤都类似，不再一一赘述。网站都没什么流量还统计什么。

注意：有的主题已经集成了此工具，那么只需开启和配置ID即可

彩带、雪花以及代码雨

在theme/source/js新建对应的js文件，代码复制过去（可以稍微改改），在layout.ejs中引入，并采用配置式控制

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!-- 样式一（鼠标点击更换样式） -->
<% if (theme.ribbon){ %>
    <script type="text/javascript" src="/js/ribbon.js"></script>
<% } %>
<!-- 样式二（飘动的彩带） -->
<% if (theme.ribbon_flow){ %>
    <!-- <script src="https://g.joyinshare.com/hc/piao.js" type="text/javascript"></script> -->
    <script type="text/javascript" src="/js/ribbon_flow.js"></script>
<% } %>

<!-- 雪花特效 略 -->

<!--代码雨-->
<% if (theme.code_rain){ %>
    <!-- 数字雨 -->
    <canvas id="code_rain_canvas"></canvas>
    <script type="text/javascript" src="/js/code_rain.js"></script>
<% } %>
1
2
3
4
5
6
7
## 自定义添加的配置
# 鼠标点击自动替换彩带
ribbon: false
# 彩带自动飘动
ribbon_flow: false
# 代码雨
code_rain: false
添加网站运行时间

day_count.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function show_runtime() {
    window.setTimeout("show_runtime()", 1000);
    X = new Date("10/04/2015 00:00:00");
    Y = new Date();
    T = (Y.getTime() - X.getTime());
    M = 24 * 60 * 60 * 1000;
    a = T / M;
    A = Math.floor(a);
    b = (a - A) * 24;
    B = Math.floor(b);
    c = (b - B) * 60;
    C = Math.floor((b - B) * 60);
    D = Math.floor((c - C) * 60);
    runtime_span.innerHTML = "网站在各种灾难中运行了: " + A + "天" + B + "小时" + C + "分" + D + "秒"
}
show_runtime();

_config.nexmoe.yml

1
2
3
# 自定义侧边栏尾部内容
slotSidebar: '...
    <br><br><span id="runtime_span"></span><head><script type="text/javascript" src="/js/day_count.js"></script></head>'

注意：此脚本放到自定义侧边栏尾部内容或body最下面，页面DOM需先于js脚本加载，不然会有个错误

参考：https://stackoverflow.com/questions/18239430/cannot-set-property-innerhtml-of-null

谷歌联盟

略，没流量还跑什么联盟

实现RSS订阅

（1）安装RSS插件

1
npm install hexo-generator-feed

（2）全局配置文件_config.yml中启用插件

1
2
3
4
5
6
7
8
# Extensions
plugins:
  hexo-generator-feed
#Feed Atom
feed:
  type: atom
  path: atom.xml
  limit: 20

（3）在hexo-theme-nexmoe主题添加RSS订阅配置文件(可以跳过此步骤)

1
2
3
4
5
RSS:
    - https://deltapains.github.io/atom.xml
    - icon-rss
    - rgb(247, 132, 34)
    - rgba(247, 132, 34, .1)

（4）生成RSS订阅文件

1
hexo g

RSS相关资料：

http://riusksk.me/2019/03/30/RSS-%E4%BC%98%E7%A7%80%E7%9A%84%E4%B8%AA%E4%BA%BA%E6%83%85%E6%8A%A5%E6%9D%A5%E6%BA%90/

https://zhuanlan.zhihu.com/p/45120897

脚注插件

Hexo或者这个主题不支持Markdown的脚注语法，只好用npm install hexo-reference --save装一个脚注插件来支持

但有个问题，主题的有序列表样式和此插件的有序列表样式都渲染造成重叠，只好稍微改了改脚注插件的代码，如下所示

1
2
3
4
5
6
7
8
9
10
// render footnotes (HTML)
footnotes.forEach(function (footNote) {
    html += '<li id="fn:' + footNote.index + '">';
    html += '<span style="display: inline-block; vertical-align: top; padding-right: 10px; margin-left: -20px">';
    html += ' ';//footNote.index;
    html += '</span>';//'.</span>';
    html += '<span style="display: inline-block; vertical-align: top; margin-left: 10px; margin-top: -2px;">';
    html += md.renderInline(footNote.content.trim());
    html += '<a href="#fnref:' + footNote.index + '" rev="footnote"> ↩</a></span></li>';
});
文章密码

安装

1
npm install --save hexo-blog-encrypt

使用

1
2
3
4
5
---
title: Hello World
date: 2016-03-30 21:18:02
password: hello
---

​

四、后期的重构调整

2023/6/28：

1、取消在线联系

为什么：这个功能没什么用，还会妨碍其它显示

怎么：_config.nexmoe.yml中将daovoice置为false即daovoice: false，相关代码不删除也行

2、调小字体滚动的字体

为什么：字体过大字又多时在手机显示会换行，这样有跳动影响阅读

怎么：主题配置文件_config.nexmoe.yml中主区域头部slotHead中找到更改字体大小的代码即可

3、脚注

妈的，这个每次都混淆，又得一个个调整，哎，心累

文章和脚注里都不需要空格，都不需要空格，都不需要空格（typora也是）

HTML中h标签的文章标题使用脚注也不需要空格

4、更改hexo脚注插件的背景颜色

找到node_modules/hexo-reference模块，找到相应样式更改背景颜色即可

5、全局音乐播放器

先取消原来的网易云外链，那样子并不好看也不好控制

接下来在layout.ejs中添加全局音乐播放器的代码（代码见背景音乐），调整层级和高度，取消歌词显示

参考：https://ftzzloo.com/hexo-add-aplayer-plugins/

问题是没办法放在网页右边，很烦，试了很久都没有用，主要是官方没有这个功能

参考：https://github.com/DIYgod/APlayer/issues/260

最后使用一种折衷的办法是将文章栏和侧边栏右移，live2D也右移确保不遮挡音乐播放器（哎，瞎折腾）




Markdown语法

资料：https://markdown.com.cn/

​

标题

1
2
3
4
5
6
7
8
9
10
# 一级标题
## 二级标题
### 三级标题
#### 四级标题
##### 五级标题
###### 六级标题

<!-- 标题ID（拓展语法） -->
### My Great Heading {#custom-id}
<h3 id="custom-id">My Great Heading</h3>

段落

1
2
3
段落1
段落2
段落3

强调

1
2
3
4
5
6
7
8
9
10
11
**粗体（推荐）**
__粗体__

*斜体（推荐）*
_斜体_

***粗体斜体（推荐）***
___粗体斜体___

<!-- 删除线（拓展语法） -->
~~删除线~~

引用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
> 块引用

> 多个段落的块引用
> 
> 多个段落的块引用

> 块引用
> 
>> 嵌套块引用

> #### 带有其它元素的块引用
> - 无序列表项
> - 无序列表项
> **加粗**

列表

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<!-- 有序列表 -->
1. 第一
	![图片标题](图片链接)
2. 第二
	- 嵌套无序列表
	- 嵌套无序列表
3. 第三
    1. 第三之一
	2. 第三之二
4. 第四

<!-- 无序列表 -->
+ 无序列表
+ 无序列表
	> 引用块
+ 无序列表

- 无序列表
	- *无序嵌套加其它元素*
	- **无序嵌套加其它元素**
- 无序列表
- 无序列表

* 无序列表
* 无序列表
	* 无序嵌套
	* 无序嵌套
* 无序列表

<!-- 定义列表（拓展语法，typora不支持） -->
First Term
: This is the definition of the first term.

Second Term
: This is one definition of the second term.
: This is another definition of the second term.

<dl>
  <dt>First Term</dt>
  <dd>This is the definition of the first term.</dd>
  <dt>Second Term</dt>
  <dd>This is one definition of the second term. </dd>
  <dd>This is another definition of the second term.</dd>
</dl>

<!-- 任务列表（拓展语法，typora支持） -->
- [x] Write the press release
- [ ] Update the website
- [ ] Contact the media

代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
将单词或短语表示为代码，即`markdown`

如果你要表示为代码的单词或短语中包含一个或多个反引号，则可以通过将单词或短语包裹在双反引号，即``Use `code` in your Markdown file.``

要创建代码块，请将代码块的每一行缩进至少四个空格或一个制表符。
    <html>
      <head>
      </head>
    </html>
    
要创建不用缩进的代码块，请使用围栏式代码块（fenced code blocks）
```shell
cd /bin/
ls
```

分隔线

1
2
3
4
5
6
7
要创建分隔线，请在单独一行上使用三个或多个星号、破折号或下划线（下划线在typora中没用啊？），并且不能包含其他内容。

***

---

_________________

换行

1
Markdown换行语法是在一行的末尾添加两个或多个空格，然后按回车键,即可创建一个换行(<br>)

链接

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
这是一个链接 [Markdown语法](https://markdown.com.cn)。

这是一个链接 [Markdown语法](https://markdown.com.cn "最好的markdown教程")。

使用尖括号可以很方便地把URL或者email地址变成可点击的链接。
<https://markdown.com.cn>
<fake@example.com>

带格式化的链接
I love supporting the **[EFF](https://eff.org)**.
This is the *[Markdown Guide](https://www.markdownguide.org)*.
See the section on [`code`](#code).

引用样式链接是一种特殊的链接，它使URL在Markdown中更易于显示和阅读。参考样式链接分为两部分：与文本保持内联的部分以及存储在文件中其他位置的部分，以使文本易于阅读。
以下示例格式对于链接的第一部分效果相同：
[hobbit-hole][1]
[hobbit-hole] [1]
以下示例格式对于链接的第二部分效果相同：
[1]: https://en.wikipedia.org/wiki/Hobbit#Lifestyle
[1]: https://en.wikipedia.org/wiki/Hobbit#Lifestyle "Hobbit lifestyles"
[1]: https://en.wikipedia.org/wiki/Hobbit#Lifestyle 'Hobbit lifestyles'
[1]: https://en.wikipedia.org/wiki/Hobbit#Lifestyle (Hobbit lifestyles)
[1]: <https://en.wikipedia.org/wiki/Hobbit#Lifestyle> "Hobbit lifestyles"
[1]: <https://en.wikipedia.org/wiki/Hobbit#Lifestyle> 'Hobbit lifestyles'
[1]: <https://en.wikipedia.org/wiki/Hobbit#Lifestyle> (Hobbit lifestyles)

<!-- 链接到标题ID（拓展语法） -->
### Heading IDs {#headid}
[Heading IDs](#headid)

<!-- 自动网址链接和禁用自动URL链接（拓展语法） -->
http://www.example.com
`http://www.example.com`

图片

1
2
3
4
5
插入图片Markdown语法代码：![图片alt](图片链接 "图片title")。
对应的HTML代码：<img src="图片链接" alt="图片alt" title="图片title">

给图片增加链接，请将图像的Markdown括在方括号中，然后将链接添加在圆括号中。
[![沙漠中的岩石图片](/assets/img/shiprock.jpg "Shiprock")](https://markdown.com.cn)

转义字符

1
2
3
4
5
6
7
8
9
要显示原本用于格式化Markdown文档的字符，请在字符前面添加反斜杠字符\。
\* Without the backslash, this would be a bullet in an unordered list.

可做转义的字符:\ ` * _ {} [] () # + - . ! |

在HTML文件中，有两个字符需要特殊处理：< 和 & 。< 符号用于起始标签，& 符号则用于标记HTML实体，如果你只是想要使用这些符号，你必须要使用实体的形式，像是 &lt; 和 &amp;。
Markdown允许你直接使用这些符号，它帮你自动转义字符。如果你使用 & 符号的作为HTML实体的一部分，那么它不会被转换，而在其它情况下，它则会被转换成 &amp;。
所以你如果要在文件中插入一个著作权的符号，你可以这样写：&copy;
需要特别注意的是，在Markdown的块级元素和内联元素中， < 和 & 两个符号都会被自动转换成HTML实体，这项特性让你可以很容易地用Markdown写HTML。（在HTML语法中，你要手动把所有的 < 和 & 都转换为HTML实体。）

扩展语法

并非所有Markdown应用程序都支持扩展语法元素。您需要检查您的应用程序所使用的轻量级标记语言是否支持您要使用的扩展语法元素。如果没有，那么仍然有可能在Markdown处理器中启用扩展。

有几种轻量级标记语言是Markdown的超集。它们包含Gruber的基本语法，并通过添加其他元素（例如表，代码块，语法突出显示，URL自动链接和脚注）在此基础上构建。许多最受欢迎的Markdown应用程序使用以下轻量级标记语言之一：

表格

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!-- 标准 -->
| Syntax      | Description |
| ----------- | ----------- |
| Header      | Title       |
| Paragraph   | Text        |

<!-- 同标准 -->
| Syntax | Description |
| --- | ----------- |
| Header | Title |
| Paragraph | Text |

<!-- 使用冒号来指定对齐 -->
| Syntax      | Description | Test Text     |
| :---        |    :----:   |          ---: |
| Header      | Title       | Here's this   |
| Paragraph   | Text        | And more      |

提示：使用连字符和管道符创建表可能很麻烦。为了加快该过程，请尝试使用Markdown Tables Generator。使用图形界面构建表，然后将生成的Markdown格式的文本复制到文件中。

您可以在表格中设置文本格式。例如，您可以添加链接，代码（仅反引号（`）中的单词或短语，而不是代码块）和强调。

您不能添加标题，块引用，列表，分割线，图像或HTML标签。

您还可以使用表格的HTML字符代码（&#124;）在表中显示竖线（|）字符。

围栏代码块

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
```json
{
  "firstName": "John",
  "lastName": "Smith",
  "age": 25
}
```

```c
#include<stdio.h>
int main()
{
	printf("hello world");
	return 0;
}
```

公式块

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!-- 向量公式 -->
$$f(\mathbf{x})=\mathbf{w}^T\mathbf{x}$$

<!-- 分段函数 -->
$$
y=
\begin{cases}
-x,\quad x\leq 0\\
x, \quad x>0
\end{cases}
\tag{1}
$$

<!-- 多行表达公式 -->
$$
\begin{aligned}
J(\mathbf{w})&=\frac{1}{2m}\sum_{i=1}^m(f(\mathbf{x_i})-y_i)^2\\
&=\frac{1}{2m}\sum_{i=1}^m [f(\mathbf{x_i})]^2-2f(\mathbf{x_i)}y_i+y_i^2
\end{aligned}
$$

<!-- 矩阵 -->
$$\begin{pmatrix}1 & 2 \\ 3 &4\\ \end{pmatrix}$$
$$\begin{bmatrix}1 & 2 \\ 3 & 4\\ \end{bmatrix}$$
$$\begin{Bmatrix}1 &2 \\ 3 & 4\\ \end{Bmatrix}$$
$$\begin{vmatrix}1 &2 \\ 3 &4\\ \end{vmatrix}$$ 
$$\begin{Vmatrix}1 &  2 \\ 3 &  4\\ \end{Vmatrix}$$
$$\begin{pmatrix}1&a_1&a_1^2&\cdots&a_1^n\\1&a_2&a_2^2&\cdots&a_2^n\\\vdots&\vdots&\vdots&\ddots&\vdots\\1&a_m&a_m^2&\cdots&a_m^n\\\end{pmatrix}$$

<!-- 其余的用到再说 -->

参考：https://www.zybuluo.com/codeep/note/163962

脚注

脚注使您可以添加注释和参考，而不会使文档正文混乱。当您创建脚注时，带有脚注的上标数字会出现在您添加脚注参考的位置。读者可以单击链接以跳至页面底部的脚注内容。

要创建脚注参考，请在方括号内添加插入符号和标识符。标识符可以是数字或单词，但不能包含空格或制表符。标识符仅将脚注参考与脚注本身相关联，在输出中，脚注按顺序编号。

在括号内使用另一个插入符号和数字添加脚注，并用冒号和文本。您不必在文档末尾添加脚注。您可以将它们放在除列表，块引号和表之类的其他元素之外的任何位置。

语法如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
Here's a simple footnote,[^ 111] and here's a longer one.[^ bignote]

  	Indent paragraphs to include them in the footnote.

    `{ my code }`

    Add as many paragraphs as you like.

[^ 111]: This is the first footnote.

[^ bignote]: Here's one with multiple paragraphs and code.

<!-- 注意：脚注本来都不需要空格的，但是不加空格脚注插件会报错，自己懂就行 -->

示例如下：

晚上精神充满痛苦的睡去，到早上醒来，常常会有一种恍若隔世[1]的感觉

Emoji表情

有两种方法可以将表情符号添加到Markdown文件中：将表情符号复制并粘贴到Markdown格式的文本中，或者键入emoji shortcodes。

1、复制和粘贴表情符号

在大多数情况下，您可以简单地从Emojipedia 等来源复制表情符号并将其粘贴到文档中。许多Markdown应用程序会自动以Markdown格式的文本显示表情符号。从Markdown应用程序导出的HTML和PDF文件应显示表情符号。

注意：如果您使用的是静态网站生成器，请确保将HTML页面编码为UTF-8。

2、使用表情符号简码

一些Markdown应用程序允许您通过键入表情符号短代码来插入表情符号。这些以冒号开头和结尾，并包含表情符号的名称。您可以使用此表情符号简码列表，但请记住，表情符号简码因应用程序而异。

1
2
3
4
5
6
7
<!-- 表情符号简码示例  -->
真好笑！:joy:
爱心 :heart:
大便 :hankey:
星星 :star:
闹钟 :alarm_clock:
邮件 :email:

内容目录

1
[toc]

流程图

一、标准流程图

1
2
3
4
5
6
7
8
9
10
st=>start: Start
e=>end
op1=>operation: My Operation
sub1=>subroutine: My Subroutine
cond=>condition: Yes or No?
io=>inputoutput: catch something...

st->op1->cond
cond(yes)->io->e
cond(no)->sub1(right)->op1
1
2
3
4
5
6
7
8
9
10
st=>start: 开始
ipt=>inputoutput: 输入一个x
op=>operation: 处理加工x+1
cond=>condition: 溢出（是或否？）
sub=>subroutine: 子流程
io=>inputoutput: 输出x
ed=>end: 结束
st->ipt->op->cond
cond(yes)->io->ed
cond(no)->sub->io->ed
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
st=>start: Start|past:>http://www.google.com[blank]
e=>end: End:>http://www.google.com
op1=>operation: get_hotel_ids|past
op2=>operation: get_proxy|current
sub1=>subroutine: get_proxy|current
op3=>operation: save_comment|current
op4=>operation: set_sentiment|current
op5=>operation: set_record|current
cond1=>condition: ids_remain空?
cond2=>condition: proxy_list空?
cond3=>condition: ids_got空?
cond4=>condition: 爬取成功??
cond5=>condition: ids_remain空?
io1=>inputoutput: ids-remain
io2=>inputoutput: proxy_list
io3=>inputoutput: ids-got
st->op1(right)->io1->cond1
cond1(yes)->sub1->io2->cond2
cond2(no)->op3
cond2(yes)->sub1
cond1(no)->op3->cond4
cond4(yes)->io3->cond3
cond4(no)->io1
cond3(no)->op4
cond3(yes, right)->cond5
cond5(yes)->op5
cond5(no)->cond3
op5->e

二、样式流程图

1
2
3
4
5
6
7
graph LR
A[开始] -->B(起床)
B --天气不好--- C>干活]
C ==> D{休息时间到了}
D -.yes.-> E((休息))
D -.no.-> C
E --> F(吃饭)
1
2
3
4
5
graph TD
A[Hard] -->|Text| B(Round)
B --> C{Decision}
C -->|One| D[Result 1]
C -->|Two| E[Result 2]

时序图

一、标准时序图

1
2
3
4
Andrew->China: Says Hello
Note right of China: China thinks\nabout it
China-->Andrew: How are you?
Andrew->China: I am good thanks!
1
2
3
4
5
6
7
8
Title: 时序图示例
客户端->服务端: 我想找你拿下数据 SYN
服务端-->客户端: 我收到你的请求啦 ACK+SYN
客户端->>服务端: 我收到你的确认啦，我们开始通信吧 ACK
Note right of 服务端: 我是一个服务端
Note left of 客户端: 我是一个客户端
Note over 服务端,客户端: TCP 三次握手
participant 观察者
1
2
3
4
5
6
7
客户端->打印机: 打印请求
打印机->数据库: 请求数据
Note right of 数据库: 执行SQL获取数据
数据库-->打印机: 返回数据信息
Note right of 打印机: 使用数据打印
打印机-->>客户端: 返回打印结果
客户端->客户端: 等待提取结果

二、样式时序图

1
2
3
4
5
6
7
8
9
10
11
12
sequenceDiagram
Title: Example for sequenceDiagram
participant a as Alice
participant b as John
a->>b: Hello b, how are you?
loop Healthcheck
    b->>b: Fight against hypochondria
end
Note right of b: Rational thoughts!
b-->>a: Great!
b->>Bob: How about you?
Bob-->>b: Jolly good!
1
2
3
4
5
6
7
8
9
10
11
12
sequenceDiagram
对象A->对象B:中午吃什么？
对象B->>对象A: 随便
loop 思考
    对象A->对象A: 努力搜索
end
对象A-->>对象B: 火锅？
对象B->>对象A: 可以
Note left of 对象A: 我是一个对象A
Note right of 对象B: 我是一个对象B
participant 对象C
Note over 对象C: 我自己说了算

甘特图

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
gantt
dateFormat  YYYY-MM-DD
title 软件开发甘特图
section 设计
需求:done,des1,2019-01-06,2019-01-08
原型:active,des2,2019-01-09,3d
UI设计:des3,after des2,5d
未来任务:des4,after des3,5d
section 开发
学习准备理解需求:crit,done,des1,2019-01-06,4d
设计框架:crit,done,after des1,2d
开发:crit,active,6d
未来任务:5d
休息时间:2d
section 测试
功能测试:active,a1,after des3,3d
压力测试:after a1,48h
测试报告:48h

用Gravizo第三方插件画流程图示例：

在线绘图：https://app.diagrams.net/

参考：https://code.z01.com/doc/mdflow.html

​

HTML标签

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
### 行级内联标签
<span>常见的行级标签</span>
<strong>加粗</strong> <b>加粗</b>
<em>倾斜</em> <i>倾斜</i>
<del>删除线</del> <s>删除线</s>
<ins>下划线</ins> <u>下划线</u>
<sup>上标</sup>
<sub>下标</sub>


### 块级标签
<div>常见的块级标签</div>
<h1>一级标题</h1>
<p>段落</p>


### 功能标签
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<br/>
<a href="" target="">链接</a>
<img src="" alt="" title="" width="" height=""/>
<audio id="music">
  <source src="m.mp3" type="audio/mpeg">
  <source src="m.ogg" type="audio/ogg;codec='vorbis'">
  您的浏览器不支持audio标签！
</audio>
<video src="m.mp4" width=320 height=400 />
<canvas id="canvas" width="400" height="200">
  您的浏览器不支持canvas！
</canvas>
<svg xmlns="http://www.w3.org/2000/svg" vieBox="0 0 1000 1000" id="mySvg">
  <rect x="100" y="200" width="800" height="600" stroke="black" stroke-width="25" fill="red"/>
</svg>
<table border="1" cellspacing="0" width="500" height="250">
    <thead>
        <tr>
            <th>表头1</th>
            <th>表头2</th>
            <th>表头3</th>
        </tr>
    </thead>
    <tbody align="center">
        <tr>
            <td align="left" rowspan="2">111</td>
            <td colspan="2">222</td>
        </tr>
        <tr>
            <td>555</td>
            <td>666</td>
        </tr>
    </tbody>
    <tfoot></tfoot>
</table>
<ul>
    <li>无序列表</li>
    <li>无序列表</li>
    <li>无序列表</li>
</ul>

<ol>
    <li>有序列表</li>
    <li>有序列表</li>
    <li>有序列表</li>
</ol>

<dl>
    <dt>帮助中心</dt>
    <dd>账户管理</dd>
    <dd>购物指南</dd>
    <dd>订单操作</dd>
    <dt>服务支持</dt>
    <dd>售后政策</dd>
    <dd>自助服务</dd>
    <dd>相关下载</dd>
</dl>
<form action="xxx.jsp" method="GET">
    <table width="500">
        <tr>
            <td>性别</td>
            <td>
                <input type="radio" id="man" name="sex"/> 
                <label for="man"><img src="images/man.jpg"> 男 </label>
                <input type="radio" id="women" name="sex"/> 
                <label for="women"><img src="images/women.jpg"> 女 </label>
            </td>
        </tr>
        <tr>
            <td>生日</td>
            <td>
                <select name="year">
                    <option selected="selected">--请选择年--</option>
                    <option>1990</option>
                    <option>2000</option>
                    <option>2010</option>
                </select>
                <select name="month">
                    <option selected="selected">--请选择月--</option>
                    <option>1</option>
                    <option>2</option>
                    <option>3</option>
                </select>
                <select name="day">
                    <option selected="selected">--请选择日--</option>
                    <option>11</option>
                    <option>12</option>
                    <option>13</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>所在地区</td>
            <td>
                <input type="text" value="安徽" name="area">
            </td>
        </tr>
        <tr>
            <td>婚姻状况</td>
            <td>
                <input type="radio" name="marital_status" id="spinsterhood"> 
                <label for="spinsterhood"> 未婚 </label>
                <input type="radio" name="marital_status" id="married"> 
                <label for="married"> 已婚 </label>
                <input type="radio" name="marital_status" id="divorce"> 
                <label for="divorce"> 离婚 </label>
            </td>
        </tr>
        <tr>
            <td>学历</td>
            <td><input type="text" name="edu_bg"></td>
        </tr>
        <tr>
            <td>喜欢的类型</td>
            <td>
                <input type="checkbox" name="like_type" id="wumei"> 
                <label for="wumei"> 妩媚的 </label>
                <input type="checkbox" name="like_type" id="keai"> 
                <label for="keai"> 可爱的 </label>
                <input type="checkbox" name="like_type" id="xiaoxianrou"> 
                <label for="xiaoxianrou"> 小鲜肉 </label>
                <input type="checkbox" name="like_type" id="laolarou"> 
                <label for="laolarou"> 老腊肉 </label>
                <input type="checkbox" name="like_type" id="douxihuan">
                <label for="douxihuan"> 都喜欢 </label>
            </td>
        </tr>
        <tr>
            <td>自我介绍</td>
            <td>
                <textarea cols="30" rows="10" name="self_introduction"></textarea>
            </td>
        </tr>
        <tr>
            <td> </td>
            <td>
                <input type="submit" value=" 免费注册 ">
            </td>
        </tr>
    </table>
</form>


### 特殊字符
<!-- 空格 -->
&nbsp;
<!-- 小于号 -->
&lt;
<!-- 大于号 -->
&gt;
<!-- 和 -->
&amp;
<!-- 人民币 -->
&yen;
<!-- 版权 -->
&copy;
<!-- 注册商标 -->
&reg;
<!-- 摄氏度 -->
&deg;
<!-- 正负号 -->
&plusmn;
<!-- 乘号 -->
&times;
<!-- 除号 -->
&divide;
<!-- 平方上标2 -->
&sup2;
<!-- 立方上标3 -->
&sup3;

Hexo标签插件

一、引用块

在文章中插入引言，可包含作者、标题和来源。但还是优先考虑Markdown的通用引用块语法。

1
2
3
{% blockquote David Levithan %}
Do not just seek happiness for yourself. Seek happiness for all. Through kindness. Through mercy.
{% endblockquote %}

二、代码块

优先考虑Markdown的通用代码块语法。

1
2
3
{% codeblock lang:objc %}
[rectangle setX: 10 y: 10 width: 20 height: 20];
{% endcodeblock %}

三、站内链接

链接到其它文章。

1
{% post_link hello-world %}

四、文章摘要

在文章中使用 <!-- more -->，那么 <!-- more --> 之前的文字将会被视为摘要。首页中将只出现这部分文字，同时这部分文字也会出现在正文之中。有些主题会用到此功能。

五、文章中插入音乐

安装Aplayer

1
npm install hexo-tag-aplayer

文章中播放音乐的语法

1
2
3
4
# 需要去音乐网站扒音乐播放链接或者下载下来存储在七牛云或本地
{% aplayer "芥川龍之介の河童 ～ Condid Friend" "Sensitive Heart" "芥川龍之介の河童.mp3" %}
# 引入 MetingJS 后，播放器将支持对于 QQ音乐、网易云音乐、虾米、酷狗、百度等平台的音乐播放
{% meting "1377353535" "netease" "song" %}

文章中播放音乐的示例

六、文章中插入视频

1、直接使用视频平台（如Youtube、BiliBili）的嵌入代码，示例如下


2、使用hexo-tag-dplayer插件，找了一个在线测试视频的地址测试

安装

1
npm install hexo-tag-dplayer

语法

1
{% dplayer "url=http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"  "autoplay=false" "token=tokendemo" %}

使用示例

七、瀑布流图片

1
1
1
1
1
1
1
1
1
1

八、折叠

折叠示例

绫波（Ayanami）

  1. 仿佛隔了一世，指因人事，景物变化很大而生的感触。 出自明·袁宏道《锦帆集·天池》。 ↩

本文作者：道隐无名
本文链接：https://deltapains.github.io/2018/08/18/%E6%90%AD%E5%BB%BAHexo%E9%9D%99%E6%80%81%E5%8D%9A%E5%AE%A2/
版权声明：本文采用 CC BY-NC-SA 3.0 CN 协议进行许可
教程
×