NEXT主题配置之提高篇

发表于 | 更新于 | 分类于 | 评论数： | 阅读次数：
本文字数： 7.8k | 阅读时长 ≈ 7 分钟

引用内容

2个方法，一是使用官方的blockquote，二是直接使用 >方法，这是markdown的写法。

1
<blockquote>引用内容</blockquote>

引用内容

label用法

1
{% label default@默认 %} {% label primary@主要 %} {% label success@成功 %} {% label info@信息 %} {% label warning@警告 %} {% label danger@危险 %}

这是显示效果：

默认 主要 成功 信息 警告 危险

这其实跟代码块 `` 有相同之处。

Todo list用法

1
2
3
4
5
6
<!-- 一共有两种写法，效果看下面 -->
<div class="note primary no-icon">
  <i class="fa fa-check-square"></i> 已完成
  <i class="fa fa-check-square"></i> 已完成
  <i class="fa fa-square"></i> 未完成
</div>

以下是显示效果：

已完成 已完成 未完成

这里面的图标是从 Font Awesome 上获取图标的方法。

note用法

在主题配置文件_config.yml里有一个关于这个的配置：

1
2
3
4
5
6
7
8
9
# Note tag (bs-callout).
note:
  # 风格
  style: flat
  # 要不要图标
  icons: true
  # 圆角矩形
  border_radius: 3
  light_bg_offset: 0

开启之后，可以使用css或者swig的语法进行编写：

1
2
3
4
5
6
7
8
9
10
<div class="note default"><p>default</p></div>
<div class="note primary"><p>primary</p></div>
<div class="note success"><p>success</p></div>
<div class="note info"><p>info</p></div>
<div class="note warning"><p>warning</p></div>
<div class="note danger"><p>danger</p></div>
<div class="note danger no-icon"><p>danger no-icon</p></div>

{% note default %}
{% endnote %}

以下是HTML的显示效果：

default

primary

success

info

warning

danger

danger no-icon

使用swig也是可以达到这个效果的：

这是一个成功的例子

使用css、swig都可以实现，可以随意选择。官方文档：https://theme-next.org/docs/tag-plugins/note

代码高亮

在站点配置文件里面开启highlight：

1
2
3
4
5
highlight:
  enable: true
  line_number: true
  auto_detect: false
  tab_replace:

在next主题配置文件里面选择主题：

1
2
3
4
# Code Highlight theme
# Available values: normal | night | night eighties | night blue | night bright
# https://github.com/chriskempson/tomorrow-theme
highlight_theme: normal

开启代码块复制功能：

1
2
3
4
5
6
7
8
codeblock:
  # Manual define the border radius in codeblock, leave it blank for the default value: 1
  border_radius:
  # Add copy button on codeblock
  copy_button:
    enable: true
    # Show text copy result
    show_result: true

实测，只有在选择了scheme: Gemini这个样式，这个代码块复制功能才是比较正常的。

Tab选项卡

在next主题配置文件里面设置如下：

1
2
3
4
5
6
tabs:
  enable: true
  transition:
    tabs: true
    labels: true
  border_radius: 3

代码如下：

1
2
3
4
5
6
7
8
9
10
11
{% tabs 分支, 2 %} #名字为选项卡，默认在第2个选项卡
<!-- tab -->
**这是选项卡 1** 呵呵哈哈哈哈哈哈
<!-- endtab -->
<!-- tab -->
**这是选项卡 2** 额。。。
<!-- endtab -->
<!-- tab -->
**这是选项卡 3** 哇，你找到我了！
<!-- endtab -->
{% endtabs %}

效果如下：

这是选项卡 1 呵呵哈哈哈哈哈哈

这是选项卡 2 额。。。

这是选项卡 3 哇，你找到我了！

官方文档：https://theme-next.org/docs/tag-plugins/tabs

主题样式修改

单行代码

单行的代码块显示黑色，不明显，修改themes\next\source\css\_custom\custom.styl，新增：

1
2
// 文章``代码块的自定义样式
#posts code {color: #c7254e;background-color:#f9f2f4;}

代码块

默认情况下代码块里面的内容是不会换行的，影响查看，修改themes\next\source\css\_common\components\highlight\highlight.styl，找到.code pre，修改如下：

1
2
3
4
5
6
7
8
 .code pre {
   width: 98%
   padding-left: 10px
   padding-right: 10px
   background-color: $highlight-background
white-space: pre-wrap  //自动换行，不显示横向滚动条
   word-wrap: break-word  //自动换行，不显示横向滚动条
 }

但此方法会导致行数显示异常。

内容页太窄

默认情况下，内容页太窄了，2边有大量空白，影响阅读，在themes\next\source\css\_variables\custom.styl增加：

1
2
3
$content-desktop         = 80%
$content-desktop-large   = 80%
$content-desktop-largest = 80%

标签图标

next 将文章底部#标签修改带为带图标的形式，修改模板 /themes/next/layout/_macro/post.swig，搜索 rel="tag">#，将 # 换成<i class="fa fa-tag"></i>

文章内链接文本样式

修改文件 themes\next\source\css\_common\components\post\post.styl，在末尾添加如下css样式：

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

流程图

next v7.1.1是直接支持流程图的，不需要安装插件了。只需要在next/_config.yaml修改为true即可

1
2
3
4
mermaid:
  enable: true
  # Available themes: default | dark | forest | neutral
  theme: forest

以下是实际用例。

官方文档位置：https://theme-next.org/docs/tag-plugins/mermaid

流程图横向

方形使用 [] 中括号表示，圆角使用 () 小括号表示，条件判断使用 {} 大括号表示，代码如下：

1
2
3
4
5
6
{% mermaid graph LR %}
A[方形] -->B(圆角)
B --> C{条件a}
C -->|a=1| D[结果1]
C -->|a=2| E[结果2]
{% endmermaid %}

graph LR 表示横向显示，graph TD 表示竖向显示，显示的效果如下：

            graph LR
            A[方形] -->B(圆角)
B --> C{条件a}
C -->|a=1| D[结果1]
C -->|a=2| E[结果2]

时序图

1
2
3
4
5
6
7
8
9
10
11
12
13
{% mermaid sequenceDiagram %}
participant Alice
participant Bob
participant John as John<br/>Second Line
Alice->>John: Hello John, how are you?
loop Healthcheck
    John->>John: Fight against hypochondria
end
Note right of John: Rational thoughts <br/>prevail...
John-->>Alice: Great!
John->>Bob: How about you?
Bob-->>John: Jolly good!
{% endmermaid %}

展示效果：

            sequenceDiagram
            participant Alice
participant Bob
participant John as John
Second Line
Alice->>John: Hello John, how are you?
loop Healthcheck
    John->>John: Fight against hypochondria
end
Note right of John: Rational thoughts 
prevail...
John-->>Alice: Great!
John->>Bob: How about you?
Bob-->>John: Jolly good!

GIT流程图

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
{% mermaid gitGraph: %}
options
{
    "nodeSpacing": 150,
    "nodeRadius": 10
}
end
commit
branch newbranch
checkout newbranch
commit
commit
checkout master
commit
commit
merge newbranch
{% endmermaid %}

实际效果：

            gitGraph:
            options
{
    "nodeSpacing": 150,
    "nodeRadius": 10
}
end
commit
branch newbranch
checkout newbranch
commit
commit
checkout master
commit
commit
merge newbranch

甘特图

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
{% mermaid gantt %}
dateFormat  YYYY-MM-DD
axisFormat  %d/%m
title Adding GANTT diagram to mermaid

section A section
Completed task            :done,    des1, 2014-01-06,2014-01-08
Active task               :active,  des2, 2014-01-09, 3d
Future task               :         des3, after des2, 5d
Future task2               :         des4, after des3, 5d

section Critical tasks
Completed task in the critical line :crit, done, 2014-01-06,24h
Implement parser and jison          :crit, done, after des1, 2d
Create tests for parser             :crit, active, 3d
Future task in critical line        :crit, 5d
Create tests for renderer           :2d
Add to mermaid                      :1d

section Documentation
Describe gantt syntax               :active, a1, after des1, 3d
Add gantt diagram to demo page      :after a1  , 20h
Add another diagram to demo page    :doc1, after a1  , 48h

section Last section
Describe gantt syntax               :after doc1, 3d
Add gantt diagram to demo page      : 20h
Add another diagram to demo page    : 48h
{% endmermaid %}

显示效果：

            gantt
            dateFormat  YYYY-MM-DD
axisFormat  %d/%m
title Adding GANTT diagram to mermaid
section A section
Completed task            :done,    des1, 2014-01-06,2014-01-08
Active task               :active,  des2, 2014-01-09, 3d
Future task               :         des3, after des2, 5d
Future task2               :         des4, after des3, 5d
section Critical tasks
Completed task in the critical line :crit, done, 2014-01-06,24h
Implement parser and jison          :crit, done, after des1, 2d
Create tests for parser             :crit, active, 3d
Future task in critical line        :crit, 5d
Create tests for renderer           :2d
Add to mermaid                      :1d
section Documentation
Describe gantt syntax               :active, a1, after des1, 3d
Add gantt diagram to demo page      :after a1  , 20h
Add another diagram to demo page    :doc1, after a1  , 48h
section Last section
Describe gantt syntax               :after doc1, 3d
Add gantt diagram to demo page      : 20h
Add another diagram to demo page    : 48h

参考链接

HEXO-NexT-主题提高博客颜值

设置https证书：https://www.sjlei.com/p/56333/

https://www.jianshu.com/p/f054333ac9e6

Hexo-NexT v7.1.1 Tag 插件的使用

打造个性超赞博客 Hexo + NexT + GitHub Pages 的超深度优化

相关文章
  • 本文作者： wumingx
  • 本文链接： https://www.wumingx.com/tools/next-confgig-up.html
  • 本文主题： NEXT主题配置之提高篇
  • 版权声明： 本博客所有文章除特别声明外，转载请注明出处！如有侵权，请联系我删除。
0%