Next 主题设置-页面修改 & 自带插件

阅读次数：

更改站名黑色背景

  1. 打开Hexo/themes/next/source/css/_schemes/Pisces/_header.styl，找到background改为background: $blue-bright;，或者使用渐变色background: linear-gradient(-225deg, #9EFBD3 0%, #57E9F2 48%, #45D4FB 100%)。
  2. 打开Hexo\themes\next\source\css\_variables\Pisces.styl，找到subtitle-color改为$subtitle-color = $whitesmoke;
  3. 在Hexo/themes/next/source/css/_variables/base.styl里可以查看颜色设置。

添加图片背景

  1. 在hexo目录下的source文件夹下新建_data文件夹，不是主题next目录下的source文件夹。文件夹里新建文件styles.styl，添加如下内容：

    1
    2
    3
    4
    5
    6
    7
    //背景图片设置
    body {
        background-image: url(/images/background.jpg); 
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-size: 100% 100%;
    }

    background-image:url 可以直接使用图片链接，也可以是图片路径（将自定义图片放入next\source\images）
    background-repeat：若果背景图片不能全屏，那么是否平铺显示，充满屏幕
    background-attachment：背景是否随着网页上下滚动而滚动，fixed 为固定
    background-size：图片展示大小，设置 100%，100% 的意义为：如果背景图片不能全屏，那么是否通过拉伸的方式将背景强制拉伸至全屏显示

  2. 打开主题配置文件，找到custom_file_path:，修改如下：

    1
    2
    custom_file_path:
      style: source/_data/styles.styl

页面透明化

为了更好欣赏背景图片，可将博客页面透明化，在source/_data/styles.styl里添加如下内容：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// 文章透明度设置
.post-block {
  opacity: 0.9;
}
// 侧边框的透明度设置
.sidebar {
  background-color: transparent;
  opacity: 0.9;
}
// 菜单栏的透明度设置
.header-inner {
  background: rgba(255,255,255,0.9);
}
// 搜索框（local-search）的透明度设置
.popup {
  opacity: 0.9;
}

边框圆角

  1. 在hexo目录下的source文件夹下新建_data文件夹，文件夹中新建文件variables.styl，添加如下内容：
    1
    2
    3
    // 圆角设置
    $border-radius-inner     = 20px 20px 20px 20px;
    $border-radius           = 20px;
  2. 打开主题配置文件，找到custom_file_path:，修改如下：
    1
    2
    custom_file_path:
      variable: source/_data/variables.styl

图标颜色

  1. 在hexo目录下的source文件夹下新建_data文件夹，不是主题next目录下的source文件夹。文件夹里新建文件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

    // 图标颜色大小
    .fa{
      font-size: 14px;
    }
    // 菜单栏
    .fa-home{
      color: #e74c3c;
      font-size: 15px;
    }
    .fa-archive{
      color: #00BFFF;
    }
    .fa-tags{
      color: orange;
    }
    .fa-chalkboard{
      color: #3498db;
    }
    .fa-link{
      color: #FC427B;
    }
    .fa-user{
      color: #9b59b6;
    }
    .fa-camera{
      color: #1abc9c;
    }
    .fa-envelope{
      color: #66CDAA;
    }
    .fa-zhihu{
      color: #00BFFF;
    }
    .fa-weibo{
      color: red;
    }
    .fa-github{
      color: #7CFC00;
    }
    .fa-youtube{
      color: red;
    }
    .fa-skype{
      color: #00BFFF;
    }

    // 文章
    .fa-calendar-check{
      color: red;
    }
    .fa-tag{
      color: orange;
    }
    .fa-eye{
      color: #70a1ff;
    }
    .fa-comment{
      color: #2ed573;
    }
    .fa-comments{
      color: #2ed573;
    }
    .fa-file-word{
      color: #273c75;
    }
    .fa-clock{
      color: #ff5252;
    }
    .fa-image{
      color: #FC427B;
    }
    .fa-sun{
      color: orange;
    }
    .fa-bookmark{
      color: #00FFFF;
    }
    .fa-book{
      color: #1abc9c;
    }
    .fa-images{
      color: #FF00FF;
    }
    .fa-windows{
      color: #e74c3c;
    }
    .fa-chrome{
      color: orange;
    }
    .fa-desktop{
      color: #3498db;
    }
    .fa-tools{
      color: #00FFFF;
    }
    .fa-python{
      color: #3498db;
    }

Next自带插件功能

1. Note

[class] [no-icon] [summary]

Any content (support inline tags too).

[class] : Optional parameter. Supported values: default | primary | success | info | warning | danger.
[no-icon] : Optional parameter. Disable icon in note.
[summary] : Optional parameter. Optional summary of the note.

(without define class style)

Default Header

Welcome to Hexo!

Primary Header

Welcome to Hexo!

Info Header

Welcome to Hexo!

Success Header

Welcome to Hexo!

Warning Header

Welcome to Hexo!

Danger Header

Welcome to Hexo!

不显示符号no-icon：

No icon note

Note without icon: note info no-icon

点击后显示全部内容：

This is a summary

Details and summary

Note with summary: note primary This is a summary

不显示符号no-icon、点击后显示全部内容：

This is a summary

Details and summary (No icon)

Note with summary: note info no-icon This is a summary

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
{% note [class] [no-icon] [summary] %}
Any content (support inline tags too).
{% endnote %}
[class] : Optional parameter. Supported values: default | primary | success | info | warning | danger.
[no-icon] : Optional parameter. Disable icon in note.
[summary] : Optional parameter. Optional summary of the note.

{% note %}
## Header
(without define class style)
{% endnote %}

{% note default %}
#### Default Header
Welcome to [Hexo!](https://hexo.io)
{% endnote %}

{% note primary %}
#### Primary Header
**Welcome** to [Hexo!](https://hexo.io)
{% endnote %}

{% note info %}
#### Info Header
**Welcome** to [Hexo!](https://hexo.io)
{% endnote %}

{% note success %}
#### Success Header
**Welcome** to [Hexo!](https://hexo.io)
{% endnote %}

{% note warning %}
#### Warning Header
**Welcome** to [Hexo!](https://hexo.io)
{% endnote %}

{% note danger %}
#### Danger Header
**Welcome** to [Hexo!](https://hexo.io)
{% endnote %}

不显示符号no-icon：
{% note info no-icon %}
#### No icon note
Note **without** icon: `note info no-icon`
{% endnote %}

点击后显示全部内容：
{% note primary This is a summary %}
#### Details and summary
Note with summary: `note primary This is a summary`
{% endnote %}

不显示符号no-icon、点击后显示全部内容：
{% note info no-icon This is a summary %}
#### Details and summary (No icon)
Note with summary: `note info no-icon This is a summary`
{% endnote %}

2. Tabs选项卡

指向tab

Tab one. Tab one 1. Tab one 2. Tab one 3.

This is Tab 1.

This is Tab 2.

This is Tab 3.

综合tab

This is Tab 1.

This is Tab 3.

This is Sub Tab 1.

Lorem ipsum dolor sit amet.

Sed egestas.

Morbi interdum mollis sapien.

This is Sub Tab 2.

This is Sub Tab 3.

This is Sub-Sub Tab 1 of Sub Tab 3.

Lorem ipsum dolor sit amet.

This is Sub-Sub Tab 2 of Sub Tab 3.

This is Sub-Sub Tab 3 of Sub Tab 3.

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
[Tab one](#tab-one). [Tab one 1](#tab-one-1). [Tab one 2](#tab-one-2). [Tab one 3](#tab-one-3).

{% tabs Tab one %}
<!-- tab name1-->
**This is Tab 1.**
<!-- endtab -->

<!-- tab name2-->
**This is Tab 2.**
<!-- endtab -->

<!-- tab -->
**This is Tab 3.**
<!-- endtab -->
{% endtabs %}

#### 综合tab
{% tabs Tags , 2 %}
<!-- tab 01-->
**This is Tab 1.**
<!-- endtab -->

<!-- tab -->
**This is Tab 3.**

{% subtabs Sub Tabs %}
<!-- tab 001-->
**This is Sub Tab 1.**
{% note success %}
Lorem ipsum dolor sit amet.

{% note warning %}
Sed egestas.
{% endnote %}

Morbi interdum mollis sapien. 
{% endnote %}
<!-- endtab -->

<!-- tab 002-->
**This is Sub Tab 2.**
<!-- endtab -->

<!-- tab 03-->
**This is Sub Tab 3.**

{% subtabs Sub-Sub Tabs %}
<!-- tab 003-->
**This is Sub-Sub Tab 1 of Sub Tab 3.**
{% note success %}
Lorem ipsum dolor sit amet.
{% endnote %}
<!-- endtab -->

<!-- tab -->
**This is Sub-Sub Tab 2 of Sub Tab 3.**
<!-- endtab -->

<!-- tab -->
**This is Sub-Sub Tab 3 of Sub Tab 3.**
<!-- endtab -->
{% endsubtabs %}
<!-- endtab -->
{% endsubtabs %}
<!-- endtab -->
{% endtabs %}