首页第一屏
更改/.halo2/themes/theme-hao/templates/modules/header/index-img.html内文件达到效果
源文件
<th:block th:if="${theme.config.top.above.enable_above}">
<div class="pl-container">
<th:block th:if="!${theme.config.top.above.enable_above_video}">
<div class="pl-img pl-blur pl-visible"></div>
<div class="pl-img pl-visible"></div>
<video class="video"></video>
</th:block>
<th:block th:if="${theme.config.top.above.enable_above_video}">
<video class="index-video" id="index-video" autoplay=""
th:src="${theme.config.top.above.index_video}" loop="" muted="" playsinline=""
webkit-playsinline=""
style="display:block;object-fit:cover;width:100%;height:100%;pointer-events:none;">
</video>
</th:block>
</div>
<div id="site-info">
<h1 id="site-title">[[${site.title}]]</h1>
<div id="site-subtitle">
<span id="subtitle"></span>
<span class="typed-cursor" aria-hidden="true"></span>
</div>
</div>
<div id="scroll-down"><i class="haofont hao-icon-angle-down scroll-down-effects"></i></div>
<link rel="stylesheet" th:href="${assets_link + '/css/fullPage.css' + theme_version}">
<style>
#site-title {
width: max-content;
max-width: 100%;
position: relative;
color: rgba(255, 255, 255, 0);
animation: 1.5s linear 1s 1 normal both running show;
margin: 0px auto !important;
}
#site-title::after {
content: "";
position: absolute;
left: 0px;
margin: auto;
border-radius: 12px;
top: 11px;
height: 55px;
width: 110%;
animation: 2s cubic-bezier(0.62, 0.21, 0.25, 1) 1.5s 1 normal both running color_change, 2s cubic-bezier(0.62, 0.21, 0.25, 1) 1.5s 1 normal both running swipe_box;
}
@media screen and (max-width: 768px) {
#site-title::after {
background: rgb(255, 255, 255) !important;
}
}
@media screen and (max-width: 768px) {
#site-subtitle::after {
background: rgb(255, 255, 255) !important;
}
}
#site-subtitle {
width: 100%;
max-width: 100%;
position: relative;
animation: 1.5s linear 1s 1 normal both running show;
margin: 0px auto !important;
}
#site-subtitle::after {
content: "";
position: absolute;
left: 0px;
right: 0px;
margin: auto;
border-radius: 12px;
height: 100%;
width: 0%;
animation: 2s cubic-bezier(0.62, 0.21, 0.25, 1) 1.5s 1 normal both running color_change, 2s cubic-bezier(0.62, 0.21, 0.25, 1) 1.5s 1 normal both running swipe_box2;
}
@keyframes color_change {
0% {
background: rgb(255, 255, 255);
}
100% {
background: var(--xlfd-main);
}
}
@-webkit-keyframes color_change {
0% {
background: rgb(255, 255, 255);
}
100% {
background: var(--xlfd-main);
}
}
@-webkit-keyframes swipe_box {
0% {
left: 0px;
width: 0%;
}
50% {
left: 0px;
width: 100%;
}
100% {
left: 100%;
width: 0%;
}
}
@keyframes swipe_box {
0% {
left: 0px;
width: 0%;
}
50% {
left: 0px;
width: 100%;
}
100% {
left: 100%;
width: 0%;
}
}
@-webkit-keyframes swipe_box2 {
0% {
left: 0px;
width: 0%;
}
50% {
left: 0px;
width: 80%;
}
100% {
left: 0px;
width: 0%;
}
}
@keyframes swipe_box2 {
0% {
left: 0px;
width: 0%;
}
50% {
left: 0px;
width: 80%;
}
100% {
left: 0px;
width: 0%;
}
}
@-webkit-keyframes show {
0% {
color: rgba(255, 255, 255, 0);
text-shadow: transparent 2px 3px 10px;
}
81% {
color: rgba(255, 255, 255, 0);
}
100% {
color: rgb(255, 255, 255);
}
}
@keyframes show {
0% {
color: rgba(255, 255, 255, 0);
text-shadow: transparent 2px 3px 10px;
}
81% {
color: rgba(255, 255, 255, 0);
}
100% {
color: rgb(255, 255, 255);
}
}
.pl-img {
background-image: url([[${theme.config.top.above.index_img}]]);
}
@media screen and (max-width: 768px) {
.pl-img {
background-image: url([[${theme.config.top.above.phone_index_img}]]);
}
}
.typed-cursor {
opacity: 1;
}
.typed-cursor.typed-cursor--blink {
animation: typedjsBlink 0.7s infinite;
-webkit-animation: typedjsBlink 0.7s infinite;
animation: typedjsBlink 0.7s infinite;
}
@keyframes typedjsBlink {
50% {
opacity: 0.0;
}
}
@-webkit-keyframes typedjsBlink {
0% {
opacity: 1;
}
50% {
opacity: 0.0;
}
100% {
opacity: 1;
}
}
</style>
<script th:inline="javascript">
function subtitleType() {
if([[${theme.config.top.above.enable_typed_random}]]){
fetch("https://v1.hitokoto.cn/?c=a").then((t => t.json())).then((t => {
{
const e = "出自 " + t.from;
const n = [[${theme.config.top.above.typed}]].map((item) => {
return item.realNode.text;
});
n.push(t.hitokoto, e), window.typed = new Typed("#subtitle", {
strings: n,
startDelay: 300,
typeSpeed: 100,
loop: !0,
backSpeed: 50
})
}
}))
}else{
const n = [[${theme.config.top.above.typed}]].map((item) => {
return item.realNode.text;
});
window.typed = new Typed("#subtitle", {
strings: n,
startDelay: 300,
typeSpeed: 100,
loop: !0,
backSpeed: 50
})
}
}
// 防止加载文字太短时第一个自定义文字显示不出来
setTimeout(()=>{
"function" == typeof Typed ? subtitleType() : getScript("https://npm.elemecdn.com/typed.js@2.0.12/lib/typed.min.js").then(subtitleType)
},1800)
</script>
</th:block>
侧栏（移动端）
对于源码文件.halo2\themes\theme-hao\templates\modules\sidebar.html中 增加
<span class="sidebar-menu-item-title">导航</span>
<div class="sidebar-menu-item">
<a class="new-button" href="/liu-yan-ban" rel="external nofollow">
<i class="fa fa-link" style="font-size: 0.9rem;"></i>
<span>留言板</span>
</a>
</div>
<div class="sidebar-menu-item">
<a class="new-button" href="./yin-le" rel="external nofollow">
<i class="fa fa-link" style="font-size: 0.9rem;"></i>
<span>音乐</span>
</a>
</div>
<div class="sidebar-menu-item">
<a class="new-button" href="./bangumis" rel="external nofollow">
<i class="fa fa-link" style="font-size: 0.9rem;"></i>
<span>追番</span>
</a>
</div>
<div class="sidebar-menu-item">
<a class="new-button" href="./about" rel="external nofollow">
<i class="fa fa-link" style="font-size: 0.9rem;"></i>
<span>关于</span>
</a>
</div>
以保证移动端右侧菜单的显示
开发文档相关
为了在页脚显示 开发文档所以修改了
.halo2\themes\theme-hao\templates\modules\footer.html 中的
<a th:if="${theme.config.footer.footerContent.default_enable_group.zhuti}" class="footer-banner-link" href="https://github.com/liuzhihang/halo-theme-hao">主题</a>
大概在170行
然后修改后台设置 在/root/.halo2/themes/theme-hao/settings.yaml
- $formkit: radio
if: $get(default_enable).value
name: zhuti
id: zhuti
key: zhuti
label: 开发文档
options:
- label: 显示
value: true
- label: 隐藏
value: false
这个是改完的把“主题”改成“开发文档”
今日诗词组件
根据[halo-theme-hao 主题魔改教程 | webjing](halo-theme-hao 主题魔改教程 | webjing)开发
API接口文档
（有时候会出现无法显示的问题，有可能是网络问题导致的）
uptimerobot 站点监控
关于页面 的头像单独设置
在/.halo2/themes/theme-hao/templates/about.html中将（30行左右）
<img th:src="@{${#strings.isEmpty(site.logo) ? assets_link + '/images/hao-logo.jpg' : site.logo}}">
</div>
修改为
<img src="./upload/_cgi-bin_mmwebwx-bin_webwxgetmsgimg__&MsgID=8639553387757611052&skey=@crypt_d360fef8_59e0218d169018d3402b3d6dcb036d78&mmweb_appid=wx_webfilehelper.jfif">
</div>
登录页配置
参照：Halo-2.20 新特性：自定义登录页面模版 | webjing
1、加入配置
在你自己所使用的主题的根目录下找到配置文件，一般是 settings.yaml 文件，单独增加一项配置，不从属于其他设置项，注意加入时候的层级是如下代码所示的这个层级，具体位置可以自己调整。
apiVersion: v1alpha1
kind: Setting
metadata:
name: theme-hao-setting
spec:
forms:
- group: loginTmplConfig
label: 登录模版相关配置
formSchema:
所有配置项如下，如果你在使用过程中修改了变量名称，那么在模版对应处你也要修改。
- group: loginPage
label: 登录相关模版
formSchema:
- $formkit: select
name: loginTmpl
id: loginTmpl
key: loginTmpl
label: 登录模版
value: circle_ball
options:
- value: circle_ball
label: 悬浮球
- value: dynamic_bgImg_style
label: 动态背景图模式
- value: static_bgImg_style
label: 静态背景图模式
- $formkit: group
name: circle_ball_style
label: 悬浮球模版样式
help: 仅在悬浮球模版下显示
value:
circleBigColor1: "#ffb566"
circleBigColor2: "#f67"
circleSmallColor1: "#de82ca"
circleSmallColor2: "#259fac"
bgColor1: "#a7cee0"
bgColor2: "#d0dea7"
children:
- $formkit: color
name: circleBigColor1
label: 大号悬浮球第一种渐变色
value: "#ffb566"
- $formkit: color
name: circleBigColor2
label: 大号悬浮球第二种渐变色
value: "#f67"
- $formkit: color
name: circleSmallColor1
label: 小号悬浮球第一种渐变色
value: "#de82ca"
- $formkit: color
name: circleSmallColor2
label: 小号悬浮球第二种渐变色
value: "#259fac"
- $formkit: color
name: bgColor1
label: 渐变背景色1
value: "#a7cee0"
- $formkit: color
name: bgColor2
label: 渐变背景色2
value: "#d0dea7"
- $formkit: group
name: bgSettings
label: 背景图模版相关设置
help: 仅在背景图模式下显示
value:
bgStaticImg:
dynamicBgImg: []
children:
- $formkit: attachment
name: bgStaticImg
label: 登录页面背景图
help: 仅在静态背景图模式下显示
value:
- $formkit: repeater
name: dynamicBgImg
key: dynamicBgImg
id: dynamicBgImg
label: 动态背景图
help: 可以自定义时间显示制定的背景图,请保证每个时间短都有相应的图片,否则将会默认第一张图片
value: []
max: 12
min: 1
children:
- $formkit: text
name: start_time
validation: required
label: 开始时间
help: 请严格按照24小时时间制填写时和分，例如开始时间为15:00或者7:00，否则不会生效
- $formkit: text
validation: required
name: end_time
label: 结束时间
- $formkit: attachment
name: specialBgImg
label: 显示的背景图
validation: required
help: 请按照24小时时间制填写时和分，例如结束时间为17:00或者9:00,否则不会生效
value:
在动态背景图的设置中，由于表单提供的 Date 组件时间格式是 YYYY-MM-DD 的，我无法找到一个只支持选择时分的组件，所以替换成了文本输入组件，如果有小伙伴知道 yaml 表单定义中有这样的组件，麻烦在评论区留言。
注意：开始时间和结束时间的格式是 24 小时制，中间的冒号是半角状态下输入的，必须严格按照这种格式输入，否则会导致页面无法生效。例如 9:00 ，10:20，13:10
2、在 template 目录下新增 login.html 模版
<!doctype html>
<html
xmlns:th="https://www.thymeleaf.org"
th:replace="~{gateway_fragments/layout :: layout(title = |#{title} - ${site.title}|, head = null, title = ${site.title + ' | 登录'}, body = ~{::body})}"
>
<body>
<div id="circle-org"></div>
<div id="circle-blue"></div>
<th:block th:fragment="body">
<div class="gateway-wrapper">
<!-- 可以自定义自己的logo 无需专业版支持 -->
<div th:replace="~{gateway_fragments/common::haloLogo}"></div>
<div class="halo-form-wrapper">
<div th:replace="~{gateway_fragments/login::form}"></div>
<div th:replace="~{gateway_fragments/login::formAuthProviders}"></div>
<div th:replace="~{gateway_fragments/common::socialAuthProviders}"></div>
</div>
<div th:replace="~{gateway_fragments/common::signupNoticeContent}"></div>
<div th:replace="~{gateway_fragments/common::returnToSiteContent}"></div>
<div th:replace="~{gateway_fragments/common::languageSwitcher}"></div>
</div>
</th:block>
<th:block th:if="${#strings.equals(theme.config.loginPage.loginTmpl, 'circle_ball')}">
<style>
.gateway-wrapper{
--color-primary: #4ccba0;
--color-secondary: #0e1731;
--color-link: #1f75cb;
--color-text: #374151;
--color-border: #dfe6ec;
--font-size-base: 15px;
width: 100%;
margin-top: 70px;
position: sticky;
}
.gateway-wrapper .halo-form-wrapper{
background-color: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
border: 1px solid rgba(255, 255, 255, 0.18);
box-shadow: rgba(142, 142, 142, 0.19) 0px 6px 15px 0px;
-webkit-box-shadow: rgba(142, 142, 142, 0.19) 0px 6px 15px 0px;
border-radius: 10px;
-webkit-border-radius: 10px;
color: rgba(255, 255, 255, 0.3);
}
.gateway-wrapper .form-item .form-input{
background-color: rgba(255, 255, 255, 0.3);
border-radius: 10px;
}
#remember-me{
background-color: rgba(255, 255, 255, 0.3);
}
.halo-form button[type="submit"] {
background-color: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(2.5px);
-webkit-backdrop-filter: blur(2.5px);
border: 1px solid rgba(255, 255, 255, 0.18);
box-shadow: rgba(142, 142, 142, 0.19) 0px 6px 15px 0px;
-webkit-box-shadow: rgba(142, 142, 142, 0.19) 0px 6px 15px 0px;
border-radius: 9px;
-webkit-border-radius: 9px;
color: rgba(255, 255, 255, 0.3);
color: var(--color-text);
}
body{
position: relative;
padding: 0;
margin: 0;
background-image: linear-gradient(135deg, [[${theme.config.loginPage.circle_ball_style.bgColor1}]] 50%, [[${theme.config.loginPage.circle_ball_style.bgColor2}]]);
}
/* 动态圆球特效 */
#circle-org {
position: absolute;
width: 300px;
height: 300px;
border-radius: 50%;
top: 2%;
left: 27.5%;
background: linear-gradient(135deg, [[${theme.config.loginPage.circle_ball_style.circleBigColor1}]], [[${theme.config.loginPage.circle_ball_style.circleBigColor2}]]);
animation: bounce-down 5s linear infinite;
}
#circle-blue {
position: absolute;
width: 180px;
height: 180px;
border-radius: 50%;
top: 39%;
left: 56%;
background: linear-gradient(135deg, [[${theme.config.loginPage.circle_ball_style.circleSmallColor1}]], [[${theme.config.loginPage.circle_ball_style.circleSmallColor2}]]);
animation: bounce-down 8s linear infinite;
z-index: -2;
}
@keyframes bounce-down{
25% {
-webkit-transform: translateY(-20px);
}
100%, 50% {
-webkit-transform: translateY(0);
}
75% {
-webkit-transform: translateY(20px);
}
}
@media screen and (max-width: 500px) {
.gateway-wrapper{
margin: 0 auto;
position: inherit;
top: 10%;
right: 0;
}
#circle-org {
position: absolute;
width: 200px;
height: 200px;
top: 15%;
left: 2%;
}
#circle-blue {
position: absolute;
width: 150px;
height: 150px;
border-radius: 50%;
top: 44%;
right: 2%;
background: linear-gradient(135deg, #de82ca, #259fac);
animation: bounce-down 8s linear infinite;
z-index: -2;
}
}
</style>
</th:block>
<!-- 背景图模式 -->
<th:block th:if="${#strings.equals(theme.config.loginPage.loginTmpl, 'static_bgImg_style') || #strings.equals(theme.config.loginPage.loginTmpl, 'dynamic_bgImg_style')}">
<style>
body{
position: relative;
padding: 0;
margin: 0;
background-attachment: fixed;
}
.gateway-wrapper{
--color-primary: #4ccba0;
--color-secondary: #0e1731;
--color-link: #1f75cb;
--color-text: #374151;
--color-border: #d1d5db;
--font-size-base: 15px;
width: 100%;
position: absolute;
top: 12%;
right: 7%;
/* 整个登录组件的毛玻璃 */
/* background-color: rgba(255, 255, 255, 0.25);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
border: 1px solid rgba(255, 255, 255, 0.18);
box-shadow: rgba(142, 142, 142, 0.19) 0px 6px 15px 0px;
-webkit-box-shadow: rgba(142, 142, 142, 0.19) 0px 6px 15px 0px;
border-radius: 12px;
-webkit-border-radius: 12px;
color: rgba(255, 255, 255, 0.75);*/
}
.gateway-wrapper .halo-form-wrapper{
background-color: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
border: 1px solid rgba(255, 255, 255, 0.18);
box-shadow: rgba(142, 142, 142, 0.19) 0px 6px 15px 0px;
-webkit-box-shadow: rgba(142, 142, 142, 0.19) 0px 6px 15px 0px;
border-radius: 10px;
-webkit-border-radius: 10px;
color: rgba(255, 255, 255, 0.3);
}
.gateway-wrapper .form-item .form-input{
background-color: rgba(255, 255, 255, 0.3);
border-radius: 10px;
}
#remember-me{
background-color: rgba(255, 255, 255, 0.3);
}
.halo-form button[type="submit"] {
background-color: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(2.5px);
-webkit-backdrop-filter: blur(2.5px);
border: 1px solid rgba(255, 255, 255, 0.18);
box-shadow: rgba(142, 142, 142, 0.19) 0px 6px 15px 0px;
-webkit-box-shadow: rgba(142, 142, 142, 0.19) 0px 6px 15px 0px;
border-radius: 9px;
-webkit-border-radius: 9px;
color: rgba(255, 255, 255, 0.3);
color: var(--color-text);
}
@media screen and (max-width: 500px) {
.gateway-wrapper{
margin: 0 auto;
position: inherit;
top: 10%;
right: 0;
}
}
</style>
<script type="text/javascript" th:inline="javascript">
let bgMode = [[${theme.config.loginPage.loginTmpl}]]
function renderBgImg() {
if(bgMode == "static_bgImg_style"){
let imgUrl = [[${theme.config.loginPage.bgSettings.bgStaticImg}]]
document.body.style.backgroundImage = "url(" + imgUrl + ")";
}else if(bgMode == "dynamic_bgImg_style"){
//动态背景图
const dynamicBgImgList = [[${theme.config.loginPage.dynamicBgImg}]];
const nowDate = new Date();
const nowHours = nowDate.getHours();
const nowMinutes = nowDate.getMinutes();
const pathImg = patchDynamicBgImg(nowHours, nowMinutes);
document.body.style.backgroundImage = "url(" + pathImg + ")";
}
document.body.style.backgroundSize = 'cover';
document.body.style.backgroundPosition = 'center';
}
// 匹配动态图片
function patchDynamicBgImg(curHours, curMinutes) {
const dynamicBgImgList = [[${theme.config.loginPage.bgSettings.dynamicBgImg}]];
if(dynamicBgImgList && !dynamicBgImgList.length) return;
const patchRes = dynamicBgImgList.filter(item => {
let startTime = item.realNode.start_time.split(":");
let endTime = item.realNode.end_time.split(":");
const startMilliSecond = getMilliSecond(startTime[0], startTime[1]);
const endMilliSecond = getMilliSecond(endTime[0], endTime[1]);
const currentMilliSecond = Date.now();
if(currentMilliSecond >= startMilliSecond && currentMilliSecond <= endMilliSecond){
return item;
}
});
return patchRes.length ? patchRes[0].realNode.specialBgImg : dynamicBgImgList[0].realNode.specialBgImg;
}
// 获取时间间隔
function getMilliSecond(hour, minute){
if(!hour || !minute){
return;
}
const referTime = new Date();
const targetTime = new Date(referTime.getFullYear(), referTime.getMonth(), referTime.getDate(), hour, minute);
return targetTime.getTime();
}
document.addEventListener('DOMContentLoaded', ()=>{
renderBgImg();
});
</script>
</th:block>
</body>
</html>
这部分代码里边的样式可以根据自己的喜好进行修改，我主要说一下自定义样式的一些注意点。
1、自定义的 css 变量必须要在 .gateway-wrapper 这个类名下，例如：
.gateway-wrapper{
--color-primary: #4ccba0;
--color-secondary: #0e1731;
--color-link: #1f75cb;
--color-text: #374151;
--color-border: #dfe6ec;
--font-size-base: 15px;
width: 100%;
margin-top: 70px;
position: sticky;
}
6、登录 logo 可以自己修改如下dom元素。由于我使用的是专业版，所以我在此教程上没有修改，使用了默认的logo 模版片段
<div th:replace="~{gateway_fragments/common::haloLogo}"></div>
侧键全屏
更改/root/.halo2/themes/theme-hao/templates/modules/widgets/rightside.html内容
第9行新增按钮，第41行实现功能
<th:block >
<div id="rightside">
<div id="rightside-config-hide">
<button th:if="${htmlType == 'post' && theme.config.tool.rightside.readmode}" id="readmode" type="button" title="阅读模式"><i class="haofont hao-icon-book-open"></i></button>
<button th:if="${theme.config.style.translate.translateEnable}" id="translateLink" type="button" title="简繁转换">繁</button>
<button id="darkmode" type="button" title="浅色和深色模式转换"><i class="haofont hao-icon-circle-half-stroke"></i></button>
<button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="haofont hao-icon-arrows-left-right"></i></button>
<button id="fullscreenButton">
<svg t="1739978103839" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8848" width="30" height="30"><path d="M358.4 768H426.666667v85.333333H213.333333v-213.333333h85.333334v68.266667l128-128 59.733333 59.733333-128 128z m345.6 0l-128-128 59.733333-59.733333 132.266667 132.266666V640h85.333333v213.333333h-213.333333v-85.333333h64zM358.4 298.666667l128 128-59.733333 59.733333-128-128V426.666667H213.333333V213.333333h213.333334v85.333334H358.4z m345.6 0H640V213.333333h213.333333v213.333334h-85.333333V354.133333l-132.266667 132.266667-59.733333-59.733333 128-128z" fill="#ffffff" p-id="8849"></path></svg>
</button>
</div>
<div id="rightside-config-show">
<button id="rightside-config" type="button" title="设置"><i class="haofont hao-icon-gear"></i></button>
<button th:if="${htmlType == 'post'}" class="close" id="mobile-toc-button" type="button" title="目录"><i class="haofont hao-icon-list-ul"></i></button>
<a id="to_comment" href="#post-comment" title="直达评论" ><i class="haofont hao-icon-chat--fill" style="font-size: 17px;"></i></a>
<a th:if="${theme.config.comments.commentBarrageConfig.commentBarrageEnable}" id="switch-commentBarrage" href="javascript:heo.switchCommentBarrage();" rel="external nofollow noreferrer" title="开关弹幕" draggable="false" data-pjax-state="external"><i class="haofont hao-icon-danmu"></i></a>
<button id="go-up" type="button" title="回到顶部"><i class="haofont hao-icon-arrow-up"></i></button>
<a th:if="${htmlType == 'post' || htmlType == 'page'}"
th:with="editor = ${htmlType == 'post' ? 'posts/editor?name='+ post.metadata.name : htmlType == 'page' ? 'single-pages/editor?name='+ singlePage.metadata.name : '' }"
sec:authorize="isAuthenticated()"
th:href="|/console/${editor}&returnToView=true|"
title="编辑文章" >
<i class="haofont hao-icon-pencil"></i>
</a>
</div>
</div>
<style th:if="${!theme.config.tool.rightside.rightsideEnable}">
#rightside {
display: none;
}
.comment-barrage {
right: 20px;
}
@media screen and (min-width: 1300px) {
#post #pagination {
right: 20px;
}
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function () {
const fullscreenButton = document.getElementById('fullscreenButton');
const fullscreenSvg = `
<svg t="1739978103839" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8848" width="30" height="30"><path d="M358.4 768H426.666667v85.333333H213.333333v-213.333333h85.333334v68.266667l128-128 59.733333 59.733333-128 128z m345.6 0l-128-128 59.733333-59.733333 132.266667 132.266666V640h85.333333v213.333333h-213.333333v-85.333333h64zM358.4 298.666667l128 128-59.733333 59.733333-128-128V426.666667H213.333333V213.333333h213.333334v85.333334H358.4z m345.6 0H640V213.333333h213.333333v213.333334h-85.333333V354.133333l-132.266667 132.266667-59.733333-59.733333 128-128z" fill="#ffffff" p-id="8849"></path></svg>
`;
const exitFullscreenSvg = `
<svg t="1739977979765" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8666" width="32" height="32"><path d="M298.666667 631.466667H226.133333v-81.066667h217.6v204.8h-85.333333v-68.266667l-128 128L170.666667 759.466667l128-128z m422.4 0l128 128-59.733334 59.733333-128-128v68.266667h-85.333333V554.666667h217.6v81.066666h-72.533333zM298.666667 341.333333L187.733333 230.4 243.2 170.666667l115.2 115.2V217.6h85.333333v204.8H226.133333V341.333333H298.666667z m430.933333 0h64v81.066667h-217.6V217.6h85.333333v72.533333L780.8 170.666667l59.733333 59.733333L729.6 341.333333z" fill="#ffffff" p-id="8667"></path></svg>
`;
function isFullscreen() {
return document.fullscreenElement ||
document.webkitFullscreenElement ||
document.mozFullScreenElement ||
document.msFullscreenElement;
}
function toggleFullscreen() {
if (isFullscreen()) {
if (document.exitFullscreen) {
document.exitFullscreen().then(() => {
fullscreenButton.innerHTML = fullscreenSvg;
}).catch((error) => {
console.error('退出全屏失败:', error);
});
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
fullscreenButton.innerHTML = fullscreenSvg;
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
fullscreenButton.innerHTML = fullscreenSvg;
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
fullscreenButton.innerHTML = fullscreenSvg;
}
} else {
const docElm = document.documentElement;
if (docElm.requestFullscreen) {
docElm.requestFullscreen().then(() => {
fullscreenButton.innerHTML = exitFullscreenSvg;
}).catch((error) => {
console.error('进入全屏失败:', error);
});
} else if (docElm.webkitRequestFullscreen) {
docElm.webkitRequestFullscreen();
fullscreenButton.innerHTML = exitFullscreenSvg;
} else if (docElm.mozRequestFullScreen) {
docElm.mozRequestFullScreen();
fullscreenButton.innerHTML = exitFullscreenSvg;
} else if (docElm.msRequestFullscreen) {
docElm.msRequestFullscreen();
fullscreenButton.innerHTML = exitFullscreenSvg;
}
}
}
fullscreenButton.addEventListener('click', toggleFullscreen);
});
</script>
<link th:if="${theme.config.tool.rightside.readmode && theme.config.tool.rightside.rightsideEnable}"
rel="stylesheet" th:href="${assets_link + '/css/read-mode.css' + theme_version}">
</th:block>
更改个人主页相关
更改：/root/.halo2/themes/theme-hao/templates/modules/widgets/about-widgets/game.html
下文件
<!-- 爱好 -->
<div class="author-content" >
<div class="author-content-item game-lol"
th:style="'background: url('+ @{${theme.config.about.game.game_bg}} +') top / cover no-repeat'">
<div class="card-content">
<div class="author-content-item-tips" th:text="${theme.config.about.game.game_tips}">
</div><span class="author-content-item-title"
th:text="${theme.config.about.game.game_title}"></span>
<div class="content-bottom">
<div class="icon-group">
<div class="loading-bar" role="presentation" aria-hidden="true"></div>
</div>
<div class="tips" th:text="${theme.config.about.game.game_uid}"></div>
</div>
</div>
</div>
<div th:if="${#strings.equals(theme.config.about.game2.game2_type, 'img')}" class="author-content-item game-wolf"
th:style="'background: url('+ @{${theme.config.about.game2.game2_bg}} +') top / cover no-repeat'">
<div class="card-content">
<div class="author-content-item-tips" th:text="${theme.config.about.game2.game2_tips}">
</div><span class="author-content-item-title"
th:text="${theme.config.about.game2.game2_title}"></span>
<div class="content-bottom">
<div class="tips" th:text="${theme.config.about.game2.game2_uid}"></div>
</div>
<!-- 新增的按钮 -->
<a href="https://lyceum.fjxzw.top/index.html" class="pill-button">官网</a>
</div>
</div>
<div th:if="${#strings.equals(theme.config.about.game2.game2_type, 'comic')}" class="author-content-item comic-content">
<div class="card-content">
<div class="author-content-item-tips" th:text="${theme.config.about.game2.game2_tips}"></div>
<div class="author-content-item-title" th:text="${theme.config.about.game2.game2_title}"></div>
<div class="comic-box" >
<a th:each="comic : ${theme.config.about.game2.comic_list}"
class="comic-item"
th:href="${comic.url}"
rel="external nofollow noreferrer" target="_blank" th:title="${comic.title}" draggable="false">
<div class="comic-item-cover"><img
th:with="img = @{${comic.bg}}"
th:src="${isLazyload ? loadingImg : img}"
th:data-lazy-src="${ isLazyload ? img : ''}"
th:alt="${comic.title}"
draggable="false" >
</div>
</a>
</div>
</div>
</div>
</div>
<style>
.loading-bar::after {
content: "";
position: absolute;
top: 500px;
left: 0;
filter: drop-shadow(0 -500px 0 #ece5d8);
width: 500px;
height: 62.5px;
background: url([[${theme.config.about.game.loading_bar}]]) no-repeat left 100%;
background-size: 500px 62.5px;
background-position-x: 0;
}
/* 新增的按钮样式 */
.pill-button {
position: absolute;
bottom: 20px;
right: 20px;
background-color: rgba(0, 0, 0, 0.6); /* 调整背景透明度 */
color: white;
padding: 5px 20px;
border-radius: 20px;
text-decoration: none;
display: inline-block;
backdrop-filter: blur(5px); /* 添加磨砂模糊效果 */
-webkit-backdrop-filter: blur(5px); /* 兼容 Safari 浏览器 */
}
.pill-button:hover {
background-color: var(--heo-lighttext);
color: white;
}
.card-content {
position: relative;
}
</style>
</div>
更改页脚备案域名
更改页脚备案域名标签
/root/.halo2/themes/theme-hao/templates/modules/footer.html 下目录
<a class="footer-banner-link" href="https://stats.uptimerobot.com/pZKR55u54B">服务状态</a>
<a th:if="${not #strings.isEmpty(theme.config.basics.icp) && theme.config.footer.footerContent.default_enable_group.icp_icon}"
class="footer-banner-link" href="https://icp.gov.moe/?keyword=20240324"
rel="noopener external nofollow noreferrer noopener"
target="_blank">
<span th:if="${not #strings.startsWith(theme.config.basics.icp, 'http')}">[[${theme.config.basics
.icp}]]</span>
<img th:if="${#strings.startsWith(theme.config.basics.icp, 'http')}"
th:src="@{${theme.config.basics.icp}}" alt="icp"/>
</a>