整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线：

hexo博客（四）：自定义主题并发布

hexo博客（四）：自定义主题并发布

方的landscape主题太丑了，用别人的主题不是这里错就是哪里错，基本上别的主题都多少要配置一些东西，像我这种连git都是刚开始用的小白根本搞不动啊。刚开始我的心情是这样的“我就想要个简单的博客，能评论一下就好了啊，你们弄这些没多大卵用的功能搞啥子哦！算了，自己撸一个总行了吧！”。

我的懒喵主题是一款粉色系的，参考了BeanTech主题。是类似单页的一款主题，使bootstrap构建的简洁主题。就是下面的样子啦！

ok，说干就干，期间查了很多资料，看了几个主题的源码，然后就战战兢兢的开始搞了，刚开始根本不知道是啥意思，感觉无从下手啊，根本原因就是没有理解hexo，主题做了几天后才大概明白了这是个什么东西，没关系，这其实就是学习的过程。但是请不要放弃，我也是做了好久才做出来的，到最后你会发现没有那么难，困难需要一点一点的解决！

咱们就撸一个最简单的博客，为了让你少走弯路，我先把一些概念说一下，这样你做起来会更简单。

首先务必先看一遍官方文档关于主题的说明，然后按照官方默认主题landscape搭建一下项目的文件结构。

布局

Hexo 有三种默认布局： post 、 page 和 draft ，它们分别对应不同的路径。

post就是指文章详情页，page指的是首页，分类页，标签页，归档页，draft是草稿，这个不用在意，一般用不到，写草稿干啥，我写完就发布了。

模板

模板文件在layout文件夹下，文件名对应Hexo中的模板名，有index（首页）,post（文章）,page（分页）,archive（归档）,category（分类）,tag（标签）几种，对于普通的header + content + footer的页面结构，header和footer往往是可以复用的，因此我们可以使用layout.ejs进行布局。

变量

Hexo提供了很多变量，拿来直接用，页面的内容就是根据这些变量获取的，具体变量介绍看这里

ejs文件

你会看到很多文件后缀都是.ejs，ejs是一个JavaScript模板库，用来从JSON数据中生成HTML字符串。其实看一下别的主题的写法就知道大概怎么写了，不会的网上搜一下。出了错控制台都会显示哪一行出的错，很好排错。

说完上面这些你大概就知道你的博客其实就几个页面而已，首页，文章页，分类页，归档页，标签页，然后就没了，你甚至可以简单到只有首页和文章页。主题中的_config.yml menu对应这几个页面的链接。

我的主题算是单页，所以更简单，没有多少代码，很好理解。

首先layout下面的layout.ejs,如果你的网站是普通的header + content + footer的页面结构，header和footer往往是可以复用的，因此我们可以使用layout.ejs进行布局，你所有打开的页面都会是这个样子。

举例我的layout.ejs

1234567891011121314151617181920212223
<!doctype html><html><!-- Head --><%- partial('_partial/head') %><body><!-- Header --><%- partial('_partial/header',{cache:true}) %><!-- Nav --><%- partial('_partial/nav',{cache:true}) %><!-- Content --><%- body %><!-- Footer --><%- partial('_partial/footer',{cache:true}) %></body></html>

就是一个普通网站的结构，partial是局部模板让您在不同模板之间共享相同的组件，例如页首（Header）、页脚（Footer）或侧边栏（Sidebar）等，可利用局部模板功能分割为个别文件，让维护更加便利。

content是内容，其他的去我的主题里看看代码吧，很简单就不讲了。

然后主要就讲index.ejs，因为我的博客类似于单页，下面是样子

，从上到下依次是页首+（文章列表，分页，分类，归档，标签）。代码如下：

12345678910111213141516171819202122232425
<div> <div> <!-- Post Container --> <div class=" col-lg-8 col-lg-offset-1 col-md-8 col-md-offset-1 col-sm-12 col-xs-12 post-container "> <% page.posts.each(function(post){ %> 省略 <% }); %> <!-- Pager --> <%- partial('_partial/pagination') %> </div> <!-- Sidebar --> <%- partial('_partial/sidebar') %> </div></div>

其中sidebar就是右侧的分类，归档和标签。具体的代码自己去看一下，就不讲了。

然后就是archive.ejs、category.ejs、tag.ejs基本文件了，但是你会看到里面都只有一句话<%- partial('_partial/archive') %>,这代表这三个页面共享局部模板archive.ejs，显示出来的内容是一样的，就只是列了一下检索后的文章列表而已，所以都一样。这里特别说明一下，刚开始的时候很困惑，hexo是怎么根据分类、日期或标签筛选文章的，后来发现hexo根据url自己就筛选出来了。例如你打开了标签了你会发现url变成了xxxx/tags/xxxx/，因为咱们在_partial/archive.ejs生成模板时，代码是page.post……，意思是本页的文章，hexo已经把筛选后的标签放进了变量里了，直接用。

其实并没有多少东西，对吧。还要注意的是，你应该把你的css，js全放到source文件下。这样一个超简单的博客就完成了，如果你觉得你的博客做的挺好，你可以让官方收录，流程查看这里，务必要按照要求来，不然会被打回来，我的lanmiao(懒喵)主题已经被收录了，有兴趣的可以下载或fork。

、前言

在上一篇文章中，我们介绍了什么是Hexo，以及使用Hexo搭建个人网站（博客）的步骤，托管到GitHub的步骤，以及一些常用插件的使用与安装。


在上一篇文章介绍什么是Hexo的时候，提到Hexo使用Markdown解析文章，所以本篇文章我们就来学习下Markdown语法的相关知识。


在学习Markdown语法之前，我先给大家列一些Hexo搭建博客经常遇到的问题及解决方案。


二、No Layout:index.html问题


2.1、问题描述


之前对Hexo以及Next主题做了版本更新，更新之后在执行 hexo g 编译时出现了 No layout:index.html 的错误，如下图：


2.2、解决方案：


1.查看hexo插件安装情况，因内容较多，只部分截图：

npm ls --depth 0




2. hexo的一些插件未安装

npm ERR! peer dep missing: eslint@>=4.12.1, required by babel-eslint@10.0.3
npm ERR! peer dep missing: eslint@>=4.12.1, required by babel-eslint@10.0.3


3. 逐一安装缺失的插件

npm install eslint --save


4. 执行npm install后，执行npm audit fix


三、访问Hexo博客出现“Cannot GET/xxx”错误


3.1、问题描述


在Hexo博客中，出现 Cannot GET/xxx 错误便意味着 xxx文件未被找到 。


Cannot GET/xxx 错误本质是 hexo server 返回的一个 404 错误。



3.2、解决方案


1. 判断public目录下xxx文件是否存在。


2. 如果说xxx.html不存在，那么执行 hexo c ， hexo g 重新生成一次，回到步骤1。


3. 步骤2执行完后xxx.html仍不存在，执行 npm audit fix ，查看是否少了什么组件，通过 npm install hexo-xxx-xxx 安装即可。


4. 步骤3完成之后，执行 hexo c ， hexo g 重新生成静态文件。


5. 仍然有问题，请再参考此文：<https://www.cnblogs.com/Sroot/p/6305938.html>


下面就进入今天的正题：Markdown语法糖。


四、什么是Markdown


4.1、Markdown介绍

Markdown 是一种轻量级的标记语言，其用简单的标记语法便可达到排版的目的，可以使我们更加专注于内容的编写，而不需过多关注排版。

本文主要整理了 Markdown 中的常用的标记语法，以便自己与他人以后查用。


4.2、Markdown的优点

  • 纯文本，所以兼容性极强，可以用所有文本编辑器打开。
  • 让你专注于文字而不是排版。
  • 格式转换方便，Markdown 的文本你可以轻松转换为 html、电子书等。
  • Markdown 的标记语法有极好的可读性。


4.3、Markdown的缺点

  • 需要记一些语法（当然，是很简单。五分钟学会）。
  • 有些平台不支持Markdown编辑模式。


五、基本语法


5.1、标题


在想要设置为标题的文字前面加#来表示，一个#是一级标题，二个#是二级标题，以此类推。支持六级标题。


注意：#与文字之间要有一个空格。


示例：

# 这是一级标题
## 这是二级标题
### 这是三级标题
#### 这是四级标题
##### 这是五级标题
###### 这是六级标题


效果如下：


5.2、字体


星号或者下划线都可以，单是斜体，双是粗体，符号可以跨行，符号可加空格。

  • 加粗：要加粗的文字左右分别用两个*号包起来。
  • 斜体：要倾斜的文字左右分别用一个*号包起来。
  • 斜体加粗：要倾斜和加粗的文字左右分别用三个*号包起来。
  • 删除线：要加删除线的文字左右分别用两个~~号包起来。


示例：

**这是加粗的文字**
*这是倾斜的文字*`
***这是斜体加粗的文字***
~~这是加删除线的文字~~


效果如下：


5.3、引用


在引用的文字前加>即可。引用也可以嵌套，如加两个>> 三个>>> n个... 貌似可以一直加下去，但没神马卵用。


示例：

>这是引用的内容
>>这是引用的内容
>>>>>>>>>>这是引用的内容


效果如下：


5.4、分割线


三个或者三个以上的 - 或者 * 都可以。


示例：

---
----
***
*****


效果如下：

可以看到，显示效果是一样的。


5.5、图片


语法：

![图片alt](图片地址 ''图片title'')
  • 图片alt就是显示在图片下面的文字，相当于对图片内容的解释。
  • 图片title是图片的标题，当鼠标移到图片上时显示的内容。title可加可不加。


示例：

![一脸懵逼](https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1558179968948&di=1c8a7432843fdaafb91e9cbffacd1557&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201608%2F02%2F20160802213915_x23St.thumb.700_0.jpeg "一脸懵逼")


效果如下：


5.6、超链接


语法：

[超链接名](超链接地址 "超链接title")
title可加可不加


示例：

[简书](http://jianshu.com)
[百度](http://baidu.com)


效果如下：


注：Markdown本身语法不支持链接在新页面中打开，如果想要在新页面中打开的话可以用html语言的a标签代替。

<a href="超链接地址" target="_blank">超链接名</a>


示例

<a href="https://www.jianshu.com/u/1f5ac0cf6a8b" target="_blank">简书</a>


5.7、索引超链接


示例：

[百度][1]
[1]:http://www.baidu.com

效果如下：


5.8、自动链接


语法：使用尖括号。


示例：

<http://www.baidu.com>
<1111111@qq.com>


效果如下：



5.9、列表


5.9.1、无序列表


语法：

无序列表用 - + * 任何一种都可以。

- 列表内容
+ 列表内容
* 列表内容

注意：- + * 跟内容之间都要有一个空格。


效果如下：



5.9.2、有序列表


语法：数字加点。

1. 列表内容
2. 列表内容
3. 列表内容

注意：序号跟内容之间要有空格。


效果如下：



5.9.3、嵌套列表


语法：上一级和下一级之间敲三个空格即可。

+ 一级无序列表内容

   + 二级无序列表内容
   + 二级无序列表内容
   + 二级无序列表内容

**********************************************

+ 一级无序列表内容
   1. 二级有序列表内容
   2. 二级有序列表内容
   3. 二级有序列表内容

-----------------------------------------------


效果如下：


1. 一级有序列表内容


   + 二级无序列表内容
   + 二级无序列表内容
   + 二级无序列表内容


*****************************************************


2. 一级有序列表内容


   1. 二级有序列表内容
   2. 二级有序列表内容
   3. 二级有序列表内容



注意：在使用列表时，只要是数字后面加上英文的点，就会无意间产生列表，比如2019.5.18 这时候想表达的是日期，有些软件把它被误认为是列表。

解决方式：在每个点前面加上\就可以了。如下示例： 

2019\.5\.18

效果如下：


5.10、表格


5.10.1、Markdown表格


语法：

|表头|表头|表头|
|---|:---:|---:|
|内容|内容|内容|
|内容|内容|内容|


第二行分割表头和内容。
- 有一个就行，为了对齐，多加了几个
文字默认居左
-两边加：表示文字居中
-右边加：表示文字居右
注：原生的语法两边都要用 | 包起来。此处省略

示例1：

| 法号        | 本领    |  排行  |
| :--------:  | :-----: | :----: |
| 悟空        | 72变    |  大师兄|
| 悟能        | 36变    |  二师哥|
| 悟净        | 18变    |  三师弟|

效果如下：

示例2：

表头1  | 表头2
------------- | -------------
Content Cell  | Content Cell
Content Cell  | Content Cell


| 表头1  | 表头2|
| ------------- | ------------- |
| Content Cell  | Content Cell  |
| Content Cell  | Content Cell  |


| 名字 | 描述          |
| ------------- | ----------- |
| Help      | Display the help window.|
| Close     | Closes a window     |


#表格中也可以使用普通文本的删除线，斜体等效果


| 名字 | 描述          |
| ------------- | ----------- |
| Help      | ~~Display the~~ help window.|
| Close     | _Closes_ a window     |


#表格可以指定对齐方式


| 左对齐 | 居中  | 右对齐 |
| :------------ |:---------------:| -----:|
| col 3 is      | some wordy text | $1600 |
| col 2 is      | centered        |   $12 |
| zebra stripes | are neat        |    $1 |

效果如下：

5.10.2、HTML表格


语法：

<table>
  <tr>
    <th>项目1</th>
    <th>项目2</th>
    <th>项目3</th>
  </tr>
  <tr>
    <td>a1</td>
    <td colspan="2">a2</td>
  </tr>
  <tr>
    <td rowspan="2">b1</td>
    <td>b2</td>
    <td>b3</td>
  </tr>
  <tr>
    <td>c2</td>
    <td>c3</td>
  </tr>
</table>


效果如下：


需要注意的一点是，在markdown中使用html代码来实现表格的效果，需要在表格的外面套上：

<escape></escape>

<escape>（转义），防止markdown直接将代码中的行进行转义成回车，不然会出现表格前空了一大块空白。


但同时，引入html会使得markdown的易读易写的特性降低。除非必要，还是推荐使用markdown本身的表格语法。

那么，我们如何在使用html表格的时候，偷懒不用打这段表格呢？


[http://www.tablesgenerator.com/]

安利这个网站，它可以实现你的需求，包括合并单元格等。


5.11、代码


5.11.1、单行代码


语法：代码之间分别用一个反引号包起来。

`代码内容`


示例：

`create database hero;`


效果如下：


5.11.2、代码块


语法：代码之间分别用三个反引号包起来，且两边的反引号单独占一行。

(```)
  代码...
  代码...
  代码...
(```)

注：为了防止转译，前后三个反引号处加了小括号，实际是没有的。这里只是用来演示，实际中去掉两边小括号即可。


示例：

(```)
    function fun(){
         echo "这是一句非常牛逼的代码";
    }
    fun();
(```)


效果如下：


5.12、注释


语法：用html的注释。

<!-- 用html的注释 -->


5.13、转义字符


Markdown中的转义字符为\，转义的有：

\\ 反斜杠
\` 反引号
\* 星号
\_ 下划线
\{\} 大括号
\[\] 中括号
\(\) 小括号
\# 井号
\+ 加号
\- 减号
\. 英文句号
\! 感叹号


效果如下：


5.14、流程图


语法如下：

st=>start: 开始
op=>operation: My Operation
cond=>condition: Yes or No?
e=>end
st->op->cond
cond(yes)->e
cond(no)->op


效果如下：


5.16、段落与换行

Markdown中段落指连续的一段文字，编写时段落之间至少一个 空行 隔开，段落内多个空格被视为一个空格，段首不支持缩进。

如何想要在显示时显示多个空行，可以插入实现，注意的是，插入的应与前后的段落中间至少空一行。


5.17、段落缩进（空格）


示例：

半方大的空白?或?看，飞碟
全方大的空白?或?看，飞碟
不断行的空白格 或 看，飞碟
??段落从此开始。


效果如下：


5.18、字体、字号、颜色、背景色


示例：

<font face="黑体">我是黑体字</font>
<font face="微软雅黑">我是微软雅黑</font>
<font face="STCAIYUN">我是华文彩云</font>
<font color=#0099ff size=12 face="黑体">黑体</font>
<font color=#00ffff size=3>null</font>
<font color=gray size=5>gray</font>
<table><tr><td bgcolor=#FF4500>这里的背景色是：OrangeRed，  十六进制颜色值：#FF4500， rgb(255, 69, 0)</td></tr></table>

效果如下：


六、快捷键

功能

快捷键

加粗

Ctrl + B

斜体

Ctrl + I

引用

Ctrl + Q

插入链接

Ctrl + L

插入代码

Ctrl + K

插入图片

Ctrl + G

提升标题

Ctrl + H

有序列表

Ctrl + O

无序列表

Ctrl + U

横线

Ctrl + R

撤销

Ctrl + Z

重做

Ctrl + Y


七、GitHub特有特性


7.1、复选框列表


在列表符号后面加上[]或者[x]代表选中或者未选中情况。


示例：

+ [x] C
+ [x] C++
+ [x] Java
+ [x] Qt
+ [x] Android
+ [ ] C#
+ [ ] .NET

效果如下：


7.2、emoji表情符号


emoji表情使用:EMOJICODE:的格式，详细列表可见：

https://www.webpagefx.com/tools/emoji-cheat-sheet/

当然现在很多markdown工具或者网站都不支持。


下面列出几个平台的对比：

工具/网站

emoji

简书

否

言

上次介绍了使用 Hexo+GitHub Pages，零成本搭建一个专属自己的独立博客网站。我觉得那篇文章是没有入门门槛的，不管你是什么行业，只要想打造个人 IP，又不太想受博客平台约束，那么读完后动手操作一下也能轻松完成。而这次呢，上篇也说了 Hexo 会出三篇内容，这里就要在前者基础上做进一步升级，将完成下面七个主要的博客常用功能。

指标

  • Hexo 如何安装 Butterfly 主题并配置？
  • Hexo 如何创建页面和添加文章？
  • Hexo 如何添加第三方评论系统？
  • Butterfly 主题如何添加站内搜索？
  • Butterfly 主题如何添加百度统计？
  • Butterfly 主题如何添加文章置顶功能？
  • Butterfly 主题如何配置 RSS 和 404 页面？
  • 如何配合 Typora 完成 md 的同步与本地备份？

主题添加与配置

Hexo 官网专门有一个栏目的主题列表，这里我选的 “butterfly”，首先拉取主题代码到 themes 目录下，然后在 Hexo 的配置中启动主题。

拉取主题包

git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly

启动主题

theme: butterfly

基础配置

基础配置主要是设置网站的标题、描述、SEO、菜单等项，下面我就列出 hexo 的 config（根目录下_config.yml），和主题 Butterfly 的 config（themes 的 Butterfly 下_config.yml），并注释相关项的简介仅供参考。

hexo_config.yml

hexo_butterfly_config.yml

创建菜单页面

页面包括标签页（tags）、分类页（categories）、友链页（link）、关于页（about），当然也可以自行添加，比如音乐电影之类。不过添加这种页面方式都大同小异，以下以标签页举例。

运行命令

hexo new page tags

编辑 MD

运行命令后，会在 source 下根据 butterfly 模板生成对应的 md 文件，tags 就是 tags，不过要将 md 文件的 type 修改为对应的类型，类型见上。

title: 标签页date: 2024-05-02 21:01:24type: "tags"

Page（页面）front-matter

title: 页面名称date:  创建日期type: （tags,link,categories这三个页面需要配置）comments: (是否需要显示评论，默认true)description: 用于SEO优化top_img: (设置顶部图)mathjax: (数学公式显示是否支持)katex:   (Tex公式显示是否支持)

创建文章

写文章，可以通过命令创建，也可以在 source/_posts 目录下，自行新建 markedown 文件，因为命令也是在_posts 文件夹下新建。

运行命令

hexo new "文章的大标题"

Post（文章）front-matter

title: CentOS7下Tomcat启动慢的原因及解决方案date: 2017-12-02 21:01:24description：文章描述，用于做SEO优化的keywords: 文章SEO关键词top_img: 文章顶部图cover: 文章缩略图（封面图）toc: true (是否显示文章目录)toc_number: true (是否显示文章目录的标识数字)copyright: true (是否显示版权)mathjax: (数学公式显示是否支持)katex:   (Tex公式显示是否支持)hide: false (是否隐藏当前文章)comments: true #是否可评论toc: true #是否显示文章目录categories: "云服务器" #分类tags:   #标签 - centOS - tomcat

站内搜索添加

站内搜索，我是采用的 hexo-generator-search 插件解决方案，安装完插件，然后配置一下，最后用 hexo 清理再生成一下全站静态，同时在根目录也会生成一个 search.xml，用于做字符串模糊匹配的。

插件安装

npm install hexo-generator-search --save

添加或配置

-config（hexo配置）search:  path: search.xml  field: post  format: html  limit: 10000-butterfly-config（butterfly主题配置）local_search:  enable: true  preload: false  CDN:

清理与生成

hexo clean && hexo g

评论系统添加

第三方评论系统我这里使用的是 Gitalk ，Gitalk 是一个基于 GitHub Issue 和 Preact 开发的评论插件。使用 GitHub 登陆，能支持多国语言，至于他的原理，其他博主有介绍。这里就不展开了，如果有时间以后可能会整体介绍一下常用的第三方评论系统，因为我还是希望评论能支持多种方式登陆的，目前没有找到合适的就先选择 Gitalk。

注册应用账号

获取参数

注册成功后拿到 “Client ID” 和 “Client secrets”（点击生成再复制），其中注意的是 Homepage URL 要设置为 用户名.github.io 精确到 https 的地址。Authorization callback URL 填写注册的域名，如果绑定了个性化域名就填自己的域名，也是要精确到 https 的位置。

修改 Butterfly 配置

打开 butterfly 主题的配置文件，第一个找到 “gitalk” 项，将上面复制的 client id 和 client secrets 粘贴。

第二个找到 “comments”，将 use 配置为 "gitalk"，当然也可以用 valine、Disqus 之类的第三方评论系统。

comments:  use: # 使用的第三方评论系统名称  text: true # 是否在按钮旁显示评论名称  # If you set it to true, the comment count will be invalid  lazyload: false # 是否设置评论窗为懒加载  count: true # 是否设置评论数统计  card_post_count: true # 是否将评论数显示到首页  gitalk:  client_id: # github应用ID  client_secret: # github应用密钥  repo: 用户名.github.io  owner: 用户名  admin: 用户名

博客仓库设置

进入仓库，点击 “Settings”，找到 “Features”， 将 “Issues” 勾选。

文章置顶功能添加

打开 hexo 配置文件 _config.yml，如果前面有 per_page 的关闭，使用的是 hexo-generator-index 插件排序，可以自定义序号和日期排序。

如何要置顶文章，只需在文章 md 的 front-matter 里添加一个 top 参数，数值自定。文章列表会出现一个钉子图标，要看到效果则要 hexo 先清理再生成。

添加配置

index_generator:  path: ''  per_page: 5  # 每页条数  order_by:	       top: -1	   # 置顶： -1.倒序 1.顺序    date: -1   # 日期： -1.倒序 1.顺序

md 文章设置

清理与生成

hexo clean && hexo g

RSS 配置

对于 RSS 输出功能，需要安装 hexo-generator-feed 插件。最后使用 hexo 清理再生成，博客根目录就会生成 atom.xml

插件安装

npm install hexo-generator-feed --save

添加配置

feed:  type: atom  path: atom.xml  limit: 20

设置 RSS 地址

rss: /atom.xml

设置 404 页面

在 hexo 的_config.yml 找到或添加 error_404，设置开启，分别添加标题和背景图。

error_404:  enable: true  subtitle: 'Page Not Found'  background: /img/404.jpg

添加百度统计

先登陆或注册百度统计平台，找到 “使用设置” -> “代码获取” -> “新版统计代码获取”，然后会看到一段 js 代码，只需要复制如下的一个 32 位长度的字符串。最后将该字符串粘贴到 butterfly 的 config.yml 中的 baidu_analytics 中，部署后一天就可以在后台查看统计报表了。

MarketDown 用法

关于新建的文章，我希望本地能备份一份，有 md 文件和图片，方便上传到其他平台博客。那要怎么做呢，这里我用一个免费的 md 工具 ——Typora 为例。

创建文件和文件夹

创建一个以文章标题的文件夹，里面再分别创建一 img 文件夹和同文章标题的 md 文件，img 下再创建一个与文章标题同名的文件夹。

Typora 设置

依次找到 “文件” -> “偏好设置” -> "图像" , 将插入图片时的下拉选中 “复制到指定路径”，填入下面的值。

./img/${filename}/

第二步找到 “格式” -> "图像" -> “设置图片根目录”，选择 markdown 文件同级的目录，最后复制图片时就会复制到 img 下的文章同名目录下。

为什么要这样设置？因为 Hexo 的图片在打包前都是在主题包 /source/img 里，而为了方便本地能按文章存储，也方便将本地的文章图片直接丢到 img 下，然后 md 文件放到_post 中。打包之后就能以仓库图片展示，而且按文章分类存储，以后删除起来也一目了然。

写在最后

这次的优化看起来好像是面面俱到了，但其实关于 Hexo 主题还有更细节的处理。比如可以添加博客看板精灵，酷炫的动态大背景，还有鼠标跟随或点击特效等等。但是我这博客目前定位主要以内容为主，所以暂时就就演示了，当然，如果有用户喜欢也可以马上加上去的。

最后呢，就是三部曲的第二篇结束了，那下次就自然地要开始进入 Hexo 章最后一篇。现在是计划介绍一下怎么让博客被各大搜索引擎收录，以及一些推广心得等等。具体的详细内容未定，更新时间也还不知道，因为在等我那个小游戏的软著下来，下来后我一定要好好写一篇软著申请避坑的文章，可实在是太难等了！

（我是一个持续摸索个人副业的普通程序员，关注我，和你一起探索更多可能。——ZERO 开发）


在线咨询
上一篇：北京：2022年应届毕业生可以住这里
下一篇：Code39码和Code93码的区别

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

推荐阅读
友情链接 昌吉市 扎鲁特旗 龙山区 达孜县 英山县 咸宁 网站制作
Copyright © 2002-2019 雨点网络设计有限公司 版权所有   冀ICP备11025394号
联系电话：   E-mail：279303980@qq.com  
主营业务：技术文章网站建设、网站定制、技术文章营销型网站建设、技术文章网站优化、技术文章微商城制作、三级分销系统开发
电话沟通
在线客服