引用内容
2个方法,一是使用官方的blockquote
,二是直接使用 >
方法,这是markdown的写法。
1 | <blockquote>引用内容</blockquote> |
引用内容
label用法
1 | {% label default@默认 %} {% label primary@主要 %} {% label success@成功 %} {% label info@信息 %} {% label warning@警告 %} {% label danger@危险 %} |
这是显示效果:
默认 主要 成功 信息 警告 危险这其实跟代码块 `` 有相同之处。
Todo list用法
1 | <!-- 一共有两种写法,效果看下面 --> |
以下是显示效果:
这里面的图标是从 Font Awesome 上获取图标的方法。
note用法
在主题配置文件_config.yml里有一个关于这个的配置:
1 | # Note tag (bs-callout). |
开启之后,可以使用css或者swig的语法进行编写:
1 | <div class="note default"><p>default</p></div> |
以下是HTML的显示效果:
使用swig也是可以达到这个效果的:
这是一个成功的例子
使用css、swig都可以实现,可以随意选择。官方文档:https://theme-next.org/docs/tag-plugins/note
代码高亮
在站点配置文件里面开启highlight:
1 | highlight: |
在next主题配置文件里面选择主题:
1 | # Code Highlight theme |
开启代码块复制功能:
1 | codeblock: |
实测,只有在选择了scheme: Gemini
这个样式,这个代码块复制功能才是比较正常的。
Tab选项卡
在next主题配置文件里面设置如下:
1 | tabs: |
代码如下:
1 | {% tabs 分支, 2 %} #名字为选项卡,默认在第2个选项卡 |
效果如下:
这是选项卡 1 呵呵哈哈哈哈哈哈
这是选项卡 2 额。。。
这是选项卡 3 哇,你找到我了!
官方文档:https://theme-next.org/docs/tag-plugins/tabs
主题样式修改
单行代码
单行的代码块显示黑色,不明显,修改themes\next\source\css\_custom\custom.styl
,新增:
1 | // 文章``代码块的自定义样式 |
代码块
默认情况下代码块里面的内容是不会换行的,影响查看,修改themes\next\source\css\_common\components\highlight\highlight.styl
,找到.code pre
,修改如下:
1 | .code pre { |
但此方法会导致行数显示异常。
内容页太窄
默认情况下,内容页太窄了,2边有大量空白,影响阅读,在themes\next\source\css\_variables\custom.styl
增加:
1 | $content-desktop = 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 | // 文章内链接文本样式 |
流程图
next v7.1.1是直接支持流程图的,不需要安装插件了。只需要在next/_config.yaml
修改为true即可
1 | mermaid: |
以下是实际用例。
官方文档位置:https://theme-next.org/docs/tag-plugins/mermaid
流程图横向
方形使用 []
中括号表示,圆角使用 ()
小括号表示,条件判断使用 {}
大括号表示,代码如下:
1 | {% mermaid graph LR %} |
graph LR
表示横向显示,graph TD
表示竖向显示,显示的效果如下:
graph LR A[方形] -->B(圆角) B --> C{条件a} C -->|a=1| D[结果1] C -->|a=2| E[结果2]
时序图
1 | {% mermaid sequenceDiagram %} |
展示效果:
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 | {% mermaid gitGraph: %} |
实际效果:
gitGraph: options { "nodeSpacing": 150, "nodeRadius": 10 } end commit branch newbranch checkout newbranch commit commit checkout master commit commit merge newbranch
甘特图
1 | {% mermaid gantt %} |
显示效果:
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
参考链接
设置https证书:https://www.sjlei.com/p/56333/