hexo-Next主题美化<二>

插入音乐


使用html插入

1
<audio src="http://music.163.com/song/media/outer/url?id=你的网易云歌曲ID.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>

替换你需要的网易云歌曲的ID即可。

缺点:除了网易云音乐外,其他你需要的MP3地址自行搜索,而且界面不美观,功能也少,不推荐

直接使用网易云音乐外链播放器


  1. 在网页网易云搜索歌曲点击生成外链播放器:

  2. 进行尺寸和播放模式设置后复制HEML代码,添加进文章的合适位置即可。

因为版权问题有时不能使用网易云的解决方法:


思路:获得MP3,歌词,封面文件,上传到你的私人云端获得外链。使用Aplayer插件进行插入播放器,下面给出的是几种免费获得文件的方法

Ⅰ.首先获得音乐MP3文件,和歌词Lrc和封面文件

获得MP3和LRC方法一:网易云链接替换

1.获得歌曲mp3文件

http://music.163.com/song/media/outer/url?id=你需要的网易云歌曲的ID.mp3

下载MP3文件即可。

也可以使用该网站获取MP3

2.获得歌词lrc文件

浏览器输入http://music.163.com/api/song/media?id=你的网易云歌曲ID

得到下面页面

从第一个[HH:MM:SS] 开始复制,到最后的[HH:MM:SS]和之后的一句歌词为止截取复制,新建DOC文档,粘贴进去,就是获取lyric:"........" 中的部分:

使用替换功能:将\n替换为`特殊格式:段落标记`

得到歌词文件,下图为部分歌词:

之后改名,保存为lrc文件即可手工得到歌词文件

如果发现歌词出现乱码,在保存的时候选择另存为,然后点击底部的工具选项,选择Web选项,将编码设置为Unicode(UTF-8)即可。

最近发现了一个获取歌词新方法:使用这个软件可以直接下载网易云的歌曲歌词,还带翻译,点我进入该大佬项目下载使用即可。推荐使用插件中的歌单歌词下载功能,然后新建一个歌单,把你想下载歌词的歌放进去,通过该方法可以不用通过本地文件下载。下载的歌词在软件文件夹下的Lyrics文件夹中。

获得MP3和LRC方法二:使用Music tools

软件下载地址

使用软件下载音乐,同时会自动下载歌词lrc文件。

缺点是偶尔会有下载不了的情况,还有些情况会发现下载的是翻唱

获取封面图片

  • 网易云音乐:

    • 进入该神奇网站
    • 输入你的音乐网址 例如https://music.163.com/#/album?id=36146063
    • 神奇的得到封面图片
  • QQ音乐

    • 直接右键图片另存为

    其他音乐和其他方法自行寻找不再赘述。

    最近发现了一个获取封面的方法:

Ⅱ.将上面获得的文件上传至你的私人云端获得外链由于当时建立图床的时候用了腾讯云COS,现在正好就一起用了

使用方法一也可以不用下载和上传音乐,直接使用:http://music.163.com/song/media/outer/url?id=你需要的网易云歌曲的ID.mp3也可以的

在云储存里获得Mp3链接Lrc歌词链接 这里我直接使用了COSBrowser 工具进行上传和获取链接,很方便

Ⅲ.安装插件,在文章里写入即可

站点文件夹下:$ npm install hexo-tag-aplayer --save

文章里的写入操作:

单曲:

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

歌词标签:

除了使用标签 lrc 选项来设定歌词,你也可以直接使用 aplayerlrc 标签来直接插入歌词文本在博客中:

1
2
3
{% aplayerlrc "title" "author" "url" "autoplay" %}
[00:00.00]lrc here
{% endaplayerlrc %}
  1. 支持歌单
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
{% aplayerlist %}
{
"narrow": false, //是否关闭进度页面
"theme": "#FFD700", //进度条和歌曲选中的颜色
"autoplay": false, //自动播放
"showlrc": 3, //歌词设置类型3:把歌词放到LRC文件里 1:歌词放到JS字符串
"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 %}

更多详情请参照:https://github.com/MoePlayer/hexo-tag-aplayer

想要直接使用使用你的云音乐或者其他音乐歌单


Ⅰ.直接使用网易云外链播放器

直接将https://music.163.com/#/outchain/0/替换成歌单ID就可以越过版权问题获取外链,直接添加进文章的相应位置即可。

虽然快捷但是使用起来会卡卡的而且无版权音乐一样不能听,没有其他功能,不推荐。

Ⅱ.使用Aplayer插件进行设置(推荐)

  1. 站点文件夹下:$ npm install hexo-tag-aplayer --save

  2. 在站点配置文件_config.yml下写入下列代码来配置Meting:

    1
    2
    aplayer:
    meting: true
  3. ID获取

    网易云为例:

    打开你的歌单浏览器地址栏就会显示你的歌单ID:

  4. 在你的文章中写入代码

最简单的:

1
{% meting "你的歌单ID" "平台类型" "playlist" %}

自定义:

1
{% meting "ID" "平台类型" "playlist" "autoplay" "mutex:false" "listmaxheight:340px" "preload:none" "theme:#ad7a86"%}

其他可设置选项如下:

选项默认值描述
id需要自己填写song id / playlist id / album id / search keyword 歌曲 id / 播放列表 id / 相册 id / 搜索关键字
server需要自己填写Music platform: netease, tencent, kugou, xiami, baidu 音乐平台: netease, tencent, kugou, xiami, baidu
type需要自己填写song, playlist, album, search, artist
fixedfalseEnable fixed mode (开启吸底模式)
minifalseEnable mini mode (开启迷你模式)
loopallPlayer loop play, values: ‘all’, ‘one’, ‘none’ 列表循环模式:all, one,none
orderlistPlayer play order, values: ‘list’, ‘random’ 列表播放模式: list, random
volume0.7播放器音量
lrctype0歌词格式类型歌词设置类型 1:歌词放到JS字符串 3:把歌词放到LRC文件里
listfoldedfalse指定音乐播放列表是否折叠
autoplayfalse自动播放,移动端浏览器暂时不支持此功能
mutextrue该选项开启时,如果同页面有其他 player 播放,该播放器会暂停
listmaxheight340px播放列表的最大长度
preloadautoThe way to load music, can be none, metadata, auto 音乐文件预载入模式,可选项: none, metadata, auto
storagenamemetingjsLocalStorage key that store player setting 存储播放器设置的LocalStorage键
theme#ad7a86播放器风格色彩设置

例如我的设置:

1
2
{% meting "699716432" "netease" "playlist" "theme:#FFD700" "mode:circulation" "mutex:true" "listmaxheight:280px" "preload:auto" "autoplay" "listfolded"   %}
//需要自动播放则添加"autoplay"即可

效果如下:

更多使用请阅读:Aplayer

注意:一个文档里面不支持包含metingJS、Aplayer同时播放

歌单的更新可能会在你的网易云更新后有一两天延迟

在博客首页创建歌单页面


先查看本文上个问题中“想要直接使用使用你的云音乐或者其他音乐歌单”的解决方法,安装aplayer插件,配置Metting,查询歌单ID。

1.新建歌单页面

hexo new page playlist

2.修改页面类型

在 /Hexo/source 生成的playlist文件夹,修改index.md如下:

1
2
3
title: 歌单
date: 2019-08-25 17:44:37
type: "playlist"

3.修改图标

在主题配置文件_config.yml下搜索menu并添加playlist: /playlist/ || music

修改如下:

1
2
3
4
5
6
7
menu:
home: / || home
about: /about/ || user
tags: /tags/ || tags
categories: /categories/ || th
archives: /archives/ || archive
playlist: /playlist/ || music

themes/next/languages/zh-Hans.yml 中找到menu 添加中文翻译:

1
2
3
4
5
6
7
8
9
10
11
menu:
home: 首页
archives: 归档
categories: 分类
tags: 标签
about: 关于
playlist: 歌单
search: 搜索
schedule: 日程表
sitemap: 站点地图
commonweal: 公益 404

4.载入歌单

打开 /Hexo/source 生成的playlist文件夹,将你的设置添加到index.md中去

我的设置如下:

1
{% meting "699716432" "netease" "playlist" "theme:#FFD700" "mode:circulation" "mutex:true" "listmaxheight:500px" "preload:auto" "autoplay"   %}

如何设置请见上个问题中“想要直接使用使用你的云音乐或者其他音乐歌单”

给你的博客站点加入播放器


上述问题,解决文章或者中的音乐插入,这儿我们讨论在博客站点加入播放器

添加使用网易云生成的外链播放器

打开/themes/next/layout/_macro/sidebar.swig搜索theme.links,也就是友情链接,再这一项之后添加网易云外链。:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
{% if theme.links %}
<div>
<div class="links-of-blogroll-title">
....省略部分代码
</div>
<ul class="links-of-blogroll-list">
....省略部分代码
</ul>
</div>
{% endif %}
//添加
<div id="music163player">
<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86 src="//music.163.com/outchain/player?type=2&id=5239700&auto=0&height=66">
</iframe>
</div>
//结束

直接在网易云网站搜索生成外链就行,也不用想去生成跨版权播放器,生成了也播放不了。

使用audio标签修改

同样的文件,同样的位置,添加下面代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
{% if theme.links %}
<div>
<div class="links-of-blogroll-title">
....省略部分代码
</div>
<ul class="links-of-blogroll-list">
....省略部分代码
</ul>
</div>
{% endif %}
//添加
<div id="music163player">
<audio src="http://music.163.com/song/media/outer/url?id=你的网易云歌曲ID.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>
</div>
//结束

src="http://什么什么.mp3"可自行更改,若想自动播放则在src="http://什么什么.mp3" 之后添加autoplay即可

优点是可以跨版权播放,缺点是不太美观,只有播放功能

使用aplayer进行设置播放器


  1. 点击访问Aplayer源码:GitHub Aplayer。下载到本地,解压后将dist文件夹复制到themes\next\source文件夹下。

  2. 新建themes\next\source\dist\music.js文件,添加内容:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    const ap = new APlayer({
    container: document.getElementById('aplayer'),
    fixed: true, //吸底模式
    autoplay: false, //自动播放
    lrcType: 1, //歌词载入模式 1为直接在JS文件中写入,3为lrc文件使用但是我总是失败
    audio: [
    {
    name: "歌曲名字",
    artist: "歌曲作者",
    url: "http://music.163.com/song/media/outer/url?id=你需要的网易云歌曲的ID.mp3", //歌曲链接
    cover: "http://什么什么.jpg", //封面
    lrc : "[00:00.13] 编曲:接个吻,开一枪\n[00:01.10] 混音......"
    },
    {
    name: "歌曲名字",
    artist: "歌曲作者",
    url: "http://music.163.com/song/media/outer/url?id=你需要的网易云歌曲的ID.mp3", //歌曲链接
    cover: "http://什么什么.jpg", //封面
    lrc : "[00:00.13] 编曲:接个吻,开一枪\n[00:01.10] 混音......"
    },
    ]
    });

    其他参数解释点击这里

  3. 打开themes\next\layout\_layout.swig文件,在<body></body>里面添加下面代码:

    1
    2
    3
    4
    <link rel="stylesheet" href="/dist/APlayer.min.css">
    <div id="aplayer"></div>
    <script type="text/javascript" src="/dist/APlayer.min.js"></script>
    <script type="text/javascript" src="/dist/music.js"></script>
  4. hexo s

下面给出几点注意

  1. url的MP3链接自行设置,上述设置是为了方便我使用网易云直接填ID即可

  2. 歌词的设置我使用模式3载入lrc文件总是显示不可用,于是换了模式1,在lrc :''中自己写入歌词,歌词直接在http://music.163.com/api/song/media?id=你的网易云歌曲ID 获取lyric:""中的内容即可。英文歌无中文翻译,需要自己在每一句后面加(翻译)。

  3. 新的简单获取歌词的简单方法已经在上面获取歌词的问题中给出,打开文件,复制内容通过word替换功能,被替换选特殊格式段落标记,替换填空白即可将歌词全部转为一行,之后填入music.js中的lrc:""使用注意单双引号的影响即可 该方法能够有效解决自己添加翻译的麻烦,不需要翻译的话直接用2.即可

  4. 源文档介绍使用单引号,这里我全部改成了双引号,因为我发现lrc选项填写英文歌词偶尔会出现单引号会引起不必要的BUG,双引号要少一些,出现的话删除即可

  5. 歌词中的\n等可有可无,只要时间歌词格式使用正确即可,这里有是因为从网页中复制下来就带。

  6. 保存music.js时候用UTF-8编码,默认的ANSI会导致中文乱码

  7. 获得封面的方法有很多,除了上面问题中由该网站获取保存到云端的方法外下面再给出一种简单的方法

首先用谷歌浏览器打开网易云搜索你的歌曲,在封面处右键选则检查选项

ctrl+c复制即可,黏贴在cover中

打赏功能


设置打赏功能

主题配置文件_config.yml 下,搜索reward_settings 进行修改:

1
2
3
4
5
6
7
8
# Reward (Donate)
reward_settings:
enable: true //true启用
animation: true //true启用
comment: 坚持原创技术分享,您的支持将鼓励我继续创作!恰饭^.^~ //可以自行设置文字
reward:
wechatpay: //你的微信收款图片地址
alipay: //你的支付宝收款图片地址

这里的收款图片地址,我均用截图上传至腾讯云COS端进行链接调用了。

打赏抖动消除

修改文件 next/source/css/_common/components/post/post-reward.styl,找到函数 ,如下:

1
2
3
4
5
6
7
8
9
10
11
if hexo-config('reward_settings.animation') {
& > div:hover p {
animation: roll 0.1s infinite linear;
}

@keyframes roll {
from {
transform: rotateZ(30deg);
}
to {
transform: rotateZ(-30deg);

通过修改animation: roll 0s infinite linear; 或者修改两个rotateZ(0deg)都可以取消鬼畜抖动

小萌物设置


  1. 在博客根目录下,执行npm install hexo-helper-live2d --save

  2. 修改站点配置文件或主题配置文件我修改的是站点配置文件,添加下列字段:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    # Live2D
    ## https://github.com/EYHN/hexo-helper-live2d
    live2d:
    enable: true
    # enable: false
    scriptFrom: local # 默认
    pluginRootPath: live2dw/ # 插件在站点上的根目录(相对路径)
    pluginJsPath: lib/ # 脚本文件相对与插件根目录路径
    pluginModelPath: assets/ # 模型文件相对与插件根目录路径
    # scriptFrom: jsdelivr # jsdelivr CDN
    # scriptFrom: unpkg # unpkg CDN
    # scriptFrom: https://cdn.jsdelivr.net/npm/live2d-widget@3.x/lib/L2Dwidget.min.js # 你的自定义 url
    tagMode: false # 标签模式, 是否仅替换 live2d tag标签而非插入到所有页面中
    debug: false # 调试, 是否在控制台输出日志
    model:
    use: live2d-widget-model-koharu # npm-module package name # 填写你所需要的看板娘名称
    # use: wanko # 博客根目录/live2d_models/ 下的目录名
    # use: ./wives/wanko # 相对于博客根目录的路径
    # use: https://cdn.jsdelivr.net/npm/live2d-widget-model-wanko@1.0.5/assets/wanko.model.json # 你的自定义 url
    display:
    position: right #左右放置
    width: 200 #宽
    height: 400 #高
    mobile:
    show: true # 手机中是否展示
    react:
    opacity: 0.9 #透明度

    更多设置:点击这里

  3. 通过npm安装依赖的看板娘文件npm install live2d-widget-model-name,其中name是你选择的官方看板娘的名字,如我选择的是koharu,则为npm install live2d-widget-model-koharu
    重新运行hexo clean && hexo d -g则可在主页看到了。

点击这里预览看板娘来选择名称

深度功能,换衣、对话等等:点击这里

修改插入图片的大小

  1. 打开文件/themes/next/source/css/_custom/custom.styl添加以下代码:

    1
    2
    3
    4
    .image-size-400{
    //表示插入的图片的宽度为 400px
    width: 90%
    }

    width的值可以自行调整,可以直接设置值:width: 400

  2. 文章中的使用:

    1
    <img src="你的图片链接" class="image-size-400" />

    想使用原大小不加入class="image-size-400"即可。

文内直接使用:<img src="你的图片链接" width=90% />就可以,但是最初我试的时候不行,也不知道为啥,可能是因为当时为了查看图片安装了fancybox插件之后就可以了?

文章添加封面功能


方法一:直接使用配置文件

在根目录下scaffolds文件夹打开post.md,增加photos:属性

1
2
3
4
5
6
title: {{ title }}
date: {{ date }}
tags:
categories:
copyright: true
photos: //填写你的封面url地址

这样新建文章在photos:后添加图片url地址即可添加封面。

以前的文章想要加封面,手动加入 photos 即可

建议配合文章折叠功能:点我查看

若是觉得该方法下图片与题目留白太宽,不美观:点我查看解决

方法二:自行添加

打开\themes\next\layout\_macro\post.swing文件,搜索post.description在如下位置添加代码:

1
2
3
4
5
6
<p></p>
{% if post.summary_img %}
<div class="out-img-topic">
<img src={{ post.summary_img }} class="image-size-400">
</div>
{% endif %}

<p></p>是我看图片太过靠顶部不美观加的,让图片和顶部有一些距离,可以删除

添加后例如:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
     ..........
</span>
{% endif %}
<p></p>
{% if post.summary_img %}
<div class="out-img-topic">
<img src={{ post.summary_img }} class="image-size-400">
</div>
{% endif %}
{% if post.description and (not theme.excerpt_description or not is_index) %}
<div class="post-description">{#
#}{{ post.description }}{#
#}</div>
{% endif %}
................

在新建的文章添加一个字段属性:summary_imgsummary_img 的值是图片的链接或者路径,若为空则不加入封面图片如:

1
2
3
4
5
6
7
8
---
title: test
date:
categories:
tags:
comments:
summary_img: https://什么什么.png
---

使用方法二,可以配合修改插入图片大小来实现封面大小调整

如果你加入了修改图片大小的代码,这时候直接在summary_img: 中填写图片链接,显示大小会是你设置的大小。

为了方便以后使用在根目录下scaffolds文件夹打开post.md,增加summary_img:属性

1
2
3
4
5
6
7
title: {{ title }}
date: {{ date }}
tags:
categories:
copyright: true
photos: //填写你的封面url地址
summary_img: //填写你的封面url地址

两个方法可同时开启,想用哪个用哪个。

文章加密访问


  1. 博客根目录下npm install --save hexo-blog-encrypt

  2. 站点配置文件中添加

    1
    2
    3
    4
    5
    6
    # Security
    encrypt: # hexo-blog-encrypt
    enable: true
    tags: # 配置标签加密
    - {name: test, password: test}
    - {name: diary, password: diary}
  3. 然后在你的文章的头部添加上对应的字段,如 password, abstract, message

在在根目录下scaffolds文件夹打开post.md增加passward: abstract: message:

1
2
3
4
5
6
7
8
9
title: {{ title }}
date: {{ date }}
tags:
categories:
copyright: true
photos:
passwprd:
abstract: Something was encrypted, please enter password to read.
message: Welcome to my blog, please enter password to read.

这样以后写文章后password项 为空则不需要密码,输入内容则为密码。

password: 是该博客加密使用的密码
abstract: 是该博客的摘要,会显示在博客的列表页
message: 这个是博客查看时,密码输入框上面的描述性文字

标签加密,加密模板更改等查看:

https://github.com/MikeCoder/hexo-blog-encrypt/blob/v2.x/ReadMe.zh.md

博文置顶功能


  1. 安装插件

    1
    2
    $ npm uninstall hexo-generator-index --save
    $ npm install hexo-generator-index-pin-top --savew
  2. 然后在需要置顶的文章的Front-matter中加上top: 任意数字即可。例如:

    1
    2
    3
    4
    5
    6
    7
    8
    title: test
    copyright: true
    date: 2019-08-27 22:11:44
    tags:
    categories:
    photos:
    password:
    top: 10

    多个置顶,数字越大,置顶越靠前,若TOP值为空则默认时间排序

  3. 设置置顶标志

    打开:/blog/themes/next/layout/_macro 目录下的post.swig文件,定位到<div class="post-meta">标签下,插入如下代码:

    1
    2
    3
    4
    5
    {% if post.top %}
    <i class="fa fa-thumb-tack"></i>
    <font color=7D26CD>置顶</font>
    <span class="post-meta-divider">|</span>
    {% endif %}

    例:

  4. 修改模板文件,方便以后使用

    在根目录下scaffolds文件夹打开post.md,增加top属性

    1
    2
    3
    4
    5
    6
    7
    8
    title: {{ title }}
    date: {{ date }}
    tags:
    categories:
    copyright: true
    photos:
    password:
    top:自定义鼠标样式

自定义鼠标样式


themes\next\source\css\_customcustom.styl文件中添加

1
2
3
* {
cursor: url("https://你的鼠标样式.ico"),auto!important
}

需要是ico或者cur文件,将你的链接填进去就行了。

添加评论功能(来必力)


  1. 官网注册账号

  2. 选择City版(免费),安装。(会生成 来必力City版安装代码以及 data-uid ,或者 进入管理页面->代码管理->一般网站,可以查看)

  3. 然后打开主题目录的配置文件/next/_config.yml,定位到livere_uid字段,将UID填入即可

    1
    2
    3
    4

    # LiveRe comments system
    # You can get your uid from https://livere.com/insight/myCode (General web site)
    livere_uid: //填写你的UID
  4. 自定义文章的评论开启与关闭:

    在根目录下scaffolds文件夹打开post.md,增加comments:属性

    1
    2
    3
    4
    5
    6
    7
    8
    9
    title: {{ title }}
    date: {{ date }}
    tags:
    categories:
    copyright: true
    photos:
    password:
    top:
    comments:

    这样新建文章填写comments:true/false 来开启/关闭本文章的评论功能,空写为默认开启。以前的文章可以手动加入。

预览文章标题与文章留白间距修改


默认留白太大了,不美观,我们自行修改。

themes\next\source\css\_custom打开custom.styl文件

添加:

1
2
3
.posts-expand .post-meta {
margin: 10px 0 10px 0;
}

效果:

觉得不够的话自己修改值就行。

写文章时文字增加背景色块


  1. 打开themes/next/source/css/_custom/custom.styl,增加以下内容:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
/ /颜色块-黄
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;
}
// 颜色块-绿
span#inline-green {
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: #5cb85c;
}
// 颜色块-蓝
span#inline-blue {
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: #2780e3;
}
// 颜色块-紫
span#inline-purple {
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: #9954bb;
}
  1. 写文章时候格式<span id="inline-颜色">内容</span>

    例如:<span id="inline-blue">蓝色背景块</span>样式如下:

    蓝色背景块

  2. 添加其他颜色背景块

    打开themes/next/source/css/_custom/custom.styl,增加:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    span#inline-你增加的颜色名字 {
    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: 修改为你喜欢的颜色代码;
    }

例如:新增灰色背景块

修改引用边框颜色


  1. 打开themes/next/source/css/_custom/custom.styl,增加以下内容:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    // 左侧边框红色块级
    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;
    }
    // 左侧边框黄色块级
    p#div-border-left-yellow {
    display: block;
    padding: 10px;
    margin: 10px 0;
    border: 1px solid #ccc;
    border-left-width: 5px;
    border-radius: 3px;
    border-left-color: #f0ad4e;
    }
    // 左侧边框绿色块级
    p#div-border-left-green {
    display: block;
    padding: 10px;
    margin: 10px 0;
    border: 1px solid #ccc;
    border-left-width: 5px;
    border-radius: 3px;
    border-left-color: #5cb85c;
    }
    // 左侧边框蓝色块级
    p#div-border-left-blue {
    display: block;
    padding: 10px;
    margin: 10px 0;
    border: 1px solid #ccc;
    border-left-width: 5px;
    border-radius: 3px;
    border-left-color: #2780e3;
    }
    // 左侧边框紫色块级
    p#div-border-left-purple {
    display: block;
    padding: 10px;
    margin: 10px 0;
    border: 1px solid #ccc;
    border-left-width: 5px;
    border-radius: 3px;
    border-left-color: #9954bb;
    }
    // 右侧边框红色块级
    p#div-border-right-red {
    display: block;
    padding: 10px;
    margin: 10px 0;
    border: 1px solid #ccc;
    border-right-width: 5px;
    border-radius: 3px;
    border-right-color: #df3e3e;
    }
    // 右侧边框黄色块级
    p#div-border-right-yellow {
    display: block;
    padding: 10px;
    margin: 10px 0;
    border: 1px solid #ccc;
    border-right-width: 5px;
    border-radius: 3px;
    border-right-color: #f0ad4e;
    }
    // 右侧边框绿色块级
    p#div-border-right-green {
    display: block;
    padding: 10px;
    margin: 10px 0;
    border: 1px solid #ccc;
    border-right-width: 5px;
    border-radius: 3px;
    border-right-color: #5cb85c;
    }
    // 右侧边框蓝色块级
    p#div-border-right-blue {
    display: block;
    padding: 10px;
    margin: 10px 0;
    border: 1px solid #ccc;
    border-right-width: 5px;
    border-radius: 3px;
    border-right-color: #2780e3;
    }
    // 右侧边框紫色块级
    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;
    }
    // 上侧边框红色
    p#div-border-top-red {
    display: block;
    padding: 10px;
    margin: 10px 0;
    border: 1px solid #ccc;
    border-top-width: 5px;
    border-radius: 3px;
    border-top-color: #df3e3e;
    }
    // 上侧边框黄色
    p#div-border-top-yellow {
    display: block;
    padding: 10px;
    margin: 10px 0;
    border: 1px solid #ccc;
    border-top-width: 5px;
    border-radius: 3px;
    border-top-color: #f0ad4e;
    }
    // 上侧边框绿色
    p#div-border-top-green {
    display: block;
    padding: 10px;
    margin: 10px 0;
    border: 1px solid #ccc;
    border-top-width: 5px;
    border-radius: 3px;
    border-top-color: #5cb85c;
    }
    // 上侧边框蓝色
    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;
    }
    // 上侧边框紫色
    p#div-border-top-purple {
    display: block;
    padding: 10px;
    margin: 10px 0;
    border: 1px solid #ccc;
    border-top-width: 5px;
    border-radius: 3px;
    border-top-color: #9954bb;
    }
  2. 写文章时候的格式<p id="div-border-位置-颜色">内容</p>

    例如<p id="div-border-top-blue">顶部蓝色</p>的效果如下:

    顶部蓝色

  3. 自行增加颜色

    修改哪一类就找哪一类,例如修改上部就找下面:

    打开themes/next/source/css/_custom/custom.styl,增加:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    // X侧边框X色
    p#div-border-位置-颜色位置 {
    display: block;
    padding: 10px;
    margin: 10px 0;
    border: 1px solid #ccc;
    border-top-width: 5px; //宽度
    border-radius: 3px; //
    border-top-color: 你的颜色代码;
    }

    例如:新增右侧灰色边框:

    右侧灰色

主题自带样式写作说明

生成引号的文本居中引用

语法:

1
{% cq %}内容{% endcq %}

样例:

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

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

作者声明标明的引用

语法:

1
{% blockquote 作者 %}内容{% endblockquote %}

例如:

1
{% blockquote --JunYuan %}Test{% endblockquote %}

Test

--JunYuan

主题自带样式note标签

  1. 语法:
1
<div class="note 名称"><p>内容</p></div>

名称为:default/primary等下面名称

default(灰色)

灰色样式

primary(紫色)

紫色样式

success(绿色)

绿色样式

info(蓝色)

蓝色样式

warning(橙色样式)

橙色样式

danger(红色样式)

红色样式

2. 在**主题配置文件**`_config.yml`下可以修改note标签的风格,和开关其中的图标显示。

修改后需要重新hexo s才会显示

1
2
3
4
5
6
7
8
9
10
11
12
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 //选择你的样式simple/modern/flat
icons: false //是否开启note图标显示。
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

图标显示:

不显示:

note样式自行选择不再演示。

主题自带样式lable标签

主题配置文件 中需要配置下,没有自行添加:

1
2
# Label tag.
label: true

语法:

1
{% label default@default %}

@ 前面的是label的名字,后面的是要显示的文字

1
{% label primary@测试primar显示效果 %}

测试样例:测试primar显示效果

主题自带样式的tab标签(选项卡)

  1. 主题配置文件 中需要配置,没有的自行添加:

    1
    2
    3
    4
    5
    6
    7
    # Tabs tag.
    tabs:
    enable: true
    transition:
    tabs: true
    labels: true
    border_radius: 0
  2. 语法:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    {% tabs %} 
    <!-- tab -->
    内容1
    <!-- endtab -->
    <!-- tab -->
    内容2
    <!-- endtab -->
    <!-- tab -->
    内容3
    <!-- endtab -->
    {% endtabs %}

    说明:

    1
    2
    3
    说明:{% tabs %} 中可添加选项卡名称和初次出现在第几个选项卡,
    否则默认按数字生成名称,初次显示为第一个选项卡。
    若数字为-1则为隐藏选项卡内容,点击才出现。

    例如:下面设置的效果:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    {% tabs 测试,2%}
    <!-- tab -->
    内容1
    <!-- endtab -->
    <!-- tab -->
    内容2
    <!-- endtab -->
    <!-- tab -->
    内容3
    <!-- endtab -->
    {% endtabs %}

    内容1

    内容2

    内容3

主题自带样式的按钮


语法:

1
2
<a id="download" href="https://地址"><i class="fa fa-图标名"></i><span> 内容</span>
</a>

例如

1
2
<a id="download" href="https://www.baidu.com"><i class="fa fa-paw"></i><span>百度</span></a>
<a id="download" href="https://www.baidu.com"><i class="fa fa-download"></i><span>点我下载</span></a>

百度

点我下载

图标名称来自Font Awesome

主题自带样式的更多内容https://hexo.io/docs/tag-plugins.html

# 文中添加图标

语法:

<i class="fa fa-图标名"></i>

例如:

1
我想使用下载图标:<i class="fa fa-download"></i>,使用心性图标<i class="fa fa-heart"></i>。

我想使用下载图标:,使用心性图标

自定义数字显示


打开\themes\next\source\css\_custom中的custom.styl文件添加代码:

1
2
3
4
5
6
7
8
9
10
// 自定义的数字块
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;
}

语法:<span id="inline-toc">你的数字</span>

样例:

1
测试:<span id="inline-toc">1558888</span>

测试:1558888

插入视频


Ⅰ.直接用标签

1.使用iframe标签

很多大型视频网站的分享功能都会带一个嵌入我们可以获得iframe标签来插入,很方便

1
2
<iframe width="100%" height="480" src="播放源" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>
//可自行更改width和height,百分比或者数值都可以

2.使用Video标签

1
<video width="100%" height="100%" controls><source src="地址或者什么什么.mp4等类型地址"></video>

样例演示:

1
<video width="100%" height="100%" controls><source src="https://lyxf2000-1259802619.cos.ap-beijing.myqcloud.com/%E8%A7%86%E9%A2%91/Miracles-Axel%20Johansson%20%20Tina%20Stachowiak.mp4"></video>

如下:

3.其他标签如embed、object等自行百度。

由于iframe不能自己觉得是否自动播放,这里使用了video标签作为演示

## Ⅱ.使用Dplayer插件播放
  1. 在博客根目录下

    npm install hexo-tag-dplayer --save

  2. 使用格式:

    1
    {% dplayer "url=http://什么什么.mp4"  "pic=http://什么什么.jpg" "loop=yes" "theme=#FADFA3" "autoplay=false" "token=tokendemo" %}

    其他参数和使用方法:点我查看

静态资源压缩


因为使用gulp老是出错,所以换了hexo-neat插件

根据该文配置即可

  1. 根目录下npm install hexo-neat --save

  2. 站点配置文件添加

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    # hexo-neat
    # 博文压缩
    neat_enable: true
    # 压缩html
    neat_html:
    enable: true
    exclude:
    # 压缩css
    neat_css:
    enable: true
    exclude:
    - '**/*.min.css'
    # 压缩js
    neat_js:
    enable: true
    mangle: true
    output:
    compress:
    exclude:
    - '**/*.min.js'
    - '**/jquery.fancybox.pack.js'
    - '**/index.js'
  3. 使用直接hexo三连即可。

注意neat 的使用可能会导致一些我们添加的效果失效。如鼠标点击爆炸效果。我们需要将配置中的 JS选项的

enable:的值该为false即可。

SEO优化


参考以下博主的方法即可

hexo 博客百度站长平台自动链接提交

hexo高阶教程:教你怎么让你的hexo博客在搜索引擎中排第一

SEO

Hexo博客Next主题SEO优化方法

Hexo-next百度和谷歌搜索优化

感谢


最后特别感谢这些文章的帮助:

1.关于Hexo6.0搭建个人博客(主题优化进阶篇)

2.Hexo主题 —— NexT优化

3.Hexo的Next主题详细配置

4.【持续更新】最全Hexo博客搭建+主题优化+插件配置+常用操作+错误分析

5.Hexo博客Next主题优化总结

6.hexo的next主题个性化配置教程

7.Hexo Next 博客自定义配置

8.关于Hexo6.0搭建个人博客(主题优化高级篇)

9.Hexo框架下用NexT(v7.0+)主题美化博客

10.hexo-next主题下的美化

11.NexT主题的配置和优化指南

12.Hexo+NexT 打造一个炫酷博客

14.Hexo 添加Aplayer播放器

15.Hexo NexT主题中添加网页音乐播放器功能

16.Hexo搭建个人博客系列

17.打造个性超赞博客 Hexo + NexT + GitHub Pages 的超深度优化

-----------------------本文结束 感谢阅读-----------------------
坚持原创技术分享,您的支持将鼓励我继续创作!恰饭^.^~