Butterfly 指南 1

介绍

经过一段时间，我相信这个Hexo博客已经完成了大部分的开发工作，所以我决定写一个关于这个网站的简单指南。

这个网站基于Hexo。它是一个快速、简单且强大的博客框架。它也是一个开源程序。你可以在其官方网站上找到更多信息。同时，这个博客基于一个叫做Butterfly的主题，你可以在网站的页脚找到更多信息。我选择使用这个主题的原因是它让你的博客变得更加灵活，它给你很多选择来控制你的网站，你可以修改源代码来满足你的需求。

最后，这个博客上的许多功能或改进都来自其他人（来自互联网），感谢他们的分享。我会添加一些推荐的网站。希望这篇文章能帮助到你。（我也是个外行。我只是玩着玩着。）

简单的美化将从第5部分开始。

第一部分

推荐网站（你可以从这些网站找到很多关于博客的有用文章，他们都做得比我好。）

第二部分

开发环境：

hexo: 6.0.0

hexo-cli: 4.3.0

Butterfly: 4.01

Mac OS: Monterey (arm64)

Ubuntu: 20.04.3 LTS (arm64)

第三部分

主要步骤（本文将更多关注简单的美化）

买一台电脑（例如：树莓派😁）
安装操作系统
安装npm
安装node.js
安装Hexo
选择一个主题（本文使用butterfly）
阅读大量关于主题的文章
初始化hexo
使用Markdown写一些内容
发布它
转移到你的服务器或其他地方
检查它

第四部分

在对你的博客进行任何操作之前，请先做好备份以防止出现问题。

第五部分

正如主题作者Jerry所说，最好在Hexo的根目录下创建一个_config.butterfly.yml文件，并将主题目录中的_config.yml内容复制到_config.butterfly.yml中，以后你只需要在_config.butterfly.yml中进行配置。

Hexo会自动合并主题中的_config.yml和_config.butterfly.yml的配置。如果有同名的配置，它会使用_config.butterfly.yml的配置，因为它具有更高的优先级。

所以我建议你先注入自定义CSS。这可以防止在更新主题时某些功能停止工作。

转到_config.butterfly.yml

点击Command+F（Mac）并在搜索框中输入"inject"。找到这个。

inject:
   head:
  - <link rel="stylesheet" href="/css/mycss.css">
bottom:
    # - <script src="xxxx"></script>

之后你去到你的myblog文件夹/hexo-theme-butterfly/soueces/css/然后创建一个css文件，你可以叫它mycss。

第六部分

就像我说的，你可以在互联网上找到很多资源，我在这里放一些CSS内容，它们大多数仍然来自其他网站，你可以尝试使用和修改这些CSS，它不会损坏你的电脑。再次感谢他们的分享。

箭头颜色更改

/* 箭头颜色更改 */

#content-inner.layout h1::before {
    color: #ff4500 ;
    margin-left: -1.55rem;
    font-size: 1.3rem;
    margin-top: -0.23rem;
}
#content-inner.layout h2::before {
    color: #ff4500 ;
    margin-left: -1.35rem;
    font-size: 1.1rem;
    margin-top: -0.12rem;
}
#content-inner.layout h3::before {
    color: #ffbf00 ;
    margin-left: -1.22rem;
    font-size: 0.95rem;
    margin-top: -0.09rem;
}
#content-inner.layout h4::before {
    color: #a9e000 ;
    margin-left: -1.05rem;
    font-size: 0.8rem;
    margin-top: -0.09rem;
}
#content-inner.layout h5::before {
    color: #57c850 ;
    margin-left: -0.9rem;
    font-size: 0.7rem;
    margin-top: 0.0rem;
}
#content-inner.layout h6::before {
    color: #5ec1e0 ;
    margin-left: -0.9rem;
    font-size: 0.66rem;
    margin-top: 0.0rem;
}

页脚透明

/* 页脚透明 */
#footer{
  background: transparent!important;
}

夜间模式伪类遮罩层透明

/*
 * 夜间模式伪类遮罩层透明
 */
 
[data-theme="dark"] #footer::before{
  background: transparent!important;
}
[data-theme="dark"] #page-header::before{
  background: transparent!important;
}