-
內容簡介
此篇文章介紹的是個人博客的一些配置內容，包含博客項目的介紹、主題配置、圖床配置以及各種第三方功能插件的使用，若還未搭建個人博客的哥們可以先參考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: # Writing new_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: true line_number: true auto_detect: false tab_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: 5 order_by: -date # Category & Tag default_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 pagination per_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.html deploy: //發布對應的github賬號 type: git repo: git@github.com:haloMelody/haloMelody.github.io.git branch: master
-
主題配置
1.主題選擇
2.配置主題
-
從github上下載主題
git clone https://github.com/litten/hexo-theme-yilia.git -
將主題配置到個人博客中，在根目錄的全局配置文件中修改此變量（主題項目中也有_config.yml配置文件）
theme: yilia -
主題配置文件介紹（摘要）
# Header，主題頁面顯示鏈接 menu: 主頁: / 所有文章: /archives # Content # 文章太長，截斷按鈕文字 excerpt_link: more # 文章卡片右下角常駐鏈接，不需要請設置為false show_all_link: '展開全文' # 數學公式 mathjax: false # 是否在新窗口打開鏈接 open_in_new: false # 打賞 # 打賞type設定：0-關閉打賞； 1-文章對應的md文件里有reward:true屬性，才有打賞； 2-所有文章均有打賞 reward_type: 1 # 打賞wording reward_wording: 老板大氣，謝謝老板！ # 支付寶二維碼圖片地址，跟你設置頭像的方式一樣。比如：/assets/img/alipay.jpg alipay: 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重復的序號；否則置為false toc_hide_index: true # 目錄為空時的提示 toc_empty_wording: '目錄，不存在的…' # 是否有快速回到頂部的按鈕 top: true # Miscellaneous，網站統計 baidu_analytics: '24451a8b853bb443019686be21dfdff4' google_analytics: '' favicon: http://ou36vgj5u.bkt.clouddn.com/image/blog/fav.ico #你的頭像url avatar: 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: false smart_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版本）
hexo-yilia-pop- 在根目錄配置文件中添加如下內容：
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 hexo-deployer-git //發布到git上時必要的插件
-
-
其他功能配置
1.七牛云圖床(供博客圖床使用，可選擇性進行)
- 七牛云介紹
挺好的一個云服務網站，注冊后可以免費領取10G免費空間等等，可以將博客中需要使用的圖片上傳到注冊的服務器上，可以加快圖片的加載速度，至少比在github上的速度快很多。
- 七牛云賬號創建和設置
進入七牛云官網注冊，按照流程進行，登陸后選擇對象存儲，此時可以選擇綁定域名(需要已備案)，在內容管理中可以上傳圖片，復制圖片的鏈接即可在再網頁上訪問
2.評論功能
第三方的評論插件有很多種，具體介紹可以參考wiki，根據自己的情況選擇
yilia主題中已經集成了duoshuo,暢言,網易云跟帖，disqus這幾款評論插件，按照提示修改配置文件即可
-
鑒于此時還沒有備案的域名，所以提供另外一個評論插件的配置-來必力,有備案域名的朋友可以考慮暢言
- 進入來必力，注冊，登陸，點擊右上角選擇管理頁面
- 選擇生成一個city版本的評論系統，綁定自己的域名，填寫必要信息，最后會生成一份JS代碼
livere-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="http://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>
-
預覽效果為：
count-2
- 在文章標題后面顯示文章的訪問量，在\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;}
- 最終效果為：
count-1 - 打開\themes\yilia\layout\_partial目錄下的footer.ejs文件，首先最最后copy以下一行代碼：
(未完待續 ......)
