2018-09-27
hexo
00
请注意,本文编写于 1974 天前,最后修改于 1962 天前,其中某些信息可能已经过时。

目录

1. 选项卡
2. 文字居中
3. 小色块
4. 左侧色条
5. 右侧色条
6. 上方色条
7. next自带的一些样式
8. 数字色块
9. 其他背景色
10. 对齐
11. 其他样式

1. 选项卡

没错就是next官网中看到的选项卡。 {% tabs 选项卡, 1 %} #step,为选项卡的名称,可以自定义,数字表示从第一个选项卡开始。

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

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

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

{% endtabs %}

{% 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. 文字居中

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

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

3. 小色块

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

<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 代码如下:

//颜色块-黄 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. 左侧色条

调用方法:

<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#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. 右侧色条

调用方法:

<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#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. 上方色条

调用方法:

<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#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主题的配置文件中开启:

# 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.橘色色块

调用方法:

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

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

// 自定义的数字块红色 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>我是居中
我是居中
  1. 左对齐: <%p align="left">我是左对齐

我是左对齐

  1. 右对齐: <%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%
  • 下载两倍大

源码:

下载样式: <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> 下载两倍大

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

本文作者:mykernel

本文链接:

版权声明:本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!