dede文章内容页代码如何修改与调用?

99ANYc3cd6
预计阅读时长 27 分钟
位置: 首页 DEDE建站 正文

一个典型的 DedeCMS 文章内容页(通常是 article_article.htm 模板)由三个核心部分组成:

dede文章内容页代码
(图片来源网络,侵删)
  1. 头部:通常包含网站标题、关键词、描述、CSS/JS 引入等。
  2. :显示文章的具体信息,如标题、发布时间、来源、正文内容、相关文章等。
  3. 底部:通常包含页脚信息、版权声明、网站地图等。

下面我将提供一个完整、带有详细注释的 article_article.htm 模板代码,并逐一解释各个部分的作用。


完整的 article_article.htm 模板代码

<!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.cfg_webname/}</title>
<meta name="keywords" content="{dede:field.keywords/}">
<meta name="description" content="{dede:field.description function='html2text(@me)'/}">
<!-- 引入网站公共CSS文件,通常在head.htm模板中 -->
{dede:include filename="head.htm"/}
</head>
<body>
<!-- 引入网站公共顶部导航栏,通常在header.htm模板中 -->
{dede:include filename="header.htm"/}
<!-- ====================== 文章内容主体开始 ====================== -->
<div class="article-container">
    <!-- 文章标题和基本信息 -->
    <div class="article-title-box">
        <h1 class="article-title">{dede:field.title/}</h1>
        <div class="article-info">
            <span>发布时间:{dede:field.pubdate function="MyDate('Y-m-d H:i',@me)"/}</span>
            <span>作者:{dede:field.source/}</span>
            <span>点击数:<script src="{dede:field name='phpurl'/}/count.php?view=yes&aid={dede:field.id/}&mid={dede:field.mid/}" type='text/javascript' language="javascript"></script> 次</span>
            <span>来源:{dede:field.source/}</span>
        </div>
    </div>
    <!-- 文章正文内容 -->
    <div class="article-content">
        {dede:field.body/}
    </div>
    <!-- 文章标签 -->
    <div class="article-tags">
        标签:
        {dede:tag row='5' getall='0'}
        <a href="[field:link/]">[field:tag/]</a>
        {/dede:tag}
    </div>
    <!-- 上一篇/下一篇 -->
    <div class="article-prev-next">
        {dede:prenext get='pre'/}
        {dede:prenext get='next'/}
    </div>
    <!-- 相关文章 -->
    <div class="related-articles">
        <h3>相关文章</h3>
        {dede:likearticle row='8' titlelen='42'}
        <li><a href="[field:arcurl/]">[field:title/]</a></li>
        {/dede:likearticle}
    </div>
</div>
<!-- ====================== 文章内容主体结束 ====================== -->
<!-- 引入网站公共底部,通常在footer.htm模板中 -->
{dede:include filename="footer.htm"/}
<!-- 引入网站公共JS文件,通常在foot.htm模板中 -->
{dede:include filename="foot.htm"/}
</body>
</html>

代码详细解析

<head> 部分:页面头部信息

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">{dede:field.title/} - {dede:global.cfg_webname/}</title>
    <meta name="keywords" content="{dede:field.keywords/}">
    <meta name="description" content="{dede:field.description function='html2text(@me)'/}">
    {dede:include filename="head.htm"/}
</head>
  • {dede:field.title/}:获取当前文章的。
  • {dede:global.cfg_webname/}:获取网站后台设置的网站名称
    • 作用<title> 标签的内容是 - 网站名,这有利于SEO,让搜索引擎和用户清晰地知道页面内容。
  • {dede:field.keywords/}:获取当前文章的。
  • {dede:field.description function='html2text(@me)'/}:获取当前文章的描述,这里使用了 function='html2text(@me)',因为文章描述字段可能包含HTML标签(如<p>),这个函数会将其纯文本化,避免在<meta description>中出现HTML代码。
  • {dede:include filename="head.htm"/}:这是一个模板包含标签,它会把 head.htm 文件中的所有内容(比如网站的CSS样式表引用、<link><style>等)原封不动地插入到这里,这是DedeCMS模块化设计的核心,方便统一管理公共资源。

<body> 部分:页面主体内容

1 公共头部和页脚

{dede:include filename="header.htm"/}
...
{dede:include filename="footer.htm"/}
  • {dede:include filename="header.htm"/}:包含网站的顶部导航栏(Header)。
  • {dede:include filename="footer.htm"/}:包含网站的底部页脚(Footer)。
  • 作用:实现网站的头部和 footer 部分的复用,所有页面都调用同一个模板,修改时只需改一处即可。

2 文章内容区

<div class="article-container">
    <!-- 文章标题和基本信息 -->
    <div class="article-title-box">
        <h1 class="article-title">{dede:field.title/}</h1>
        <div class="article-info">
            <span>发布时间:{dede:field.pubdate function="MyDate('Y-m-d H:i',@me)"/}</span>
            <span>作者:{dede:field.source/}</span>
            <span>点击数:<script src="{dede:field name='phpurl'/}/count.php?view=yes&aid={dede:field.id/}&mid={dede:field.mid/}" type='text/javascript' language="javascript"></script> 次</span>
            <span>来源:{dede:field.source/}</span>
        </div>
    </div>
    <!-- 文章正文内容 -->
    <div class="article-content">
        {dede:field.body/}
    </div>
    ...
</div>
  • {dede:field.title/}:再次调用文章标题,作为<h1>标签,是页面最重要的标题。
  • {dede:field.pubdate function="MyDate('Y-m-d H:i',@me)"/}
    • pubdate:获取文章的发布时间,默认格式是时间戳。
    • function="MyDate('Y-m-d H:i',@me)":使用DedeCMS内置的 MyDate 函数将时间戳格式化为 年-月-日 时:分 的可读格式。
  • <script src="...count.php..."></script>:这是一个点击计数脚本,当用户访问文章页时,会调用 count.php,并传递文章ID (aid) 和模型ID (mid),该脚本会自动更新数据库中的点击数。
  • {dede:field.source/}:获取文章的来源(作者或转载网站)。
  • {dede:field.body/}这是最核心的标签,它会获取并输出文章在后台编辑器中输入的全部正文内容,这部分内容通常包含了大量的HTML标签,如<p><img><h2>等。

3 文章互动和延伸内容

<!-- 文章标签 -->
<div class="article-tags">
    标签:
    {dede:tag row='5' getall='0'}
    <a href="[field:link/]">[field:tag/]</a>
    {/dede:tag}
</div>
<!-- 上一篇/下一篇 -->
<div class="article-prev-next">
    {dede:prenext get='pre'/}
    {dede:prenext get='next'/}
</div>
<!-- 相关文章 -->
<div class="related-articles">
    <h3>相关文章</h3>
    {dede:likearticle row='8' titlelen='42'}
    <li><a href="[field:arcurl/]">[field:title/]</a></li>
    {/dede:likearticle}
</div>
  • {dede:tag ...}文章标签标签。
    • row='5':显示5个标签。
    • getall='0':只显示当前文章的标签(0表示否,1表示获取全站热门标签)。
    • [field:link/]:标签的链接地址。
    • [field:tag/]:标签的名称。
  • {dede:prenext ...}上一篇/下一篇标签。
    • get='pre':获取上一篇。
    • get='next':获取下一篇。
    • 它会自动生成一个带链接的文本,如“上一篇:XXX”。
  • {dede:likearticle ...}相关文章标签。
    • row='8':显示8篇相关文章。
    • titlelen='42'最多显示42个字符。
    • [field:arcurl/]:文章的链接地址。
    • [field:title/]:文章的标题。
    • 原理:DedeCMS会根据当前文章的标签或栏目ID,查找具有相同标签或同栏目的其他文章。

底部JS引入

{dede:include filename="foot.htm"/}
  • {dede:include filename="foot.htm"/}:包含网站的公共JavaScript文件,比如jQuery库、网站主JS脚本等,放在</body>标签之前是最佳实践,可以避免阻塞页面渲染。

DedeCMS的文章内容页模板代码结构清晰,通过模板标签模板包含两大机制实现了内容的动态加载和模块化开发。

  • {dede:field.xxx/},用于从数据库中提取并显示特定信息。
  • 包含:如 {dede:include filename="xxx.htm"/},用于引入其他模板文件,实现代码复用。

理解了这个结构,你就可以轻松地自定义文章页面的样式、增减信息模块,或者修改SEO相关的标签,使其更符合你的网站需求。

dede文章内容页代码
(图片来源网络,侵删)
-- 展开阅读全文 --
头像
织梦自动更新首页插件怎么用?
« 上一篇 03-05
织梦自定义输入表单如何实现功能配置?
下一篇 » 03-05

相关文章

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

目录[+]