前言

配置完yilia后体箕，發(fā)現(xiàn)缺少一些東西专钉，百度之下，找到了特別喜歡的主題——next累铅。跟大家分享配置經(jīng)驗(yàn)跃须。

• 首先，本文是根據(jù)我自己的博客配置而寫的娃兽，并不全面菇民，其他美化配置在文末提供了相應(yīng)的參考鏈接。歡迎瀏覽我的博客：destiny'Note
• 其次，本文中有部分自己的改進(jìn)方案第练，并非全部摘自他文

我的博客原文鏈接：hexo + next主題高級(jí)配置

一阔馋、主題下載

git clone https://github.com/iissnan/hexo-theme-next.git themes/next

在根目錄_config.yml文件中：

theme: next

注意：所有配置文件內(nèi)，每一項(xiàng)配置的冒號(hào)后面都要加上空格

二娇掏、綜合設(shè)置

1. 語(yǔ)言設(shè)置

在根目錄_config.yml文件中：

language: zh-Hans

編輯主題目錄下language/zh-Hans.yml中英文的對(duì)應(yīng)關(guān)系

2. 修改字體大小垦缅、樣式

在主題目錄配置文件下，查找font：

font:
  enable: true

  # Uri of fonts host. E.g. //fonts.googleapis.com (Default).
  host:

  # body元素的字體設(shè)置
  global:
    external: true
    family: Lato
    size: 18

  # 標(biāo)題的基礎(chǔ)字體設(shè)置
  headings:
    external: true
    family:
    size: 30

  # 文章字體設(shè)置
  posts:
    external: true
    family: 18

  # logo字體設(shè)置
  logo:
    external: true
    family:
    size: 30

  # 代碼塊字體設(shè)置
  codes:
    external: true
    family:
    size: 13

把false改為true驹碍，并修改了size的數(shù)值壁涎，單位是像素。如有需要可自行改變字體志秃。

另外提供一種方法怔球，供會(huì)前端的小伙伴參考：
打開\themes\next\source\css\ _variables\base.styl文件，修改里面的字體大小

3. 主題選擇

在主題配置文件中浮还，查找scheme：

# 主題中的主題
# scheme: Muse
scheme: Mist
# scheme: Pisces
# scheme: Gemini

選擇你喜歡的竟坛，去掉前面的#號(hào)，其他加上#號(hào)钧舌。即注釋掉的意思担汤。

4. 背景的設(shè)置

在主題配置文件中，查找canvas：

# Canvas-nest
canvas_nest: false
# three_waves
three_waves: false
# canvas_lines
canvas_lines: false
# canvas_sphere
canvas_sphere: false
# Only fit scheme Pisces
# Canvas-ribbon
canvas_ribbon: true

開啟相應(yīng)的背景洼冻，只要把對(duì)應(yīng)的false設(shè)置為true崭歧，記得把其他都改為false

5. 修改內(nèi)容區(qū)域?qū)挾?/h3>

Next 對(duì)內(nèi)容的寬度的設(shè)定如下：

• 700px，當(dāng)屏幕寬度 < 1600px
• 900px撞牢，當(dāng)屏幕寬度 >= 1600px
• 移動(dòng)設(shè)備下率碾，寬度自適應(yīng)

在主題目錄下的 source\css_variables\custom.styl 文件，新增變量：

// 修改成你期望的寬度
$content-desktop = 700px
// 當(dāng)視窗超過 1600px 后的寬度
$content-desktop-large = 900px

此方法不適用于 Pisces Scheme屋彪， Pisces Scheme 編輯themes\next\source\css\_schemes\Picses\_layout.styl文件所宰，更改以下 css 選項(xiàng)定義值：

.header {width: 1150px;}
.container .main-inner {width: 1150px;}
.content-wrap {width: calc(100% - 260px);}

三、文章模塊的美化

1. 文章中添加居中模塊

文章的Markdown文件中寫上：

<!-- HTML方式: 直接在 Markdown 文件中編寫 HTML 來調(diào)用 -->
<blockquote class="blockquote-center">優(yōu)秀的人畜挥，不是不合群仔粥，而是他們合群的人里面沒有你</blockquote>

<!-- 標(biāo)簽 方式，要求版本在0.4.5或以上 -->
{% fullimage /image-url, alt, title %}

<!-- 別名 -->
{% fi /image-url, alt, title %}

2. 文章內(nèi)鏈接樣式美化

在主題目錄下蟹但，將source/css/_custom/custom.styl文件修改如下：

// 文章內(nèi)鏈接文本樣式
.post-body a{
  color: #0593d3;
  border-bottom: none;
  border-bottom: 1px solid #0593d3;
  &:hover {
    color: #fc6423;
    border-bottom: none;
    border-bottom: 1px solid #fc6423;
  }
}

3. 文章內(nèi)代碼美化

• 行內(nèi)代碼
  在主題目錄下躯泰，將source/css/_custom/custom.styl文件修改如下：

//行內(nèi)代碼樣式
code {
    color: #c7254e;
    background: #f9f2f4;
    border: 1px solid #d6d6d6;
    padding:1px 4px;
    word-break: break-all;
    border-radius:4px;
}

• 區(qū)塊代碼
  在主題目錄下，修改config.yml文件：

#   樣式可選： normal | night | night eighties | night blue | night bright
highlight_theme: night

4. 文章結(jié)束語(yǔ)

• 添加模板文件

在主題目錄下\layout\_macro中新建 passage-end-tag.swig文件,并添加以下內(nèi)容：

<div>
    {% if not is_index %}
        <div style="text-align:center;color: #ccc;font-size:14px;">
              -------------本文結(jié)束<i class="fa fa-paw"></i>感謝您的閱讀-------------
        </div>
    {% endif %}
</div>

• 導(dǎo)入模板文件

在\layout\_macro\post.swig文件中矮湘，找到：

{#####################}
{### END POST BODY ###}
{#####################}

在上面代碼之前添加：

<div>
      {% if not is_index %}
          {% include 'passage-end-tag.swig' %}
      {% endif %}
</div>

• 配置
  在主題配置文件中添加：

# 文章末尾添加“本文結(jié)束”標(biāo)記
passage_end_tag:
  enabled: true

上述步驟是主題編寫的基本步驟斟冕，值得參考。

5. 增強(qiáng)文章底部版權(quán)信息

• 增加文章md文件的頭部信息中添加copyright: true時(shí)缅阳，添加版權(quán)聲明
• 增加文章標(biāo)題磕蛇、發(fā)布時(shí)間景描、更新時(shí)間等信息

在目錄next/layout/_macro/下找到post-copyright.swig，進(jìn)行部分修改：

{% if page.copyright %}
<ul class="post-copyright">
  <li class="post-copyright-author">
    <strong>本文標(biāo)題:</strong>
    <a href="{{ url_for(page.path) }}">{{ page.title }}</a>
  </li>
  <li class="post-copyright-author">
    <strong>{{ __('post.copyright.author') + __('symbol.colon') }}</strong>
    {{ config.author }}
  </li>
  <li class="post-copyright-author">
    <strong>發(fā)布時(shí)間:</strong>
    {{ page.date.format("YYYY年MM月DD日 - HH:MM") }}
  </li>
  <li class="post-copyright-author">
    <strong>最后更新:</strong>
    {{ page.updated.format("YYYY年MM月DD日 - HH:MM") }}
  </li>
  <li class="post-copyright-link">
    <strong>{{ __('post.copyright.link') + __('symbol.colon') }}</strong>
    <a href="{{ post.permalink }}" title="{{ post.title }}">{{ post.permalink }}</a>
  </li>
  <li class="post-copyright-license">
    <strong>{{ __('post.copyright.license_title') + __('symbol.colon') }} </strong>
    {{ __('post.copyright.license_content', theme.post_copyright.license_url, theme.post_copyright.license) }}
  </li>
</ul>
{% endif %}

6. 自定義文章的默認(rèn)頭部信息

在根目錄的/scaffolds/post.md文件中添加：

---
title: {{ title }}
date: {{ date }}
tags:                #標(biāo)簽
categories:      #分類
copyright: true #版權(quán)聲明
permalink: 01  #文章鏈接秀撇，有默認(rèn)值
top: 0              #置頂優(yōu)先級(jí)
password:      #密碼保護(hù)
---

7. 文章加密訪問（沒有太大意義）

打開主題目錄下layout/_partials/head.swig文件,在meta標(biāo)簽后面插入這樣一段代碼：

<script>
    (function(){
        if('{{ page.password }}'){
            if (prompt('請(qǐng)輸入文章密碼') !== '{{ page.password }}'){
                alert('密碼錯(cuò)誤超棺！');
                history.back();
            }
        }
    })();
</script>

然后文章頭部信息中添加password：

password: 你設(shè)置的密碼

如果password后面為空，則表示不用密碼呵燕。

8. 博文置頂

• 安裝hexo-generator-index插件

npm install hexo-generator-index--save

• 替換代碼

把node_modules/hexo-generator-index/lib/generator.js內(nèi)的代碼替換為：

'use strict';
var pagination = require('hexo-pagination');
module.exports = function(locals){
  var config = this.config;
  var posts = locals.posts;
    posts.data = posts.data.sort(function(a, b) {
        if(a.top && b.top) { // 兩篇文章top都有定義
            if(a.top == b.top) return b.date - a.date; // 若top值一樣則按照文章日期降序排
            else return b.top - a.top; // 否則按照top值降序排
        }
        else if(a.top && !b.top) { // 以下是只有一篇文章top有定義棠绘，那么將有top的排在前面（這里用異或操作居然不行233）
            return -1;
        }
        else if(!a.top && b.top) {
            return 1;
        }
        else return b.date - a.date; // 都沒定義按照文章日期降序排
    });
  var paginationDir = config.pagination_dir || 'page';
  return pagination('', posts, {
    perPage: config.index_generator.per_page,
    layout: ['index', 'archive'],
    format: paginationDir + '/%d/',
    data: {
      __index: true
    }
  });
};

• 設(shè)置top值

在文章頭部信息中添加top 值，數(shù)值越大文章越靠前:

---
top: 100
---

9. 增強(qiáng)文章底部標(biāo)簽

修改模板/themes/next/layout/_macro/post.swig再扭，搜索 rel=”tag”>#氧苍，將 #換成

<i class="fa fa-tag"></i>

10. 修改打賞

• 修改文字與圖片

# 打賞設(shè)置
reward_comment: 堅(jiān)持原創(chuàng)技術(shù)分享，您的支持將鼓勵(lì)我繼續(xù)創(chuàng)作泛范！
wechatpay: /assets/img/weixin.jpg
alipay: /assets/img/alipay.jpg
# bitcoin: /images/bitcoin.png

文字让虐、圖片位置可自行修改

• 字體不閃動(dòng)設(shè)置

修改文件next/source/css/_common/components/post/post-reward.styl，然后注釋其中的函數(shù)wechat:hover和alipay:hover罢荡，如下：

/* 注釋文字閃動(dòng)函數(shù)
#wechat:hover p{
animation: roll 0.1s infinite linear;
-webkit-animation: roll 0.1s infinite linear;
-moz-animation: roll 0.1s infinite linear;
}
#alipay:hover p{
animation: roll 0.1s infinite linear;
-webkit-animation: roll 0.1s infinite linear;
-moz-animation: roll 0.1s infinite linear;
}
*/

四赡突、區(qū)塊美化

1. 添加頂部加載條

在主題配置文件_config.yml中，找到pace并修改：

pace: true
pace_theme: pace-theme-minimal

加載條樣式有許多区赵，在你找到的位置中可自行更換

2. 主頁(yè)文章添加陰影效果

打開/themes/next/source/css/_custom/custom.styl,添加：

 .post {
   margin-top: 60px;
   margin-bottom: 60px;
   padding: 25px;
   -webkit-box-shadow: 0 0 5px rgba(202, 203, 203, .5);
   -moz-box-shadow: 0 0 5px rgba(202, 203, 204, .5);
  }

3. 鼠標(biāo)點(diǎn)擊小紅心的設(shè)置

將 love.js文件添加到主題目錄的\source\js\src 下惭缰。找到 \layout\_layout.swing文件， 在文件的后面笼才， body標(biāo)簽之前 添加以下代碼：

<!-- 頁(yè)面點(diǎn)擊小紅心 -->
<script type="text/javascript" src="/js/src/love.js"></script>

4. 搜索功能

• 安裝

npm install hexo-generator-searchdb --save

• 配置

在主題配置文件下漱受，查找local_search:

local_search:
  enable: false
  trigger: auto
  top_n_per_article: 1

enable修改為true

在根目錄配置文件中，添加以下代碼：

search:
  path: search.xml
  field: post
  format: html
  limit: 10000

5.頁(yè)腳美化

• 隱藏網(wǎng)頁(yè)底部powered By Hexo / 強(qiáng)力驅(qū)動(dòng)

在主題配置文件_config.yml中修改：

copyright: false

• 添加文字或者鏈接

在主題目錄下的layout/_partials/footer患整，查找powered-by：

{% if theme.copyright %}
  <div class="powered-by">{#
  #}{{ __('footer.powered', '<a class="theme-link" ) }}{#
#}</div>

在上面代碼之前添加你的文字拜效，或者增加鏈接：

<p>best for best!</p>    <!--文字-->
<a href="www.baidu.com">百度</a>   <!--鏈接-->

至于樣式，這里不多介紹各谚。需要了解html、css知識(shí)到千。
還可以設(shè)置訪問量等信息昌渤，在文末參考文章中有介紹。

6. 側(cè)邊欄添加訪問量等信息

• 獲取不蒜子代碼

在不蒜子上獲取代碼：

<script async src="http://dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script>

• 添加js文件

在主題目錄下憔四，找到\layout\_layout.swing文件膀息， 在文件的后面， </body>標(biāo)簽之前了赵，添加上面代碼潜支。

• 安裝wordcount

npm install hexo-wordcount --save

• 修改布局

在主題目錄下，找到\layout\_macro\sidebar.swing文件柿汛，查找/nav冗酿，在</nav>標(biāo)簽之前，添加下面代碼：

<br>
<br>
<div class="site-state-item site-state-posts" style="border-left:none;">
       <span class="site-state-item-count" id="busuanzi_value_site_pv"></span>
       <span class="site-state-item-name">瀏覽量</span>
</div>
<div class="site-state-item site-state-posts">
      <span class="site-state-item-count" id="busuanzi_value_site_uv"></span>
     <span class="site-state-item-name">訪客量</span>
</div>
<div class="site-state-item site-state-posts">
      <span class="site-state-item-count">{{totalcount(site)}}</span>
      <span class="site-state-item-name">總字?jǐn)?shù)</span>
</div>

7. 文章標(biāo)簽顯示設(shè)置

在主題配置文件中，查找post_meta：

# 文章標(biāo)簽顯示設(shè)置
post_meta:
  item_text: true
  created_at: true  # 發(fā)表時(shí)間
  updated_at: false  # 更新時(shí)間
  categories: true  # 分類

# 文章字?jǐn)?shù)顯示設(shè)置（需要wordcount裁替，前面已經(jīng)下載）
post_wordcount:
  item_text: true
  wordcount: true  # 顯示字?jǐn)?shù)
  min2read: false   # 所需時(shí)間
  totalcount: false  # 總字?jǐn)?shù)
  separated_meta: true # 分割符

• 文章閱讀量
  注冊(cè)leancloud統(tǒng)計(jì)賬號(hào)项玛，按照next官方推薦文檔 為NexT主題添加文章閱讀量統(tǒng)計(jì)功能，
  獲取AppID以及AppKey并在主題的_config.yml文件中填寫：

leancloud_visitors:
  enable: true
  app_id: joaeuuc4hsqudUUwx4gIvGF6-gzGzoHsz
  app_key: E9UJsJpw1omCHuS22PdSpKoh

8. 添加友言評(píng)論

在友言評(píng)論中注冊(cè)弱判，并進(jìn)入管理來獲取你的id襟沮。
修改主題配置文件的友言id：

# youyan 評(píng)論
youyan_uid: "2144889"

9. 添加jiathis分享按鈕

將你的友言Id添加進(jìn)去：

# jiathis分享按鈕
jiathis:
  uid: '2144889'

參考

next官網(wǎng)：第三方服務(wù)集成
hexo的next主題個(gè)性化教程:打造炫酷網(wǎng)站
Hexo-NexT搭建個(gè)人博客