方的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的優點
4.3、Markdown的缺點
五、基本語法
5.1、標題
在想要設置為標題的文字前面加#來表示,一個#是一級標題,二個#是二級標題,以此類推。支持六級標題。
注意:#與文字之間要有一個空格。
示例:
# 這是一級標題
## 這是二級標題
### 這是三級標題
#### 這是四級標題
##### 這是五級標題
###### 這是六級標題
效果如下:
5.2、字體
星號或者下劃線都可以,單是斜體,雙是粗體,符號可以跨行,符號可加空格。
示例:
**這是加粗的文字**
*這是傾斜的文字*`
***這是斜體加粗的文字***
~~這是加刪除線的文字~~
效果如下:
5.3、引用
在引用的文字前加>即可。引用也可以嵌套,如加兩個>> 三個>>> n個... 貌似可以一直加下去,但沒神馬卵用。
示例:
>這是引用的內容
>>這是引用的內容
>>>>>>>>>>這是引用的內容
效果如下:
5.4、分割線
三個或者三個以上的 - 或者 * 都可以。
示例:
---
----
***
*****
效果如下:
可以看到,顯示效果是一樣的。
5.5、圖片
語法:

示例:

效果如下:
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”,首先拉取主題代碼到 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 輸出功能,需要安裝 hexo-generator-feed 插件。最后使用 hexo 清理再生成,博客根目錄就會生成 atom.xml
插件安裝
npm install hexo-generator-feed --save
添加配置
feed: type: atom path: atom.xml limit: 20
設置 RSS 地址
rss: /atom.xml
在 hexo 的_config.yml 找到或添加 error_404,設置開啟,分別添加標題和背景圖。
error_404: enable: true subtitle: 'Page Not Found' background: /img/404.jpg
先登陸或注冊百度統計平臺,找到 “使用設置” -> “代碼獲取” -> “新版統計代碼獲取”,然后會看到一段 js 代碼,只需要復制如下的一個 32 位長度的字符串。最后將該字符串粘貼到 butterfly 的 config.yml 中的 baidu_analytics 中,部署后一天就可以在后臺查看統計報表了。
關于新建的文章,我希望本地能備份一份,有 md 文件和圖片,方便上傳到其他平臺博客。那要怎么做呢,這里我用一個免費的 md 工具 ——Typora 為例。
創建文件和文件夾
創建一個以文章標題的文件夾,里面再分別創建一 img 文件夾和同文章標題的 md 文件,img 下再創建一個與文章標題同名的文件夾。
Typora 設置
依次找到 “文件” -> “偏好設置” -> "圖像" , 將插入圖片時的下拉選中 “復制到指定路徑”,填入下面的值。
./img/${filename}/
第二步找到 “格式” -> "圖像" -> “設置圖片根目錄”,選擇 markdown 文件同級的目錄,最后復制圖片時就會復制到 img 下的文章同名目錄下。
為什么要這樣設置?因為 Hexo 的圖片在打包前都是在主題包 /source/img 里,而為了方便本地能按文章存儲,也方便將本地的文章圖片直接丟到 img 下,然后 md 文件放到_post 中。打包之后就能以倉庫圖片展示,而且按文章分類存儲,以后刪除起來也一目了然。
這次的優化看起來好像是面面俱到了,但其實關于 Hexo 主題還有更細節的處理。比如可以添加博客看板精靈,酷炫的動態大背景,還有鼠標跟隨或點擊特效等等。但是我這博客目前定位主要以內容為主,所以暫時就就演示了,當然,如果有用戶喜歡也可以馬上加上去的。
最后呢,就是三部曲的第二篇結束了,那下次就自然地要開始進入 Hexo 章最后一篇?,F在是計劃介紹一下怎么讓博客被各大搜索引擎收錄,以及一些推廣心得等等。具體的詳細內容未定,更新時間也還不知道,因為在等我那個小游戲的軟著下來,下來后我一定要好好寫一篇軟著申請避坑的文章,可實在是太難等了!
(我是一個持續摸索個人副業的普通程序員,關注我,和你一起探索更多可能?!猌ERO 開發)
*請認真填寫需求信息,我們會在24小時內與您取得聯系。