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 章最后一篇?，F在是計劃介紹一下怎么讓博客被各大搜索引擎收錄，以及一些推廣心得等等。具體的詳細內容未定，更新時間也還不知道，因為在等我那個小游戲的軟著下來，下來后我一定要好好寫一篇軟著申請避坑的文章，可實在是太難等了！

（我是一個持續摸索個人副業的普通程序員，關注我，和你一起探索更多可能?！猌ERO 開發）

在線咨詢

上一篇：北京：2022年應屆畢業生可以住這里
下一篇：Code39碼和Code93碼的區別

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

hexo博客（四）：自定義主題并發布

言

指標

主題添加與配置

基礎配置

創建菜單頁面

創建文章

站內搜索添加

評論系統添加

文章置頂功能添加

RSS 配置

設置 404 頁面

添加百度統計

MarketDown 用法

寫在最后

您的項目需求