hexo配置自己的部落格站點

2021-08-07 05:20:10 字數 2219 閱讀 7685

最近業餘時間利用hexo為自己搭建乙個高度自定義的個人站點,站點發布在github上,訪問位址為:本部落格簡單介紹實現此站點的過程。效果圖如下

構建此站點最初的目的主要方便自己使用本人開發的tomato time這個小工具。然後在實施的過程中加入的自己自己琢磨寫的vuemanager。

hexo實現了通過markdown生成靜態站點的能力,提供了高度定製化的能力。

命令名說明

hexo init

初始化乙個hexo專案

hexo server

啟動本web服務,用於開發階段

hexo g

生成靜態網頁

hexo d

部署網頁

hexo clean

清理快取

hexo new "postname"

新建文章

hexo new page "pagename"

新建頁面

archive.ejs歸檔列表頁模板,歸檔可以按照年份+月份實現的,list_archives顯示列表

模板檔名說明

layout.ejs

模板的入口檔案,也是整個站點的入口檔案

index.ejs

首頁,布局檔案預設輸出嵌入的頁面

post.ejs

文章詳細頁

page.ejs

頁面archive.ejs

歸檔列表頁模板,歸檔可以按照年份+月份實現的,list_archives顯示列表

category.ejs

分類顯示頁

tag.ejs

標籤頁

hexo的模板解析,以layout.ejs為入口,所有靜態頁面(如:文章、頁面、首頁、標籤、歸檔、分類等)都會以layout.ejs為模板。所以每個頁面的公共部分應該在寫layout.ejs中(如頁頭、頁尾等)。

此外掛程式實現markdown引用的本地,在markdown轉換為html也能被正確引用。

根據上述 「hexo模板介紹」,我們可以很較為輕鬆的開發出自己的模板,模板檔案說明

模板資料夾、配置檔案說明

layout

相關ejs模板資訊,用於生成html時使用

script

此資料夾下的.js檔案,作為hexo外掛程式 的一種擴充套件存在,在編譯過程中起作用

source

此檔案下的檔案或資料夾,在編譯過程中會保持不變,供開發者使用

languages

多語言包

_config.yml

針對當前模板的配置檔案,配置檔案中的資訊可以被ejs模板訪問

說明:1. 本示例模板使用的stylus作用css的預編譯語言。

1. 外掛程式需要入在node_moduels資料夾下,必須有.js和.package.json檔案(也就是乙個標準npm包即可).

js檔案:

'use strict'console.log('hexo-filter-list start success....');

var core =

return

num;

}}hexo.extend.filter.register('before_post_render',function

(data))\\s*(.?)(\\s*)", "g");

var titles =, tmp;

while((tmp = regex.exec(data.content)) != null

) console.log(val);

titles.push(val);

}data.headers =titles;

});

package.json檔案

注意: 

1. hexo的事件監聽都是有快取的,內容不變,不會觸發相應的事件。

3. 必須在根目錄的package.json檔案的依賴薦中加入hexo-filter-list包,如下

"dependencies":
本文只是hexo使用的初級探索,其中關於hexo的說明存在問題的地方希望各位朋友指正。如果你需要使用hexo,還是建議都看他的官方文件。

個人部落格站點推薦(三)

部落格日漸落寞,更新者越來越少,但是留下的很多都是精華,就像我之前推薦的那些部落格一樣。mactalk賣桃者,池建強,曾經任職錘子科技,現極客時間創始人。部落格結合科技與人文,值得一看。著有 mactalk 人生元程式設計 mactak 跨越邊界 四火的嘮叨,西雅圖程式設計師一枚,技術,管理,成長,...

個人部落格站點推薦(二)

在前幾篇文章中,推薦了一些個人站點,看效果還不錯。繼續再推薦一些,希望對看到的朋友有些幫助。1.陳皓,網名左耳朵耗子,這裡有技術和思考的文章,作者在極客時間也有專欄,這裡一直也在更新。從這裡收穫了很多。2.雲風大牛的技術部落格,重點於技術文章,偶爾也有其他型別的思考,一直在更新。3.楊文博的部落格,...

用Django寫乙個屬於自己的部落格站點

用django寫乙個屬於自己的部落格站點 首先,先寫好html靜態檔案和css等相關檔案 這邊是用atom開發 1.要裝有python3.x 3.寫好html靜態檔案和css 1.建立乙個新的空資料夾 2.開啟終端 開始鍵 r 開啟 執行 輸入cmd cd到該資料夾,建立乙個firstsite的dj...