前言

大家好呀 👋！最近很多小伙伴都在问我博客是怎么搭建的，今天就来分享一下我的博客搭建经验。我的博客是基于 Hexo 框架搭建的，使用了 butterfly 主题，参考了安知鱼博主的设计风格，做了很多有趣的功能增强。

特色功能

全站搜索功能

评论互动系统

音乐播放器

响应式设计

文章目录

快速开始

首先需要安装 Node.js 和 Git，然后通过 npm 安装 Hexo：

1
npm install -g hexo-cli

创建博客项目：

1
2
3
hexo init blog
cd blog
npm install

主题配置

安装 butterfly 主题：

1
npm install hexo-theme-butterfly

在 _config.yml 中设置主题：

1
theme: butterfly

功能增强

1. 音乐播放器

使用 APlayer 来实现音乐播放功能：

1
npm install hexo-butterfly-aplayer --save

主题配置文件中添加

1
2
3
4
5
6
7
8
9
10
inject:
  head:
    # 引入自定义css 
    # - <link rel="stylesheet" href="/xxx.css">
    - <link rel="stylesheet" href="/css/custom.css" media="defer" onload="this.media='all'">
  bottom:
    # - <script src="xxxx"></script>
    # aplayer音乐

    - <div class="aplayer no-destroy" data-id="8152976493" data-server="netease" data-type="playlist"   data-order="list" data-fixed="true" data-preload="auto" data-autoplay="false" data-mutex="true" ></div>

2. 搜索功能

安装搜索插件：

1
npm install hexo-generator-search --save

美化技巧

为了让博客更加精美，我们可以添加一些动态效果：

可以使用 butterfly 主题提供的标签外挂，让文章更加生动

写作技巧

在写文章时，可以使用 markdown 的各种语法来增强文章的可读性：

使用醒目的标题，善用 H1-H6 标签

适当添加配图，让文章更加生动

代码要格式化，并标注语言类型

总结

搭建一个个人博客不仅可以记录学习心得，还能结识志同道合的朋友。希望这篇教程能帮助到想要搭建博客的小伙伴们！

如果觉得文章对你有帮助，欢迎点赞转发哦 ✨