前置说明

感谢大佬的技术提供,给dalao们递零食✿✿ヽ(°▽°)ノ✿

魔改预览

🎃主题升级,添加css

🍳简单快速:简单上手,快速修改。

📕优雅阅读:对卡片进行不同的透明度设置,实现更优雅的阅读。

🍭背景也面:多种背景随意更换。

👦个性友联:为你的好友设置不同的颜色,炫彩样式等

🆙Pixiv 日榜:瞒足你的渴望

✈️ 还在评论无法及时回复吗?:双系统评论,邮件通知

⏰ 添加了日历视图:在日历上可以查看到当前日历以及所写的文章日历

🎈页脚更炫酷:彩色渐变 footer 喜欢么?

🍟更多好看的等你发现

JS/CSS 如何使用

下面关于各种修改我会直接给出参考代码,你可以每做一个修改都建立一个新的 css/js 文件,也可以将所有的代码都复制到一个 css/js 文件。

JS/CSS 如何引用

此篇文章所说的一切引用(包括 css js )都可以参考这里。

  1. 打开主题配置文件(butterfly.yml
  2. 定位搜索 inject
  3. 其中 head 是用来引入 css 的。bottom 是用来引入js 的。

注:以上方式 2.3.5 版本可用,其他版本请自行查找引入自定义 js 及 css 的地方

页面模板魔改

分类折叠文章

修改模板源码

  1. 修改 layout/includes/widget/card_categories.pug,把下面代码覆盖已有的,不出意外是可以的,若你懂pug的话具体看自己喜欢咯!

    查看代码

    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
    if site.categories.length
    if !theme.classify_fold.enable
    .card-widget.card-categories
    .card-content
    .item-headline
    i.fa.fa-folder-open
    span= _p('aside.card_categories')
    !=aside_categories({ limit: theme.aside.card_categories.limit === 0 ? 0 : theme.aside.card_categories.limit || 8 })

    else
    .card-widget.card-categories
    .card-content
    .item-headline
    i.fa.fa-folder-open
    span= _p('aside.card_categories')
    ul.card-category-list
    mixin displayCategories(parent = undefined)
    - site.categories.find({ parent }).sort("name").each(function(category) {
    - var childCount = site.categories.find({ parent: category._id }).count();
    li.card-category-list-item
    div.card-category-list-link
    a.card-category-list-name(href=url_for(category.path))= category.name
    span.card-category-list-count= category.length
    if childCount > 0
    i.fa.fa-chevron-left(onclick="classifyclick(this)")
    else if theme.classify_fold.post
    i.fa.fa-chevron-left(onclick="classifyclick(this)")

    if childCount > 0
    ul.card-category-list.child
    +displayCategories(category._id)
    else if theme.classify_fold.post
    ul.card-post-list.child.card-category-list.child
    - site.categories.findOne({name: category.name}).posts.forEach(function(post){
    li.card-post-list-item.card-category-list-item
    div.card-post-list-link.card-category-list-link
    a.card-post-name(title=post.title,href=url_for(post.path))= post.title
    - })
    - })

    +displayCategories()
  2. 修改 /css/_layout/aside.styl,找到开始和结束的位置把中间那部分覆盖已有的代码,注意缩进,大约 147 行开始,这个是卡片相关

    查看代码

    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
    以上部分代码省略...
    color: $light-blue !important

    &.no-aside-cover
    .aside-post_title
    height: auto
    大约147行,从这里开始:

    .card-archives ul.card-archive-list,
    .card-categories ul.card-category-list
    margin: 0
    padding: .2rem 0 0
    list-style: none

    .card-archives ul.card-archive-list > .card-archive-list-item,
    .card-categories ul.card-category-list > .card-category-list-item
    padding: .15rem 1rem
    transition: all .5s

    &:hover
    padding: .15rem .85rem
    background-color: $light-blue

    a
    color: $font-black

    span
    display: inline-block
    overflow: hidden
    vertical-align: bottom
    text-overflow: ellipsis
    white-space: nowrap

    &:first-child
    width: 80%

    &:last-child
    width: 20%
    text-align: right

    &.more
    span
    padding-right: .3rem
    width: auto !important
    transition: .5s

    &:hover
    span
    padding-right: .6rem

    if hexo-config('classify_fold.enable')
    .card-categories ul .card-category-list-name{
    display:inline-block;
    width: 70%
    cursor: pointer
    }
    .card-categories ul .card-category-list-count{
    display:inline-block;
    width: 20%
    }
    .card-categories ul .fa{
    display:inline-block;
    width: 10%
    cursor: pointer
    }
    .card-categories ul ul{
    display: none
    }

    .card-categories ul .card-post-name{
    overflow: hidden
    text-overflow: ellipsis
    white-space: nowrap
    display: block
    }

    .card-categories
    .card-category-list
    &.child
    padding: 0 0 0 1.2rem

    到这里结束

    .card-webinfo
    .webinfo
    padding: .2rem 1rem

    .webinfo-item
    display: block
    以下部分省略...
  3. 适配黑暗模式,修改 source/css/_mode/darkmode.styl,约 187 行处添加以下代码
    1
    2
    3
    4
    5
    if hexo-config('classify_fold.enable')
    .card-categories ul .card-post-name,
    .card-categories ul .card-category-list-name{
    color: alpha(#FFFFFF, .6) !important
    }

js 外挂

适配点击效果,需要增加 js 文件

查看代码

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
classifyclick = function(classify){
var expan = $(classify).parent().parent().next();
var temp = expan
if(expan.css("display") == "none"){
$(classify).removeClass("fa-chevron-left")
$(classify).addClass("fa-chevron-down")
expan.css('height', '');
expan.css("display", "block");
height = expan.height();
expan.css("height", "0px");
expan.animate({height: height + 'px'});
while(temp.parent().hasClass("child")){
temp.parent().animate({height: temp.parent().height() + height + 'px'})
temp = temp.parent()
}
}
else{
$(classify).removeClass("fa-chevron-down")
$(classify).addClass("fa-chevron-left")
temp_classify = classify;
height = expan.height();
expan.animate({height: '0px'}, {complete: function() {$(temp_classify).parent().parent().next().css("display", "none");}});
while(temp.parent().hasClass("child")){
temp.parent().animate({height: (temp.parent().height() - height) + 'px'})
temp = temp.parent()
}
}
}

增加配置

butterfly.yml 主题配置文件中,添加以下配置:

1
2
3
classify_fold: # 分类是否折叠
enable: true # 是否开启
post: true # 最后一层目录是文章

小康版本的分类卡片折叠

同时引入 cssjs,注意:这是2.3.5版本的,注意其他版本可能不会适配

查看代码

css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
#aside_content
.card-archives
ul.card-archive-list
> .card-archive-list-item
a
span:first-child,
#aside_content
.card-categories
ul.card-category-list
> .card-category-list-item
a
span:first-child {
width: auto;
min-width: 50%;
}

js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
var card_category_list = document.getElementsByClassName(
"card-category-list child"
);
var item = document.getElementsByClassName("card-category-list-item");
function toggle(t) {
var display = t.parentElement.nextSibling.style.display;
if (display == "none") {
t.parentElement.nextSibling.style.display = "block";
t.parentElement.nextSibling.style.height = "100%";
t.className = t.className.replace("fa-chevron-up", "fa-chevron-down");
} else {
t.parentElement.nextSibling.style.display = "none";
t.className = t.className.replace("fa-chevron-down", "fa-chevron-up");
}
}

for (var i = 0; i < card_category_list.length; i++) {
card_category_list[i].style.display = "none";
card_category_list[i].style.transition = "all 1s";
card_category_list[i].previousSibling.innerHTML +=
'<i class="fa fa-chevron-up menus-expand menus-closed" aria-hidden="true" style="margin-left:20px;" onclick="toggle(this)"></i>';
}

Pixiv 日榜

注意: https://cloud.mokeyjay.com/pixiv 使用的是超能小紫提供的服务,也可以自行搭建,搭建方式请看这里->传送门

Butterfly 主题

  1. themes\Butterfly\layout\includes\widget文件夹新建card_pixiv.pug 文件,文件内容如下:

    1
    2
    3
    4
    5
    6
    .card-widget.card-pixiv
    .card-content
    .item-headline
    i.fa.fa-image(aria-hidden="true")
    span= _p('aside.card_pixiv')
    iframe(src="https://cloud.mokeyjay.com/pixiv" frameborder="0" style="width:99%;height:380px;margin:0;")
  2. 编辑 themes\Butterfly\layout\includes\widget\index.pug 文件,在你想要显示的位置插入以下代码(注意要对齐还有不要有空格符):

    1
    2
    if theme.aside.card_pixiv
    !=partial('includes/widget/card_pixiv', {}, {cache:theme.fragment_cache})
  3. 编辑 butterfly.yml 文件,在 card_webinfo 下面添加一行 card_pixiv: true

  4. 编辑 themes\Butterfly\languages\zh-CN.yml 文件 (请根据你的网站语言选择),找到 card_announcement: 公告 , 在下面添加一行 card_pixiv: Pixiv日榜Top50(后面的文本可自定义)

  5. 如果不想显示,直接把 butterfly.yml 文件的 card_pixiv: true 改为 card_pixiv: false 即可

其他主题

将以下内容插入到需要显示的地方:

1
<iframe src="https://cloud.mokeyjay.com/pixiv" frameborder="0" style="width:100%;height:380px;margin:0;"></iframe>

文章日历

本方法只适用于 Butterfly 主题!

  1. 安装 hexo-generator-calendar 插件

    1
    npm install --save git://github.com/howiefh/hexo-generator-calendar.git
  2. 下载 calendar.jslanguages.js 文件,保存到 themes\Butterfly\source\js 目录

  3. 编辑 calendar.js 文件,在文件最后}(jQuery)); 之前添加:

    1
    2
    3
    $(document).ready(function () {
    $('#calendar').aCalendar('zh-CN');//'zh-CN'请根据自己博客的语言选择
    });
  4. 编辑 butterfly.yml 文件,以下两个你 butterfly.yml

    文件里有哪个就用那个,不要都用!

    • CDN_USE->js 下面添加如下内容:

      1
      2
      - <script src="/js/calendar.js"></script>
      - <script src="/js/languages.js"></script>
    • inject->bottom 下面添加如下内容:

      1
      2
      - <script src="/js/calendar.js"></script>
      - <script src="/js/languages.js"></script>
  5. themes\Butterfly\source\css_layout新建 calendar,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
    #calendar
    a
    text-decoration none

    .cal-head
    margin-bottom: 15px
    position relative
    height 20px
    padding 8px 6px 2px 6px

    .cal-prev,.cal-next
    position absolute
    top 9px
    width 16px
    height 18px
    padding 3px 4px
    border 1px solid transparent
    color #333
    outline 0

    .cal-prev
    left 8px
    &:before
    border-right 9px solid #333

    .cal-next
    right 8px
    &:before
    border-left 9px solid #333

    .cal-prev:before,.cal-next:before
    content ''
    display block
    width 0
    height 0
    border-top 5px solid transparent
    border-bottom 5px solid transparent

    .cal-title
    width 120px
    margin 0 auto
    color #333
    font bold 14px/18px Arial
    text-align center
    a
    border 1px solid transparent
    color #9f9f9f

    .cal,
    .cal th,
    .cal td
    border 1px solid #d1d1d1

    .cal
    display: table
    border-collapse separate
    border-spacing 0
    border-width 1px 0 0 1px
    table-layout fixed
    width 100%
    margin 0
    th
    background #9f9f9f
    color #fff
    border-width 0 1px 1px 0
    font-weight 700
    td
    border-width 0 1px 1px 0
    tbody
    a
    background-color #007acc
    color #fff
    display block
    font-weight 700
    .cal-today
    background-color #66ecfd
    color #fff
    .cal-gray
    color #bbb8b8

    [data-theme='dark'] .cal .cal-gray
    color #505050

    .cal th,
    .cal td
    font-weight normal
    line-height 2.5625
    padding 0
    text-align center

    [data-theme='dark'] .cal .cal-foot
    color #9f9f9f

    .cal .cal-foot
    color #2ca6cb

    .cal-title a:hover,
    .cal-prev:hover,
    .cal-next:hover,
    .cal .cal-foot:hover,
    .cal .cal-foot:focus,
    .cal tbody a:hover,
    .cal tbody a:focus
    background-color #686868
    color #fff
    cursor pointer
  6. themes\Butterfly\layout\includes\widget 文件夹新建 card_calendar.pug 文件,文件内容如下:

    1
    2
    3
    4
    5
    6
    7
    .card-widget.card-calendar
    .card-content
    .item-headline
    i.far.fa-calendar-alt(aria-hidden="true")
    span= _p('aside.card_calendar')
    div.widget-wrap
    div#calendar.widget
  7. 编辑 themes\Butterfly\layout\includes\widget\index.pug 文件,在你想要显示的位置插入以下代码:

    1
    2
    if theme.aside.card_calendar
    include ./card_calendar.pug
  8. 编辑 butterfly.yml 文件,在 card_webinfo 下面添加一行 card_calendar: true

  9. 编辑 themes\Butterfly\languages\zh-CN.yml 文件 (请根据你的网站语言选择),找到 card_announcement: 公告 , 在下面添加一行 card_calendar: 文章日历 (后面的文本可自定义)

  10. 如果不想显示,直接把 butterfly.yml 文件的 card_calendar: true 改为 card_calendar: false 即可

文章统计图表

  1. 安装插件

    1
    npm install hexo-charts -S
  2. 归档页面
    在主题目录/Butterfly/layout/archive.pug文件的#archive下面添加一行#posts-chart, 新添加的比上一行多缩进两个空格

    1
    2
    3
    4
    block content
    include ./includes/mixins/article-sort.pug
    #archive
    #posts-chart
  3. 标签和分类页
    编辑主题目录/Butterfly/layout/page.pug文件,在.tag-cloud下面添加一行#tags-chart,在.category-content下面添加一行#categories-chart,新添加的比上一行多缩进两个空格。

    1
    2
    3
    4
    block content
    if page.type === 'tags'
    .tag-cloud
    #tags-chart
    1
    2
    3
    else if page.type === 'categories'
    .category-content
    #categories-chart
  4. 此功能参考自懒人大佬

页脚跳动的心

Butterfly 主题

  1. 编辑博客根目录 themes/Butterfly/layout/includes/footer.pug 文件,找到下面的代码:

    1
    .copyright!= `&copy;${theme.since} - ${nowYear} By ${config.author}`

    将其改为下面的代码:

    1
    &copy;${theme.since} - ${nowYear + ' '}跳动的心 ${config.author}

    跳动的心替换为下面的代码:

    1
    <i id="heartbeat" class="fa fas fa-heartbeat"></i>
  2. 编辑 butterfly.yml 文件,以下两个你 butterfly.yml

    文件里有哪个就用那个,不要都用!

    • CDN_USE->css 下面添加如下内容:
      1
      - https://cdn.jsdelivr.net/gh/HCLonely/images@master/others/heartbeat.min.css
    • inject->head 下面添加如下内容:
      1
      - <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/HCLonely/images@master/others/heartbeat.min.css">

其他主题

  1. 添加到需要显示的位置

    1
    <i id="heartbeat" class="fa fas fa-heartbeat"></i>
  2. 将以下内容添加到 标签内:

    1
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/HCLonely/images@master/others/heartbeat.min.css">

    说明:你也可以自己cdn引用源码,看自己情况吧!

页脚显示网站运行时间

编辑博客根目录/themes/Butterfly/layout/includes/footer.pug 文件,在最后 span=theme.ICP.text 下一行添加以下内容:

1
2
3
#running-time
script.
setInterval(()=>{let create_time=Math.round(new Date(Date.UTC(2020,01,03,0,0,0)).getTime()/1000);let timestamp=Math.round((new Date().getTime()+8*60*60*1000)/1000);let second=timestamp-create_time;let time=new Array(0,0,0,0,0);if(second>=365*24*3600){time[0]=parseInt(second/(365*24*3600));second%=365*24*3600;}if(second>=24*3600){time[1]=parseInt(second/(24*3600));second%=24*3600;}if(second>=3600){time[2]=parseInt(second/3600);second%=3600;}if(second>=60){time[3]=parseInt(second/60);second%=60;}if(second>0){time[4]=second;}currentTimeHtml='本站已安全运行 '+time[0]+' 年 '+time[1]+' 天 '+time[2]+' 时 '+time[3]+' 分 '+time[4]+' 秒';document.getElementById("running-time").innerHTML=currentTimeHtml;},1000);

注意 #running-time与上面的if theme.ICP.enable 对齐!要将 Date.UTC (2020,01,03,0,0,0) 改为你网站的起始时间!

其他主题

将以下内容添加到需要显示的位置

1
2
<div id="running-time"></div>
<script>setInterval(()=>{let create_time=Math.round(new Date(Date.UTC(2020,01,03,0,0,0)).getTime()/1000);let timestamp=Math.round((new Date().getTime()+8*60*60*1000)/1000);let second=timestamp-create_time;let time=new Array(0,0,0,0,0);if(second>=365*24*3600){time[0]=parseInt(second/(365*24*3600));second%=365*24*3600;}if(second>=24*3600){time[1]=parseInt(second/(24*3600));second%=24*3600;}if(second>=3600){time[2]=parseInt(second/3600);second%=3600;}if(second>=60){time[3]=parseInt(second/60);second%=60;}if(second>0){time[4]=second;}currentTimeHtml='本站已安全运行 '+time[0]+' 年 '+time[1]+' 天 '+time[2]+' 时 '+time[3]+' 分 '+time[4]+' 秒';document.getElementById("running-time").innerHTML=currentTimeHtml;},1000);</script>

随机文章跳转

  1. 在博客根目录/scripts(没有请自行创建) 下新建 random.js 文件,内容如下:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    hexo.extend.generator.register('random', function (locals) {
    const config = hexo.config.random || {}
    const posts = []
    for (const post of locals.posts.data) {
    if (post.random !== false) posts.push(post.path)
    }
    return {
    path: config.path || 'random/index.html',
    data: `<html><head><script>var posts=${JSON.stringify(posts)};window.open('/'+posts[Math.floor(Math.random() * posts.length)],"_self")</script></head></html>`
    }
    })

    打开 /random/ 就会随机跳转一篇文章

  2. 可选配置,可以在_config.yml 添加以下配置:

    1
    可以在_config.yml 添加以下配置:

    若不想随机跳转到某篇文章,那就在这篇文章 Front-matter 添加 random: false

友链样式美化

  1. themes/Butterfly/layout/flink.pug 原本的文件内容删去,直接负责替换如下内容:

    查看代码

    2.3.5版本

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    #page
    .flink#article-container
    each i in site.data.link
    h2= i.class_name
    h4= i.cdescr
    .post-cards
    .md-links
    each item in i.link_list
    .md-links-item(style= item.color ? `--primary-color:${item.color};border-width:${item.width};border-style:${item.style};animation: ${item.custom} ${item.time} infinite alternate; background:${item.background}` : 'border-width:0px;border-style:solid;animation: link_custom 0s infinite alternate;background:0')
    a.customcolor(href=item.link title=item.name target="_blank" rel=item.remove ? "external nofollow" : "" style=item.namecolor ? `--namecolor:${item.namecolor}` : '')
    if theme.lazyload.enable
    img.lazyload(data-src=item.avatar onerror=`this.onerror=null;this.src='` + url_for(theme.lodding_bg.flink) + `'` alt=item.name,style=item.rotate ? `--primary-rotate:${item.rotate};--autotime:${item.autotime};` : '--primary-rotate:0deg' class=item.autorotate ? `${item.autorotate}` : '')
    else
    img(src=item.avatar onerror=`this.onerror=null;this.src='` + url_for(theme.lodding_bg.flink) + `'` alt=item.name )
    .md-links-title= item.name
    .md-links-des= item.descr
    != page.content
    if page.comments !== false
    include includes/comments/index.pug

    3.0版本

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    #page
    .flink#article-container
    if site.data.link
    each i in site.data.link
    if i.class_name
    h2!= i.class_name
    h4= i.class_descr
    if i.class_desc
    .flink-desc!=i.class_desc
    .flink-list
    each item in i.link_list
    .flink-list-item(style= item.color ? `--primary-color:${item.color};border-width:${item.width};border-style:${item.style};animation: ${item.custom} ${item.time} infinite alternate; background:${item.background}` : 'border-width:0px;border-style:solid;animation: link_custom 0s infinite alternate;background:0')
    a(href=url_for(item.link) title=item.name target="_blank" rel=item.remove ? "external nofollow" : "" style=item.namecolor ? `--namecolor:${item.namecolor}` : '')
    if theme.lazyload.enable
    img(data-src=url_for(item.avatar) onerror=`this.onerror=null;this.src='` + url_for(theme.error_img.flink) + `'` alt=item.name ,style=item.rotate ? `--primary-rotate:${item.rotate};--autotime:${item.autotime};` : '--primary-rotate:0deg' class=item.autorotate ? `${item.autorotate}` : '')
    else
    img(src=url_for(item.avatar) onerror=`this.onerror=null;this.src='` + url_for(theme.error_img.flink) + `'` alt=item.name )
    .flink-item-name= item.name
    .flink-item-desc= item.descr
    != page.content
    if page.comments !== false
    include includes/comments/index.pug
  2. 在主题配置文件 source/_data/butterfly.yml 添加如下样式
    1
    2
    # 友链接样式
    - <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/chuchendjs/cdn/css/friendlink.css">
  3. link.yml 如何引入

    查看代码

    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
    class_test:
    class_name: class名
    cdescr: 小字描述支持html标签
    link_list:
    name: 初辰博客
    link: https://chuchendjs.github.io
    avatar: https://cdn.jsdelivr.net/gh/picgo/picgo/bt-sonny.jpg
    descr: 更多效果自行搭配
    # 边框大小 默认为0
    width: 0px
    # 边框样式 默认 solid
    style: solid
    # 边框颜色 默认淡蓝色 #49b1f5
    color: "#0078e7"
    # 自动旋转 可选值 flash(闪现) link_custom(单色呼吸灯) link_custom1(彩色呼吸灯)
    custom: link_custom1
    # 动画时长设定,默认为0
    time: 4s
    # name的颜色
    namecolor: "#ff9191"
    # descr的颜色
    descolor: "#ff9191"
    # 背景颜色
    background: 0
    # 鼠标悬停旋转角度
    rotate: 360deg
    # 自动旋转 latuo左旋转 rauto右旋转
    autorotate: "lauto"
    # 旋转的周期(时长)
    autotime: 2s
    #移除此链接的权重 0为否 非0为移除
    remove: 0

全局添加吸底音乐APlayer

传送门: 全局添加吸底音乐APlayer

视觉美观

背景

开启需关闭背景图片设置,为不影响美观,建议关闭 js 动态背景。(butterfly.yml->主题的 background 请设置’#efefef’)

移动端优化

1
2
3
4
5
6
7
8
/*移动端优化:去除归档、标签、最新文章、公告d等,只保留网站统计*/

@media screen and (max-width: 800px) {
#aside_content div:not(:last-child) {
display: none;
font-size: 13px;
}
}

去掉 Banner 图

通过几行 JS 即可实现:

1
2
3
4
var full_page = document.getElementsByClassName("full_page");
if (full_page.length != 0) {
full_page[0].style.background = "transparent";
}

鼠标样式

将以下代码复制到你所创建的 css 文件即可。

1
2
3
4
5
6
7
8
9
body {
cursor: url(https://cdn.jsdelivr.net/gh/sviptzk/HexoStaticFile@latest/Hexo/img/default.cur),
default;
}
a,
img {
cursor: url(https://cdn.jsdelivr.net/gh/sviptzk/HexoStaticFile@latest/Hexo/img/pointer.cur),
default;
}

代码解读 你也可以将上面的代码替换你喜欢的鼠标样式即可

鼠标 * 字跟随样式

这个是js实现的效果,可以全局引入,这样就会在整个博客都有这种效果。当然也可以只在某个文章引入。

亲测:全局引入会让整个页面加载起来变慢,所以建议在某个页面单独引入。

  1. 全局引入:在butterfly.yml 配置文件
    1
    https://cdn.jsdelivr.net/gh/chuchendjs/HBJC@master/js/mouse_snow.min.js
  2. 只在部分文章引入
    将下边内容复制到 markdown 即可。注意:如果你的编辑器为你转化成了代码块,请删掉代码块。因为这是一个 HTML 标签
    1
    <script src='https://cdn.jsdelivr.net/gh/chuchendjs/HBJC@master/js/mouse_snow.min.js'></script>

页脚渐变

可以自己创建css文件在配置文件引入即可

查看代码

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
/* 页脚footer */
/* 渐变色滚动动画 */
@-webkit-keyframes Gradient {
0% {
background-position: 0 50%;
}

50% {
background-position: 100% 50%;
}

100% {
background-position: 0 50%;
}
}

@-moz-keyframes Gradient {
0% {
background-position: 0 50%;
}

50% {
background-position: 100% 50%;
}

100% {
background-position: 0 50%;
}
}

@keyframes Gradient {
0% {
background-position: 0 50%;
}

50% {
background-position: 100% 50%;
}

100% {
background-position: 0 50%;
}
}
#footer {
background: linear-gradient(-45deg, #ee7752, #ce3e75, #23a6d5, #23d5ab);
background-size: 400% 400%;
-webkit-animation: Gradient 10s ease infinite;
-moz-animation: Gradient 10s ease infinite;
animation: Gradient 10s ease infinite;
-o-user-select: none;
-ms-user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
#footer:before {
background-color: rgba(0, 0, 0, 0);
}

滚动条


将以下代码复制到你所创建的 css 文件即可

查看代码

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
/* 滚动条 */
::-webkit-scrollbar {
width: 8px;
height: 8px;
}

::-webkit-scrollbar-track {
background-color: rgba(73, 177, 245, 0.2);
border-radius: 2em;
}

::-webkit-scrollbar-thumb {
background-color: #49b1f5;
background-image: -webkit-linear-gradient(
45deg,
rgba(255, 255, 255, 0.4) 25%,
transparent 25%,
transparent 50%,
rgba(255, 255, 255, 0.4) 50%,
rgba(255, 255, 255, 0.4) 75%,
transparent 75%,
transparent
);
border-radius: 2em;
}

::-webkit-scrollbar-corner {
background-color: transparent;
}

::-moz-selection {
color: #fff;
background-color: #49b1f5;
}

手机侧边栏默认不展开

1
2
3
4
5
6
7
8
9
var mobile_sidebar_menus = document.getElementById("mobile-sidebar-menus");
var menus_item_child = mobile_sidebar_menus.getElementsByClassName(
"menus_item_child"
);
var menus_expand = mobile_sidebar_menus.getElementsByClassName("menus-expand");
for (var i = 0; i < menus_item_child.length; i++) {
menus_item_child[i].style.display = "none";
menus_expand[i].className += " menus-closed";
}

阅读模式的背景与字体

阅读模式下会给 body 加一个 class 名

1
2
3
4
5
6
7
8
9
.read-mode{
/* 字体大小 */
font-size:17px;
/* 可以在这里引入自定义字体,具体方法请自行百度css引入字体 */
}
.read-mode #web_bg{
/* 背景颜色 */
background:#fdf6e3;
}

mac代码框美化

butterfly.ymlhighlight_theme 配置项改为 mac 后引入下方一个 css 即可

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
#article-container figure.highlight,
#article-container pre {
color: #aaa8a3;
background: #f3f3f3 /*中间代码的背景颜色*/
}

#article-container figure.highlight .highlight-tools {
color: #e9b125;
background: #eee
}

#article-container figure.highlight .gutter pre {
color: hsla(30, 1%, 74%, 0.952);
background: #f3f3f3
}

#article-container figure.highlight figcaption a {
color: #f3f3f3 !important
}

移动端优化

移动端优化:去除归档、标签、最新文章、公告等,只保留网站统计

1
2
3
4
5
6
7
8
/*移动端优化:去除归档、标签、最新文章、公告等,只保留网站统计*/

@media screen and (max-width: 800px) {
#aside_content div:not(:last-child) {
display: none;
font-size: 13px;
}
}

搞笑标题

这里添加的js可能不太友好,自己衡量吧!

加入下面的js即可:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var OriginTitle = document.title;
var titleTime;
document.addEventListener('visibilitychange', function() {
if (document.hidden) {
$('[rel="icon"]').attr('href', "/img/favicon.ico");
document.title = 'ヽ(●-`Д´-)ノ怎么消失里呢';
clearTimeout(titleTime);
} else {
$('[rel="icon"]').attr('href', "/img/favicon.ico");
document.title = 'ヾ(Ő∀Ő3)ノ哇,又好啦!' + OriginTitle;
titleTime = setTimeout(function() {
document.title = OriginTitle;
}, 2000);
}
});

添加top背景视频

此处添加js即可生效,不过会拖慢网站,所以不建议添加,这里给出只是给喜欢的同学添加好吧!

查看代码

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
//判断移动端设备
browserRedirect();

function browserRedirect() {
var sUserAgent = navigator.userAgent.toLowerCase();
var bIsIpad = sUserAgent.match(/ipad/i) == "ipad";
var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os";
var bIsMidp = sUserAgent.match(/midp/i) == "midp";
var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";
var bIsUc = sUserAgent.match(/ucweb/i) == "ucweb";
var bIsAndroid = sUserAgent.match(/android/i) == "android";
var bIsCE = sUserAgent.match(/windows ce/i) == "windows ce";
var bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile";
if (!(bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM)) {
var html = "<video loop autoplay style='height: 100%;width: 100%;object-fit: cover;'><source src='你的视频地址'></source></video>";
/*添加video*/
document.getElementById("nav").innerHTML += html;

/*打字效果*/
var subtitle = document.getElementById('subtitle')
var i = 0;

function typing() {
var timer = 0;
var str = '加油!欧力给!';
if (i <= str.length) {
subtitle.innerHTML = str.slice(0, i++)
timer = setTimeout(typing, 300)

} else {
subtitle.innerHTML = str
clearTimeout(timer)
}
}

typing()
}
}

任意元素添加动图

理论上给任意 DOM 元素添加的是ok的,引入一个 css 库即可使用,链接这里直接给出https://cdn.jsdelivr.net/gh/chuchendjs/HBJC@master/css/font-awesome-animation.min.css,具体实现请看这里:动图

背景设置页

实现此功能需要同时引入css,js

  1. js代码如下:

    查看代码

    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
    // 获取标签
    // 全局背景div
    var web_bg = document.getElementById("web_bg");
    // 公共父级
    var content_inner = document.getElementById("content-inner");
    // 获取Cookies
    // 透明度
    var opacity = Cookies.get("opacity");
    // 背景
    var bg = Cookies.get("bg");
    // 动画
    var animation = Cookies.get("animation");
    // 背景类型
    var type = Cookies.get("type");
    // 声明遍历 用于记录当前color
    // 设置背景
    if (bg) {
    web_bg.style.background = bg;
    web_bg.setAttribute("data-type", type);
    if (animation) {
    web_bg.style.animation = animation;
    }
    }
    function setColor(opacity) {
    // style="--light_bg_color: rgb(255, 255, 255,.3);--dark_bg_color: rgba(18,18,18,.2);"
    var light_bg_color = "--light_bg_color: rgb(255, 255, 255," + opacity + ");";
    var dark_bg_color = "--dark_bg_color: rgba(18,18,18," + opacity + ");";
    content_inner.setAttribute("style", light_bg_color + dark_bg_color);
    }
    setColor(opacity);
  2. css代码:

    查看代码

    1
    2
    3
    4
    5
    6
    7
    #aside_content .card-widget,#recent-posts>.recent-post-item,.layout_page>div:first-child:not(.recent-posts),.layout_post>#page,.layout_post>#post,.read-mode .layout_post>#post {
    background: var(--light_bg_color)
    }

    [data-theme=dark] #nav,[data-theme=dark] .layout_page>div:first-child:not(.recent-posts),[data-theme=dark] .layout_post>#post {
    background-color: var(--dark_bg_color)
    }
  3. 将以上 js 与 css 全部引入后,新建一个页面。然后在其 index.md 中(正文部分)写入以下:

    查看代码

    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
    <style>@keyframes gradientBG{0%{background-position: 0% 50%;}50%{background-position: 100% 50%;}100% {background-position: 0% 50%;}}#rightside{display:none;}</style>

    > 这个页面是用来测试渐变背景的效果,以及不同透明度的效果。如果你有能力可以直接看 css 样式。否则请返回[Hexo 博客之 butterfly 主题优化更换背景](https://www.antmoe.com/posts/7198453/index.html#附录)复制代码。
    > 阅读体验及个标签样式请自己进行调整。

    ## 透明度调节

    <center style='margin-bottom:20px' id = 'opt'><a style="color: #FFF;margin-bottom: 10px;" style="color: #FFF;" href="#" class="button button-primary button-rounded button-small" data-opacity="0">透明度0</a><a style="color: #FFF;margin-bottom: 10px;" style="color: #FFF;" href="#" class="button button-primary button-rounded button-small" data-opacity="0.1">透明度0.1</a><a style="color: #FFF;margin-bottom: 10px;" style="color: #FFF;" href="#" class="button button-primary button-rounded button-small" data-opacity="0.2">透明度0.2</a><a style="color: #FFF;margin-bottom: 10px;" style="color: #FFF;" href="#" class="button button-primary button-rounded button-small" data-opacity="0.3">透明度0.3</a><a style="color: #FFF;margin-bottom: 10px;" style="color: #FFF;" href="#" class="button button-primary button-rounded button-small" data-opacity="0.4">透明度0.4</a><a style="color: #FFF;margin-bottom: 10px;" style="color: #FFF;" href="#" class="button button-primary button-rounded button-small" data-opacity="0.5">透明度0.5</a><a style="color: #FFF;margin-bottom: 10px;" style="color: #FFF;" href="#" class="button button-primary button-rounded button-small" data-opacity="0.6">透明度0.6</a><a style="color: #FFF;margin-bottom: 10px;" style="color: #FFF;" href="#" class="button button-primary button-rounded button-small" data-opacity="0.7">透明度0.7</a><a style="color: #FFF;margin-bottom: 10px;" style="color: #FFF;" href="#" class="button button-primary button-rounded button-small" data-opacity="0.8">透明度0.8</a><a style="color: #FFF;margin-bottom: 10px;" style="color: #FFF;" href="#" class="button button-primary button-rounded button-small" data-opacity="0.9">透明度0.9</a><a style="color: #FFF;margin-bottom: 10px;" style="color: #FFF;" href="#" class="button button-primary button-rounded button-small" data-opacity="1">透明度1</a></center>

    ## 背景调节

    <div id='demo_style' style='text-align:center;margin:0 auto;'>


    ### 渐变类

    <div data-type="photo" class='bg_test' style="display:inline-block;width: 200px;height:200px;background: url(&quot;https://ae01.alicdn.com/kf/H5662031fbf344418aa2c8bf74c68826eV.png&quot;),linear-gradient(45deg, #6dd0f2 15%, #f59abe 85%);text-align: center;line-height: 200px;margin-bottom:5px;cursor: pointer;">粉蓝色有图片</div>

    <div data-type="photo" class='bg_test' style="display:inline-block;width: 200px;height:200px;background: linear-gradient(45deg, #6dd0f2 15%, #f59abe 85%);text-align: center;line-height: 200px;cursor: pointer;">粉蓝色无图片</div>

    <div data-type="photo" class='bg_test' style="display:inline-block;width: 200px;height:200px;background: linear-gradient(102.7deg,#fddaff 8.2%,#dfadfc 19.6%,#adcdfc 36.8%,#adfcf4 73.2%,#caf8d0 90.9%);text-align: center;line-height: 200px;cursor: pointer;">美美哒渐变</div>

    <div data-type="color" class='bg_test' style="display:inline-block;width: 200px;height:200px; background: linear-gradient(90deg,rgba(247,149,51,.1) 0,rgba(243,112,85,.1) 15%,rgba(239,78,123,.1) 30%,rgba(161,102,171,.1) 44%,rgba(80,115,184,.1) 58%,rgba(16,152,173,.1) 72%,rgba(7,179,155,.1) 86%,rgba(109,186,130,.1) 100%);text-align: center;line-height: 200px;cursor: pointer;">博主同款</div>

    <div data-type="photo" class='bg_test' style="display:inline-block;width: 200px;height:200px; background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab); background-size: 400% 400%;animation: gradientBG 15s ease infinite;text-align: center;line-height: 200px;cursor: pointer;">动态渐变</div>

    <div data-type="photo" class='bg_test' style="display:inline-block;width: 200px;height:200px; background: linear-gradient(to right bottom, rgb(0, 255, 240), rgb(92, 159, 247) 40%, rgb(211, 34, 255) 80%);text-align: center;line-height: 200px;cursor: pointer;">紫蓝色渐变</div>

    ### 渐变加图片类

    <div data-type="photo" class='bg_test' style="display:inline-block;width: 200px;height:200px; background: linear-gradient(60deg, rgba(255, 165, 150, 0.5) 5%, rgba(0, 228, 255, 0.35)), url(https://ae01.alicdn.com/kf/H18a4b998752a4ae68b8e85d432a5aef0l.png),url(https://ae01.alicdn.com/kf/H21b5f6b8496141a1979a33666e1074d9x.jpg)0% 0% / cover;text-align: center;line-height: 200px;cursor: pointer; background-size: cover;">紫蓝色渐变</div>

    ### 图片类

    <div data-type="photo" class='bg_test' style="display:inline-block;width: 200px;height:200px; background: url(https://api.abcyun.co/api/tool/bing/token/5d8f31cf6a8ab);text-align: center;line-height: 200px;cursor: pointer; background-size: cover;">必应壁纸</div>

    <div data-type="photo" class='bg_test' style="display:inline-block;width: 200px;height:200px; background: url(https://api.abcyun.co/api/others/randacgimage/token/5d8f31cf6a8ab);text-align: center;line-height: 200px;cursor: pointer; background-size: cover;">随机二次元图</div>

    <div data-type="photo" class='bg_test' style="display:inline-block;width: 200px;height:200px; background: url(https://api.abcyun.co/api/others/randacgblogbg/token/5d8f31cf6a8ab);text-align: center;line-height: 200px;cursor: pointer; background-size: cover;">随机二次元背景图</div>

    </div>

    ## 测试文章

    ### 春

    盼望着,盼望着,东风来了,春天的脚步近了。

    一切都像刚睡醒的样子,欣欣然张开了眼。山朗润起来了,水长起来了,太阳的脸红起来了。

    小草偷偷地从土里钻出来,嫩嫩的,绿绿的。园子里,田野里,瞧去,一大片一大片满是的。坐着,躺着,打两个滚,踢几脚球,赛几趟跑,捉几回迷藏。风轻悄悄的,草绵软软的。

    桃树、杏树、梨树,你不让我,我不让你,都开满了花赶趟儿。红的像火,粉的像霞,白的像雪。花里带着甜味,闭了眼,树上仿佛已经满是桃儿、杏儿、梨儿。花下成千成百的蜜蜂嗡嗡地闹着,大小的蝴蝶飞来飞去。野花遍地是:杂样儿,有名字的,没名字的,散在花丛里,像眼睛,像星星,还眨呀眨的。

    “吹面不寒杨柳风”,不错的,像母亲的手抚摸着你。风里带来些新翻的泥土的气息,混着青草味,还有各种花的香,都在微微润湿的空气里酝酿。鸟儿将窠巢安在繁花嫩叶当中,高兴起来了,呼朋引伴地卖弄清脆的喉咙,唱出宛转的曲子,与轻风流水应和着。牛背上牧童的短笛,这时候也成天在嘹亮地响。

    雨是最寻常的,一下就是三两天。可别恼。看,像牛毛,像花针,像细丝,密密地斜织着,人家屋顶上全笼着一层薄烟。树叶子却绿得发亮,小草也青得逼你的眼。傍晚时候,上灯了,一点点黄晕的光,烘托出一片这安静而和平的夜。乡下去,小路上,石桥边,撑起伞慢慢走着的人;还有地里工作的农夫,披着蓑,戴着笠的。他们的草屋,稀稀疏疏的在雨里静默着。

    天上风筝渐渐多了,地上孩子也多了。城里乡下,家家户户,老老小小,他们也赶趟儿似的,一个个都出来了。舒活舒活筋骨,抖擞抖擞精神,各做各的一份事去,“一年之计在于春”;刚起头儿,有的是工夫,有的是希望。

    春天像刚落地的娃娃,从头到脚都是新的,它生长着。

    春天像小姑娘,花枝招展的,笑着,走着。

    春天像健壮的青年,有铁一般的胳膊和腰脚,他领着我们上前去。

    {% note default icon %}
    default
    {% endnote %}

    {% note primary icon %}
    primary
    {% endnote %}

    {% note success icon %}
    success
    {% endnote %}

    {% note info icon %}
    info
    {% endnote %}

    {% note warning icon %}
    warning
    {% endnote %}

    {% note danger icon %}
    danger
    {% endnote %}

    {% note primary no-icon%}

    #### Primary Header**Welcome** to [Hexo!](https://hexo.io)

    {% endnote %}


    <script>var article_container=document.getElementById("demo_style"),opt=document.getElementById("opt");article_container.addEventListener("click",function(e){var t=e.target;"DIV"===t.nodeName&&"bg_test"===t.className&&(web_bg.style.background=t.style.background,web_bg.style.animation=t.style.animation),Cookies.set("bg",t.style.background,{expires:1}),Cookies.set("animation",t.style.animation,{expires:1}),Cookies.set("type",t.getAttribute("data-type"),{expires:1})}),opt.addEventListener("click",function(e){var t=e.target;if("A"===t.nodeName){var a=t.getAttribute("data-opacity");if(a){Cookies.set("opacity",a,{expires:1});var n="--light_bg_color: rgb(255, 255, 255,"+a+");",i="--dark_bg_color: rgba(18,18,18,"+a+");";document.getElementById("content-inner").setAttribute("style",n+i)}}e.preventDefault()});</script>

评论修改

valine 评论小标签以及邮件通知

评论添加博主,小伙伴,访客标签以及评论邮件通知:可以参考我的这篇文章:valine 评论
也可以参考HCLonely Blog 的修改教程

双系统评论支持

  1. 修改 pug 模板,位置:\themes\Butterfly\layout\includes\comments\index.pug
    修改内容:将所有的 else if 改为 if
  2. 添加 JS 代码,将以下代码复制到你自己创建的 JS 文件中。

    查看代码

    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
    function switchComment() {
    const t =
    "切换为Gitalk" === $("#switch-comment").attr("title")
    ? "切换为Valine"
    : "切换为Gitalk",
    o = $("#switch-comment>i");
    "none" === $("#gitalk-container").css("display")
    ? $("#vcomment").slideUp("normal", () => {
    $("#gitalk-container").slideDown("normal", () => {
    $("#switch-comment").attr("title", t),
    o.hasClass("fa-toggle-off")
    ? o.removeClass("fa-toggle-off").addClass("fa-toggle-on")
    : o.removeClass("fa-toggle-on").addClass("fa-toggle-off");
    });
    })
    : $("#gitalk-container").slideUp("normal", () => {
    $("#vcomment").slideDown("normal", () => {
    $("#switch-comment").attr("title", t),
    o.hasClass("fa-toggle-off")
    ? o.removeClass("fa-toggle-off").addClass("fa-toggle-on")
    : o.removeClass("fa-toggle-on").addClass("fa-toggle-off");
    });
    });
    }
    var commentElement = document.getElementsByClassName("comment_headling")[0];
    if (commentElement != undefined) {
    commentElement.innerHTML +=
    '<a id="switch-comment" href="javascript:void(0);" title="切换为Gitalk" target="_self"><i class="fa fas fa-toggle-off" aria-hidden="true"></i></a>';
    document.getElementById("gitalk-container").style.display = "none";
    }
    $("#switch-comment").click(function () {
    return switchComment(), !1;
    });

    你也可以用现成的:https://cdn.jsdelivr.net/gh/chuchendjs/HexoStaticFile@master/js/switch.min.js

功能扩展

移植Volantis主题的标签

部分修改来源于 Volantis 主题,扩展的标签分别为 Checkbox & Radio、富文本按钮、Folding等
如何添加请移步到 :butterfly主题添加Volantis主题外挂标签

样式预览:Volantis主题标签预览

渐变 note

默认情况

success

error

warning

查看代码测试

添加css

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
.tip {
position: relative;
color: #fff;
background: #20a0ff;
background: -webkit-gradient(linear,left top,right top,from(#20a0ff),to(#20b8ff));
background: -webkit-linear-gradient(left,#20a0ff,#20b8ff);
background: linear-gradient(90deg,#20a0ff,#20b8ff);
padding: 6px 20px;
border-radius: 10px;
-webkit-box-shadow: 0 3px 5px rgba(32,160,255,.5);
box-shadow: 0 3px 5px rgba(32,160,255,.5);
margin-bottom: 20px
}

.tip p {
margin: 5px 0!important
}

.tip:before {
background: #20a0ff;
background: -webkit-gradient(linear,left bottom,left top,from(#0092ff),to(#20b8ff));
background: -webkit-linear-gradient(bottom,#0092ff,#20b8ff);
background: linear-gradient(0deg,#0092ff,#20b8ff);
border-radius: 50%;
color: #fff;
content: "\f129";
font-size: 12px;
position: absolute;
width: 24px;
height: 24px;
line-height: 24.5px;
left: -12px;
top: -12px;
-webkit-box-shadow: 0 0 0 2.5px #fff;
box-shadow: 0 0 0 2.5px #fff;
font-weight: 600;
font-family: "Font Awesome 5 Free";
text-align: center
}

.btn,.getit a {
position: relative
}

.well .tip:before {
-webkit-box-shadow: 0 0 0 2.5px #f7f8f9;
box-shadow: 0 0 0 2.5px #f7f8f9
}

.tip ol {
margin: 0
}

.tip.success {
background: #61be33;
background: -webkit-gradient(linear,left top,right top,from(#61be33),to(#8fce44));
background: -webkit-linear-gradient(left,#61be33,#8fce44);
background: linear-gradient(90deg,#61be33,#8fce44);
text-shadow: 0 -1px #61be33;
-webkit-box-shadow: 0 3px 5px rgba(104,195,59,.5);
box-shadow: 0 3px 5px rgba(104,195,59,.5)
}

.tip.success:before {
background: -webkit-gradient(linear,left bottom,left top,from(#52bb1d),to(#95d34b));
background: -webkit-linear-gradient(bottom,#52bb1d,#95d34b);
background: linear-gradient(0deg,#52bb1d,#95d34b);
content: "\f00c";
text-shadow: 0 -1px #61be33
}

.tip.warning {
background: #ff953f;
background: -webkit-gradient(linear,left top,right top,from(#ff953f),to(#ffb449));
background: -webkit-linear-gradient(left,#ff953f,#ffb449);
background: linear-gradient(90deg,#ff953f,#ffb449);
text-shadow: 0 -1px #ff953f;
-webkit-box-shadow: 0 3px 5px rgba(255,154,73,.5);
box-shadow: 0 3px 5px rgba(255,154,73,.5)
}

.tip.warning:before {
background: -webkit-gradient(linear,left bottom,left top,from(#ff8f35),to(#ffc149));
background: -webkit-linear-gradient(bottom,#ff8f35,#ffc149);
background: linear-gradient(0deg,#ff8f35,#ffc149);
content: "\f12a";
text-shadow: 0 -1px #ff953f
}

.tip.error {
background: #ff4949;
background: -webkit-gradient(linear,left top,right top,from(#ff4949),to(#ff7849));
background: -webkit-linear-gradient(left,#ff4949,#ff7849);
background: linear-gradient(90deg,#ff4949,#ff7849);
text-shadow: 0 -1px #ff4949;
-webkit-box-shadow: 0 3px 5px rgba(255,73,73,.5);
box-shadow: 0 3px 5px rgba(255,73,73,.5)
}

.tip.error:before {
background: -webkit-gradient(linear,left bottom,left top,from(#ff3838),to(#ff7849));
background: -webkit-linear-gradient(bottom,#ff3838,#ff7849);
background: linear-gradient(0deg,#ff3838,#ff7849);
content: "\f00d";
text-shadow: 0 -1px #ff4949
}

/*夜间适配*/
[data-theme="dark"] .tip {
filter: brightness(0.7);
}

/* snote夜间模式 */
[data-theme="dark"] .tip{
color: #4c4948;
}

示例

1
2
3
4
<div class='tip' ><p>默认情况<p></div>
<div class='tip success'><p>success<p></div>
<div class='tip error'><p>error<p></div>
<div class='tip warning'><p>warning<p></div>

note 小标签

绿色

红色

黄色

灰色

蓝色

红色小标签
绿色小标签
蓝色小标签
黄色小标签
灰色小标签

添加css代码

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
span.inline-tag {
display: inline;
padding: .2em .6em .3em;
font-size: 90%;
font-weight: 400;
line-height: 1;
color: #fff;
text-align: center;
white-space: nowrap;
vertical-align: baseline;
border-radius: .1rem;
border-radius: 6px;
background-color: var(--Color)
}

p.red,
span.red {
--Color: rgb(233, 30, 100);
--ColorA: rgba(233, 30, 100, 0.2);
}

p.green,
span.green {
--Color: rgb(139, 195, 74);
--ColorA: rgba(139, 195, 74, 0.2);
}

p.blue,
span.blue {
--Color: rgb(3, 169, 244);
--ColorA: rgba(3, 169, 244, 0.2);
}

p.yellow,
span.yellow {
--Color: rgb(255, 193, 7);
--ColorA: rgba(255, 193, 7, 0.2);
}

p.grey,
span.grey {
--Color: rgb(76, 76, 76);
--ColorA: rgba(76, 76, 76, 0.2);
}

p.div-border {
padding: 10px;
border: 1px solid var(--Color,#333);
border-radius: 0.4rem;
background-color: var(--ColorA, transparent);
}

p.left {
border-left-width: 5px;
border-left-color: var(--Color);
}

p.bottom {
border-bottom-width: 5px;
border-bottom-color: var(--Color);
}

p.right {
border-right-width: 5px;
border-right-color: var(--Color);
}

p.top {
border-top-width: 5px;
border-top-color: var(--Color);
}

示例

1
2
3
4
5
6
7
8
9
10
11
12
/* note语法示例 */
<p class='div-border green'>绿色</p>
<p class='div-border red'>红色</p>
<p class='div-border yellow'>黄色</p>
<p class='div-border grey'>灰色</p>
<p class='div-border blue'>蓝色</p>
/* 小tag标签语法示例 */
<span class="inline-tag red">红色小标签</span>
<span class="inline-tag green">绿色小标签</span>
<span class="inline-tag blue">蓝色小标签</span>
<span class="inline-tag yellow">黄色小标签</span>
<span class="inline-tag grey">灰色小标签</span>

隐藏按钮

主题自带的隐藏按钮点击后就消失,则不可以再次隐藏。因此要点击后不再消失则需要添加下面一段 css 代码即可。

1
2
3
.hide-block>a.hide-button.open, .hide-inline>a.hide-button.open {
display: inline-block;
}

特殊按钮

样式及使用请参考小康的: https://www.antmoe.com/posts/58a62380/index.html

阿里 Iconfont 图标

参考小康的这篇文章:小康Hexo 博客之优雅使用阿里 iconfont 图标博客

微语

如何添加动态说说,请移步到这里:微语

优化

前言

这里所做的操作升级主题无需再做操作,是不是很开心呢!

地址栏美观

  1. 安装 hexo-abbrlink 插件
    1
    npm install hexo-abbrlink --save
  2. 编辑 _config.yml 文件,找到 permalink , 改成 permalink: posts/:abbrlink/
    具体可以参考我的:
    1
    2
    3
    4
    5
    6
    #permalink: :year/:month/:day/:title/
    #permalink_defaults:
    permalink: posts/:abbrlink/
    abbrlink:
    alg: crc32 #support crc16(default) and crc32
    rep: dec #support dec(default) and hex
  3. 在文章Page Front-matter 添加自定义 abbrlink ,如 abbrink: vue,但要注意的是:最好是用英文,因为中文可能会出现乱码。若没有自定义 hexo s 运行则会自动添加随机数字码

添加卡通人物

  1. 按住装插件

    1
    npm install --save hexo-helper-live2d
  2. 下载相应的模型,将 shizuku 更换成你想要的模型名称即可(本人就选shizuku),更多模型选择请点击此处

    1
    npm install live2d-widget-model-shizuku
  3. 打开站点目录下的 _config.yml文件,添加如下代码:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    live2d:
    enable: true
    scriptFrom: local
    model:
    use: live2d-widget-model-shizuku #模型选择
    display:
    position: right #模型位置
    width: 150 #模型宽度
    height: 300 #模型高度
    mobile:
    show: false #是否在手机端显示
  4. 若不需要卸载或关闭即可,换模型亦是如此

加速博客访问速度

hexo-offline-popup 是一个 hexo 插件, 它可加速你的Hexo网站的加载速度,以及网站内容更新弹窗提示。

  1. 安装
    1
    npm i hexo-offline-popup --save
  2. 在博客根目录的 _config.yml 中添加如下配置
    1
    2
    3
    4
    5
    6
    7
    # offline config passed to sw-precache.
    service_worker:
    maximumFileSizeToCacheInBytes: 5242880
    staticFileGlobs:
    - public/**/*.{js,html,css,png,jpg,gif,svg,eot,ttf,woff,woff2}
    stripPrefix: public
    verbose: true
  3. 如果你有CDN资源,例:
    1
    2
    - https://unpkg.com/artitalk
    - https://cdn.jsdelivr.net/npm/artitalk
    将此配置添加到根目录的 _config.yml
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    service_worker:
    runtimeCaching:
    - urlPattern: /*
    handler: cacheFirst
    options:
    origin: unpkg.com
    - urlPattern: /*
    handler: cacheFirst
    options:
    origin: cdn.jsdelivr.net
  4. 上传, 执行该代码激活并使用
    1
    hexo cl && hexo g -d
  5. 说明

    该插件仅部署后生效,本地运行不生效

    安装该插件后第一次打开网站不弹窗,后续更新将会弹窗