內(nèi)容簡介

此篇文章介紹的是個(gè)人博客的一些配置內(nèi)容棚愤，包含博客項(xiàng)目的介紹骏庸、主題配置、圖床配置以及各種第三方功能插件的使用袒啼，若還未搭建個(gè)人博客的哥們可以先參考hexo+github創(chuàng)建個(gè)人博客--基礎(chǔ)篇搭建出自己的個(gè)人博客哈扮。

hexo項(xiàng)目介紹

1.目錄結(jié)構(gòu)介紹

• .deploy #需要部署的文件
• node_modules #Hexo插件
• public #生成的靜態(tài)網(wǎng)頁文件
• scaffolds #模板
• source #博客正文和其他源文件，404蚓再、favicon滑肉、CNAME 都應(yīng)該放在這里
• _drafts #草稿
• _posts #文章
• themes #主題
• _config.yml #全局配置文件
• package.json

2.全局配置文件介紹

title: 個(gè)人博客     //頁面標(biāo)題
subtitle: 玉面小飛龍     //小標(biāo)題
description: 賊溜     //描述
author: Little Dragon       //作者
language: zh-CN     //語言
timezone:       //時(shí)區(qū)

# 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/      //個(gè)人域名
root: /     //根目錄
permalink: :year/:month/:day/:title/        //文章創(chuàng)建后生成的目錄結(jié)構(gòu)
permalink_defaults:

# Directory     //變量與目錄的對應(yīng)情況
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:        //分頁設(shè)置
  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:     //發(fā)布對應(yīng)的github賬號
  type: git
  repo: git@github.com:haloMelody/haloMelody.github.io.git
  branch: master

主題配置

1.主題選擇

• 網(wǎng)上好的主題有很多，可以點(diǎn)擊選擇摘仅，本文介紹的是yilia主題

2.配置主題

• 從github上下載主題

  git clone https://github.com/litten/hexo-theme-yilia.git
  

• 將主題配置到個(gè)人博客中靶庙，在根目錄的全局配置文件中修改此變量（主題項(xiàng)目中也有_config.yml配置文件）

  theme: yilia
  

• 主題配置文件介紹（摘要）

  # Header，主題頁面顯示鏈接
  menu:
    主頁: /
    所有文章: /archives
  # Content
  # 文章太長娃属，截?cái)喟粹o文字
  excerpt_link: more
  # 文章卡片右下角常駐鏈接六荒，不需要請?jiān)O(shè)置為false
  show_all_link: '展開全文'
  # 數(shù)學(xué)公式
  mathjax: false
  # 是否在新窗口打開鏈接
  open_in_new: false
  # 打賞
  # 打賞type設(shè)定：0-關(guān)閉打賞； 1-文章對應(yīng)的md文件里有reward:true屬性矾端，才有打賞掏击； 2-所有文章均有打賞
  reward_type: 1
  # 打賞wording
  reward_wording: 老板大氣，謝謝老板须床！
  # 支付寶二維碼圖片地址铐料，跟你設(shè)置頭像的方式一樣。比如：/assets/img/alipay.jpg
  alipay: http://ou36vgj5u.bkt.clouddn.com/image/blog/alipay.JPG
  # 微信二維碼圖片地址
  weixin: http://ou36vgj5u.bkt.clouddn.com/image/blog/wechatpay.JPG
  
  # 目錄
  # 目錄設(shè)定：0-不顯示目錄豺旬； 1-文章對應(yīng)的md文件里有toc:true屬性钠惩，才有目錄； 2-所有文章均顯示目錄
  toc: 1
  # 根據(jù)自己的習(xí)慣來設(shè)置族阅，如果你的目錄標(biāo)題習(xí)慣有標(biāo)號篓跛，置為true即可隱藏hexo重復(fù)的序號；否則置為false
  toc_hide_index: true
  # 目錄為空時(shí)的提示
  toc_empty_wording: '目錄坦刀，不存在的…'
  
  # 是否有快速回到頂部的按鈕
  top: true
  
  # Miscellaneous愧沟，網(wǎng)站統(tǒng)計(jì)
  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沐寺、網(wǎng)易云跟帖；3盖奈、暢言混坞；4、Disqus 不需要使用某項(xiàng)，直接設(shè)置值為false究孕，或注釋掉
  #具體請參考wiki：https://github.com/litten/hexo-theme-yilia/wiki/
  #1啥酱、多說
  duoshuo: false
  #2、網(wǎng)易云跟帖
  wangyiyun: false
  #3厨诸、暢言
  changyan_appid: false
  changyan_conf: false
  #4镶殷、Disqus 在hexo根目錄的config里也有disqus_shortname字段，優(yōu)先使用yilia的
  disqus: false
  #disqus_shortname: halomelody
  
  # slider的設(shè)置
  slider:
    # 是否默認(rèn)展開tags板塊
    showTags: true
  
  # 智能菜單
  # 如不需要微酬，將該對應(yīng)項(xiàng)置為false
  # 比如
  #smart_menu:
  #  friends: false
  smart_menu:
    innerArchive: '文章查找'
    friends: '友鏈'
    aboutme: '關(guān)于我'
    #tagcloud: '標(biāo)簽'
  
  #friends:
  aboutme: little dragon
  
  # 頁面統(tǒng)計(jì) true為開啟
  #page_count: false
  
  # 站點(diǎn)統(tǒng)計(jì) true為開啟
  #site_count: true
  

• 彈框配置

  • 首先需要具備hexo中nodeJS版本高于6.2才可以生效（下載最新的nodeJS->得到的hexo可以即可滿足绘趋，可以通過hexo -v查看nodeJS版本）
  

  hexo-yilia-pop
  • 在根目錄配置文件中添加如下內(nèi)容：

  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
  

  • 執(zhí)行清除，生成得封，其服務(wù)等操作查看效果

• 標(biāo)簽配置

title: hexo+github創(chuàng)建個(gè)人博客--深入篇
tags: 
    - hexo
    - github
    - yilia

• 文章分類

title: hexo+github創(chuàng)建個(gè)人博客--深入篇
categories: 瞎搞

• 目錄配置

title: hexo+github創(chuàng)建個(gè)人博客--深入篇
toc: true

• 內(nèi)容截?cái)?/p>

  • 主題配置文件中配置截?cái)囡@示的文字埋心，excerpt_link: more ,此處顯示為more
  • 在文章中鍵入該注釋，即可在該位置生效：

  <!-- more -->
  

• 相冊功能(待實(shí)現(xiàn))

github同步本地博客

1.提交

• 在本地配置好個(gè)人博客忙上，發(fā)布使用后，為防止電腦更換或突發(fā)事件導(dǎo)致電腦文件丟失闲坎，可以講博客項(xiàng)目上傳至github上保存疫粥，需要時(shí)再更新到本地即可（此時(shí)我們提交的分支為修改后的默認(rèn)分支--hexo,詳細(xì)介紹請看hexo+github創(chuàng)建個(gè)人博客--基礎(chǔ)篇中的倉庫設(shè)計(jì)），提交命令為:

  git add .       //將文件加入到提交緩存
  git commit -m "comment" //添加文件注釋
  git push origin hexo    //提交到某分支
  

• 提交以后會(huì)發(fā)現(xiàn)主題文件沒有提交上去腰懂，是因?yàn)榇藭r(shí)的主題文件是另一個(gè)倉庫的git文件梗逮，需要將本地主題文件中的.git文件夾刪掉，再次提交即可

2.更新

• 在本地項(xiàng)目中運(yùn)行命令：

  git pull    //更新到本地
  git status  //查看文件對比后的狀態(tài)
  

• 首次更新代碼需要執(zhí)行以下命令(注意不要執(zhí)行hexo init命令)：

  git clone  xxx  //復(fù)制github倉庫路徑
  npm install hexo //安裝插件
  npm install hexo-deployer-git //發(fā)布到git上時(shí)必要的插件
  

其他功能配置

1.七牛云圖床(供博客圖床使用绣溜，可選擇性進(jìn)行)

• 七牛云介紹

挺好的一個(gè)云服務(wù)網(wǎng)站慷彤，注冊后可以免費(fèi)領(lǐng)取10G免費(fèi)空間等等，可以將博客中需要使用的圖片上傳到注冊的服務(wù)器上怖喻，可以加快圖片的加載速度底哗，至少比在github上的速度快很多。

• 七牛云賬號創(chuàng)建和設(shè)置

進(jìn)入七牛云官網(wǎng)注冊锚沸，按照流程進(jìn)行跋选，登陸后選擇對象存儲，此時(shí)可以選擇綁定域名(需要已備案)哗蜈，在內(nèi)容管理中可以上傳圖片前标，復(fù)制圖片的鏈接即可在再網(wǎng)頁上訪問

2.評論功能

• 第三方的評論插件有很多種，具體介紹可以參考wiki距潘，根據(jù)自己的情況選擇

• yilia主題中已經(jīng)集成了duoshuo,暢言,網(wǎng)易云跟帖炼列，disqus這幾款評論插件，按照提示修改配置文件即可

• 鑒于此時(shí)還沒有備案的域名音比，所以提供另外一個(gè)評論插件的配置-來必力,有備案域名的朋友可以考慮暢言

  1. 進(jìn)入來必力俭尖，注冊，登陸，點(diǎn)擊右上角選擇管理頁面

  2. 選擇生成一個(gè)city版本的評論系統(tǒng)撮胧，綁定自己的域名巡验，填寫必要信息旨椒，最后會(huì)生成一份JS代碼

  

  livere-js

  3. 在博客項(xiàng)目的...\themes\yilia\layout\_partial\post目錄下新建livere.ejs文件进统，將此段代碼copy進(jìn)去跨嘉，為了方便靈活的管理跳夭，進(jìn)行如下修改：
     data-uid="<%=theme.livere_uid%>" //將此處的ID配置在主題配置文件中

  4. 在主題配置文件中加入：
     livere: true //開啟或關(guān)閉 livere-uid: 'your-livere-uid'

  5. 最后需要將創(chuàng)建的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) }) %> <% } %> <% } %>

  6. 生成發(fā)布查看效果即可秫舌，之后可以通過來必力對評論進(jìn)行管理，并且可以設(shè)置郵箱提醒功能

  7. 可以通過在文章md文件中通過comments: false 來關(guān)閉某篇文章的評論功能

3.統(tǒng)計(jì)功能

• yilia主題中集成了google_analytics和baidu_analytics的統(tǒng)計(jì)功能绣檬，選擇一種進(jìn)行注冊足陨，綁定域名即可，但是頁面不會(huì)有顯示的效果娇未，此處墨缘，我集成了一個(gè)第三方統(tǒng)計(jì)插件-不蒜子,按照官網(wǎng)提示操作步驟進(jìn)行即可，詳細(xì)如下：

  1. 打開\themes\yilia\layout\_partial目錄下的footer.ejs文件零抬，首先最最后copy以下一行代碼：
     <script async src="http://dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script>

  2. 此處為了方便靈活管理镊讼，可以通過配置文件控制顯示，選擇合適的位置(我選擇加在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>

  3. 預(yù)覽效果為：
     

     count-2

  4. 在文章標(biāo)題后面顯示文章的訪問量蝶棋，在\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>

  5. 此處有一個(gè)小細(xì)節(jié)就是判斷條件中加入 !index 判斷條件，在主頁時(shí)不顯示忽妒，點(diǎn)擊進(jìn)入某文章時(shí)才顯示統(tǒng)計(jì)的效果玩裙，最后還需要在...\themes\yilia\source的main.css中加入自定義的class，我定義的為：
     .article-count-a-tag{color:gray;font-size:14px;} .article-count-a-span{color:#ef7522;font-size:14px;}

  6. 最終效果為：

  

  count-1

(未完待續(xù) ......)