Hexo插件及Next内置样式集
Hexo与Next插件集、自定义样式以及插入视频音乐等
让文章写的好看又简洁又好用的插件！hexo完整的标签列表，next插件列表
hexo插件
hexo-lazyload-image
npm install hexo-lazyload-image --saveFirst add configuration in _config.yml from your hexo project.
lazyload:
enable: true
onlypost: false
loadingImg: # eg ./images/loading.gifhexo-pdf
pdf传送门
宅音乐侧栏播放器插件
体验
目前在next中可能引起部分css冲突，建议在next中使用在单个页面中。 依赖于jQuery，一行js可以引入播放器插件。
video
Usage
{% video url %}Examples
{% video https://example.com/sample.mp4 %}
{% video /path/to/your/video.mp4 %}tab选项卡
“tab”为选项卡的名称，可以自定义，数字是几表示从第几个选项卡开始。非必须，若数值为-1则隐藏选项卡内容。 查看更多
{% tabs Unique name, [index] %}
<!-- tab [Tab caption] [@icon] -->
Any content (support inline tags too).
<!-- endtab -->
{% endtabs %}
Unique name : Unique name of tabs block tag without comma.
Will be used in #id's as prefix for each tab with their index numbers.
If there are whitespaces in name, for generate #id all whitespaces will replaced by dashes.
Only for current url of post/page must be unique!
[index] : Index number of active tab.
If not specified, first tab (1) will be selected.
If index is -1, no tab will be selected. It's will be something like spoiler.
Optional parameter.
[Tab caption] : Caption of current tab.
If not caption specified, unique name with tab index suffix will be used as caption of tab.
If not caption specified, but specified icon, caption will empty.
Optional parameter.
[@icon] : FontAwesome icon name (without 'fa-' at the begining).
Can be specified with or without space; e.g. 'Tab caption @icon' similar to 'Tab caption@icon'.
Optional parameter.{% tabs tab,2 %}
<!-- tab -->
this is tab1
<!-- endtab -->
<!-- tab -->
this is tab2
<!-- endtab -->
<!-- tab -->
this is tab3
<!-- endtab -->
{% endtabs %}this is tab1
this is tab2
this is tab3
数值为-1
选项1
选项2
选项3
名字写在选项里面
{% tabs Fourth unique name %}
<!-- tab Solution 1 -->
**This is Tab 1.**
<!-- endtab -->
<!-- tab Solution 2 -->
**This is Tab 2.**
<!-- endtab -->
<!-- tab Solution 3 -->
**This is Tab 3.**
<!-- endtab -->
{% endtabs %}This is Tab 1.
This is Tab 2.
This is Tab 3.
note便签
主题配置文件搜索note,可设置风格和图标是否显示。
# Note tag (bs-callout).
note:
# Note tag style values:
# - simple bs-callout old alert style. Default.
# - modern bs-callout new (v2-v3) alert style.
# - flat flat callout style with background, like on Mozilla or StackOverflow.
# - disabled disable all CSS styles import of note tag.
style: flat
icons: true
border_radius: 15
# Offset lighter of background in % for modern and flat styles (modern: -12 | 12; flat: -18 | 6).
# Offset also applied to label tag variables. This option can work with disabled note tag.
light_bg_offset: 0写法
{% note default %}
#### default
是类型还有以下几种
{% endnote %}default
类型还有以下几种
primary
内容
success
内容
info
内容
warning
内容
danger
内容
不填
内容
danger no-icon
内容
引用(文本居中)
{% cq %}
**there are test words**
{% endcq %}there are test words
Font Awesome图标
Font Awesome 是一套绝佳的图标字体库和CSS框架。 Font Awesome 字体为您提供可缩放矢量图标,它可以被定制大小、颜色、阴影以及任何可以用CSS的样式。 要使用Font Awesome图标，请在HTML页面的 部分中添加以下行：
1、国内推荐 CDN
<link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">2、海外推荐 CDN
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">next已经引用了，可以直接用，比如：
Ps: 最新版已经使用新的写法，请升级~
<i class="fa fa-car"></i>
<i class="fa fa-car" style="font-size:48px;"></i>
<i class="fa fa-car" style="font-size:60px;color:red;"></i>
<i class="fa fa-car fa-lg"></i>
<i class="fa fa-car fa-2x"></i>
<i class="fa fa-car fa-3x"></i>
<i class="fa fa-car fa-4x"></i>
<i class="fa fa-car fa-5x"></i>动态图标
<i class="fa fa-spinner fa-spin"></i>
<i class="fa fa-cog fa-spin"></i>
<i class="fa fa-spinner fa-pulse"></i>代码块等
代码块
[language] [title] [url] [link text]
code snippet
- printf("Hello World!");
+ printf("Hello_World!");iframe
在文章中插入 iframe。
{% iframe url [width] [height] %}Todo list
- 已完成
- 未完成
<ul>
<li><i class="fa fa-check-square"></i> 已完成</li>
<li><i class="fa fa-square"></i> 未完成</li>
</ul>
<!--或者-->
- <i class="fa fa-check-square"></i> 已完成
- <i class="fa fa-square"></i> 未完成Label
主题配置文件中打开
# Label tag.
label: true@前面的是label的名字，后面的是要显示的文字
defaultprimarysuccessinfowarningdanger
{% label default@default %}
primary success info warning danger其他
包括小色块、左侧色条、右侧色条、上方色条、数字色块（需要自定义样式）
<a id="download">下载色块</a>
<span id="inline-red">颜色块-红</span>
<span id="inline-yellow">颜色块-黄</span>
<span id="inline-green">颜色块-绿</span>
<span id="inline-blue">颜色块-蓝</span>
<span id="inline-purple">颜色块-紫</span>
<p id="div-border-left-red">左侧边框红色块级</p>
<p id="div-border-left-yellow">左侧边框黄色块级</p>
<p id="div-border-left-green">左侧边框绿色块级</p>
<p id="div-border-left-blue">左侧边框蓝色块级</p>
<p id="div-border-left-purple">左侧边框紫色块级</p>
<p id="div-border-right-red">右侧边框红色块级</p>
<p id="div-border-right-yellow">右侧边框黄色块级</p>
<p id="div-border-right-green">右侧边框绿色块级</p>
<p id="div-border-right-blue">右侧边框蓝色块级</p>
<p id="div-border-right-purple">右侧边框紫色块级</p>
<p id="div-border-top-red">上侧边框红色块级</p>
<p id="div-border-top-yellow">上侧边框黄色块级</p>
<p id="div-border-top-green">上侧边框绿色块级</p>
<p id="div-border-top-blue">上侧边框蓝色块级</p>
<p id="div-border-top-purple">上侧边框紫色块级</p>
<p id="div-border-bottom-red">下侧边框红色块级</p>
<p id="div-border-bottom-yellow">下侧边框黄色块级</p>
<p id="div-border-bottom-green">下侧边框绿色块级</p>
<p id="div-border-bottom-blue">下侧边框蓝色块级</p>
<p id="div-border-bottom-purple">下侧边框紫色块级</p>
<span id="inline-toc">自定义形状色块</span>预览
下载色块 颜色块-红 颜色块-黄 颜色块-绿 颜色块-蓝 颜色块-紫
左侧边框红色块级
左侧边框黄色块级
左侧边框绿色块级
左侧边框蓝色块级
左侧边框紫色块级
右侧边框红色块级
右侧边框黄色块级
右侧边框绿色块级
右侧边框蓝色块级
右侧边框紫色块级
上侧边框红色块级
上侧边框黄色块级
上侧边框绿色块级
上侧边框蓝色块级
上侧边框紫色块级
下侧边框红色块级
下侧边框黄色块级
下侧边框绿色块级
下侧边框蓝色块级
下侧边框紫色块级
自定义形状色块
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2019-06-17，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
相关产品与服务
内容分发网络 CDN
内容分发网络（Content Delivery Network，CDN）通过将站点内容发布至遍布全球的海量加速节点，使其用户可就近获取所需内容，避免因网络拥堵、跨运营商、跨地域、跨境等因素带来的网络不稳定、访问延迟高等问题，有效提升下载速度、降低响应时间，提供流畅的用户体验。