hexo-theme-hieroglyphs

v1.0.19

Published

a year ago

Hexo theme based on hieroglyphs fine-tuning

Downloads

0High
0Medium
0Low

hieroglyphs

hexo theme butterfly hexo-theme-hieroglyphs

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。