Halo自定义页面

在使用Halo后台维护项目,有的页面是固定的,但内容需要一些自定义样式,内容动态编辑生成,这个时候就需要自定义页面;

Halo版本
json 复制代码
版本:2.12
1.首先在theme.yaml中添加自定义页面并指定文件名
json 复制代码
spec:
    customTemplates:
        page:
          - name: 关于我们
            description: 关于我们
            screenshot:
            file: about.html
2.创建about.html并添加自定义样式
html 复制代码
<!-- 引入公共头部 -->
<div 
    th:replace="~{modules/header :: commonHeader}">
</div>

<!-- 自定义内容 -->
<div>
    <!-- 获取封面作为banner撑满整个宽度 -->
    <img class="about_bj_img" 
            th:if="${singlePage.spec.cover}"
            th:src="${singlePage.spec.cover}">
            
    <!-- 页面内偶人 -->
    <div class="about_container">
        <!-- 获取页面内容 -->
        <div 
            th:utext="${singlePage.content.content}" > 
        </div>
    </div>
</div>


<!-- 公共底部 -->
<div th:replace="~{modules/footer :: commonFooter}"></div>

<!-- 滚动到顶部 -->
<div th:replace="~{modules/toTopCom :: commonToTop}"></div>
后台新建页面
  • 新建页面
  • 自定义模板选择"关于我们"
  • 发布
  • 预览
相关推荐
WTSolutions4 分钟前
Image Pixel RGBA Extractor:免费在线图像像素色彩提取工具全解析
javascript
轻语呢喃10 分钟前
Cookie详解:从原理到实战,彻底搞懂用户身份识别机制
javascript·http·html
旺旺大力包13 分钟前
【JS笔记】JS 和 noodjs 的常见操作(十)
开发语言·javascript·node.js·ecmascript
前端进阶者17 分钟前
地图坐标系转换JS库
前端·javascript
夏梦春蝉1 小时前
ES6从入门到精通:其他特性
前端·javascript·es6
csdn_aspnet1 小时前
在 React 中使用 WebSockets 构建实时聊天应用程序
javascript·react.js·node.js
【ql君】qlexcel2 小时前
Notepad++ 复制宏、编辑宏的方法
开发语言·javascript·notepad++··宏编辑·宏复制
就改了2 小时前
Ajax——在OA系统提升性能的局部刷新
前端·javascript·ajax
凌冰_2 小时前
Ajax 入门
前端·javascript·ajax
奋飛3 小时前
TypeScript系列:第六篇 - 编写高质量的TS类型
javascript·typescript·ts·declare·.d.ts