基本設(shè)置和了解

前言

前面的文章已經(jīng)能讓大家搭建起自己的博客，并通過(guò)網(wǎng)絡(luò)訪問(wèn)了，通過(guò)基礎(chǔ)的發(fā)布文章和編輯既可以實(shí)現(xiàn)博客的運(yùn)作了，其他的一些包括分頁(yè)和標(biāo)簽、分類等都不用自己來(lái)操作實(shí)現(xiàn)，只要通過(guò)命令hexo g就可以了，如果大家看過(guò)了next主題的官網(wǎng)中介紹的配置，我會(huì)幫助大家對(duì)其中描述不清的地方進(jìn)行講解。 <!--more-->

理解文章和頁(yè)面

當(dāng)你前面的做好了后，現(xiàn)在還需要建立三個(gè)頁(yè)面：分類頁(yè)categories、標(biāo)簽頁(yè)tags、關(guān)于頁(yè)about,以及一個(gè)html頁(yè)面放到根目錄source下，才能完善博客基本的內(nèi)容。 在根目錄配置文件中有一個(gè)設(shè)置希望設(shè)置為true

## 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: true  ##就是這個(gè)

原因是設(shè)置后當(dāng)你新建一個(gè)頁(yè)面后自動(dòng)生成一個(gè)同名文件夾方便管理。

hexo new page categories 
hexo new page tags
hexo new page about

tags里index.md設(shè)置

---
title: 標(biāo)簽
date: 2017-03-01 19:31:10
type: "tags"
---

categories里index.md設(shè)置

---
title: categories
date: 2017-03-01 19:42:08
type: "categories"
---

主題目錄下的配置文件設(shè)置如下

menu:
  home: /
  categories: /categories
  about: /about
  archives: /archives
  tags: /tags
  commonweal: /404.html

一個(gè)文章應(yīng)該包含以下屬性在頂部

---
date: 2017-03-07
title: xxxxxxxxx
tags: xxxx  #如果不想加入標(biāo)簽可以為空
categories: xxxxx #如果不想加入分類可以為空
---

添加Fork me on GitHub

去網(wǎng)址https://github.com/blog/273-github-ribbons 挑選自己喜歡的樣式，并復(fù)制代碼，添加到themes\next\layout_layout.swig的body標(biāo)簽之內(nèi)即可 記得把里面的url換成自己的!

把側(cè)邊欄頭像變成圓形，并且鼠標(biāo)停留在上面發(fā)生旋轉(zhuǎn)效果

修改themes\next\source\css_common\components\sidebar\sidebar-author.styl：

.site-author-image {
  display: block;
  margin: 0 auto;
  padding: $site-author-image-padding;
  max-width: $site-author-image-width;
  height: $site-author-image-height;
  border: site-author-image-border-color;
  /* start*/
  border-radius: 50%
  webkit-transition: 1.4s all;
  moz-transition: 1.4s all;
  ms-transition: 1.4s all;
  transition: 1.4s all;
  /* end */
}
/* start */
.site-author-image:hover {
  background-color: #55DAE1;
  webkit-transform: rotate(360deg) scale(1.1);
  moz-transform: rotate(360deg) scale(1.1);
  ms-transform: rotate(360deg) scale(1.1);
  transform: rotate(360deg) scale(1.1);
}
/* end */

添加音樂(lè)

去往網(wǎng)易云音樂(lè)搜索喜歡的音樂(lè)，點(diǎn)擊生成外鏈播放器，復(fù)制代碼直接放到博文末尾即可，height設(shè)為0可隱藏播放器，但仍然可以播放音樂(lè)，auto設(shè)成0可手動(dòng)播放，默認(rèn)是1自動(dòng)播放，可把代碼放到themes/next/layout/_custom/sidebar.swig文件里，播放器會(huì)顯示在站點(diǎn)預(yù)覽中

實(shí)現(xiàn)文章標(biāo)題欄顯示更多的文章信息

hexo-wordcount實(shí)現(xiàn)

這個(gè)是官方文檔上沒(méi)有提及的所以我來(lái)說(shuō)下，可以讓你的文章標(biāo)題位置更加富含信息，本插件可以為文章標(biāo)題位置添加，文章字?jǐn)?shù)，文章預(yù)計(jì)閱讀時(shí)間。

安裝WORDCOUNT

執(zhí)行命令

npm install hexo-wordcount --save

主要功能

字?jǐn)?shù)統(tǒng)計(jì):WordCount 閱讀時(shí)長(zhǎng)預(yù)計(jì):Min2Read 總字?jǐn)?shù)統(tǒng)計(jì): TotalCount

查看post.swig模板

模板位置：themes\next\layout_macro\post.swig

 {% if theme.post_wordcount.wordcount or theme.post_wordcount.min2read %}
            <div class="post-wordcount">
              {% if theme.post_wordcount.wordcount %}
                <span class="post-meta-item-icon">
                  <i class="fa fa-edit"></i>
                </span>
                  {% if theme.post_wordcount.item_text %}
                    <span class="post-meta-item-text">{{ __('post.wordcount') }}</span>
                  {% endif %}
                    <span title="{{ __('post.wordcount') }}" }}">
                      {{ wordcount(post.content) }} 字  ##我在這里加了一個(gè)單位上去
                    </span>
              {% endif %}


              {% if theme.post_wordcount.wordcount and theme.post_wordcount.min2read %}
                <span class="post-meta-divider">|</span>
              {% endif %}


              {% if theme.post_wordcount.min2read %}
                <span class="post-meta-item-icon">
                  <i class="fa fa-clock-o"></i>
                </span>
                  {% if theme.post_wordcount.item_text %}
                    <span class="post-meta-item-text">{{ __('post.min2read') }}</span>
                  {% endif %}
                    <span title="{{ __('post.min2read') }}" }}">
                      {{ min2read(post.content) }} 分鐘   ##我在這里加了一個(gè)單位上去
                    </span>
              {% endif %}
            </div>
          {% endif %}

因?yàn)橐呀?jīng)寫(xiě)好了代碼，所以大家不用更改什么，只需要按自己需求來(lái)修改一些地方，我還對(duì)圖標(biāo)進(jìn)行了修改在FontAwesome官網(wǎng)上找到一些圖標(biāo)替換了標(biāo)簽里對(duì)應(yīng)的class值來(lái)實(shí)現(xiàn)目的。因?yàn)閔exo默認(rèn)引入了這個(gè)字體圖標(biāo)庫(kù)，涉及到圖標(biāo)的地方都可以自行來(lái)更改。

其他主題配置

另外評(píng)論系統(tǒng)推薦用多說(shuō)，數(shù)據(jù)統(tǒng)計(jì)用不蒜子統(tǒng)計(jì)，搜索系統(tǒng)用local search,內(nèi)容分享用多說(shuō)分享，配置起來(lái)最簡(jiǎn)單好用。 next主題的官網(wǎng)文檔上寫(xiě)了相關(guān)配置的設(shè)置方法都是在配置文件里進(jìn)行值的設(shè)定，操作起來(lái)很簡(jiǎn)單，我就不重復(fù)講了，如有其他問(wèn)題歡迎提問(wèn)，后面我會(huì)講如何來(lái)自定義CSS樣式和更改里面的一些設(shè)置。