搜索
织梦建站

织梦导航bootstrap

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

分离与改造

在织梦CMS中,导航菜单通常由 {dede:channel} 或 {dede:channelartlist} 等标签生成，它们默认会输出带有特定CSS类（如 a, li）的HTML代码，而Bootstrap有自己的导航组件结构和CSS类（如 nav, nav-item, nav-link）。

织梦导航bootstrap
（图片来源网络，侵删）

我们的核心任务就是改造织梦模板，让它生成的HTML代码符合Bootstrap的结构，并为其添加Bootstrap的CSS类。

第一步：准备工作（引入Bootstrap）

在开始修改导航之前,请确保你的织梦模板已经正确引入了Bootstrap的CSS和JS文件，最简单的方式是在 <head> 标签内添加CDN链接。

打开你的模板文件,通常是 /templets/你的模板名/index.htm，在 <head> 部分添加以下代码：

<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- 可选：Bootstrap Icons -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css">

重要提示：为了更好的兼容性和性能，建议将JS文件放在页面底部，</body> 标签之前。

织梦导航bootstrap
（图片来源网络，侵删）
<!-- 在 </body> 标签之前 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

第二步：制作经典水平导航栏

这是最常见的导航栏样式,通常包含网站Logo、主导航菜单和一个搜索框或用户登录按钮。

修改织梦模板代码

找到你模板中生成主导航菜单的部分,它通常是这样的：

织梦默认代码可能类似：
<div id="navMenu">
    <ul class="nav">
        <li><a href='/'><span>首页</span></a></li>
        <li><a href='/a/about/'><span>关于我们</span></a></li>
        <!-- ... -->
    </ul>
</div>

我们需要将其改造为Bootstrap的 navbar 结构，以下是改造后的完整代码，你可以直接复制到你的模板中：

<!-- Bootstrap 导航栏开始 -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <!-- 1. 品牌/Logo -->
  <a class="navbar-brand" href="{dede:global.cfg_basehost/}">
    {dede:global.cfg_webname/}
  </a>
  <!-- 2. 移动端菜单的折叠按钮 -->
  <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#mainNavbar" aria-controls="mainNavbar" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <!-- 3. 导航菜单链接容器 -->
  <div class="collapse navbar-collapse" id="mainNavbar">
    <!-- 织梦导航标签开始 -->
    <ul class="navbar-nav me-auto mb-2 mb-lg-0">
      {dede:channel type='top' row='8' currentstyle="
        <li class='nav-item'>
          <a class='nav-link active' href='~typelink~'>~typename~</a>
        </li>
      "}
      <li class="nav-item">
        <a class="nav-link" href="[field:typelink/]">[field:typename/]</a>
      </li>
      {/dede:channel}
      <!-- 可添加一个额外的链接 -->
      <li class="nav-item">
        <a class="nav-link" href="{dede:global.cfg_cmsurl/}/plus/list.php?tid=1">联系我们</a>
      </li>
    </ul>
    <!-- 织梦导航标签结束 -->
    <!-- 4. 右侧的其他元素（搜索框等） -->
    <form class="d-flex" role="search" action="{dede:global.cfg_cmsurl/}/plus/search.php" method="get">
      <input class="form-control me-2" type="search" name="q" placeholder="搜索..." aria-label="Search">
      <button class="btn btn-outline-success" type="submit">搜索</button>
    </form>
  </div>
</nav>
<!-- Bootstrap 导航栏结束 -->

代码解析

  • <nav class="navbar ...">: 定义了一个导航栏容器。
    • navbar-expand-lg: 在大屏幕上（lg及以上）展开菜单，在小屏幕上折叠。
    • navbar-dark bg-dark: 设置深色背景和浅色文字，你可以换成 navbar-light bg-light 来获得浅色主题。
  • <a class="navbar-brand">: 用于放置Logo或网站名称。
  • <button class="navbar-toggler">: 移动端上显示的“汉堡”菜单按钮，用于触发菜单的展开和折叠。
    • data-bs-target="#mainNavbar": 指定了要控制的菜单容器（id 为 mainNavbar 的 div）。
  • <div class="collapse navbar-collapse" id="mainNavbar">: 这是导航链接的容器，在小屏幕上，它默认是折叠的，当点击 navbar-toggler 按钮时，这个容器会展开或折叠。
  • <ul class="navbar-nav me-auto ...">: 这是导航链接的列表。
    • navbar-nav: 告诉Bootstrap这是一个导航菜单列表。
    • me-auto: 将菜单项向左对齐，为右侧的搜索框留出空间。
  • {dede:channel ...}: 这是织梦的核心标签。
    • type='top': 只调用顶级栏目。
    • currentstyle='...': 最关键的部分！ 它定义了当栏目处于当前页面时，链接应该显示的样式，我们在这里为当前栏目链接添加了 active 类，并确保它也使用了 nav-link 类。
    • <li class="nav-item">: 每个栏目列表项都必须有这个类。
    • <a class="nav-link" ...>: 每个栏目链接都必须有这个类。
  • <form class="d-flex">: 一个用于搜索的表单，d-flex 类使其成为弹性布局，可以很好地适应导航栏。

第三步：制作带下拉菜单的导航栏

如果你的栏目有子栏目,就需要使用Bootstrap的下拉菜单功能。

织梦导航bootstrap
（图片来源网络，侵删）

修改织梦模板代码

我们需要使用 {dede:channelartlist} 或嵌套的 {dede:channel} 来生成带有子栏目的结构，这里推荐使用 {dede:channelartlist}，因为它能更好地处理当前栏目的样式。

<!-- Bootstrap 下拉菜单导航栏开始 -->
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
  <a class="navbar-brand" href="{dede:global.cfg_basehost/}">{dede:global.cfg_webname/}</a>
  <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#dropdownNavbar">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="dropdownNavbar">
    <ul class="navbar-nav me-auto">
      {dede:channelartlist typeid='top' row='8'}
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="{dede:field name='typeurl'/}" id="navbarDropdown{dede:field name='id'/}" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            {dede:field name='typename'/}
          </a>
          <ul class="dropdown-menu" aria-labelledby="navbarDropdown{dede:field name='id'/}">
            {dede:channel type='son' noself='yes'}
              <li><a class="dropdown-item" href="[field:typelink/]">[field:typename/]</a></li>
            {/dede:channel}
          </ul>
        </li>
      {/dede:channelartlist}
    </ul>
  </div>
</nav>
<!-- Bootstrap 下拉菜单导航栏结束 -->

代码解析

  • <li class="nav-item dropdown">: 这是下拉菜单的容器列表项，必须添加 dropdown 类。
  • <a class="nav-link dropdown-toggle" ...>: 这是触发下拉菜单的链接。
    • dropdown-toggle: 告诉Bootstrap这是一个可以下拉的菜单触发器。
    • data-bs-toggle="dropdown": 必需的属性，用于触发下拉功能。
    • aria-expanded="false" 和 role="button": 是无障碍访问的最佳实践。
    • id="navbarDropdown...": 为每个下拉菜单提供一个唯一的ID，供下拉菜单列表使用。
  • <ul class="dropdown-menu" ...>: 这是下拉出来的菜单列表。
    • dropdown-menu: 定义了下拉菜单的样式。
    • aria-labelledby="...": 将下拉菜单与其触发链接关联起来。
  • {dede:channelartlist}: 外层循环，用于获取顶级栏目。
  • {dede:channel type='son' noself='yes'}: 内层循环，在 {dede:channelartlist} 内部，用于获取当前顶级栏目的所有子栏目。
    • type='son': 只调用子栏目。
    • noself='yes': 不调用栏目本身。

第四步：制作面包屑导航

面包屑导航用于显示用户在网站中的当前位置,对SEO和用户体验都很有帮助。

修改织梦模板代码

页（article_article.htm）或列表页（list_category.htm）的合适位置（通常是标题下方）添加以下代码：

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="{dede:global.cfg_basehost/}">首页</a></li>
    {dede:field name='position' runphp='yes'}
      $tcstr = @me;
      $tcstr = preg_replace('/<a.*?>(.*?)<\/a>/i', '$1', $tcstr);
      $tcstr = str_replace(' >', ' / ', $tcstr);
      @me = $tcstr;
    {/dede:field}
  </ol>
</nav>

代码解析

  • <nav aria-label="breadcrumb">: 使用 <nav> 标签并明确其作用是面包屑，符合无障碍标准。
  • <ol class="breadcrumb">: Bootstrap的面包屑需要一个有序列表（<ol>），并添加 breadcrumb 类。
  • <li class="breadcrumb-item">: 每个面包屑项都是一个列表项，需要 breadcrumb-item 类。
  • {dede:field name='position'}: 这是织梦自带的字段，用于获取当前位置的HTML代码，<a href='/'>首页</a> > <a href='/a/news/'>新闻</a> > 新闻详情。
  • runphp='yes': 允许我们在PHP中对这个字段进行处理。
  • preg_replace 和 str_replace: 这两行PHP代码的作用是：
    1. 移除所有 <a> 标签，只保留文字内容（如“首页”、“新闻”）。
    2. 将 > 替换为 ，使分隔符更符合面包屑的常见样式。

总结与常见问题

  1. 类名冲突：确保织梦默认的CSS文件（如 style/dedecms.css）没有覆盖掉Bootstrap的样式，如果遇到样式问题，可以检查浏览器的开发者工具，看看是哪个CSS规则在生效。
  2. 当前栏目样式不生效：这几乎总是因为 currentstyle 属性没有正确设置，请仔细检查 currentstyle 中的HTML结构是否与普通栏目的结构一致，并且包含了 active 类。
  3. 下拉菜单不工作：确保已经引入了Bootstrap的 JS 文件，data-bs-toggle="dropdown" 属性正确无误。
  4. 响应式问题：如果导航栏在移动端显示异常，请检查 navbar-toggler 的 data-bs-target 的 id 是否与 navbar-collapse 的 id 完全一致。

通过以上步骤,你就可以在织梦CMS中灵活地使用Bootstrap创建出美观、功能强大的导航菜单了。

-- 展开阅读全文 --
头像
dede建站如何实现多个首页模板切换？
« 上一篇 01-02
c语言 sublimetext
下一篇 » 01-02

相关文章

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

目录[+]