基于ICARUS主题的Halo博客站点优化&美化方案
经验分享 
2,678 阅读
1 评论

基于ICARUS主题的Halo博客站点优化&美化方案

阅读提示

本文共15,282字，阅读大约需30分钟。

前言

近日，笔者抛弃了原来的WordPress博客，转投Halo后，选择了Icarus作为博客主题，选择此主题的原因则是因为被其简约而养眼的设计所吸引了，但也许是主题年代久远的原因（最后一次更新于2020年3月25日），下载安装过后，设置页面较为简陋。同时，也存在许多值得优化的空间（如标题过长时在移动端访问页面会被拉伸、代码无行号显示、无法自定义背景、加载js文件缓慢等）。虽然无法通过设置修改，但Halo后台仍然提供了主题编辑功能，因此，笔者花了大约1天时间，针对上述问题，将该主题进行了一些优化。

显示优化

站点背景图

白花花的背景确实显得有些单调，在此，笔者提供一种添加网站自定义背景的方式：
在主题编辑中，找到文件/layout/layout.ftl，在其中的<body>标签下添加三行HTML代码：

<div class="background-cover"></div>
<div class="background-img"></div>
<div class="background-cover2"></div>

接着，在上方添加CSS样式：

    <style>
		.background-cover2 {
			content: "";
			position: fixed;
			top: 0;
			left: 0;
			width: 100vw;
			height: 100vh;
			background-color: rgba(255,255,255,0.7);
			z-index: 0;
		}
		.background-img {
			top: -1vh;
			left: -1vw;
			width: 102vw;
			height: 102vh;
			position: fixed;
			background-size: cover;
			background-image: url(/upload/2022/03/bg-c5bdb3156ccc418499ebb6ebe51a63bf.png);
			backdrop-filter: blur(5px);
			filter: blur(5px);
			z-index: 0;
		}
		.background-cover {
			top: -1vh;
			left: -1vw;
			width: 102vw;
			height: 102vh;
			position: fixed;
			background-size: cover;
			filter: none !important;
			backdrop-filter: none !important;
			background-image: url(/upload/2022/03/bg-c5bdb3156ccc418499ebb6ebe51a63bf.png);
			z-index: 0;
		}
		.show-two-lines {
		  overflow: hidden;
		  text-overflow: ellipsis;
		  display: -webkit-box;
		  -webkit-line-clamp: 2;
		  -webkit-box-orient: vertical;
		}
		.footer {
			background-color: #fafafa !important;
			background: #fafafa !important;
		}
    </style>

其中，background-image即为替换背景图片的地址，此处背景图片有模糊效果，为了遮盖边缘模糊造成的白边，在模糊背景后添加了一层为模糊处理的背景层，并在模糊背景前添加了一层白色遮罩，使得视觉上更加美观。
添加了背景图片后的显示效果

文章添加评论数量、阅读量信息

分析主题代码可知，显示文章组件的文件位于/layout/common/article.ftl，该文件中，包含两种情况的组件渲染：未点开文章时（即在文章列表页面）和阅读文章时，此处针对两种情况分别进行修改。根据Halo官方文档可知，阅读量和评论量参数均在post对象中给出，其变量名分别为visits和commentCount，此处只需简单加上即可。

未点开文章时

找到用于判断当前页面状态的if语句：

<#if index && post.summary?? && post.summary!=''>

并修改其中的代码

        <#if index && post.summary?? && post.summary!=''>
		<style>
			.post-info {
				-webkit-font-smoothing: antialiased;
				text-rendering: optimizeLegibility;
				text-size-adjust: 100%;
				font-family: Ubuntu,Roboto,"Open Sans","Microsoft YaHei",sans-serif;
				text-align: left;
				color: #4a4a4a;
				font-size: .75rem;
				white-space: nowrap;
				margin-left: 10px;
			}
		</style>
        <div class="level is-mobile">
            <div class="level-start">
                <div class="level-item">
					<a class="button is-size-7 is-light" href="${post.fullPath!}#more">让我康康</a>
					<span class="post-info">
					  ${post.visits} 阅读
					</span>
					<span class="post-info">
					  ${post.commentCount} 评论
					</span>
				</div>
            </div>
        </div>
        </#if>

添加阅读、评论量后文章列表的显示效果

点开文章时

找到用于判断当前页面状态的if语句：

<#if index>

注意，此处是判断是否包含index参数，即判断是否为文章列表，因此，代码应在else代码块中修改
修改后的代码如下：

                <#else>
                    <#if categories?? && categories?size gt 0>
                        <div class="level-item">
                            <#list categories as category>
                                <a class="has-link-grey -link" href="${category.fullPath!}">${category.name!}</a>&nbsp;
                            </#list>
                        </div>
						<div class="level-item has-text-grey">
						  ${post.visits!} 阅读
						</div>
						<div class="level-item has-text-grey">
						  ${post.commentCount!} 评论
						</div>
                    </#if>

点开文章后的显示效果

代码增加行号、点击复制功能

找到/layout/common/scripts.ftl，在其中增加如下代码段即可：

<#if is_post?? || is_sheet??>
<script src="//cdn.bootcss.com/highlight.js/9.11.0/highlight.min.js"></script>
<script src="//cdn.bootcss.com/highlightjs-line-numbers.js/1.1.0/highlightjs-line-numbers.min.js"></script>
<script src="/upload/2022/03/highlightjs-copy-button.min-0530aa7bccca423fad82969114b188bd.js"></script>
<script>
  hljs.initHighlightingOnLoad();
  hljs.initLineNumbersOnLoad();
  hljs.initCopyButtonOnLoad();
</script>
</#if>

其中，is_post和is_sheet用于判断当前页面是否为文章页和自定义页面（is_post和is_sheet为官方定义的全局变量），代码段仅在以上两种情况中会用到，可以按需引入。
在引入后，访问含有代码块的页面，会发现显示效果仍然不太好，例如行号与代码过于紧凑、鼠标移至行号处会在右上角弹出第二个copy按钮、HTML代码会导致行号错位，此时，需要在/layout/layout.ftl处插入一段简单的CSS作为polyfill即可：

    <#if is_post?? || is_sheet??>
        <style>
			.hljs-line-numbers {
				pointer-events: none !important;
				margin-right: 0.5em;
			}
            .token.tag{
              height: 1em !important;
            }
        </style>
    </#if>

优化后的代码块效果

文章阅读前添加字数提示信息

此处为锦上添花的功能，实现起来一样较为简单。根据查阅资料，可知大多数情况下，平均阅读速度在400~600字/分钟，根据本博客文章内容复杂度考虑，笔者取速度为500字/分钟，则实际耗时=文章字数/阅读速度。
因此，只需在/layout/common/article.ftl中插入如下代码，即可实现：

		<#if !index>
		<style>
			.read-tips {
			    -webkit-font-smoothing: antialiased;
			    text-rendering: optimizeLegibility;
			    text-size-adjust: 100%;
			    font-weight: 400;
			    line-height: 1.5;
			    font-family: Ubuntu,Roboto,"Open Sans","Microsoft YaHei",sans-serif;
			    color: #4a4a4a;
			    font-size: 1rem;
				box-sizing: inherit;
			    margin: 0;
			    background-color: rgb(236, 245, 255);
			    border-left: 5px solid rgb(217, 236, 255);
			    padding: 1.25em 1.5em;
			    margin-bottom: 1em;
			}
		</style>
		<div class="read-tips">
			<b style="color: #409EFF; font-size: 1.1rem;">阅读提示</b>
			<p style="color: #4a4a4a;">本文共${post.wordCount}字，阅读大约需${(post.wordCount/500)?int}分钟。</p>
		</div>
		</#if>

注：此处配色参照element-ui
阅读提示在文章阅读过程中的效果

文本过长显示问题修复

文本过长的问题在该主题中多处都有体现，例如友链处的链接溢出；最新文章、最新评论过长影响显示效果；文章末尾上下篇文章导航处，笔者针对上述三个场景进行了细节优化。
虽然分为3个场景，解决方法却基本一致——即减少显示长度呗（）

友链处链接溢出解决

使用最简单粗暴的方式（把溢出的链接部分移除）即可，打开/layout/common/widget.ftl，替换友链组件代码：

<#if settings.sidebar_links!true>
            <@linkTag method="list">
            <#if links?? && links?size gt 0>
                <div class="card widget">
                    <div class="card-content">
                        <div class="menu">
                        <h3 class="menu-label">
                            友情链接
                        </h3>
                        <ul class="menu-list">
                            <#list links as link>
                                <li>
                                    <a class="level is-mobile" href="${link.url!}" target="_blank">
                                        <span class="level-left">
                                            <span class="level-item">${link.name}</span>
                                        </span>
                                    </a>
                                </li>
                            </#list>
                        </ul>
                        </div>
                    </div>
                </div>
            </#if>
        </@linkTag>
      </#if>

友链显示溢出修复

最新文章、最新评论显示过多行

只需限制显示行数即可，同样十分简单，打开/layout/layout.ftl，添加以下样式：

.show-two-lines {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

接着，在相应的组件中添加该class名称即可：
/layout/widget/recent_comments.ftl

<div class="card widget">
    <div class="card-content">
        <h3 class="menu-label">
            最新评论
        </h3>
        <@commentTag method="latest" top="5">
            <#if comments?? && comments.getTotalElements() gt 0>
                 <#list comments.content as comment>
                    <article class="media">
                        <div class="media-content">
                            <div class="content">
                                <div><time class="has-text-grey is-size-7 is-uppercase" datetime="${comment.createTime!}">${comment.createTime?string('yyyy-MM-dd')}</time></div>
                                ${comment.author!} : <a href="${comment.post.fullPath!}#comment-wrapper" class="title has-link-black-ter is-size-6 has-text-weight-normal show-two-lines">${comment.content!}</a>
                            </div>
                        </div>
                    </article>
                </#list>
            </#if>
        </@commentTag>
    </div>
</div>

/layout/widget/recent_posts.ftl

<div class="card widget">
    <div class="card-content">
        <h3 class="menu-label">
            最新文章
        </h3>
        <@postTag method="latest" top="5">
            <#list posts as post>
                <article class="media">
                    <#if post.thumbnail?? && post.thumbnail!=''>
                        <a href="${post.fullPath!}" class="media-left">
                            <p class="image is-64x64">
                                <img class="thumbnail" src="${post.thumbnail!}" alt="${post.title!}">
                            </p>
                        </a>
                    </#if>
                    <div class="media-content">
                        <div class="content">
                            <div><time class="has-text-grey is-size-7 is-uppercase" datetime="${post.createTime!}">${post.createTime?string('yyyy-MM-dd')}</time></div>
                            <a href="${post.fullPath!}" class="title has-link-black-ter is-size-6 has-text-weight-normal show-two-lines">${post.title!}</a>
                        </div>
                    </div>
                </article>
            </#list>
        </@postTag>
    </div>
</div>

多行标题时显示效果

文章导航（前一篇、后一篇）显示溢出修复

在/layout/common/article.ftl文件中，找到并替换以下代码：

<#if !index && (nextPost?? || prevPost??)>
    <style>
      .post-title {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        min-width: 0;
        max-width: 80vw;
      }
      .post-nav-card {
        margin-top: 20px;
      }
    </style>
    <div class="card card-transparent post-nav-card">
        <div class="level post-navigation is-flex-wrap is-mobile">
            <#if prevPost??>
            <div class="level-start">
                <a class="level level-item has-link-grey article-nav-prev" href="${prevPost.fullPath!}">
                    <i class="level-item fas fa-chevron-left"></i>
                    <div class="level-item">
                      <div class="post-title">${prevPost.title!}</div>
                    </div>
                </a>
            </div>
            </#if>
            <#if nextPost??>
            <div class="level-end">
                <a class="level level-item has-link-grey article-nav-next" href="${nextPost.fullPath!}">
                    <div class="level-item post-title">
                      <div class="post-title">${nextPost.title!}</div>
                    </div>
                    <i class="level-item fas fa-chevron-right"></i>
                </a>
            </div>
            </#if>
        </div>
    </div>
</#if>

值得注意的是，若直接对<a>标签下级的<div>进行修改，由于flex显示特性，修改后将无法显示省略号，而是被直接截断。因此，需要在内部嵌套一层<div>。
优化后的文章导航效果

使导航栏支持二级导航

导航栏若不支持二级导航，将会是一件较为头疼的事。很幸运的是，这被笔者所碰上了。那没办法，只能硬着头皮解决它。打开/layout/common/navbar.ftl，找到头部导航，替换如下代码：

            <@menuTag method="tree">
                <#if menus?? && menus?size gt 0>
                    <style>
                    /* sub-navbar */
.navbar-start li:hover .sub-menu,.sub-menu:hover{opacity:1;visibility:visible}@media screen and (max-width:1024px){.sub-menu{margin-top:4.25rem !important}}.sub-menu{line-height:1.5;font-size:.8rem;text-rendering:optimizeLegibility;font-family:"Source Serif Pro","Noto Serif SC",-apple-system,"SF UI Text","PingFang SC","Microsoft YaHei","WenQuanYi Micro Hei",sans-serif;font-weight:400;color:#5755d9;box-sizing:inherit;overflow-wrap:break-word;margin:0;border-radius:.1rem;list-style:none;transition:all .35s;position:absolute;z-index:1000;top:3.5rem;opacity:0;visibility:hidden;min-width:10rem;padding:.5rem 1rem;box-shadow:0 .067em 1.2em rgba(0,0,0,.14);background-color:#fff}.navbar-subitem{overflow-wrap:break-word;color:#4a4a4a;position:relative;flex-grow:0;flex-shrink:0;cursor:pointer;display:flex;align-items:center;text-align:center;padding:0.5rem 0.5rem}.navbar-subitem:hover{color:#3273dc;background-color:#fafafa}
                    </style>
                    <ul class="navbar-start">
                        <#list menus?sort_by('priority') as menu>
                        <li>
                            <a class="navbar-item" href="${menu.url}" target="${menu.target!}">${menu.name}</a>
                            <#if menu.children?? && menu.children?size gt 0>
                			<ul class="sub-menu">
                    			<#list menu.children?sort_by('priority') as child>
                				<li>
                					<a href="${child.url!}" target="${child.target!}" class="navbar-subitem">${child.name}</a>
                				</li>
                    			</#list>
                			</ul>
                  			</#if>
                        </li>
                        </#list>
                    </ul>
                </#if>
            </@menuTag>

此处由于css过长，已将其压缩为一行。值得注意的是，在窄屏情况下，导航栏会出现下移的情况，需要对其专门适配。
支持二级导航后的效果

其他一些琐碎的显示优化

隐藏关注按钮

在/layout/widget/prifile.ftl文件中，找到如下代码，将其注释即可：

<div class="level">
       <a class="level-item button is-link is-rounded" href="${settings.profile_follow_url!'${blog_url!}'}" target="_blank">关注我</a>
</div>

修改阅读文章文案

在/layout/common/article.ftl中修改相应显示更多按钮的文案即可。

友链部分增加提示卡片

在/links.ftl中，替换代码：

<#include "layout/layout.ftl">
<#include "layout/common/article.ftl">
<@layout title="链接 - ${blog_title!}" canonical="${links_url!}">
    <#include "layout/widget/links.ftl">
    <style>
      .tips_card{
        margin-top: 15px;
      }
      .card-content>.menu{
        -webkit-font-smoothing: antialiased;
        text-rendering: optimizeLegibility;
        text-size-adjust: 100%;
        line-height: 1.5;
        font-family: Ubuntu,Roboto,"Open Sans","Microsoft YaHei",sans-serif;
        box-sizing: inherit;
        margin: 0;
        padding: 0;
        font-weight: 400;
        color: #7a7a7a;
        font-size: .75em;
        letter-spacing: .1em;
        margin-bottom: 1em;
      }
      .card-content>.link_add_help{
		-webkit-font-smoothing: antialiased;
		text-rendering: optimizeLegibility;
		text-size-adjust: 100%;
		font-family: Ubuntu,Roboto,"Open Sans","Microsoft YaHei",sans-serif;
		font-size: .75em;
		letter-spacing: .1em;
		list-style: none;
		line-height: 1.25;
		color: #4a4a4a;
		box-sizing: inherit;
		font-style: inherit;
		font-weight: inherit;
		align-items: center;
		display: flex;
		flex-basis: auto;
		flex-shrink: 0;
		justify-content: center;
		flex-grow: 1;
		padding: 10px;
      }
    </style>
    <div class="card widget tips_card">
      <div class="card-content">
        <div class="menu">
          添加友链
        </div>
        <div class="link_add_help">
          欢迎发邮件或以其他一切联系方式联系我添加友链，注意联系时提供站点名称和站点地址哦~
        </div>
      </div>
    </div>
</@layout>

页脚隐藏logo、添加备案信息等

在/layout/common/footer.ftl中，替换如下代码即可：

<footer class="footer">
    <div class="container">
        <div class="level">
            <div class="level-start has-text-centered-mobile">
                <!--
                <a class="footer-logo is-block has-mb-6" href="${blog_url!}">
                    <#if blog_logo?? && blog_logo!=''>
                        <img src="${blog_logo!}" alt="${blog_title!}" height="28">
                    <#else>
                        ${blog_title!}
                    </#if>
                </a>
                -->
                <p class="is-size-7">
                    &copy; ${.now?string('yyyy')} ${user.nickname!}&nbsp;
                    Powered by <a href="https://halo.run/" target="_blank">Halo</a>
                    <br />
                    Theme made by <a
                            href="https://github.com/halo-dev/halo-theme-icarus" target="_blank">Icarus</a>, customized by <a href="https://vvbbnn00.cn/" target="_blank">vvbbnn00</a>
                    <br />
                    <a target="_blank" rel="noopener" href="http://beian.miit.gov.cn/">沪ICP备2021021821号-1</a>&nbsp;&nbsp;
                    <a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=31011202013723" style="display:inline-block;text-decoration:none;height:20px;line-height:20px;">
            		 	沪公网安备 31011202013723号
    		 		</a>
                    <br />
                    <a href="https://icp.gov.moe/?keyword=20229961" target="_blank">萌ICP备20229961号</a>
                    <br />
                    <@global.footer />
                </p>
            </div>
            <div class="level-end">
                <div class="field has-addons is-flex-center-mobile has-mt-5-mobile is-flex-wrap is-flex-middle">
                    ${settings.links_footer!}
                </div>
            </div>
        </div>
    </div>
</footer>

注：请尊重原主题作者的劳动成果，保留作者信息哦~

网站访问速度优化

根据笔者分析后，发现加载速度过慢的部分为从jsdelivr引入的js文件，针对该问题，可以更换CDN源或自建CDN。
此处笔者使用了一下钞能力，简单建立了一个jsdelivr的镜像CDN加速站点。作者使用的是腾讯云CDN，相应配置截图如下：
CDN配置1
CDN配置2
值得注意的是，在回源设置时，务必将端口号指定为443，而非80，因为80端口会重定向，这便失去了建立CDN的意义。
同时，为了防止被白嫖（主要是钞能力不够强大），笔者也设置了防盗链：
防盗链设置
通过上图设置，可以限制只有自己的站点能访问该CDN。

最后，在配置完毕CDN节点后，别忘了将主题文件中，引用jsdelivr的js文件替换为自建的CDN节点哦~

尾声

至此，博客优化告一段落。当然，仍然存在不少可以改进的地方：例如文章阅读时的目录导航等。但奈何笔者技术力不足（悲），当然也有懒得成分，这些想法被推迟到了后续优化。也欢迎有同样想法的小伙伴一同交流~
PS:这次选了一个比较生草的封面

参考资料

# HTML  JavaScript  优化  美化  博客 
USTC Hackergame 2022 部分Writeup
一种通过魔改Python中http库源代码的方式使得flask在端口穿透时支持Proxy Protocol

评论

分类

标签云

IOT BLOCKCHAIN Writeup REVERSE CRYPTO rwctf PWN PHP XSS MISC WEB CTF 博客 美化 优化 JavaScript frpc 端口穿透 Proxy Protocol Flask Python 工具 作业 VB.NET Anki HTML 番剧 小爱老师 作文 春考 听力 高考 wordpress补档

友情链接

最新文章

最新评论

不做评论 : Python3

标签

IOT 2
BLOCKCHAIN 2
Writeup 3
REVERSE 5
CRYPTO 4
rwctf 1
PWN 2
PHP 1
XSS 1
MISC 7
WEB 8
CTF 8
博客 1
美化 1
优化 1
JavaScript 1
frpc 1
端口穿透 1
Proxy Protocol 1
Flask 2
Python 2
工具 1
作业 1
VB.NET 1
Anki 1
HTML 3
番剧 1
小爱老师 1
作文 1
春考 1
听力 1
高考 2
wordpress补档 4

最新文章

最新评论

不做评论 : Python3

标签

IOT 2
BLOCKCHAIN 2
Writeup 3
REVERSE 5
CRYPTO 4
rwctf 1
PWN 2
PHP 1
XSS 1
MISC 7
WEB 8
CTF 8
博客 1
美化 1
优化 1
JavaScript 1
frpc 1
端口穿透 1
Proxy Protocol 1
Flask 2
Python 2
工具 1
作业 1
VB.NET 1
Anki 1
HTML 3
番剧 1
小爱老师 1
作文 1
春考 1
听力 1
高考 2
wordpress补档 4
Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×

最新文章
HSCSEC CTF 2th 2023 部分Writeup

好难，只能水一些简单的题了（
HGame 2023 Week4 部分Writeup

第四周的比赛难度较高，同时也出现了不少颇为有趣的题目。可惜笔者比较菜，做出来的题目数量并不是很多，不过里面确实有几道题值得好好讲讲。不多废话了，抓紧端上来吧（喜）。 注：本周CRYPTO类的赛题ECRSA在数学大佬的帮助下解出；本周REVERSE类赛题vm由大佬Latihas提供思路指导，在这里表达感谢！
HGame 2023 Week3 部分Writeup

本周在迎新春，走亲戚（真的很忙），外加题目难度增加，笔者比较菜，因此只解出了寥寥几题，不过姑且也算是一些成就，故作此题解，希望能够对各位读者有些帮助。
HGame 2023 Week2 部分Writeup

第二周的解题过程中，遇到的不少有意思的题目，同时，也学习到了不少的知识，故书写此题解，作为记录。 Week2 比赛地址：https://hgame.vidar.club/contest/3
HGame 2023 Week1 部分Writeup

第一周的大部分题目难度较低，不过也存在一部分难题，解这些题目的过程也是一个很好的学习机会（虽然最后还是没解出来）下面是我的题解。
分类
学习专区 study
经验分享 exp
折腾专区 other
CTF ctf
标签
IOT iot
BLOCKCHAIN blockchain
Writeup writeup
REVERSE reverse
CRYPTO crypto
rwctf rwctf
PWN pwn
PHP php
XSS xss
MISC misc
WEB web
CTF ctf
博客 博客
美化 美化
优化 优化
JavaScript javascript
frpc frpc
端口穿透 端口穿透
Proxy Protocol proxyprotocol
Flask flask
Python python
工具 工具
作业 作业
VB.NET vbnet
Anki anki
HTML html
番剧 番剧
小爱老师 小爱老师
作文 作文
春考 春考
听力 听力
高考 高考
wordpress补档 wordpress补档