Hieroglyphs 主题
基于 butterfly 主题微调后的极简风格主题，更加专注于写作。
预览：猫四叔
站点截图
特性
基于 Butterfly 主题做了以下修改
- 去除元素的阴影效果
- 添加元素边框与
hover边框变色属性 - 自定义页脚
- 自定义字体
- 加载动画优化
- 优化 CDN 加速
- 添加首页文章轮播
- 优化整体加载速度
快速开始
Git 安装
在博客根目录 clone 仓库
git clone https://jihulab.com/hieroglyphs/hexo-theme-hieroglyphs.git themes/hieroglyphs # 极狐 Gitlab 仓库
git clone https://github.com/hieroglyphicss/hexo-theme-hieroglyphs.git themes/hieroglyphs # Github 仓库NPM 安装
npm install hexo-theme-hieroglyphs应用主题
修改站点配置
theme: hieroglyphs安装必要插件
npm install hexo-renderer-pug hexo-renderer-stylus --save # 安装渲染插件
npm install hexo-butterfly-swiper # 安装首页文章轮播插件配置
主题色
在根目录 _config.hieroglyphs.yml 中修改 color 项色值 #6f42c1。
theme_color:
enable: true
main: "#6f42c1"
paginator: "#6f42c1"
button_hover: "#6f42c1"
text_selection: "#6f42c1"
link_color: "#6f42c1"
meta_color: "#0d0d0d"
hr_color: "#6f42c1"
code_foreground: "#F47466"
code_background: "rgba ( 27,31,35, .05 ) "
toc_color: "#6f42c1"
blockquote_padding_color: "#6f42c1"
blockquote_background_color: "#6f42c1"
scrollbar_color: "#6f42c1"
meta_theme_color_light: "ffffff"
meta_theme_color_dark: "#0d0d0d"修改 themes/hieroglyphs/css/_hieroglyphs/hieroglyphs.css 中的色值 #6f42c1，可以使用编辑器的替换功能整体替换色值，如 VScode：
![] ( assets/README/image-20230618132411976.png )
其余配置参考 hieroglyphs.css 中的注释。
加载动画
在 pace 网站选择加载动画，下载 css 后在根目录的 _config.hieroglyphs.yml 的 preloader 模块中修改 pace_css_url 项链接：
preloader:
enable: true
# source
# 1. fullpage-loading
# 2. pace ( progress bar )
# 3. custom
source: 3
# pace theme ( see https://codebyzach.github.io/pace/ )
pace_css_url: https://npm.elemecdn.com/hieroglyphs.package/blog/css/loading.css如想本地加载可以在根目录 source 目录新建 css 文件夹，将加载动画 css 放在此文件夹，修改 pace_css_url 项为 /css/loading.css。
背景
修改 _config.hieroglyphs.yml 中 background 项的色值。
# Website Background ( 設置網站背景 )
# can set it to color or image ( 可設置圖片 或者 顔色 )
# The formal of image: url ( http://xxxxxx.com/xxx.jpg )
background: '#f7f9fe'页脚信息
修改 themes/hieroglyphs/layout/includes/footer.pug 中的信息即可。
# footer-wrap
#ft
.ft-item-1
.t-top
.t-t-l
p.ft-t.t-l-t 公益广告🧬
.bg-ad
div
| 国家反诈中心是国务院打击治理电信网络新型违法犯罪工作部际联席会议合成作战平台，集资源整合、情报研判、侦查指挥为一体，在打击、防范、治理电信网络诈骗等新型违法犯罪中发挥着重要作用。
.btn-xz-box
a.btn-xz ( href='https://www.hack-gov.com.cn/posts/21480.html' ) 下载 ( 国家反诈中心 ) APP
.t-t-r
p.ft-t.t-l-t 生物信息学
ul.ft-links
li
a ( href='https://www.ncbi.nlm.nih.gov/' ) NCBI
a ( href='https://rapdb.dna.affrc.go.jp/' ) RAP DB
li
a ( href='http://plants.ensembl.org/index.html' ) Ensembl
a ( href='https://cn.string-db.org/' ) STRING
li
a ( href='http://pfam-legacy.xfam.org/' ) Pfam
a ( href='http://expression.ic4r.org/' ) Rice DB
li
a ( href='https://www.ddbj.nig.ac.jp/index-e.html' ) DDBJ
a ( href='https://david.ncifcrf.gov/home.jsp' ) DAVID
li
a ( href='http://geneontology.org/' ) GO DB
a ( href='https://www.rcsb.org/pdb/' ) PDB
.ft-item-2
p.ft-t 推荐链接
.ft-img-group
.img-group-item
a ( href='https://hexo.io/zh-cn/' ) img ( src='https://d33wubrfki0l68.cloudfront.net/6657ba50e702d84afb32fe846bed54fba1a77add/827ae/logo.svg' alt='' )
.img-group-item
a ( href='https://vercel.com/' )
img ( src='https://assets.vercel.com/image/upload/front/favicon/round-2/180x180.png' alt='' )
.img-group-item
a ( href='https://npmjs.com/' )
img ( src='https://clipground.com/images/npm-logo-png-5.png' alt='' )
.img-group-item
a ( href='https://hack-gov.com.cn' )
img ( src='https://websitecssjs.oss-cn-beijing.aliyuncs.com/links/favicon.ico' alt='' )
.img-group-item
a ( href='https://butterfly.js.org/' )
img ( src='https://butterfly.js.org/img/avatar.png' alt='' )
.img-group-item
a ( href='https://cloud.tencent.com/' )
img ( src='http://www.we123.com/d/file/xcx/2017-09-01/650e9b349b7ee4ea9dc848d839672ac1.png' alt='' )
.img-group-item
a ( href='https://fe32.top/' )
img ( src='https://bu.dusays.com/2022/05/02/626f92e193879.jpg' alt='' )
.img-group-item
a ( href='https://dusays.com' )
img ( src='https://cdn.dusays.com/avatar.png' alt='' )字体
在 themes/hieroglyphs/css/_hieroglyphs/hieroglyphs.css 中找到下列代码块：
/* 引入自定义字体 start */
@font-face {
/* 为载入的字体取名字 ( 随意 ) */
font-family: 'ZITI';
/* 字体文件地址 ( 相对或者绝对路径都可以 ) */
src: url ( https://npm.elemecdn.com/hieroglyphs.package/blog/fonts/ZhuZiAWan.ttf ) ;
/* 定义加粗样式 ( 加粗多少 ) */
font-weight: normal;
/* 定义字体样式 ( 斜体/非斜体 ) */
font-style: normal;
/* 定义显示样式 */
font-display: block;
}
/* 引入自定义字体 end */修改 url ( ) 中的链接，默认使用在线字体，如要使用本地字体，在根目录 source 文件夹新建 font 文件夹，将字体放入此文件夹，url ( ) 填写 /font/xxxx.ttf 即可。
CDN
修改 _config.hieroglyphs.yml 中 CDN 项的 option 项，默认只配置了部分加载项，其中 main_css 为本主题默认的 css，若修改了 hieroglyphs.css，需注释掉此项以保证引入修改后的 css。在修改后可以执行 hexo cl && hexo g 生成新的页面文件后，将 public/css/index.css 放到 CDN 实现加速。
其余配置
其余配置请参考 Butterfly 官方文档 。
从 Butterfly 开始
请先完成 Butterfly 主题的安装，下载本主题的 themes/hieroglyphs/css/_hieroglyphs/hieroglyphs.css 放在根目录 /source/css/下 ，并在根目录 _config.butterfly.yml 中 inject 头部引入 css 即可
inject:
head:
- <link rel="stylesheet" href="/css/hieroglyphs.css" media="defer" onload="this.media='all'">
部署建议
建议直接将博客整个仓库推送到 GitHub，使用 Vercel 新建项目，选择 Hexo 框架进行部署并绑定自定义域名。
参考资料
致谢
本人代码水平较低，代码质量不高，部分代码可以会有冗余，还望不吝赐教。欢迎发送 PR。