hexo博客搭建指北

折腾了 $3$ 天终于把博客搭建好了…本文会简单介绍一下hexo博客的搭建,并选取一些我自己在配置博客的过程中遇到的问题,说明一下我的解决方案。

实际上,hexo博客的搭建并不难,难搞的是美化,我在这个过程中遇到了很多问题,不可能在这篇博客中全部陈述出来,最重要的还是勤于百度。

本篇博客不完全按照顺序撰写,可以通过页面左边的目录跳转阅读。

博客的搭建

先推荐两篇比较好的教程:搭建个人博客-hexo+github详细完整步骤使用github+Hexo人人都能拥有一个美美的博客

这部分网上讲的已经比较好了,我在这就简单说一下。

安装软件

需要安装的软件有:gitNode.js

下载安装即可…

本地设置

装好之后,在本地创建一个文件夹,下文中称其为“根目录”。

下文中“输入命令”均指在命令行中输入命令(并回车废话),既可以使用 git bash,也可以使用 cmd 或 powershell 。输入命令时若无特别说明都需要 cd 到根目录下。

输入命令 npm install -g hexo 来安装 hexo 。

输入命令 hexo init 来初始化 hexo 。

输入命令 npm install 来安装一些需要的包。

输入命令 hexo s,并在浏览器打开 localhost:4000,在本地预览博客;如果上文步骤进行正确,应该看到一个类似于这样的页面:

注:命令可以缩写,条件是没有开头几个字母相同的其它命令。hexo s 实际上是 hexo server 的缩写;下文中 hexo dhexo deploy 的缩写,hexo ghexo generate 的缩写;hexo clean 不能缩写为 hexo c,因为存在命令 hexo config ,但是可以缩写为 hexo cl

按 Ctrl+C 关闭 server 以继续操作。(若出现类似于 终止批处理操作吗(Y/N)? 的提示,输入 y 即可。)

接着安装博客的主题,可以在 hexo 官网 选择主题下载,本篇教程推荐使用 NexT 主题。

hexo 官网 点击图片下方蓝色的文字即可打开主题的 GitHub 主页,一般来说,一个主题的 GitHub 主页上是有用于安装的命令以及配置博客的教程的。

如果没有的话(或者即使有也一样),你应该输入命令 git clone 主题的Github主页地址 themes/主题名 。例如:git clone https://github.com/theme-next/hexo-theme-next themes/next

当然,你也可以使用默认的 landscape 主题,从而不用额外下载主题。

下载好主题后,用任何一款文本编辑器(记事本也可以),打开根目录下的 _config.yml ,将 theme: landscape 修改为 theme: 你想用的主题名 即可。

配置 GitHub 仓库

首先你需要有一个 GitHub 账号。

然后点击右上角你的头像,打开“Your repositories”,点击绿色的按钮“New”。

在”Repository name”一栏填入 yourname.github.io (“yourname”指你的 GitHub ID,比如我就填 ouuan.github.io),”Description”可以随便填也可以不填,然后点绿色的按钮“Create repository”。

将博客上传至 GitHub

输入命令 ssh-keygen 来生成 SSH,让你输入东西你就空着,按回车(应该要按三次回车)。

然后用任意的文本编辑器打开 C:\Users\电脑用户名\.ssh\id_rsa.pub(如果装了 vim 可以直接输入命令 vim ~/.ssh/id_rsa.pub),复制里面的内容。

打开 GitHub,点击右上角的头像,打开“Settings”,选择左边的“SSH and GPG keys”,点绿色的按钮“New SSH key”,Title 随便填,下面的 Key 把刚才复制的东西粘贴进去,然后点绿色的按钮“Add SSH key”。过程中可能需要输入密码。

输入命令 ssh -T git@github.com ,若出现 Hi yourname! You've successfully authenticated, but GitHub does not provide shell access. 表示 SSH 配置成功。

输入命令 npm install hexo-deployer-git --save 安装 deployer 。

打开根目录下的 _config.yml ,将最后几行改为:

1
2
3
4
deploy:
type: git
repository: https://github.com/yourname/yourname.github.io.git
branch: master

当然”yourname”要改成你的 GitHub ID 。

依次输入命令:

1
2
3
hexo clean
hexo g
hexo d

这一步可能要输入密码。

等几分钟,再用浏览器打开 yourname.github.io ,应该就可以看到你的博客了。(此时别人也可以通过这个网址看到你的博客)

域名的配置

实际上,自定义域名基本上没有什么用。但是有一个自己的域名还是一件比较爽的事,会感觉摆脱了束缚(实际上你还是用着 GitHub…)。

域名的获取

本篇教程只讲解如何免费获取域名(的 $12$ 个月使用权),当然你也可以通过其它方式购买域名。

打开 Freenom,输入自己想用的域名,点击”Check Availability”,有“Get it now”的就是能用的。

选择好你要的域名后,点右上角的”Checkout”,Period 选择”12 Months @ FREE”,然后点”Continue”,输入邮箱登录或使用其它账号(如 Google 账号)登录(输入邮箱登录经常会出错,而使用其它账号登录需要科学上网)。

DNS 配置

我使用的是 cloudfare,(因为在学校搭建的博客,手机没电了,国内的服务商注册都需要短信验证码),还是比较方便的。

先注册一个账号,然后点”Add site”,输入你刚刚获取的域名。

然后进入站点设置里的 DNS 设置,如图添加两条记录:

1
185.199.109.153

当然要记得把“yourname”换成你的 GitHub ID。推荐关闭 cdn 服务,即点击一下橙色的云使其变成灰色。

完成后应该是这样的:

连接域名和 DNS

回到 Freenom,登录网站,点击右上角的“Services” $\rightarrow$ “My Domains”,找到你刚刚获取的域名,点击 “Manage Domain” $\rightarrow$ “Management Tools” $\rightarrow$ “Nameservers”。

再回到 cloudfare,就在刚刚 DNS 设置的下面,有两个域名:

再回到 Freenom,把这两个域名复制进去,然后点”Change Nameservers”。

连接域名和 GitHub

在 hexo 根目录的 source 子目录下新建文件 CNAME(没有后缀名),用文本编辑器打开,输入如下内容:

当然要替换成你获取的域名。

然后再输入命令 hexo d ,过几分钟应该就可以从你获取的域名访问你的博客了。

开启https

如果不开启的话,访问 https://你的域名 就会显示警告,访问 http://你的域名 就会显示不安全。

当然如果因为某种原因访问 https://你的域名 已经不会显示警告而且浏览器左上角有绿锁了,就不需要再进行额外的设置了。

其实很简单,浏览器打开 https://github.com/yourname/yourname.github.io/settings ,找到这里:

如果”Enforce HTTPS”前没有打勾,打勾即可。

如果”Enforce HTTPS”前面是灰色的,无法打勾:

  1. 删掉”Save”前面的域名,点击”Save”。
  2. 重新输入域名,点击”Save”。
  3. 重新发布博客(hexo d)。
  4. 等待几分钟~几小时,再访问你的博客应该就OK了。

停用域名

由于免费的域名还是经常会出一些小问题,而且不可避免地会碰上域名到期的问题,所以我在用了半个月自定义域名后停用了..

单纯停用只需删去 CNAME 文件即可,然后记得更改相关设置(在各种地方引用的博客链接、OAuth App 地址……)。

然而,在停用后,我自己的电脑上一直无法打开博客主页(会自动跳转到原自定义域名),别人的电脑/手机上可以正常打开。

解决方法:F12 $\rightarrow$ Network $\rightarrow$ Disable Cache

勾选后 Ctrl + F5 强制刷新博客主页,然后就可以进了,取消勾选 Disable Cache 后依然正常。

方法来源

博客的配置与美化

根目录下的 _config.yml

这部分参考官网教程即可。

主题目录下的 _config.yml

主题目录下的 _config.yml\themes\主题名\_config.yml

这里以 NexT 主题(本文基于 NexT 6.6,其它版本可能有些区别)为例,这个主题的 _config.yml 非常完备,修改配置基本上只需删除/添加注释符号 # 以及改变 true/false 即可。

选择 NexT 主题的四种之一

1
2
3
4
5
# Schemes
scheme: Muse
#scheme: Mist
#scheme: Pisces
#scheme: Gemini

将想用的主题前的 # 删掉,在 scheme: Muse 前加上 # 即可。

例如:

1
2
3
4
5
# Schemes
#scheme: Muse
#scheme: Mist
#scheme: Pisces
scheme: Gemini

四种主题的预览在 NexT 主题的官网有。

改变网站图标

1
2
3
4
5
favicon:
small: /images/favicon-16x16-next.png
medium: /images/favicon-32x32-next.png
apple_touch_icon: /images/apple-touch-icon-next.png
safari_pinned_tab: /images/logo.svg

将你想用的图标放在 \themes\next\source\images 里,然后修改上面的文件名即可。

例如:

1
2
3
favicon:
small: /images/favicon16.png
medium: /images/favicon32.png

页脚设置

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
footer:
# Specify the date when the site was setup.
# If not defined, current year will be used.
#since: 2015

# Icon between year and copyright info.
icon:
# Icon name in fontawesome, see: https://fontawesome.com/v4.7.0/icons
# `heart` is recommended with animation in red (#ff0000).
name: battery-full
# If you want to animate the icon, set it to true.
animated: false
# Change the color of icon, using Hex Code.
color: "#808080"

# If not defined, will be used `author` from Hexo main config.
copyright:
# -------------------------------------------------------------
powered:
# Hexo link (Powered by Hexo).
enable: false
# Version info of Hexo after Hexo link (vX.X.X).
version: true

theme:
# Theme & scheme info link (Theme - NexT.scheme).
enable: true
# Version info of NexT after scheme info (vX.X.X).
version: true
# -------------------------------------------------------------
# Beian icp information for Chinese users. In China, every legal website should have a beian icp in website footer.
# http://www.miitbeian.gov.cn
beian:
enable: false
icp:

icon© 2019 与用户名之间的图标。(图中 $1$)

图标名称为 Font Awesome 上的图标名称。

powered.enable:为 true 则会显示“由 Hexo 强力驱动”。(图中 $2$)

powered.version:为 true 则会显示 Hexo 的版本。(图中 $3$)

powered.enable:为 true 则会显示“主题 – NexT.XX”。(图中 $4$)

powered.version:为 true 则会显示主题的版本。(图中 $5$)

注:根据 NexT 主题的 LICENSE,footer 中必须开启 powered.enable 选项。

“关于”&”标签”

1
2
3
4
5
6
7
8
9
menu:
home: / || home
about: /about/ || user
tags: /tags/ || tags
#categories: /categories/ || th
archives: /archives/ || archive
#schedule: /schedule/ || calendar
#sitemap: /sitemap.xml || sitemap
#commonweal: /404/ || heartbeat

将需要的项目取消注释即可在侧边栏显示。

如果需要使用“关于”页面,输入命令 hexo new page "about"

然后在 \source\about\index.md 中就可以编辑“关于”页面了。

可以修改 \source\about\index.md 中的 title 项来显示“关于”而非“about”。

如果需要使用“标签”功能,需要在博文中添加选项 tags

如果有多个标签,每行一个,以 - 开头:

1
2
3
4
tags:
- 标签1
- 标签2
- 标签3

如果需要使用“标签”页面,输入命令 hexo new page "tags"。

然后向 source\tags\index.md 中添加一行:

1
type: "tags"

“分类”与“标签”类似。

站内搜索

输入命令 npm install hexo-generator-searchdb --save 安装所需的库。

在根目录下的 _config.yml 的结尾加入:

1
2
3
4
5
search:
path: search.xml
field: post
format: html
limit: 10000

然后在 \themes\next\_config.yml 中,打开 local_search

1
2
local_search:
enable: true

社交网站

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# Social Links.
# Usage: `Key: permalink || icon`
# Key is the link label showing to end users.
# Value before `||` delimeter is the target permalink.
# Value after `||` delimeter is the name of FontAwesome icon. If icon (with or without delimeter) is not specified, globe icon will be loaded.
social:
GitHub: https://github.com/ouuan || github
洛谷: https://www.luogu.org/space/show?uid=49742 || code
Codeforces: https://www.codeforces.com/profile/ouuan || code
b站: https://space.bilibili.com/11067182 || tv

social_icons:
enable: true
icons_only: false
transition: false

social 下每行一个,格式为:名称: 地址 || 图标

其中,“图标”为 Font Awesome 图标名称,但有些图标是不可用的,而且图标也不全,使用的时候要尝试一下图标是否可用。

1
2
social_icons:
enable: false

这样设置可以只显示名称不显示图标。

友情链接(或其它链接)

1
2
3
4
5
6
7
8
9
10
11
12
# Blog rolls
links_icon: globe
links_title: 友情链接
# links_layout: block
links_layout: inline
links:
Dew: https://www.cnblogs.com/ppprseter/
wjyyy: https://www.wjyyy.top/
Sooke: https://www.luogu.org/blog/Sooke/
huyufeifei: https://www.cnblogs.com/huyufeifei/
Rye_Catcher: https://rye-catcher.github.io/
额冻豆腐: http://www.mayflyyh.com/

links_icon:显示在标题前的图标。

links_title:标题。

links_layoutblock 一行一个,inline 一行多个。

links:要显示的链接以及名称。

头像

1
2
3
4
5
6
7
8
9
10
11
12
# Sidebar Avatar
avatar:
# in theme directory(source/images): /images/avatar.gif
# in site directory(source/uploads): /uploads/avatar.gif
# You can also use other linking images.
url: /images/avatar.jpg
# If true, the avatar would be dispalyed in circle.
rounded: true
# The value of opacity should be choose from 0 to 1 to set the opacity of the avatar.
opacity: 1
# If true, the avatar would be rotated with the cursor.
rotated: false

url:头像地址,留空则不显示头像。

rounded:圆/方头像。

opacity:不透明度。

rotated:随光标旋转。

回到顶部按钮/阅读百分比

1
2
3
4
5
# Back to top in sidebar (only for Pisces | Gemini).
b2t: true

# Scroll percent label in b2t button.
scrollpercent: true

博客首页不显示全文

在博文里可以用 <!-- more --> 来标识在首页显示到哪为止。

可以在 \themes\next\_config.yml 里设置到一定字数自动不显示全文:

1
2
3
4
5
6
7
8
9
# Automatically Excerpt. Not recommend.
# Please use <!-- more --> in the post to control excerpt accurately.
auto_excerpt:
enable: true
length: 150

# Read more button
# If true, the read more button would be displayed in excerpt section
read_more_btn: true

length:不显示全文的字数上限。

read_more_btn

代码块复制按钮

1
2
3
4
5
6
7
8
9
codeblock:
# Manual define the border radius in codeblock
# Leave it empty for the default 1
border_radius:
# Add copy button on codeblock
copy_button:
enable: true
# Show text copy result
show_result: true

enable:启用复制按钮。

show_result

$\LaTeX$

1
2
3
4
5
6
7
8
9
10
11
# Math Equations Render Support
math:
enable: true

# Default(true) will load mathjax/katex script on demand
# That is it only render those page who has 'mathjax: true' in Front Matter.
# If you set it to false, it will load mathjax/katex srcipt EVERY PAGE.
per_page: false

engine: mathjax
#engine: katex

enable:启用 $\LaTeX$ 。

per_page:为 true 则只有博文中有 mathjax: true 才会启用 $\LaTeX$,否则每篇博客都会启用 $\LaTeX$ 。

engine:推荐使用 mathjax

hexo 博客的 mathjax 和 Markdown 有一些冲突,将在后文专门讲解如何解决冲突。

评论功能

由于 gitment 的服务器有一些问题,推荐使用 gitalk:

1
2
3
4
5
6
7
gitalk:
enable: true
github_id: yourname
repo: yourname.github.io
client_id:
client_secret:
admin_user: yourname

这里需要在 GitHub 新建一个 OAuth App,”Homepage URL”和”Authorization callback URL”填你的域名(如果没有申请域名的话就填 yourname.github.io):

需要注意的是,地址要严格和博客访问地址一样httphttps不能混,有无 www 也不能混。

然后将 Client IDClient Secret 填入 \themes\next\_config.yml 中。

评论功能无法在本地正常预览,需要发布才能使用。

另外,“初始化创建”就是在 Gitalk 中登录你(admin_user)的账号,然后打开博文。也就是当你看到那个提示时登进去就好了,而且发完一篇博客记得打开一次来“初始化创建”。

访客统计

1
2
busuanzi_count:
enable: true

书签

书签的功能是关闭页面/手动点击书签按钮时,保存这篇博客看到的位置,下次点进这篇博客时继续从这个位置开始。

安装插件:git clone https://github.com/theme-next/theme-next-bookmark.git source/lib/bookmark

更改 \themes\next\_config.yml

1
2
3
4
5
6
7
8
9
# Bookmark Support
# Dependencies: https://github.com/theme-next/theme-next-bookmark
bookmark:
enable: true
# if auto
# - save the reading position when closing the page
# - or clicking the bookmark-icon
# if manual, only save it by clicking the bookmark-icon
save: manual

其它配置

博客背景

打开 \themes\next\source\css\_custom\custom.styl,输入:

1
2
3
4
body {
background-image:url(/images/background.jpg);
background-size: cover;
}

把背景图片重命名为 background.jpg,放入 \themes\source\images(当然也可以更改background-image:url())。

background-size: cover; 表示宽度缩放至页面大小。

1
2
3
4
5
6
body {
background-image:url(/images/background.jpg);
background-repeat: no-repeat;
background-attachment:fixed;
background-size: cover;
}

如果修改成这样的话背景图片就不会滚动。

如果不想让博客内容挡住背景,可以设置博客内容的透明度,在 \themes\next\source\css\_custom\custom.styl 中加入下面的代码即可:

1
2
3
.main-inner {
opacity: 0.9;
}

博文自定义排序

打开 \node_modules\hexo-generator-index\lib\generator.js

在末尾添加如下代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
posts.data = posts.data.sort(function(a, b) {
if(a.top && b.top) {
if(a.top == b.top) return b.date - a.date;
else return b.top - a.top;
}
else if(a.top && !b.top) {
return -1;
}
else if(!a.top && b.top) {
return 1;
}
else return b.date - a.date;
});

在博文设置中加入 top: x 即可,会以 top 为第一关键字,时间为第二关键字排序。若 top 为空则视作 -INF 。

折叠块

怎么搞?

标题链接的这篇博文写的够清楚了..

README.md

如果想在 https://github.com/yourname/yourname.github.io 让别人看到你的博客的简介,就需要写一个 README.md 放在根目录下的 source 文件夹内。

然而,只是这样的话, README.md 会被渲染成 html,所以需要更改根目录下 _config.yml 的设置:

1
skip_render: README.md

自定义404页面

首先写一个 \source\404.html

至于怎么写html..这里地方太小写不下。

需要注意的是,一个真正的 404 页面应当在访问时返回 404 代码。在 HTML 中,可以使用 <meta http-equiv="Content-Security-Policy" content="connect-src 'self'"> 实现。

可以参考一下我的:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Security-Policy" content="connect-src 'self'">
<title>404 Error | ouuan的博客</title>
<link rel="icon" type="image/png" sizes="32x32" href="/images/favicon32.ico">
<link rel="icon" type="image/png" sizes="16x16" href="/images/favicon16.ico">
</head>
<body style="background-image:url(https://api.ixiaowai.cn/api/api.php); background-size:100% 100%;">
<div style="background-color: rgba(255, 255, 255, 0.8); width: 100%; height: 100%; position: absolute; top:0; left:0;">
<p style="text-align: center;"><strong>您可能访问了错误的网址</strong><img src="/images/5bd4705dd844f.jpg"></p>
<br><br>
<p style="text-align: center;"><strong>您现在可以:</strong></p>
<p style="text-align: center;"><a href="/"><strong>回到博客主页</strong></a></p>
<p style="text-align: center;"><a href="javascript:history.go(-1);"><strong>返回上一页</strong></a></p>
<br><br>
<p style="text-align: center;"><strong>如果您在登录 Gitalk 时遇到此问题,请尝试<a href="/%E5%A5%BD%E7%94%A8%E7%9A%84%E7%BD%91%E7%AB%99/">换一篇博客</a>登录</strong></p>
</div>
</body>
</html>

然后,如果直接这样发布,html 会被渲染,就跟一个自定义页面(hexo new page)一样了。

所以要修改根目录下的 _config.yml,在 skip_render: 后添加 404.html,如果有多项用 - 隔开:

1
2
3
skip_render:
- README.md
- 404.html

发布完成后,访问一个错误的网址,比如 你的域名/qaq 就可以查看效果了。

一言(ヒトコト)

大约是这个

网上没找到教程,自己随便瞎研究了一波,所以方法比较丑陋,仅供参考..

本来想稍微写一下自己研究的经过,想了想自己也没完全搞清楚,就来一波授人以鱼吧…

\themes\next\layout\_macro\sidebar.swig:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
……
<aside id="sidebar" class="sidebar">

<div class="sidebar-inner">
<div>
<div style="display: table-cell;vertical-align: top; color:#B2B7F2;font-size:24px;font-family:'Times New Roman',serif;font-weight:bold;text-align:left;"></div>
<div style="display: table-cell;text-align: left; vertical-align: middle; text-indent: 2em; padding: 0.8em 0.2em 1em 0.2em"><b><span style="color:burlywood;"><span id="hitokoto-content"></span></span></b></div>
<div style="display: table-cell; vertical-align: bottom; color:#B2B7F2;font-size:24px;font-family:'Times New Roman',serif;font-weight:bold;text-align:left;"></div>
</div>
<div style="text-align: right; font-size: 0.8em; color: black;" id="hitokoto-from"></div>
<div style="margin-top: 15px; font-size: 0.8em; color: black;"><a href="https://hitokoto.cn/">Hitokoto</a></div>
</div>

<div style="height: 15px"></div>

{% if theme.sidebar.onmobile %}
……

\themes\next\layout\_scripts\commons.swig:

1
2
3
4
5
6
7
……
<script type="text/javascript">
$.get('https://v1.hitokoto.cn/?c=a', function (data) {
$('#hitokoto-content').css('display', '').text(data.hitokoto);
$('#hitokoto-from').css('display', '').text('——' + data.from);
});
</script>

\themes\next\source\css\_custom\custom.styl:

1
2
3
4
……
.sidebar {
background: rgba(0, 0, 0, 0);
}

大约就这样,省略号表示文件中本来就有的其它部分。不保证在其他人电脑上可以用。大致思路就是搞个空 div 指定一个 id,用 js 往里面塞东西。所以即使我这个“鱼”不能直接用大约也是可以稍微研究研究来用的。

博客的写作

Markdown 的使用

网上有很多 Markdown 的学习资源,我自己是在洛谷剪贴板学会的

我以前一般都用洛谷剪贴板编辑 Markdown,但 hexo 博客需要在本地编辑 .md 文件,这时普通的文本编辑器就不太方便了。我推荐 Typora 这款软件,还是挺方便的。

撰写博客前的准备

打开根目录下的 _config.yml ,将 post_asset_folder 设为 true

这样就可以把图片放到博客里而不用其它图床了。

然后把 \source\_posts\hello-world.md 删除。

博文的撰写

新建一篇博客:hexo new "博文标题"

然后等几秒钟,在 \source\_posts 文件夹下,就会生成 博客名 这个文件夹(如果你把 post_asset_folder 设为 true 了)以及 博客名.md

撰写博客就是编辑 博客名.md

这个文件的开头是博客的一些设置,可以在 \scaffolds\posts.md 中修改默认设置,我的默认设置是:

1
2
3
4
5
6
---
title: {{ title }}
date: {{ date }}
tags:
top:
---

然后就可以写 Markdown 格式的文章了。(top 是自定义文章排序,上文中介绍过)

需要注意的是,在洛谷代码块可以不加”cpp”,但在 hexo 上,一定要加上”cpp”:

1
2
3
4
5
#include <iostream>
int main()
{
cout<<"hello world!"
}
1
2
3
4
5
#include <iostream>
int main()
{
cout<<"hello world!"
}

更多博文模板

\scaffolds 文件夹中可以增加更多的模板,比如我就搞了一个 \scaffolds\tutorial.md,这样的话,新建博文的时候输入命令 hexo new tutorial "博文标题" 就可以使用模板了。

引用本地图片

引用链接/网络上的图片格式与普通 Markdown 相同([链接名称](链接地址)![图片描述](图片地址)),引用本地图片需要把 post_asset_folder 设为 true ,然后把图片放在与博客同名的文件夹中,然后只用 ![图片描述](图片文件名) 就可以引用了。

在编辑器里显示不出图片是正常的。

还有另一种方式引用图片,

用这种方式引用图片的话,把鼠标放在上面会显示图片描述(上面这张图就是用这种方式引用的)。

只有这种方式引用图片才能在博客首页正常显示图片,否则只能点进博客才能看到图片。

$\LaTeX$ 的使用

$\LaTeX$ 概述

$\LaTeX$ 主要用于编辑数学公式,十分方便,网上也有很多学习资源,比如:LaTeX数学公式大全

在支持 $\LaTeX$ 的 Markdown 文档里,使用两个美元符号将 $\LaTeX$ 公式括起来,例如:

1
~~QAQ$f_i=\sum\limits_{j=1}^ia_j$f_i=\sum\limits_{j=1}^ia_j~~

QAQ$f_i=\sum\limits_{j=1}^ia_j$f_i=\sum\limits_{j=1}^ia_j

也可以用一对双美元符号使公式居中显示在单行,例如:

1
2
3
$f_i=1$

$$f_i=1$$

$f_i=1$

$$f_i=1$$

在 Typora 中使用 $\LaTeX$ 需要将设置中的”Markdown 扩展语法”全部勾选。

P.S. $\LaTeX$:\LaTeX

启用 $\LaTeX$

\themes\next\_config.yml 中将 mathjax 设为 true,然后将 per_page 设为 false 或者在需要启用 \LaTeX 的博文开头加上 mathjax: true

解决冲突

由于hexo博客中即使是$$内的字符也会被当成 Markdown 渲染,类似于 $f_{f_i}$$a*b*c$$[x,y](1<x<y<2)$ 之类的,都会被错误地渲染。

解决这个问题,首先要打开 \node_modules\marked\lib\marked.js,搜索 nolink,应该在 $470$ 行左右。

然后,将这一块修改为:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var inline = {
escape: /^\\([`*\[\]()# +\-.!_>])/,
autolink: /^<(scheme:[^\s\x00-\x1f<>]*|email)>/,
url: noop,
tag: /^<!--[\s\S]*?-->|^<\/?[a-zA-Z0-9\-]+(?:"[^"]*"|'[^']*'|\s[^<'">\/\s]*)*?\/?>/,
link: /^!?\[(inside)\]\(href\)/,
reflink: /^!?\[(inside)\]\s*\[([^\]]*)\]/,
nolink: /^!?\[((?:\[[^\[\]]*\]|\\[\[\]]|[^\[\]])*)\]/,
strong: /^__([\s\S]+?)__(?!_)|^\*\*([\s\S]+?)\*\*(?!\*)/,
em: /^\*((?:\*\*|[\s\S])+?)\*(?!\*)/,
code: /^(`+)\s*([\s\S]*?[^`]?)\s*\1(?!`)/,
br: /^ {2,}\n(?!\s*$)/,
del: noop,
text: /^[\s\S]+?(?=[\\<!\[`*]|\b_| {2,}\n|$)/
};

这样做取消了 _text_ 的斜体意义,但 *text* 仍会被转义为斜体。

解决办法有两种:

  1. 放弃使用 * ,全部用 \times 代替或者省略掉。
  2. 取消 * 的转义。

如果使用方法二,就无法使用Markdown的斜体,可以通过HTML(<em></em>)来实现斜体


如果想要使用 * 而放弃斜体:

\node_modules\marked\lib\marked.js 中搜索 Renderer.prototype.em ,应该在 $884$ 行左右。

将这一段改为:

1
2
3
Renderer.prototype.em = function(text) {
return '*' + text + '*';
};

(这个方法比较蠢..当然也可以直接修改 em: 项的正则表达式,使其无法匹配正常的博文。)


前文提到了,hexo博客中即使是$$内的字符也会被当成 Markdown 渲染,所以类似于 $[x,y](1<x<y<2)$ 的,要在 ]( 中间加一个空格,就不会被错误地转义了。

博客的发布

其实前文提到过,依次输入以下三条命令即可:

1
2
3
hexo cl
hexo g
hexo d

hexo cl 是可选的。加上不会有坏处..而且有时候必须加上。

发布之前还可以执行 hexo s 并在本地使用浏览器打开 localhost:4000 进行预览。

当然也可以使用 hexo g -d 命令。