博客搭建其二：博客的基础搭建

项目笔记：Ark-Static-Hexo-Blog (ASHB) - 前端构建与美化SOP

项目代号： A.S.H.B

目标： 构建一个具备高度定制化视觉效果和流畅用户体验的 Hexo 博客前端。

第一部分：基础环境搭建 (地基工程)

1.1 环境依赖与初始化

• 核心依赖: Node.js (LTS版本) and Git

• Hexo CLI 安装:

  npm install hexo-cli -g

• 项目初始化:

  hexo init <project-name>
  cd <project-name>
  npm install

  此步骤创建了一个标准的、包含默认主题 landscape 的Hexo项目。

1.2 主题集成：Butterfly

• 选择理由: Butterfly 主题拥有极其丰富的配置项、活跃的社区和强大的扩展性，是实现高度定制化视觉效果的最佳选择。

• 安装:

  # 从GitHub克隆最新稳定版主题
  git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly

• 启用: 修改 Hexo 主配置文件 (_config.yml) 的 theme 字段：
  theme: butterfly

• 安装渲染器: Butterfly 的模板和样式依赖 pug 和 stylus。

  npm install hexo-renderer-pug hexo-renderer-stylus --save

• 创建主题配置文件: 将 themes/butterfly/_config.yml 复制到项目根目录，重命名为 _config.butterfly.yml，以实现配置与主题的分离。

1.3 核心插件安装

• 评论系统:
  npm install hexo-tag-aplayer --save (即使我们最终用注入法，安装此插件也能解决一些依赖问题)
• 文章功能:
  npm install hexo-wordcount --save
npm install hexo-generator-searchdb --save

至此，一个功能基础、可运行的 Butterfly 博客搭建完成。

---

第二部分：视觉特效与环境优化 (装修工程)

2.1 “罗德岛UI”视觉风格植入

• 核心理念: 采用深色模式 (Dark Mode) + 玻璃拟态 (Glassmorphism) + 科技感点缀的设计语言。
• 深色模式配置 (_config.butterfly.yml):
  • dark_mode: enable: true
  • display_mode: dark (设为默认)
• 主题配色 (_config.butterfly.yml -> theme_color):
  • 定义一套明日方舟风格色板，主色调 (main) 使用标志性橙黄色 (#F09022)，链接和强调色 (paginator) 使用科技蓝 (#00BFFF)。
• 字体配置 (_config.butterfly.yml -> font):
  • 引入科技感无衬线字体，如 Google Fonts 的 Exo 2。
    font_link: "https://fonts.googleapis.com/...
font_family: "'Exo 2', sans-serif"

2.2 玻璃拟态 (Glassmorphism) 效果实现

• 原理: 通过全局背景图 + 半透明模糊前景实现。

• 步骤:

  1. 在 _config.butterfly.yml 中设置一个全局背景图:
     background: url(/img/ark-background-blur.jpg)

  2. 创建自定义样式表 source/css/custom.css。

  3. 在 _config.butterfly.yml 的 inject.head 中注入此CSS文件。

  4. 在 custom.css 中，强制主内容容器 #body-wrap 背景透明，让 body 背景图得以显现。这是最关键的一步，解决了“一片漆黑”的问题。

     [data-theme="dark"] #body-wrap { background: transparent !important; }

  5. 在 custom.css 中，为所有卡片元素 (.card-widget, #recent-posts > .recent-post-item 等) 添加半透明背景、背景模糊 (backdrop-filter) 和边缘高光样式。

2.3 动态与交互特效

• 首页打字机效果 (_config.butterfly.yml -> subtitle):
  • enable: true, effect: true。
  • 在 sub: 列表中写入明日方舟风格的短语，如“你好，博士。”
• 动态粒子背景 (_config.butterfly.yml -> canvas_nest):
  • enable: true，并将 color 设置为主题橙黄色。
• 加载动画 (_config.butterfly.yml -> preloader):
  • enable: true，选择 source: 2 (Pace.js 进度条)，更具科技感。
• 页面无刷新切换 (PJAX):
  • 作用: 实现切换页面时，背景音乐不中断，并提供更流畅的过渡动画。
  • 配置 (_config.butterfly.yml -> pjax): enable: true。
  • 配合: 确保音乐播放器的 HTML 结构中包含 class="no-destroy"，防止其在页面切换时被销毁。

2.4 代码块高级美化

• 切换渲染器: 弃用默认的 highlight.js，改为功能更强大、样式更稳定的 PrismJS。

  • 在主配置 _config.yml 中，设置 highlight: enable: false，并开启 prismjs: enable: true。

• 主题与样式 (_config.butterfly.yml -> code_blocks):

  • 设置 macStyle: true，实现带有仿 macOS 红绿灯按钮的头部。
  • 选择一个优秀的暗色 theme，如 darker (旧版) 或 tomorrow/a11y-dark (新版)。

• 解决换行问题: 在 custom.css 中添加强制换行规则，以解决超长代码行（如 wget URL）无法自动换行的问题。

  pre, code { white-space: pre-wrap !important; word-break: break-all !important; }

2.5 可选趣味性插件

• 全局吸底音乐播放器 (APlayer):

  • 通过 _config.yml 中开启 aplayer: { meting: true, asset_inject: false }。
  • 在 _config.butterfly.yml 中开启 aplayerInject: { enable: true, per_page: false }。
  • 最终在 inject.bottom 中，使用官方文档推荐的 <div class="aplayer no-destroy"...> 语法，并配置歌单ID。

参考链接：https://butterfly.js.org/posts/21cfbf15/