Hexo Butterfly 主题功能拓展 - 标签云 & 云养猫

最新推荐文章于 2025-03-19 14:48:17 发布

TaQini852

最新推荐文章于 2025-03-19 14:48:17 发布

阅读量4.3k

点赞数 4

分类专栏：魑魅魍魉文章标签：博客 Hexo 标签云 butterfly 主题

本文链接：https://blog.csdn.net/SmalOSnail/article/details/105258820

版权

魑魅魍魉专栏收录该内容

10 篇文章

订阅专栏

本文介绍如何在Hexo博客中安装和配置Hexo-Tag-Cloud插件来实现标签云功能，以及如何通过Hexo-Helper-Live2d插件添加可爱的二次元看板娘，提升博客互动性和视觉效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

记录一下正在使用的两款Hexo插件

效果请看这里~ TaQini

Hexo-Tag-Cloud

Hexo 标签云插件：官方文档

安装流程

进入到 hexo 的根目录，然后在 package.json 中添加依赖: "hexo-tag-cloud": "2.1.*"
执行 npm install 命令
修改主题模板（详见下）
配置_config.yml（详见下）

修改 tagcloud 的模板

我使用的是Butterfly，对应的模板是pug格式的，官方文档中原先是没有pug的文档，我折腾了一下给移植过去了（pug貌似就是html语言的简化）：

首先找到 Butterfly/layout/includes/widget/card_tags.pug 文件

将这个文件修改为如下内容(注意缩进):

if site.tags.length
  .card-widget.card-tags
    .card-content
      .item-headline
        i.fa.fa-tags(aria-hidden="true")
        span= _p('aside.card_tags')
        script(type="text/javascript" charset="utf-8" src="/js/tagcloud.js")
        script(type="text/javascript" charset="utf-8" src="/js/tagcanvas.js")
        #myCanvasContainer.widget.tagcloud(align='center', style='width=100%;height=100%;margin:0;padding:0')
          canvas#resCanvas(width=200,style='width=100%;height=100%;margin:0;padding:0;display:block')
            != tagcloud()
          br
          != tagcloud({min_font: 16, max_font: 24, amount: 50, color: true, start_color: '#0D0E0F', end_color: '#99a9bf'})

其中resCanvas的参数可以设置，tagcloud的字体大小颜色等参数也可以设置

配置_config.yml

# hexo-tag-cloud
tag_cloud:
    textFont: Microsoft YaHei, monospace
    textColor: '#323'
    textHeight: 18
    outlineColor: '#E2E1D1' # '#B5B4AA' '#E2E1D1'
    maxSpeed: 0.2

Hexo-Helper-Live2d

向你的Hexo里放上一只萌萌哒二次元看板娘!（看板娘居多，不过也有小猫小狗。。。）

官方文档

安装流程

安装模块：npm install --save hexo-helper-live2d
安装模型：模型列表模型展示
配置_config.yml

配置_config.yml

# live-2d
live2d:
  enable: true
  scriptFrom: jsdelivr # local
  pluginRootPath: live2dw/
  pluginJsPath: lib/
  pluginModelPath: assets/
  tagMode: false
  debug: false
  model:
    use: live2d-widget-model-hijiki # npm-module package name
    # use: wanko # 博客根目录/live2d_models/ 下的目录名
    # use: ./wives/wanko # 相对于博客根目录的路径
    # use: https://cdn.jsdelivr.net/npm/live2d-widget-model-wanko@1.0.5/assets/wanko.model.json # 你的自定义 url
    scale: 1
    hHeadPos: 0.5
    vHeadPos: 0.618
  display:
    superSample: 2
    position: left # right
    width: 150
    height: 300
    hOffset: 20
    vOffset: -90
  mobile:
    show: true
    scale: 1
  react:
    opacityDefault: 0.3
    opacityOnHover: 0.3
    opacity: 0.95          # 模型透明度