搜索
织梦建站

织梦新闻模板怎么用？

99ANYc3cd6
99ANYc3cd6 / / 0 评论 / 7 阅读
作者有点忙，还没来得及写简介......
预计阅读时长 50 分钟
位置： 首页 › 织梦建站 › 正文

这个教程将涵盖从准备工作、目录结构、HTML静态模板制作，到最终整合到DedeCMS后台的全过程。

dedecms织梦新闻资讯模板
（图片来源网络，侵删）

第一部分：准备工作

在开始之前,请确保你已经：

  1. 安装好DedeCMS程序：在你的服务器或本地环境中成功安装了DedeCMS（V5.7 或 V7.3 等版本）。
  2. 准备好设计稿：你可以自己设计，也可以使用现成的HTML模板，这里我们假设你已经有一个完整的、包含首页、列表页、内容页的HTML静态模板。
  3. 了解DedeCMS基本结构：知道DedeCMS的目录结构，特别是 /templets/ 目录，这是存放所有模板文件的地方。

第二部分：理解DedeCMS模板目录结构

DedeCMS的模板文件都存放在 /templets/ 目录下，默认情况下，它会使用一个名为 default 的子目录，你可以创建自己的目录，my_news，来存放你的专属模板。

一个典型的新闻网站模板结构如下：

/templets/
└── my_news/               <-- 你的模板目录（可以自定义名称）
    ├── index.html         <-- 首页模板
    ├── list_article.html  <-- 文章列表页模板
    ├── article_article.html <-- 文章内容页模板
    ├── head.html          <-- 公共头部模板 (推荐使用)
    ├── footer.html        <-- 公共底部模板 (推荐使用)
    └── style/             <-- CSS和JS文件目录
        ├── css/
        │   └── style.css
        └── js/
            └── jquery.min.js

使用公共模板（{dede:include}） 是一个好习惯，可以减少代码重复，方便后期维护，我们将使用 {dede:include} 来引入头部和底部。

dedecms织梦新闻资讯模板
（图片来源网络，侵删）

第三部分：制作核心模板文件

我们将分步制作首页、列表页和内容页。

公共头部模板 (head.html)

这个文件通常包含网站的Logo、主导航菜单、搜索框等。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">{dede:global.cfg_webname/}</title>
    <meta name="keywords" content="{dede:global.cfg_keywords/}">
    <meta name="description" content="{dede:global.cfg_description/}">
    <!-- 引入CSS文件 -->
    <link rel="stylesheet" href="/templets/my_news/style/css/style.css">
    <!-- 引入JS文件 -->
    <script src="/templets/my_news/style/js/jquery.min.js"></script>
</head>
<body>
    <!-- 顶部横幅 -->
    <div class="top-banner">
        <div class="container">
            <div class="logo">
                <a href="/">
                    <!-- 这里可以用 {dede:global.cfg_weblogo/} 如果后台设置了logo -->
                    <img src="/templets/my_news/images/logo.png" alt="{dede:global.cfg_webname/}">
                </a>
            </div>
            <div class="nav">
                <ul>
                    <li><a href="/" class="current">首页</a></li>
                    <!-- 动态调用栏目 -->
                    {dede:channel type='top' row='8'}
                    <li><a href="[field:typelink/]">[field:typename/]</a></li>
                    {/dede:channel}
                </ul>
            </div>
        </div>
    </div>
    <!-- 主要内容区开始 -->
    <div class="main-content">

公共底部模板 (footer.html)

包含版权信息、友情链接、备案号等。

    </div> <!-- main-content 结束 -->
    <!-- 底部信息 -->
    <footer class="footer">
        <div class="container">
            <p>Copyright &copy; 2025-2025 {dede:global.cfg_webname/} All Rights Reserved.</p>
            <p><a href="{dede:global.cfg_copyright/}" target="_blank">{dede:global.cfg_powerby/}</a> | <a href="http://beian.miit.gov.cn/" target="_blank">{dede:global.cfg_beian/}</a></p>
        </div>
    </footer>
    <!-- 引入自定义JS -->
    <script src="/templets/my_news/style/js/main.js"></script>
</body>
</html>

首页模板 (index.html)

这是网站的门户,通常会展示推荐文章、最新文章、热门文章、指定栏目文章等。

{dede:include file="head.html"/}
<div class="main-content">
    <div class="container">
        <!-- 左侧主要内容区 -->
        <div class="main-left">
            <!-- 焦点图/轮播图 -->
            <div class="focus-slider">
                {dede:arclist type='image' titlelen='48' row='5'}
                <a href="[field:arcurl/]"><img src="[field:picname/]" alt="[field:title/]"></a>
                {/dede:arclist}
            </div>
            <!-- 推荐文章 -->
            <div class="recommend-box">
                <h2><span>推荐资讯</span></h2>
                <ul class="news-list">
                    {dede:arclist flag='c' orderby='pubdate' row='10'}
                    <li>
                        <span class="date">[field:pubdate function="MyDate('m-d', @me)"/]</span>
                        <a href="[field:arcurl/]" title="[field:title/]">[field:title/]</a>
                    </li>
                    {/dede:arclist}
                </ul>
            </div>
            <!-- 最新文章 -->
            <div class="latest-box">
                <h2><span>最新资讯</span></h2>
                <ul class="news-list">
                    {dede:arclist orderby='pubdate' row='15'}
                    <li>
                        <span class="date">[field:pubdate function="MyDate('m-d', @me)"/]</span>
                        <a href="[field:arcurl/]" title="[field:title/]">[field:title/]</a>
                    </li>
                    {/dede:arclist}
                </ul>
            </div>
        </div>
        <!-- 右侧边栏 -->
        <div class="main-right">
            <!-- 热门排行 -->
            <div class="hot-rank">
                <h2><span>热门排行</span></h2>
                <ol>
                    {dede:arclist orderby='click' row='10'}
                    <li><a href="[field:arcurl/]" title="[field:title/]">[field:title/]</a></li>
                    {/dede:arclist}
                </ol>
            </div>
            <!-- 指定栏目文章列表 -->
            <div class="sidebar-box">
                <h2><span>行业动态</span></h2>
                <ul>
                    {dede:arclist typeid='栏目ID' row='8'}
                    <li><a href="[field:arcurl/]" title="[field:title/]">[field:title/]</a></li>
                    {/dede:arclist}
                </ul>
            </div>
        </div>
    </div>
</div>
{dede:include file="footer.html"/}

首页常用标签解释：

  • {dede:arclist}：文章列表标签，功能非常强大。
    • flag='c'：调用推荐文章。
    • orderby='pubdate'：按发布时间排序。
    • orderby='click'：按点击量排序。
    • row='10'：调用10条。
    • typeid='栏目ID'：调用指定栏目下的文章。
    • type='image'：只调用带有图片缩略图的文章，常用于幻灯片。
  • {dede:channel}：栏目列表标签。
    • type='top'：调用顶级栏目。

列表页模板 (list_article.html)

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

{dede:include file="head.html"/}
<div class="main-content">
    <div class="container">
        <!-- 左侧列表内容 -->
        <div class="main-left">
            <!-- 当前位置 -->
            <div class="breadcrumb">
                <a href="/">首页</a> > <a href="[field:typelink/]">[field:typename/]</a>
            </div>
            <!-- 列表标题 -->
            <h1 class="list-title">[field:typename/]</h1>
            <!-- 文章列表 -->
            <div class="article-list">
                {dede:list pagesize='20'}
                <article class="list-item">
                    <div class="pic">
                        <a href="[field:arcurl/]"><img src="[field:litpic/]" alt="[field:title/]"></a>
                    </div>
                    <div class="text">
                        <h2><a href="[field:arcurl/]" title="[field:title/]">[field:title/]</a></h2>
                        <p class="desc">[field:description function="cn_substr(@me, 120)"/]...</p>
                        <div class="info">
                            <span>作者：[field:writer/]</span>
                            <span>分类：<a href="[field:typelink/]">[field:typename/]</a></span>
                            <span>浏览：[field:click/]</span>
                            <span>[field:pubdate function="MyDate('Y-m-d', @me)"]</span>
                        </div>
                    </div>
                </article>
                {/dede:list}
                <!-- 分页 -->
                <div class="page-nav">
                    {dede:pagelist listsize='4' listitem='info,index,pre,next,end,pageno'}
                    {/dede:pagelist}
                </div>
            </div>
        </div>
        <!-- 右侧边栏 (可以和首页共用) -->
        <div class="main-right">
            {dede:include file="sidebar.html"/} <!-- 假设你把右侧栏单独拎出来了 -->
        </div>
    </div>
</div>
{dede:include file="footer.html"/}

列表页常用标签解释：

  • {dede:list}：列表页专用标签，用于循环输出当前栏目的文章。
    • pagesize='20'：每页显示20条。
  • [field:arcurl/]：文章链接。
  • [field:litpic/]：文章缩略图。
  • [field:title/]。
  • [field:description/]：
  • [field:click/]：文章点击量。
  • [field:pubdate/]：文章发布时间，可以使用function进行格式化。
  • {dede:pagelist}：分页标签。

内容页模板 (article_article.html)

用于显示单篇文章的详细内容。

{dede:include file="head.html"/}
<div class="main-content">
    <div class="container">
        <!-- 左侧文章内容 -->
        <div class="main-left">
            <!-- 当前位置 -->
            <div class="breadcrumb">
                <a href="/">首页</a> > <a href="[field:typelink/]">[field:typename/]</a> > <span>[field:title/]</span>
            </div>
            <!-- 文章主体 -->
            <article class="article-content">
                <h1 class="article-title">[field:title/]</h1>
                <div class="article-info">
                    <span>发布时间：[field:pubdate function="MyDate('Y-m-d H:i:s', @me)"]</span>
                    <span>来源：[field:source/]</span>
                    <span>作者：[field:writer/]</span>
                    <span>浏览：[field:click/]</span>
                </div>
                <!-- 文章内容 -->
                <div class="article-body">
                    [field:body/]
                </div>
                <!-- 上下篇 -->
                <div class="prenext">
                    <p>上一篇：{dede:prenext get='pre'/}</p>
                    <p>下一篇：{dede:prenext get='next'/}</p>
                </div>
                <!-- 相关文章 -->
                <div class="related-articles">
                    <h3>相关文章</h3>
                    <ul>
                        {dede:likeart titlelen='42' row='8'}
                        <li><a href="[field:arcurl/]" title="[field:title/]">[field:title/]</a></li>
                        {/dede:likeart}
                    </ul>
                </div>
            </article>
        </div>
        <!-- 右侧边栏 (可以和首页共用) -->
        <div class="main-right">
            {dede:include file="sidebar.html"/} 
        </div>
    </div>
</div>
{dede:include file="footer.html"/}

页常用标签解释：**

  • [field:body/]：最核心的标签，用于输出文章的完整内容，包括你后台编辑器里添加的所有文字、图片、格式。
  • {dede:prenext}：获取上一篇/下一篇文章的链接。
  • {dede:likeart}：调用与当前文章相关的文章（通常根据Tag标签）。

第四部分：整合模板到DedeCMS后台

模板文件制作完成后,你需要将其上传到DedeCMS后台，并关联到相应的页面。

  1. 上传模板文件：

    • 使用FTP工具,将你制作好的所有模板文件（index.html, list_article.html, article_article.html, head.html, footer.html等）上传到 /templets/my_news/ 目录下。
    • 将CSS和JS文件上传到 /templets/my_news/style/ 对应的子目录中。

  2. 后台设置：

    • 登录你的DedeCMS后台。
    • 设置默认模板目录：进入 系统 -> 系统基本参数 -> 核心设置，找到 默认模板目录 选项，将其值改为你的模板目录名，my_news。

  3. 指定模板文件：

    • 首页模板：进入 主页管理 -> 默认主页管理，在 主页模板文件 选项中，选择或输入 index.html。
    • 列表页模板：进入 核心 -> 频道模型 -> 内容模型管理，点击 普通文章（或其他你使用的模型）进入编辑，在 列表模板 选项中，选择或输入 list_article.html。
    • 内容页模板：在同一个 普通文章 模型编辑页面，在 文章模板 选项中，选择或输入 article_article.html。

  4. 生成网站：

    • 所有设置完成后,进入 生成 -> 更新主页HTML，点击 更新主页。
    • 然后进入 生成 -> 一键更新网站，你可以选择更新所有栏目、所有文档，这样网站就会根据你的新模板重新生成所有页面。

第五部分：常见问题与技巧

  • CSS路径问题：确保你的CSS文件中的图片路径（如背景图）是正确的，最好使用绝对路径（如 /templets/my_news/images/logo.png）或确保路径相对于CSS文件本身。
  • 图片不显示：
    1. 检查 [field:litpic/] 或 [field:picname/] 标签是否用对。
    2. 检查后台文章是否上传了缩略图。
    3. 检查图片路径是否正确。
  • 标签不生效：
    1. 确保标签语法正确,如 {dede:arclist} 和 {/dede:arclist} 成对出现。
    2. 检查标签的属性是否正确,如 typeid 是否为正确的栏目ID。
  • 性能优化：对于大型网站，{dede:arclist} 调用过多可能会影响速度，可以考虑使用Dede的自定义模型或二次开发来优化数据查询。
  • 响应式设计：在制作CSS时，使用媒体查询（@media）让你的模板在不同尺寸的设备（PC、平板、手机）上都能良好显示。

这个教程为你构建一个DedeCMS新闻资讯模板提供了完整的框架和思路,你可以基于这个框架，自由地发挥创意，设计出独一无二的网站，祝你成功！

-- 展开阅读全文 --
头像
C语言函数如何返回字符串？
« 上一篇 2025-12-16
dede织梦如何彻底去除powered版权？
下一篇 » 2025-12-16

相关文章

取消
微信二维码
支付宝二维码

目录[+]