[Handbook] 使用说明

这是一篇关于博客网站的使用说明,密码为2013050388

Posted by Leung ZhengHua on 2017-08-09

本文总点击量

折腾博客的UI设计是一种无穷无尽而又乐此不疲的折磨,你需要了解一点前端的东西比如CSS,html,JavaScript等等,这些都可以直接学会,或者不用学直接套用现成的。但对于美这个东西,每个人看法不一样,也没有标准答案,我只能选择一种形式固定下来不再折腾,更多的应该关注内容的生产。

像其他搞前端的程序猿,把博客弄成花里花俏的二次元空间,真的是辣眼睛。

md文件

_posts文件夹里面的每份md文件都可以渲染生成一篇文章,所以每次往_posts文件夹丢一个md文件就可以了。最好是分门别类保存几个模板md文件,要用的时候直接复制。

yaml表头

常用的yaml表头如下,它生成和控制了文章的特征和功能,比如你现在看到的这篇md文档渲染出来的网页,其实在md文档里面它的前面若干行是长这个样子的。

layout: post
title: [Handbook] 使用说明
subtitle: “这是一篇关于博客网站的使用说明,密码为2013050388”
date: 2017-08-09
header-img: “/img/music1.jpg”
catalog: true
categories: blog
tags:
- Hexo
- Blog
donate: true
password: 123456

注意冒号后面必须留有空格,header-img控制了文章使用哪一张图片封面,donate控制了文末是否出现打赏图标,password控制文章是否需要访问权限 ,默认为false文章可以公开 。catalog设为false的时候文章侧边栏不会出现目录区域。

经过后面调试,我又加入了mathjax: true的选项,用于指示是否使用latex公式渲染文档,默认false加载速度会更快。

markdown语法

markdown(包括Rmarkdown)是可以混杂html标记语言和markdown语法的,也就是说你可以在md文档加入网页源代码里面那种\ \</div>的标记符号。目前我在markdown文件里面混杂html只用于插入音乐和视频。markdown使用指南推荐使用Markdown-语法手册。还有一份Markdown 书写风格指南
如果想插入音乐和视频链接,可以参考这一篇在hexo博客中插入图片,音乐,视频,公式

hexo常用命令

基本上在git bash窗口只需要打3条命令,目前我遇到当本机的localhost端口4000被占用的时候,会在hexo s后面加一个任意四位数字,

hexo g

hexo generate的缩写,渲染所有文件,生成所需要的网页文件

hexo s

hexo server的缩写,部署到本机上,可以通过本机浏览器预览

hexo d

hexo deploy的缩写,部署到github上,正式发布。如果你更新(增添)了md文档,没有运行hexo g就直接hexo d,那么将没有任何变化,因为hexo g会生成新的public文件夹,而hexo d负责将这个文件夹的内容推送到你的github账号上。

_config文件配置

根目录下的_config文件是整个博客网站的配置文件,至关重要。还没探明的字段如下:

description:
keyword:
anchorjs:
archive_type:
show_count:
skip_render:
titlecase:

你要修改,填写的地方见下面的标记。

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
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/
# Site
title: 三刃木正久化十 # --> 博客的title
subtitle: 退休老干部 # --> title下面的签名
author: Leung ZhengHua # --> 网页最底部有个copyright,注明产权,当然你保留我的名字也是很有面子的事情
language: zh-CN
timezone: Asia/Shanghai
# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: https://liangzhenghua.github.io # --> 绑定自己的github账号
root: /
permalink: :year/:month/:day/:title/
permalink_defaults:
#Custom Setting Start
# Site settings
SEOTitle: 南有嘉鱼 | 南有樛木 # --> 给网页关闭按钮旁边起一个名字
description: ""
keyword: ""
header-img: img/header_img/home-bg-2-dark.png
signature: false #show signature
signature-img: img/signature/BeanTechSign-black.png
################
#self test
#rss: true
###############
# SNS settings
RSS: true
weibo_username: u/2161168802 # --> 查找自己的微博ID,设置为空则不显示
zhihu_username:
github_username:
twitter_username: #没有推特账号
facebook_username: #没有脸书账号
linkedin_username:
# Build settings
anchorjs: true # if you want to customize anchor. check out line:181 of `post.html`
# Disqus settings
#需要注册disqus账号,并且在settings里面添加站点url
disqus_username:
# Duoshuo settings
#duoshuo_username: kaijun
# Share component is depend on Comment so we can NOT use share only.
#duoshuo_share: true # set to false if you want to use Comment without Sharing
# Analytics settings
# Baidu Analytics
#ba_track_id: # --> 可以选择注册百度统计账号,记录访客浏览情况,设置为空则不显示
# Google Analytics
#ga_track_id: 'UA-XXXXXXXX-X' # Format: UA-xxxxxx-xx
#ga_domain: yoursite
# Sidebar settings
sidebar: true # --> 要设置侧边栏的个人信息吗
sidebar-about-description: "足迹:广东高州中学->暨南大学->中央财经大学->To be continued."
sidebar-avatar: img/ironman-draw.png # use absolute URL, seeing it's used in both `/` and `/about/`
widgets:
- featured-tags
- short-about
- recent-posts
#- friends-blog
# - archive
# - category
# widget behavior
## Archive
archive_type: 'monthly'
show_count: true
## Featured Tags
featured-tags: true # whether or not using Feature-Tags
featured-condition-size: 1 # A tag will be featured if the size of it is more than this condition value
## Friends # --> 添加友链
friends: [
{
title: "李丰",
href: "https://feng.li"
},{
title: "徐宥",
href: "https://blog.youxu.info/"
},{
title: "谢益辉",
href: "https://yihui.name/"
},{
title: "陈素封",
href: "http://www.cnfeat.com/"
},{
title: "方匡南",
href: "http://www.kuangnanfang.com/"
}
]
#Custom Setting End
# Directory
source_dir: source
public_dir: public
tag_dir: tags
archive_dir: archives
category_dir: categories
test_dir: test
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: true # Open external links in new tab
filename_case: 0
render_drafts: false
post_asset_folder: true #会为每一个md文件建立文件夹存储图片
relative_link: false
future: true
highlight:
enable: true
line_number: true
auto_detect: true
tab_replace:
# Category & Tag
default_category: uncategorized
category_map:
tag_map:
home_posts_tag: true # show posts tags
# 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是加进来的,似乎没用
date: 'relative'
date_format: YYYY-MM-DD
time_format: HH:mm:ss
# Pagination
## Set per_page to 0 to disable pagination
per_page: 10
pagination_dir: archives
archive_generator:
per_page: 10
yearly: true
monthly: true
daily: false
# Markdown-it config
## Docs: https://github.com/celsomiranda/hexo-renderer-markdown-it/wiki
markdown:
render:
html: true
xhtmlOut: false
breaks: true
linkify: true
typographer: true
quotes: '“”‘’'
# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: beantech
#sitemap
sitemap:
path: sitemap.xml
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
type: git
repository: https://github.com/liangzhenghua/liangzhenghua.github.io.git
branch: master
# --> 是否开启打赏功能
donate: true
#打赏文案
donate_message: '无以生计,卖文苟延'
# --> 是否开启访问密码功能,开启之后仍然需要在md文档注明password
password: true
# MathJax Support
math.mathjax:
enable: true
per_page: true
math:
engine: 'mathjax' # or 'katex'
mathjax:
src: custom_mathjax_source
config:
# MathJax config
katex:
css: custom_css_source
js: custom_js_source # not used
config:
# KaTeX config

七牛

考虑到图片和视频的大小,以后维护起来会很麻烦,提倡(必须的意思)文章内部使用外链,图片、PDF文件可以储存到七牛上。七牛是看到有几个人推荐的云存储服务,目前还比较怀疑,万一倒闭了呢。

评论

博客评论采用国外的disqus,如果你在中国大陆,可能连评论框都加载不出来。为什么不用国内的网易云跟帖之类的呢,大概是我们应该提倡科学上网。介绍大家使用赛风软件( https://psiphon.ca/zh/download.html ),我很满足墙内的世界,对年轻人中流行的VPN和翻墙软件(比如蓝灯)知之甚少,如果你有好的翻墙软件,请不要吝啬在评论区留下你的精华帖。

BUG

在网页外链之后另起一行画分割线会出现链接变成标题:

1
2
[猛击此处](https://baidu.com/)
-----

效果如下:

猛击此处

解决办法是空多一行。

1
2
3
4
[猛击此处](https://baidu.com/)
-----

猛击此处


bash窗口显示hexo command not found

因为修改了系统的path环境变量,找不到hexo的路径。可以重新添加C:\Users\Administrator\AppData\Roaming\npm\node_modules\hexo\bin到环境变量path中,为了保险一点,建议在系统变量中的path中添加。然后需要关闭Git Bash窗口,重新打开即可。记住,一定要关闭,并重新打开命令窗口,否则配置不会生效。

公式显示问题

原来的博客主题不支持公式显示,加入mathjax插件的方法也不好用。最方便并且能够使用的方法猛击此处。当然,我已经把这种方法集成到主题里面了,添加了mathja.ejs文件和修改了post.ejs文件里加载mathjax的控制开关。

公式下划线转义问题

Mathjax和Markdown的渲染存在冲突,部分公式无法按照Latex语法渲染,参考方法猛击此处,修改后的文件夹路径在博客根目录\node_modules\kramed\lib\rules

公式测试

在Mathjax官网的doc文件找到了公式标号的办法,要在mathjax.ejs文件加入如下的js脚本:

1
2
3
4
5
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
TeX: { equationNumbers: { autoNumber: "AMS" } }
});
</script>

在md文档中对公式进行编号使用

1
2
3
4
5
$$
\begin{equation}
E = mc^2
\end{equation}
$$

显示效果如下:

【To be continued】