[教程]Hexo + Github 搭建自己的专属博客
教程来自【Hexo + Github 搭建自己的专属博客】_wudreamer.github-CSDN博客，自己实操并修改了一些内容。
1. 安装Git和NodeJS
在Windows上使用Git，可以从Git官网直接 Git - Downloads (git-scm.com)，然后按默认选项安装即可。安装完成后，在开始菜单里找到“Git”->“Git Bash”，弹出一个类似命令行窗口的东西，就说明Git安装成功！
在Git中绑定Github账号，打开“Git Bash”，在命令框中依次输入两行命令：
git config --global user.name "Your Name"
git config --global user.email "[email protected]"
# 其中Your Name和[email protected]替换成上面注册时的账户名和邮箱
由于 Hexo 是基于 Node.js 驱动的一款博客框架，所以安装NodeJS https://nodejs.org/en/download/ 并配置环境变量。安装之后可以输入以下命令查看是否安装成功：
git version
node -v
npm -v
2. 安装Hexo
以上环境准备好了就可使用 npm 开始安装 Hexo 了，在命令行输入执行如下命令：
npm install -g hexo-cli
安装 Hexo 完成后，在指定文件夹下打开“Git Bash”，再执行下列命令，Hexo 将会在指定文件夹中新建所须要的文件：
hexo init myBlog
cd myBlog
npm install
若是上面的命令都没报错的话，就恭喜了，运行 hexo s 命令，其中 s 是 server 的缩写，在浏览器中输入 http://localhost:4000 回车就能够预览效果了。
3. 加载主题
大家可以去官网上找自己喜欢的主题下载https://hexo.io/themes/ ，自己采用的主题是https://github.com/Siricee/hexo-theme-Chic ，这款有明暗两种颜色。
基本大家用的最多的是NEXT主题：https://github.com/next-theme/hexo-theme-next随后将下载的主题文件夹放在 myblog/themes中，在 _config.yml文件中修改theme 为hexo-theme-Chic(注意和主题文件名一致)
本人用的是hexo-theme-Claudia。
修改好之后在“Git Bash”中执行 hexo g 命令，然后再 hexo s，在浏览器中输入 http://localhost:4000 回车就能够预览修改主题后的效果了。
4. 修改主题配置
修改在主题文件夹下的 _config.yml文件，完成自己个人的配置。
# Header
navname: Bentham's Blog
# navigatior items
nav:
Posts: /archives
Categories: /category
Tags: /tag
About: /about
# favicon
favicon: /favicon.ico
# Profile
nickname: Jeremy Bentham
### this variable is MarkDown form.
description: Lorem ipsum dolor sit amet, **consectetur adipiscing elit.** <br>Fusce eget urna vitae velit *eleifend interdum at ac* nisi.
avatar: /image/avatar.jpeg
# main menu navigation
## links key words should not be changed.
## Complete url after key words.
## Unused key can be commented out.
links:
Blog: /archives
# Category:
# Tags:
# Link:
# Resume:
# Publish:
# Trophy:
# Gallery:
# RSS:
# AliPay:
ZhiHu: https://www.zhihu.com/people/sirice
# LinkedIn:
# FaceBook:
# Twitter:
# Skype:
# CodeSandBox:
# CodePen:
# Sketch:
# Gitlab:
# Dribbble:
Instagram:
Reddit:
# YouTube:
# QQ:
# Weibo:
# WeChat:
Github: https://github.com/Siricee
# how links show: you have 2 choice--text or icon.
links_text_enable: false
links_icon_enable: true
# Post page
## Post_meta
post_meta_enable: true
post_author_enable: true
post_date_enable: true
post_category_enable: true
## Post copyright
post_copyright_enable: true
post_copyright_author_enable: true
post_copyright_permalink_enable: true
post_copyright_license_enable: true
post_copyright_license_text: Copyright (c) 2019 <a href="http://creativecommons.org/licenses/by-nc/4.0/">CC-BY-NC-4.0</a> LICENSE
post_copyright_slogan_enable: true
post_copyright_slogan_text: Do you believe in <strong>DESTINY</strong>?
## toc
post_toc_enable: true
# Page
page_title_enable: 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: MMMM D, YYYY
time_format: H:mm:ss
# stylesheets loaded in the <head>
stylesheets:
- /css/style.css
# scripts loaded in the end of the body
scripts:
- /js/script.js
- /js/tocbot.min.js
# tscanlin/tocbot: Build a table of contents from headings in an HTML document.
# https://github.com/tscanlin/tocbot
# plugin functions
## Mathjax: Math Formula Support
## https://www.mathjax.org
mathjax:
enable: true
import: demand # global or demand
## global: all pages will load mathjax,this will degrade performance and some grammers may be parsed wrong.
## demand: Recommend option,if your post need fomula, you can declare 'mathjax: true' in Front-matter
hexo-theme-Claudia的_config.yml文件如下：
# main menu navigation
menu:
Home: /
About: /about
Archive: /archives
widgets:
- tag
- archive
- recent_posts
- category
- profile
# social config
social:
zhihu:
twitter: /
facebook: /
linkedin:
instagram: /
github: haojen
user:
name: Haojen
avatar: /images/avatar.jpg
location: In the dust
description: May the Force be with you
footnotes: #footnotes
# documents: https://github.com/utterance/utterances
# API config: https://utteranc.es/
comment_utteranc:
enable: true
repo: Haojen/Claudia-theme-blog # your blog repo
# documents: https://valine.js.org/quickstart.html
comment_valine:
enable: false
appId:
appKey:
# dark
# light
# user-can-set
appearance: auto # Default value is auto
# Miscellaneous
favicon: /images/favicon.png
# Google Analytics
ga_track_id:
ga_domain:
# Baidu Analytics
ba_track_id:
5. 将博客部署在GitHub上
点击 Start project 或者下面的 new repository 建立一个新的仓库，注意Github 仅能使用一个同名仓库的代码托管一个静态站点，这里注意仓库名一定要是： 用户名.github.io
配置 SSH key ，要使用 git 工具首先要配置一下SSH key，为部署本地博客到 Github 作准备。
git config --global user.name "用户名"
git config --global user.email "邮箱地址"
ssh-keygen -t rsa -C '上面的邮箱'
按照提示完成三次回车，便可生成 ssh key，采用以下指令也可以查看自己的ssh：
cat ~/.ssh/id\_rsa.pub
首次使用还须要确认并添加主机到本机SSH可信列表。若返回 Hi xxx! You’ve successfully authenticated, but GitHub does not provide shell access. 内容，则证实添加成功。
ssh -T [email protected]
登陆 Github 上添加刚刚生成的SSH key，按如下步骤添加，右上角点击头像-> settings -> SSH and GPG keys，建立一个新的 SSH key, 标题随便，key 就填刚才生成那个，确认建立，这样在你的 SSH keys 列表里就会看到你刚刚添加的密钥。
此时，本地和Github的工做作得差不了，是时候把它们两个链接起来了。你也能够查看官网的部署教程。先不着急，部署以前还须要修改配置和安装部署插件。第一：打开项目根目录下的_config.yml 配置文件配置参数。拉到文件末尾，填上以下配置。
deploy:
type: git
#仓库地址，username是你的github用户名
repo: https://github.com/username/username.github.io.git
branch: master #代码分支
第二要安装一个部署插件 hexo-deployer-git，打开“Git Bash”，输如以下指令：
npm install hexo-deployer-git --save
最后执行如下两条命令就能够部署上传啦，如下 g 是 generate 缩写，d 是 deploy 缩写，hexo help 可以查看相关命令。
hexo g # 先生成
hexo d # 部署到Github上
这时用浏览器输入 用户名.github.io就可以访问刚才的网站啦。
6. 写文章并上传
博客搭好了，就开始写文章了，这里简单介绍一下，详细的文档能够看 hexo 官网。新建文章，输入如下命令便可
hexo new '文章标题'
执行完成后能够在 /source/_posts 下看到一个“文章标题.md”的文章文件啦。.md 就是 Markdow格式的文件，具体用法能够在网上找一下，语法仍是比较简单的。同时会生成一个同名文件夹，可以把文章需要的图片放在里面。
---
title: blogTest
date: 2021-08-20 18:07:21
tags: Test
categories: blog1
---
### 1. This is a blog Test
* First
* Second
---
### 2. Show Text
* **这是加粗**
> *这是斜体*
之后依次输入以下命令：
hexo g # 生成文件
hexo s # 本地服务器查看网站
hexo d # 部署到Github 上
7. 配置一些特效
雪花特效： themes\hexo-theme-Chic\layout\index.ejs中添加如下代码：
<!-- 雪花特效 -->
<script type="text/javascript" src="https://libs.baidu.com/jquery/1.8.3/jquery.js"></script>
<script type="text/javascript" src="https://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="/js/snow.js"></script>
蜘蛛网特效： themes\hexo-theme-Chic\layout\layout.ejs中添加如下代码：
<script>
!
function() {
function n(n, e, t) {
return n.getAttribute(e) || t
}
function e(n) {
return document.getElementsByTagName(n)
}
function t() {
var t = e("script"),
o = t.length,
i = t[o - 1];
return {
l: o,
z: n(i, "zIndex", -1), //置于主页面背后
o: n(i, "opacity", .5), //线条透明度
c: n(i, "color", "0,0,0"), //线条颜色
n: n(i, "count", 100) //线条数量
}
}
function o() {
a = m.width = window.innerWidth ||
document.documentElement.clientWidth || document.body.clientWidth,
c = m.height = window.innerHeight ||
document.documentElement.clientHeight || document.body.clientHeight
}
function i() {
r.clearRect(0, 0, a, c);
var n, e, t, o, m, l;
s.forEach(function(i, x) {
for (i.x += i.xa, i.y += i.ya, i.xa *= i.x > a || i.x < 0 ? -1 :
1, i.ya *= i.y > c || i.y < 0 ? -1 : 1, r.fillRect(i.x - .5, i.y - .5, 1,
1), e = x + 1; e < u.length; e++) n = u[e],
null !== n.x && null !== n.y && (o = i.x - n.x, m = i.y - n.y, l
= o * o + m * m, l < n.max && (n === y && l >= n.max / 2 && (i.x -= .03 * o,
i.y -= .03 * m), t = (n.max - l) / n.max, r.beginPath(), r.lineWidth = t /
2, r.strokeStyle = "rgba(" + d.c + "," + (t + .2) + ")", r.moveTo(i.x, i.y),
r.lineTo(n.x, n.y), r.stroke()))
}),
x(i)
}
var a, c, u, m = document.createElement("canvas"),
d = t(),
l = "c_n" + d.l,
r = m.getContext("2d"),
x = window.requestAnimationFrame || window.webkitRequestAnimationFrame
|| window.mozRequestAnimationFrame || window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function(n) {
window.setTimeout(n, 1e3 / 45)
},
w = Math.random,
y = {
x: null,
y: null,
max: 2e4
};
m.id = l,
m.style.cssText = "position:fixed;top:0;left:0;z-index:" + d.z +
";opacity:" + d.o,
e("body")[0].appendChild(m),
o(),
window.onresize = o,
window.onmousemove = function(n) {
n = n || window.event,
y.x = n.clientX,
y.y = n.clientY
// 评论区采用的时Valine https://valine.js.org/ 和LeanCloud
},
window.onmouseout = function() {
y.x = null,
y.y = null
};
for (var s = [], f = 0; d.n > f; f++) {
var h = w() * a,
g = w() * c,
v = 2 * w() - 1,
p = 2 * w() - 1;
s.push({
x: h,
y: g,
xa: v,
ya: p,
max: 6e3
})
}
u = s.concat([y]),
setTimeout(function() {
i()
},
100)
} ();
</script>
hexo-theme-Claudia主题加雪花特效：
在themes\hexo-theme-Claudia\source\js目录下，添加snow.js,代码如下：
/* 控制下雪 */
function snowFall(snow) {
/* 可配置属性 */
snow = snow || {};
this.maxFlake = snow.maxFlake || 200; /* 最多片数 */
this.flakeSize = snow.flakeSize || 10; /* 雪花形状 */
this.fallSpeed = snow.fallSpeed || 1; /* 坠落速度 */
}
/* 兼容写法 */
requestAnimationFrame = window.requestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.msRequestAnimationFrame ||
window.oRequestAnimationFrame ||
function(callback) { setTimeout(callback, 1000 / 60); };
cancelAnimationFrame = window.cancelAnimationFrame ||
window.mozCancelAnimationFrame ||
window.webkitCancelAnimationFrame ||
window.msCancelAnimationFrame ||
window.oCancelAnimationFrame;
/* 开始下雪 */
snowFall.prototype.start = function(){
/* 创建画布 */
snowCanvas.apply(this);
/* 创建雪花形状 */
createFlakes.apply(this);
/* 画雪 */
drawSnow.apply(this)
}
/* 创建画布 */
function snowCanvas() {
/* 添加Dom结点 */
var snowcanvas = document.createElement("canvas");
snowcanvas.id = "snowfall";
snowcanvas.width = document.body.offsetWidth;
snowcanvas.height = window.innerHeight;
snowcanvas.setAttribute("style", "position:fixed; top: 0; left: 0; z-index: -1; pointer-events: none;");
document.getElementsByTagName("body")[0].appendChild(snowcanvas);
this.canvas = snowcanvas;
this.ctx = snowcanvas.getContext("2d");
/* 窗口大小改变的处理 */
window.onresize = function() {
// snowcanvas.width = document.body.offsetWidth;
/* snowcanvas.height = window.innerHeight */
}
}
/* 雪运动对象 */
function flakeMove(canvasWidth, canvasHeight, flakeSize, fallSpeed) {
this.x = Math.floor(Math.random() * canvasWidth); /* x坐标 */
this.y = Math.floor(Math.random() * canvasHeight); /* y坐标 */
this.size = Math.random() * flakeSize + 2; /* 形状 */
this.maxSize = flakeSize; /* 最大形状 */
this.speed = Math.random() * 1 + fallSpeed; /* 坠落速度 */
this.fallSpeed = fallSpeed; /* 坠落速度 */
this.velY = this.speed; /* Y方向速度 */
this.velX = 0; /* X方向速度 */
this.stepSize = Math.random() / 30; /* 步长 */
this.step = 0 /* 步数 */
}
flakeMove.prototype.update = function() {
var x = this.x,
y = this.y;
/* 左右摆动(余弦) */
this.velX *= 0.98;
if (this.velY <= this.speed) {
this.velY = this.speed
}
this.velX += Math.cos(this.step += .05) * this.stepSize;
this.y += this.velY;
this.x += this.velX;
/* 飞出边界的处理 */
if (this.x >= canvas.width || this.x <= 0 || this.y >= canvas.height || this.y <= 0) {
this.reset(canvas.width, canvas.height)
}
};
/* 飞出边界-放置最顶端继续坠落 */
flakeMove.prototype.reset = function(width, height) {
this.x = Math.floor(Math.random() * width);
this.y = 0;
this.size = Math.random() * this.maxSize + 2;
this.speed = Math.random() * 1 + this.fallSpeed;
this.velY = this.speed;
this.velX = 0;
};
// 渲染雪花-随机形状（此处可修改雪花颜色！！！）
flakeMove.prototype.render = function(ctx) {
var snowFlake = ctx.createRadialGradient(this.x, this.y, 0, this.x, this.y, this.size);
snowFlake.addColorStop(0, "rgba(255, 255, 255, 0.9)"); /* 此处是雪花颜色，默认是白色 */
snowFlake.addColorStop(.5, "rgba(255, 255, 255, 0.5)"); /* 若要改为其他颜色，请自行查 */
snowFlake.addColorStop(1, "rgba(255, 255, 255, 0)"); /* 找16进制的RGB 颜色代码。 */
ctx.save();
ctx.fillStyle = snowFlake;
ctx.beginPath();
ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
ctx.fill();
ctx.restore();
};
/* 创建雪花-定义形状 */
function createFlakes() {
var maxFlake = this.maxFlake,
flakes = this.flakes = [],
canvas = this.canvas;
for (var i = 0; i < maxFlake; i++) {
flakes.push(new flakeMove(canvas.width, canvas.height, this.flakeSize, this.fallSpeed))
}
}
/* 画雪 */
function drawSnow() {
var maxFlake = this.maxFlake,
flakes = this.flakes;
ctx = this.ctx, canvas = this.canvas, that = this;
/* 清空雪花 */
ctx.clearRect(0, 0, canvas.width, canvas.height);
for (var e = 0; e < maxFlake; e++) {
flakes[e].update();
flakes[e].render(ctx);
}
/* 一帧一帧的画 */
this.loop = requestAnimationFrame(function() {
drawSnow.apply(that);
});
}
/* 调用及控制方法 */
window.onload = function() {
var element = document.body;
var width = element.offsetWidth;
var height = element.offsetHeight;
console.log("Width: " + width + "px");
console.log("Height: " + height + "px");
var snow = new snowFall({maxFlake:200});
snow.start();
};
然后可以在themes\hexo-theme-Claudia\layout目录下的index.pug引入这个js
extends widget/base
block append head
link(rel='stylesheet', href= url_for("/style/widget-post-list.css"))
script(src= url_for("/js/snow.js"))
block content
include widget/widget-post-list
block sidebar
include widget/widget-search
if theme.widgets.includes('profile')
include widget/widget-profile
if theme.widgets.includes('recent_posts')
include widget/widget-recent
if theme.widgets.includes('category') && site.categories.length > 0
include widget/widget-categories
if theme.widgets.includes('archive')
include widget/widget-archives
if theme.widgets.includes('tag') && site.tags.length > 0
include widget/widget-tag
if theme.friend_links && theme.friend_links.length > 0
main.aside-card-container.friend-widget
h3= _p('friends')
section
each link in theme.friend_links
a(href= link.link)
span.tag.post-item-tag(style="margin-bottom: 5px;")= link.title
8.代码高亮处理，以及增加复制、折叠功能
hexo默认可以使用highlight.js 或者prismjs 高亮库，开启相关配置见：代码高亮 | Hexo。
hexo-theme-Claudia主题自带代码高亮，但是不支持行号，只要把hexo默认的的高亮配置关闭就行：
syntax_highlighter:
highlight:
enable: false
line_number: true
auto_detect: false
tab_replace: ''
wrap: false
hljs: true
prismjs:
enable: false
preprocess: true
line_number: true
tab_replace: ''
或者可以自定义代码高亮配置，可以从网上找教程。
代码块增加复制、折叠功能参考：Hexo 博客代码块样式美化 - 知乎 (zhihu.com)。
我在hexo-theme-Claudia主题的**/themes/hexo-theme-Claudia/layout/post.pug**文件引入了codeBlockFuction.js、codeBLang.js、codeCopy.js、codeShrink.js、自定义了custom.css(使用默认的高亮样式就不需要),注意font-awesome、highlightjs-line-numbers.min.js和clipboard.min.js我用cdn引入了。
hexo-theme-Claudia主题的代码分词和高亮是highlight.pack.js、highlight-theme-light.css实现的。
想要自己实现可以从官网Download a Custom Build - highlight.js (highlightjs.org)下载的最新的highlight.min.js，同时可以修改highlight-theme-light.css，行号的一些样式我加在了这个css中，然后在post.js中hljs && hljs.initLineNumbersOnLoad(); 使用。
或者不使用highlight-theme-light.css，直接从网上找其他的highlight.js/src/styles at main · highlightjs/highlight.js (github.com)，比如monokai-sublime.min.css，直接引入就可以了。post.pug代码如下：
extends widget/base
block append head
link(rel='stylesheet', href= url_for('/style/post.css'))
link(rel='stylesheet', href= url_for('/style/themes/highlight-theme-light.css'))
link(rel='stylesheet' href= url_for('https://cdn.bootcdn.net/ajax/libs/font-awesome/6.5.2/css/all.css'))
//link(rel='stylesheet', href= url_for('/style/themes/monokai-sublime.min.css'))
link(rel='stylesheet', href= url_for('/style/common/jquery.fancybox.min.css'))
//script(src= url_for("/js/highlight.pack.js"))
script(src= url_for("/js/highlight.min.js"))
style(type="text/css") code[class*="language-"], pre[class*="language-"] { white-space: pre !important; }
script(src= url_for("https://cdn.bootcdn.net/ajax/libs/clipboard.js/2.0.11/clipboard.min.js"))
script(src= url_for("https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"))
script(src= url_for("https://cdn.bootcdn.net/ajax/libs/highlightjs-line-numbers.js/2.8.0/highlightjs-line-numbers.min.js"))
script(src= url_for("/js/hightlight/codeBLang.js"))
script(src= url_for("/js/hightlight/codeBlockFuction.js"))
script(src= url_for("/js/hightlight/codeCopy.js"))
script(src= url_for("/js/hightlight/codeShrink.js"))
meta(name="description", content=truncate( strip_html(page.content), {length: 360, omission: '..'} ))
if theme.comment_valine && theme.comment_valine.enable
script(src="//unpkg.com/valine/dist/Valine.min.js")
block topic
div#postTopic.is-full-height
- var title = truncate( page.title, {length: 65, omission: '..'} ) || ''
p.is-full-height.is-flex-shrink-0.is-flex.is-align-items-center.is-justify-content-center= title
p.is-full-height.is-flex-shrink-0.is-flex.is-align-items-center.is-justify-content-center= __('click_back_to_the_top')
block content
- var tocContent = toc(page.content, {list_number: false})
main.container.is-max-widescreen.content.section.post-page.pt-4.px-4
.columns.is-flex-desktop.is-justify-content-center.is-flex-direction-row-reverse
.column.is-3.is-hidden-mobile(class= tocContent.length < 1 && 'is-hidden')!= tocContent
.column.is-9
header.my-4
if page.tags && page.tags.length > 0
each tag in page.tags.toArray()
a(href= url_for(`/tags/${tag.name}`))
i.tag.post-item-tag= tag.name
h1.mt-0.mb-1.is-family-serif#postTitle= page.title
if page.date
time.has-text-grey(datetime=page.date.toJSON())= date(page.date, date_format)
article.mt-2.post-content!= page.content
section.jump-container.is-flex.is-justify-content-space-between.my-6
// em is empty placeholder
if page.prev
- var preContent= `${ __('prev') }: ${ page.prev.title }`
a.button.is-default(href= url_for(page.prev.path) title= page.prev.title)
i.iconfont.icon-prev.mr-2.has-text-grey
span.has-text-weight-semibold= preContent
else
em
if page.next
- var nextContent= `${ __('next') }: ${ page.next.title }`
a.button.is-default(href= url_for(page.next.path) title= page.next.title)
span.has-text-weight-semibold= nextContent
i.iconfont.icon-next.ml-2.has-text-grey
if theme.comment_utteranc && theme.comment_utteranc.enable
article.mt-6.comment-container
script(
async
repo= theme.comment_utteranc.repo
src= "https://utteranc.es/client.js"
label= theme.comment_utteranc.label
issue-term= theme.comment_utteranc.issue_term || "pathname"
theme= theme.comment_utteranc.theme || "preferred-color-scheme"
)
if theme.comment_valine && theme.comment_valine.enable
article.mt-6.comment-container#vcomments(
data-comment_valine_id= theme.comment_valine.appId
data-comment_valine_key= theme.comment_valine.appKey
)
if theme.comment_disqus && theme.comment_disqus.enable
div#disqus_thread
article.mt-6.comment-container#disqus
script="var disqus_config = function () {this.page.url = '"+theme.comment_disqus.url+url_for(page.path)+"';this.page.identifier = '"+theme.comment_disqus.name+"';};"
script="(function() {var d = document, s = d.createElement('script');s.src = 'https://"+theme.comment_disqus.name+".disqus.com/embed.js';s.setAttribute('data-timestamp', +new Date());(d.head || d.body).appendChild(s);})();"
script(id="dsq-count-scr", src="//blog-pubgj2togw.disqus.com/count.js", async)
block script
if theme.image_zoom && theme.image_zoom.enable
script(src= url_for("/js/jquery-3.6.1.min.js"))
script(src= url_for("/js/jquery-fancybox.min.js"))
script(src= url_for("/js/img_zoom.js"))
script(src= url_for("/js/post.js"))
9.图片显示及相关问题
图片可以使用网络图片或者图床，直接把url复制粘贴就可以显示了。如果使用本地图片，可以把图片放入同名文章的文件夹里，直接用相对路径引用，如：pic.jpg，注意不要用**/pic.jpg**，不然会被识别成绝对路径。
因为md生成的html和图片在同一个文件夹里 。
如果要在Typora中预览本地图片，在格式->图像->设置图片根目录，选择同名文件夹就可以了。详细操作参考：
参考：hexo博客如何插入图片 - 知乎 (zhihu.com)
10.评论区
评论区采用的时Valine https://valine.js.org/ 和LeanCloud