hexo + next主題高級配置

原創 destinytaoer 2020-02-20 18:41

前言

配置完yilia後，發現缺少一些東西，百度之下，找到了特別喜歡的主題——next。跟大家分享配置經驗。

  • 首先，本文是根據我自己的博客配置而寫的，並不全面，其他美化配置在文末提供了相應的參考鏈接。歡迎瀏覽我的博客：destiny'Note
  • 其次，本文中有部分自己的改進方案，並非全部摘自他文

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

一、主題下載

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

在根目錄_config.yml文件中：

theme: next

注意：所有配置文件內，每一項配置的冒號後面都要加上空格

二、綜合設置

1. 語言設置

在根目錄_config.yml文件中：

language: zh-Hans

編輯主題目錄下language/zh-Hans.yml中英文的對應關係

2. 修改字體大小、樣式

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

font:
  enable: true

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

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

  # 標題的基礎字體設置
  headings:
    external: true
    family:
    size: 30

  # 文章字體設置
  posts:
    external: true
    family: 18

  # logo字體設置
  logo:
    external: true
    family:
    size: 30

  # 代碼塊字體設置
  codes:
    external: true
    family:
    size: 13

把false改爲true，並修改了size的數值，單位是像素。如有需要可自行改變字體。

另外提供一種方法，供會前端的小夥伴參考：
打開\themes\next\source\css\ _variables\base.styl文件，修改裏面的字體大小

3. 主題選擇

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

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

選擇你喜歡的，去掉前面的#號，其他加上#號。即註釋掉的意思。

4. 背景的設置

在主題配置文件中，查找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

開啓相應的背景，只要把對應的false設置爲true，記得把其他都改爲false

5. 修改內容區域寬度

Next 對內容的寬度的設定如下：

  • 700px，當屏幕寬度 < 1600px
  • 900px，當屏幕寬度 >= 1600px
  • 移動設備下，寬度自適應

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

// 修改成你期望的寬度
$content-desktop = 700px
// 當視窗超過 1600px 後的寬度
$content-desktop-large = 900px

此方法不適用於 Pisces Scheme， Pisces Scheme 編輯themes\next\source\css\_schemes\Picses\_layout.styl文件，更改以下 css 選項定義值：

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

三、文章模塊的美化

1. 文章中添加居中模塊

文章的Markdown文件中寫上：

<!-- HTML方式: 直接在 Markdown 文件中編寫 HTML 來調用 -->
<blockquote class="blockquote-center">優秀的人，不是不合羣，而是他們合羣的人裏面沒有你</blockquote>

<!-- 標籤 方式，要求版本在0.4.5或以上 -->
{% fullimage /image-url, alt, title %}

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

2. 文章內鏈接樣式美化

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

// 文章內鏈接文本樣式
.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. 文章內代碼美化

  • 行內代碼
    在主題目錄下，將source/css/_custom/custom.styl文件修改如下：
//行內代碼樣式
code {
    color: #c7254e;
    background: #f9f2f4;
    border: 1px solid #d6d6d6;
    padding:1px 4px;
    word-break: break-all;
    border-radius:4px;
}
  • 區塊代碼
    在主題目錄下，修改config.yml文件：
#   樣式可選： normal | night | night eighties | night blue | night bright
highlight_theme: night

4. 文章結束語

  • 添加模板文件

在主題目錄下\layout\_macro中新建 passage-end-tag.swig文件,並添加以下內容：

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

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

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

在上面代碼之前添加：

<div>
      {% if not is_index %}
          {% include 'passage-end-tag.swig' %}
      {% endif %}
</div>
  • 配置
    在主題配置文件中添加：
# 文章末尾添加“本文結束”標記
passage_end_tag:
  enabled: true

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

5. 增強文章底部版權信息

  • 增加文章md文件的頭部信息中添加copyright: true時，添加版權聲明
  • 增加文章標題、發佈時間、更新時間等信息

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

{% if page.copyright %}
<ul class="post-copyright">
  <li class="post-copyright-author">
    <strong>本文標題:</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>發佈時間:</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. 自定義文章的默認頭部信息

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

---
title: {{ title }}
date: {{ date }}
tags:                #標籤
categories:      #分類
copyright: true #版權聲明
permalink: 01  #文章鏈接，有默認值
top: 0              #置頂優先級
password:      #密碼保護
---

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

打開主題目錄下layout/_partials/head.swig文件,在meta標籤後面插入這樣一段代碼：

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

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

password: 你設置的密碼

如果password後面爲空，則表示不用密碼。

8. 博文置頂

  • 安裝hexo-generator-index插件
npm install hexo-generator-index--save
  • 替換代碼

把node_modules/hexo-generator-index/lib/generator.js內的代碼替換爲：

'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
    }
  });
};
  • 設置top值

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

---
top: 100
---

9. 增強文章底部標籤

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

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

10. 修改打賞

  • 修改文字與圖片
# 打賞設置
reward_comment: 堅持原創技術分享，您的支持將鼓勵我繼續創作！
wechatpay: /assets/img/weixin.jpg
alipay: /assets/img/alipay.jpg
# bitcoin: /images/bitcoin.png

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

  • 字體不閃動設置

修改文件next/source/css/_common/components/post/post-reward.styl，然後註釋其中的函數wechat:hover和alipay:hover，如下：

/* 註釋文字閃動函數
#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;
}
*/

四、區塊美化

1. 添加頂部加載條

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

pace: true
pace_theme: pace-theme-minimal

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

2. 主頁文章添加陰影效果

打開/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. 鼠標點擊小紅心的設置

將 love.js文件添加到主題目錄的\source\js\src 下。找到 \layout\_layout.swing文件， 在文件的後面， body標籤之前 添加以下代碼：

<!-- 頁面點擊小紅心 -->
<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.頁腳美化

  • 隱藏網頁底部powered By Hexo / 強力驅動

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

copyright: false
  • 添加文字或者鏈接

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

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

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

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

至於樣式，這裏不多介紹。需要了解html、css知識。
還可以設置訪問量等信息，在文末參考文章中有介紹。

6. 側邊欄添加訪問量等信息

  • 獲取不蒜子代碼

在不蒜子上獲取代碼：

<script async src="//dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script>
  • 添加js文件

在主題目錄下，找到\layout\_layout.swing文件， 在文件的後面， </body>標籤之前，添加上面代碼。

  • 安裝wordcount
npm install hexo-wordcount --save
  • 修改佈局

在主題目錄下，找到\layout\_macro\sidebar.swing文件，查找/nav，在</nav>標籤之前，添加下面代碼：

<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">總字數</span>
</div>

7. 文章標籤顯示設置

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

# 文章標籤顯示設置
post_meta:
  item_text: true
  created_at: true  # 發表時間
  updated_at: false  # 更新時間
  categories: true  # 分類

# 文章字數顯示設置（需要wordcount，前面已經下載）
post_wordcount:
  item_text: true
  wordcount: true  # 顯示字數
  min2read: false   # 所需時間
  totalcount: false  # 總字數
  separated_meta: true # 分割符

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

8. 添加友言評論

在友言評論中註冊，並進入管理來獲取你的id。
修改主題配置文件的友言id：

# youyan 評論
youyan_uid: "2144889"

9. 添加jiathis分享按鈕

將你的友言Id添加進去：

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

參考

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

destinytaoer
發佈了37 篇原創文章 · 獲贊 6 · 訪問量 3萬+
私信 關注
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

Hexo + yilia 主題 +githubpages博客添加友言評論功能

前言 Hexo博客的Yilia主題中評論系統只提供了暢言、網易雲跟帖、多說和Disqus。 由於多說評論、網易雲跟帖已經關閉系統，暢言需要域名備案，而github是國外的，沒有備案，所以嘗試了其他第三方評論系統——友言。 友言使用極其簡

destinytaoer 2020-06-28 09:04:41

Hexo NexT 主題添加評論和文章閱讀量

前言 折騰了暢言、gitalk、disqus 這些評論 API，最後都以失敗告終，最終試到 valine 的時候終於成功，順便把文章閱讀量統計也搞定了。下面把我的經驗寫下來分享給大家，歡迎評論。 Valine 介紹 Valine

差唔多先生 2020-06-24 22:20:53

Hexo搭建個人網站

關於購買雲服務器、域名、DNS解析什麼的還請自行百度，此文開始前假設讀者會基本Linux操作命令，並且已經租借了雲服務器 配置java環境 1.從oracle官網下載jdk-8u66-linux-x64.gz 2.通過tar -

吴豪杰 2020-06-16 03:44:09

用Github Page+Hexo搭建個人炫酷博客（基礎篇）

404BAI 2020-06-04 12:09:10

面試官：個人博客都沒有？

福尔摩东 2020-05-15 15:04:15

快速搭建博客：美化主題

FLUNGGG 2020-02-24 06:36:16

用Halo在自己服務器搭建一個個人博客

卑微小学弟 2020-02-23 19:51:56

快速搭建博客-提升篇，主題美化

bennyrhys 2020-02-22 08:38:17

快速搭建博客-高級篇-增加功能

bennyrhys 2020-02-22 08:38:17

上線流程

Chndy_x 2020-02-21 09:59:08

博客搭建步驟

Chndy_x 2020-02-21 09:59:06

hexo+gitHubPages 快速搭建個人博客

destinytaoer 2020-02-20 18:41:55

使用 Pelican 快速搭建個人博客

東風微鳴 2019-03-13 13:34:47

Hexo + yilia 主題 +githubpages博客添加友言評論功能

前言 Hexo博客的Yilia主題中評論系統只提供了暢言、網易雲跟帖、多說和Disqus。 由於多說評論、網易雲跟帖已經關閉系統，暢言需要域名備案，而github是國外的，沒有備案，所以嘗試了其他第三方評論系統——友言。 友言使用極其簡

destinytaoer 2020-06-28 09:04:41

Hexo NexT 主題添加評論和文章閱讀量

前言 折騰了暢言、gitalk、disqus 這些評論 API，最後都以失敗告終，最終試到 valine 的時候終於成功，順便把文章閱讀量統計也搞定了。下面把我的經驗寫下來分享給大家，歡迎評論。 Valine 介紹 Valine

差唔多先生 2020-06-24 22:20:53