搜索

Algolia

记得运行 hexo clean

如果你使用 hexo-algoliasearch,请记得配置 fields 参数的 title, permalink 和 content

你需要安装 hexo-algoliahexo-algoliasearch. 根据它们的説明文档去做相应的配置。

修改 主题配置文件

1
2
3
4
algolia_search:
enable: true
hits:
per_page: 6

本地搜索

你需要安装 hexo-generator-searchdb 或者 hexo-generator-search,根据它的文档去做相应配置

1
2
3
4
5
6
7
8
9
10
# Local search
local_search:
enable: false
# Preload the search data when the page loads. 预加载,开启后,进入网页后会自动加载搜索文件。关闭时,只有点击搜索按钮后,才会加载搜索文件
preload: false
# Show top n results per article, show all results by setting to -1 匹配的文章结果,默认显示最开始的 1段结果
top_n_per_article: 1
# Unescape html strings to the readable one.将 html 字符串解码为可读字符串
unescape: false
CDN: #搜索文件的 CDN 地址(默认使用的本地链接)

评论

从3.0.0开始,开启评论需要在comments-use中填写你需要的评论。

支持双评论显示,只需要配置两个评论(第一个为默认显示)

1
2
3
4
5
6
7
8
9
10
comments:
# Up to two comments system, the first will be shown as default
# Choose: Disqus/Disqusjs/Livere/Gitalk/Valine/Waline/Utterances/Facebook Comments/Twikoo
use: Valine,Disqus # 使用的评论(请注意,最多支持两个,如果不需要请留空)
text: true # Display the comment name next to the button 是否显示评论服务商的名字
# lazyload: The comment system will be load when comment element enters the browser's viewport.是否为评论开启lazyload,开启后,只有滚动到评论位置时才会加载评论所需要的资源(开启 lazyload 后,评论数将不显示)
# If you set it to true, the comment count will be invalid
lazyload: true
count: true # Display comment count in top_img 是否在文章顶部显示评论数
card_post_count: false # Display comment count in Home Page 是否在首页文章卡片显示评论数

我这里刚开始配置的是Valine,后来因为加评论功能备案不好过就给删了。

遵循 Valine的指示去配置你的 LeanCloud 应用。以及查看相应的配置説明。

开启 visitor 后,文章页的访问人数将改为 Valine 提供,而不是 不蒜子

Valine于 v1.4.5 开始支持自定义表情,如果你需要自行配置,请在emojiCDN配置表情 CDN。

同时在Hexo 工作目录下的source/_data/创建一个json文件valine.json,等同于 Valine 需要配置的emojiMaps

再次开启评论

由于valine已经落后了,所以这回又新开了一个评论功能,采用twikoo评论功能。安装详见butterfly配置twikoo评论系统

挂载Akismet 反垃圾评论,按要求注册即可。

美化/特效

自定义主题色

可以修改大部分UI颜色

颜色值必须被双引号包裹,就像”#000”而不是#000。否则将会在构建的时候报错!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
theme_color:
enable: true
main: "#49B1F5"
paginator: "#00c4b6"
button_hover: "#FF7242"
text_selection: "#00c4b6"
link_color: "#99a9bf"
meta_color: "#858585"
hr_color: "#A4D8FA"
code_foreground: "#F47466"
code_background: "rgba(27, 31, 35, .05)"
toc_color: "#00c4b6"
blockquote_padding_color: "#49b1f5"
blockquote_background_color: "#49b1f5"
scrollbar_color: "#49b1f5"

主页top_img显示大小

默认的显示为全屏。site-info的区域会居中显示

1
2
3
4
5
# 主页设置
# 默认top_img全屏,site_info在中间
# 使用默认, 都无需填写(建议默认)
index_site_info_top: # 主页标题距离顶部距离 例如 300px/300em/300rem/10%
index_top_img_height: #主页top_img高度 例如 300px/300em/300rem 不能使用百分比

网站背景

默认显示白色,可设置图片或者颜色

1
2
3
4
# 图片格式 url(http://xxxxxx.com/xxx.jpg)
# 颜色(HEX值/RGB值/顔色单词/渐变色)
# 留空 不显示背景
background:

留意: 如果你的网站根目录不是’/‘,使用本地图片时,需加上你的根目录。
例如:网站是 https://yoursite.com/blog,引用一张img/xx.png图片,则设置background为 `url(/blog/img/xx.png)

打字效果

打字效果activate-power-mode

1
2
3
4
5
6
7
# Typewriter Effect (打字效果)
# https://github.com/disjukr/activate-power-mode
activate_power_mode:
enable: true
colorful: true # open particle animation (冒光特效)
shake: true # open shake (抖动特效)
mobile: false

背景特效

静止彩带

1
2
3
4
5
6
7
canvas_ribbon:
enable: false
size: 150
alpha: 0.6
zIndex: -1
click_to_change: false #设置是否每次点击都更换綵带
mobile: false # false 手机端不显示 true 手机端显示

动态彩带

1
2
3
canvas_fluttering_ribbon:
enable: true
mobile: false # false 手机端不显示 true 手机端显示

光点

1
2
3
4
5
6
7
canvas_nest:
enable: true
color: '0,0,255' #color of lines, default: '0,0,0'; RGB values: (R,G,B).(note: use ',' to separate.)
opacity: 0.7 # the opacity of line (0~1), default: 0.5.
zIndex: -1 # z-index property of the background, default: -1.
count: 99 # the number of lines, default: 99.
mobile: false # false 手机端不显示 true 手机端显示

鼠标点击效果

烟花

zIndex建议只在-1和9999上选
-1 代表烟火效果在底部
9999 代表烟火效果在前面

1
2
3
4
fireworks:
enable: true
zIndex: 9999 # -1 or 9999
mobile: false

字数统计

要为Butterfly配上字数统计特性, 你需要如下几个步骤:

打开 hexo 工作目录

1
npm install hexo-wordcount --save or yarn add hexo-wordcount

修改 主题配置文件:

1
2
3
4
5
wordcount:
enable: true
post_wordcount: true
min2read: true
total_wordcount: true

Live2D教程-看板娘

参考:博客魔改教程总结(一) | Fomalhaut🥝

目前只推荐这个(因为消耗资源较少),这是博客自带的看板娘,这孩子不会说话也不能换装,只会跟着你的鼠标晃动脑袋,不过有几款超可爱。

安装

  1. 在Hexo根目录[BlogRoot]下打开终端,输入以下指令安装必要插件:

    1
    npm install --save hexo-helper-live2d
  2. 打开站点配置文件[BlogRoot]\config.yml
    搜索live2d,按照如下注释内容指示进行操作。
    如果没有搜到live2d的配置项,就直接把以下内容复制到最底部。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    # Live2D
    ## https://github.com/EYHN/hexo-helper-live2d
    live2d:
    enable: true #开关插件版看板娘
    scriptFrom: local # 默认
    pluginRootPath: live2dw/ # 插件在站点上的根目录(相对路径)
    pluginJsPath: lib/ # 脚本文件相对与插件根目录路径
    pluginModelPath: assets/ # 模型文件相对与插件根目录路径
    # scriptFrom: jsdelivr # jsdelivr CDN
    # scriptFrom: unpkg # unpkg CDN
    # scriptFrom: https://npm.elemecdn.com/live2d-widget@3.x/lib/L2Dwidget.min.js # 你的自定义 url
    tagMode: false # 标签模式, 是否仅替换 live2d tag标签而非插入到所有页面中
    debug: false # 调试, 是否在控制台输出日志
    model:
    use: live2d-widget-model-wanko # npm-module package name
    # use: wanko # 博客根目录/live2d_models/ 下的目录名
    # use: ./wives/wanko # 相对于博客根目录的路径
    # use: https://npm.elemecdn.com/live2d-widget-model-wanko@1.0.5/assets/wanko.model.json # 你的自定义 url
    display:
    position: right #控制看板娘位置
    width: 150 #控制看板娘大小
    height: 300 #控制看板娘大小
    mobile:
    show: true # 手机中是否展示
  3. 完成后保存修改,在Hexo根目录下运行指令。

    1
    2
    3
    hexo clean
    hexo g
    hexo s

    之所以必须要使用hexo clean是因为我们需要清空缓存重新生成静态页面,不然看板娘没被加入生成的静态页面里,是不会出现的。

更换

  1. 同样是在Hexo根目录[BlogRoot]下,打开终端,选择想要的看板娘进行安装,例如我这里用到的是 live2d-widget-model-koharu,一个Q版小正太。其他的模型也可以在模型预览里查看以供选择。

  2. 输入指令

    1
    npm install --save live2d-widget-model-koharu
  3. 然后在站点配置文件[BlogRoot]\_config.yml里找到model项修改为期望的模型

    1
    2
    3
    model:
    use: live2d-widget-model-koharu
    # 默认为live2d-widget-model-wanko
  4. 之后按部就班的运行

    1
    2
    3
    hexo clean
    hexo g
    hexo s

    就能在localhost:4000上查看效果了。

卸载看板娘

卸载插件和卸载模型的指令都是通过npm进行操作的。在博客根目录[BlogRoot]打开终端,输入:

1
2
npm uninstall hexo-helper-live2d #卸载看板娘插件
npm uninstall live2d-widget-model-modelname #卸载看板娘模型。记得替换modelname为看板娘名称

卸载后为了保证配置项不出错,记得把[BlogRoot]\_config.yml里的配置项给注释或者删除掉。

一图流教程

  1. [BlogRoot]\source文件夹下新建一个文件夹css,该文件夹用于存放自定义的css样式,再新建一个名为custom.css,在里面写入以下代码:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    /* 页脚与头图透明 */
    #footer {
    background: transparent !important;
    }
    #page-header {
    background: transparent !important;
    }

    /* 白天模式遮罩透明 */
    #footer::before {
    background: transparent !important;
    }
    #page-header::before {
    background: transparent !important;
    }

    /* 夜间模式遮罩透明 */
    [data-theme="dark"] #footer::before {
    background: transparent !important;
    }
    [data-theme="dark"] #page-header::before {
    background: transparent !important;
    }
  2. 在主题配置文件[BlogRoot]\_config.butterfly.yml文件中的inject配置项的head子项加入以下代码,代表引入刚刚创建的custom.css文件(这是相对路径的写法)

    1
    2
    3
    inject:
    head:
    - <link rel="stylesheet" href="/css/custom.css" media="defer" onload="this.media='all'">
  3. 在主题配置文件[BlogRoot]\_config.butterfly.yml文件中的index_imgfooter_bg配置项取消头图与页脚图的加载项避免冗余加载

    1
    2
    3
    4
    5
    # The banner image of home page
    index_img:

    # Footer Background
    footer_bg: false
  4. 部分人反映一图流改完了背景图也没了,那大概率是你之前没设置背景图。在主题配置文件[BlogRoot]\_config.butterfly.yml文件中的background配置项设置背景图

    1
    background: url(https://source.fomal.cc/img/home_bg.webp)

黑夜霓虹灯1.0(js计时器实现)

此教程会有两处地方有霓虹灯效果:一个是大标题和个人信息的动态霓虹灯,默认周期为1200ms;另外的是菜单栏的小字有夜光效果,为你的博客增添几分赛博朋克风~

  1. 首先在自定义的样式文件[BlogRoot]\source\css\custom.css中引入以下代码,变量部分var(--theme-color)可以换为自己喜欢的颜色,例如紫色rgb(179, 71, 241),后面的颜色连续渐变效果根据个人喜好选择,有的人喜欢连续的,有的人喜欢断续的

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    /* 夜间模式菜单栏发光字 */
    [data-theme="dark"] #nav .site-page,
    [data-theme="dark"] #nav .menus_items .menus_item .menus_item_child li a {
    text-shadow: 0 0 2px var(--theme-color) !important;
    }

    /* 手机端适配 */
    [data-theme="dark"] #sidebar #sidebar-menus .menus_items .site-page {
    text-shadow: 0 0 2px var(--theme-color) !important;
    }

    /* 闪烁变动颜色连续渐变 */
    #site-name,
    #site-title,
    #site-subtitle,
    #post-info,
    .author-info__name,
    .author-info__description {
    transition: text-shadow 1s linear !important;
    }
  2. 新建文件[BlogRoot]\source\js\light.js并写入以下代码,本质就是计时器,大家可以根据自己的喜好调节闪烁周期,默认为1200ms

    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
    // 霓虹灯效果
    // 颜色数组
    var arr = ["#39c5bb", "#f14747", "#f1a247", "#f1ee47", "#b347f1", "#1edbff", "#ed709b", "#5636ed"];
    // 颜色索引
    var idx = 0;

    // 切换颜色
    function changeColor() {
    // 仅夜间模式才启用
    if (document.getElementsByTagName('html')[0].getAttribute('data-theme') == 'dark') {
    if (document.getElementById("site-name"))
    document.getElementById("site-name").style.textShadow = arr[idx] + " 0 0 15px";
    if (document.getElementById("site-title"))
    document.getElementById("site-title").style.textShadow = arr[idx] + " 0 0 15px";
    if (document.getElementById("site-subtitle"))
    document.getElementById("site-subtitle").style.textShadow = arr[idx] + " 0 0 10px";
    if (document.getElementById("post-info"))
    document.getElementById("post-info").style.textShadow = arr[idx] + " 0 0 5px";
    try {
    document.getElementsByClassName("author-info__name")[0].style.textShadow = arr[idx] + " 0 0 12px";
    document.getElementsByClassName("author-info__description")[0].style.textShadow = arr[idx] + " 0 0 12px";
    } catch {

    }
    idx++;
    if (idx == 8) {
    idx = 0;
    }
    } else {
    // 白天模式恢复默认
    if (document.getElementById("site-name"))
    document.getElementById("site-name").style.textShadow = "#1e1e1ee0 1px 1px 1px";
    if (document.getElementById("site-title"))
    document.getElementById("site-title").style.textShadow = "#1e1e1ee0 1px 1px 1px";
    if (document.getElementById("site-subtitle"))
    document.getElementById("site-subtitle").style.textShadow = "#1e1e1ee0 1px 1px 1px";
    if (document.getElementById("post-info"))
    document.getElementById("post-info").style.textShadow = "#1e1e1ee0 1px 1px 1px";
    try {
    document.getElementsByClassName("author-info__name")[0].style.textShadow = "";
    document.getElementsByClassName("author-info__description")[0].style.textShadow = "";
    } catch {

    }
    }
    }

    // 开启计时器
    window.onload = setInterval(changeColor, 1200);
  3. 在主题配置文件_config.butterfly.yml引入以上两个文件,要注意的是,js文件这里必须为defer,不能为ansyc,保证脚本会延迟到整个页面都解析完后再执行,此时才有对应的元素进行操作:

    1
    2
    3
    4
    5
    inject:
    head:
    - <link rel="stylesheet" href="/css/custom.css" media="defer" onload="this.media='all'">
    bottom:
    - <script defer src="/js/light.js"></script> # 霓虹灯(必须defer否则有时候会不生效)
  4. 重启项目即可看到效果

    1
    hexo cl; hexo s

星空背景和流星特效

  1. [BlogRoot]/source/js目录下新建universe.js,输入以下代码:

    1
    2
    function dark() {window.requestAnimationFrame=window.requestAnimationFrame||window.mozRequestAnimationFrame||window.webkitRequestAnimationFrame||window.msRequestAnimationFrame;var n,e,i,h,t=.05,s=document.getElementById("universe"),o=!0,a="180,184,240",r="226,225,142",d="226,225,224",c=[];function f(){n=window.innerWidth,e=window.innerHeight,i=.216*n,s.setAttribute("width",n),s.setAttribute("height",e)}function u(){h.clearRect(0,0,n,e);for(var t=c.length,i=0;i<t;i++){var s=c[i];s.move(),s.fadeIn(),s.fadeOut(),s.draw()}}function y(){this.reset=function(){this.giant=m(3),this.comet=!this.giant&&!o&&m(10),this.x=l(0,n-10),this.y=l(0,e),this.r=l(1.1,2.6),this.dx=l(t,6*t)+(this.comet+1-1)*t*l(50,120)+2*t,this.dy=-l(t,6*t)-(this.comet+1-1)*t*l(50,120),this.fadingOut=null,this.fadingIn=!0,this.opacity=0,this.opacityTresh=l(.2,1-.4*(this.comet+1-1)),this.do=l(5e-4,.002)+.001*(this.comet+1-1)},this.fadeIn=function(){this.fadingIn&&(this.fadingIn=!(this.opacity>this.opacityTresh),this.opacity+=this.do)},this.fadeOut=function(){this.fadingOut&&(this.fadingOut=!(this.opacity<0),this.opacity-=this.do/2,(this.x>n||this.y<0)&&(this.fadingOut=!1,this.reset()))},this.draw=function(){if(h.beginPath(),this.giant)h.fillStyle="rgba("+a+","+this.opacity+")",h.arc(this.x,this.y,2,0,2*Math.PI,!1);else if(this.comet){h.fillStyle="rgba("+d+","+this.opacity+")",h.arc(this.x,this.y,1.5,0,2*Math.PI,!1);for(var t=0;t<30;t++)h.fillStyle="rgba("+d+","+(this.opacity-this.opacity/20*t)+")",h.rect(this.x-this.dx/4*t,this.y-this.dy/4*t-2,2,2),h.fill()}else h.fillStyle="rgba("+r+","+this.opacity+")",h.rect(this.x,this.y,this.r,this.r);h.closePath(),h.fill()},this.move=function(){this.x+=this.dx,this.y+=this.dy,!1===this.fadingOut&&this.reset(),(this.x>n-n/4||this.y<0)&&(this.fadingOut=!0)},setTimeout(function(){o=!1},50)}function m(t){return Math.floor(1e3*Math.random())+1<10*t}function l(t,i){return Math.random()*(i-t)+t}f(),window.addEventListener("resize",f,!1),function(){h=s.getContext("2d");for(var t=0;t<i;t++)c[t]=new y,c[t].reset();u()}(),function t(){document.getElementsByTagName('html')[0].getAttribute('data-theme')=='dark'&&u(),window.requestAnimationFrame(t)}()};
    dark()
  2. [BlogRoot]/source/css目录下新建universe.css,输入以下代码:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    /* 背景宇宙星光  */
    #universe{
    display: block;
    position: fixed;
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    /* 这个是调置顶的优先级的,-1在文章页下面,背景上面,个人推荐这种 */
    z-index: -1;
    }
  3. 在主题配置文件_config.butterfly.ymlinject配置项中bottom下填入:

    1
    2
    3
    4
    inject:
    bottom:
    - <canvas id="universe"></canvas>
    - <script defer src="/js/universe.js"></script>
  4. 在主题配置文件_config.butterfly.ymlinject配置项中head下填入:

    1
    2
    3
    inject:
    head:
    - <link rel="stylesheet" href="/css/universe.css">
  5. 重新编译即可看到效果。

侧边栏电子时钟(安知鱼)

安装

  1. 如果有安装店长的插件版侧边栏电子钟(与店长的电子钟冲突),在博客根目录[BlogRoot]下打开终端,运行以下指令

    1
    2
    # 卸载原版电子钟
    npm uninstall hexo-butterfly-clock
  2. 安装插件,在博客根目录[BlogRoot]下打开终端,运行以下指令:

    1
    npm install hexo-butterfly-clock-anzhiyu --save
  3. 添加配置信息,以下为写法示例
    在主题配置文件_config.butterfly.yml(注意一定要主题配置文件)中添加:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    # electric_clock (安知鱼电子钟)
    # see https://anzhiy.cn/posts/fc18.html
    electric_clock:
    enable: true # 开关
    priority: 5 #过滤器优先权
    enable_page: / # 应用页面
    exclude:
    # - /posts/
    # - /about/
    layout: # 挂载容器类型
    type: class
    name: sticky_layout
    index: 0
    loading: https://cdn.cbd.int/hexo-butterfly-clock-anzhiyu/lib/loading.gif #加载动画自定义
    clock_css: https://cdn.cbd.int/hexo-butterfly-clock-anzhiyu/lib/clock.min.css
    clock_js: https://cdn.cbd.int/hexo-butterfly-clock-anzhiyu/lib/clock.min.js
    ip_api: https://widget.qweather.net/simple/static/js/he-simple-common.js?v=2.0
    qweather_key: # 和风天气key
    gaud_map_key: # 高得地图web服务key
    default_rectangle: false # 开启后将一直显示rectangle位置的天气,否则将获取访问者的地理位置与天气
    rectangle: 113.34532,23.15624 # 获取访问者位置失败时会显示该位置的天气,同时该位置为开启default_rectangle后的位置

    其中qweather_key 和gaud_map_key 最好自己去申请对应的 api key,默认使用的,可能会被限制,不保证可靠性。

  4. 参数释义

参数 备选值/类型 释义
priority number 【可选】过滤器优先级,数值越小,执行越早,默认为 10,选填
enable true/false 【必选】控制开关
enable_page path/all 【可选】填写想要应用的页面的相对路径(即路由地址),如根目录就填’/‘,分类页面就填’/categories/‘。若要应用于所有页面,就填’all’,默认为 all
exclude path 【可选】填写想要屏蔽的页面,可以多个。写法见示例。原理是将屏蔽项的内容逐个放到当前路径去匹配,若当前路径包含任一屏蔽项,则不会挂载。
layout.type id/class 【可选】挂载容器类型,填写 id 或 class,不填则默认为 id
layout.name text 【必选】挂载容器名称
layout.index 0和正整数 【可选】前提是 layout.type 为 class,因为同一页面可能有多个 class,此项用来确认究竟排在第几个顺位
loading URL 【可选】电子钟加载动画的图片
clock_css URL 【可选】电子钟样式 CDN 资源
clock_js URL 【可选】电子钟执行脚本 CDN 资源
ip_api URL 【可选】获取时钟 IP 的 API
qweather_key text 【可选】和风天气 key
gaud_map_key text 【可选】高得地图 web 服务 key
default_rectangle text 【可选】开启后将一直显示 rectangle 位置的天气,否则将获取访问者的地理位置与天气
rectangle text 【可选】获取访问者位置失败时会显示该位置的天气,同时该位置为开启 default_rectangle 后的位置

个人卡片渐变色

[BlogRoot]\source\css\custom.css自定义样式的文件中引入如下代码(最后记得在inject配置项引入!!!):

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
/* 侧边栏个人信息卡片动态渐变色 */
#aside-content > .card-widget.card-info {
background: linear-gradient(
-45deg,
#e8d8b9,
#eccec5,
#a3e9eb,
#bdbdf0,
#eec1ea
);
box-shadow: 0 0 5px rgb(66, 68, 68);
position: relative;
background-size: 400% 400%;
-webkit-animation: Gradient 10s ease infinite;
-moz-animation: Gradient 10s ease infinite;
animation: Gradient 10s ease infinite !important;
}
@-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%;
}
}

/* 黑夜模式适配 */
[data-theme="dark"] #aside-content > .card-widget.card-info {
background: #191919ee;
}

/* 个人信息Follow me按钮 */
#aside-content > .card-widget.card-info > #card-info-btn {
background-color: #3eb8be;
border-radius: 8px;
}

直达底部按钮

[BlogRoot]\themes\butterfly\layout\includes\rightside.pug做以下修改:

1
2
3
4
5
button#go-up(type="button" title=_p("rightside.back_to_top"))
i.fas.fa-arrow-up

+button#go-down(type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)")
+ i.fas.fa-arrow-down

文章H1~H6标题小风车转动效果

  1. 修改主题配置文件_config.butterfly.yml文件的beautify配置项:

    1
    2
    3
    4
    5
    6
    beautify:
    enable: true
    field: post # site/post
    # title-prefix-icon: '\f0c1' 原内容
    title-prefix-icon: '\f863'
    title-prefix-icon-color: "#F47466"
  2. [BlogRoot]\source\css\custom.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
    /* 文章页H1-H6图标样式效果 */
    /* 控制风车转动速度 4s那里可以自己调节快慢 */
    h1::before,
    h2::before,
    h3::before,
    h4::before,
    h5::before,
    h6::before {
    -webkit-animation: ccc 4s linear infinite;
    animation: ccc 4s linear infinite;
    }
    /* 控制风车转动方向 -1turn 为逆时针转动,1turn 为顺时针转动,相同数字部分记得统一修改 */
    @-webkit-keyframes ccc {
    0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    }
    to {
    -webkit-transform: rotate(-1turn);
    transform: rotate(-1turn);
    }
    }
    @keyframes ccc {
    0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    }
    to {
    -webkit-transform: rotate(-1turn);
    transform: rotate(-1turn);
    }
    }
    /* 设置风车颜色 */
    #content-inner.layout h1::before {
    color: #ef50a8;
    margin-left: -1.55rem;
    font-size: 1.3rem;
    margin-top: -0.23rem;
    }
    #content-inner.layout h2::before {
    color: #fb7061;
    margin-left: -1.35rem;
    font-size: 1.1rem;
    margin-top: -0.12rem;
    }
    #content-inner.layout h3::before {
    color: #ffbf00;
    margin-left: -1.22rem;
    font-size: 0.95rem;
    margin-top: -0.09rem;
    }
    #content-inner.layout h4::before {
    color: #a9e000;
    margin-left: -1.05rem;
    font-size: 0.8rem;
    margin-top: -0.09rem;
    }
    #content-inner.layout h5::before {
    color: #57c850;
    margin-left: -0.9rem;
    font-size: 0.7rem;
    margin-top: 0rem;
    }
    #content-inner.layout h6::before {
    color: #5ec1e0;
    margin-left: -0.9rem;
    font-size: 0.66rem;
    margin-top: 0rem;
    }
    /* s设置风车hover动效 6s那里可以自己调节快慢*/
    #content-inner.layout h1:hover,
    #content-inner.layout h2:hover,
    #content-inner.layout h3:hover,
    #content-inner.layout h4:hover,
    #content-inner.layout h5:hover,
    #content-inner.layout h6:hover {
    color: var(--theme-color);
    }
    #content-inner.layout h1:hover::before,
    #content-inner.layout h2:hover::before,
    #content-inner.layout h3:hover::before,
    #content-inner.layout h4:hover::before,
    #content-inner.layout h5:hover::before,
    #content-inner.layout h6:hover::before {
    color: var(--theme-color);
    -webkit-animation: ccc 6s linear infinite;
    animation: ccc 6s linear infinite;
    }
  3. 在主题配置文件_config.butterfly.ymlinject配置项进行引入(不再赘述)。

三栏布局首页卡片

  1. 修改[Blogroot]\themes\butterfly\layout\includes\mixins\post-ui.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
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    mixin postUI(posts)
    each article , index in page.posts.data
    .recent-post-item
    -
    let link = article.link || article.path
    let title = article.title || _p('no_title')
    const position = theme.cover.position
    let leftOrRight = position === 'both'
    ? index%2 == 0 ? 'left' : 'right'
    : position === 'left' ? 'left' : 'right'
    let post_cover = article.cover
    let no_cover = article.cover === false || !theme.cover.index_enable ? 'no-cover' : ''
    -
    .recent-post-content(class=leftOrRight)
    .recent-post-cover-shadow
    .recent-post-cover
    img.article-cover(src=url_for(post_cover) onerror=`this.onerror=null;this.src='`+ url_for(theme.error_img.post_page) + `'` alt=title)
    .recent-post-info
    a.article-title(href=url_for(link) title=title)
    .article-title-link= title
    .recent-post-meta
    .article-meta-wrap
    if (is_home() && (article.top || article.sticky > 0))
    span.article-meta
    i.fas.fa-thumbtack.sticky
    span.sticky= _p('sticky')
    span.article-meta-separator |
    if (theme.post_meta.page.date_type)
    span.post-meta-date
    if (theme.post_meta.page.date_type === 'both')
    i.far.fa-calendar-alt
    span.article-meta-label=_p('post.created')
    time.post-meta-date-created(datetime=date_xml(article.date) title=_p('post.created') + ' ' + full_date(article.date))=date(article.date, config.date_format)
    span.article-meta-separator |
    i.fas.fa-history
    span.article-meta-label=_p('post.updated')
    time.post-meta-date-updated(datetime=date_xml(article.updated) title=_p('post.updated') + ' ' + full_date(article.updated))=date(article.updated, config.date_format)
    else
    - let data_type_updated = theme.post_meta.page.date_type === 'updated'
    - let date_type = data_type_updated ? 'updated' : 'date'
    - let date_icon = data_type_updated ? 'fas fa-history' :'far fa-calendar-alt'
    - let date_title = data_type_updated ? _p('post.updated') : _p('post.created')
    i(class=date_icon)
    span.article-meta-label=date_title
    time(datetime=date_xml(article[date_type]) title=date_title + ' ' + full_date(article[date_type]))=date(article[date_type], config.date_format)
    if (theme.post_meta.page.categories && article.categories.data.length > 0)
    span.article-meta
    span.article-meta-separator |
    i.fas.fa-inbox
    each item, index in article.categories.data
    a(href=url_for(item.path)).article-meta__categories #[=item.name]
    if (index < article.categories.data.length - 1)
    i.fas.fa-angle-right.article-meta-link
    if (theme.post_meta.page.tags && article.tags.data.length > 0)
    span.article-meta.tags
    span.article-meta-separator |
    i.fas.fa-tag
    each item, index in article.tags.data
    a(href=url_for(item.path)).article-meta__tags #[=item.name]
    if (index < article.tags.data.length - 1)
    span.article-meta-link #[='•']

    mixin countBlockInIndex
    - needLoadCountJs = true
    span.article-meta
    span.article-meta-separator |
    i.fas.fa-comments
    if block
    block
    span.article-meta-label= ' ' + _p('card_post_count')

    if theme.comments.card_post_count
    case theme.comments.use[0]
    when 'Disqus'
    +countBlockInIndex
    a(href=full_url_for(link) + '#disqus_thread')
    i.fa-solid.fa-spinner.fa-spin
    when 'Disqusjs'
    +countBlockInIndex
    a(href=full_url_for(link) + '#disqusjs')
    span.disqus-comment-count(data-disqus-url=full_url_for(link))
    i.fa-solid.fa-spinner.fa-spin
    when 'Valine'
    +countBlockInIndex
    a(href=url_for(link) + '#post-comment')
    span.valine-comment-count(data-xid=url_for(link))
    i.fa-solid.fa-spinner.fa-spin
    when 'Waline'
    +countBlockInIndex
    a(href=url_for(link) + '#post-comment')
    span.waline-comment-count(id=url_for(link))
    i.fa-solid.fa-spinner.fa-spin
    when 'Twikoo'
    +countBlockInIndex
    a.twikoo-count(href=url_for(link) + '#post-comment')
    i.fa-solid.fa-spinner.fa-spin
    when 'Facebook Comments'
    +countBlockInIndex
    a(href=url_for(link) + '#post-comment')
    span.fb-comments-count(data-href=urlNoIndex(article.permalink))
    when 'Remark42'
    +countBlockInIndex
    a(href=url_for(link) + '#post-comment')
    span.remark42__counter(data-url=urlNoIndex(article.permalink))
    i.fa-solid.fa-spinner.fa-spin
    when 'Artalk'
    +countBlockInIndex
    a(href=url_for(link) + '#post-comment')
    span.artalk-count(data-page-key=url_for(link))
    i.fa-solid.fa-spinner.fa-spin
    a.article-content(href=url_for(link) title=title)
    //- Display the article introduction on homepage
    case theme.index_post_content.method
    when false
    - break
    when 1
    .article-content-text!= article.description
    when 2
    if article.description
    .article-content-text!= article.description
    else
    - const content = strip_html(article.content)
    - let expert = content.substring(0, theme.index_post_content.length)
    - content.length > theme.index_post_content.length ? expert += ' ...' : ''
    .article-content-text!= expert
    default
    - const content = strip_html(article.content)
    - let expert = content.substring(0, theme.index_post_content.length)
    - content.length > theme.index_post_content.length ? expert += ' ...' : ''
    .article-content-text!= expert
    .recent-post-arrow

    if theme.ad && theme.ad.index
    if (index + 1) % 3 == 0
    .recent-post-item.ads-wrap!=theme.ad.index
  2. 样式方案:移除滑动卡片,按屏幕宽度依次应用三栏、双栏、单栏。

    新建目录[Blogroot]\themes\butterfly\source\css\_index_card_style\,并在下面新建对应的文件。

    新建[Blogroot]\themes\butterfly\source\css\_index_card_style\multicard.styl,填入以下内容。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    //default color:
    :root
    --recent-post-bgcolor: rgba(200, 200, 200, 0.5) //默认背景
    --article-content-bgcolor: #49b1f5 //描述版块背景
    --recent-post-arrow: #ffffff //箭头配色
    --recent-post-cover-shadow: #ffffff //封面遮罩层配色,建议和默认值的颜色相对应。
    --recent-post-transition: all 0.5s cubic-bezier(0.59, 0.01, 0.48, 1.17) //动画效果。不了解的不要改动
    [data-theme="dark"]
    --recent-post-bgcolor: rgba(35,35,35,0.5)
    --article-content-bgcolor: #99999a
    --recent-post-arrow: #37e2dd
    --recent-post-cover-shadow: #232323
    // 默认的首页卡片容器布局
    .recent-posts
    padding 0 15px 0 15px
    height fit-content
    .recent-post-item
    margin-bottom 15px
    background var(--recent-post-bgcolor)
    overflow hidden
    border-radius 15px
    .recent-post-content
    display flex
    background var(--recent-post-bgcolor)
    position relative
    .recent-post-cover
    display flex
    background transparent
    .recent-post-info
    display flex
    background transparent
    flex-direction column
    justify-content center
    align-items center
    .article-title
    height 50%
    display: flex
    text-align: center
    align-items: center
    justify-content: flex-end
    flex-direction: column
    .article-title-link
    color: var(--text-highlight-color)
    transition: all .2s ease-in-out
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    &:hover
    color: $text-hover
    .recent-post-meta
    height 50%
    display: flex
    text-align: center
    align-items: center
    justify-content: flex-start
    flex-direction: column
    .article-meta-wrap
    color #969797
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    a
    color: var(--text-highlight-color)
    transition: all .2s ease-in-out
    color #969797
    &:hover
    color: $text-hover
    .article-content
    display flex
    text-align: center
    flex-direction row
    align-items center
    justify-content center
    .article-content-text
    display -webkit-box
    -webkit-box-orient vertical
    text-overflow: ellipsis
    overflow hidden
    color #fff
    text-shadow 1px 2px 3px #000
    &.ads-wrap
    display: block !important
    height: auto !important
    nav#pagination
    width: 100%
    // 卡片单元布局样式
    .recent-posts
    padding 0 15px 0 15px
    display flex
    flex-direction row
    flex-wrap wrap
    .recent-post-item
    border-radius 15px
    overflow hidden
    .recent-post-content
    flex-direction column
    flex-wrap nowrap
    align-items center
    max-height 350px
    height: auto
    width 100%
    .recent-post-cover
    width 100%
    height 200px
    clip-path polygon(0 130px,0 0,100% 0,100% 130px,50% 100%)
    img
    height 200px
    width 100%
    object-fit cover
    .recent-post-info
    height 150px
    width 100%
    padding 0px 25px 5px 25px
    .article-title
    margin: 0px 40px
    font-size 18px
    .article-title-link
    -webkit-line-clamp: 2;
    .recent-post-meta
    margin: 0px 20px
    .article-meta-wrap
    font-size 12px
    -webkit-line-clamp: 3;
    .article-content
    position absolute
    height 200px
    width 100%
    background rgba(25,25,25,0.5)
    clip-path polygon(0 130px,0 0,100% 0,100% 130px,50% 100%)
    .article-content-text
    -webkit-line-clamp 3
    font-size 16px
    margin 0px 25px 30px 25px
    &::before
    content "❝"
    font-size 20px
    &::after
    content "❞"
    font-size 20px
    .recent-post-arrow
    display block
    background var(--article-content-bgcolor)
    position absolute
    height 10px
    width 20px
    clip-path polygon(0 0,100% 0,50% 100%)
    top 20px
    // 三栏布局滑动卡片样式
    @media screen and (min-width:1069px)
    .recent-posts
    .recent-post-item
    width 32.3%
    margin 0px 1% 20px 0px
    .recent-post-content
    .recent-post-info
    .article-title
    margin: 0px 5px
    .article-title-link
    -webkit-line-clamp: 1;
    .recent-post-meta
    margin: 0px 5px
    .article-meta-wrap
    -webkit-line-clamp: 2;
    // 双栏布局卡片自适应适配
    @media screen and (min-width:572px) and (max-width:1068px)
    .recent-posts
    .recent-post-item
    width 47%
    margin 0px 3% 20px 0px
    // 单栏布局卡片自适应适配
    @media screen and (max-width:572px)
    .recent-posts
    .recent-post-item
    width 100%
  3. 修改[BlogRoot]\themes\butterfly\source\css\_page\homepage.styl,将整文件内容替换为以下代码:

    1
    2
    3
    4
    if hexo-config('index_card_style') == 'slidecard'
    @import './_index_card_style/slidecard'
    else if hexo-config('index_card_style') == 'multicard'
    @import './_index_card_style/multicard'
  4. 然后在主题配置文件[BlogRoot]\_config.butterfly.yml里新增配置项,这样我们就可以通过配置项自由切换使用哪款了:

    1
    2
    3
    # 主页卡片样式
    # Docs: https://akilar.top/posts/d6b69c49/
    index_card_style: multicard # slidecard | multicard
  5. 为了不至于让首页的文章出现空缺,建议将首页生成的文章数量控制为1,2,3的公倍数。修改站点配置文件[BlogRoot]\_config.yml。找到以下配置项进行调整,注意这是站点配置文件本就有的配置项,不是新增配置项。建议是调整为12篇。如果你的侧边栏魔改内容特别多,那么建议改成18、24、30。务必确保文章卡片栏比侧栏完全展开要长,这样展示效果最好

    1
    2
    3
    4
    5
    6
    7
    8
    # Home page setting
    # path: Root path for your blogs index page. (default = '')
    # per_page: Posts displayed per page. (0 = disable pagination)
    # order_by: Posts order. (Order by date descending by default)
    index_generator:
    path: ''
    per_page: 12
    order_by: -date
  6. 本教程讨论的卡片都是考虑有封面和有描述的。所以需要保证你已经开启了相应的配置,查看主题配置文件[BlogRoot]\_config.butterfly.yml,找到配置项开启描述栏,建议选择2模式

    1
    2
    3
    4
    5
    6
    7
    8
    # Display the article introduction on homepage
    # 1: description
    # 2: both (if the description exists, it will show description, or show the auto_excerpt)
    # 3: auto_excerpt (default)
    # false: do not show the article introduction
    index_post_content:
    method: 2
    length: 500 # if you set method to 2 or 3, the length need to config

首页分类磁贴

  1. 安装插件,在博客根目录[BlogRoot]下打开终端,运行以下指令:

    1
    npm install hexo-butterfly-categories-card --save
  2. 添加配置信息,以下为写法示例
    在站点配置文件_config.yml或者主题配置文件_config.butterfly.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
    # hexo-butterfly-categories-card
    # see https://akilar.top/posts/a9131002/
    categoryBar:
    enable: true # 开关
    priority: 5 #过滤器优先权
    enable_page: / # 应用页面
    layout: # 挂载容器类型
    type: id
    name: recent-posts
    index: 0
    column: odd # odd:3列 | even:4列
    row: 1 #显示行数,默认两行,超过行数切换为滚动显示
    message:
    - descr: Ubuntu指南
    cover: https://assets.akilar.top/image/cover1.webp
    - descr: 玩转Win10
    cover: https://assets.akilar.top/image/cover2.webp
    - descr: 长篇小说连载
    cover: https://assets.akilar.top/image/cover3.webp
    - descr: 个人日记
    cover: https://assets.akilar.top/image/cover4.webp
    - descr: 诗词歌赋
    cover: https://assets.akilar.top/image/cover5.webp
    - descr: 杂谈教程
    cover: https://assets.akilar.top/image/cover6.webp
    custom_css: https://npm.elemecdn.com/hexo-butterfly-categories-card@1.0.0/lib/categorybar.css
  3. 参数释义

参数 备选值/类型 释义
priority number 【可选】过滤器优先级,数值越小,执行越早,默认为10,选填
enable true/false 【必选】控制开关
enable_page path/all 【可选】填写想要应用的页面的相对路径(即路由地址),如根目录就填’/‘,分类页面就填’/categories/‘。若要应用于所有页面,就填’all’,默认为’/‘
layout.type id/class 【可选】挂载容器类型,填写id或class,不填则默认为id
layout.name text 【必选】挂载容器名称
layout.index 0和正整数 【可选】前提是layout.type为class,因为同一页面可能有多个class,此项用来确认究竟排在第几个顺位
column odd/even 【可选】显示列数,考虑到比例问题,只提供3列和4列,odd为3列, even为4列
row number 【可选】显示行数,默认两行,超过行数切换为滚动显示
message.descr text 分类描述,需要和你自己的文章分类一一对应。
message.cover url 分类背景,需要和你自己的文章分类一一对应。
custom_css url 【可选】自定义样式,会替换默认的css链接,可以下载文档给出的cdn链接后自主修改

首页分类磁贴1.0

这个插件主要实现了以下功能:

  1. 自定义 tags 或 categories 的排列和展示
  2. 自定义 tags 或 categories 的展示图标,名称
  3. 自定义排列的行数,默认 2 行

教程:

  1. 在博客根目录[BlogRoot]下打开终端,运行以下指令:

    1
    npm i hexo-magnet --save

    注意,一定要加 --save,不然本地预览的时候可能不会显示!!!

  2. 在网站配置文件_config.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
    33
    34
    35
    36
    magnet:
    enable: true
    priority: 1
    enable_page: /
    type: categories
    devide: 2
    display:
    - name: 教程
    display_name: 小冰の魔改教程
    icon: 📚
    - name: 游戏评测
    display_name: 小冰の游戏评测
    icon: 🎮
    - name: 生活趣闻
    display_name: 小冰の生活趣闻
    icon: 🐱‍👓
    - name: vue
    display_name: 小冰の编程学习
    icon: 👩‍💻
    - name: 学习
    display_name: 小冰の读书笔记
    icon: 📒
    - name: 随想
    display_name: 小冰の胡思乱想
    icon: 💡
    color_setting:
    text_color: black
    text_hover_color: white
    background_color: "#f2f2f2"
    background_hover_color: "#b30070"
    layout:
    type: id
    name: recent-posts
    index: 0
    temple_html: '<div class="recent-post-item" style="width:100%;height: auto"><div id="catalog_magnet">${temple_html_item}</div></div>'
    plus_style: ""
  3. 配置项的含义:

    • enable

      参数:true/false
      含义:是否开启插件

    • enable_page

      参数:/
      含义:路由地址,如 / 代表主页。/me/ 代表自我介绍页等等

    • priority

      参数:1
      含义:插件的叠放顺序,数字越大,叠放约靠前。

    • type

      参数:categories/tags
      含义:选择筛选分类还是标签

    • devide

      参数:2
      含义:表示分隔的列数,2 表示分为两列展示

    • display

      参数:

      1
      2
      3
      - name: 教程 # 这里是tags或者categories的名称
      display_name: 小冰の魔改教程 # 这里是替换的名称
      icon: 📚 # 这里是展示的图标

      含义:配置项,可自行设置,按照设置的顺序展示

    • color_setting

      参数:

      1
      2
      3
      4
      text_color: black # 文字默认颜色
      text_hover_color: white # 文字鼠标悬浮颜色
      background_color: "#f2f2f2" # 文字背景默认颜色
      background_hover_color: "#b30070" # 文字背景悬浮颜色

      含义:颜色配置项,可自行设置

    • layout

      参数:type; (class&id)
      参数:name;
      参数:index;(数字)
      含义:如果说 magnet 是一幅画,那么这个 layout 就是指定了哪面墙来挂画
      而在 HTML 的是世界里有两种墙分别 type 为 id 和 class。
      其中在定义 class 的时候会出现多个 class 的情况,这时就需要使用 index,确定是哪一个。
      最后墙的名字即是 name;

      1
      2
      3
      4
      5
      6
      7
      8
      <div name="我是墙" id="recent-posts">
      <!-- id=>type recent-posts=>name -->
      <div name="我是画框">
      <div name="我是纸">
      <!--这里通过js挂载magnet,也就是画画-->
      </div>
      </div>
      </div>
    • temple_html

      参数:html 模板字段
      含义:包含挂载容器

      1
      2
      3
      4
      5
      <div class="recent-post-item" style="width:100%;height: auto"> <!--文章容器-->
      <div id="catalog_magnet"> <!--挂载容器-->
      ${temple_html_item}
      </div>
      </div>
    • plus_style

      参数:“”
      含义:提供可自定义的 style,如加入黑夜模式。

  4. 执行 hexo 三连

    1
    2
    3
    hexo clean
    hexo g
    hexo s
  5. 我们可以看到黑夜模式看起来特别的别扭,因此还要做一下黑夜模式的颜色适配,在custom.css文件中添加以下代码适配黑夜模式(具体颜色可以自己调节):

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    /* 小冰分类分类磁铁黑夜模式适配 */
    /* 一般状态 */
    [data-theme="dark"] .magnet_link_context {
    background: #1e1e1e;
    color: antiquewhite;
    }
    /* 鼠标悬浮状态 */
    [data-theme="dark"] .magnet_link_context:hover {
    background: #3ecdf1;
    color: #f2f2f2;
    }