Halo添加自定义页面

MinChess

发布于 2022-12-26 17:14:51

2.3K0

发布于 2022-12-26 17:14:51

文章被收录于专栏：九陌斋

halo框架很强大，这里就简单记录一下集成系统外的内容到自定义页面。以下都是改主题，主题换了的话，页面也不会正常显示

新增页面模板

下载主题文件
解压主题文件
新增sheet_开头的ftl文件
文件内写入自定义的内容
例：

新建自定义页面

进入halo后台
点击新建页面
输入标题
点击发布
在高级选项中选择我们定义的模板，后发布即可；

新增相册页

效果如上
步骤和前面两个部分一致，新建shet_pic.ftl
模板内代码：

<!DOCTYPE html>
<html lang="zh-CN">
<link rel='stylesheet' id='style-css' href='https://jiumoz.com/wallpaper/static/css/style_pic.css' type='text/css' />
<link rel='stylesheet' id='fonts-css' href='https://jiumoz.com/wallpaper/static/css/iconfont.css' type='text/css' />
<link rel='stylesheet' id='fancybox-css' href='https://jiumoz.com/wallpaper/static/css/jquery.fancybox.min.css' type='text/css' />
<script type='text/javascript' src='https://jiumoz.com/wallpaper/static/js/jquery.min.js'></script>
<script type='text/javascript' src='https://jiumoz.com/wallpaper/static/js/jquery-migrate.min.js'></script>
<meta name='description' content='包含4K壁纸,美女壁纸,美女图片,风景壁纸,动漫壁纸,明星图片,动物图片,动物壁纸,游戏壁纸,等18个分类的电脑壁纸，支持放大预览和下载。' />
<meta name='keywords' content='4K壁纸,美女壁纸,美女图片,风景壁纸,动漫壁纸,明星图片,动物图片,动物壁纸,游戏壁纸,必应壁纸,bing壁纸,必应美图,九陌斋,九陌,minchess,MinChess' />
<style type='text/css'>
    html {
        --accent-color: #4370F5;
    }

    .site-main {
        min-height: 700px;
    }
</style>
<#import "template/common/header.ftl" as headInfo>
<@headInfo.head title="${sheet.title}" type="sheet" id=sheet.id />
<#import "template/macro/tail.ftl" as tailInfo>
<body>
<div id="Joe">
    <#include "template/common/navbar.ftl">
    <div class="site">
        <div class="site-content container">
            <div class="row">
                <div class="col-lg-img">
                    <div class="wallpaper-tags">
                        <ul>
                            <li data-id="36" onclick="loadData(36, true);changeTitle(this)">4K专区</li>
                            <li data-id="6" onclick="loadData(6, true);changeTitle(this)">美女模特</li>
                            <li data-id="30" onclick="loadData(30, true);changeTitle(this)">爱情美图</li>
                            <li data-id="9" onclick="loadData(9, true);changeTitle(this)">风景大片</li>
                            <li data-id="15" onclick="loadData(15, true);changeTitle(this)">小清新</li>
                            <li data-id="26" onclick="loadData(26, true);changeTitle(this)">动漫卡通</li>
                            <li data-id="11" onclick="loadData(11, true);changeTitle(this)">明星风尚</li>
                            <li data-id="14" onclick="loadData(14, true);changeTitle(this)">萌宠动物</li>
                            <li data-id="5" onclick="loadData(5, true);changeTitle(this)">游戏壁纸</li>
                            <li data-id="12" onclick="loadData(12, true);changeTitle(this)">汽车天下</li>
                            <li data-id="10" onclick="loadData(10, true);changeTitle(this)">炫酷时尚</li>
                            <li data-id="29" onclick="loadData(29, true);changeTitle(this)">月历壁纸</li>
                            <li data-id="7" onclick="loadData(7, true);changeTitle(this)">影视剧照</li>
                            <li data-id="13" onclick="loadData(13, true);changeTitle(this)">节日美图</li>
                            <li data-id="22" onclick="loadData(22, true);changeTitle(this)">军事天地</li>
                            <li data-id="16" onclick="loadData(16, true);changeTitle(this)">劲爆体育</li>
                            <li data-id="18" onclick="loadData(18, true);changeTitle(this)">BABY秀</li>
                            <li data-id="35" onclick="loadData(35, true);changeTitle(this)">文字控</li>
                        </ul>
                    </div>
                    <div class="content-area">
                        <main class="site-main">
                            <article class="type-post post-wallpaper">
                                <div class="container-wallpaper">
                                    <div class="jigsaw" id="walBox"></div>
                                    <div id="loadmore">壁纸加载中……</div>
                                </div>
                            </article>
                        </main>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script type='text/javascript' src='https://jiumoz.com/wallpaper/static/js/hans.min.js'></script>
    <script type='text/javascript' src='https://jiumoz.com/wallpaper/static/js/jquery.fancybox.min.js'>
    </script>
    <script type='text/javascript' src='https://jiumoz.com/wallpaper/static/js/jquery.lazyload.min.js'>
    </script>
    <script type='text/javascript' src='https://jiumoz.com/wallpaper/static/js/img.js'></script>
    <#include "template/common/actions.ftl">
    <#include "template/common/footer.ftl">
</div>
<@tailInfo.tail type="sheet" subType="only_header_footer" />
</body>
</html>

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2022-10-15，如有侵权请联系 cloudcommunity@tencent.com 删除

pic