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>
后台新建页面
  • 新建页面
  • 自定义模板选择"关于我们"
  • 发布
  • 预览
相关推荐
新中地GIS开发老师1 小时前
Cesium 军事标绘入门:用 Cesium-Plot-JS 快速实现标绘功能
前端·javascript·arcgis·cesium·gis开发·地理信息科学
Superxpang1 小时前
前端性能优化
前端·javascript·vue.js·性能优化
左手吻左脸。1 小时前
解决el-select因为弹出层层级问题,不展示下拉选
javascript·vue.js·elementui
李白的故乡1 小时前
el-tree-select名字
javascript·vue.js·ecmascript
Rysxt_1 小时前
Element Plus 入门教程:从零开始构建 Vue 3 界面
前端·javascript·vue.js
隐含1 小时前
对于el-table中自定义表头中添加el-popover会弹出两个的解决方案,分别针对固定列和非固定列来隐藏最后一个浮框。
前端·javascript·vue.js
你的人类朋友1 小时前
先用js快速开发,后续引入ts是否是一个好的实践?
前端·javascript·后端
知识分享小能手1 小时前
微信小程序入门学习教程,从入门到精通,微信小程序核心 API 详解与案例(13)
前端·javascript·学习·react.js·微信小程序·小程序·vue
子兮曰2 小时前
npm workspace 深度解析:与 pnpm workspace 和 Lerna 的全面对比
前端·javascript·npm
颜酱2 小时前
用搬家公司的例子来入门webpack
前端·javascript·webpack