1. 程式人生 > >Maupassant主題優化、屠城hexo主題優化版

Maupassant主題優化、屠城hexo主題優化版

基於屠城hexo主題優化版,個人自用版

優化部分顯示效果,增加部分配置

原版主題

https://www.haomwei.com/technology/maupassant.html

屠城hexo版

github地址:

https://github.com/tufu9441/maupassant-hexo

相關配置介紹:

https://www.haomwei.com/technology/maupassant-hexo.html

效果地址:

https://www.haomwei.com/

本優化版

github地址:

https://github.com/iyohei/maupassant-hexo-hfanss

相關配置介紹:

https://www.hfanss.com/2018/Maupassant主題優化、屠城主題優化版.html

效果地址:

https://www.hfanss.com/


現版主題

主要優化點

  • 增加強制https 開關
  • 歸檔頁整合分類、標籤、全部文章
  • 選單欄置頂
  • 側邊欄刪除
  • 增加底部欄
  • 搜尋移至頂部選單欄
  • 文章頁新增統一版權宣告
  • 文章新增置頂、原創、轉載標誌
  • 底部檔案始終在瀏覽器最下方
  • 底部檔案整合 關於我、微信二維碼、熊掌號、關於博主,關於本站,友情連結
  • 底部檔案整合備案號,百度雲統計、github、碼雲、CSDN外鏈
  • 分享使用bshare,整合更多分享
  • config.yml一些常用屬性都做了中文註釋
  • 整合百度主動推送外掛
  • 優化整體佈局
  • 優化移動端選單單獨配置

圖片效果

增加配置開關



valine: ## https://valine.js.org        評論系統
  enable: false ## 是否開啟valine評論系統
  appid:  ## LeanCloud App ID, pRBBL2JR4N7kLEGojrF0MsSs-gzGzoHsz
  appkey:  ##LeanCloud App Key, e.g. tjczHpDfhjYDSYddzymYK1JJ
notify: false ## Mail notifier, see https://github.com/xCss/Valine/wiki/Valine-評論系統中的郵件提醒設定 verify: true ## 啟用評論校驗功能 placeholder:   ## 留言板預設內容 visitor: true ## 1.2版本新增功能閱讀統計,具體使用參考https://valine.js.org/visitor.html avatar: 'monsterid' ## 預設頭像 參考 https://valine.js.org/avatar.html pageSize: 10 ## 每頁顯示評論條數 guest_info: nick,mail,link ## 暱稱,郵箱,網站 ## 百度統計ID baidu_analytics: ## 百度統計ID id, e.g. 8006843039519956000 ## 圖片燈箱開關 fancybox: true ## 是否啟用Fancybox圖片燈箱效果,建議開啟(效果為點選圖片既放大) ##版權宣告,加在每篇文章下方 banquan: enable: true ##是否開啟 name: 幻凡ss note: 本文所有權歸博主所有,轉載請註明署名、出處!Thanks ##版權資訊 ## 強制https訪問開關 https: true ## 是否開啟強制https(不影響本地除錯),本開關說明:https網站能正常訪問開啟才有效,如www.baidu.com跳轉到http://www.baidu.com,不自動跳到https開頭的網址,而且https://www.baidu.com能正常訪問才行 ## 文章字數統計開關 wordcount: true ##文章字數統計 readtime: false ##文章閱讀時長統計 ## daovice線上聊天相關 官網:http://www.daovoice.io/ daovoice: false ## 頁面右下角線上聊天 daovoice_app_id: ## daovice ID 如:22c081c3 ##搜尋相關,只能開啟一項 self_search: true ## 頁面jquery搜尋,需安裝外掛,開啟此搜尋後,部落格根目錄的 url屬性必須帶有http://和https:// baidu_search: false ##百度搜索.開啟百度搜索後,部落格根目錄的 url屬性不能帶有http://和https://,否則會導致搜尋不到東西(原理:基於你的網站百度收錄結果搜尋,如果沒有被百度收錄,就不會有結果) ## 文章目錄開關 toc_number: true ## 文章目錄開關 使用方法:#一級目錄 ##二級目錄 。。。 以此類推 ## 文章分享開關 使用bshare.js 官網:http://www.bshare.cn/、註冊站長並輸入網址 需替換post.pug 55行script shareto: true ## 文章分享開關 ## 文章捐贈按鈕。讚賞按鈕 donate: enable: false ## If you want to show the donate button after each post, please set the value to true and fill the following items according to your need. You can also enable donate button in a page by adding a "donate: true" item to the front-matter. github: https://github.com/hfanss ## GitHub URL, e.g. https://github.com/Kaiyuan/donate-page alipay_qr: /img/AL.png ## Path of Alipay QRcode image, e.g. /img/AliPayQR.png wechat_qr: /img/QQ.png## Path of Wechat QRcode image, e.g. /img/WeChatQR.png btc_qr: ## Path of Bitcoin QRcode image, e.g. /img/BTCQR.png btc_key: ## Bitcoin key, e.g. 1KuK5eK2BLsqpsFVXXSBG5wbSAwZVadt6L paypal_url: ## Paypal URL, e.g. https://paypal.me/tufu9441 ## 微信相關資訊 weixin: enable: true name: hyaini ##微訊號碼 url: https://huanfan-1252958858.cos.ap-shanghai.myqcloud.com/pic/302701117226241178.jpg ##微信個人二維碼url ## 微博相關資訊 weibo: enable: true name: 幻凡ss ##微博名字 url: https://weibo.com/0377k ##微博外鏈 如:https://weibo.com/0377k ## QQ相關資訊 qq: enable: true name: 2158798 ##QQ號碼 url: https://wpa.qq.com/msgrd?v=3&uin=2158798&site=qq&menu=yes ##網頁QQ聊天的外鏈 如 https://wpa.qq.com/msgrd?v=3&uin=2158798&site=qq&menu=yes ## email相關資訊 email: enable: true name: [email protected] ##郵箱地址 url: http://mail.qq.com/cgi-bin/qm_share?t=qm_mailme&email=8JiWkZ6DsJafiJ2RmZzek5_d ##郵箱外鏈,郵我 如:http://mail.qq.com/cgi-bin/qm_share?t=qm_mailme&email=8JiWkZ6DsJafiJ2RmZzek5_d ## 聯絡地址相關資訊 address: enable: true name: Pudong New Area, Shanghai, China ##地理位置的英文(請不要太過具體) url: ##公司在百度地圖上的位置的網址 ## 百度熊掌號相關資訊 xzHao: enable: true note: 專注Java • 分享生活 • 記錄人生 ##熊掌號描述 url: https://author.baidu.com/home/1603347506741536?from=dusite_artdetailh5 ##熊掌號url ## 備案相關資訊 beian: enable: false note: ##備案號 ## 百度統計相關資訊 baidu: enable: true url: https://tongji.baidu.com/web/25553450/overview/index?siteId=11976031 ##百度統計的網址,點開百度雲圖標後登陸可看到網站統計\ ## github相關資訊 github: enable: true url: https://github.com/hfanss/ ##github外鏈 如 :https://github.com/hfanss/ ## 碼雲相關資訊 gitee: enable: true url: https://gitee.com/iyohei ##碼雲外鏈 如 :https://gitee.com/iyohei ## CSDN相關資訊 csdn: enable: true url: https://blog.csdn.net/q2158798 ##CSDN部落格外鏈 如:https://blog.csdn.net/q2158798 ## 底部顯示設定 footersenable: true ##是否開啟底部選單欄 footers: - gywo ##關於我 - gzhao ##公眾號或微信二維碼 - xzhao ##百度熊掌號相關資訊 - links ##友情連結/關於本站/關於博主(簡歷) ## PC選單顯示選項 menu: - page: home directory: . icon: fa-home2 - page: archive ##顯示名字,根據中英文兌換,也可直接寫中文 directory: archives/ ##連結地址(source下的資料夾) icon: fa-archive2 ##圖示。線上圖示,http://www.fontawesome.com.cn/faicons/,把名字貼這裡即可 - page: music directory: music/ icon: fa-user2 - page: tool directory: tool/ icon: fa-user2 - page: guestbook directory: comment/ icon: fa-rss2 ## 移動端選單顯示選項 mobileMenu: - page: home directory: . icon: fa-home2 - page: archive ##顯示名字,根據中英文兌換,也可直接寫中文 directory: archives/ ##連結地址(source下的資料夾) icon: fa-archive2 ##圖示。線上圖示,http://www.fontawesome.com.cn/faicons/,把名字貼這裡即可 - page: music directory: music/ icon: fa-user2 - page: tool directory: tool/ icon: fa-user2 - page: guestbook directory: comment/ icon: fa-rss2 - page: about directory: about/ icon: fa-rss2 - page: site directory: site/ icon: fa-rss2 - page: href directory: href/ icon: fa-rss2 ## 網站地圖 博主沒用過,意義不大 timeline: - num: 1 word: 2014/06/12-Start - num: 2 word: 2014/11/29-XXX - num: 3 word: 2015/02/18-DDD - num: 4 word: More # Static files。快取目錄 js: js css: css # 主題版本,方便重新整理 version: 0.1.0

開關的一些說明在配置檔案中都有中文解釋

額外說明

  • 評論只支援valine
  • 搜尋只支援self_search、baidu_search
  • 網站統計只有百度統計
  • 移動端預設不顯示底部(關於我、熊掌號…)選單

使用方法

下載主題

https://github.com/iyohei/maupassant-hexo-hfanss
如下載不下來可從備份地址下載:點我

安裝外掛

npm install --save hexo-deployer-git hexo-generator-archive hexo-generator-category hexo-generator-index-pin-top hexo-generator-search hexo-generator-tag hexo-helper-qrcode hexo-renderer-ejs hexo-renderer-marked hexo-renderer-pug hexo-renderer-sass hexo-renderer-stylus hexo-server hexo-tag-aplayer hexo-wordcount

安裝不成功可以通過 淘寶映象 下載

修改配置

部落格根目錄下
config.yml
URL分類下  
 url: http://www.baidu.com ## 分享頁的頭網址,域名地址或iyohei.githug.io 
 permalink: :year/:title.html ## 更改文章頁的地址帶有.html字尾  
部落格根目錄下 source資料夾下   
 新建about資料夾--含一個index.md檔案--最下方  關於博主頁(內容自行書寫)  
 新建comment資料夾--含一個index.md檔案--選單欄  留言頁(內容自行書寫)  
 新建href資料夾--含一個index.md檔案--最下方  友情連結頁(內容自行書寫)   
 新建music資料夾--含一個index.md檔案--選單欄  音樂頁(內容自行書寫)    
 新建tool資料夾--含一個index.md檔案--選單欄    工具頁(內容自行書寫)   
 貼上一個favicon.ico的檔案(網站圖示)   
 新建CNAME檔案,無後綴(需要繫結域名的請在裡面書寫你的域名)   、

以上新建檔案博主都整合在主題中,大家下載下來有兩個資料夾,一個為主題,一個為source,複製其中的內容覆蓋自己的source即可


注意事項

文章頁增添開關

top: true  ##開啟文章置頂
yuanchuang: true ##開啟原創標籤
toc: true ##開啟目錄
如果文章為轉載,需要配置以下開關
    zhzai: true ##開啟轉載標籤
    zhzaiName: 楊雲召 ##原文作者
    zhzaiUrl: https://blog.znmlr.cn/4cabcca.html ##原文連結

zhzai(轉載) && yuanchuang(原創)只能開啟一項

非選單頁選中樣式問題

新建的頁面如果沒在選單欄顯示需要在index.md中  文章最下方加入以下程式碼:(目的是保證選單欄的首頁為選中樣式)
<script>$(".header-02-3 a:first").addClass('current');</script>
效果:例如友情連結在選單欄中沒有,加入此行程式碼會預設選中首頁這個樣式

百度主動推送請閱讀 說明文件

自行優化

附上幾個重要的檔案作用,方便大家自行優化:

base.pug        整合head部分模版+底部
archive.pug     歸檔頁的模版
page.pug        自定義頁面的模版
post.pug        文章頁模版
footer.pug      尾部檔案模版
footer02.pug    底部選單模版
head.pug        首頁的模版(主要是通用JS的引用,如評論,計數器)
_footer資料夾    底部選單各模版
search.pug      搜尋模版
valine評論個性頭像:https://cn.gravatar.com/全球頭像分享網站-註冊-設定頭像,在valine評論中,填上註冊時的郵箱就會顯示頭像

推薦外掛: hexo部落格常用外掛及教程

詳細diy

底部選單欄diy:
    _footer資料夾
    新增:
         在_footer資料夾中新建xxx.pug,寫上內容
         在config檔案中的footer下 新增進去 -xxx  即可顯示
    修改:
        gywo.pug        ##關於我
        gzhao.pug       ##公眾號或微信二維碼
        xzhao.pug       ##百度熊掌號相關資訊
        links.pug       ##友情連結/關於本站/關於博主(簡歷)
友情連結:
    sources/href/index.md
關於本站:
    sources/site/index.md
關於博主:
    sources/about/index.md
留言:
    sources/comment/index.md
工具:
    sources/tool/index.md
音樂:
    sources/music/index.md

原版主題的配置只要沒跟本主題衝突,沒有特別說明,都可以支援


如有本主題的相關優化問題,可在下方評論區留言
github有時候會抽風,提供碼雲備用地址:點我
另:如大家使用本主題,還請在下載主題頁 右上角 star 一下,感謝!