阅读本篇前，请确保已经完成下面两篇文章的步骤： 基于 Hexo 从零开始搭建个人博客（一） 基于 Hexo 从零开始搭建个人博客（二） 前言 博客搭建过程遇到任何问题，优先在本页面搜索，检查是否已经有该配置教程。 遇到问题可以优先在文章评论区留言，注意留言时请填写正确的邮箱以确保能收到站长的回复。 实在解决不了的问题可添加站长 Wechat ，添加好友时请备注自己的姓名+专业，如 张三 计算机科学与技术。 安装主题 本站基于Hexo搭建，用的 🦋 hexo-theme-butterfly 主题 v3.7.
修改 Hexo 根目录下的 _config.yml，把主题改为 butterfly
butterfiy主题官网有详尽的主题配置文档，点我进入。本系列文章仅记录本站配置过程及魔改日志。
关于这些在线聊天的工具，主题提供了一个按钮可以打开/关闭聊天窗口，这个聊天按钮将会出现在右下角里。你只需要把chat_btn打开就行。
Hexo⭐零基础搭建Hexo个人博客！⭐本文主题以Butterfly为例！⭐Hexo官网：HexoHexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。安装安装Node.jsHexo基于Node.js运行npm安装Hexo全局安装 hexo-clinpm install -g hexo-cli使用快速使用# 进入项目目录cd <项目名># 安装项目依赖npm install --registry=https://re
这里仅仅讨论同一大版本之间的主题升级，跨版本升级用户若使用本文的方式，很可能因为缺少一些底层架构的依赖支持导致主题配置不可用。另外，从博主本人的魔改历程来看，考虑到魔改内容也未必会做新版本的兼容适配，所以每次升级后直接从零开始重新魔改，这种看似最麻烦的方式，可能是最省时间的。
之前的建立分站教程（Hexo建立分站 | 花猪のBlog (cnhuazhu.top)）是利用了Hexo纯静态的优势，将不同主题渲染后的public中的内容放在主站的public文件夹中。（所以称之为“主站”和“分站”，但其实这个结构用“父站”和“子站”形容更贴切。如下图所示）
单独将主题的配置文件拎出来（butterfly/_config.yml）调整为_config.butterfly.yml，放置在项目根目录，避免主题迭代升级覆盖了原有的配置信息
因为闲来无事，看着hexo的butterfly主题已经到了4.12版本，打算升级一下，主题版本，于是打开官网，查看升级方法，非常简单，一条命令即可
修改网站各种资料，例如标题、副标题和邮箱等个人资料，请修改站点配置文件_config.yml。部分参数如下，详细参数可参考官方的配置描述。
本项目是对冰卡诺老师写的教程：基于Butterfly主题的侧边栏说说进行重构，新增pjax适配和artitalk_v3.2.1及以上版本的适配。后续也会继续在本帖基础上继续开发。
修改[Blogroot]\themes\butterfly\layout\includes\loading\loading.pug
Butterfly主题使用阿里巴巴iconfont⛄yooo~ 今天教大家美化Butterfly的字体图标⛄Butterfly主题支持 font-awesome v6 但是还是不够用怎么办呢？⛄可以使用阿里巴巴iconfont来拓展啦Butterfly版本：4.5.1选择图标iconfont图标库地址：iconfont-阿里巴巴矢量图标库找到自己需要的图标之后点击 添加入库图片图片将图标添加至项目中图片生成代码 并 复制代码图片图片Butterfly配置新建css文件在Butterfly主题文件夹下的 /s
把下载好的Js文件放在theme/Butterfly/source/js文件夹下 /Butterfly/layout/includes文件夹下找到head.pug文件，在最后引入
其次选择分享模型：Floating、Inline、Expanding、Image Sharing、Popup、Banner、Slider。每种模型的效果如下：
https://liuyib.github.io/2019/09/24/use-pjax-to-your-site/
需求一：首先呢，当然是在浏览器中输入ip（101.42.229.55），就可以访问页面~。 1.需要有自己的Linux云服务器（我用的腾讯云服务器，几十块） 2.在云服务器上部署nginx（部署个人博客，总不能一直session挂着进程吧，需要nginx来代理服务）
写这篇博客的缘故是因为看到cnblogs上的live2d模型可以自动欢迎，但是自己又不会魔改Hexo的live2d，就想到了以弹窗的方式来欢迎。
本片文章为本人想要换hexo的主题时所写。因此省略node和hexo的安装，直接在初始化博客开始
1.在\themes\butterfly\layout\includes\widget目录下新建card_zhihu.pug文件，并写入如下代码：
title: Gitee + Nginx + Hexo +LeanCloud搭建博客
1.打开站点的主题配置文件_config.butterfly.yml，找到inject，在head处直接引入以下链接：
1、执行命令新建标签页面hexo new page tags 执行后会在博客的source目录下生成对应的文件夹
Cloud Studio 是基于浏览器的集成式开发环境（IDE），为开发者提供了一个永不间断的云端工作站。用户在使用 Cloud Studio 时无需安装，随时随地打开浏览器就能在线编程。
在\themes\butterfly\layout\includes\widget目录下新建card_collections.pug文件，并写入如下代码：
最近重装了电脑，近几年内每次重装也好，装备新电脑也好，越来越觉得维护博客是令我比较头疼的事
最近重装了电脑，近几年内每次重装也好，装备新电脑也好，越来越觉得这个博客是令我比较头疼的事
前言 本文将介绍如何在主页侧边栏添加当前访客信息，具体效果如下： 教程链接：Hexo博客搭建 与 美化教程 | 卓越科技的Blog (zykj.js.org) 操作 注意：必须确保使用了Hexo tag 外挂标签的span的样式（👈点击跳转），否则显示的内容没有彩色样式。 1.在 themes\Butterfly\layout\includes\widget\ 下创建 card_ip.pug 文件，并写入以下内容： .card-widget.card-ip .card-content
由于本教程涉及的所有修改对缩进格式等有严格要求，担心自己控制不好的可以直接下载静态资源，将压缩包内的butterfly文件夹复制到[Blogroot]\theme\目录下覆盖现有主题文件夹即可跳过以下教程的前3步，直接到主题配置文件_config.butterfly.yml中参照第4步修改配置项。
系统会自动在.ssh文件夹(.SSH在C:\Users\Windows用户名目录下)下生成两个文件，id_rsa和id_rsa.pub
基于Vercel自建API构建引用的是：python-github-calendar-api
本项目是对冰卡诺老师写的教程：基于Butterfly主题的分类磁贴2.0版进行重构，去除了所有繁杂的引入js的过程，所以也就无需引入jquery和vue，也完美支持pjax。当前4.0版本可以自动获取分类及文章数。封面和描述配置项直接嵌入配置文件。支持自定义行数，超过自动切换为滚动显示。可选择三列或四列显示。
本篇仅使用butterfly_v3.6.0 +的主题版本，如果是在这之前的版本，请移步下方教程链接。
本文仅仅针对有程序开发基础或有决心毅力的人，如果想点点按钮就搭建成功，那还是算了。
git和nodejs安装好后，就可以安装hexo了，你可以先创建一个文件夹MyBlog，用来存放自己的博客文件，然后cd到这个文件夹下（或者在这个文件夹下直接右键git bash打开）。
安装依赖。 前往博客根目录，打开cmd命令窗口执行npm install hexo-generator-search --save。
在\themes\butterfly\layout\includes\page目录下新建notice.pug模板：
页脚养鱼效果我也是折腾了蛮久的，奈何自己太菜，出现了一些问题也不知道怎么解决，查询一些博客，相关的描述也很简单。这里参考了Ln大佬的博客，总算是搞定了。
年前有一位小伙伴给我提供了一个API（在此表示感谢），希望实现当前访客功能，具体效果如下：
🧑个人简介：大家好，我是 shark-Gao，一个想要与大家共同进步的男人😉😉
无意中浏览到了Lucifer三思而后行的博客，看到了首页侧边栏的微博热搜板块，比较感兴趣，自己尝试做一个（样式一致）。
首先\themes\butterfly\source\css路径下创建一个css文件，比如ahzoo.css
修改文件 themes/butterfly/layout/includes/mixins/post-ui.pug
1.在\themes\butterfly\source\css路径下创建一个mouse.css文件，在文件中添加如下代码：
Hexo是一款基于Node.js的静态博客框架，依赖少易于安装使用，可以方便的生成静态网页托管在GitHub和Coding上。
本人用的是npm方式安装的 hexo-theme-butterfly，后续魔改时更改的文件都是【BlogRoot/node_modules/hexo-theme-butterfly】文件夹中的文件。如果你是git clone方式安装的主题，请在【BlogRoot/themes/butterfly】文件夹下修改对应的文件。
之前一直使用的是Butterfly主题默认的魔方盒子（姑且就这么称呼）加载动画，但是属实是不太喜欢。偶然看到了一个博客使用转动齿轮效果感觉很喜欢，就有了这篇文章。
如果改动了站点配置文件_config.yml 和主题配置文件_config.butterfly.yml，需要重新编译才能看到效果。
遵循Valine的指示，配置好LeanCloud应用,点击控制台->注册并登录账号->创建应用->随便取名字填入描述->设置->应用凭证，就能看到需要的信息重点关注其中的appId,appKey和Request域名。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
即时通信 IM
腾讯会议
