first commit

2026-08-31 16:22:00 +08:00
commit e969a1e559
2665 changed files with 128795 additions and 0 deletions
@@ -0,0 +1,54 @@
+# 截图分区 → 动易 PE 标签 对照表
+
+> 模板文件：`动易的标签库/Skin/template/index.html`
+> 整体布局：`Layout/100/100 + 内部 grid_24`（已生成 `Layout_fullgrid.config`）
+
+| 截图分区 | 模板行号 | 调用的 PE 标签 | 标签来源 | 备注 |
+|---|---|---|---|---|
+| 1. 顶部蓝色条（欢迎语+登录注册搜索） | 22-32 | `自设内容`(nodeId=1, num=1) | 现有 | 后台节点 1 录入 HTML |
+| 2. 头部 Logo + 主导航 | 36-49 | `显示子栏目`(parentId=0) | 现有 | 自动读取一级栏目 |
+| 3. 头条大标题 + 副标题 | 53-65 | `自设内容`(nodeId=2, num=1/2) | 现有 | 标题文字用自设内容 |
+| 3. 头条大焦点图 | 70-75 | `通用信息焦点图_高端` | **现有** | 470×320 |
+| 3. 头条右侧文字列表 | 78-85 | `通用信息列表` | **现有** | bindStyle=标题列表 |
+| 3. 头条右侧分享图标 | 88-93 | `自设内容`(num=3) | 现有 | 静态分享图标 HTML |
+| 4. 三列新闻（新闻动态/基层传真/媒体看部队） | 98-118 | `通用带图片的信息列表` × 3 | **现有** | nodes=3/4/5 |
+| 5. 横幅广告 | 122-127 | `自设内容`(num=10) | 现有 | 广告位 |
+| 6. 装饰横幅"学习园地" | 131-134 | `自设内容`(num=11) | 现有 | 背景大图+文字 |
+| 7. 学习园地左：分类导航 | 140-144 | `显示子栏目`(parentId=6) | 现有 | 垂直菜单 |
+| 7. 学习园地中：视频列表 | 147-149 | **`视频信息列表`** | ⚠️ **需新增** | 查 PE_U_Video 表 |
+| 7. 学习园地中：文字列表 | 151-156 | `通用信息列表`(多 Tab) | 现有 | bindStyle=选项卡_标题列表 |
+| 7. 学习园地右：日历 | 159-160 | **`日历控件`** | ⚠️ **需新增** | JS 控件+服务时间戳 |
+| 7. 学习园地右：用稿统计图 | 162-163 | **`用稿统计图表`** | ⚠️ **需新增** | ECharts 饼图 |
+| 8. 第二轮三列新闻 | 168-188 | `通用带图片的信息列表` × 3 | 现有 | nodes=10/11/12 |
+| 9. 装饰横幅"学习专栏" | 192-195 | `自设内容`(num=12) | 现有 | |
+| 10. 大图+摘要新闻 | 199-209 | `通用带图片的信息列表` | 现有 | bindStyle=大图+摘要 |
+| 11. 红色横幅"先进典型" | 213-216 | `自设内容`(num=13) | 现有 | |
+| 12. 人物九宫格 | 220-229 | `通用带图片的信息列表` | 现有 | bindStyle=人物九宫格 |
+| 13. 重要链接图标宫格 | 233-240 | `友情链接列表`(bindStyle=图标宫格, groupId=1) | 现有 | |
+| 14. 点击/评论/政策三列 | 244-269 | `排行榜` × 2 + `通用信息列表` | **混合** | 排行榜标签需新增 |
+| 15. 网友心情 | 273-278 | `心情指数信息列表` | 现有 | |
+| 16. 视频滚动 + 直播电视 | 282-294 | `通用信息焦点图_高端`(左右滚动) + `自设内容` | 现有 | 140×100 小图 |
+| 17. 三列文化栏目 | 298-318 | `通用信息列表` × 3 | 现有 | nodes=17/18/19 |
+| 18. 装饰横幅"基层风采" | 322-325 | `自设内容`(num=15) | 现有 | |
+| 19. 社区焦点图 + 列表 + 工具 | 329-345 | `通用信息焦点图_高端` + `通用信息列表` + `自设内容` | 现有 | node=20 |
+| 20. 多 Tab 切换 + 重要站点 | 349-364 | `通用信息列表`(多 Tab) + `友情链接列表` | 现有 | bindStyle=多Tab切换 |
+| 21. 站内公告 | 368-373 | `弹出公告` | 现有 | showcontent=true |
+| 22. 底部友情链接 | 377-383 | `友情链接列表` | 现有 | 普通式 |
+| 23. 版权/备案 | 387-393 | `自设内容`(num=99) | 现有 | 站点底部信息 |
+
+## 节点 ID 约定（仅参考，按实际后台调整）
+
+| nodeId | 含义 |
+|---|---|
+| 1 | 站点全局设置（自设内容根） |
+| 2 | 头条/要闻 |
+| 3,4,5 | 三列新闻（新闻动态/基层传真/媒体看部队） |
+| 6,7,8,9 | 学习园地及其子分类 |
+| 10,11,12 | 政工/训练/后勤 |
+| 13 | 学习专栏 |
+| 14 | 先进典型（人物） |
+| 15 | 政策法规 |
+| 16 | 视频/影院 |
+| 17,18,19 | 军旅原创/兵言兵语/游戏娱乐 |
+| 20 | 社区/基层风采 |
+| 21,22,23,24 | 心理咨询/法律在线/生活贴士/计生指导 |
@@ -0,0 +1,190 @@
+# 需新增的自定义标签清单
+
+> 现有标签库不覆盖以下场景，需在 PowerEasy 后台 → 标签管理 → 新建标签 后使用。
+> 全部基于真实 SQL + XSLT 实现，不存在 mock 数据。
+
+---
+
+## 1. 视频信息列表
+
+**LabelId**：`视频信息列表`
+**LabelType**：列表类
+**数据源**：`PE_U_Video` / `PE_CommonModel` 关联
+
+**属性（attributes）**
+
+| 名称 | 类型 | 默认 | 说明 |
+|---|---|---|---|
+| nodeId | int | 0 | 视频栏目节点ID |
+| outputQty | int | 8 | 数量 |
+| titleLength | int | 24 | 标题截断 |
+| width | int | 200 | 缩略图宽 |
+| height | int | 140 | 缩略图高 |
+
+**LabelSqlString**
+```sql
+SELECT TOP @outputQty V.*, CM.Title, CM.NodeID, CM.GeneralID, CM.InputTime,
+       CM.PinyinTitle, CM.HtmlPageName
+FROM PE_U_Video V
+INNER JOIN PE_CommonModel CM ON V.ItemID = CM.GeneralID
+WHERE CM.Status = 99 AND CM.NodeID IN (SELECT arrChildID FROM PE_Nodes WHERE NodeID = @nodeId)
+ORDER BY CM.UpdateTime DESC
+```
+
+**LabelTemplate (XSLT 片段)**
+```xml
+<ul class="video-grid">
+  <xsl:for-each select="/NewDataSet/Table">
+    <li>
+      <a href="{pe:GetInfoPath(NodeID,GeneralID,InputTime,PinyinTitle,HtmlPageName)}">
+        <img src="{pe:PathFind(VideoPicUrl)}" width="{$width}" height="{$height}" />
+        <span class="play-icon"></span>
+        <p><xsl:value-of select="pe:CutText(Title,$titleLength,'…')" /></p>
+      </a>
+    </li>
+  </xsl:for-each>
+</ul>
+```
+
+---
+
+## 2. 日历控件
+
+**LabelId**：`日历控件`
+**LabelType**：其他类
+**数据源**：服务端时间戳（`{PE.TimeNow /}`）
+
+**属性**
+
+| 名称 | 类型 | 默认 | 说明 |
+|---|---|---|---|
+| showType | string | month | month / week |
+| theme | string | blue | 主题色 |
+
+**LabelTemplate (XSLT 片段)**
+```xml
+<div class="pe-calendar" data-theme="{$theme}">
+  <div class="cal-hd">
+    <a class="prev" href="?y={pe:DateAdd(pe:TimeNow(),'year',-1)}">‹</a>
+    <span><xsl:value-of select="pe:FormatDate(pe:TimeNow(),'yyyy 年 mm 月')" /></span>
+    <a class="next" href="?y={pe:DateAdd(pe:TimeNow(),'year',1)}">›</a>
+  </div>
+  <table class="cal-bd">
+    <thead><tr><th>日</th><th>一</th><th>二</th><th>三</th><th>四</th><th>五</th><th>六</th></tr></thead>
+    <tbody><xsl:value-of select="pe:RenderCalendar(pe:TimeNow())" /></tbody>
+  </table>
+</div>
+```
+
+> 注：`pe:RenderCalendar` 需在 `labelproc` 自定义函数中实现，返回日历 HTML 片段。
+
+---
+
+## 3. 用稿统计图表
+
+**LabelId**：`用稿统计图表`
+**LabelType**：其他类
+**数据源**：`PE_CommonModel` 按 `Inputer` 分组聚合
+
+**属性**
+
+| 名称 | 类型 | 默认 | 说明 |
+|---|---|---|---|
+| period | string | month | day/week/month |
+| chartType | string | pie | pie/bar/line |
+| topN | int | 10 | 取前 N 个 |
+
+**LabelSqlString**
+```sql
+SELECT TOP @topN Inputer, COUNT(*) AS Cnt
+FROM PE_CommonModel
+WHERE Status = 99
+  AND UpdateTime >= pe:DateAdd(pe:TimeNow(),'day',-30)
+GROUP BY Inputer
+ORDER BY Cnt DESC
+```
+
+**LabelTemplate (XSLT 片段 — 注入 ECharts)**
+```xml
+<div class="pe-chart" data-type="{$chartType}">
+  <ul class="chart-data" style="display:none">
+    <xsl:for-each select="/NewDataSet/Table">
+      <li data-name="{Inputer}" data-value="{Cnt}"></li>
+    </xsl:for-each>
+  </ul>
+  <script>
+    // 渲染逻辑由外层 site.js 完成，绑定 .pe-chart
+    $(function(){ PE.Chart.render('.pe-chart'); });
+  </script>
+</div>
+```
+
+---
+
+## 4. 排行榜
+
+**LabelId**：`排行榜`
+**LabelType**：列表类
+**数据源**：`PE_CommonModel` 按 `Hits` / `CommentCount` 排序
+
+**属性**
+
+| 名称 | 类型 | 默认 | 说明 |
+|---|---|---|---|
+| rankType | string | 点击 | 点击 / 评论 / 推荐 |
+| outputQty | int | 10 | 数量 |
+| titleLength | int | 30 | 标题截断 |
+| nodes | string | 0 | 节点ID，0=全站 |
+
+**LabelSqlString**
+```sql
+SELECT TOP @outputQty NodeID, GeneralID, InputTime, PinyinTitle, HtmlPageName, Title, Hits, CommentCount
+FROM PE_CommonModel
+WHERE Status = 99
+  <xsl:choose>
+    <xsl:when test="$rankType='点击'">ORDER BY Hits DESC</xsl:when>
+    <xsl:when test="$rankType='评论'">ORDER BY CommentCount DESC</xsl:when>
+    <xsl:when test="$rankType='推荐'">ORDER BY EliteLevel DESC, UpdateTime DESC</xsl:when>
+  </xsl:choose>
+```
+
+**LabelTemplate (XSLT 片段)**
+```xml
+<ol class="rank-list">
+  <xsl:for-each select="/NewDataSet/Table">
+    <li class="rank-{position()}">
+      <a href="{pe:GetInfoPath(NodeID,GeneralID,InputTime,PinyinTitle,HtmlPageName)}">
+        <xsl:value-of select="pe:CutText(Title,$titleLength,'…')" />
+      </a>
+      <span class="hits">
+        <xsl:choose>
+          <xsl:when test="$rankType='点击'"><xsl:value-of select="Hits" /></xsl:when>
+          <xsl:when test="$rankType='评论'"><xsl:value-of select="CommentCount" /></xsl:when>
+        </xsl:choose>
+      </span>
+    </li>
+  </xsl:for-each>
+</ol>
+```
+
+---
+
+## 5. 自设内容（已存在，但本模板高频使用，建议创建多个实例）
+
+为方便后台管理，建议预先创建以下固定 `nodeId + num`：
+
+| num | 用途 | 所在分区 |
+|---|---|---|
+| 1 | 顶部登录/注册/搜索 HTML | 分区 1 |
+| 2 | 头条大标题 | 分区 3 |
+| 3 | 头条副标题 | 分区 3 |
+| 10 | 横幅广告位 | 分区 5 |
+| 11 | "学习园地"装饰大图 | 分区 6 |
+| 12 | "学习专栏"装饰大图 | 分区 9 |
+| 13 | "先进典型"红色横幅 | 分区 11 |
+| 14 | 直播电视图标 | 分区 16 |
+| 15 | "基层风采"装饰大图 | 分区 18 |
+| 16 | 实用工具图标宫格 | 分区 19 |
+| 99 | 底部版权/备案 | 分区 23 |
+
+> 这些 `自设内容` 实例的 SQL 仍指向 `PE_Nodes.Custom_Content`，由后台编辑录入，**不属于 mock 数据**。
@@ -0,0 +1,263 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+  东部战区海军 100%还原 - 生产模板
+  说明：所有数据均通过 PE.Label 调真实接口，严禁写死数据
+  部署位置：SiteFactory 后台 → 模板管理 → 首页模板
+  关联配置：Layout_fullgrid_v2.config + 各新增标签 .config
+-->
+<pe:template>
+<pe:layout layoutId="Layout_fullgrid_v2" />
+
+<!-- ==================== 板块1：顶部工具栏（自设内容，运营可改） ==================== -->
+<pe:container id="topbar" position="top">
+  {PE.Label id="自设内容_顶部工具栏" /}
+</pe:container>
+
+<!-- ==================== 板块2：网站头部（Logo+站名） ==================== -->
+<pe:container id="site-header" position="top">
+  <div class="logo-area">
+    {PE.Label id="自设内容_网站Logo" /}
+    <div class="site-name">
+      <h1>{PE.SiteConfig.SiteName /}</h1>
+      <p>{PE.SiteConfig.SiteENName /}</p>
+    </div>
+  </div>
+  {PE.Label id="自设内容_头部标语" /}
+</pe:container>
+
+<!-- ==================== 板块3：主导航（一级栏目列表） ==================== -->
+<pe:container id="mainnav" position="top">
+  {PE.Label id="首页栏目导航" nodeId="0" /}
+  {PE.Label id="自设内容_导航右侧图标" /}
+</pe:container>
+
+<!-- ==================== 板块4：头条焦点区（70%轮播 + 30%要闻+快捷） ==================== -->
+<pe:container id="headline" position="top">
+  <div class="hd-left">
+    {PE.Label id="通用信息焦点图_高端" nodeId="14" titleLength="36" showNum="4" /}
+  </div>
+  <div class="hd-right">
+    <div class="hd-rt-top">
+      <div class="sec-title"><span class="bar"></span>要闻速递</div>
+      {PE.Label id="通用信息列表_普通式" nodeId="16" showNum="8" titleLength="24" isDate="1" dateFormat="MM-dd" isHit="0" /}
+    </div>
+    <div class="hd-rt-bot">
+      {PE.Label id="自设内容_快捷入口6宫格" /}
+    </div>
+  </div>
+</pe:container>
+
+<!-- ==================== 板块5：第一内容区（媒体聚焦 / 新闻中心 / 通知公告） ==================== -->
+<pe:container id="row3col" position="top">
+  <div class="col">
+    <div class="sec-title"><span class="star">★</span>媒体聚焦</div>
+    {PE.Label id="通用带图片的信息列表_普通式" nodeId="20" showNum="4" titleLength="20" picSize="60x60" /}
+  </div>
+  <div class="col">
+    <div class="sec-title"><span class="star">★</span>新闻中心</div>
+    {PE.Label id="通用信息列表_普通式" nodeId="16" showNum="10" titleLength="28" isDate="1" dateFormat="MM-dd" isBold="2" /}
+  </div>
+  <div class="col">
+    <div class="sec-title"><span class="star">★</span>通知公告</div>
+    {PE.Label id="GOV_公告列表" nodeId="36" showNum="10" titleLength="28" isDate="0" isNew="1" /}
+  </div>
+</pe:container>
+
+<!-- ==================== 板块6：红色宣传横幅（自设内容） ==================== -->
+<pe:container id="red-banner" position="top">
+  {PE.Label id="自设内容_红色宣传横幅" /}
+</pe:container>
+
+<!-- ==================== 板块7：学习强军（最复杂模块） ==================== -->
+<pe:container id="study" position="top">
+  <!-- 标题栏 + 标签页 -->
+  <div class="study-tabs">
+    {PE.Label id="自设内容_学习强军标签" /}
+  </div>
+  <!-- 三栏内容区 -->
+  <div class="study-3col">
+    <!-- 左：图表+数据卡（自定义标签） -->
+    <div class="study-l">
+      {PE.Label id="自设内容_学习数据图表" /}
+    </div>
+    <!-- 中：文章列表 -->
+    <div class="study-m">
+      {PE.Label id="通用信息列表_普通式" nodeId="44" showNum="10" titleLength="30" isDate="1" dateFormat="MM-dd" isBold="2" /}
+    </div>
+    <!-- 右：日历+饼图（自定义标签） -->
+    <div class="study-r">
+      {PE.Label id="自设内容_学习日历" /}
+    </div>
+  </div>
+  <!-- 底部三栏子模块 -->
+  <div class="study-3col-bottom">
+    <div class="col">
+      <div class="sub-title">精品课程</div>
+      {PE.Label id="视频信息列表_课程卡片" nodeId="48" showNum="3" /}
+    </div>
+    <div class="col">
+      <div class="sub-title">优秀教案</div>
+      {PE.Label id="通用信息列表_普通式" nodeId="50" showNum="3" titleLength="22" /}
+    </div>
+    <div class="col">
+      <div class="sub-title">学习之星</div>
+      {PE.Label id="用户列表_学习之星" nodeId="0" showNum="5" /}
+    </div>
+  </div>
+</pe:container>
+
+<!-- ==================== 板块8：东海视线（视频） ==================== -->
+<pe:container id="video" position="top">
+  <div class="video-2col">
+    <a class="video-big" href="javascript:;">
+      {PE.Label id="视频信息列表_大封面" nodeId="56" showNum="1" /}
+    </a>
+    <div class="video-grid">
+      {PE.Label id="视频信息列表_四宫格" nodeId="56" showNum="4" /}
+    </div>
+  </div>
+</pe:container>
+
+<!-- ==================== 板块9：练兵备战（上图片+下4栏列表） ==================== -->
+<pe:container id="train" position="top">
+  <div class="train-pic">
+    {PE.Label id="通用带图片的信息列表_大图" nodeId="60" showNum="1" /}
+    {PE.Label id="通用带图片的信息列表_双小图" nodeId="60" showNum="2" /}
+  </div>
+  <div class="train-list-4">
+    <div class="col">
+      <div class="sub-title">训练动态</div>
+      {PE.Label id="通用信息列表_普通式" nodeId="62" showNum="6" isDate="1" /}
+    </div>
+    <div class="col">
+      <div class="sub-title">战法研究</div>
+      {PE.Label id="通用信息列表_普通式" nodeId="64" showNum="6" isDate="1" /}
+    </div>
+    <div class="col">
+      <div class="sub-title">军事职业教育</div>
+      {PE.Label id="通用信息列表_普通式" nodeId="66" showNum="6" isDate="1" /}
+    </div>
+    <div class="col">
+      <div class="sub-title">战备工作</div>
+      {PE.Label id="通用信息列表_普通式" nodeId="68" showNum="6" isDate="1" /}
+    </div>
+  </div>
+</pe:container>
+
+<!-- ==================== 板块10：政治工作 / 后装保障 / 纪律检查（三栏卡片） ==================== -->
+<pe:container id="row3cards" position="top">
+  <div class="col-card">
+    <div class="col-card-hd political">
+      <span class="ico">党</span>
+      <span class="title">政治工作</span>
+    </div>
+    {PE.Label id="通用带图片的信息列表_卡片" nodeId="72" showNum="1" /}
+    <a class="cc-tit" href="javascript:;"></a>
+    {PE.Label id="自设内容_政治工作标签" /}
+    {PE.Label id="通用信息列表_普通式" nodeId="72" showNum="5" titleLength="22" isDate="1" /}
+  </div>
+  <div class="col-card">
+    <div class="col-card-hd logistics">
+      <span class="ico">装</span>
+      <span class="title">后装保障</span>
+    </div>
+    {PE.Label id="通用带图片的信息列表_卡片" nodeId="74" showNum="1" /}
+    <a class="cc-tit" href="javascript:;"></a>
+    {PE.Label id="自设内容_后装保障标签" /}
+    {PE.Label id="通用信息列表_普通式" nodeId="74" showNum="5" titleLength="22" isDate="1" /}
+  </div>
+  <div class="col-card">
+    <div class="col-card-hd discipline">
+      <span class="ico">盾</span>
+      <span class="title">纪律检查</span>
+    </div>
+    {PE.Label id="通用带图片的信息列表_卡片" nodeId="76" showNum="1" /}
+    <a class="cc-tit" href="javascript:;"></a>
+    {PE.Label id="自设内容_纪律检查标签" /}
+    {PE.Label id="通用信息列表_普通式" nodeId="76" showNum="5" titleLength="22" isDate="1" /}
+  </div>
+</pe:container>
+
+<!-- ==================== 板块11：理论服务 / 心理服务（两栏专家） ==================== -->
+<pe:container id="service" position="top">
+  <div class="col">
+    <div class="sec-title"><span class="star">★</span>理论服务</div>
+    {PE.Label id="用户列表_理论服务专家" nodeId="80" showNum="2" /}
+    <div class="service-time">服务时间：{PE.Label id="自设内容_理论服务时间" /}</div>
+  </div>
+  <div class="col">
+    <div class="sec-title"><span class="star">★</span>心理服务</div>
+    {PE.Label id="用户列表_心理服务专家" nodeId="82" showNum="2" /}
+    <div class="service-time">服务时间：{PE.Label id="自设内容_心理服务时间" /}</div>
+  </div>
+</pe:container>
+
+<!-- ==================== 板块12：公示公开 / 数字军史 ==================== -->
+<pe:container id="public-history" position="top">
+  <div class="col">
+    <div class="sec-title"><span class="star">★</span>公示公开</div>
+    {PE.Label id="通用信息列表_表格式" nodeId="86" showNum="6" /}
+  </div>
+  <div class="col">
+    <div class="sec-title"><span class="star">★</span>数字军史</div>
+    {PE.Label id="自设内容_数字军史大数字" /}
+    {PE.Label id="时间轴_海军大事记" nodeId="90" showNum="4" /}
+  </div>
+</pe:container>
+
+<!-- ==================== 板块13：东海清风（廉政文化） ==================== -->
+<pe:container id="discipline" position="top">
+  <div class="discipline-2col">
+    <div>
+      <div class="sub-title">以案说法</div>
+      {PE.Label id="通用信息列表_普通式" nodeId="94" showNum="7" titleLength="26" isDate="1" isBold="2" /}
+    </div>
+    <div>
+      <div class="sub-title">规定解读</div>
+      {PE.Label id="通用信息列表_普通式" nodeId="96" showNum="6" titleLength="26" isDate="1" /}
+    </div>
+    <div class="discipline-imgs">
+      {PE.Label id="通用带图片的信息列表_四宫格" nodeId="98" showNum="4" /}
+    </div>
+  </div>
+</pe:container>
+
+<!-- ==================== 板块14：东海文化（图片墙） ==================== -->
+<pe:container id="culture" position="top">
+  <div class="culture-hd">
+    {PE.Label id="自设内容_东海文化标签" /}
+  </div>
+  <div class="imgwall">
+    {PE.Label id="图片墙_不规则" nodeId="102" showNum="7" /}
+  </div>
+</pe:container>
+
+<!-- ==================== 板块15：底部（站点地图+单位信息） ==================== -->
+<pe:container id="footer" position="bottom">
+  <div class="footer-map">
+    {PE.Label id="自设内容_底部友链5栏" /}
+  </div>
+  <div class="footer-info">
+    <p class="ft-name">{PE.SiteConfig.SiteFullName /}</p>
+    <p>{PE.SiteConfig.SiteAddress /} | 邮编：{PE.SiteConfig.SiteZip /} | 办公电话：{PE.SiteConfig.SiteTel /}</p>
+  </div>
+  <div class="footer-copy">
+    备案编号：{PE.SiteConfig.SiteBeian /} | 网站标识码：{PE.SiteConfig.SiteCode /} | 技术支持：{PE.SiteConfig.SiteTechSupport /}
+  </div>
+</pe:container>
+
+<!-- ==================== 返回顶部 ==================== -->
+<a class="back-top" href="javascript:;" id="backTop">↑</a>
+<script>
+  $(function() {
+    $(window).scroll(function() {
+      if ($(this).scrollTop() > 500) $('#backTop').addClass('show');
+      else $('#backTop').removeClass('show');
+    });
+    $('#backTop').click(function() {
+      $('html, body').animate({ scrollTop: 0 }, 300);
+    });
+  });
+</script>
+
+</pe:template>