Hexo + Fomalhaut 主题修改与优化指南 📝

本文档详细介绍了如何对 Fomalhaut 主题进行个性化修改与优化，包括壁纸更换、样式调整、功能配置等，助你打造独一无二的博客外观！✨

导航目录 📚

🖼️ 一、修改日夜模式壁纸
🎨 二、调整个人信息卡片背景
🧲 三、小冰分类磁贴样式
🌊 四、隐藏波浪模式
📢 五、公告栏设置
🎨 六、主题变量对接
💡 七、常用 CSS 技巧
🔤 八、字体修改指南
🏮九、灯笼开关

一、🖼️ 修改日夜模式壁纸

Fomalhaut 主题支持为日间和夜间模式分别设置不同的壁纸，让你的博客在不同时间展现不同风格！

修改方法：

找到文件：[BlogRoot]/themes/butterfly/source/css/_custom/custom.css

搜索以下CSS变量进行修改：

:root {
--default-bg: url(https://file.meimolihan.eu.org/hexo/default-bg.png);  /* 电脑日间壁纸 */
--darkmode-bg: url(https://file.meimolihan.eu.org/hexo/darkmode-bg.webp);  /* 电脑夜间壁纸 */
--mobileday-bg: url(https://file.meimolihan.eu.org/hexo/mobileday-bg.png);  /* 手机日间壁纸 */
--mobilenight-bg: url(https://file.meimolihan.eu.org/hexo/mobilenight-bg.webp); /* 手机夜间壁纸 */
}

💡 提示：建议使用高质量图片（推荐分辨率：1920×1080），并确保图片URL可正常访问。

二、🎨 调整个人信息卡片背景

个性化你的博主信息卡片，让它与整体主题风格更匹配！

修改方法：

同样在 custom.css 文件中搜索：

1
2
3

.author-content {
  background-image: url('你的卡片背景图URL');
}

✨ 特点：支持渐变色、静态图片和动态GIF，让你的名片更加生动！

三、🧲 小冰分类磁贴样式

小冰分类磁贴是Fomalhaut的特色功能之一，可以让分类目录以磁贴形式展示，更加美观实用。

修改方法：

在 custom.css 中搜索 .magnet_item

调整以下样式属性：

.magnet_item {
  background: var(--theme-color); /* 背景色 */
  border-radius: 12px; /* 圆角大小 */
  box-shadow: 0 3px 8px var(--shadow-color); /* 阴影效果 */
  transition: all 0.3s ease; /* 悬停动画 */
}

.magnet_item:hover {
  transform: translateY(-5px); /* 悬停效果 */
  box-shadow: 0 8px 16px var(--shadow-color-hover);
}

四、🌊 隐藏波浪模式

如果你觉得波浪效果影响阅读体验，可以轻松隐藏它。

修改方法：

在 custom.css 中搜索 .main-hero-waves-area

添加以下代码：

1
2
3

.main-hero-waves-area {
  display: none !important;
}

⚠️ 注意：隐藏波浪效果后，首页底部会变得简洁，但也会失去动态效果。

五、📢 公告栏设置

公告栏是向访客展示重要信息的理想位置，如更新日志、活动通知等。

配置方法：

打开 [BlogRoot]/_config.butterfly.yml
搜索 card_announcement

修改配置：

1
2
3

card_announcement:
  enable: true
  content: "🎉 欢迎访问我的博客！这里记录我的学习笔记和生活感悟～"

🔧 功能：支持HTML格式，可以添加链接、表情等丰富内容。

六、🎨 主题变量对接

Fomalhaut 主题使用CSS变量统一管理样式，方便自定义主题色彩。

常用变量对接示例：

/* 背景色接入 */
[data-theme="light"] .test {
    background: var(--trans-light); /* 日间模式 接入背景色 */
}
[data-theme="dark"] .test{
    background: var(--trans-dark); /* 夜间模式 接入背景色 */
}

/* 悬停元素背景接入 */
.test:hover {
    background-color: var(--theme-color); /* 背景接入主题色 */
}

/* 悬停字体颜色 */
.test:hover {
    color: var(--theme-color) !important; /* 字体接入主题色 */
}

/* 鼠标悬停边框阴影效果 */
.test:hover {
    box-shadow: 0 0 3px var(--theme-color) !important; /* 鼠标悬停边框阴影效果 接入主题色 */
}

/* 边框装饰线（Fomalhaut白色装饰线） */
.test:hover {
    border: var(--border-style); /* 边框装饰线（Fomalhaut白色装饰线） */
}

七、💡 常用 CSS 技巧

这里收集了一些实用的CSS代码片段，方便快速修改样式：

文字样式调整：

.test {
    font-size: 18px; /* 字体大小 */
    font-weight: bold; /* 字体加粗 */
    color: #000000; /* 文字颜色 */
}

元素位置调整：

.test {
    height: 20px !important;  /* 调整高度 */
    width: 20px !important;   /* 调整宽度 */
    margin-bottom: 10px !important; /* 向上移动10px */
    margin-top: 10px !important;    /* 向下移动10px */
    margin-right: 10px !important;  /* 向左移动10px */
    margin-left: 10px !important;   /* 向右移动10px */
    vertical-align: middle; /* 默认居中对齐 */
    vertical-align: -0.3em; /* 上下移动 */
}

八、🔤 字体修改指南

Fomalhaut 主题支持自定义字体，让你的博客拥有独特的排版风格。

字体资源推荐

字体天下：https://www.fonts.net.cn/（丰富的中文字体资源）
谷歌字体：https://fonts.google.com/（免费的英文字体库）
格式转换工具：TTF 到 WOFF2转换器（优化网络字体加载）

字体更换步骤

1. 下载并替换字体文件
以「杨任东竹石体」为例：

修改 [BlogRoot]/themes/butterfly/source/css/_custom/custom.css：

@font-face {
  font-family: ZhuZiAWan;
-  src: url(https://data-static.netdun.net/Fomalhaut/fonts/ZhuZiAWan2.woff2);
+  src: url(https://cdn.meimolihan.eu.org/hexo/fonts/Heavy.woff2);
  font-display: swap;
}

2. 引入字体到样式

1
2
3

.test {
  font-family: var(--global-font); /* 引入字体 */
}

3. 字体接入主题色

1
2
3

.test {  
  color: var(--theme-color) !important;  /* 字体接入主题色 */
}

4. 更新字体切换控制台
修改 [BlogRoot]/source/js/fomal.js：

1
2

- <a class="swf" id="swf_ZhuZiAWan" href="javascript:;" rel="noopener external nofollow" style="font-family:'ZhuZiAWan'!important;color:black" onclick="setFont('ZhuZiAWan')">筑紫A丸标准体2.0</a>
+ <a class="swf" id="swf_ZhuZiAWan" href="javascript:;" rel="noopener external nofollow" style="font-family:'ZhuZiAWan'!important;color:black" onclick="setFont('ZhuZiAWan')">杨任东竹石体</a>