NEXT主题配置之提高篇

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

引用内容

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%