dede仿站内容页-DEDE建站-盈思创科技

第一部分：仿站核心思想

仿站不是简单的复制粘贴，而是“结构”和“样式”的模仿。

（图片来源网络，侵删）

结构: 指的是HTML代码的骨架。<header>, <nav>, <div class="main">, <div class="sidebar">, <footer> 等，你需要通过分析目标网站,搞清楚这些区域是如何划分的。
样式: 指的是CSS代码，它决定了网站的外观，比如颜色、字体、间距、边框、阴影等，你需要提取目标网站的CSS样式,并应用到你的Dede模板中。

仿站工具推荐：

浏览器开发者工具 (F12): 这是仿站的核心工具，你可以用它来查看任何网站的HTML结构、CSS样式,甚至是JavaScript代码。
图片下载工具: 用于下载目标网站用到的图片、图标等。
文本编辑器: 如 VS Code, Sublime Text, Notepad++ 等,用于修改Dede模板文件。

第二部分：仿站详细步骤

分析目标网站

在开始之前，用浏览器打开你要仿制的网站，按 F12 打开开发者工具。

分析整体布局：
- 顶部导航栏 (header)
- 区 (main, content, article)
- 侧边栏 (sidebar)
- 页脚 (footer)
页结构：
（图片来源网络，侵删）
- 文章标题通常在一个 <h1> 标签里。
- 信息栏: 发布时间、来源、作者、点击量等，通常在一个 <div class="article-info"> 里。
- 文章内容，通常在一个 <div class="article-content"> 或 <article> 标签里。
- 相关文章/推荐阅读: 通常在正文下方或侧边栏。
- 评论: 通常在文章最下方。
提取样式：
- 在开发者工具中，点击左上角的“选择元素”图标（一个鼠标指针指向方块的图标）。
- 用它点击目标网站的某个元素（比如文章标题），右侧的“Styles”面板就会显示该元素的所有CSS样式。
- 重要： 你需要复制这些CSS规则，注意，有些样式是继承的,你需要找到定义这个元素最核心的CSS代码。

准备DedeCMS环境

安装DedeCMS： 在你的本地服务器（如phpStudy）或虚拟主机上安装一个干净的DedeCMS程序。
创建栏目：
- 登录Dede后台，进入「[栏目管理]」。
- 创建与你目标网站栏目结构一致的栏目，目标网站有“公司新闻”、“产品中心”、“关于我们”,你就创建对应的栏目。
- 关键： 为每个栏目选择一个对应的“栏目模板”（默认是 list_article.htm）和“文章内容模板”（默认是 article_article.htm），如果要做特殊样式，可以先复制默认模板，然后重命名，article_news.htm。
添加测试文章：
- 进入「[采集]」->「[通用采集小助手]」或直接「[添加文档]」。
- 从目标网站复制几篇文章，分别发布到你刚才创建的不同栏目中,确保文章能正常显示。

**页模板 (`article_*.htm`)**

这是仿站的核心环节，Dede的内容页模板文件通常位于 /templets/default/ 目录下，我们不会直接修改 article_article.htm,而是为每个栏目创建独立的模板。

复制并重命名模板：
- 复制 /templets/default/article_article.htm 文件。
- 根据栏目命名，公司新闻”栏目，重命名为 article_news.htm。

用HTML搭建骨架：

打开 article_news.htm,删除Dede默认的模板代码。

根据你第一步分析的网站结构,用纯HTML搭建页面框架。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>{dede:field.title/} - {dede:global.cfg_webname/}</title>
<!-- 引入你提取的CSS文件 -->
<link rel="stylesheet" href="/css/style.css">
</head>
<body>
<!-- 顶部导航 -->
{dede:include filename="header.htm"/}
<div class="main-container">
    <!-- 左侧内容区 -->
    <div class="article-content-wrapper">
        <!-- 文章标题 -->
        <h1>{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>作者：{dede:field.writer/}</span>
            <span>点击：{dede:field.click/}</span>
        </div>
        <!-- 文章正文 -->
        <div class="article-body">
            {dede:field.body/}
        </div>
        <!-- 上下篇 -->
        <div class="prenext">
            <p>上一篇：{dede:prenext get='pre'/}</p>
            <p>下一篇：{dede:prenext get='next'/}</p>
        </div>
    </div>
    <!-- 右侧边栏 -->
    <div class="sidebar">
        {dede:include filename="sidebar.htm"/}
    </div>
</div>
<!-- 页脚 -->
{dede:include filename="footer.htm"/}
</body>
</html>

填充Dede标签：
- 上面的代码中，{dede:field.title/}, {dede:field.body/} 等就是Dede的模板标签。
- 页标签：
  - {dede:field.title/}: 文章标题
  - {dede:field.pubdate function="MyDate('Y-m-d H:i',@me)"/}: 发布时间，function用于格式化日期。
  - {dede:field.source/}: 文章来源
  - {dede:field.writer/}: 作者
  - {dede:field.click/}: 点击量
  - {dede:field.body/}: 文章正文，这是最重要的标签,它会输出你在后台编辑器里输入的所有内容。
  - {dede:prenext get='pre'/}: 上一篇链接
  - {dede:prenext get='next'/}: 下一篇链接
  - {dede:include filename="header.htm"/}: 引入公共头部文件
引入并修改CSS：
- 在你的网站根目录创建一个 /css/ 文件夹，将你从目标网站提取的CSS代码保存为 style.css 文件。
- 在 article_news.htm 的 <head> 部分引入它：<link rel="stylesheet" href="/css/style.css">。
- 重要： Dede的 {dede:field.body/} 标签输出的是完整的HTML代码（<p>, <img>），你提取的CSS可能只针对目标网站的特定类名，你需要确保你的正文内容中的HTML标签（如<p>）拥有正确的类名，或者你的CSS选择器能直接作用于这些标签，目标网站正文的段落是 <p class="article-paragraph">，那么你需要在后台编辑文章时手动添加这个类名，或者在CSS中直接写 div.article-body p { ... }。

制作公共模板 (header, footer, sidebar)

这些页面在多个栏目中都会用到,所以单独制作。

制作 header.htm (头部):

分析目标网站的顶部结构，包含Logo、主导航菜单等。

使用Dede的 {dede:channel} 标签来生成主导航。

<!-- header.htm -->
<header>
<div class="logo">
    <a href="{dede:global.cfg_homeurl/}"><img src="/images/logo.png" alt="{dede:global.cfg_webname/}"></a>
</div>
<nav>
    <ul>
        {dede:channel type='top' row='8'}
        <li><a href="[field:typelink/]">[field:typename/]</a></li>
        {/dede:channel}
    </ul>
</nav>
</header>

制作 footer.htm (页脚):
- 分析目标网站的底部结构，包含版权信息、备案号、友情链接等。
- 使用 {dede:flink} 标签生成友情链接。

制作 sidebar.htm (侧边栏):

分析目标网站的侧边栏，通常包含“热门文章”、“最新文章”、“推荐文章”等。

使用Dede的 {dede:arclist} 标签来调用这些内容。

<!-- sidebar.htm -->
<div class="hot-articles">
<h3>热门文章</h3>
<ul>
    {dede:arclist titlelen='30' row='10' orderby='click'}
    <li><a href="[field:arcurl/]">[field:title/]</a></li>
    {/dede:arclist}
</ul>
</div>

应用和调试

指定栏目模板：
- 回到Dede后台，进入「[栏目管理]」。
- 点击你制作的那个栏目（如“公司新闻”）的“[更改]”按钮。
- 在“栏目内容页模板”选项中，选择你刚刚制作的 article_news.htm。
- 保存。
刷新并检查：
- 前台访问该栏目下的一篇文章,查看效果。
- 使用浏览器开发者工具，对比你的页面和目标网站的HTML结构、CSS样式是否一致。
- 常见问题：
  - 样式错乱： 检查CSS路径是否正确,类名是否匹配。
  - 标签不显示： 检查标签语法是否正确，如 {dede:field.title/} 是否写成了 {dede:field.title}。
  - 图片不显示： 检查图片路径是否正确，Dede默认会转换图片路径，确保你的图片上传到 /uploads/ 目录下。
  - 内容格式乱： 检查 {dede:field.body/} 输出的内容,以及你后台编辑器中使用的HTML标签和样式是否与CSS匹配。

总结与技巧

从简到繁： 先仿制最简单的栏目,再逐步攻克复杂的布局。
善用{dede:include}： 公共部分一定要用include标签,方便后期统一修改。
标签活用： {dede:arclist} 和 {dede:channel} 非常强大，学会它们的参数（如 row, titlelen, orderby）可以灵活调用各种数据。
SEO优化： 仿站时，别忘了在模板中加入 description 和 keywords 标签，通常用 {dede:field.description function='html2text(@me)'/} 和 {dede:tag row='5' get='all'/} 等标签实现。
响应式： 如果目标网站是响应式的，你需要额外学习CSS媒体查询（@media）来适配手机端,Dede通常需要制作手机端模板或使用响应式框架。

仿站是一个熟能生巧的过程，多练几次，你就能熟练掌握Dede仿站的精髓了,祝你成功！