Hexo Butterfly 功能进阶教程(三)
音乐
官方教程:Butterfly 添加全局吸底 Aplayer 教程
全局吸底 Aplayer
预览效果
实现步骤
安装 Aplayer 插件 hexo-tag-aplayer
npm install hexo-tag-aplayer --save
关闭 asset_inject,在项目根目录的 _config.yml 中添加配置如下:
由于需要全局都插入 aplayer 和 meting 资源,为了防止插入重复的资源,需把 asset_inject 设为 false。
# aplayeraplayer: meting: true asset_inject: false
在主题配置文件 _config.butterfly.yml 中开启 Aplayer 配置,如下所示:
# Inject the css and script (aplayer/meting)aplayerInject: enable: true per_page: true
插入 Aplayer 标签,如下所示:
<div class="aplayer no-destro ...
Hexo 及 Butterfly 配置详解(二)
前言
官方教程:Butterfly 主题配置
Butterfly 主题支持 font-awesome v6 图标
本文主要 hexo 项目配置文件 _config.yml 和主题配置文件 _config.butterfly.yml 的详细配置说明。结合这两个配置文件,在学习的过程中完成一些功能的配置。
网站资料
# _config.ymltitle: Arvinjunの站点 # 网站标题subtitle: 心中有光,何惧路长;志存高远,方能行远自迩 # 网站副标题description: 心中有光,何惧路长;志存高远,方能行远自迩 # 网站描述keywords: hexo,butterfly,arvinjun,blog,hexo-butterfly,hexo-theme-butterfly # 网站关键字author: Arvinjun # 网站作者language: zh-CN # 网站语言timezone: Asia/Shanghai # 时区
导航栏设置
参数设置
# _config.butterfly.ymlnav: logo: # 网站的 logo,支持图片,直接填 ...
Hexo Twikoo 评论功能
前言
在一个网站中,评论功能是一个非常重要的功能(优先实现),可以让用户在阅读文章的同时,也可以进行评论交流。而接下来就让我们一起来看看如何在 Hexo 通过 Vercel + MongoDB 方案搭建 Twikoo 评论系统。
主题评论配置
在主题配置文件 _config.butterfly.yml 中开启 Twikoo 配置,如下所示:
comments: # Choose: Disqus/Disqusjs/Livere/Gitalk/Valine/Waline/Utterances/Facebook Comments/Twikoo/Giscus/Remark42/Artalk use: Twikoo ## 使用的评论(请注意,最多支持两个,使用逗号隔开,如果不需要请留空) text: true # 是否显示评论服务商的名字 # 是否为评论开启lazyload,开启后,只有滚动到评论位置时才会加载评论所需要的资源(开启 lazyload 后,评论数将不显示) lazyload: true count: true # 是否在文章顶部显示评论数(livere、Giscus ...
Hexo 及 Butterfly 主题安装、部署(一)
前言
最近稍微有点时间,想着重新搭建下自己的个人站点。经过一番对比,最终选择了静态博客框架 Hexo + Butterfly 主题。
那么为什么选择 Hexo 且选择 Butterfly 主题呢?
Hexo 是一个快速、简洁且高效的博客框架,基于 Node.js 开发,支持 Markdown 编写文章,支持主题和插件扩展,可以快速搭建一个博客网站。
Butterfly 主题是一个简洁、优雅的主题,支持多种配置,支持多种插件,支持多种功能,适合个人站点使用。
Hexo 的社区活跃,不仅有很多优秀的主题和插件可供选择,而且在此基础上还可以满足更多的个性化需求。
预览地址:Arvinjun の站点
介绍
Hexo 是一个快速、简洁且高效的博客框架,基于 Node.js 开发,支持 Markdown 编写文章,支持主题和插件扩展,可以快速搭建一个博客网站。本文主要介绍 Hexo 和 Butterfly 主题的搭建和部署。
安装 Hexo 及 Butterfly 主题
安装 Hexo
全局安装 Hexo
npm install -g hexo-cli
初始化项目,如下所示:
hexo in ...