Hexo之Next主题美化代码

CSS/设计
449
0
0
2023-02-12

我分别美化了几个不同版本的Next主题,这里把美化代码公布出来,第一种Next版本小于7.3可使用

直接修改 \themes\next\source\css\_custom 将以下美化过程复制到custom.styl目录即可。

// ************************************************************************************************
// 全局布局美化代码 (包括,主页背景颜色,主页透明度等全局配置)
// By: lyshark  www.blib.cn  lyshark.cnblogs.com
// ************************************************************************************************
// 添加主页背景图片与背景颜色
/*body {
//  background:url(https://source.unsplash.com/random/1600x900);
    background:url(/images/background.jpg);
    background-repeat: no-repeat;
    background-attachment:fixed;
    background-position:50% 50%;
    background:#55aaad;                    // 添加背景颜色
}*/

// 配置全局页面,椭圆化(页面方框变成椭圆的),以及添加透明度(将页面方框透明化)
.header-inner {                                                                                                                                                                                // 菜单栏
    border-radius: 30px 30px 30px 30px;
    box-shadow: 8px 7px 2px 0 rgba(0,0,0,0.12), 7px 4px 1px -2px rgba(0,0,0,0.06), 0 1px 5px 0 rgba(0,0,0,0.12);                      //增加阴影部分
//    background: rgba(255,255,255,.5);                                                                                                                                         // 增加透明度
}
.sidebar-inner {                                                                                                                                                                                // 头衔栏
    border-radius: 30px 30px 30px 30px;
    position: absolute;
    overflow: hidden;
    box-shadow: 8px 7px 2px 0 rgba(0,0,0,0.12), 7px 4px 1px -2px rgba(0,0,0,0.06), 0 1px 5px 0 rgba(0,0,0,0.12);                      // 增加阴影部分
//    background: rgba(255,255,255,.5);                                                                                                                                         // 增加透明度
}
.post-block {                                                                                                                                                                                  // 主文章页面
    border-radius: 30px 30px 30px 30px;
    box-shadow: 8px 7px 2px 0 rgba(0,0,0,0.12), 7px 4px 1px -2px rgba(0,0,0,0.06), 0 1px 5px 0 rgba(0,0,0,0.12);                     // 增加阴影部分
//    background: rgba(255,255,255,.5);                                                                                                                                         // 增加透明度
}
#posts > article + article .post-block {                                                                                                                                           // 后面的文章
    border-radius: 30px 30px 30px 30px;
    box-shadow: 10px 10px 3px 0 rgba(0,0,0,0.15), 10px 4px 1px -2px rgba(0,0,0,0.06), 0 1px 5px 0 rgba(0,0,0,0.12);               //增加阴影部分
//    background: rgba(255,255,255,.5);                                                                                                                                         // 增加透明度
}
.pagination {                                                                                                                                                                                   // 页面分页
    border-radius: 30px 80px 30px 80px;                                                                                                                                        // 扁平化,两边非对称
    box-shadow: 8px 7px 2px 0 rgba(0,0,0,0.12), 7px 4px 1px -2px rgba(0,0,0,0.06), 0 1px 5px 0 rgba(0,0,0,0.12);                      //增加阴影部分
//    background: rgba(255,255,255,.5);                                                                                                                                         // 增加透明度
}
.menu-item-active a, .menu .menu-item a:hover, .menu .menu-item span.exturl:hover {
    background: #f9f9f99e;                                                                                                                                                             // 首页菜单选中后,变成淡白色.
}


// ************************************************************************************************
// 以下代码是针对文章内容的控制       (美化,h2 h3标签,美化代码栏,一二级菜单美化等)
// ************************************************************************************************
// 主标题栏位字体美化
.site-title{
	font-family: 'Lato', "PingFang SC", "华文新魏", sans-serif;
	font-size: 20px;
}
// 主标题栏位背景颜色美化
.site-meta {
    //background-image: linear-gradient(200deg, #e4a0a3, #3F51B5);
    background-image: linear-gradient(90deg, #4263c1 0, #ef4ec5 25%, #b255f3 50%, #4eb2ef 75%, #8466ab 100%);
}
// 控制文章中的h2标签颜色
.post-body h2{
    font-size: 23px;
    font-weight: bold;
    background-color: #31a2e4;
    border-radius: 20px;
    color: #f9f9f9;
    padding-left: 8px;
    text-shadow: 1px 1px 1px #000;
}
// 控制文章中的h3标签颜色
.post-body h3{
    background: #2B6600;
    box-shadow: 0 0 0 1px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5);
    color: #FFFFFF;
    font-family:"微软雅黑", "宋体", "黑体", Arial;
    font-size: 15px;
    font-weight: bold;
    height: 24px;
    line-height: 23px;
    margin: 12px 0 !important;
    padding: 5px 0 5px 10px;
    text-shadow: 2px 2px 3px #222222;
    border-radius: 20px;
}
// 代码框的美化代码
.highlight {
    border-radius: 1px;
    background-color: rgb(246, 248, 250);
    overflow: auto;
    border-width: 1px 1px 1px 2px;
    border-style: dashed dashed dashed solid;
    border-color: rgb(170, 170, 170) rgb(170, 170, 170) rgb(170, 170, 170) rgb(108, 226, 108);
    border-image: initial;
    position: relative;
}
// 针对strong标签的美化效果.
strong{
font-weight: bold;
    /* background-color: #9f95ff; */
    border-radius: 39px;
    color: #171be7;
    padding-left: 0px;
    padding-right: 1px;
    text-shadow: 1px 1px 1px #0003;
}
// 针对Code代码标签的美化
code {
  padding: 2px 4px;
  word-wrap: break-word;
  color: #ff7600;
  background: #fbf7f8;
  border-radius: 3px;
  font-size: 15px;
  font-weight: bolder;
}
// 一二级菜单美化
blockquote {
  padding: 0 15px;
  color: #000000;
  font-family: cursive;
  background-color: #f0faf9;
  border-left-color: #42c1b8;
}
// 下划线,美化
hr {
  background-color: #86dca3;
}
// 去掉图片的边框,显得更加自然
.posts-expand .post-body img {
    border: 1px #6f42c1;
}

// ************************************************************************************************
// 其他美化代码(针对页面标题,文章标题,页面字体颜色,页面控件的美化)
// ************************************************************************************************

// 鼠标选择的段落变成黄色
::selection {
    background-color: #59ff83;
    color: #555;
}
// 对页面文章的标题的美化
.posts-expand .post-title-link {
    color: #d9534f;
}
.posts-expand .post-title {
    color: #d9534f;
}
// 针对阅读全文按钮的美化
.post-button .btn {
    color: #555!important;
    background-color: #fff;
    border-radius: 3px;
    font-size: 15px;
    box-shadow: inset 0 0 10px 0 #e346035c;
    border: none!important;
    transition-property: unset;
    padding: 0 15px;
    border-radius: 30px 30px 30px 30px;
}
// 当光标放入阅读全文上时,应用下面的配色方案
.post-button .btn:hover{
  border-color: #6f42c1;
  color: #fff;
  background: #e431d3;
  background-image: linear-gradient(90deg,#a166ab 0,#ef4e7b 25%,#f37055 50%,#ef4e7b 75%,#a166ab 100%);
}
// 光标放到文章列表上面的时候,会变成彩色
.posts-expand .post-title-link::before {
    background-image: linear-gradient(90deg,#a166ab 0,#ef4e7b 25%,#f37055 50%,#ef4e7b 75%,#a166ab 100%);
}

// 文章分类页面中,标签的颜色属性.
.category-list a{
  color:#6f42c1;
}
// 归档竖线呈现出,彩带效果,包括彩球的美化代码
.posts-collapse::after {
    background-image: linear-gradient(180deg,#f79533 0,#f37055 15%,#ef4e7b 30%,#a166ab 44%,#5073b8 58%,#1098ad 72%,#07b39b 86%,#6dba82 100%);
}
.page-archive .posts-collapse .archive-move-on{
	background-color: #fc6423;
}
.posts-collapse .collection-title::before{
	background-color: #fc6423;
}
.posts-collapse .post-header::before {
	background-color: #f0ffff00;
}
// 美化归档栏整体布局,调整时间日期
.posts-collapse .post-meta {
    color: #5073b8;
    font-weight: 900;
}
.posts-collapse .post-title {
    margin-left: 70px;
}
// 美化标签底部选择按钮(1.2.3.4.5)颜色
.pagination .page-number.current {
    background: #a166ab;
    border-radius: 20px 20px 20px 20px;
}
.pagination .prev, .pagination .next, .pagination .page-number {
    color: blueviolet;
    font-weight: 500;
    border-radius: 30px 30px 30px 30px;
}
// 顶部进度条的隐藏代码
.headband {
  height: 0px;
  background: #fc6423;
}
// 归档的美化,设置归档方框美化
.posts-collapse .post-header {
position: relative;
    transition-duration: 0.2s;
    transition-timing-function: ease-in-out;
    transition-delay: 0s;
    transition-property: inherit;
    /* padding: 10px; */
    /* box-shadow: 0 0 14px #cacbcb; */
    /* background: rgba(255,255,255,0.3); */
    /* border-radius: 10px; */
    /* border-bottom: 1px dashed #f9f9f9; */
    box-shadow: 0 1px 3px #6f42c100, 0 1px 2px #6f42c1;
    padding: 2px 10px;
    margin: 8px;
    background: #c1425c00;
    border-bottom: none;
    border-radius: 20px;
}
// 标签的美化,使用圆形方框美化
.tag-cloud a {
    box-shadow: 0 1px 3px #6f42c1, 0 1px 2px #d9534f;
    padding: 2px 10px;
    margin: 8px;
    background: #c1425c00;
    border-bottom: none;
    border-radius: 20px;
}

next 新版本 7.5以后custom.styl目录消失了,接下来的美化过程针对7.5版本。

修改\themes\NexT\source\css 目录下的main.styl,内容如下。

// CSS Style Guide: http://codeguide.co/#css

$scheme    = hexo-config('scheme') ? hexo-config('scheme') : 'Muse';

$variables = base $scheme;
$mixins    = base $scheme;


// Variables Layer
// --------------------------------------------------
for $variable in $variables
  @import "_variables/" + $variable;
for $inject_variable in hexo-config('injects.variable')
  @import $inject_variable;

// Mixins Layer
// --------------------------------------------------
for $mixin in $mixins
  @import "_mixins/" + $mixin;
for $inject_mixin in hexo-config('injects.mixin')
  @import $inject_mixin;

// Common Layer
// --------------------------------------------------

// Scaffolding
@import "_common/scaffolding";

// Layout
@import "_common/outline";

// Components
@import "_common/components";


// Schemes Layer
// --------------------------------------------------
@import "_schemes/" + $scheme;


// Custom Layer
// --------------------------------------------------
for $inject_style in hexo-config('injects.style')
  @import $inject_style;

// ---------------------------------------------------------------------------------------------------
个人定制美化开始步骤
// ---------------------------------------------------------------------------------------------------

body {
//  background:url(https://source.unsplash.com/random/1600x900);
    background:url(/images/background.jpg);
    background-repeat: no-repeat;
    background-attachment:fixed;
    background-position:50% 50%;
    //background:#55aaad85;                    // 添加背景颜色
}
// 修改全局字体大小
.post-body {
    font-size: 1.0em;
}
// 美化 h2 h3 标签
.post-body h2 {
    border-radius: 20px 20px 20px 20px;
    box-shadow: 0 0 0 1px #5f5a4b, 1px 1px 9px 2px rgba(10,10,0,0.5);
    font-weight: bold;
    background-color: #3199e4;
    border-radius: 5px;
    color: #fff;
    padding-left: 8px;
    text-shadow: 1px 1px 1px #000;
}
.post-body h3 {
    background: #5b9600;
    border-radius: 30px 6px 37px 6px;
    box-shadow: 0 0 0 1px #5f5a4b, 1px 1px 6px 2px rgba(10,10,0,0.5);
    color: #fff;
    font-size: 15px;
    line-height: 20px;
    margin: 12px 0 !important;
    padding: 5px 0 5px 10px;
    text-shadow: 2px 2px 3px #222;
}
pre, .highlight {
    background: #f7f7f7;
    color: #5cb85c;
    line-height: 1.1;
}
// 归档的美化,设置归档方框美化
.posts-collapse .post-header {
position: relative;
    transition-duration: 0.2s;
    transition-timing-function: ease-in-out;
    transition-delay: 0s;
    transition-property: inherit;
    box-shadow: 0 1px 3px #6f42c100, 0 1px 2px #6f42c1;
    padding: 2px 10px;
    margin: 8px;
    background: #c1425c00;
    border-bottom: none;
    border-radius: 20px;
}
// 顶部进度条的隐藏代码
.headband {
  height: 0px;
  background: #fc6423;
}
// 标签的美化,使用圆形方框美化
.tag-cloud a {
    box-shadow: 0 1px 3px #6f42c1, 0 1px 2px #d9534f;
    padding: 2px 10px;
    margin: 8px;
    background: #c1425c00;
    border-bottom: none;
    border-radius: 20px;
}
// 美化标签底部选择按钮(1.2.3.4.5)颜色
.pagination .page-number.current {
    background: #a166ab;
    border-radius: 20px 20px 20px 20px;
}
.pagination .prev, .pagination .next, .pagination .page-number {
    color: blueviolet;
    font-weight: 500;
    border-radius: 30px 30px 30px 30px;
}
// 美化归档栏整体布局,调整时间日期
.posts-collapse .post-meta {
    color: #5073b8;
    font-weight: 900;
}
.posts-collapse .post-title {
    margin-left: 70px;
}
// 归档竖线呈现出,彩带效果,包括彩球的美化代码
.posts-collapse::before {
    background-image: linear-gradient(180deg,#f79533 0,#f37055 15%,#ef4e7b 30%,#a166ab 44%,#5073b8 58%,#1098ad 72%,#07b39b 86%,#6dba82 100%);
}
.page-archive .posts-collapse .archive-move-on{
	background-color: #fc6423;
}
.posts-collapse .collection-title::before{
	background-color: #fc6423;
}
.posts-collapse .post-header::before {
	background-color: #f0ffff00;
}
// 文章分类页面中,标签的颜色属性.
.category-list a{
  color:#6f42c1;
}
// 当光标放入阅读全文上时,应用下面的配色方案
.post-button .btn:hover{
  border-color: #6f42c1;
  color: #fff;
  background: #e431d3;
  background-image: linear-gradient(90deg,#a166ab 0,#ef4e7b 25%,#f37055 50%,#ef4e7b 75%,#a166ab 100%);
}
// 光标放到文章列表上面的时候,会变成彩色
.posts-expand .post-title-link::before {
    background-image: linear-gradient(90deg,#a166ab 0,#ef4e7b 25%,#f37055 50%,#ef4e7b 75%,#a166ab 100%);
}
// 针对阅读全文按钮的美化
.post-button .btn {
    color: #555!important;
    background-color: #fff;
    border-radius: 3px;
    font-size: 15px;
    box-shadow: inset 0 0 10px 0 #e346035c;
    border: none!important;
    transition-property: unset;
    padding: 0 15px;
    border-radius: 30px 30px 30px 30px;
}
// 鼠标选择的段落变成黄色
::selection {
    background-color: #59ff83;
    color: #555;
}
// 对页面文章的标题的美化
.posts-expand .post-title-link {
    color: #d9534f;
}
.posts-expand .post-title {
    color: #d9534f;
}
// 代码框的美化代码
.highlight {
    border-radius: 1px;
    background-color: rgb(246, 248, 250);
    overflow: auto;
    border-width: 1px 1px 1px 2px;
    border-style: dashed dashed dashed solid;
    border-color: rgb(170, 170, 170) rgb(170, 170, 170) rgb(170, 170, 170) rgb(108, 226, 108);
    border-image: initial;
    position: relative;
}
// 针对strong标签的美化效果.
strong{
font-weight: bold;
    /* background-color: #9f95ff; */
    border-radius: 39px;
    color: #171be7;
    padding-left: 0px;
    padding-right: 1px;
    text-shadow: 1px 1px 1px #0003;
}
// 针对Code代码标签的美化
code {
  padding: 2px 4px;
  word-wrap: break-word;
  color: #ff7600;
  background: #fbf7f8;
  border-radius: 3px;
  font-size: 15px;
  font-weight: bolder;
}
// 一二级菜单美化
blockquote {
  padding: 0 15px;
  color: #000000;
  font-family: cursive;
  background-color: #f0faf9;
  border-left-color: #42c1b8;
}
// 下划线,美化
hr {
  background-color: #86dca3;
}
// 去掉图片的边框,显得更加自然
.posts-expand .post-body img {
    border: 1px #6f42c1;
}
// 主标题栏位字体美化
.site-title{
	/*font-family: 'Lato', "PingFang SC", "华文新魏", sans-serif;*/
	/*font-size: 20px;*/
}
// 主标题栏位背景颜色美化
.site-meta {
    //background-image: linear-gradient(200deg, #e4a0a3, #3F51B5);
    //background-image: linear-gradient(90deg, #4263c1 0, #ef4ec5 25%, #b255f3 50%, #4eb2ef 75%, #8466ab 100%);
}
// ---------------------------------------------------------------------------------------------------------------------------------------------
// 暂时屏蔽全局美化过程
/*
// 配置全局页面,椭圆化(页面方框变成椭圆的),以及添加透明度(将页面方框透明化)
.header-inner {                                                                                                                                                                                // 菜单栏
    border-radius: 30px 30px 30px 30px;
    box-shadow: 8px 7px 2px 0 rgba(0,0,0,0.12), 7px 4px 1px -2px rgba(0,0,0,0.06), 0 1px 5px 0 rgba(0,0,0,0.12);                      //增加阴影部分
//    background: rgba(255,255,255,.5);                                                                                                                                         // 增加透明度
}
.sidebar-inner {                                                                                                                                                                                // 头衔栏
    border-radius: 30px 30px 30px 30px;
    position: absolute;
    overflow: hidden;
    box-shadow: 8px 7px 2px 0 rgba(0,0,0,0.12), 7px 4px 1px -2px rgba(0,0,0,0.06), 0 1px 5px 0 rgba(0,0,0,0.12);                      // 增加阴影部分
//    background: rgba(255,255,255,.5);                                                                                                                                         // 增加透明度
}
.post-block {                                                                                                                                                                                  // 主文章页面
    border-radius: 30px 30px 30px 30px;
    box-shadow: 8px 7px 2px 0 rgba(0,0,0,0.12), 7px 4px 1px -2px rgba(0,0,0,0.06), 0 1px 5px 0 rgba(0,0,0,0.12);                     // 增加阴影部分
//    background: rgba(255,255,255,.5);                                                                                                                                         // 增加透明度
}
#posts > article + article .post-block {                                                                                                                                           // 后面的文章
    border-radius: 30px 30px 30px 30px;
    box-shadow: 10px 10px 3px 0 rgba(0,0,0,0.15), 10px 4px 1px -2px rgba(0,0,0,0.06), 0 1px 5px 0 rgba(0,0,0,0.12);               //增加阴影部分
//    background: rgba(255,255,255,.5);                                                                                                                                         // 增加透明度
}
.pagination {                                                                                                                                                                                   // 页面分页
    border-radius: 30px 80px 30px 80px;                                                                                                                                        // 扁平化,两边非对称
    box-shadow: 8px 7px 2px 0 rgba(0,0,0,0.12), 7px 4px 1px -2px rgba(0,0,0,0.06), 0 1px 5px 0 rgba(0,0,0,0.12);                      //增加阴影部分
//    background: rgba(255,255,255,.5);                                                                                                                                         // 增加透明度
}
.menu-item-active a, .menu .menu-item a:hover, .menu .menu-item span.exturl:hover {
    background: #f9f9f99e;                                                                                                                                                             // 首页菜单选中后,变成淡白色.
}
*/

// ------------------------------------------------------------------------------------------
// 二次深度美化
// ------------------------------------------------------------------------------------------
// 给文章概述与文章内容添加上一个方框。
.content .posts-expand .post-block{
    position: relative;
    margin-bottom: 30px;
    padding: 40px 20px;
    font-size: 14px;
    box-shadow: rgba(0,0,0,0.1) 0px 15px 35px 0px, rgba(0, 0, 0, 0.31) 6px 6px 10px 0px;
    border-radius: 16px;
    background-color: #fff;
    transition: -webkit-transform .3s;
    transition: transform .3s;
    transition: transform .3s,-webkit-transform .3s;
    transform-style: preserve-3d;
}
.post-expand .post-body{
    position: relative;
    overflow: visible;
    padding: 20px;
    color: #666;
    font-size: 15px;
    word-break: break-word;
}

接着修改\themes\NexT\source\css\_schemes\Mist\index.styl

//
// Mist scheme
// ==================================================
@import '_layout';
@import '_header';
@import '_menu';
@import '_posts-expand';
@import '../Muse/_sidebar';
@import '../Muse/_sub-menu';

// ----------------------------------------------------------------------------------
// 参数微调
.post-block .posts-collapse{
	margin-left: 10px;
}
.posts-collapse .collection-year {
    margin: 20px 0;
}
.pagination {
    margin: 80px 0 0;
}
.sidebar-toggle {
    display:none;
}
.content {
    padding-top: 40px;
}
.menu {
    text-align: right;
}
.post-button {
    margin-top: 20px;
    text-align: center;
}
.posts-expand .home .post-title, .posts-expand .home .post-meta {
    text-align: center;
}
.posts-expand .post-block:not(:first-child) {
    margin-top: 6px;
}
.pagination {
    margin: 80px 0 0;
    text-align: center;
}
.posts-expand .post-tags {
    display: none;
}
.main-inner {
    //width: 950px;
}
// 鼠标放上去之后呈现出加深的效果
.content .posts-expand .post-block:hover {
    box-shadow: 0 2px 4px 0 rgba(0,0,0,.1), 0 4px 8px 0 rgba(0,0,0,.1), 0 8px 16px 0 rgba(0,0,0,.1), 0 16px 32px 0 rgba(0,0,0,.1);
}

最后附上,插件配置

========================================================================================
自动化页面部署到 GitHub
========================================================================================
hexo g &
cd public &
git config --global user.name "lyshark" &
git config --global user.email  "1181506874@qq.com" &
git init &
git add . &
git commit -m "MyBlog" &
git remote add origin https://github.com/lyshark/lyshark.github.io.git &
git push -f origin master &
echo "push master GitHub " &
del /s /f /q .git &
rd /s /q .git &

========================================================================================
替换底部标签#号为图标
========================================================================================
修改 \themes\next\layout\_macro\post.swig
搜索 rel="tag"># 将 # 换成 <i class="fa fa-tag"></i>

========================================================================================
给站点添加版权声明
========================================================================================
1.新建配置文件,并写入以下内容: \themes\next\layout\_macro\my-copyright.swig

{% if page.copyright %}
<div class="my_post_copyright">
  <p><span>文章作者:</span><a href="/" title="访问 {{ theme.author }} 的个人博客">{{ theme.author }}</a></p>
  <p><span>发布时间:</span>{{ page.date.format("YYYY年MM月DD日 - HH:MM") }}</p>
  <p><span>原始链接:</span><a href="{{ url_for(page.path) }}" title="{{ page.title }}">{{ page.permalink }}</a>
  </p>
  <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license" href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank" title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0 国际</a> 转载请保留原文链接及作者</p>
</div>
{% endif %}
---------------------------------------------------------------------------------------------
2.在目录 \themes\next\source\css\_common\components\post下新建my-post-copyright.styl并写入内容:

.my_post_copyright {
    box-shadow: 10px 1px 10px #989898;
    padding: 10px;
    text-shadow: 1px 1px 1px #FFF;
    font-size: 16px;
    font-family: 'Microsoft Yahei';
    border-left: solid 5px #3199E4;
    background: #F3F3F3;
    border-bottom-left-radius: 10px;
    border-top-left-radius: 10px;
    border-bottom-right-radius: 50%;
    border-top-right-radius: 10px;
}
.my_post_copyright p{margin:0;}
.my_post_copyright span {
  display: inline-block;
  width: 5.2em;
  color: #1d1f21;
  font-weight: bold;
}
.my_post_copyright .raw {
  margin-left: 1em;
  width: 5em;
}
.my_post_copyright a {
  color: #808080;
  border-bottom:0;
}
.my_post_copyright a:hover {
  color: #a3d2a3;
  text-decoration: underline;
}
.my_post_copyright:hover .fa-clipboard {
  color: #000;
}
.my_post_copyright .post-url:hover {
  font-weight: normal;
}
.my_post_copyright .copy-path {
  margin-left: 1em;
  width: 1em;
  +mobile(){display:none;}
}
.my_post_copyright .copy-path:hover {
  color: #808080;
  cursor: pointer;
}

---------------------------------------------------------------------------------------------
3.修改配置文件: \themes\next\layout\_macro\post.swig 修改(335行)

    {% if theme.related_posts.enable and (theme.related_posts.display_in_home or not is_index) %}
      {% include '../_partials/post/post-related.swig' with { post: post } %}
    {% endif %}

#------------------------------------------------------------
<!--增加的底部版权代码-->
<div>
      {% if not is_index %}
        {% include 'my-copyright.swig' %}
      {% endif %}
</div>
#------------------------------------------------------------
    {#####################}
    {### END POST BODY ###}
    {#####################}
---------------------------------------------------------------------------------------------
4.修改\themes\next\source\css\_common\components\post\post.styl文件,在最后一行增加代码:
@import "my-post-copyright";


========================================================================================
给站点添加订阅
========================================================================================
1.首先安装插件: npm install hexo-generator-feed
2.在本地hexo根目录下的_config.yml文件中,添加以下配置

# Extensions
## Plugins: http://hexo.io/plugins/
#RSS订阅
plugin:
- hexo-generator-feed
#Feed Atom
feed:
type: atom
path: atom.xml
limit: 20

========================================================================================
neat 博文压缩功能,npm install hexo-neat --save (主页config.yml添加以下内容)
========================================================================================
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' 

========================================================================================
# 生成短小精悍的文章链接,方便爬取
========================================================================================
# npm install hexo-abbrlink --save
#permalink: :year/:month/:day/:title/
#permalink_defaults: 
#pretty_urls:
#  trailing_index: true

permalink: post/:abbrlink.html
abbrlink:
  alg: crc16
  rep: hex

附上我的config.yml配置文件

override: false
reminder: false
cache:
  enable: true
minify: false

# Define custom file paths.
# Create your custom files in site directory `source/_data` and uncomment needed files below.
custom_file_path:
  #head: source/_data/head.swig
  #header: source/_data/header.swig
  #sidebar: source/_data/sidebar.swig
  #postMeta: source/_data/post-meta.swig
  #postBodyEnd: source/_data/post-body-end.swig
  #footer: source/_data/footer.swig
  #bodyEnd: source/_data/body-end.swig
  #variable: source/_data/variables.styl
  #mixin: source/_data/mixins.styl
  #style: source/_data/styles.styl

# ---------------------------------------------------------------
# 配置页面站点图标等参数
favicon:
  small: /images/favicon-16x16-next.png
  medium: /images/favicon-32x32-next.png
  apple_touch_icon: /images/apple-touch-icon-next.png
  safari_pinned_tab: /images/logo.svg
  #android_manifest: /images/manifest.json
  #ms_browserconfig: /images/browserconfig.xml

# hexo-generator-feed required for rss support. Leave rss as blank to use site's feed link.
# Set rss to false to disable feed link. Set rss to specific value if you have burned your feed already.
rss:

footer:
  # Specify the date when the site was setup. If not defined, current year will be used.
  #since: 2015

  # Icon between year and copyright info.
  icon:
    name: user
    animated: false
    color: "#808080"


# ---------------------------------------------------------------
# 配置底部版权声明,是否关闭
  copyright:
  powered:
    enable: false
    version: false

  theme:
    enable: false
    version: false

  beian:
    enable: false
    icp:
    gongan_id:
    gongan_num:
    gongan_icon_url:

# ---------------------------------------------------------------
# 配置底部版权声明许可
# Available values of license: by | by-nc | by-nc-nd | by-nc-sa | by-nd | by-sa | zero
creative_commons:
  license: by-nc-sa
  sidebar: false
  post: true
  language:

# ---------------------------------------------------------------
# 设置不同的主题风格

#scheme: Muse
scheme: Mist
#scheme: Pisces
#scheme: Gemini

# ---------------------------------------------------------------
# 菜单设置
menu:
  home: / || home
  archives: /archives/ || archive
  tags: /tags/ || tags
  about: /about/ || user
  #categories: /categories/ || th
  #schedule: /schedule/ || calendar
  #sitemap: /sitemap.xml || sitemap
  #commonweal: /404/ || heartbeat

# Enable / Disable menu icons / item badges.
menu_settings:
  icons: true
  badges: false


# ---------------------------------------------------------------
# 设置侧边栏的展示状态

sidebar:
  position: left
  #position: right

  # Manual define the sidebar width. If commented, will be default for:
  # Muse | Mist: 320
  # Pisces | Gemini: 240
  #width: 300

  # Sidebar Display (only for Muse | Mist), available values:
  #  - post    expand on posts automatically. Default.
  #  - always  expand for all pages automatically.
  #  - hide    expand only when click on the sidebar toggle icon.
  #  - remove  totally remove sidebar including sidebar toggle.
  display: hide      # 默认隐藏侧边栏

  # Sidebar offset from top menubar in pixels (only for Pisces | Gemini).
  offset: 12
  # Enable sidebar on narrow view (only for Muse | Mist).
  onmobile: false

# ---------------------------------------------------------------
# 用户头像设置
avatar:
  url: /images/avatar.gif   #头像路径
  rounded: true             #是否变成圆形
  opacity: 1
  rotated: false            #是否可旋转

# Posts / Categories / Tags in sidebar.
site_state: true


# ---------------------------------------------------------------
# 配置小图标栏位
social:
  #GitHub: https://github.com/yourname || github
  #E-Mail: mailto:yourname@gmail.com || envelope
  #Weibo: https://weibo.com/yourname || weibo
  #Google: https://plus.google.com/yourname || google
  #Twitter: https://twitter.com/yourname || twitter
  #FB Page: https://www.facebook.com/yourname || facebook
  #VK Group: https://vk.com/yourname || vk
  #StackOverflow: https://stackoverflow.com/yourname || stack-overflow
  #YouTube: https://youtube.com/yourname || youtube
  #Instagram: https://instagram.com/yourname || instagram
  #Skype: skype:yourname?call|chat || skype

social_icons:
  enable: true
  icons_only: false
  transition: false

# ---------------------------------------------------------------
# 配置友情链接
links_settings:
  icon: link
  title: Links
  # Available values: block | inline
  layout: block
links:
  #Title: http://example.com

# ---------------------------------------------------------------
# 设置文章目录的展示状态
toc:
  enable: true     # 开启文章目录
  number: false    # 是否给文章目录加序号
  wrap: false
  expand_all: false
  max_depth: 6

# A button to open designated chat widget in sidebar.
# Firstly, you need enable the chat service you want to activate its sidebar button.
chat:
  enable: false
  #service: chatra
  #service: tidio
  icon: comment # Icon name in Font Awesome, set false to disable icon.
  text: Chat # Button text, change it as you wish.


# ---------------------------------------------------------------
# Post Settings
# See: https://theme-next.org/docs/theme-settings/posts
# ---------------------------------------------------------------

# Automatically excerpt description in homepage as preamble text.
excerpt_description: true

# Automatically excerpt (Not recommend).
# Use <!-- more --> in the post to control excerpt accurately.
auto_excerpt:
  enable: false
  length: 150

# Read more button
# If true, the read more button would be displayed in excerpt section.
read_more_btn: true

# Post meta display settings
post_meta:
  item_text: true
  created_at: true
  updated_at:
    enable: true
    another_day: true
  categories: true

# Post wordcount display settings
# Dependencies: https://github.com/theme-next/hexo-symbols-count-time
symbols_count_time:
  separated_meta: true
  item_text_post: true
  item_text_total: false
  awl: 4
  wpm: 275

# Use icon instead of the symbol # to indicate the tag at the bottom of the post
tag_icon: false

# Reward (Donate)
# Front-matter variable (unsupport animation).
reward_settings:
  # If true, reward would be displayed in every article by default.
  enable: false
  animation: false
  #comment: Donate comment here.

reward:
  #wechatpay: /images/wechatpay.png
  #alipay: /images/alipay.png
  #bitcoin: /images/bitcoin.png

# Related popular posts
# Dependencies: https://github.com/tea3/hexo-related-popular-posts
related_posts:
  enable: false
  title: # Custom header, leave empty to use the default one
  display_in_home: false
  params:
    maxCount: 5
    #PPMixingRate: 0.0
    #isDate: false
    #isImage: false
    #isExcerpt: false

# Post edit
# Dependencies: https://github.com/hexojs/hexo-deployer-git
post_edit:
  enable: false
  url: https://github.com/user-name/repo-name/tree/branch-name/subdirectory-name # Link for view source
  #url: https://github.com/user-name/repo-name/edit/branch-name/subdirectory-name # Link for fork & edit


# ---------------------------------------------------------------
# Custom Page Settings
# See: https://theme-next.org/docs/theme-settings/custom-pages
# ---------------------------------------------------------------
cheers: true

# ---------------------------------------------------------------
# 控制标签云的显示,与标签的颜色属性
tagcloud:
  min: 12
  max: 30
  start: "#e72c33"
  end: "#6f42c1"
  amount: 200


# Google Calendar
# Share your recent schedule to others via calendar page.
calendar:
  calendar_id: <required> # Your Google account E-Mail
  api_key: <required>
  orderBy: startTime
  offsetMax: 24 # Time Range
  offsetMin: 4 # Time Range
  showDeleted: false
  singleEvents: true
  maxResults: 250


# ---------------------------------------------------------------
# Misc Theme Settings
# ---------------------------------------------------------------

# Set the text alignment in posts / pages.
text_align:
  # Available values: start | end | left | right | center | justify | justify-all | match-parent
  desktop: justify
  mobile: justify

# Reduce padding / margin indents on devices with narrow width.
mobile_layout_economy: false

# Android Chrome header panel color ($brand-bg / $headband-bg => $black-deep).
android_chrome_color: "#222"

# Hide sticky headers and color the menu bar on Safari (iOS / macOS).
safari_rainbow: false

# Custom Logo (Do not support scheme Mist)
custom_logo: #/uploads/custom-logo.jpg

codeblock:
  # Code Highlight theme
  # Available values: normal | night | night eighties | night blue | night bright | solarized | solarized dark | galactic
  # See: https://github.com/chriskempson/tomorrow-theme
  highlight_theme: normal
  # Add copy button on codeblock
  copy_button:
    enable: false
    # Show text copy result.
    show_result: false
    # Available values: default | flat | mac
    style:

# ---------------------------------------------------------------
# 显示返回顶部的状态
back2top:
  enable: true             # 开启返回顶部
  sidebar: false           # 显示当前阅读进度
  scrollpercent: false     # 将返回箭头添加到头像下方

# Reading progress bar
reading_progress:
  enable: false
  # Available values: top | bottom
  position: top
  color: "#37c6c0"
  height: 3px

# Bookmark Support
bookmark:
  enable: false
  # Customize the color of the bookmark.
  color: "#222"
  # If auto, save the reading progress when closing the page or clicking the bookmark-icon.
  # If manual, only save it by clicking the bookmark-icon.
  save: auto

# `Follow me on GitHub` banner in the top-right corner.
github_banner:
  enable: false
  permalink: https://github.com/yourname
  title: Follow me on GitHub


# ---------------------------------------------------------------
# Font Settings
# See: https://theme-next.org/docs/theme-settings/#Fonts-Customization
# ---------------------------------------------------------------
# Find fonts on Google Fonts (https://www.google.com/fonts)
# All fonts set here will have the following styles:
#   light | light italic | normal | normal italic | bold | bold italic
# Be aware that setting too much fonts will cause site running slowly
# ---------------------------------------------------------------
# To avoid space between header and sidebar in scheme Pisces / Gemini, Web Safe fonts are recommended for `global` (and `title`):
# Arial | Tahoma | Helvetica | Times New Roman | Courier New | Verdana | Georgia | Palatino | Garamond | Comic Sans MS | Trebuchet MS
# ---------------------------------------------------------------

font:
  enable: false

  # Uri of fonts host, e.g. //fonts.googleapis.com (Default).
  host:

  # Font options:
  # `external: true` will load this font family from `host` above.
  # `family: Times New Roman`. Without any quotes.
  # `size: x.x`. Use `em` as unit. Default: 1 (16px)

  # Global font settings used for all elements inside <body>.
  global:
    external: true
    family: Lato
    size:

  # Font settings for site title (.site-title).
  title:
    external: true
    family:
    size:

  # Font settings for headlines (<h1> to <h6>).
  headings:
    external: true
    family:
    size:

  # Font settings for posts (.post-body).
  posts:
    external: true
    family:

  # Font settings for <code> and code blocks.
  codes:
    external: true
    family:


# ---------------------------------------------------------------
# SEO Settings
# ---------------------------------------------------------------

# Disable Baidu transformation on mobile devices.
disable_baidu_transformation: false

# Set a canonical link tag in your hexo, you could use it for your SEO of blog.
# See: https://support.google.com/webmasters/answer/139066
# Remember to set up your URL in Hexo `_config.yml` (e.g. url: http://yourdomain.com)
canonical: true

# Change headers hierarchy on site-subtitle (will be main site description) and on all post / page titles for better SEO-optimization.
seo: false

# If true, will add site-subtitle to index page.
# Remember to set up your site-subtitle in Hexo `_config.yml` (e.g. subtitle: Subtitle)
index_with_subtitle: false

# Automatically add external URL with Base64 encrypt & decrypt.
exturl: false

# Google Webmaster tools verification.
# See: https://www.google.com/webmasters
google_site_verification:

# Bing Webmaster tools verification.
# See: https://www.bing.com/webmaster
bing_site_verification:

# Yandex Webmaster tools verification.
# See: https://webmaster.yandex.ru
yandex_site_verification:

# Baidu Webmaster tools verification.
# See: https://ziyuan.baidu.com/site
baidu_site_verification:

# Enable baidu push so that the blog will push the url to baidu automatically which is very helpful for SEO.
baidu_push: false


# ---------------------------------------------------------------
# Third Party Plugins & Services Settings
# See: https://theme-next.org/docs/third-party-services/
# You may need to install dependencies or set CDN URLs in `vendors`
# There are two different CDN providers by default:
#   - jsDelivr (cdn.jsdelivr.net), works everywhere even in China
#   - CDNJS (cdnjs.cloudflare.com), provided by cloudflare
# ---------------------------------------------------------------

# Math Formulas Render Support
math:
  # Default (true) will load mathjax / katex script on demand.
  # That is it only render those page which has `mathjax: true` in Front-matter.
  # If you set it to false, it will load mathjax / katex srcipt EVERY PAGE.
  per_page: true

  # hexo-renderer-pandoc (or hexo-renderer-kramed) required for full MathJax support.
  mathjax:
    enable: false
    # See: https://mhchem.github.io/MathJax-mhchem/
    mhchem: false

  # hexo-renderer-markdown-it-plus (or hexo-renderer-markdown-it with markdown-it-katex plugin) required for full Katex support.
  katex:
    enable: false
    # See: https://github.com/KaTeX/KaTeX/tree/master/contrib/copy-tex
    copy_tex: false

# Easily enable fast Ajax navigation on your website.
# Dependencies: https://github.com/theme-next/theme-next-pjax
# For moreinformation: https://github.com/MoOx/pjax
pjax: false

# FancyBox is a tool that offers a nice and elegant way to add zooming functionality for images.
# For more information: https://fancyapps.com/fancybox
fancybox: false

# A JavaScript library for zooming images like Medium.
# Do not enable both `fancybox` and `mediumzoom`.
# For more information: https://github.com/francoischalifour/medium-zoom
mediumzoom: false

# Vanilla JavaScript plugin for lazyloading images.
# For more information: https://github.com/ApoorvSaxena/lozad.js
lazyload: false

# Pangu Support
# For more information: https://github.com/vinta/pangu.js
pangu: false

# Quicklink Support
# For more information: https://github.com/GoogleChromeLabs/quicklink
# Front-matter (unsupport home archive).
quicklink:
  enable: false

  # Home page and archive page can be controlled through home and archive options below.
  # This configuration item is independent of `enable`.
  home: false
  archive: false

  # Default (true) will initialize quicklink after the load event fires.
  delay: true
  # Custom a time in milliseconds by which the browser must execute prefetching.
  timeout: 3000
  # Default (true) will enable fetch() or falls back to XHR.
  priority: true

  # For more flexibility you can add some patterns (RegExp, Function, or Array) to ignores.
  # See: https://github.com/GoogleChromeLabs/quicklink#custom-ignore-patterns
  ignores:


# ---------------------------------------------------------------
# Comments Settings
# See: https://theme-next.org/docs/third-party-services/comments
# ---------------------------------------------------------------

# Multiple Comment System Support
comments:
  # Available values: tabs | buttons
  style: tabs
  # Choose a comment system to be displayed by default.
  # Available values: changyan | disqus | disqusjs | gitalk | livere | valine
  active:
  # Setting `true` means remembering the comment system selected by the visitor.
  storage: true
  # Modify texts or order for any navs, here are some examples.
  nav:
    #disqus:
    #  text: Load Disqus
    #  order: -1
    #gitalk:
    #  order: -2

# Disqus
disqus:
  enable: false
  shortname:
  count: true
  lazyload: false
  #post_meta_order: 0

# DisqusJS
# Alternative Disqus - Render comment component using Disqus API.
# Demo: https://suka.js.org/DisqusJS/
# For more information: https://github.com/SukkaW/DisqusJS
disqusjs:
  enable: false
  # API Endpoint of Disqus API (https://disqus.com/api/).
  # Leave api empty if you are able to connect to Disqus API.
  # Otherwise you need a reverse proxy for Disqus API.
  # For example:
  # api: https://disqus.skk.moe/disqus/
  api:
  apikey: # Register new application from https://disqus.com/api/applications/
  shortname: # See: https://disqus.com/admin/settings/general/

# Changyan
changyan:
  enable: false
  appid:
  appkey:
  #post_meta_order: 0

# Valine
# You can get your appid and appkey from https://leancloud.cn
# For more information: https://valine.js.org, https://github.com/xCss/Valine
valine:
  enable: false # When enable is set to be true, leancloud_visitors is recommended to be closed for the re-initialization problem within different leancloud adk version
  appid: # Your leancloud application appid
  appkey: # Your leancloud application appkey
  notify: false # Mail notifier. See: https://github.com/xCss/Valine/wiki
  verify: false # Verification code
  placeholder: Just go go # Comment box placeholder
  avatar: mm # Gravatar style
  guest_info: nick,mail,link # Custom comment header
  pageSize: 10 # Pagination size
  language: # Language, available values: en, zh-cn
  visitor: false # leancloud-counter-security is not supported for now. When visitor is set to be true, appid and appkey are recommended to be the same as leancloud_visitors' for counter compatibility. Article reading statistic https://valine.js.org/visitor.html
  comment_count: true # If false, comment count will only be displayed in post page, not in home page
  recordIP: false # Whether to record the commenter IP
  serverURLs: # When the custom domain name is enabled, fill it in here (it will be detected automatically by default, no need to fill in)
  #post_meta_order: 0

# LiveRe comments system
# You can get your uid from https://livere.com/insight/myCode (General web site)
livere_uid: # <your_uid>

# Gitalk
# Demo: https://gitalk.github.io
# For more information: https://github.com/gitalk/gitalk
gitalk:
  enable: false
  github_id: # GitHub repo owner
  repo: # Repository name to store issues
  client_id: # GitHub Application Client ID
  client_secret: # GitHub Application Client Secret
  admin_user: # GitHub repo owner and collaborators, only these guys can initialize gitHub issues
  distraction_free_mode: true # Facebook-like distraction free mode
  # Gitalk's display language depends on user's browser or system environment
  # If you want everyone visiting your site to see a uniform language, you can set a force language value
  # Available values: en | es-ES | fr | ru | zh-CN | zh-TW
  language: zh-CN


# ---------------------------------------------------------------
# Post Widgets & Content Sharing Services
# See: https://theme-next.org/docs/third-party-services/post-widgets
# ---------------------------------------------------------------

# Star rating support to each article.
# To get your ID visit https://widgetpack.com
rating:
  enable: false
  id:     # <app_id>
  color:  fc6423

# AddThis Share. See: https://www.addthis.com
# Go to https://www.addthis.com/dashboard to customize your tools.
add_this_id:


# ---------------------------------------------------------------
# Statistics and Analytics
# See: https://theme-next.org/docs/third-party-services/statistics-and-analytics
# ---------------------------------------------------------------

# Google Analytics
google_analytics:
  tracking_id: # <app_id>
  localhost_ignored: true
  # By default, NexT will load an external gtag.js script on your site.
  # If you only need the pageview feature, set the following option to true to get a better performance.
  only_pageview: false

# Baidu Analytics
baidu_analytics: # <app_id>

# Growingio Analytics
growingio_analytics: # <project_id>

# CNZZ count
cnzz_siteid:

# Tencent analytics
tencent_analytics: # <app_id>

# Tencent MTA
tencent_mta: # <app_id>

# Show number of visitors to each article.
# You can visit https://leancloud.cn to get AppID and AppKey.
leancloud_visitors:
  enable: false
  app_id: # <app_id>
  app_key: # <app_key>
  # Dependencies: https://github.com/theme-next/hexo-leancloud-counter-security
  # If you don't care about security in leancloud counter and just want to use it directly
  # (without hexo-leancloud-counter-security plugin), set `security` to `false`.
  security: true
  betterPerformance: false

# Another tool to show number of visitors to each article.
# Visit https://console.firebase.google.com/u/0/ to get apiKey and projectId.
# Visit https://firebase.google.com/docs/firestore/ to get more information about firestore.
firestore:
  enable: false
  collection: articles # Required, a string collection name to access firestore database
  apiKey: # Required
  projectId: # Required

# ---------------------------------------------------------------
# 是否开启不算子计数器
# Get more information on http://ibruce.info/2015/04/04/busuanzi
busuanzi_count:
  enable: false
  total_visitors: true
  total_visitors_icon: user
  total_views: true
  total_views_icon: eye
  post_views: true
  post_views_icon: eye


# ---------------------------------------------------------------
# Search Services
# See: https://theme-next.org/docs/third-party-services/search-services
# ---------------------------------------------------------------

# Algolia Search
# For more information: https://www.algolia.com
algolia_search:
  enable: false
  hits:
    per_page: 10
  labels:
    input_placeholder: Search for Posts
    hits_empty: "We didn't find any results for the search: ${query}"
    hits_stats: "${hits} results found in ${time} ms"

# Local Search
# Dependencies: https://github.com/theme-next/hexo-generator-searchdb
local_search:
  enable: false
  # If auto, trigger search by changing input.
  # If manual, trigger search by pressing enter key or search button.
  trigger: auto
  # Show top n results per article, show all results by setting to -1
  top_n_per_article: 1
  # Unescape html strings to the readable one.
  unescape: false
  # Preload the search data when the page loads.
  preload: false

# Swiftype Search API Key
swiftype_key:


# ---------------------------------------------------------------
# Chat Services
# See: https://theme-next.org/docs/third-party-services/chat-services
# ---------------------------------------------------------------

# Chatra Support
# See: https://chatra.io
# Dashboard: https://app.chatra.io/settings/general
chatra:
  enable: false
  async: true
  id: # Visit Dashboard to get your ChatraID
  #embed: # Unfinished experimental feature for developers. See: https://chatra.io/help/api/#injectto

# Tidio Support
# See: https://www.tidiochat.com
# Dashboard: https://www.tidiochat.com/panel/dashboard
tidio:
  enable: false
  key: # Public Key, get it from dashboard. See: https://www.tidiochat.com/panel/settings/developer


# ---------------------------------------------------------------
# Tags Settings
# See: https://theme-next.org/docs/tag-plugins/
# ---------------------------------------------------------------

# 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: simple
  icons: false
  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

# Tabs tag
tabs:
  transition:
    tabs: false
    labels: true
  border_radius: 0

# PDF tag, requires two plugins: pdfObject and pdf.js
# pdfObject will try to load pdf files natively, if failed, pdf.js will be used.
# The following `cdn` setting is only for pdfObject, because cdn for pdf.js might be blocked by CORS policy.
# So, you must install the dependency of pdf.js if you want to use pdf tag and make it available to all browsers.
# See: https://github.com/theme-next/theme-next-pdf
pdf:
  enable: false
  # Default height
  height: 500px

# Mermaid tag
mermaid:
  enable: false
  # Available themes: default | dark | forest | neutral
  theme: forest

# ---------------------------------------------------------------
# 开启与关闭页面动画效果
motion:
  enable: false
  async: false
  transition:
    # Transition variants:
    # fadeIn | flipXIn | flipYIn | flipBounceXIn | flipBounceYIn
    # swoopIn | whirlIn | shrinkIn | expandIn
    # bounceIn | bounceUpIn | bounceDownIn | bounceLeftIn | bounceRightIn
    # slideUpIn | slideDownIn | slideLeftIn | slideRightIn
    # slideUpBigIn | slideDownBigIn | slideLeftBigIn | slideRightBigIn
    # perspectiveUpIn | perspectiveDownIn | perspectiveLeftIn | perspectiveRightIn
    post_block: fadeIn
    post_header: swoopIn
    post_body: bounceUpIn
    coll_header: slideLeftIn
    # Only for Pisces | Gemini.
    sidebar: slideUpIn

# Progress bar in the top during page loading.
# Dependencies: https://github.com/theme-next/theme-next-pace
# For more information: https://github.com/HubSpot/pace
pace:
  enable: false
  # Themes list:
  # big-counter | bounce | barber-shop | center-atom | center-circle | center-radar | center-simple
  # corner-indicator | fill-left | flat-top | flash | loading-bar | mac-osx | material | minimal
  theme: minimal

# JavaScript 3D library.
# Dependencies: https://github.com/theme-next/theme-next-three
three:
  enable: false
  three_waves: false
  canvas_lines: false
  canvas_sphere: false

# Canvas-nest
# Dependencies: https://github.com/theme-next/theme-next-canvas-nest
# For more information: https://github.com/hustcc/canvas-nest.js
canvas_nest:
  enable: false
  onmobile: true # Display on mobile or not
  color: "0,0,255" # RGB values, use `,` to separate
  opacity: 0.5 # The opacity of line: 0~1
  zIndex: -1 # z-index property of the background
  count: 99 # The number of lines

# Canvas-ribbon
# Dependencies: https://github.com/theme-next/theme-next-canvas-ribbon
# For more information: https://github.com/zproo/canvas-ribbon
canvas_ribbon:
  enable: false
  size: 300 # The width of the ribbon
  alpha: 0.6 # The transparency of the ribbon
  zIndex: -1 # The display level of the ribbon


#! ---------------------------------------------------------------
#! DO NOT EDIT THE FOLLOWING SETTINGS
#! UNLESS YOU KNOW WHAT YOU ARE DOING
#! See: https://theme-next.org/docs/advanced-settings
#! ---------------------------------------------------------------

# Script Vendors. Set a CDN address for the vendor you want to customize.
# Be aware that you would better use the same version as internal ones to avoid potential problems.
# Remember to use the https protocol of CDN files when you enable https on your site.
vendors:
  # Internal path prefix.
  _internal: lib

  # Internal version: 3.1.0
  # anime: //cdn.jsdelivr.net/npm/animejs@3.1.0/lib/anime.min.js
  anime:

  # Internal version: 4.7.0
  # fontawesome: //cdn.jsdelivr.net/npm/font-awesome@4/css/font-awesome.min.css
  # fontawesome: //cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css
  fontawesome:

  # MathJax
  # mathjax: //cdn.jsdelivr.net/npm/mathjax@2/MathJax.js?config=TeX-AMS-MML_HTMLorMML
  # mathjax: //cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-MML-AM_CHTML
  # mhchem: //cdn.jsdelivr.net/npm/mathjax-mhchem@3
  # mhchem: //cdnjs.cloudflare.com/ajax/libs/mathjax-mhchem/3.3.0
  mathjax:
  mhchem:

  # KaTeX
  # katex: //cdn.jsdelivr.net/npm/katex@0/dist/katex.min.css
  # katex: //cdnjs.cloudflare.com/ajax/libs/KaTeX/0.11.1/katex.min.css
  # copy_tex_js: //cdn.jsdelivr.net/npm/katex@0/dist/contrib/copy-tex.min.js
  # copy_tex_css: //cdn.jsdelivr.net/npm/katex@0/dist/contrib/copy-tex.min.css
  katex:
  copy_tex_js:
  copy_tex_css:

  # Internal version: 0.2.8
  # pjax: //cdn.jsdelivr.net/gh/theme-next/theme-next-pjax@0/pjax.min.js
  pjax:

  # FancyBox
  # jquery: //cdn.jsdelivr.net/npm/jquery@3/dist/jquery.min.js
  # fancybox: //cdn.jsdelivr.net/gh/fancyapps/fancybox@3/dist/jquery.fancybox.min.js
  # fancybox_css: //cdn.jsdelivr.net/gh/fancyapps/fancybox@3/dist/jquery.fancybox.min.css
  jquery:
  fancybox:
  fancybox_css:

  # Medium-zoom
  # mediumzoom: //cdn.jsdelivr.net/npm/medium-zoom@1/dist/medium-zoom.min.js
  mediumzoom:

  # Lazyload
  # lazyload: //cdn.jsdelivr.net/npm/lozad@1/dist/lozad.min.js
  # lazyload: //cdnjs.cloudflare.com/ajax/libs/lozad.js/1.9.0/lozad.min.js
  lazyload:

  # Pangu
  # pangu: //cdn.jsdelivr.net/npm/pangu@4/dist/browser/pangu.min.js
  # pangu: //cdnjs.cloudflare.com/ajax/libs/pangu/4.0.7/pangu.min.js
  pangu:

  # Quicklink
  # quicklink: //cdn.jsdelivr.net/npm/quicklink@1/dist/quicklink.umd.js
  quicklink:

  # DisqusJS
  # disqusjs_js: //cdn.jsdelivr.net/npm/disqusjs@1/dist/disqus.js
  # disqusjs_css: //cdn.jsdelivr.net/npm/disqusjs@1/dist/disqusjs.css
  disqusjs_js:
  disqusjs_css:

  # Valine
  # valine: //cdn.jsdelivr.net/npm/valine@1/dist/Valine.min.js
  # valine: //cdnjs.cloudflare.com/ajax/libs/valine/1.3.10/Valine.min.js
  valine:

  # Gitalk
  # gitalk_js: //cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js
  # gitalk_css: //cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.css
  gitalk_js:
  gitalk_css:

  # Algolia Search
  # algolia_instant_js: //cdn.jsdelivr.net/npm/instantsearch.js@2/dist/instantsearch.min.js
  # algolia_instant_css: //cdn.jsdelivr.net/npm/instantsearch.js@2/dist/instantsearch.min.css
  algolia_instant_js:
  algolia_instant_css:

  # PDF
  # pdfobject: //cdn.jsdelivr.net/npm/pdfobject@2/pdfobject.min.js
  # pdfobject: //cdnjs.cloudflare.com/ajax/libs/pdfobject/2.1.1/pdfobject.min.js
  pdfobject:

  # Mermaid
  # mermaid: //cdn.jsdelivr.net/npm/mermaid@8/dist/mermaid.min.js
  # mermaid: //cdnjs.cloudflare.com/ajax/libs/mermaid/8.3.0/mermaid.min.js
  mermaid:

  # Internal version: 1.2.1
  # velocity: //cdn.jsdelivr.net/npm/velocity-animate@1/velocity.min.js
  # velocity: //cdnjs.cloudflare.com/ajax/libs/velocity/1.2.1/velocity.min.js
  # velocity_ui: //cdn.jsdelivr.net/npm/velocity-animate@1/velocity.ui.min.js
  # velocity_ui: //cdnjs.cloudflare.com/ajax/libs/velocity/1.2.1/velocity.ui.min.js
  velocity:
  velocity_ui:

  # Internal version: 1.0.2
  # pace: //cdn.jsdelivr.net/npm/pace-js@1/pace.min.js
  # pace: //cdnjs.cloudflare.com/ajax/libs/pace/1.0.2/pace.min.js
  # pace_css: //cdn.jsdelivr.net/npm/pace-js@1/themes/blue/pace-theme-minimal.css
  # pace_css: //cdnjs.cloudflare.com/ajax/libs/pace/1.0.2/themes/blue/pace-theme-minimal.min.css
  pace:
  pace_css:

  # Internal version: 1.0.0
  # three: //cdn.jsdelivr.net/gh/theme-next/theme-next-three@1/three.min.js
  # three_waves: //cdn.jsdelivr.net/gh/theme-next/theme-next-three@1/three-waves.min.js
  # canvas_lines: //cdn.jsdelivr.net/gh/theme-next/theme-next-three@1/canvas_lines.min.js
  # canvas_sphere: //cdn.jsdelivr.net/gh/theme-next/theme-next-three@1/canvas_sphere.min.js
  three:
  three_waves:
  canvas_lines:
  canvas_sphere:

  # Internal version: 1.0.0
  # canvas_nest: //cdn.jsdelivr.net/gh/theme-next/theme-next-canvas-nest@1/canvas-nest.min.js
  # canvas_nest_nomobile: //cdn.jsdelivr.net/gh/theme-next/theme-next-canvas-nest@1/canvas-nest-nomobile.min.js
  canvas_nest:
  canvas_nest_nomobile:

  # Internal version: 1.0.0
  # canvas_ribbon: //cdn.jsdelivr.net/gh/theme-next/theme-next-canvas-ribbon@1/canvas-ribbon.js
  canvas_ribbon:

# Assets
css: css
js: js
images: images