搜索
DEDE建站

dede精美文章页模板如何快速适配与美化？

99ANYc3cd6
99ANYc3cd6 / / 0 评论 / 1 阅读
作者有点忙，还没来得及写简介......
预计阅读时长 33 分钟
位置： 首页 › DEDE建站 › 正文
  1. SEO优化：<title>、<meta> 标签动态化，H1 标签规范使用，面包屑导航。
  2. 用户体验：文章信息（作者、时间、来源、点击、顶/踩）清晰展示，上一篇/下一篇导航，相关文章推荐。
  3. 广告位：预留了常见的广告位（如文章内容上方、下方），方便后台管理。
  4. 响应式设计：使用现代CSS（Flexbox）和媒体查询，确保在手机、平板和电脑上都有良好的显示效果。
  5. 代码规范：使用 dede:field 等DedeCMS原生标签，便于理解和修改，并添加了必要的注释。

第一步：创建模板文件

  1. 登录您的DedeCMS后台。
  2. 进入 [模板] -> [默认模板管理]。
  3. 在右侧的 [自定义模板文件] 中，点击 [增加一个新模板]。
  4. 模板名称：填写 article_m.htm (这是DedeCMS默认的文章页模板名)。
  5. 模板类型：选择 默认模板。
  6. ：将下面提供的完整代码复制粘贴进去。
  7. 点击 [保存]。

第二步：CSS 样式代码

为了让页面更美观,您需要一个CSS文件，这里提供一个简洁的CSS代码，您可以将其添加到您主题的 style.css 文件中，或者直接在 <head> 标签内通过 <style> 标签引入。

dede精美文章页模版
（图片来源网络，侵删）

推荐方式：创建一个 article.css 文件，然后在模板的 <head> 部分通过 <link> 引入。

article.css 文件内容：

/* --- 全局与布局 --- */
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #f4f4f4;
    margin: 0;
    padding: 0;
}
.container {
    max-width: 1200px;
    margin: 20px auto;
    padding: 0 20px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}
/* --- 面包屑导航 --- */
.breadcrumb {
    padding: 15px 20px;
    border-bottom: 1px solid #eee;
    font-size: 14px;
    color: #666;
}
.breadcrumb a {
    color: #007bff;
    text-decoration: none;
}
.breadcrumb a:hover {
    text-decoration: underline;
}
/* --- 文章标题和信息 --- */
.article-title {
    padding: 20px;
    border-bottom: 1px solid #eee;
}
.article-title h1 {
    font-size: 28px;
    font-weight: bold;
    color: #222;
    margin: 0 0 15px 0;
    line-height: 1.3;
}
.article-info {
    font-size: 14px;
    color: #999;
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}
.article-info a {
    color: #007bff;
    text-decoration: none;
}
.article-info a:hover {
    text-decoration: underline;
}
/* --- 文章内容 --- */
.article-content {
    padding: 20px;
    font-size: 16px;
    line-height: 1.8;
    color: #444;
}
.article-content p {
    margin-bottom: 16px;
    text-indent: 2em; /* 段首缩进 */
}
.article-content img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 10px auto;
    border-radius: 4px;
}
/* --- 互动区域 (顶踩/分享) --- */
.interaction {
    padding: 15px 20px;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
}
.digg {
    display: flex;
    gap: 15px;
}
.digg a {
    color: #666;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 5px;
}
.digg a:hover {
    color: #007bff;
}
/* --- 上一篇/下一篇 --- */
.nav-article {
    padding: 20px;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    font-size: 14px;
}
.nav-article a {
    color: #007bff;
    text-decoration: none;
}
.nav-article a:hover {
    text-decoration: underline;
}
/* --- 相关文章 --- */
.related-articles {
    padding: 20px;
}
.related-articles h3 {
    font-size: 18px;
    margin-bottom: 15px;
    border-left: 4px solid #007bff;
    padding-left: 10px;
}
.related-articles ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.related-articles li {
    padding: 8px 0;
    border-bottom: 1px dashed #eee;
}
.related-articles li a {
    color: #444;
    text-decoration: none;
    display: block;
}
.related-articles li a:hover {
    color: #007bff;
    text-decoration: underline;
}
/* --- 广告位样式 (可选) --- */
.ad-box {
    padding: 15px;
    text-align: center;
    border-bottom: 1px solid #eee;
    background-color: #f9f9f9;
}
.ad-box img {
    max-width: 100%;
    height: auto;
}
/* --- 响应式设计 --- */
@media (max-width: 768px) {
    .container {
        margin: 10px;
        padding: 0 15px;
    }
    .article-title h1 {
        font-size: 24px;
    }
    .article-content {
        font-size: 15px;
        padding: 15px;
    }
    .interaction {
        flex-direction: column;
        gap: 10px;
        align-items: flex-start;
    }
    .nav-article {
        flex-direction: column;
        gap: 10px;
    }
}

第三步：完整的 article_m.htm 模板代码

这是模板的主体部分,包含了HTML结构和DedeCMS标签。

<!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 name='keywords'/}">
    <meta name="description" content="{dede:field name='description' function='html2text(@me)'/}">
    <!-- 引入您的CSS文件，请根据实际路径修改 -->
    <link rel="stylesheet" href="{dede:global.cfg_templets_skin/}/css/article.css">
</head>
<body>
<div class="container">
    <!-- 面包屑导航 -->
    <div class="breadcrumb">
        您的位置：<a href='{dede:global.cfg_basehost/}'>首页</a> > {dede:type typeid=''}<a href='[field:typelink/]'>[field:typename/]</a>{/dede:type} > <a href='{dede:field name='arcurl'/}'>{dede:field.title/}</a>
    </div>
    <!-- 文章标题和信息 -->
    <div class="article-title">
        <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',@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>
        </div>
    </div>
    <!-- 广告位：文章内容上方 -->
    <div class="ad-box">
        <!-- 您可以在后台通过广告管理调用广告，{dede:myad name='article_top'/} -->
        <!-- 或者直接放置图片/JS代码 -->
        <!-- <img src="path/to/ad-image.jpg" alt="广告"> -->
    </div>
    <!-- 文章内容 -->
    <div class="article-content">
        {dede:field.body/}
    </div>
    <!-- 互动区域：顶/踩 -->
    <div class="interaction">
        <div class="digg">
            <span>顶：</span>
            <a href="javascript:;" onclick="Digg('digg',{dede:field.id/});">顶一下 (<span id="digg_count">{dede:field.goodpost/}</span>)</a>
            <span style="margin-left:20px;">踩：</span>
            <a href="javascript:;" onclick="Digg('bad',{dede:field.id/});">踩一下 (<span id="bad_count">{dede:field.badpost/}</span>)</a>
        </div>
        <!-- 可以在这里添加分享按钮，如：百度分享、JiaThis等 -->
    </div>
    <!-- 广告位：文章内容下方 -->
    <div class="ad-box">
        <!-- {dede:myad name='article_bottom'/} -->
    </div>
    <!-- 上一篇/下一篇 -->
    <div class="nav-article">
        <div>
            {dede:prenext get='pre'/}
        </div>
        <div style="text-align: right;">
            {dede:prenext get='next'/}
        </div>
    </div>
    <!-- 相关文章 -->
    <div class="related-articles">
        <h3>相关文章</h3>
        <ul>
            {dede:like titlelen='42' row='8'}
            <li><a href="[field:arcurl/]">[field:title/]</a></li>
            {/dede:like}
        </ul>
    </div>
</div>
<!-- 引入顶踩功能的JS，请确保路径正确 -->
<script src="{dede:field name='phpurl'/}/digg_ajax.php?id={dede:field.id/}"></script>
</body>
</html>

第四步：如何使用和自定义

  1. CSS路径：模板中的 <link rel="stylesheet" href="{dede:global.cfg_templets_skin/}/css/article.css"> 会自动指向您当前模板目录下的 css/article.css 文件，请确保您的CSS文件和模板文件在同一主题文件夹下。

    dede精美文章页模版
    （图片来源网络，侵删）

  2. 广告位：模板中用注释标出了广告位，您有两种方式添加广告：

    • 推荐方式：在DedeCMS后台进入 [广告管理]，创建广告（例如命名为 article_top），然后使用标签 {dede:myad name='article_top'/} 替换注释。
    • 直接替换：直接删除注释，替换成您的 <img> 标签或JS广告代码。

  3. 分享功能：<div class="interaction"> 中预留了分享按钮的位置，您可以去集成第三方分享平台（如百度分享、JiaThis）的JS代码，粘贴到这里。

  4. 修改样式：所有的样式都在 article.css 文件中，您可以自由修改颜色、字体、间距等，以达到您想要的效果。

  5. SEO微调：

    dede精美文章页模版
    （图片来源网络，侵删）
    • title 标签格式为： - 网站名称，这是非常标准的SEO格式。
    • keywords 和 description 会自动调用文章的关键词和摘要，请在发布文章时务必填写好这两个字段，这对SEO至关重要。

这个模板已经为您搭建了一个功能齐全、结构清晰、美观大方的文章页面，您可以根据自己网站的具体风格和需求进行微调。

-- 展开阅读全文 --
头像
织梦注册页面添加字段
« 上一篇 03-06
织梦导航如何实现不循环栏选中效果？
下一篇 » 03-06

相关文章

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

目录[+]