Jekyll Menus 使用教程

Jekyll Menus 使用教程

jekyll-menusA menus (site navigation) plugin for your Jekyll website that also works with https://forestry.io (Jekyll CMS)项目地址:https://gitcode.com/gh_mirrors/je/jekyll-menus

项目介绍

Jekyll Menus 是一个为 Jekyll 网站设计的菜单（站点导航）插件，它不仅适用于 Jekyll 网站，还兼容 Forestry.io（Jekyll CMS）。该插件允许用户通过前端内容或通过定义自定义菜单项来创建菜单，从而实现无限嵌套的菜单结构。

项目快速启动

安装

首先，确保你已经安装了 Ruby 和 Bundler。然后，在你的 Gemfile 中添加以下内容：

group :jekyll_plugins do
  gem "jekyll-menus"
end

接着，在终端中运行：

bundle install

配置

在 _config.yml 文件中添加以下配置：

plugins:
  - jekyll-menus

创建菜单

通过前端内容创建菜单，只需在页面或帖子的前端内容中添加 menus 变量：

---
title: Homepage
menus: header
---

渲染菜单

在模板中渲染菜单，可以使用以下代码：

<ul>
  {% for item in site.menus.header %}
    <li class="menu-item-{{ forloop.index }}">
      <a href="{{ item.url }}" title="Go to {{ item.title }}">{{ item.title }}</a>
    </li>
  {% endfor %}
</ul>

应用案例和最佳实践

应用案例

• 多级导航菜单：使用 Jekyll Menus 可以轻松创建包含多级子菜单的导航结构，适用于复杂的网站架构。
• 动态菜单生成：通过定义自定义菜单项，可以根据项目结构动态生成菜单，减少手动维护的工作量。

最佳实践

• 保持菜单结构清晰：在定义菜单时，确保菜单结构清晰且易于理解，避免过于复杂的嵌套结构。
• 使用前端内容管理菜单：通过前端内容管理菜单，可以更灵活地控制菜单项的显示和隐藏。

典型生态项目

• Forestry.io：一个 Jekyll CMS，与 Jekyll Menus 兼容，提供可视化的内容管理界面。
• GitHub Pages：Jekyll 的官方托管平台，支持使用 Jekyll Menus 创建的网站。

通过以上步骤，你可以快速启动并使用 Jekyll Menus 插件，为你的 Jekyll 网站创建强大的导航菜单。

jekyll-menusA menus (site navigation) plugin for your Jekyll website that also works with https://forestry.io (Jekyll CMS)项目地址:https://gitcode.com/gh_mirrors/je/jekyll-menus