NEXT主题配置之提高篇

引用内容

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

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

引用内容

引用内容

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也是可以达到这个效果的:

这是一个成功的例子



# 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 上获取图标的方法。

代码高亮

在站点配置文件里面开启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 %}
<!-- tab -->
**这是选项卡 1** 呵呵哈哈哈哈哈哈
<!-- endtab -->
<!-- tab -->
**这是选项卡 2** 额。。。
<!-- endtab -->
<!-- tab -->
**这是选项卡 3** 哇,你找到我了!
<!-- endtab -->
{% endtabs %}

效果如下:

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

这是选项卡 2 额。。。

这是选项卡 3 哇,你找到我了!

主题样式修改

单行代码

单行的代码块显示黑色,不明显,修改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>

文章内链接文本样式

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;
}
}

https://walesexcitedmei.github.io/2018/08/30/HEXO-NexT-%E4%B8%BB%E9%A2%98%E6%8F%90%E9%AB%98%E5%8D%9A%E5%AE%A2%E9%A2%9C%E5%80%BC/

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

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

0%