最近業餘時間利用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....');package.json檔案 注意: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;
});
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...