hexo+github创建个人博客--深入篇
內容簡介
此篇文章介紹的是個人博客的一些配置內容，包含博客項目的介紹、主題配置、圖床配置以及各種第三方功能插件的使用，若還未搭建個人博客的哥們可以先參考hexo+github創建個人博客–基礎篇搭建出自己的個人博客。
hexo項目介紹
1.目錄結構介紹
- .deploy #需要部署的文件
- node_modules #Hexo插件
- public #生成的靜態網頁文件
- scaffolds #模板
- source #博客正文和其他源文件，404、favicon、CNAME 都應該放在這里
- _drafts #草稿
- _posts #文章
- themes #主題
- _config.yml #全局配置文件
- package.json
2.全局配置文件介紹
title: 個人博客 //頁面標題 subtitle: 玉面小飛龍 //小標題 description: 賊溜 //描述 author: Little Dragon //作者 language: zh-CN //語言 timezone: //時區 # URL## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'url: https://halomelody.github.io/ //個人域名 root: / //根目錄 permalink: :year/:month/:day/:title/ //文章創建后生成的目錄結構 permalink_defaults:# Directory //變量與目錄的對應情況source_dir: source public_dir: public tag_dir: tags archive_dir: archives category_dir: categories code_dir: downloads/code i18n_dir: :lang skip_render:# Writingnew_post_name: :title.md # File name of new posts default_layout: post titlecase: false # Transform title into titlecase external_link: true # Open external links in new tab filename_case: 0 render_drafts: false post_asset_folder: false relative_link: false future: true highlight:enable: trueline_number: trueauto_detect: falsetab_replace:# Home page setting# path: Root path for your blogs index page. (default = '')# per_page: Posts displayed per page. (0 = disable pagination)# order_by: Posts order. (Order by date descending by default)index_generator: //分頁設置path: ''per_page: 5order_by: -date# Category & Tagdefault_category: uncategorized category_map: tag_map:# Date / Time format## Hexo uses Moment.js to parse and display date## You can customize the date format as defined in## http://momentjs.com/docs/#/displaying/format/date_format: YYYY-MM-DD time_format: HH:mm:ss# Pagination## Set per_page to 0 to disable paginationper_page: 5 pagination_dir: page# Extensions## Plugins: https://hexo.io/plugins/## Themes: https://hexo.io/themes/theme: yilia //主題配置# Deployment## Docs: https://hexo.io/docs/deployment.htmldeploy: //發布對應的github賬號type: gitrepo: git@github.com:haloMelody/haloMelody.github.io.gitbranch: master
主題配置
1.主題選擇
- 網上好的主題有很多，可以點擊選擇，本文介紹的是yilia主題
2.配置主題
從github上下載主題
git clone https://github.com/litten/hexo-theme-yilia.git將主題配置到個人博客中，在根目錄的全局配置文件中修改此變量（主題項目中也有_config.yml配置文件）
theme: yilia主題配置文件介紹（摘要）
# Header，主題頁面顯示鏈接menu:主頁: /所有文章: /archives# Content# 文章太長，截斷按鈕文字excerpt_link: more# 文章卡片右下角常駐鏈接，不需要請設置為falseshow_all_link: '展開全文'# 數學公式mathjax: false# 是否在新窗口打開鏈接open_in_new: false# 打賞# 打賞type設定：0-關閉打賞； 1-文章對應的md文件里有reward:true屬性，才有打賞； 2-所有文章均有打賞reward_type: 1# 打賞wordingreward_wording: 老板大氣，謝謝老板！# 支付寶二維碼圖片地址，跟你設置頭像的方式一樣。比如：/assets/img/alipay.jpgalipay: http://ou36vgj5u.bkt.clouddn.com/image/blog/alipay.JPG# 微信二維碼圖片地址weixin: http://ou36vgj5u.bkt.clouddn.com/image/blog/wechatpay.JPG# 目錄# 目錄設定：0-不顯示目錄； 1-文章對應的md文件里有toc:true屬性，才有目錄； 2-所有文章均顯示目錄toc: 1# 根據自己的習慣來設置，如果你的目錄標題習慣有標號，置為true即可隱藏hexo重復的序號；否則置為falsetoc_hide_index: true# 目錄為空時的提示toc_empty_wording: '目錄，不存在的…'# 是否有快速回到頂部的按鈕top: true# Miscellaneous，網站統計baidu_analytics: '24451a8b853bb443019686be21dfdff4' google_analytics: '' favicon: http://ou36vgj5u.bkt.clouddn.com/image/blog/fav.ico#你的頭像urlavatar: http://ou36vgj5u.bkt.clouddn.com/image/blog/head.jpg#是否開啟分享share_jia: true#評論：1、多說；2、網易云跟帖；3、暢言；4、Disqus 不需要使用某項，直接設置值為false，或注釋掉#具體請參考wiki：https://github.com/litten/hexo-theme-yilia/wiki/#1、多說duoshuo: false#2、網易云跟帖wangyiyun: false#3、暢言changyan_appid: false changyan_conf: false#4、Disqus 在hexo根目錄的config里也有disqus_shortname字段，優先使用yilia的disqus: false#disqus_shortname: halomelody# slider的設置slider:# 是否默認展開tags板塊showTags: true# 智能菜單# 如不需要，將該對應項置為false# 比如#smart_menu:# friends: falsesmart_menu:innerArchive: '文章查找'friends: '友鏈'aboutme: '關于我'#tagcloud: '標簽'#friends:aboutme: little dragon# 頁面統計 true為開啟#page_count: false# 站點統計 true為開啟#site_count: true彈框配置
- 首先需要具備hexo中nodeJS版本高于6.2才可以生效（下載最新的nodeJS->得到的hexo可以即可滿足，可以通過hexo -v查看nodeJS版本）
在根目錄配置文件中添加如下內容：
jsonContent: meta: false pages: false posts: title: true date: true path: true text: true raw: false content: false slug: false updated: false comments: false link: false permalink: false excerpt: false categories: false tags: true執行清除，生成，其服務等操作查看效果
標簽配置
title: hexo+github創建個人博客--深入篇 tags: - hexo - github - yilia文章分類
title: hexo+github創建個人博客--深入篇 categories: 瞎搞目錄配置
title: hexo+github創建個人博客--深入篇 toc: true內容截斷
- 主題配置文件中配置截斷顯示的文字，excerpt_link: more ,此處顯示為more
- 在文章中鍵入該注釋，即可在該位置生效：
<!-- more -->
相冊功能(待實現)
github同步本地博客
1.提交
在本地配置好個人博客，發布使用后，為防止電腦更換或突發事件導致電腦文件丟失，可以講博客項目上傳至github上保存，需要時再更新到本地即可（此時我們提交的分支為修改后的默認分支–hexo,詳細介紹請看hexo+github創建個人博客–基礎篇中的倉庫設計），提交命令為:
git add . //將文件加入到提交緩存 git commit -m "comment" //添加文件注釋 git push origin hexo //提交到某分支提交以后會發現主題文件沒有提交上去，是因為此時的主題文件是另一個倉庫的git文件，需要將本地主題文件中的.git文件夾刪掉，再次提交即可
2.更新
在本地項目中運行命令：
git pull //更新到本地 git status //查看文件對比后的狀態首次更新代碼需要執行以下命令(注意不要執行hexo init命令)：
git clone xxx //復制github倉庫路徑 npm install hexo //安裝插件 npm install npm install hexo-deployer-git //發布到git上時必要的插件 npm install hexo-server --save //3.0以后server獨立出來 需要額外install
其他功能配置
1.七牛云圖床(供博客圖床使用，可選擇性進行)
- 七牛云介紹
挺好的一個云服務網站，注冊后可以免費領取10G免費空間等等，可以將博客中需要使用的圖片上傳到注冊的服務器上，可以加快圖片的加載速度，至少比在github上的速度快很多。
- 七牛云賬號創建和設置
進入七牛云官網注冊，按照流程進行，登陸后選擇對象存儲，此時可以選擇綁定域名(需要已備案)，在內容管理中可以上傳圖片，復制圖片的鏈接即可在再網頁上訪問
2.評論功能
第三方的評論插件有很多種，具體介紹可以參考wiki，根據自己的情況選擇
yilia主題中已經集成了duoshuo,暢言,網易云跟帖，disqus這幾款評論插件，按照提示修改配置文件即可
鑒于此時還沒有備案的域名，所以提供另外一個評論插件的配置-來必力,有備案域名的朋友可以考慮暢言
進入來必力，注冊，登陸，點擊右上角選擇管理頁面
選擇生成一個city版本的評論系統，綁定自己的域名，填寫必要信息，最后會生成一份JS代碼
在博客項目的…\themes\yilia\layout\_partial\post目錄下新建livere.ejs文件，將此段代碼copy進去，為了方便靈活的管理，進行如下修改：
data-uid="<%=theme.livere_uid%>" //將此處的ID配置在主題配置文件中在主題配置文件中加入：
livere: true //開啟或關閉 livere-uid: 'your-livere-uid'最后需要將創建的livere.ejs文件引入到文章中，打開…\themes\yilia\layout\_partial\article.ejs文件，在以下位置插入如下代碼：
<% if (!index && post.comments){ %><% if (theme.livere && theme.livere_uid){ %><%- partial('post/livere', {key: post.slug,title: post.title,url: config.url+url_for(post.path)}) %><% } %> <% } %>生成發布查看效果即可，之后可以通過來必力對評論進行管理，并且可以設置郵箱提醒功能
可以通過在文章md文件中通過comments: false 來關閉某篇文章的評論功能
3.統計功能
yilia主題中集成了google_analytics和baidu_analytics的統計功能，選擇一種進行注冊，綁定域名即可，但是頁面不會有顯示的效果，此處，我集成了一個第三方統計插件-不蒜子,按照官網提示操作步驟進行即可，詳細如下：
打開\themes\yilia\layout\_partial目錄下的footer.ejs文件，首先最最后copy以下一行代碼：
<script async src="//dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script>此處為了方便靈活管理，可以通過配置文件控制顯示，選擇合適的位置(我選擇加在footer.ejs中)，可以加入如下配置：
<div class="footer-left"> © <%= date(new Date(), 'YYYY') %> <%= config.author || config.title %> <% if (theme.site_count){ %><span id="busuanzi_container_site_pv">本站被踩過<span id="busuanzi_value_site_pv"></span>次</span> <% } %> <% if (theme.user_count){ %> <span id="busuanzi_container_site_uv">被<span id="busuanzi_value_site_uv"></span>人踩過</span> <% } %> </div>預覽效果為：
在文章標題后面顯示文章的訪問量，在\themes\yilia\layout\_partial下的article.ejs中的以下位置加入：
<header class="article-header"> <%- partial('post/title', {class_name: 'article-title'}) %> <% if (theme.page_count && !index){ %></br><a class="article-count-a-tag" href="javascript:void(0);"><span class="icon-sort"></span><span id="busuanzi_container_page_pv" class="article-count-a-span">被偷看了：<span id="busuanzi_value_page_pv"></span>次</span></a> <% } %> <% if (!post.noDate){ %> <%- partial('post/date', {class_name: 'archive-article-date', date_format: null}) %> <% } %> </header>此處有一個小細節就是判斷條件中加入 !index 判斷條件，在主頁時不顯示，點擊進入某文章時才顯示統計的效果，最后還需要在…\themes\yilia\source的main.css中加入自定義的class，我定義的為：
.article-count-a-tag{color:gray;font-size:14px;} .article-count-a-span{color:#ef7522;font-size:14px;}最終效果為：
(未完待續 ……)
本文作者： little-dragon
個人博客： http://littledragon.cn
版權聲明： 原創文章，有問題請評論中留言。非商業轉載請注明作者及出處。
總結
以上是生活随笔為你收集整理的hexo+github创建个人博客--深入篇的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Linux SDIO WIFI Marv
- 下一篇： 夸男生帅：