DedeCMS (织梦内容管理系统) 是一个非常流行的 PHP 开源网站管理系统，制作一个 HTML5 模板，意味着我们要用 HTML5 的新标签来优化页面结构，使其语义化更强，对搜索引擎更友好，并且代码更简洁、易维护。

dede html5 模板
（图片来源网络，侵删）

下面我将从 核心思想、具体步骤、标签转换、实例代码 四个方面来详细说明。

核心思想：语义化

制作 HTML5 DedeCMS 模板的核心思想是 “语义化” (Semantic)。

  • 旧做法 (HTML4/XHTML): 我们大量使用 <div> 标签，通过 class 或 id 来定义区块的用途，<div class="header">, <div class="nav">。
  • 新做法 (HTML5): 引入了一系列具有明确语义的标签，直接用标签名来描述区块的内容。
    • <header> 代替 <div class="header">
    • <nav> 代替 <div class="nav">
    • <main> 代替 <div class="main-content">
    • <article> 代替 <div class="post">
    • <aside> 代替 <div class="sidebar">
    • <footer> 代替 <div class="footer">

这样做的好处是：

  1. SEO友好： 搜索引擎能更清晰地理解网站的结构,从而可能给予更好的排名。
  2. 代码可读性高： 代码结构一目了然,方便开发者阅读和维护。
  3. 辅助技术友好： 屏幕阅读器等辅助技术可以更好地解析页面,提升残障人士的用户体验。

制作 HTML5 DedeCMS 模板的详细步骤

第 1 步：准备工作

  1. 本地环境： 确保你的电脑上安装了 PHP + MySQL 环境，例如集成环境包（如 phpStudy、XAMPP、WampServer 等）。
  2. DedeCMS 程序： 从 DedeCMS 官网下载最新版本的程序（目前是 DedeCMS V5.7 SP2 或更高版本）。
  3. HTML5 模板文件： 你可以自己从零开始写一个 HTML5 结构的静态页面，或者下载一个开源的 HTML5 网站模板（例如从 Bootstrap、TemplateMonster 等网站获取），然后将它转换为 DedeCMS 模板。

第 2 步：定义模板文件结构

一个典型的 DedeCMS 模板文件结构如下：

dede html5 模板
（图片来源网络，侵删）
/templets
  /default (你的模板文件夹名，可以自定义)
    /images
    /css
    /js
    index.html (首页模板)
    article_article.html (文章内容页模板)
    list_channel.html (栏目列表页模板)
    search.html (搜索页模板)
    ...其他页面模板

第 3 步：转换静态 HTML 页面为 DedeCMS 模板

这是最关键的一步，我们将一个静态的 HTML5 文件，通过嵌入 DedeCMS 的 全局标记 和 底层模板,变成动态的模板文件。

核心标记说明：

标记名称 作用 位置
{dede:include filename="head.htm" /} 包含头部文件 几乎所有页面
{dede:include filename="footer.htm" /} 包含底部文件 几乎所有页面
{dede:global name='cfg_webname'/} 调用网站名称 任何需要显示网站名的地方
{dede:global name='cfg_weburl'/} 调用网站网址 任何需要显示网址的地方
{dede:arclist} 文章列表标记 首页、列表页
{dede:list} 自定义列表标记 栏目列表页、搜索页
{dede:field} 字段调用标记 页、列表页
{dede:php} 执行 PHP 代码 任何需要复杂逻辑的地方

关键标签转换与底层模板

HTML5 模板的核心在于结构，而 DedeCMS 的动态内容则通过底层模板来填充。

首页 (index.html)

首页通常包含：顶部导航、焦点图/轮播图、文章列表、页脚等。

dede html5 模板
（图片来源网络，侵删）

index.html 示例代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">{dede:global name='cfg_webname'/} - {dede:global name='cfg_description'/}</title>
    <meta name="keywords" content="{dede:global name='cfg_keywords'/}">
    <link rel="stylesheet" href="{dede:global name='cfg_cmsurl'/}/templets/{dede:global name='cfg_defaultstyle'/}/css/style.css">
</head>
<body>
    <!-- 1. 头部 -->
    <header>
        <div class="top-bar">
            <!-- 可以放一些登录、注册、联系方式等 -->
        </div>
        <div class="main-header">
            <h1><a href="{dede:global name='cfg_weburl'/}">{dede:global name='cfg_webname'/}</a></h1>
            <nav>
                <ul>
                    {dede:channel type='top' row='8'}
                    <li><a href="[field:typelink/]">[field:typename/]</a></li>
                    {/dede:channel}
                </ul>
            </nav>
        </div>
    </header>
    <!-- 2. 焦点图 -->
    <section class="focus-slider">
        <!-- 这里可以调用一个专门的幻灯片标记，或者用 arclist 调用推荐文章 -->
        {dede:arclist flag='f' row='5' titlelen='24'}
        <li><a href="[field:arcurl/]"><img src="[field:litpic/]" alt="[field:title/]"></a></li>
        {/dede:arclist}
    </section>
    <!-- 3. 主要内容区 -->
    <main class="main-content">
        <!-- 3.1 左侧文章列表 -->
        <section class="content-left">
            <h2>最新文章</h2>
            <ul>
                {dede:arclist row='10' titlelen='32'}
                <li><span class="date">[field:pubdate function="MyDate('Y-m-d', @me)"/]</span><a href="[field:arcurl/]">[field:title/]</a></li>
                {/dede:arclist}
            </ul>
        </section>
        <!-- 3.2 右侧边栏 -->
        <aside class="sidebar">
            {dede:include filename='side.htm'/} <!-- 包含侧边栏模板 -->
        </aside>
    </main>
    <!-- 4. 页脚 -->
    <footer>
        <p>Copyright &copy; {dede:year function='strftime("%Y",@me)'/} {dede:global name='cfg_webname'/} All Rights Reserved.</p>
    </footer>
    <script src="{dede:global name='cfg_cmsurl'/}/templets/{dede:global name='cfg_defaultstyle'/}/js/jquery.min.js"></script>
</body>
</html>

页 (article_article.html)

这个页面用于显示单篇文章的详细内容。

article_article.html 示例代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">{dede:field.title/}_{dede:global name='cfg_webname'/}</title>
    <meta name="keywords" content="{dede:field.keywords/}">
    <meta name="description" content="{dede:field.description function='html2text(@me)'/}">
    <link rel="stylesheet" href="{dede:global name='cfg_cmsurl'/}/templets/{dede:global name='cfg_defaultstyle'/}/css/style.css">
</head>
<body>
    {dede:include filename="head.htm"/}
    <main class="article-container">
        <!-- 文章主体 -->
        <article>
            <header class="article-header">
                <h1>{dede:field.title/}</h1>
                <div class="article-info">
                    <span>作者：{dede:field.writer/}</span>
                    <span>发布时间：{dede:field.pubdate function="MyDate('Y-m-d H:i:s', @me)"/}</span>
                    <span>来源：{dede:field.source/}</span>
                    <span>浏览：{dede:field.click/}</span>
                </div>
            </header>
            <section class="article-content">
                {dede:field.body/}
            </section>
            <footer class="article-footer">
                <p>上一篇：{dede:prenext get='pre'/}</p>
                <p>下一篇：{dede:prenext get='next'/}</p>
                <!-- 可以放评论、点赞等 -->
            </footer>
        </article>
        <!-- 相关文章/热门文章侧边栏 -->
        <aside class="article-sidebar">
            {dede:include filename='side.htm'/}
        </aside>
    </main>
    {dede:include filename="footer.htm"/}
</body>
</html>

栏目列表页 (list_channel.html)

用于显示某个栏目下的所有文章列表。

list_channel.html 示例代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">{dede:field.seotitle/}_{dede:global name='cfg_webname'/}</title>
    <link rel="stylesheet" href="{dede:global name='cfg_cmsurl'/}/templets/{dede:global name='cfg_defaultstyle'/}/css/style.css">
</head>
<body>
    {dede:include filename="head.htm"/}
    <main class="list-container">
        <h1>{dede:field.typename/}</h1>
        <p>{dede:field.description/}</p>
        <section class="article-list">
            <!-- 使用 {dede:list} 标记循环输出列表 -->
            {dede:list pagesize='10'}
            <article class="list-item">
                <h2><a href="[field:arcurl/]">[field:title/]</a></h2>
                <div class="list-info">
                    <span>[field:pubdate function="MyDate('Y-m-d', @me)"]</span>
                    <span>作者：[field:writer/]</span>
                    <span>浏览：[field:click/]</span>
                </div>
                <p class="list-summary">[field:description function='cn_substr(@me, 200)'/]...</p>
            </article>
            {/dede:list}
        </section>
        <!-- 分页 -->
        <div class="page-nav">
            {dede:pagelist listsize='4' listitem='info,index,pre,next,end,option'/}
        </div>
    </main>
    {dede:include filename="footer.htm"/}
</body>
</html>

重要注意事项

  1. <!DOCTYPE html> 和 <meta charset="UTF-8">

    • 必须放在最前面，不能有任何输出（包括空格或换行）在它们之前。
    • UTF-8 编码是中文网站的最佳实践,可以避免乱码问题。

  2. 路径问题

    • CSS、JS、图片等资源的路径，强烈建议使用 绝对路径,这样可以避免因页面层级变化导致路径错误。
    • DedeCMS 提供了 {dede:global name='cfg_cmsurl'/} 来获取网站根目录,这是最佳实践。
    • <img src="{dede:global name='cfg_cmsurl'/}/templets/default/images/logo.png">

  3. {dede:include} 的使用

    • 将 head.htm 和 footer.htm 单独出来，可以让所有模板文件结构更清晰，修改也更方便，修改网站 Logo 只需修改 head.htm 中的代码即可。

  4. CSS 和 JS 的兼容性

    • HTML5 本身对旧浏览器（如 IE9 以下）的兼容性不好，如果你的网站需要兼容这些浏览器，需要在 <head> 中引入 html5shiv.js 来让旧浏览器认识 HTML5 标签。
    • 在 <head> 中添加：
      <!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<![endif]-->

  5. 模板命名

    • DedeCMS 对模板文件名有约定，例如文章内容页默认是 article_article.html，列表页是 list_channel.html，请遵循这些命名规则,或者确保在后台模板管理中正确关联了模板文件。

通过以上步骤，你就可以成功地将一个静态的 HTML5 页面转换为功能完整的 DedeCMS 动态模板了，核心在于理解 HTML5 语义化结构 和 DedeCMS 模板标记 的结合使用。