Hexo 魔改记录

2024-12-26

Hexo 侧边栏添加文章合集

教程链接：Hexo侧边栏添加文章合集侧边栏添加文章合集模块，可以提供一个系列文章的整体展示，便于导航到一个具体的内容首先，在 \themes\butterfly\layout\includees\widget 目录下新建 card_collections.pug 文件，并写入： 12345678if theme.aside.card_collections.enable .card-widget .item-headline i(class=theme.aside.card_collections.icon) span=theme.aside.card_collections.title each item in site.data.collections.collections .collections-item-content a(href=item.url)=item.name 在 \themes\butterfly\layout\includees\widget\index.pug 文件中 page...

2024-12-06

Hexo-Butterfly 主题

本文讲述如何搭建 Butterfly 主题并快速美化我们的个人博客，好看的样式所产生的观感会让我们在阅读时有一种心情愉悦的感觉。这里，我们介绍一些简单的配置，更多的配置可以跟着官方配置的方法。许多你需要解决的问题都可以在 (Butterfly 主题官网)[https://butterfly.js.org/]找到解决方案。导航目录 1234567891011121314# _config.butterfly.ymlmenu: 首页: / || fas fa-home 目录 || fas fa-list: 归档: /archives/ || fas fa-archive 标签: /tags/ || fas fa-tags 分类: /categories/ || fas fa-folder-open 娱乐 || fa fa-heartbeat: 音乐: /music/ || fas fa-music 图库: /gallery/ || fas fa-images 电影: /movies/ || fas fa-video 友链: /link/...

2024-12-26

Hexo 小标题旋转风车设置

教程链接：Hexo小标题旋转风车设置找到主题配置文件 _config.butterfly.yml 把 beautify 的 title-prefix-icon 处修改为 \f863 123beautify: enable: true title-prefix-icon: '\f863' 在 inject 的 head 处引入以下文件： 123inject: head: - "<style>#article-container.post-content h1:before, h2:before, h3:before, h4:before, h5:before, h6:before { -webkit-animation: avatar_turn_around 1s linear infinite; -moz-animation: avatar_turn_around 1s linear infinite; -o-animation: avatar_turn_around 1s linear infinite;...

2024-12-26

Hexo 添加看板娘

在 Butterfly 主题下，使用 live2d 插件在右下角添加白猫。首先安装模块，输入以下命令安装必要插件： 1npm install --save hexo-helper-live2d 安装白猫模型： 1npm install live2d-widget-model-tororo 打开站点配置文件 config.yml，搜索 live2d，按照如下注释内容指示进行操作： 1234567891011121314151617181920212223242526# Live2D## https://github.com/EYHN/hexo-helper-live2dlive2d: enable: true scriptFrom: local # 默认 pluginModelPath: assets/ # 模型文件相对与插件根目录路径 model: use: live2d-widget-model-tororo # 模型名字 scale: 1 hHeadPos: 0.5 vHeadPos: 0.618 display: ...

2024-12-28

Hexo 修改字体

教程链接：Butterfly修改字体这里以阿里妈妈数黑体iconfont-阿里巴巴矢量图标库为例进行演示。下载后得到文件我们选择 AlimamaShuHeiTi-Bold.ttf 文件放入到我们的项目中。在 source/styles 目录下新建文件夹 fonts/，把 AlimamaShuHeiTi-Bold.ttf 放入到 fonts 文件夹下。之后，在 styles/css/font.css 目录下，新建 font.css 文件，文件内容如下： 12345@font-face { font-family: 'AlimamaShuHeiTi'; font-display: swap; src: url('../fonts/AlimamaShuHeiTi-Bold.ttf') format('truetype');} 字体文件有 ttf, woff, woff2, otf 多种格式，ttf 对应的格式是 truetype，woff2 对应的格式是...

2024-11-27

Hexo-Butterfly 安装与部署

Hexo 是一个快速、简洁且高效的博客框架，基于 Node.js 开发，支持 Markdown 编写文章，支持主题和插件扩展，可以快速搭建一个博客网站。Hexo 的社区活跃，不仅有很多优秀的主题和插件可供选择，而且可以在此基础上满足更多的个性化需求 Butterfly 是一个简介、优雅的主题，支持多种配置、插件和功能，适合个人站点使用。 hexo-theme-butterfly 是基于 hexo-theme-melody 的基础上进行开发的主题。 Hexo 安装安装 Hexo 及 Butterfly 主题全局安装 Hexo 12npm install -g hexo-clihexo -v # 查看 hexo 版本号初始化个人博客，此操作后你的个人博客将成为你的默认博客目录，之后所有 hexo 命令都默认在该目录执行。 123hexo init {博客名称}cd {博客名称}npm i 博客内容： source：页面与文章目录，内部的 _posts 用于存放文章，可以看到里面已经有了一个...

Hexo 魔改记录

Hexo 添加看板娘

Hexo 侧边栏添加文章合集

Hexo 小标题旋转风车设置

Hexo 添加雪花动态效果背景

Hexo 修改字体

Hexo 修改鼠标样式