主题
安装
下载解压主题文件放置到 themes 文件夹目录下，确保文件名为 butterfly 不可更改。
目录结构如下
typecho
├── db
├── langs
├── plugins
├── themes
│ ├── butterfly
│ │ ├── api
│ │ ├── config
│ │ └── ...
│ └── default
├── uploads
└── docker-compose.yaml
预览图
修改
隐藏文章列表作者元素
个人博客作者就是自己要什么作者？
注释 ./themes/butterfly/index.php 以下元素块
<!--定制
<span class="article-meta">
<span class="article-meta-separator">|</span>
<i class="fa-solid fa-pen-nib"></i>
<?php _e('作者: '); ?><a itemprop="name" href="<?php $this->author->permalink(); ?>" rel="author"><?php $this->author(); ?></a>
</span>
-->
隐藏文章页面文章链接
注释 ./themes/butterfly/post.php 以下元素块
<!-- 定制
<div class="post-copyright__type">
...
</div>
-->
隐藏文章页面作者元素
注释 ./themes/butterfly/post.php 以下元素块
<!-- 仙玉衡
<div class="post-copyright__author">
...
</div>
-->
修改版权说明
<!-- 定制 -->
<div class="post-copyright__notice">
<span class="post-copyright-meta">版权声明: </span>
<span class="post-copyright-info">
<?php if ($this->fields->CopyRight == 'off') : ?>
<!--<b style="color:red">本文不可转载</b>，引用或转载文章前请先联系博主！-->
<a href="https://creativecommons.org/licenses/by-nd/4.0/deed.zh-hans" target="_blank"><b style="color:red">CC BY-ND 4.0</b></a>
<?php else : ?>
<a href="https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh-hans" target="_blank">CC BY-NC-SA 4.0</a>
<?php endif ?>
</span>
</div>
<!-- 定制 -->
隐藏文章页面分享元素
真的有人这么分享么？
注释 ./themes/butterfly/post.php 以下元素块
<!-- 定制
<div class="post_share">
...
</div>
-->
隐藏文章页面分页元素
注释 ./themes/butterfly/post.php 以下元素块
<!-- 定制
<nav class="pagination-post" id="pagination">
...
</nav>
-->
隐藏文章页面评论区小人
自定义CSS样式（非必填）
.textarea {background: url() 100% 100% no-repeat !important;}
隐藏博主头像撒花特效
自定义CSS样式（非必填）
.card-info-avatar:hover { background: url() }
隐藏评论 UA OS 信息
注释 ./themes/butterfly/function.php 以下内容
<!-- 定制
<span class="comment-ua">
<?php getOs($comments->agent); ?>
<?php getBrowser($comments->agent); ?>
</span>
-->
主题颜色修改1
./header_com.php
Snackbar: {
"chs_to_cht": "你已切换为繁体",
"cht_to_chs": "你已切换为简体",
"day_to_night": "你已切换为深色模式",
"night_to_day": "你已切换为浅色模式",
/*
定制
切换成功后会在左上角出现的提示
*/
"bgLight": "#065279",
"bgDark": "#121212",
"position": "<?php $this->options->SnackbarPosition() ?>"
},
主题设置
顶图设置
使用主机路径示例
/usr/uploads/2025/02/557812971.jpg
字体修改
ttf woff woff2 格式字体皆可，建议转换为 woff2 格式，更小更适宜 web 环境。
如下指定 url 为本地字体文件路径，使用网络路径亦可。
@font-face {
font-family: 'MesloLGM Nerd Font Mono';
src: url('/usr/fonts/MesloLGMNerdFontMono-Regular.woff2') format('woff2');
font-weight: normal;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'LXGW WenKai Mono';
src: url('/usr/fonts/LXGWWenKaiMono-Medium.woff2') format('woff2');
font-weight: normal;
font-style: normal;
font-display: swap;
}
body { font-family: MesloLGM Nerd Font Mono,LXGW WenKai Mono,-apple-system,BlinkMacSystemFont,segoe ui,helvetica neue,Lato,Roboto,pingfang sc,microsoft yahei,sans-serif;}
网站图标修改
在主题设置中 自定义head标签内位置内容 中添加如下内容
<link rel="shortcut icon" href="/usr/img/favicon.ico" type="image/x-icon">
主题自定义颜色
建议 第 124 类颜色可相同
主题主要颜色
指针移动到文章列表文章名时字体的颜色
指针移动到导航栏时的字体下划线的颜色
指针移动到文章目录时字体的颜色
分割线颜色
按钮颜色
分割线剪刀颜色
侧边栏设置按钮颜色
按钮悬停色
按钮被选中的颜色
文本选择色
文章目录选中项背景色
转义
typecho markdown 表格中有|需要转义，不能用\转义，可用 | 或 | 替代。1