用了 Halo 作为后台，主题是 halo-theme-hao

不过这个主题和上游的 hexo-theme-anzhiyu 并不是同步更新的，为了使用的舒服，还需要在 “抄作业” 的时候对一些地方做出修改。

更新：2024.1.2

因为作者加入社区开始修bug了，所以这篇文章的部分内容可能失去了参考价值

鱼塘 (/fcircle) 访问地址

因为主题中的前端界面已经落后于版本了，需要到主题页面中对 fcircle.html 模板进行修改。

模板文件位于 halo 部署位置下面的 /halo2/themes/theme-hao/templates/fcircle.html

替换步骤

找到 <div id="hexo-circle-of-friends-root"></div>

将下面的：

<script type="text/javascript">
          var UserConfig = {
            // 填写你的api地址
            private_api_url: "[(${theme.config.fcircle.apiurl})]",
            // 点击加载更多时，一次最多加载几篇文章，默认10
            page_turning_number: 12,
            // 头像加载失败时，默认头像地址
            error_img: 'https://sdn.geekzu.org/avatar/57d8260dfb55501c37dde588e7c3852c',
            // 进入页面时第一次的排序规则
            sort_rule: 'created'
          }
        </script>
        <link rel="stylesheet" th:href="${assets_link + '/libs/moments/heoMainColor.css'}">
        <script type="text/javascript" th:src="${assets_link + '/libs/moments/app.min.js'}"></script>
        <script type="text/javascript" th:src="${assets_link + '/libs/moments/bundle.js'}"></script>

替换成官方的：

<script>
          let UserConfig = {
            // 填写你的api地址
            private_api_url: "[(${theme.config.fcircle.apiurl})]",
            // 初始加载几篇文章
            page_init_number: 20,
            // 点击加载更多时，一次最多加载几篇文章，默认10
            page_turning_number: 10,
            // 头像加载失败时，默认头像地址
            error_img: 'https://sdn.geekzu.org/avatar/57d8260dfb55501c37dde588e7c3852c',
            // 进入页面时第一次的排序规则
            sort_rule: 'created',
            // 本地文章缓存数据过期时间（天）
            expire_days: 1,
          }
        </script>
        <script type="text/javascript" src="https://npm.elemecdn.com/fcircle-theme-yyyz@1.0.13/dist/fcircle.min.js"></script>

评估

使用官方方案的话，除非自行缓存前端界面的资源，然后修改形如 "${assets_link + '/libs/moments/heoMainColor.css'}" 的模板字符串，否则资源加载并不使用 halo设置>主题>其他设置>静态资源文件设置 里面设置的加速站的链接。

效果

• 前端界面更新到官方最新版本

修复about页移动端图片拉伸问题

该问题是 head.html 模板在 css 上写死 height 造成的

修复方法

找到 /halo2/themes/theme-hao/templates/assets/zhheo/zhheoblog.css

搜索 #about-page .author-img img

会看到：

#about-page .author-img img {
    border-radius: 200px;
    overflow: hidden;
    width: 180px;
    height: 180px
}

将这一段里面的 height: 180px 给注释掉或直接删掉 ，变成下面的样子：

#about-page .author-img img {
    border-radius: 200px;
    overflow: hidden;
    width: 180px
}

修复套cloudflare后网页资源加载降速问题

可以对网站资源进行 CDN 或用 OSS 加速访问，但是实际测试中，OSS 可以较好加速但是需要按流量付费，比较容易成为被攻击的对象，cloudflare 的 CDN 尽管可以有一定的加速，但是表现效果并不尽如人意。

解决方案

设置第三方资源站

因为主题依赖的资源占整个博客加载内容的比例较高，所以使用 OSS 有很好的效果，不过，该主题本身开源，资源的加速服务不必要使用自己的服务，而可以转而使用公开的加速站点。

在 Halo 的这里进行设置：halo设置>主题>其他设置>静态资源文件设置

在里面选择 cbd 或 onmicrosoft 任意一种，并保存。

修改模板，覆盖官方 zhheoblog.css

不过，还需要对 head.html 模板进行一定的修改，确保 zhheoblog.css 一定是从自己的服务器或 OSS 上加载过来的。

找到 /halo2/themes/theme-hao/templates/modules/head.html

在里面找到 <link rel="stylesheet" th:href="${assets_link + '/zhheo/zhheoblog.css' + theme_version}">

修改为 <link rel="stylesheet" th:href="${'/themes/theme-hao/assets/zhheo/zhheoblog.css' + theme_version}">

然后重启halo服务（清除服务器源缓存），必要时清除一下 cloudflare 的 CDN 缓存。

修复文字中分割线无法显示的现象

依然是 zhheoblog.css 文件的毛病

因为主题莫名其妙的把CSS里面的 hr 元素的显示属性搞成了 none（有点绷不住了）

测试分割线（应该有一条分割线）

原来的：（在大概第 6071 行之后）

/* 分割线 */
hr {
    display: none;
}

然后删掉或注释掉

修复在文章页面右侧栏元素显示不正常的现象

依然是 zhheoblog.css 文件的毛病

在 2217 行左右

#aside-content :only-child > .card-widget {
    margin-top: 0px;
}

margin-top 属性用于设置元素的顶部外边距外边距区域，设置为0导致了元素显示不正常的现象，使得各个元素挤在一起。

根据首页的CSS属性，这里保持间距统一应该改成：

#aside-content :only-child > .card-widget {
    margin-top: 1rem;
}

资源列表

上面提到的资源都可以在这里找到对应。

部署目录
├── db (文件夹内容省略)
├── docker-compose.yaml
└── halo2
    ├── attachments (文件夹内容省略)
    ├── backups
    ├── indices (文件夹内容省略)
    ├── keys (文件夹内容省略)
    ├── logs (文件夹内容省略)
    ├── plugins (文件夹内容省略)
    └── themes
        └── theme-hao
            ├── annotation-setting.yaml
            ├── LICENSE
            ├── package.json
            ├── pom.xml
            ├── README.md
            ├── settings.yaml
            ├── templates
            │   ├── about.html
            │   ├── album.html
            │   ├── archives.html
            │   ├── assets
            │   │   ├── css
            │   │   │   ├── fullPage.css
            │   │   │   ├── post-copyright.css
            │   │   │   ├── post-copyright-one.css
            │   │   │   ├── read-mode.css
            │   │   │   ├── related-posts-six.css
            │   │   │   └── related-posts-two.css
            │   │   ├── html
            │   │   │   └── link-canvas.html
            │   │   ├── icon
            │   │   │   ├── demo.css
            │   │   │   ├── demo_index.html
            │   │   │   ├── iconfont.css
            │   │   │   ├── iconfont.eot
            │   │   │   ├── iconfont.js
            │   │   │   ├── iconfont.json
            │   │   │   ├── iconfont.svg
            │   │   │   ├── iconfont.ttf
            │   │   │   ├── iconfont.woff
            │   │   │   └── iconfont.woff2
            │   │   ├── images
            │   │   │   ├── 404.gif
            │   │   │   ├── 404s.gif
            │   │   │   ├── beian.png
            │   │   │   ├── enfj.svg
            │   │   │   ├── enfp.svg
            │   │   │   ├── entj.svg
            │   │   │   ├── entp.svg
            │   │   │   ├── esfj.svg
            │   │   │   ├── esfp.svg
            │   │   │   ├── estj.svg
            │   │   │   ├── estp.svg
            │   │   │   ├── gzh_cover.png
            │   │   │   ├── hao-logo.jpg
            │   │   │   ├── home.webp
            │   │   │   ├── hua.gif
            │   │   │   ├── icons
            │   │   │   │   ├── AfterEffect.png
            │   │   │   │   ├── Apifox.webp
            │   │   │   │   ├── CSS3.png
            │   │   │   │   ├── Docker.png
            │   │   │   │   ├── FinalCutPro.png
            │   │   │   │   ├── Git.webp
            │   │   │   │   ├── HTML.png
            │   │   │   │   ├── illustrator.png
            │   │   │   │   ├── JS.png
            │   │   │   │   ├── Photoshop.png
            │   │   │   │   ├── Principle.png
            │   │   │   │   ├── Python.png
            │   │   │   │   ├── Sketch.png
            │   │   │   │   └── Swift.png
            │   │   │   ├── infj.svg
            │   │   │   ├── infp.svg
            │   │   │   ├── intj.svg
            │   │   │   ├── intp.svg
            │   │   │   ├── isfj.svg
            │   │   │   ├── isfp.svg
            │   │   │   ├── istj.svg
            │   │   │   ├── istp.svg
            │   │   │   ├── load
            │   │   │   │   └── rotating-ball-o.svg
            │   │   │   ├── top.png
            │   │   │   └── wechat
            │   │   │       ├── wechat1.png
            │   │   │       └── wechat2.png
            │   │   ├── js
            │   │   │   ├── comment
            │   │   │   │   ├── artalk.js
            │   │   │   │   ├── twikoo.js
            │   │   │   │   └── waline.js
            │   │   │   ├── custom.js
            │   │   │   ├── halo.js
            │   │   │   ├── heo.js
            │   │   │   ├── main.js
            │   │   │   ├── tw_cn.js
            │   │   │   └── utils.js
            │   │   ├── libs
            │   │   │   ├── aplayer
            │   │   │   │   ├── APlayer.min.css
            │   │   │   │   ├── APlayer.min.js
            │   │   │   │   ├── Meting2.min.js
            │   │   │   │   └── music.css
            │   │   │   ├── artalk
            │   │   │   │   ├── Artalk.css
            │   │   │   │   └── Artalk.js
            │   │   │   ├── canvas
            │   │   │   │   ├── bubble.js
            │   │   │   │   └── dark.js
            │   │   │   ├── clipboard
            │   │   │   │   └── clipboard.min.js
            │   │   │   ├── countup
            │   │   │   │   └── countup.js
            │   │   │   ├── dplayer
            │   │   │   │   ├── dplayer.html
            │   │   │   │   └── DPlayer.min.js
            │   │   │   ├── fast-average-color
            │   │   │   │   └── index.browser.min.js
            │   │   │   ├── fcircle
            │   │   │   │   ├── heo-fcircle3.css
            │   │   │   │   └── heo-fcircle3mini.js
            │   │   │   ├── gpt
            │   │   │   │   └── post-ai.js
            │   │   │   ├── hls
            │   │   │   │   └── hls.min.js
            │   │   │   ├── link
            │   │   │   │   ├── box2d.min.js
            │   │   │   │   ├── Main.min.js
            │   │   │   │   └── protoclass.min.js
            │   │   │   ├── moments
            │   │   │   │   ├── app.min.js
            │   │   │   │   ├── bundle.js
            │   │   │   │   ├── heoMainColor.css
            │   │   │   │   └── random-friends-post.js
            │   │   │   ├── no3d
            │   │   │   │   ├── no3d.css
            │   │   │   │   ├── no3d.min.js
            │   │   │   │   └── vue.min.js
            │   │   │   ├── pace
            │   │   │   │   └── pace.min.js
            │   │   │   ├── pjax
            │   │   │   │   └── pjax.min.js
            │   │   │   ├── prism
            │   │   │   │   ├── code.css
            │   │   │   │   ├── highlight.min.js
            │   │   │   │   ├── prism.min.css
            │   │   │   │   ├── prism.min.js
            │   │   │   │   └── themes
            │   │   │   │       ├── prism-a11y-dark.css
            │   │   │   │       ├── prism-atom-dark.css
            │   │   │   │       ├── prism-base16-ateliersulphurpool.light.css
            │   │   │   │       ├── prism-cb.css
            │   │   │   │       ├── prism-coldark-cold.css
            │   │   │   │       ├── prism-coldark-dark.css
            │   │   │   │       ├── prism-coy-without-shadows.css
            │   │   │   │       ├── prism-darcula.css
            │   │   │   │       ├── prism-dracula.css
            │   │   │   │       ├── prism-duotone-dark.css
            │   │   │   │       ├── prism-duotone-earth.css
            │   │   │   │       ├── prism-duotone-forest.css
            │   │   │   │       ├── prism-duotone-light.css
            │   │   │   │       ├── prism-duotone-sea.css
            │   │   │   │       ├── prism-duotone-space.css
            │   │   │   │       ├── prism-ghcolors.css
            │   │   │   │       ├── prism-gruvbox-dark.css
            │   │   │   │       ├── prism-gruvbox-light.css
            │   │   │   │       ├── prism-holi-theme.css
            │   │   │   │       ├── prism-hopscotch.css
            │   │   │   │       ├── prism-lucario.css
            │   │   │   │       ├── prism-material-dark.css
            │   │   │   │       ├── prism-material-light.css
            │   │   │   │       ├── prism-material-oceanic.css
            │   │   │   │       ├── prism-night-owl.css
            │   │   │   │       ├── prism-nord.css
            │   │   │   │       ├── prism-one-dark.css
            │   │   │   │       ├── prism-one-light.css
            │   │   │   │       ├── prism-pojoaque.css
            │   │   │   │       ├── prism-shades-of-purple.css
            │   │   │   │       ├── prism-solarized-dark-atom.css
            │   │   │   │       ├── prism-synthwave84.css
            │   │   │   │       ├── prism-vsc-dark-plus.css
            │   │   │   │       ├── prism-vs.css
            │   │   │   │       ├── prism-xonokai.css
            │   │   │   │       └── prism-z-touch.css
            │   │   │   ├── tocbot
            │   │   │   │   └── 4.18.2
            │   │   │   │       ├── tocbot.css
            │   │   │   │       └── tocbot.min.js
            │   │   │   ├── twikoo
            │   │   │   │   ├── easy-Danmaku.min.js
            │   │   │   │   └── twikoo.all.min.js
            │   │   │   ├── view-image
            │   │   │   │   └── view-image.min.js
            │   │   │   ├── waterfall
            │   │   │   │   └── waterfall.min.js
            │   │   │   └── welcome
            │   │   │       └── welcome.js
            │   │   └── zhheo
            │   │       ├── blogex.js
            │   │       ├── commentBarrage.css
            │   │       ├── commentBarrage.js
            │   │       ├── commentBarrage.min.css
            │   │       ├── custom.css
            │   │       ├── custom.min.css
            │   │       ├── rightmenu.js
            │   │       └── zhheoblog.css
            │   ├── bangumis.html
            │   ├── categories.html
            │   ├── category.html
            │   ├── comments.html
            │   ├── equipments.html
            │   ├── error
            │   │   ├── 404.html
            │   │   └── 500.html
            │   ├── fcircle.html
            │   ├── index.html
            │   ├── links.html
            │   ├── macro
            │   │   ├── author-content.html
            │   │   ├── bangumi-item.html
            │   │   ├── content-links.html
            │   │   ├── links-canvas.html
            │   │   ├── post-list.html
            │   │   └── prism-code.html
            │   ├── modules
            │   │   ├── about-widgets.html
            │   │   ├── aside.html
            │   │   ├── bar
            │   │   │   ├── category.html
            │   │   │   ├── custom-category.html
            │   │   │   ├── custom-tag.html
            │   │   │   ├── custom-url.html
            │   │   │   ├── more.html
            │   │   │   └── tag.html
            │   │   ├── category-filter.html
            │   │   ├── comment
            │   │   │   ├── Artalk.html
            │   │   │   ├── Twikoo.html
            │   │   │   └── Waline.html
            │   │   ├── comment.html
            │   │   ├── common
            │   │   │   ├── 51-la.html
            │   │   │   ├── code.html
            │   │   │   ├── diytitle.html
            │   │   │   ├── footer-style-one.html
            │   │   │   ├── open-graph.html
            │   │   │   ├── rightside.html
            │   │   │   └── toc-bot.html
            │   │   ├── footer.html
            │   │   ├── header
            │   │   │   ├── greeting.html
            │   │   │   └── index-img.html
            │   │   ├── head.html
            │   │   ├── layouts
            │   │   │   └── layout.html
            │   │   ├── loading-box.html
            │   │   ├── moment.html
            │   │   ├── nav.html
            │   │   ├── post
            │   │   │   ├── copyright
            │   │   │   │   ├── copyright-default.html
            │   │   │   │   └── copyright-one.html
            │   │   │   ├── copyright.html
            │   │   │   └── relatedPosts.html
            │   │   ├── post-list.html
            │   │   ├── recent-top.html
            │   │   ├── right-menu.html
            │   │   ├── sidebar.html
            │   │   ├── variables
            │   │   │   ├── layout.html
            │   │   │   └── site-config.html
            │   │   └── widgets
            │   │       ├── about-widgets
            │   │       │   ├── authorCareers.html
            │   │       │   ├── content-idea.html
            │   │       │   ├── game.html
            │   │       │   ├── hello-about.html
            │   │       │   ├── like-music.html
            │   │       │   ├── personalities-photo.html
            │   │       │   ├── statistics-map.html
            │   │       │   └── textarea.html
            │   │       ├── aside
            │   │       │   ├── adbox.html
            │   │       │   ├── archives.html
            │   │       │   ├── categories.html
            │   │       │   ├── comments.html
            │   │       │   ├── contain
            │   │       │   │   ├── archive-contain.html
            │   │       │   │   ├── stat-contain.html
            │   │       │   │   └── tags-contain.html
            │   │       │   ├── friend-link.html
            │   │       │   ├── music.html
            │   │       │   ├── power.html
            │   │       │   ├── profile.html
            │   │       │   ├── recent-posts.html
            │   │       │   ├── stat.html
            │   │       │   ├── steam.html
            │   │       │   ├── tags.html
            │   │       │   ├── tags-stat.html
            │   │       │   ├── toc.html
            │   │       │   ├── wechat.html
            │   │       │   └── welcome.html
            │   │       ├── banner-group.html
            │   │       ├── console.html
            │   │       ├── nav-left.html
            │   │       ├── nav-menu.html
            │   │       ├── nav-music.html
            │   │       ├── nav-right.html
            │   │       ├── page.html
            │   │       └── top-group.html
            │   ├── moments.html
            │   ├── music.html
            │   ├── new_comment.html
            │   ├── page.html
            │   ├── page_links.html
            │   ├── photos.html
            │   ├── post.html
            │   ├── tag.html
            │   ├── tags.html
            │   └── todolist.html
            └── theme.yaml