凌峰创科服务平台

PublicCMS网站模板如何快速搭建与自定义?

下面我将从几个方面为你全面解析 PublicCMS 网站模板:

PublicCMS网站模板如何快速搭建与自定义?-图1
(图片来源网络,侵删)

PublicCMS 模板的核心概念

在开始之前,需要理解 PublicCMS 模板的几个核心组成部分:

  1. 模板引擎: PublicCMS 使用 FreeMarker 作为其默认的模板引擎,所有模板文件都是 .ftl (FreeMarker Template Language) 文件,你需要了解一些 FreeMarker 的基本语法,如变量输出 ()、条件判断 (<#if>...</#if>)、循环 (<#list>...</#list>) 等。
  2. 模板文件结构: 模板文件通常存放在 WEB-INF/templates/ 目录下,一个完整的模板(我们称之为“主题”或“模板集”)会包含多个文件,以实现模块化和复用。
  3. 模板标签/指令: PublicCMS 提供了一套自己的标签库(类似 JSP 的 Taglib),用于在模板中调用后端的数据和功能,这些标签通常以 开头,@cms_contentList 用于获取内容列表。
  4. 静态资源: CSS、JavaScript、图片等静态文件通常存放在 WEB-INF/static/ 目录下,与模板文件分开,便于管理和缓存。

模板文件的组织结构(一个典型的主题)

一个功能完整的 PublicCMS 主题(模板)通常包含以下目录和文件:

my-template/
├── static/                          // 静态资源目录
│   ├── css/
│   │   └── style.css                // 主样式文件
│   ├── js/
│   │   └── main.js                  // 主要脚本文件
│   └── images/                      // 图片资源
├── templates/                        // FreeMarker 模板文件目录
│   ├── macro/                       // 宏定义目录 (可复用的代码片段)
│   │   ├── header_macro.ftl         // 页头宏
│   │   ├── footer_macro.ftl         // 页尾宏
│   │   └── navigation_macro.ftl     // 导航菜单宏
│   ├── index.ftl                    // 首页模板
│   ├── content/                     // 内容页面模板目录
│   │   └── show.ftl                 // 文章详情页模板
│   ├── other/                       // 其他页面模板目录
│   │   └── guestbook.ftl            // 留言板页面模板
│   └── FreeMarker.cfg               // FreeMarker 配置文件 (可选,用于自定义指令)
└── site.xml                         // 模板定义文件 (告诉 PublicCMS 这是一个主题)

常用模板标签详解

PublicCMS 的标签是模板的核心,它们负责从数据库中获取数据并展示在页面上。

内容标签

  • @cms_contentList: 获取内容列表。

    PublicCMS网站模板如何快速搭建与自定义?-图2
    (图片来源网络,侵删)
    • 用途: 首页文章列表、栏目文章列表、相关文章等。
    • 常用属性:
      • channelId: 指定栏目 ID。
      • categoryIds: 指定多个栏目 ID,用逗号分隔。
      • count: 获取的文章数量。
      • order: 排序方式,如 publishDate DESC (按发布日期降序)。
      • containChild: 是否包含子栏目的内容。
    • 示例:
      <!-- 获取 ID 为 1 的栏目下的 10 篇最新文章 -->
      <@cms_contentList channelId='1' count='10' order='publishDate DESC'>
          <#list page.content as a>
              <li><a href="${a.url}" target="_blank">${a.title}</a></li>
          </#list>
      </@cms_contentList>
  • @cms_content: 获取单篇内容。

    • 用途: 文章详情页、页面内容展示。
    • 常用属性:
      • id: 指定内容 ID。
      • categoryId: 指定栏目 ID,通常用于详情页。
    • 示例:
      <!-- 在文章详情页,通常通过 categoryId 来获取当前文章 -->
      <@cms_content categoryId="${category.id}">
          ${content.text!}  <!-- 输出文章正文内容 -->
      </@cms_content>

栏目标签

  • @cms_channel: 获取栏目信息。

    • 用途: 获取当前栏目的名称、链接、描述等,或在导航中显示栏目。

    • 常用属性:

      PublicCMS网站模板如何快速搭建与自定义?-图3
      (图片来源网络,侵删)
      • id: 指定栏目 ID。
      • parentId: 获取指定父 ID 下的所有子栏目。
    • 示例:

      <!-- 获取当前栏目信息 -->
      <@cms_channel id="${category.id}">
          <h1>${category.name!}</h1>
      </@cms_channel>
      <!-- 获取所有顶级栏目用于主导航 -->
      <@cms_channel parentId='0'>
          <#list page.content as c>
              <a href="${c.url}">${c.name}</a>
          </#list>
      </@cms_channel>

站点标签

  • @cms_site: 获取站点信息。
    • 用途: 在页头或页脚显示站点名称、版权信息、ICP备案号等。
    • 示例:
      <footer>
          <p>&copy; ${site.year!} ${site.name!}. All Rights Reserved.</p>
          <p>${site.icp!}</p>
      </footer>

其他实用标签

  • @cms_page: 分页标签,通常与 @cms_contentList 配合使用。
  • @cms_macro: 加载宏定义,用于复用模板片段。
  • @cms_breadcrumb: 面包屑导航标签。

如何制作或修改一个 PublicCMS 模板?

步骤 1:准备一个基础模板

你可以从以下途径获取基础模板:

  1. 官方模板: PublicCMS 官方可能会提供一些默认模板。
  2. 第三方模板市场: 一些模板开发网站或开发者社区可能会提供付费或免费的 PublicCMS 模板。
  3. 自己从零开始: 如果你熟悉前端开发,可以自己创建一个全新的主题。

步骤 2:创建模板目录结构

按照上面提到的 my-template/ 结构,在 WEB-INF/templates/ 目录下创建你的主题文件夹。

步骤 3:编写 site.xml 文件

这个文件是必须的,它向 PublicCMS 注册你的主题,内容通常很简单:

<?xml version="1.0" encoding="UTF-8"?>
<template>
    <name>My Template</name>
    <directory>my-template</directory>
    <author>Your Name</author>
    <version>1.0</version>
</template>
  • name: 主题显示名称。
  • directory: 主题在 templates 目录下的文件夹名。

步骤 4:编写 FreeMarker 模板文件

  1. 创建宏文件 (macro/): 将页头、页尾、导航等公共部分提取为宏,header_macro.ftl:

    <!-- header_macro.ftl -->
    <#macro header>
        <header>
            <h1>${site.name!}</h1>
            <#-- 调用导航宏 -->
            <@navigation_macro />
        </header>
    </#macro>
  2. 创建页面模板:

    • 首页 (index.ftl):

      <!DOCTYPE html>
      <html>
      <head>
          <title>${site.name!}</title>
          <link rel="stylesheet" href="${site.dynamicPath}my-template/static/css/style.css">
      </head>
      <body>
          <#-- 调用页头宏 -->
          <@header />
          <main>
              <h2>最新文章</h2>
              <@cms_contentList count='5' order='publishDate DESC'>
                  <#list page.content as a>
                      <article>
                          <h3><a href="${a.url}">${a.title}</a></h3>
                          <p>${a.description!}</p>
                      </article>
                  </#list>
              </@cms_contentList>
          </main>
          <#-- 调用页脚宏 -->
          <@footer />
          <script src="${site.dynamicPath}my-template/static/js/main.js"></script>
      </body>
      </html>
    • 文章详情页 (content/show.ftl):

      
      
分享:
扫描分享到社交APP
上一篇
下一篇