0%

最新 Hexo NexT v7.4.1 主題優化

發表於 更新於 分類於

主題改為NexT之後發現能玩的功能實在太多了，要修改的地方也很多，搗鼓一番後決定寫這篇文章來記錄我個人的NexT主題優化歷程，順便分享給大家最新版本的修改方式。

寫在前頭

NexT主題更新到v7.3.0+
這一版之後的主題簡化自定義內容的添加方法，刪除了以前版本所用的custom.styl自定義css樣式文件

新版的使用方法，主題配置文件中：

1
2
3
4
5
6
7
8
9
10
11
12
13
# Define custom file paths.
# Create your custom files in site directory `source/_data` and uncomment needed files below.
custom_file_path:
  #head: source/_data/head.swig
  #header: source/_data/header.swig
  #sidebar: source/_data/sidebar.swig
  #postMeta: source/_data/post-meta.swig
  #postBodyEnd: source/_data/post-body-end.swig
  #footer: source/_data/footer.swig
  #bodyEnd: source/_data/body-end.swig
  #variable: source/_data/variables.styl
  #mixin: source/_data/mixins.styl
  #style: source/_data/styles.styl

1
#style: source/_data/styles.styl

將注釋刪除(就是刪除前方#)，然後在 BLOG根目錄/source/_data/裡新增文件styles.styl，在該文件中添加自定義內容。

同樣，如果需要在head中添加內容，需要新建head.swig文件，在其中添加自定義內容即可。 在post.swig中添加的文章結尾樣式，可以直接添加在post-body-end.swig文件中。

安裝NexT主題

兩種辦法：

  • 下載檔案
  1. 前往NexT版本發布頁面(~最新v7.4.0)、NexT版本發布頁面(~v5)
  2. 選擇需要的版本點Source code(zip)下載到本地
  3. 解壓縮之後放到 ./themes/ 並將解壓後的文件夾名稱（hexo-theme-next-版本號）更改為 next。
  • 克隆
1
2
cd hexo
git clone https://github.com/theme-next/hexo-theme-next themes/next

在站點配置文件的theme後方改成next。

主題自帶功能

文本居中引用

文本居中引用效果

1
2
3
{% cq %}
文本居中引用效果
{% endcq %}

NOTE

有HTML方式或是直接使用標籤

default

1
<div class="note default"><p>default html</p></div>

Content (md partial supported)

1
{% note class_name %} Content (md partial supported) {% endnote %}

其中，class_name 可以是以下列表中的一個值：

  • default
  • primary
  • success
  • info
  • warning
  • danger

在主題配置文件中可修改note樣式。

1
2
3
4
5
6
7
8
9
10
11
12
13
# Note tag (bs-callout)
note:
  # Note tag style values:
  #  - simple    bs-callout old alert style. Default.
  #  - modern    bs-callout new (v2-v3) alert style.
  #  - flat      flat callout style with background, like on Mozilla or StackOverflow.
  #  - disabled  disable all CSS styles import of note tag.
  style: simple
  icons: true
  border_radius: 3
  # Offset lighter of background in % for modern and flat styles (modern: -12 | 12; flat: -18 | 6).
  # Offset also applied to label tag variables. This option can work with disabled note tag.
  light_bg_offset: 0

LABEL

使用方法：

1
{% label [class]@Text %}

[class] : default | primary | success | info | warning | danger.

效果：

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

1
2
3
4
5
Lorem {% label @ipsum %} {% label primary@dolor sit %} amet, consectetur {% label success@adipiscing elit, %} sed {% label info@do eiusmod %} tempor incididunt ut labore et dolore magna aliqua.

Ut enim *{% label warning @ad %}* minim veniam, quis **{% label danger@nostrud %}** exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate ~~{% label default @velit %}~~ <mark>esse</mark> cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

TABS標籤頁

在主題配置文件將tabs改成true。

1
2
3
4
5
6
# Tabs tag
tabs:
  transition:
    tabs: true
    labels: true
  border_radius: 0

代碼：

1
2
3
4
5
6
7
8
9
10
11
{% tabs 標籤頁, 1 %}
<!-- tab 標題 1 -->
**標籤頁 1**
<!-- endtab -->
<!-- tab 標題 2 -->
**標籤頁 2**
<!-- endtab -->
<!-- tab 標題 3 -->
**標籤頁 3**
<!-- endtab -->
{% endtabs %}

標籤頁後面的，1 代表預設開啟的標籤頁數，若改成-1代表隱藏。

BUTTON標籤

1
2
3
{% button url, text, icon [class], [title] %}
或者
{% btn url, text, icon [class], [title] %}

範例：

1
{% btn #, Text %}{% btn #, Text & Title,, Title %}

TextText & Title
1
2
3
4
5
6
<div>{% btn #,, home fa-5x %}{% btn #,, home fa-5x %}{% btn #,, home fa-5x %}</div>
<div>{% btn #,, home fa-4x %}{% btn #,, home fa-4x %}{% btn #,, home fa-4x %}</div>
<div>{% btn #,, home fa-3x %}{% btn #,, home fa-3x %}{% btn #,, home fa-3x %}</div>
<div>{% btn #,, home fa-2x %}{% btn #,, home fa-2x %}{% btn #,, home fa-2x %}</div>
<div>{% btn #,, home fa-lg %}{% btn #,, home fa-lg %}{% btn #,, home fa-lg %}</div>
<div>{% btn #,, home %}{% btn #,, home %}{% btn #,, home %}</div>


1
2
<p>{% btn #, Text & Icon (buggy), home %}
{% btn #, Text & Icon (fixed width), home fa-fw %}</p>

Text & Icon (buggy) Text & Icon (fixed width)


1
2
3
<div class="text-center"><div>{% btn #,, header %}{% btn #,, edge %}{% btn #,, times %}{% btn #,, circle-o %}</div>
<div>{% btn #,, italic %}{% btn #,, scribd %}</div>
<div>{% btn #,, google %}{% btn #,, chrome %}{% btn #,, opera %}{% btn #,, diamond fa-rotate-270 %}</div></div>


1
<div class="text-center">{% btn #, Previous Chapter, arrow-left fa-fw fa-lg, Previous Chapter (Full Image) %} {% btn #, Next Chapter, arrow-right fa-fw fa-lg, Next Chapter (Label) %}</div>

Previous Chapter Next Chapter

後方是font awesome的class id 。

Group Pictures

使用方法：

1
2
3
4
5
6
{% grouppicture [group]-[layout] %}{% endgrouppicture %}
#或者
{% gp [group]-[layout] %}{% endgp %}

#[group]  : Total number of pictures to add in the group.
#[layout] : Default picture under the group to show.
1
2
3
4
5
6
7
8
{% grouppicture 6-3 %}
  ![](/images/docs/github.png)
  ![](/images/docs/github.png)
  ![](/images/docs/github.png)
  ![](/images/docs/github.png)
  ![](/images/docs/github.png)
  ![](/images/docs/github.png)
{% endgrouppicture %}

設置RSS

NexT 中 RSS 有三個設置選項，滿足特定的使用場景。更改主題配置文件，設定 rss 字段的值：

  • 具體的鏈接地址：適用於已經燒製過 Feed 的情形。
  • false：禁用 RSS，不在頁面上顯示 RSS 連接。
  • 留空：使用 Hexo 生成的 Feed 鏈接。你需要先安裝 hexo-generator-feed 插件。

安裝方式：在BLOG根目錄Git Bash

1
npm install hexo-generator-feed --save

在站點配置文件,中加入

1
2
3
4
5
6
7
8
9
10
11
feed:
  type: atom
  path: atom.xml
  limit: 20
  hub:
  content:
  content_limit: 140
  content_limit_delim: ' '
  order_by: -date
  icon: icon.png
  autodiscovery: true

修改favicon

將favicon放到BLOG根目錄\source裡，主題配置文件找到favicon處直接改成：

1
2
3
4
5
6
favicon:
  small: favicon.ico
  medium: favicon.ico
	.
	.
	.

在線生成favicon.ico

打開搜索功能

主題配置文件找到local search處，enable處改成true。
1
2
3
4
5
6
7
8
9
10
11
12
13
# Local Search
# Dependencies: https://github.com/wzpan/hexo-generator-search
local_search:
  enable: true
  # If auto, trigger search by changing input.
  # If manual, trigger search by pressing enter key or search button.
  trigger: auto
  # Show top n results per article, show all results by setting to -1
  top_n_per_article: 1
  # Unescape html strings to the readable one.
  unescape: false
  # Preload the search data when the page loads.
  preload: true

此功能需要安裝 hexo-generator-search 和 hexo-generator-searchdb

1
2
npm i hexo-generator-search
npm install hexo-generator-searchdb --save
站點配置文件，中加入：
1
2
3
4
5
6
# Search 
search:
  path: search.xml
  field: post
  format: html
  limit: 10000

將文章標籤的# 改成圖案

主題配置文件找到tag_icon改成true即可。
1
2
# Use icon instead of the symbol # to indicate the tag at the bottom of the post
tag_icon: true

將網頁下方版權隱藏

主題配置文件找到以下，將想隱藏的版權改成false即可。
1
2
3
4
5
6
7
8
9
10
11
powered:
    # Hexo link (Powered by Hexo).
    enable: false
    # Version info of Hexo after Hexo link (vX.X.X).
    version: false

  theme:
    # Theme & scheme info link (Theme - NexT.scheme).
    enable: false
    # Version info of NexT after scheme info (vX.X.X).
    version: false

自定義樣式

自定義NOTE

將以下代碼放source/_data/styles.styl

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
//自定義NOTE
.alert {
    padding: 15px;
    margin-bottom: 20px;
    border: 1px solid transparent;
    border-radius: 4px;
}
.alert-success {
    color: #468847;
    background-color: #dff0d8;
    border-color: #d6e9c6;
}
.alert-info {
    color: #3a87ad;
    background-color: #e2eaee;
    border-color: #c5d5dd;
}
.alert-warning {
    color: #c09853;
    background-color: #fcf8e3;
    border-color: #faebcc;
}
.alert-danger {
    color: #b94a48;
    background-color: #f2dede;
    border-color: #ebccd1;
}

success
1
<div class="alert alert-success"><i class="fa fa-lightbulb-o"></i> success</div>

info
1
<div class="alert alert-info"><i class="fa fa-info"></i> info</div>

warning
1
<div class="alert alert-warning"><i class="fa fa-bell"></i> warning</div>

danger
1
<div class="alert alert-danger"><i class="fa fa-bug"></i> danger</div>

自定義文字色塊

將以下代碼放source/_data/styles.styl

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
//自定義文字色塊
span#inline-blue, span#inline-green, span#inline-purple, span#inline-yellow {
    display: inline;
    padding: .2em .6em .3em;
    font-size: 90%;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    text-align: center;
    vertical-align: baseline;
    border-radius: 0;
    white-space: nowrap;
}
span#inline-blue {
    background-color: #2780e3;
}
span#inline-purple {
    background-color: #9954bb;
}
span#inline-yellow {
    background-color: #f0ad4e;
}
span#inline-green {
    background-color: #5cb85c;
}

主題配置文件
1
<span id="inline-blue">主題配置文件</span>

主題配置文件

1
<span id="inline-purple">主題配置文件</span>

主題配置文件

1
<span id="inline-yellow">主題配置文件</span>

主題配置文件

1
<span id="inline-green">主題配置文件</span>

h1,h2,h3標題前圖示

打開.\source\_data\styles.styl加上

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
/*修改h1前面圖標*/
.posts-expand .post-body h1:before{
    top: 10px;
    width: 18px;
    height: 18px;
    content: "🌈";
    font-size: 18px;
    line-height: 18px;
    margin-right: 16px;
    
}

/*修改h2前面圖標*/
.posts-expand .post-body h2:before{
    top: 10px;
    width: 18px;
    height: 18px;
    content: "🌞";
    font: normal normal normal 14px/1 FontAwesome;
    font-size: 18px;
    line-height: 18px;
    margin-right: 16px
}

/*修改h3前面圖標*/
.posts-expand .post-body h3:before{
    top: 10px;
    width: 18px;
    height: 18px;
    content: "🔍";
    font: normal normal normal 14px/1 FontAwesome;
    font-size: 18px;
    line-height: 18px;
    margin-right: 16px;
}

請到 https://fontawesome.com/ 尋找喜歡的圖示替換。

側欄加上近期文章

效果見本站

打開.\themes\next\layout\_partials\sidebar\site-overview.swig找到：

1
{%- if theme.links %}

在上方加上以下代碼：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
{% if theme.recent_posts %}
<div class="links-of-blogroll motion-element {{ "links-of-blogroll-" + theme.recent_posts_layout  }}">
<div class="links-of-blogroll-title">
    <!-- 設定你要的fa fa icon-->
    <i class="fa fa-history fa-{{ theme.recent_posts_icon | lower }}" aria-hidden="true"></i>
    {{ theme.recent_posts_title }}
</div>
<ul class="links-of-blogroll-list">
    {% set posts = site.posts.sort('-date') %}
    {% for post in posts.slice('0', '5') %}
    <li>
        <a href="{{ url_for(post.path) }}" title="{{ post.title }}" target="_blank">{{ post.title }}</a>
    </li>
    {% endfor %}
</ul>
</div>
{% endif %}

然後打開站點配置文件,加上：

1
2
3
recent_posts_title: 近期文章
recent_posts_layout: block
recent_posts: true

自訂無序列表的圖示

效果

打開.\source\_data\styles.styl加上

1
2
3
4
5
//list

ul {
  list-style-image:url("圖片網址"); 
}

在 CSS 中常見的清單 (list) 屬性有以下幾種：

  • list-style-type
  1. none (沒有)
  2. disc (全黑圓圈)
  3. circle (空心圓圈)
  4. square (正方形)
1
2
3
4
<ul style='list-style-type:square;'> 
  <li>正方形項目 1</li> 
  <li>正方形項目 2</li> 
</ul>
  1. upper-latin (大寫拉丁文)
  2. lower-latin (小寫拉丁文)
  3. upper-roman (大寫羅馬文)
1
2
3
4
<ul style='list-style-type:upper-roman;'> 
  <li>項目 1</li> 
  <li>項目 2</li> 
</ul>
  1. lower-roman (小寫羅馬文)
  2. upper-alpha (大寫希臘文 )
  3. lower-alpha (小寫希臘文 )
  • list-style-image
1
list-style-image:url([image_url]);
  • list-style-position
    設定值為 “inside” 及 “outside”。預定值為 “outside”。
1
2
3
4
<ul style='list-style-position:inside;'> 
  <li>第一個項目<br>第一項目的第二行 
  <li>第二個項目 
</ul>
  • 第一個項目
    第一項目的第二行
  • 第二個項目
1
2
3
4
<ul style='list-style-position:outside;'> 
  <li>第一個項目<br>第一項目的第二行 
  <li>第二個項目 
</ul>
  • 第一個項目
    第一項目的第二行
  • 第二個項目

提供一個找圖示的好方法

  1. EMOJI 找到想要的圖示
  2. 直接複製貼上到google搜索
  3. 選擇 圖片 搜索

或者emojiterra直接就有各種版本的emoji可以存取了。

  • list-style

以上提到的這三個 (list-style-style、list-style-position、及 list-style-image) 屬性可以被簡化為一個 list-style 屬性。這種做法稱為捷徑 (shortcut)。在這裡，屬性的順序並不重要。

你也可以這樣寫：

1
2
3
ul { 
  list-style: url("circle.gif") none inside; 
}

來源：CSS語法教學

鼠標樣式

將鼠標.cur檔放在blog\source\images裡，然後打開.\source\_data\styles.styl加上

1
2
3
4
5
6
7
/* 鼠標樣式 */
* {
  cursor: url(/images/default.cur),auto;
}
:link {
  cursor: url(/images/pointer.cur),auto
}

自定義文章版權聲明

打開.\themes\next\layout\_marco\post.swig

搜索

1
<footer class="post-footer">

上方找到

1
2
3
{%- if theme.creative_commons.license and theme.creative_commons.post %}
    {% include '../_partials/post/post-copyright.swig' with { post: post } %}
{%- endif %}

刪除整段並加上：

1
2
3
4
5
<div>
  {% if not is_index %}
  {% include 'passage-end-tag.swig' %}
  {% endif %}
</div>

打開.\themes\next\layout\_marco\新建檔案passage-end-tag.swig加入：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
{% if theme.passage_end_tag.enabled %}
<div style="text-align:center;color: #ccc;font-size:14px;">
------------ 本文結束 ------------</div>
<br/>
<div style="border-left: 4px solid orange;background-color:#f9f9f9;">
<div style="margin-left:15px;padding:15px;">
<font size="4" color="red"><b>【版權聲明】</b></font>
<div class="post-copyright-link">
    {{ __('post.copyright.link') + __('symbol.colon') }}
    {%- set postURL = post.url or post.permalink %}
    {{ next_url(postURL, postURL, {title: post.title}) }}
</div>
本文為博主(<a href="https://zenreal.github.io">ZEN</a>)原創文章，遵循<a href="https://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY-NC-SA 4.0</a> 版權協議，轉載請附上原文出處鏈接和本聲明。
</div>
</div>
{% endif %}

P.S.若是不需要文章結束提示文字，請把那段div刪除。

側欄圓角化

效果

打開.\themes\next\source\css\_variables\Pisces.styl

找到$border-radius-inner與$border-radius 照下方格式修改：

1
2
$border-radius-inner              = 0 0 16px 16px;
$border-radius                    = 16px;

打開.\themes\next\source\css\_schemes\Pisces\_layout.styl

在最下方加入

1
2
3
.sidebar {
  background-color: transparent;
}

鏈接顏色更改

打開.\source\_data\styles.styl加上

1
2
3
4
5
6
7
8
9
10
11
// 文章内鏈接文本樣式
.post-body p a{
  color: #0593d3;
  border-bottom: none;
  border-bottom: 1px solid #0593d3;
  &:hover {
    color: #fc6423;
    border-bottom: none;
    border-bottom: 1px solid #fc6423;
  }
}

第一個color指的是鏈接顯示的顏色，第二個color是移上去顯示的顏色。

BLOG加上背景圖片

將背景圖片放在 BLOG根目錄\source\images

打開.\source\_data\styles.styl加上

1
2
3
4
5
6
7
8
9
10
11
12
13
14
@media screen and (min-width:1200px) {

    body {  
    background-image:url(/images/5be1579bc7da3.jpg); //這邊修改成你的背景圖片 
    background-repeat: no-repeat;
    background-attachment:fixed;
    background-position:50% 50%;
   
   }

    #footer a {
        color:#eee;
    }
}

若是對隨機背景有興趣的可以參考我的另一篇文：Hexo 搭建系列 - BLOG隨機背景切換。

BLOG背景透明化

打開.\source\_data\styles.styl加上

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
// page-opacity

.post-block { #文章區塊透明
background: rgba(255, 255, 255, 0.85);
}

.sidebar { #文章目錄&本站概要區塊透明
  opacity: 0.85;
}

.header-inner { #標題+分頁處區塊透明
  background: rgba(255,255,255,0.85);
}

.pagination { #底部換頁處透明
  background: rgba(255,255,255,0.85);
}

.popup { #搜尋透明
  opacity: 0.9;
}

.comments { #評論區透明
  opacity: 0.85;
}

若是使用上方代碼使得note也變得透明，可以在.\source\_data\styles.styl加上

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
//自定義note樣式
.post-body .note {
  position: relative;
  padding: 15px;
  margin-bottom: 20px;
  border: initial;
  border-left: 3px solid #eee;
  background-color: #f9f9f9;
  border-radius: 10px;
}
.post-body .note h2,
.post-body .note h3,
.post-body .note h4,
.post-body .note h5,
.post-body .note h6 {
  margin-top: 0;
  margin-bottom: 0;
  border-bottom: initial;
  padding-top: 0 !important;
}
.post-body .note p:first-child,
.post-body .note ul:first-child,
.post-body .note ol:first-child,
.post-body .note table:first-child,
.post-body .note pre:first-child,
.post-body .note blockquote:first-child {
  margin-top: 0;
}
.post-body .note p:last-child,
.post-body .note ul:last-child,
.post-body .note ol:last-child,
.post-body .note table:last-child,
.post-body .note pre:last-child,
.post-body .note blockquote:last-child {
  margin-bottom: 0;
}
.post-body .note.default {
  background-color: #f7f7f7;
  border-left-color: #777;
}
.post-body .note.default h2,
.post-body .note.default h3,
.post-body .note.default h4,
.post-body .note.default h5,
.post-body .note.default h6 {
  color: #777;
}
.post-body .note.primary {
  background-color: #f5f0fa;
  border-left-color: #6f42c1;
}
.post-body .note.primary h2,
.post-body .note.primary h3,
.post-body .note.primary h4,
.post-body .note.primary h5,
.post-body .note.primary h6 {
  color: #6f42c1;
}
.post-body .note.info {
  background-color: #eef7fa;
  border-left-color: #428bca;
}
.post-body .note.info h2,
.post-body .note.info h3,
.post-body .note.info h4,
.post-body .note.info h5,
.post-body .note.info h6 {
  color: #428bca;
}
.post-body .note.success {
  background-color: #eff8f0;
  border-left-color: #5cb85c;
}
.post-body .note.success h2,
.post-body .note.success h3,
.post-body .note.success h4,
.post-body .note.success h5,
.post-body .note.success h6 {
  color: #5cb85c;
}
.post-body .note.warning {
  background-color: #fdf8ea;
  border-left-color: #f0ad4e;
}
.post-body .note.warning h2,
.post-body .note.warning h3,
.post-body .note.warning h4,
.post-body .note.warning h5,
.post-body .note.warning h6 {
  color: #f0ad4e;
}
.post-body .note.danger {
  background-color: #fcf1f2;
  border-left-color: #d9534f;
}
.post-body .note.danger h2,
.post-body .note.danger h3,
.post-body .note.danger h4,
.post-body .note.danger h5,
.post-body .note.danger h6 {
  color: #d9534f;
}

修改BLOG標題及頁腳顏色

打開.\source\_data\styles.styl選擇性加上自己要修改的部分代碼。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
//改掉題頭顏色
.site-meta {
  background: #F0D784; //修改為自己喜歡的顏色
}
//主標題顏色
.brand{
  color: #2f9833
  }
//副標題顏色
.site-subtitle{
  color: #47b54a
}
//頁腳統計文字顏色
.footer{
  color: #F0D784
}
//修改頁腳備案鏈接顏色
.footer a{
  color: #F0D784
}
//修改頁腳統計人數的顏色
.footer .with-love{
  color: #F0D784
}

MAC PANEL風格code

兩種風格，一種normal一種night eighties。

(1)night eighties

效果

1
2
TEST
MAC PANEL CODE

打開.\source\_data\styles.styl加上

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
// mac panel

.highlight-wrap[data-rel] {
  position: relative;
  overflow: hidden;
  border-radius: 5px;
  box-shadow: 0 10px 30px 0px rgba(0, 0, 0, 0.4);
  margin: 35px 0;
  ::-webkit-scrollbar {
    height: 10px;
  }
  ::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    border-radius: 10px;
  }

  ::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
  }
  &::before {
    color: white;
    content: attr(data-rel);
    height: 38px;
    line-height: 38px;
    background: #21252b;
    color: #fff;
    font-size: 16px;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    font-family: 'Source Sans Pro', sans-serif;
    font-weight: bold;
    padding: 0px 80px;
    text-indent: 15px;
    float: left;
  }
  &::after {
    content: ' ';
    position: absolute;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    background: #fc625d;
    width: 12px;
    height: 12px;
    top: 0;
    left: 20px;
    margin-top: 13px;
    -webkit-box-shadow: 20px 0px #fdbc40, 40px 0px #35cd4b;
    box-shadow: 20px 0px #fdbc40, 40px 0px #35cd4b;
    z-index: 3;
  }
}

然後記得在主題配置文件修改highlight主題。

1
highlight_theme: night eighties

根據個人需要修改參數即可。

(2)normal

如果你想使用

1
highlight_theme: normal

打開.\source\_data\styles.styl加上

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
// mac panel

.highlight-wrap[data-rel] {
  position: relative;
  overflow: hidden;
  border-radius: 5px;
  //box-shadow: 0 10px 30px 0px rgba(0, 0, 0, 0.4);
  box-shadow:18px 18px 15px 0px rgba(0,0,0,.4)
  margin: 35px 0;
  ::-webkit-scrollbar {
    height: 10px;
  }

  ::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    border-radius: 10px;
  }

  ::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
  }
  &::before {
    color: white;
    content: attr(data-rel);
    height: 30px;
    line-height: 38px;
    //background: #21252b;
    background: #108414de;
    color: #fff;
    font-size: 16px;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    //font-family: 'Source Sans Pro', sans-serif;
    font-weight: bold;
    padding: 0px 80px;
    text-indent: 15px;
    float: left;
  }
  &::after {
    content: ' ';
    position: absolute;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    background: #fc625d;
    width: 12px;
    height: 12px;
    top: 0;
    left: 20px;
    margin-top: 13px;
    -webkit-box-shadow: 20px 0px #fdbc40, 40px 0px #35cd4b;
    box-shadow: 20px 0px #fdbc40, 40px 0px #35cd4b;
    z-index: 3;
  }
}

若是你有開啟code copy功能(default風格)，可能會造成樣式跑掉，

你可以打開.\themes\next\source\css\_common\scaffolding\highlight\copy-code.styl

找到

1
2
3
4
5
6
7
8
9
else {
    background-color: $gainsboro;
    background-image: linear-gradient(#fcfcfc, $gainsboro);
    border: 1px solid #d5d5d5;
    border-radius: 3px;
    font-size: $font-size-smaller;
    right: 4px;
    top: 8px;
  }

將top改為-31px;。

文章區塊寬度

在 themes\next\source\css\_schemes\Pisces\_layout.styl 最下方加上

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
header{ width: 80% !important; }
header.post-header {
  width: auto !important;
}
.container .main-inner { width: 80%; }
.content-wrap { width: calc(100% - 260px); }

.header {
  +tablet() {
    width: auto !important;
  }
  +mobile() {
    width: auto !important;
  }
}

.container .main-inner {
  +tablet() {
    width: auto !important;
  }
  +mobile() {
    width: auto !important;
  }
}

.content-wrap {
  +tablet() {
    width: 100% !important;
  }
  +mobile() {
    width: 100% !important;
  }
}

自行修改參數

標題科技風特效

效果見本站。

打開.\source\_data\styles.styl加上

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
//標題特效

.site-title:hover, .post-title:hover {
    animation: shake-it .5s reverse infinite cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

@keyframes shake-it {
    0% {
        text-shadow: 0 0 rgba(0, 255, 255, .5), 0 0 rgba(255, 0, 0, .5);
    }
    25% {
        text-shadow: -2px 0 rgba(0, 255, 255, .5), 2px 0 rgba(255, 0, 0, .5);
    }
    50% {
        text-shadow: -5px 0 rgba(0, 255, 255, .5), 3px 0 rgba(255, 0, 0, .5);
    }
    100% {
        text-shadow: 3px 0 rgba(0, 255, 255, .5), 5px 0 rgba(255, 0, 0, .5);
    }
}

BLOG加入每日一句

是使用這篇文章的方法为您的Hexo博客添加Hitokoto一言功能，文章內有很多詳細的代碼解釋。

根據放置位置的不同需要修改的檔案也不同：

選擇一、文章目錄+本站概要下方

在 .\themes\next\layout\_custom\sidebar.swig 適當位置加入下方代碼

選擇二、本站概要下方

在 themes\hexo-theme-next-7.4.1\layout\_partials\sidebar\site-overview.swig 適當位置加入下方代碼

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!-- hitokoto -->

<div class="hitokoto-title">
  <i class="fa fa-quote-right"></i>
  <b>一言</b>
</div>

<div id="hitokoto">:D 獲取中...</div>
<i id="hitofrom">:D 獲取中...</i>

<script src="https://cdn.jsdelivr.net/npm/bluebird@3/js/browser/bluebird.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/whatwg-fetch@2.0.3/fetch.min.js"></script>
<script>
  fetch('https://v1.hitokoto.cn')
    .then(function (res){
      return res.json();
    })
    .then(function (data) {
      var hitokoto = document.getElementById('hitokoto');
      hitokoto.innerText = '\xa0\xa0\xa0\xa0\xa0\xa0\xa0' + data.hitokoto;
      var hitofrom = document.getElementById('hitofrom');
      hitofrom.innerText = "——" + data.from + '\xa0'; 
    })
    .catch(function (err) {
      console.error(err);
    })
</script>

然後打開.\source\_data\styles.styl加上

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
//hitokoto

.hitokoto-title {
  text-align: center;
  font-size: 12px;
}

#hitokoto {
  font-family: "Microsoft YaHei";
  font-size: 11px;
}

#hitofrom {
  float: right;
  font-family: "Microsoft YaHei";
  font-size: 10px;
}

自定義短code樣式

效果 這個就是效果~

在.\source\_data\styles.styl加上：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// Custom styles.
code {
    color: #c7254e; //文字顏色
    background: #f9f2f4; //底色
    margin: 2px;
}
// 邊框的自定義樣式
.highlight, pre {
    margin: 5px 0;
    padding: 5px;
    border-radius: 3px;
}
.highlight, code, pre {
    border: 1px solid #d6d6d6;
}

去掉圖片邊框

在.\source\_data\styles.styl加上：

1
2
3
4
/*去掉圖片邊框*/
.posts-expand .post-body img{
    border: 0px;
}

修改選中文字底色

請自行在本站選取文字查看效果。

在.\source\_data\styles.styl加上：

1
2
3
4
5
6
7
8
9
10
11
// 修改選中文字底色
/* webkit, opera, IE9 */
::selection { 
    background: #00c4b6;
    color: #f7f7f7; 
}
/* firefox */
::-moz-selection { 
    background: #00c4b6;
    color: #f7f7f7;    
}

插入音樂與影片

1
{% video url %}

Examples:

1
2
{% video https://example.com/sample.mp4 %}
{% video /path/to/your/video.mp4 %}

其他請參考Hexo 搭建系列 - 插入音樂與影片

Disqus回覆

請參考Hexo 搭建系列 - 為HEXO安裝Disqus評論功能

Gitalk回覆

請參考Hexo 搭建系列 - 為HEXO NexT主題安裝Gitalk評論功能

注腳

安裝hexo-footnotes插件

1
npm install hexo-footnotes --save

請參考hexo-footnotes

點頭像回到首頁

打開 .\themes\next\layout\_partials\sidebar\site-overview.swig

找到

1
{%- if theme.avatar.url %}

下方加上

1
<a href="/">

完整程式碼如下

1
2
3
4
5
6
{%- if theme.avatar.url %}
  <a href="/">
    <img class="site-author-image" itemprop="image"
      src="{{ url_for( theme.avatar.url | default(theme.images + '/avatar.gif') ) }}"
      alt="{{ author }}">
  {%- endif %}

還有很多功能我沒用到我就沒介紹…可以自行摸索。

推薦安裝的插件

下方是我在文章中都沒有提到的功能，都是很簡單的小插件，可以自行摸索。

Where are you from?

I’m from the Earth. Water Planet!

延伸閱讀

------------ 本文結束 ------------

【版權聲明】
本文鏈接： https://zenreal.github.io/posts/44730/
本文為博主(ZEN)原創文章，遵循CC BY-NC-SA 4.0 版權協議，轉載請附上原文出處鏈接和本聲明。