提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  IT要闻

当前栏目

Halo添加自定义页面

2023-02-18 16:42:46 时间

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>

相关文章