Next自定义css样式的使用

**本文更新于2019-01-09 21：00
新增注脚的功能** 本文记录一些适用于next主题的图标引用，以及引用自带样式，添加，引用一些自定义css样式的方法。

图标的使用

next主题中的iconfont选择：Font Awesome,可在此网站中寻找图标，按照名称选择使用。

引用方法

1. 不带链接的图标引用，不可点击的图标。

效果

源码：

1	<i class="fa fa-500px" style="font-size:48px;color:red"></i>

500px–图标名称
style=”font-size: 48px;” – 设置图标大小为48px
color:red – 设置颜色为红色，也可以用16进制颜色代码控制颜色。eg：#5f5f5f

2. 带链接的图标引用可点击图标。

效果

源码

1	<a href="https://sxxkearth.github.io/"><span class="fa fa-500px fa-3x" aria-hidden="true" style="color:red"></span> </i></a>

a href=”” – 引用链接
style=”color:red” – 设置颜色为红色
fa-3x – 图标大小为3x
aria-hidden – 用于屏幕阅读器的，帮助残障人士更好的访问网站。

插入图片

直接插入：

源码

1	<img src="https://sxxkearth.github.io/img/avatar.svg">

调整位置及大小：

float:left; 设置为左侧
height:90px;width:90px;高度及宽度
margin-left:5px”与字体的距离。
>这样设置的文字是环绕在照片的，``float`` 及``margin``的``left/right`` 是相反的，照片在右边，距离左边的字。

源码

1	<img src="https://sxxkearth.github.io/img/avatar.svg" alt="earth" style="float:left;height:90px;width:90px;margin-right:5px">

插入可点击，带链接的图片

源码

1	<img src="https://sxxkearth.github.io/img/avatar.svg" style="float:left;height:90px;width:90px;margin-right:100px" onclick="javascript:location.href='https://sxxkearth.github.io/';"><br><br><br>

<br>用于换行。
onclick="javascript:location.href='什么什么'" 用于点击到链接

自定义样式的引用

引用自带的阅读全文样式

效果自测

源码：

1	{% btn https://sxxkearth.github.io/, 嗜血星空earth, 500px fa-lg fa-fw %}

引用自建的css样式：

自建的样式放在~next\source\css\_custom.styl 文件当中。

效果

嗜血星空earth

源码：<blockquote class="question">嗜血星空earth</blockquote>

CSS样式

文件路径：~next\source\css\_custom.styl

// 自定义的引用样式
blockquote.question {
    color: #555;
    border-left: 4px solid rgb(16, 152, 173);
    background-color: rgb(227, 242, 253);
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
    margin-bottom: 20px;
}

文字颜色改color的值
背景色改background-color的值
边框颜色和粗细改border-left的值

自定义数字块的样式

1	<span id="inline-toc">1.</span>

css文件

文件路径：~next\source\css\_custom.styl

// 自定义的数字块
span#inline-toc {
    display: inline-block;
    border-radius: 80% 100% 90% 20%;
    background-color: rgb(227, 242, 253);
    color: #555;
    padding: 0.05em 0.4em;
    margin: 2px 5px 2px 0px;
    line-height: 1.5;
}

主题自带的note样式标签

default

1	<div class="note default"><p>default</p></div>

primary

1	<div class="note primary"><p>primary</p></div>

success

1	<div class="note success"><p>success</p></div>

info

1	<div class="note info"><p>info</p></div>

warning

1	<div class="note warning"><p>warning</p></div>

danger

1	<div class="note danger"><p>danger</p></div>

note去掉icon的样式

取消icon在后面添加no-icon即可

danger no-icon

1	<div class="note danger no-icon"><p>danger no-icon</p></div>

让note样式与字数一致

将div 更换成post-body 开头即可,需要居中时加入<center>即可

danger no-icon

1	<post-body class="note danger no-icon">danger no-icon

我的note的css样式：

文件路径：~next\source\css\_custom.styl参考自赵俊的博客about页面

// 自定义的note写法样式
.post-body .note {
  position: relative;
  padding: 15px;
  margin-bottom: 20px;
  border: initial;
  border-left: 3px solid #eee;
  background-color: #f9f9f9;
  border-radius: 10px;
}
.post-body .note h2,
.post-body .note h3,
.post-body .note h4,
.post-body .note h5,
.post-body .note h6 {
  margin-top: 0;
  margin-bottom: 0;
  border-bottom: initial;
  padding-top: 0 !important;
}
.post-body .note p:first-child,
.post-body .note ul:first-child,
.post-body .note ol:first-child,
.post-body .note table:first-child,
.post-body .note pre:first-child,
.post-body .note blockquote:first-child {
  margin-top: 0;
}
.post-body .note p:last-child,
.post-body .note ul:last-child,
.post-body .note ol:last-child,
.post-body .note table:last-child,
.post-body .note pre:last-child,
.post-body .note blockquote:last-child {
  margin-bottom: 0;
}
.post-body .note.default {
  background-color: #f7f7f7;
  border-left-color: #777;
}
.post-body .note.default h2,
.post-body .note.default h3,
.post-body .note.default h4,
.post-body .note.default h5,
.post-body .note.default h6 {
  color: #777;
}
.post-body .note.primary {
  background-color: #f5f0fa;
  border-left-color: #6f42c1;
}
.post-body .note.primary h2,
.post-body .note.primary h3,
.post-body .note.primary h4,
.post-body .note.primary h5,
.post-body .note.primary h6 {
  color: #6f42c1;
}
.post-body .note.info {
  background-color: #eef7fa;
  border-left-color: #428bca;
}
.post-body .note.info h2,
.post-body .note.info h3,
.post-body .note.info h4,
.post-body .note.info h5,
.post-body .note.info h6 {
  color: #428bca;
}
.post-body .note.success {
  background-color: #eff8f0;
  border-left-color: #5cb85c;
}
.post-body .note.success h2,
.post-body .note.success h3,
.post-body .note.success h4,
.post-body .note.success h5,
.post-body .note.success h6 {
  color: #5cb85c;
}
.post-body .note.warning {
  background-color: #fdf8ea;
  border-left-color: #f0ad4e;
}
.post-body .note.warning h2,
.post-body .note.warning h3,
.post-body .note.warning h4,
.post-body .note.warning h5,
.post-body .note.warning h6 {
  color: #f0ad4e;
}
.post-body .note.danger {
  background-color: #fcf1f2;
  border-left-color: #d9534f;
}
.post-body .note.danger h2,
.post-body .note.danger h3,
.post-body .note.danger h4,
.post-body .note.danger h5,
.post-body .note.danger h6 {
  color: #d9534f;
}

另一种样式

danger no-icon

1	<div class="note1 warning"><p>danger no-icon</p></div>

css文件内容

文件路径：~next\source\css\_custom.styl

//另一种样式
.post-body .note1 {
    padding-top: 10px;
    padding-right: 20px;
    padding-bottom: 0px;
    padding-left: 20px;
    margin: 20px 0;
    border: 1px solid #eee;
    border-left-width: 5px;
    border-radius: 3px;
}

.post-body .note1.warning {
    border-left-color: #f0ad4e;
}

主题自带的label标签样式

打开配置主题配置文件中的label选项

文件路径：~next/_config.yml

1 2	# Label tag. label: true

效果如下：（@ 前面的是label的名字，后面的是要显示的文字）：

1	{% label default@default %}

1	{% label primary@primary %}

1	{% label success@success %}

1	{% label info@info %}

1	{% label warning@warning %}

1	{% label danger@danger %}

使用tabs标签样式

打开配置主题配置文件中的tabs选项

文件路径：~next/_config.yml

# Tabs tag.
tabs:
  enable: true
  transition:
    tabs: true
    labels: true
  border_radius: 0

效果：自测

源码

{% tabs 选项卡, 2 %}
<!-- tab -->
1
<!-- endtab -->
<!-- tab -->
2
<!-- endtab -->
<!-- tab -->
3
<!-- endtab -->
{% endtabs %}

主题自带代码块高亮

先看效果：

java语法高亮

/**
 * @author John Smith <john.smith@example.com>
*/
package l2f.gameserver.model;

public abstract class L2Char extends L2Object {
  public static final Short ERROR = 0x0001;

  public void moveTo(int x, int y, int z) {
    _ai = null;
    log("Should not be called");
    if (1 > 5) { // wtf!?
      return;
    }
  }
}

[language] 是代码语言的名称，用来设置代码块颜色高亮，非必须；
[title] 是顶部左边的说明，非必须；
[url] 是顶部右边的超链接地址，非必须；
[link text] 如它的字面意思，超链接的名称，非必须。
亲测这 4 项应该是根据空格来分隔，而不是[]，故请不要加[]。除非如果你想写后面两个，但不想写前面两个，那么就必须加[]了，要这样写：[] [] [url] [link text]。

代码块红绿底色

+为红色，-为绿色，设置为diff语言即可

/**
 * @author John Smith <john.smith@example.com>
*/
package l2f.gameserver.model;

+public abstract class L2Char extends L2Object {
-  public static final Short ERROR = 0x0001;
+
  public void moveTo(int x, int y, int z) {
    _ai = null;
    log("Should not be called");
    if (1 > 5) { // wtf!?
      return;
    }
  }
}

文本居中引用

源码

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

插入音乐

法一：

源码

<audio src="https://什么什么什么.mp3" style="max-height :100%; max-width: 100%; display: block; margin-left: auto; margin-right: auto;" controls="controls" loop="loop" preload="meta">Your browser does not support the audio tag.</audio>

法二：（使用插件：`hexo-tag-aplayer`）

安装插件

1	npm install hexo-tag-aplayer --save

源码

1	{% aplayer "歌曲名" "歌手名" "https://什么什么什么.mp3" "https://封面图.jpg" "lrc:https://歌词.lrc" %}

**使用歌单**

源码

{% aplayerlist %}
{
    "autoplay": false,
    "showlrc": 3,
    "mutex": true,
    "music": [
        {
            "title": "歌曲名",
            "author": "歌手名",
            "url": "https://什么什么什么.mp3",
            "pic": "https://封面图.jpg",
            "lrc": "https://歌词.lrc"
        },
        {
            "title": "歌曲名",
            "author": "歌手名",
            "url": "https://什么什么什么.mp3",
            "pic": "https://封面图.jpg",
            "lrc": "https://歌词.lrc"
        }
    ]
}
{% endaplayerlist %}

插入视频

法一

源码

<video poster="https://封面图.jpg" src="https://什么什么什么.mp4" style="max-height :100%; max-width: 100%; display: block; margin-left: auto; margin-right: auto;" controls="controls" loop="loop" preload="meta">Your browser does not support the video tag.</video>

法二：（使用插件hexo-tag-dplayer）

安装插件

1	npm install hexo-tag-dplayer --save

源码

1	{% dplayer "url=https://什么什么什么.mp4" "https://封面图.jpg" "api=https://api.prprpr.me/dplayer/" "id=" "loop=false" %}

要使用弹幕，必须有api和id两项，并且若使用的是官方的 api 地址（即上面的），id 的值不能与这个列表的值一样。id 的值自己随便取，唯一要求就是前面这点。

添加注脚功能

1.安装注脚插件hexo-footnotes

1	cnpm install hexo-footnotes --save

2.书写格式

[]Github地址

1 2	嗜血星空earth[ ^1] [ ^1]: 注脚例子：https://sxxkearth.github.io/

3.例子嗜血星空earth[^1]

4.添加注脚样式

文件位置：~/blog/themes/next/source/css/_custom/custom.styl

//注脚
#footnotelist {
    padding: 0 20px;
    font-size: 90%;
    text-align: left;
}

github

menu:
  News: / || info-circle
  Docs:
    default: /docs/ || book
    Getting Started: /getting-started/ || flag
    Theme Settings: /theme-settings/ || star
    Third Party Services:
      default: /third-party-services/ || plug
      Algolia Search: /algolia-search/ || adn
    Tag Plugins: /tag-plugins/ || rocket
    Advanced Settings: /advanced-settings/ || rocket
    FAQ's: /faqs/ || life-ring
    Platforms: /platforms/ || retweet

Next 配置相关文章

为Next主题配置hexo-recommended-posts 插件，在文章底部添加与文章相关的其他文章，默认推荐文章统计好像说是标签，但实际又不全是，具体不详。更多插件可在hexo插件中找到，可自行查找需要的插件并根据README.md 中的教程安装。之所以把本插件单独拿出来写是因为粗心的我一直没注意正确的配置文件路径，把配置内容放入了主题目录下的配置文件中～特在此记录，希望没人能用上吧。

插件安装

基本所有的插件都是需要安装的，安装过程也很类似，个人建议使用淘宝源安装，添加淘宝源的方法请看这里。

1	cnpm install hexo-recommended-posts --save

附上本人配置文件

这个插件默认统计的推荐文章包含使用本插件服务的其他文章，但是老是出现一些点击之后404的文章，不知道是命还是bug，强迫症的我在此选择了关闭外部文章来源,externalLinks: 0。这个配置文件中 titleHtml 是标题，可以在这里设置标题的字体等，默认为一级标题，在目录中显示奇丑，个人干脆选择了不加入目录中。

文件路径：博客根目录：～/blog/_config.ymlGithub

## 推荐文章
recommended_posts:
   internalLinks: 4
   externalLinks: 0
   titleHtml: <br><blockquote class="recommended">推荐文章

注意：本配置文件路径为：``～/blog/_config.yml`` 非主题配置文件。与之相似的主题还有``encrypt``及``live2d``等.

配置样式

样式基于主题自带的blockquote 修改。添加了border-bottom-style: inset; 弥补底部空间的不足。添加border-top-right-radius: 20px; 设置圆角。

文件路径：~/blog/themes/next/source/css/_custom/custom.styl

//推荐文章样式recommended
blockquote.recommended {
color: #555;
border-left: 4px solid #6f42c1;
background-color: #f5f0fa;
border-top-right-radius: 20px;
border-bottom-style: inset;
margin-bottom: 20px;
}

使用

每新增一篇文章都需要生成一次推荐文章列表，否则新文章就没有～

1	hexo recommend

执行完毕后，会在～/blog/source/ 中生成一个_data 的文件夹，里面包含了相关文章的全部内容，但可读性不高，类似压缩后的代码，只有一行。

更多设置内容请看插件README.md原文。

Next 配置仿知乎链接

js文件

新建js文件：~/blog/themes/next/source/js/src/linkcard.jsjs源文件

window.onload=function(){
  var LinkCards=document.getElementsByClassName('LinkCard');
  if(LinkCards.length != 0){
    var LinkCard=LinkCards[0];
    var link=LinkCard.href;
    var title=LinkCard.innerText;
    LinkCard.innerHTML="<style type=text/css>.LinkCard,.LinkCard:hover{text-decoration:none;border:none!important;color:inherit!important}.LinkCard{position:relative;display:block;margin:5px auto;width:330px;box-sizing:border-box;border-radius:12px;max-width:100%;overflow:hidden;color:inherit;text-decoration:none}.ztext{word-break:break-word;line-height:1.6}.LinkCard-backdrop{position:absolute;top:0;left:0;right:0;bottom:0;background-repeat:no-repeat;-webkit-filter:blur(20px);filter:blur(20px);background-size:cover;background-position:center}.LinkCard,.LinkCard:hover{text-decoration:none;border:none!important;color:inherit!important}.LinkCard-content{position:relative;display:flex;align-items:center;justify-content:space-between;padding:12px;border-radius:inherit;background-color:rgba(246,246,246,246)}.LinkCard-text{overflow:hidden;width:260px;}.LinkCard-title{white-space: nowrap;display:-webkit-box;-webkit-line-clamp:2;overflow:hidden;text-overflow:ellipsis;max-height:calc(16px * 1.25 * 2);font-size:16px;font-weight:500;line-height:1.25;color:#1a1a1a}@media(max-width: 767px){.LinkCard-title{font-size:13px;}}.LinkCard-meta{display:flex;margin-top:4px;font-size:14px;line-height:20px;color:#999;white-space:nowrap}.LinkCard-imageCell{margin-left:28px;border-radius:30px;width:70px;}.LinkCard-image{display:block;width:60px;height:auto;border-radius:inherit}</style><span class=LinkCard-backdrop style=background-image:url(https://zhstatic.zhihu.com/assets/zhihu/editor/zhihu-card-default.svg)></span><span class=LinkCard-content><span class=LinkCard-text><span class=LinkCard-title>"+title+"</span><span class=LinkCard-meta><span style=display:inline-flex;align-items:center><svg class="+"'Zi Zi--InsertLink'"+" fill=currentColor viewBox="+"'0 0 24 24'"+" width=17 height=17><path d="+"'M6.77 17.23c-.905-.904-.94-2.333-.08-3.193l3.059-3.06-1.192-1.19-3.059 3.058c-1.489 1.489-1.427 3.954.138 5.519s4.03 1.627 5.519.138l3.059-3.059-1.192-1.192-3.059 3.06c-.86.86-2.289.824-3.193-.08zm3.016-8.673l1.192 1.192 3.059-3.06c.86-.86 2.289-.824 3.193.08.905.905.94 2.334.08 3.194l-3.059 3.06 1.192 1.19 3.059-3.058c1.489-1.489 1.427-3.954-.138-5.519s-4.03-1.627-5.519-.138L9.786 8.557zm-1.023 6.68c.33.33.863.343 1.177.029l5.34-5.34c.314-.314.3-.846-.03-1.176-.33-.33-.862-.344-1.176-.03l-5.34 5.34c-.314.314-.3.846.03 1.177z'"+" fill-rule=evenodd></path></svg></span>"+link+"</span></span><span class=LinkCard-imageCell><img class=LinkCard-image alt=图标 src=/images/linkcard.png></span></span>";

    for (var i = LinkCards.length - 1; i >= 1; i--) {
      LinkCard=LinkCards[i];
      title=LinkCard.innerText;
      link=LinkCard.href;
      LinkCard.innerHTML="<span class=LinkCard-backdrop style=background-image:url(https://zhstatic.zhihu.com/assets/zhihu/editor/zhihu-card-default.svg)></span><span class=LinkCard-content><span class=LinkCard-text><span class=LinkCard-title>"+title+"</span><span class=LinkCard-meta><span style=display:inline-flex;align-items:center><svg class="+"'Zi Zi--InsertLink'"+" fill=currentColor viewBox="+"'0 0 24 24'"+" width=17 height=17><path d="+"'M6.77 17.23c-.905-.904-.94-2.333-.08-3.193l3.059-3.06-1.192-1.19-3.059 3.058c-1.489 1.489-1.427 3.954.138 5.519s4.03 1.627 5.519.138l3.059-3.059-1.192-1.192-3.059 3.06c-.86.86-2.289.824-3.193-.08zm3.016-8.673l1.192 1.192 3.059-3.06c.86-.86 2.289-.824 3.193.08.905.905.94 2.334.08 3.194l-3.059 3.06 1.192 1.19 3.059-3.058c1.489-1.489 1.427-3.954-.138-5.519s-4.03-1.627-5.519-.138L9.786 8.557zm-1.023 6.68c.33.33.863.343 1.177.029l5.34-5.34c.314-.314.3-.846-.03-1.176-.33-.33-.862-.344-1.176-.03l-5.34 5.34c-.314.314-.3.846.03 1.177z'"+" fill-rule=evenodd></path></svg></span>"+link+"</span></span><span class=LinkCard-imageCell><img class=LinkCard-image alt=图标 src=/images/linkcard.png></span></span>";
    }
  }
}

右侧图片

链接图片地址：/images/linkcard.png

引用js文件

在路径~/blog/themes/next\layout\_macro\post.swig 中 END POST BODY 前的 </div> 代码之后添加如下代码：

路径：~/blog/themes/next\layout\_macro\post.swig

1	<script type="text/javascript" src="/js/src/linkcard.js"></script>

使用

1	<a href="https://sxxkearth.github.io" target="_blank" class="LinkCard">嗜血星空earth</a>

效果

嗜血星空earth

参考链接：

本文大部分为转载内容，内容来自reuixiy的博客，仅整理出个人可能需要的部分。
原文链接：打造个性超赞博客Hexo+NexT+GitHubPages的超深度优化,如欲转载，请尊重原作者，走原文链接，reuixiy大神持续更新该文章。再次感谢大神几个月的幸苦整理。

图标的使用

引用方法

效果

源码：

效果

源码

插入图片

直接插入：

调整位置及大小：

插入可点击，带链接的图片

自定义样式的引用

引用自带的阅读全文样式

引用自建的css样式：

效果

自定义数字块的样式

css文件

主题自带的note样式标签

note去掉icon的样式

让note样式与字数一致

我的note的css样式：

另一种样式

主题自带的label标签样式

使用tabs标签样式

主题自带代码块高亮

代码块红绿底色

文本居中引用

插入音乐

法一：

法二：（使用插件：hexo-tag-aplayer）

插入视频

添加注脚功能

sub-menu二级菜单使用：

Next 配置相关文章

插件安装

附上本人配置文件

配置样式

使用

Next 配置仿知乎链接

js文件

右侧图片

引用js文件

使用

效果

参考链接：

法二：（使用插件：`hexo-tag-aplayer`）