hexo支持的样式(持续更新ing.....)

1. 选项卡

没错就是next官网中看到的选项卡。

hexo官网,在本地或者云服务器上安装好博客程序。

找到next官方文档,找到next主题相关安装和配置。

google或者baidu找到大神们的优化教程。

1
2
3
4
5
6
7
8
9
10
11
{% tabs 选项卡, 1 %}  #step,为选项卡的名称,可以自定义,数字表示从第一个选项卡开始。非必须,若数值为-1则隐藏选项卡内容。
<!-- tab -->
去[hexo](https://hexo.io/zh-cn/index.html)官网,在本地或者云服务器上安装好博客程序。
<!-- endtab -->
<!-- tab -->
找到[next](https://theme-next.iissnan.com/)官方文档,找到next主题相关安装和配置。
<!-- endtab -->
<!-- tab -->
去[google](https://www.google.com.hk)或者[baidu](https://www.baidu.com)找到大神们的优化教程。
<!-- endtab -->
{% endtabs %}

感谢Ivan.Nginx大神。

2. 文字居中

人生乃是一面镜子,
从镜子里认识自己,
我要称之为头等大事,
也只是我们追求的目的!

1
2
3
4
5
6
{% cq %}
人生乃是一面镜子,
从镜子里认识自己,
我要称之为头等大事,
也只是我们追求的目的!
{% endcq %}

3. 小色块

黄色色块
绿色色块
蓝色色块
紫色色块
红色色块

1
2
3
4
5
<span id="inline-yellow">黄色色块</span>
<span id="inline-green">绿色色块</span>
<span id="inline-blue">蓝色色块</span>
<span id="inline-purple">紫色色块</span>
<span id="inline-red">红色色块</span>

自定义小色块
自定义文件位置:/hexo/themes/next-reloaded/source/css/_custom/custom.styl
代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
//颜色块-黄
span#inline-yellow {
display:inline;
padding:.2em .6em .3em;
font-size:80%;
font-weight:bold;
line-height:1;
color:#fff;
text-align:center;
white-space:nowrap;
vertical-align:baseline;
border-radius:0;
background-color: #f0ad4e; #色块颜色代码
}

详情页面:
https://qianling.pw/style/#TOC%E6%95%B0%E5%AD%97%E5%9D%97

4. 左侧色条

调用方法:

1
2
3
4
5
<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> #注意分行写

自定义方法同上:

1
2
3
4
5
6
7
8
9
p#div-border-left-red {
display: block;
padding: 10px;
margin: 10px 0;
border: 1px solid #ccc;
border-left-width: 5px;
border-radius: 3px;
border-left-color: #df3e3e; #色条颜色代码
}

5. 右侧色条

调用方法:

1
2
3
4
5
<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> #注意分行写

自定义方法同上,自定义代码:

1
2
3
4
5
6
7
8
9
p#div-border-right-purple {
display: block;
padding: 10px;
margin: 10px 0;
border: 1px solid #ccc;
border-right-width: 5px;
border-radius: 3px;
border-right-color: #9954bb; #色条颜色代码
}

6. 上方色条

调用方法:

1
2
3
4
5
<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> #注意分行写

自定义方法同上,自定义代码:

1
2
3
4
5
6
7
8
9
10
// 上侧边框蓝色
p#div-border-top-blue {
display: block;
padding: 10px;
margin: 10px 0;
border: 1px solid #ccc;
border-top-width: 5px;
border-radius: 3px;
border-top-color: #2780e3; #色条颜色代码
}

7. next自带的一些样式

需要在next主题的配置文件中开启:

1
2
3
4
5
6
7
8
9
10
11
12
13
# 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: modern
icons: true
border_radius: 3
# 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

四种风格,可以自己试试。

# - 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.

note default

note primary

note success

note info

note warning

note danger

note danger no-icon

8. 数字色块

两种样式,自由发挥。

红色色块

紫色色块

1.黑色色块

2.橘色色块

调用方法:

1
2
3
4
<span id="inline-toc-red">红色色块</span>
<span id="inline-toc-purple">紫色色块</span>
<span id="inline-toc-black">1. </span>黑色色块
<span id="inline-toc-orange">1. 橘色色块</span>

自定义方法其他类型色块,自定义代码:

1
2
3
4
5
6
7
8
9
10
// 自定义的数字块红色
span#inline-toc-red {
display: inline-block;
border-radius: 80% 100% 90% 20%;
background-color: rgb(205 92 92); #百度rgb
color: #555;
padding: 0.05em 0.4em;
margin: 2px 5px 2px 0px;
line-height: 1.5;
}

9. 其他背景色

本文旨在介绍样式的使用规则。
本文旨在介绍样式的使用规则。
本文旨在介绍样式的使用规则。
本文旨在介绍样式的使用规则。

10. 对齐

  1. 居中:
    <%center>我是居中

    我是居中
  2. 左对齐:
    <%p align=”left”>我是左对齐

    我是左对齐

  3. 右对齐:
    <%p align=”right”>我是右对齐

    我是右对齐

百分号去掉实现效果。

11. 其他样式

支持Font Awesome图标。
我使用的网站:https://www.w3schools.com/icons/fontawesome_icons_webapp.asp
备用网站:http://fontawesome.dashgame.com/
下载样式
Download Now

  1. 支持 Markdown
    Hexo 支持 GitHub Flavored Markdown 的所有功能,甚至可以整合 Octopress 的大多数插件。
  2. 一件部署
    只需一条指令即可部署到 GitHub Pages,或其他网站。
  3. 丰富的插件
    Hexo 拥有强大的插件系统,安装插件可以让 Hexo 支持 Jade,CoffeeScript。
  • 下载
  • 下载变大 33%
  • 下载两倍大

源码:

1
2
3
4
5
6
7
8
9
10
11
12
13
下载样式:
<a id="download" href="https://www.baidu.com"><i class="fa fa-download"></i><span> Download Now</span></a>

1. <i class="fa fa-pencil"></i> 支持 Markdown
<i>Hexo 支持 GitHub Flavored Markdown 的所有功能,甚至可以整合 Octopress 的大多数插件。</i>
2. <i class="fa fa-cloud-upload"></i> 一件部署
<i>只需一条指令即可部署到 GitHub Pages,或其他网站。</i>
3. <i class="fa fa-cog"></i> 丰富的插件
<i>Hexo 拥有强大的插件系统,安装插件可以让 Hexo 支持 Jade,CoffeeScript。</i>

- <i class="fa fa-download"></i> 下载
- <i class="fa fa-download fa-lg"></i> 下载变大 33%
- <i class="fa fa-download fa-2x"></i> 下载两倍大

只有要想法,多多尝试就出来了。

---------------- 谢谢光临 ----------------

本文标题:hexo支持的样式(持续更新ing.....)

文章作者:pxrux

发布时间:2019年02月21日 - 17:02

最后更新:2019年02月21日 - 17:02

原始链接:http://www.mykernel.cn/my-hexo-next-1.html

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。

0%