修改Joe主题设置内容宽度不生效问题
找到配置：主题设置 -> 自定义 ->自定义CSS，加入以下代码，80为内容区宽度，可以随意调整 1-100 ，单位 vw 保持不修改即可;特别说明：该方案可兼容大分辨率屏幕！！！
#Joe .joe_container {
max-width: 80vw;
}
@media (max-width: 1360px) {
#Joe .joe_container{
max-width: initial;
}
}
@media (max-width: 768px) {
#Joe .joe_container{
max-width: initial;
}
}
添加一个大图功能
1.下载文件
2.修改css样式文件并引入
由于需要自行修改大图高度和随机背景图片api配置，所以在big-banner.min.css文件中进行修改如下代码
.evan-big-banner {
position: relative;
width: 100%;
/* PC端：大图的高度修改：任意值，比如 height: 50vh; 丨 height: 100vh; 等 */
height: calc(50vh + 50px);
display: flex;
margin-top: -4rem;
justify-content: center;
align-items: center;
flex-direction: column;
background-color: transparent;
background-position: center;
background-size: cover;
overflow: hidden;
transition: height 1.6s ease-in-out;
/* 背景图片地址修改：支持随机图片api和具体的图片链接 */
background-image:url('https://blog.xccx.cc/api/tp/index.php');
}
@media (max-width: 768px) {
.evan-big-banner {
margin-top: 0;
/* 移动端：大图的高度修改：任意值，比如 height: 50vh; 丨 height: 100vh; 等 */
height: 40vh;
}
.evan-big-banner .infomation .title {
font-size: 1.5rem;
}
.evan-big-banner .infomation .desctitle {
font-size: 0.9rem;
}
.evan-big-banner .evan-big-banner_bottom .waves-svg {
height: 3rem;
}
}
修改完毕后。进行css样式文件的引入：joe主题编辑，在 template/common/header.ftl文件中，加入css链接(大约在14行和15行之间)，示例
......
<#-- ===== 自定义区域 ===== -->
<#if settings.external_css?? >
<!-- 自定义外部CSS -->
<link rel="stylesheet" href="${settings.external_css!}">
</#if>
<!-- 添加大图功能样式的css -->
<link rel="stylesheet" href="名为big-banner.min.css文件链接">
<#if settings.custom_css?? >
<!-- 自定义CSS -->
......
3.引入js文件
在joe主题设置中，找到自定义，在 外部JS链接（head）配置中加入js链接
4.上传 big_banner.ftl 模板文件
上传第一步下载好的 big_banner.ftl模板文件到joe主题的template/common/ 文件夹中;如果你是按照halo1.56官方文章安装的话，上传的目录应该在/home/用户名/.halo/templates/themes/joe2.0/template/common
5.初始化大图插件
在joe主题设置中，找到自定义，在 自定义JS（body）配置中加如下代码：
// 以下配置参数均为默认值
new EvanBigBanner({
followMode: false, // 跟随模式
followTheme: false, // 跟随主题
titlePrint: true, // 是否启用打字机效果
titlePrintInterval: 300, // 打字机速度
titleTiktok: false, // 标题文字抖音效果
titleText: "晓然博客", // 标题文字
titleColor: "#ffffff", // 标题文字颜色
titleShadow: "-3px 2px 6px #1c1f21", // 标题文字阴影
hitokotoParams: {}, // 一言参数，参考：https://developer.hitokoto.cn/sentence/#%E8%AF%B7%E6%B1%82%E5%8F%82%E6%95%B0
hitokotoApi: "https://v1.hitokoto.cn", // 一言API
hitokotoColor: "#ffffff", // 一言文字颜色
hitokotoEnable: false, // 是否使用一言
});
6.修改index.ftl配置文件
编辑joe主题，找到index.ftl 首页文件，在首页文件中加入如下代码:加入的位置在第八行和第九行之间
<#import "template/common/big_banner.ftl" as bigBanner>
<@bigBanner.bigbanner title="首页" type="index"/>
加入后的index.ftl 文件
...
<#include "template/common/navbar.ftl">
<#import "template/common/big_banner.ftl" as bigBanner>
<@bigBanner.bigbanner title="首页" type="index"/>
<div class="joe_container joe_main_container page-index${settings.enable_show_in_up?then(' animated showInUp','')}${(settings.aside_position=='left')?then(' revert','')}">
...
评论区