Fomalhaut 博客地址 Fomalhaut 项目地址

修改日夜四张壁纸

修改： [BlogRoot]/source/js/fomal.js

搜索：

1
--mobilenight-bg

个人信息卡片背景图

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

1
background-image: url

小冰分类分类磁贴

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

1
magnet_item

波浪模式隐藏

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

1
main-hero-waves-area

公告栏

修改： [BlogRoot]/_config.butterfly.yml
搜索：

1
card_announcement:

变量对接

接入透明背景

1
2
3
4
5
6
7
/* MD引用标签背景接入 */
[data-theme="light"] blockquote {
    background: var(--trans-light);
}
[data-theme="dark"] blockquote {
    background: var(--trans-dark);
}

接入主题颜色

1
2
3
4
/* 悬停元素背景接入 */
.aside-list-item:hover {
    background-color: var(--theme-color);
}

接入字体颜色

  • 日间模式：黑色字体，夜间模式：白色字体。
1
2
3
4
/* 悬停字体颜色 */
#aside-content .card-tag-cloud a:hover {
    color: var(--font-color) !important;
}

接入悬浮阴影

1
2
3
4
/* 鼠标悬停边框阴影效果 */
div#post:hover {
    box-shadow: 0 0 3px var(--theme-color) !important;
}

接入边框装饰线

1
2
3
4
/* 边框装饰线（Fomalhaut白色装饰线） */
div#post:hover {
    border: var(--border-style);
}

常用 CSS

文字

1
2
3
4
5
#post {
    font-size: 18px; /* 字体大小 */
    font-weight: bold; /* 字体加粗 */
    color: #000000; /* 文字颜色 */
}

元素调整

1
2
3
4
5
6
7
8
9
10
#post {
    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; /* 上下移动 */
}

修改字体

下载字体

字体天下 谷歌字体 TTF 到 WOFF2转换器

以 Heavy.woff2 字体文件，名字为【杨任东竹石体】为例

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

1
2
3
4
5
6
@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;
}

切换壁纸控制台修改
修改： [BlogRoot]\source\js\fomal.js
搜索：ZhuZiAWan

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>