搜索
织梦建站

织梦前台首页重新布局

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

核心概念：理解织梦模板系统

在动手之前，你必须先理解织梦的模板机制,否则会寸步难行。

  1. 模板文件的位置：

    • 织梦的模板文件存放在 /templets/ 目录下。
    • 默认模板文件夹是 /templets/default/。强烈建议你不要直接修改默认模板，而是复制一份，重命名（mytheme），然后在后台“系统” -> “系统基本参数” -> “核心设置” 中，将“默认模板目录”修改为你的新目录名（如 mytheme）。

  2. 首页模板文件：

    • 首页的模板文件通常是 index.htm，它位于你的主题目录下（如 /templets/mytheme/index.htm）。

  3. 模板标签：

    • 织梦使用一套专属的标签来调用数据库内容，这些标签以 {dede:} 开头和结尾。
    • 最常用的首页标签：
      • {dede:arclist}: 调用文章列表，用于调用指定栏目、指定数量的文章。
      • {dede:channel}: 调用栏目列表,用于显示网站导航栏。
      • {dede:flink}: 调用友情链接。
      • {dede:global}: 调用全局变量，如网站标题、公司名称等。
      • {dede:myad}: 调用广告位。

首页布局的详细步骤

第1步：规划新布局（设计稿）

在修改任何代码之前，先用纸笔画出或用设计工具（如Figma, Sketch, Photoshop）设计出你想要的首页布局。

一个典型的企业网站首页布局可能包括：

  1. 顶部 (Header)
    • Logo
    • 主导航菜单
    • 搜索框
    • 联系方式/登录按钮
  2. 幻灯片/轮播图

    展示重要新闻、产品或活动。

  3. 产品/服务展示区

    以网格或列表形式展示核心产品或服务。

  4. 新闻资讯区

    分为“公司新闻”和“行业动态”等栏目,显示最新文章列表。

  5. 关于我们/公司简介

    一段简短的文字介绍,配以图片。

  6. 数据展示/优势特色

    用数字或图标展示公司成就（如：10年经验，1000+客户）。

  7. 底部 (Footer)

    版权信息、备案号、友情链接、详细地址等。

第2步：准备素材

准备好你的新布局所需的所有素材：

  • Logo (.png, .jpg)
  • 背景图
  • 幻灯片图片
  • 产品图片
  • 字体文件（如果需要特殊字体）

第3步：修改 index.htm 文件

这是最核心的一步,我们将用HTML和织梦标签来构建你的新布局。

构建整体框架

打开 /templets/yourtheme/index.htm，文件最外层通常是一个 <div>,我们用它来包裹整个页面内容。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">{dede:global.cfg_webname/}</title>
    <!-- 引入CSS文件，我们新建一个 style.css -->
    <link rel="stylesheet" href="/templets/yourtheme/css/style.css">
</head>
<body>
    <!-- 顶部区域 -->
    <header class="main-header">
        <!-- Logo和导航将放在这里 -->
    </header>
    <!-- 幻灯片区域 -->
    <section class="slider">
        <!-- 幻灯片代码将放在这里 -->
    </section>
    <!-- 产品展示区 -->
    <section class="products">
        <div class="container">
            <h2>我们的产品</h2>
            <!-- 产品列表调用代码 -->
        </div>
    </section>
    <!-- 新闻资讯区 -->
    <section class="news">
        <div class="container">
            <!-- 新闻列表调用代码 -->
        </div>
    </section>
    <!-- 关于我们 -->
    <section class="about-us">
        <!-- 关于我们内容 -->
    </section>
    <!-- 底部区域 -->
    <footer class="main-footer">
        <!-- 版权信息和友情链接 -->
    </footer>
    <!-- 引入JavaScript文件 -->
    <script src="/templets/yourtheme/js/slider.js"></script>
</body>
</html>

使用织梦标签填充内容

我们用织梦标签替换掉上面的注释部分。

  • 调用网站Logo和名称:

    <a href="/">{dede:global.cfg_webname/}</a>
<!-- 如果有logo图片，可以这样 -->
<a href="/"><img src="{dede:global.cfg_logo/}" alt="{dede:global.cfg_webname/}" /></a>

    注意：cfg_logo 需要在后台“系统基本参数” -> “核心设置”中上传并配置。

  • 调用主导航栏目:

    <nav>
    <ul>
        {dede:channel type='top' row='8'}
        <li><a href="[field:typelink/]">[field:typename/]</a></li>
        {/dede:channel}
    </ul>
</nav>
    • type='top' 表示只调用顶级栏目。
    • row='8' 表示调用8个栏目。
    • [field:typelink/] 是栏目链接，[field:typename/] 是栏目名称。

  • 调用文章列表: 这是{dede:arclist}标签最强大的应用，假设我们要调用“产品中心”栏目的前6个产品。

    <section class="products">
    <div class="container">
        <h2>产品中心</h2>
        <div class="product-list">
            {dede:arclist typeid='2' row='6' titlelen='30' imgwidth='220' imgheight='220'}
            <div class="product-item">
                <a href="[field:arcurl/]">
                    <img src="[field:litpic/]" alt="[field:title/]" />
                    <h3>[field:title/]</h3>
                    <p>[field:description function='cn_substr(@me, 100)'/]</p>
                </a>
            </div>
            {/dede:arclist}
        </div>
    </div>
</section>
    • typeid='2': 关键参数，指定调用哪个栏目下的文章，你需要在后台“栏目管理”中找到“产品中心”栏目的ID。
    • row='6': 显示6条。
    • titlelen='30': 标题长度限制为30个字符。
    • imgwidth 和 imgheight: 自动缩略图尺寸。
    • [field:litpic/]: 文章缩略图。
    • [field:arcurl/]: 文章链接。
    • [field:description function='cn_substr(@me, 100)'/]: 调用文章摘要，并用cn_substr函数截取前100个字符。

  • 调用友情链接:

    <div class="friend-links">
    {dede:flink type='text'/}
    <!-- type='text' 是文字链接，type='image' 是图片链接 -->
</div>

第4步：编写CSS样式 (style.css)

布局是骨架，CSS是血肉,它负责让页面变得美观。

在 /templets/yourtheme/css/ 目录下创建 style.css 文件。

/* style.css */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    font-family: 'Microsoft YaHei', sans-serif;
    line-height: 1.6;
    color: #333;
}
.container {
    width: 1200px;
    margin: 0 auto;
    padding: 20px;
}
/* 头部样式 */
.main-header {
    background: #fff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    padding: 15px 0;
}
.main-header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
/* 导航样式 */
.main-header nav ul {
    list-style: none;
    display: flex;
}
.main-header nav ul li {
    margin-left: 20px;
}
/* 产品列表样式 */
.product-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.product-item {
    width: 32%;
    margin-bottom: 20px;
    border: 1px solid #eee;
    padding: 10px;
    text-align: center;
}
.product-item img {
    max-width: 100%;
    height: auto;
}
/* 新闻列表样式 */
.news-list .news-item {
    padding: 15px 0;
    border-bottom: 1px dashed #ccc;
}
.news-list .news-item h3 {
    font-size: 18px;
    margin-bottom: 5px;
}
.news-list .news-item h3 a {
    color: #333;
    text-decoration: none;
}
.news-list .news-item h3 a:hover {
    color: #0066cc;
}
/* 底部样式 */
.main-footer {
    background: #333;
    color: #fff;
    text-align: center;
    padding: 20px 0;
    margin-top: 40px;
}

第5步：添加交互效果（如轮播图）

如果布局中有轮播图,你需要使用JavaScript。

  1. 准备HTML结构: 在<section class="slider">中添加轮播图的HTML。
  2. 编写CSS: 为轮播图写样式，包括图片容器、指示器等。
  3. 编写JavaScript: 在 /templets/yourtheme/js/ 目录下创建 slider.js，实现轮播逻辑（自动播放、点击切换等），你可以自己写，也可以使用成熟的库，如 Swiper.js 或 Bootstrap Carousel,它们更容易实现且效果更好。

使用Swiper.js的示例：

  1. 引入Swiper的CSS和JS (可以从官网下载或使用CDN)。
    <!-- 在 <head> 中 -->
<link rel="stylesheet" href="/templets/yourtheme/css/swiper-bundle.min.css">
<!-- 在 <body> 底部 -->
<script src="/templets/yourtheme/js/swiper-bundle.min.js"></script>
  2. 修改轮播图区域的HTML:
    <section class="swiper mySwiper">
  <div class="swiper-wrapper">
    <!-- 幻灯片1 -->
    <div class="swiper-slide">
        <img src="/templets/yourtheme/images/slide1.jpg" alt="幻灯片1">
    </div>
    <!-- 幻灯片2 -->
    <div class="swiper-slide">
        <img src="/templets/yourtheme/images/slide2.jpg" alt="幻灯片2">
    </div>
    <!-- ...更多幻灯片 -->
  </div>
  <div class="swiper-pagination"></div>
  <div class="swiper-button-next"></div>
  <div class="swiper-button-prev"></div>
</section>
  3. 初始化Swiper: 在你的自定义JS文件（如 main.js）或 <script> 标签中添加：
    var swiper = new Swiper(".mySwiper", {
  loop: true,
  autoplay: {
    delay: 2500,
    disableOnInteraction: false,
  },
  pagination: {
    el: ".swiper-pagination",
    clickable: true,
  },
  navigation: {
    nextEl: ".swiper-button-next",
    prevEl: ".swiper-button-prev",
  },
});

高级技巧与注意事项

  1. 响应式布局：

    • 现在的网站必须适配手机，使用 CSS媒体查询 是最简单的方法。
    • 在你的 style.css 中添加：
      @media (max-width: 768px) {
    .container {
        width: 95%;
    }
    .product-item {
        width: 48%; /* 在手机上变成两列 */
    }
    .main-header .container {
        flex-direction: column;
    }
}

  2. 使用“首页调用”：

    • 对于“关于我们”这种固定文本内容，最简单的方法是：
      • 在后台“核心” -> “频道模型” -> “添加新频道模型”中创建一个名为“首页内容”的单页模型。
      • 在后台“内容” -> “首页内容”中添加你的内容。
      • 在 index.htm 中用 {dede:field name='body'/} 标签直接调用。

  3. 调试技巧：

    • 如果标签调用不出来，先检查 typeid、row 等参数是否正确。
    • 使用浏览器的开发者工具（按F12）检查HTML结构,看看标签是否被正确解析。
    • 清除浏览器缓存，或者使用无痕模式访问,确保看到的是最新修改。

  4. 安全第一：

    • 修改前，务必备份原始的 index.htm 文件和整个主题目录。
    • 如果不熟悉代码，建议先在本地环境（如DedeAMPZ、phpStudy）测试,确认无误后再上传到服务器。

通过以上步骤，你就可以对织梦前台首页进行任意复杂的重新布局了，核心思想是：规划先行，然后分模块用HTML搭框架，再用织梦标签填充数据，最后用CSS美化，用JS增加交互。

-- 展开阅读全文 --
头像
c语言必背18个经典程序
« 上一篇 今天
dede自定义表单如何限制提交？
下一篇 » 今天

相关文章

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

目录[+]