html - 下拉菜单和链接到鹈鹕 Bootstrap 主题中的页面

标签 html css twitter-bootstrap pelican

我正在使用 pelican-bootstrap3 主题,但我有一个我自己无法解决的小问题。

我有一些页面,我想做的是为另一个页面的一些页面创建一个下拉菜单。

假设我有这种情况:

├── content
│   ├── pages
│   │   ├── about.md
│   │   ├── courses_list.md
│   │   └── first-corse.md
│   │   └── second-corse.md

我想让主导航栏显示 course-listfist-coursesecond-course 作为子菜单的下拉列表。

我正在尝试(但没有成功)编辑的 html 代码是 base.html:

        {% if DISPLAY_PAGES_ON_MENU %}
            {% for p in pages | sort(attribute=PAGES_SORT_ATTRIBUTE) %}
                {% if p.url %}
                 <li{% if p == page %} class="active"{% endif %}><a href="{{ SITEURL }}/{{ p.url }}">
                     {{ p.menulabel|default(p.title) }}
                  </a></li>
                {% endif %}
              {% endfor %}
        {% endif %}

有人遇到过类似的问题吗?

感谢大家!

最佳答案

鹈鹕作者 does not prefer核心功能中的分层菜单(作为反模式)。相反,他们欢迎插件或主题模板在必要时处理此功能。 因此,(仅)您可以自行部署该功能。

github 上有(也许更多)主题来处理分层菜单,例如 pelican-chameleon主题,使用 MENUITEMS 定义,例如取自变色龙自述文件的示例。

# works with chameleon theme
MENUITEMS = [
    ('Home', '/'),
    ('Archives', [
        ('Tags', '/tags.html'),
        ('Categories', '/categories.html'),
        ('Chronological', '/archives.html'),
        ]),
    ('Social', [
        ('Email', 'mailto: xx@yy'),
        ('Github', 'http://url-to-github-page'),
        ('Facebook', 'http://url-to-facebook-page'),
        ]),
    ]

关于html - 下拉菜单和链接到鹈鹕 Bootstrap 主题中的页面,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43174096/

相关文章:

html - 使用 Css 响应式媒体查询,我的子 div 不接受我输入的边距。

html - 图像上的 CSS 通知样式徽章

javascript - 按下按钮时更改div的背景颜色

css - 使用 button_to Bootstrap 按钮组样式

jquery - Bootstrap Carousel 不会工作。也许我错过了什么?

html - at 符号 (@) 是有效的 HTML/XML 标记字符吗?

jquery - 我的 header CSS 和 jQuery 有问题

html - 设置响应式 HTML 背景

html - Bootstrap 3 : add icon outside of input

html - 如何更改超大屏幕的背景颜色?