NEXT主题配置之提高篇

引用内容

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%