30分鐘即可完成一個帶評論、打賞、搜尋、RSS、分類、標籤等功能的部落格
高效的搭建讓博主更加專注於內容的生產
歡迎關注博主的個人部落格 東行不西遊
準備工作
- 必須安裝git和node,官網有各平臺詳細的安裝過程
- 準備一張頭像和網站favicon
- 200*200方形或圓形頭像 (用來顯示作者頭像)
- 32*32的favicon (瀏覽器開啟網站標籤的一個ico)
- hexo全域性的圖示配置資訊均來自fontawesome
- 所有的配置項在修改的時候一定要記住 冒號 後是有一個空格的,不然儲存後 在執行
hexo server會失敗
開始安裝
git和node安裝完後進入到部落格的資料夾內,執行下面程式碼(均在終端操作)
$ npm install hexo-cli -g #全域性安裝hexo命令
$ hexo init blog #在當前目錄下,初始化hexo一個名為blog專案
$ cd blog #進入該目錄
$ git clone https://github.com/theme-next/hexo-theme-next themes/next #安裝next主題
$ npm install #安裝專案必備外掛
$ hexo server #本地啟動專案
複製程式碼如果以上步驟均正確可以 點選即可看到部落格首頁 或 瀏覽器輸入 localhost:4000 即可看到部落格首頁,如不能請檢查之前的步驟是否正確,此時你已經完成了50%的工作
先找到 站點配置檔案
blog/_config.yml
重要提示:修改每一個配置的時候都可以重新整理頁面觀看修改結果,如果不顯示可以在終端的部落格目錄執行
$ hexo clean
$ hexo server
複製程式碼站點配置
- 先設定hexo的next主題
找到
theme後修改為:theme: next #配置成剛下載的next主題 複製程式碼 - 配置hexo網站相關資訊
找到site的設定 按下面備註修改相關資訊
# Site title: 東行不西遊 #網站標題 subtitle: 風在前,無懼! #網站副標題 description: 心猿不定，意馬四馳 #描述,介紹網站的 keywords: python,php,mysql,滑雪,攝影 #網站的關鍵字 author: Bowen #博主姓名 language: zh-CN #語言 zh-CN 是簡體中文 timezone: UTC #時區 複製程式碼 - 設定hexo永久連結
設定永久連結的目的是為了便於分享和seo優化.這樣別人收藏地址後不會出現連結失效
# URL url: https://dangbowen.com #網站的首頁地址 root: / #網站的根目錄設定 permalink: :year/:month/:day/:title.html # 這種 設定的url表現為2018/10/18/hello-world.html 樣式 複製程式碼permalink: :category/:title.html #用分類和部落格title當做url地址 複製程式碼 - 設定hexo中的預設分類
找到
Category & Tag# Category & Tag default_category: default #這裡設定一個預設分類名稱,如果第3條永久連結設定為 permalink: category/:title/ 那麼沒有分類的部落格就會被放在default這個分類下進行歸檔 複製程式碼
額外配置:hexo如何配置git資訊(可跳過!後續新開一貼詳細介紹) github和coding都提供page服務,這樣我們就可以把部落格靜態資源釋出到這2個倉庫,然後用域名來訪問部落格,所有人都可以通過瀏覽器來觀看你的部落格.雙倉庫格式如下:
deploy:
type: git
repo:
github: https://github.com/{your_name}/{your_name}.github.io,master #github 提供page的服務要求倉庫名必須為 {your_name}.github.io 格式 比如你的github使用者名稱為 abc 那麼你必須建立一個 abc.github.io倉庫
coding: https://git.coding.net/{your_name}/{your_name}.git,master #coding要求page服務的倉庫名為 使用者名稱 一樣 .例如:使用者名稱為abc 倉庫名也必須為abc
複製程式碼先找到 主題配置檔案
blog/themes/next/_config.yml,修改配置的時候都可以重新整理頁面觀看修改結果,如果不顯示可以在終端的部落格目錄執行
$ hexo clean
$ hexo server
複製程式碼主題配置
-
配置hexo網站的favicon 把準備好的favicon放在
blog/themes/next/source/images/下favicon: small: /images/favicon-16x16-next.png #把favicon名修改成你自己的 medium: /images/favicon-32x32-next.png 複製程式碼 -
配置hexo中的tag,categories選單 預設選單隻開啟了首頁和歸檔,hexo所有圖示均來自fontawesome
menu: #選單設定為 選單名: /選單目錄 || 選單圖示名字 home: / || home about: /about/ || user tags: /tags/ || tags categories: /categories/ || th archives: /archives/ || archive commonweal: /404/ || heartbeat menu_settings: icons: true #顯示圖示 badges: true #顯示統計資訊 複製程式碼 -
手動生成hexo選單對應檔案 新選單開啟後是沒有對應檔案的,所以要手動生成about,tags,categories和404頁面,這裡我們將404替換成騰訊的公益頁面 新建about頁面
$ cd blog $ hexo new page about #about就是普通的佈局一般用來介紹站點資訊和博主資訊等 複製程式碼新建一個tags頁面
$ cd blog $ hexo new page tags 複製程式碼找到tags檔案
blog/source/tags/index.md編輯它,在頭部修改為--- title: All tags date: 2018-10-01 13:58:44 #時間隨意 type: "tags" #型別一定要為tags comments: false #提示找個頁面不需要評論,後續評論外掛那裡會詳細介紹 --- 複製程式碼新建一個categories頁面
$ cd blog $ hexo new page categories 複製程式碼找到categories檔案
blog/source/categories/index.md編輯它,在頭部修改為--- title: 分類 date: 2018-10-15 00:03:57 type: "categories" comments: false --- 複製程式碼新建一個404頁面
$ cd blog $ hexo new page 404 複製程式碼找到404檔案
blog/source/404/index.md編輯它,內容全部替換成如下<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>404</title> </head> <body> <script type="text/javascript" src="//qzonestyle.gtimg.cn/qzone/hybrid/app/404/search_children.js" charset="utf-8" homePageUrl="/" homePageName="返回"></script> </body></html> ``` 複製程式碼 -
配置hexo本地搜尋 安裝外掛,終端進入
cd blog後執行:npm install hexo-generator-searchdb --save 複製程式碼主題配置檔案如下:
local_search: enable: true trigger: auto top_n_per_article: 1 unescape: false 複製程式碼站點配置檔案新新增如下程式碼:
search: path: search.xml field: post format: html limit: 100 複製程式碼 -
設定hexo中的rss訂閱 rss需要安裝一個外掛,終端進入
cd blog後執行:npm install hexo-generator-feed --save 複製程式碼重新整理主頁就可以看到rss
-
配置hexo站點的footer資訊 底部footer可以開關顯示hexo版權,theme版權,還有建站時間等個性化配置
footer: since: 2015 #建站開始時間 icon: name: user #設定 建站初始時間和至今時間中間的圖示 預設是一個'小人像'更改user為heart可以變成一個'心' color: "#808080" #更改圖示的顏色 紅色為 '#ff0000' powered: enable: true #是否開啟hexo驅動 version: true #是否開啟hexo版本號 theme: enable: true #是否開啟theme驅動 version: true #是否開啟主題版本號 custom_text: Hosted by <a target="_blank" rel="external nofollow" href="https://pages.coding.me"><b>Coding Pages</b></a> #這裡的底部標識是為了新增coding page服務時的版權宣告 開啟註釋就可以看到底部有一個 hosted by coding pages 複製程式碼 -
配置hexo中next主題樣式選擇 next一共提供了4種首頁樣式,按照自己喜好選擇一個,切記選擇一個其他主題後其他的主題之前一定要加上#
# Schemes scheme: Muse #scheme: Mist #scheme: Pisces #scheme: Gemini 複製程式碼 -
hexo網站next主題側邊欄寬度,頭像資訊,頭像設定圓形和頭像旋轉
sidebar: position: left #選擇pisces 或者 gemini 主題是 可以 選擇側邊欄 位置 調整左邊或者右邊 #position: right width: 300 # muse mist 主題 可以控制側邊欄的寬度 display: post #如果是muse mist 主題 可以選擇 側邊欄彈出動作 post 是 只在內容頁彈出 #display: always #全域性彈出 #display: hide #全域性隱藏側邊欄 右下角有角標喚出 #display: remove #移除側邊欄 avatar: url: /images/avatar.gif #設定頭像資源的位置 rounded: false #開啟圓形頭像 opacity: 1 #不透明的比例 0 就是完全透明 rotated: false #開啟旋轉 複製程式碼 -
hexo中next主題的社交資訊和友鏈配置
social: #和選單設定格式一樣 社交名字: 社交url || 社交圖示 ,圖示資訊還是[fontawesome](https://fontawesome.com/v4.7.0/icons) GitHub: https://github.com/yourname || github E-Mail: mailto:yourname@gmail.com || envelope Google: https://plus.google.com/yourname || google social_icons: enable: true #顯示社交圖示 icons_only: false #只顯示圖示的開關 # Blog rolls links_icon: link #友鏈的圖示 參考上文 links_title: Links #友鏈的title 比如你可以更改為 友情連結 links_layout: block #友鏈擺放的樣式,按塊 一行一個 #links_layout: inline #按線擺放,一行很多個 切記 同時只能一種樣式 links: Title: http://example.com/ #友鏈的地址 複製程式碼 -
hexo中next主題首頁文章不展示全文顯示摘要,自動擷取摘要和點選閱讀全文跳轉頂部
scroll_to_more: true #點選閱讀全文後是否跳到<!--more-->標記處,設為false時點選閱讀全文可以從頭閱讀 auto_excerpt: #是否自動擷取摘要 enable: false #設定為true則自動擷取150字當做首頁摘要 length: 150 #自動擷取的字數 複製程式碼 -
hexo中next主題首頁文章屬性顯示建立時間,修改時間,分類
post_meta: item_text: false # 設為true 可以一行顯示 文章的所有屬性 created_at: true #顯示建立時間 updated_at: enabled: true #顯示修改的時間 another_day: true #設true時 如果建立時間和修改時間一樣則顯示一個時間 categories: true #顯示分類資訊 複製程式碼 -
hexo中的next增加頁面閱讀統計,字數統計,閱讀時長 新增
busuanzi閱讀統計busuanzi_count: enable: false #設true 開啟 total_visitors: true #總閱讀人數 uv數 total_visitors_icon: user #閱讀總人數的圖示 total_views: true #總閱讀次數 pv數 total_views_icon: eye #閱讀總次數的圖示 post_views: true #開啟內容閱讀次數 post_views_icon: eye #內容頁閱讀數的圖示 複製程式碼新增字數統計,閱讀時長,先安裝外掛
$ npm install hexo-symbols-count-time --save 複製程式碼主題配置資訊如下:
symbols_count_time: separated_meta: true # false 會顯示一行 item_text_post: true # 顯示屬性名稱,設為false後只顯示圖示和統計數字,不顯示屬性的文字 item_text_total: true #底部footer是否顯示字數統計屬性文字 awl: 4 #計算字數的一個設定,沒設定過 wpm: 275 #一分鐘閱讀的字數 複製程式碼站點配置新增如下:
symbols_count_time: #文章內是否顯示 symbols: true time: true # 網頁底部是否顯示 total_symbols: true total_time: true 複製程式碼 -
hexo中next主題給內容頁裡的程式碼塊新增複製按鈕
codeblock: copy_button: enable: true #增加複製按鈕的開關 show_result: true #點選複製完後是否顯示 複製成功 結果提示 複製程式碼 -
hexo中next主題文章主頁配置微信公眾號
# Wechat Subscriber wechat_subscriber: enabled: true qcode: /images/wechat-qcode.jpg #微信公眾號的二維碼 description: 這是我的公眾號 #公眾號描述文字 複製程式碼 -
hexo中next主題配置微信,支付寶打賞
# Reward reward_comment: 一毛也是愛~ #打賞描述 wechatpay: /images/wechat_pay.png #微信支付的二維碼圖片地址 alipay: /images/ali_pay.png #支付寶的地址 #bitcoin: /images/bitcoin.png #這個是設定比特幣的... 複製程式碼 -
hexo中next主題新增 相關文章推薦 安裝推薦文章的外掛
$ npm install hexo-related-popular-posts --save 複製程式碼主題配置資訊如下:
related_posts: enable: true title: 相關文章推薦 # 屬性的命名 display_in_home: false #false代表首頁不顯示 params: maxCount: 5 #最多5條 #PPMixingRate: 0.0 #可以看github上 這個相關度介紹 #isDate: true #是否顯示 日期 #isImage: false #是否顯示配圖 isExcerpt: false #是否顯示摘要 複製程式碼 -
hexo中next主題的文章原創申明 給每一個原創文章開啟版權保護
post_copyright: enable: true #設定true就開啟了 license: <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" rel="external nofollow" target="_blank">CC BY-NC-SA 4.0</a> 複製程式碼 -
hexo中next主題更改code高亮樣式
highlight_theme: normal #可選值為 normal | night | night eighties | night blue | night bright 這幾個挑一個喜歡的 複製程式碼 -
hexo中next主題新增評論-Valine 點選官網leancloud註冊賬號,獲取自己的appid,appkey,再看valine官網設定下自己的leancloud
valine: enable: true # 開啟評論 appid: ~~~ # 剛申請 leancloud 的 appid appkey: ~~~ # 剛生情 leancloud 的 appkey notify: false # 是否郵件推送 詳情看 https://github.com/xCss/Valine/wiki verify: false # placeholder: Just go go # 評論框裡的placeholder資訊 avatar: mm # gravatar style guest_info: nick,mail,link # custom comment header pageSize: 10 # 一頁顯示的評論條數 visitor: false # 複製程式碼 -
hexo中next主題配置網頁body背景動態效果 4個效果同時只能開啟一個
canvas_nest: false three_waves: false canvas_lines: false canvas_sphere: false 複製程式碼
常見問題
- 為什麼
hexo server報錯? 檢查最近修改的配置檔案中的各個配置項冒號後是否有空格,某些樣式選擇是否唯一 - 為什麼menu設定完後,點選各個選單無效,href=""現象?
檢查站點配置檔案
relative_link: false如為true 改為 false即可
最後的最後
由於6.4比5.x多了很多以前個性定製的配置,使得個性化的配置操作簡單很多,不用修改樣式和原始碼即可完成以前的定製效果,所以主題的更新還是要看個人的需求,如果功能夠用的情況下還是保證創作部落格為主,畢竟內容才是最能吸引讀者的,共勉.
歡迎關注博主的個人部落格 東行不西遊,今天是10月24日,祝大家也祝自己節日快樂
本文作者： Bowen 本文原創連結： dangbowen.com/hexo/ad0bed… 版權宣告： 本部落格所有文章除特別宣告外，均採用 CC BY-NC-SA 4.0 許可協議。轉載請註明出處！