开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

如何为Hugo创建工作面包屑？

为Hugo创建工作面包屑（Breadcrumb Trail）是一种常见的网页导航辅助手段，可以帮助用户理解他们在网站中的位置。以下是实现Hugo工作面包屑的步骤和相关概念：

基础概念

面包屑（Breadcrumb Trail）是一种导航辅助工具，显示用户在网站层次结构中的当前位置。它通常以“首页 > 分类 > 子分类 > 当前页面”的形式展示。

优势

用户友好：帮助用户快速了解他们在网站中的位置。
易于导航：用户可以通过点击面包屑中的任意部分快速跳转到上一级或特定页面。
SEO优化：有助于搜索引擎理解网站的层次结构。

类型

基于URL路径：根据URL路径生成面包屑。
基于内容层次：根据内容的层次结构生成面包屑。
自定义：根据具体需求自定义面包屑的生成逻辑。

应用场景

适用于大多数网站，特别是那些具有复杂层次结构的网站，如电子商务网站、博客、新闻网站等。

实现步骤

以下是为Hugo创建工作面包屑的详细步骤：

安装Hugo：确保你已经安装了Hugo并创建了一个新的Hugo项目。
创建布局文件：在layouts/partials目录下创建一个名为breadcrumb.html的文件。
编写面包屑模板：在breadcrumb.html文件中编写面包屑的HTML结构和逻辑。

{{ if .Site.Menus.main }}
<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    {{ range .Site.Menus.main }}
    <li class="breadcrumb-item"><a href="{{ .URL }}">{{ .Name }}</a></li>
    {{ end }}
    <li class="breadcrumb-item active" aria-current="page">{{ .Title }}</li>
  </ol>
</nav>
{{ end }}

在主布局文件中引入面包屑：在layouts/_default/baseof.html文件中引入breadcrumb.html。

<!DOCTYPE html>
<html lang="en">
<head>
  <!-- 头部信息 -->
</head>
<body>
  {{ partial "breadcrumb.html" . }}
  <main>
    {{ block "main" . }}{{ end }}
  </main>
  <!-- 其他内容 -->
</body>
</html>

配置菜单：在config.toml文件中配置菜单项。

[menu]
  [[menu.main]]
    name = "首页"
    url = "/"
    weight = 1
  [[menu.main]]
    name = "分类"
    url = "/categories/"
    weight = 2
  [[menu.main]]
    name = "子分类"
    url = "/categories/subcategory/"
    weight = 3

常见问题及解决方法

面包屑不显示：
- 确保breadcrumb.html文件存在且路径正确。
- 检查config.toml中的菜单配置是否正确。
- 确保主布局文件中正确引入了breadcrumb.html。

面包屑显示不正确：
- 检查菜单项的URL和Name是否正确。
- 确保页面的Title正确设置。
面包屑样式问题：
- 使用CSS调整面包屑的样式，确保其符合你的设计要求。

参考链接

通过以上步骤，你可以为Hugo创建一个工作面包屑，提升用户体验和网站的可导航性。

相关搜索:如何为每个唯一值创建工作簿？如何为一组操作/工作流创建DAG表示？如何为该表的单元格创建工作标识符？如何为oslog创建的日志添加不同的日志记录器(如文件和Crashlytics等输出目标)？如何为一个Excel文件中的每个工作表创建多个DataFrames？如何为在MS Teams上作为应用程序运行的Excel工作簿创建“宏”如何让PHPUnit_Extensions_Database_DB_DefaultDatabaseConnection在PhpUnit 6上工作？如何为DBUnit 3类创建别名？我正在努力添加多个变量(如点/点图形)。我已经创建了一个可以工作，但不能添加更多如何为实体A设置struct标签在GORM中可能有B，并使创建和预加载自动工作 js调用后台函数

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

如何在Ubuntu上安装和使用Hugo

安装Hugo主题主要的Hugo包不包括任何主题。Hugo主题定义了如何为用户呈现网站内容。获取Hugo主题的最简单方法是克隆Hugo主题git存储库，它提供了许多预配置的主题。.../themes 如您所见，我们当前目录中的themes目录实际上只是指向我们克隆到主目录的主题存储库的链接。.../" languageCode = "en-us" title = "My New Hugo Site" 如文件后缀所示，此文件使用TOML语言编写。...这样，当我们生成新页面时，页面模板将在我们的编辑器中打开，准备工作。我们还应该设置默认主题。我们将使用一个名为“nofancy”的主题开始。...您可能需要调整一些内容才能使每个新主题正常工作。如果您希望使用Hugo像传统Web服务器一样在端口80上提供内容，则必须在命令行中添加--port选项。

7K1 0

Hugo博客搭建教程以及配置调优

.] # 如果你想要一行解决： iex "& {$(irm get.scoop.sh)} -RunAsAdmin" 安装Hugo框架： scoop install hugo 然后选择一个你喜欢的文件夹创建你的站点.../hugo-PaperMod.git themes/PaperMod 站点根目录会有一个 hugo.toml。...将文件重命名为 hugo.yaml。...你需要自己配置，或者直接引入Giscus等评论系统 comments: false # 是否显示代码复制按钮 ShowCodeCopyButtons: true # 是否显示面包屑导航...--- title: 标签 layout: tags --- 创建 content\archives.md 写入： --- title: 归档 layout: archives --- 创建 content

1491 0

利用 Github Pages 和 Hugo 快速搭建免费的个人网站

Hugo 确认。 hugo version 3.1.2 新建 Hugo 网站本步骤是在本地创建个人站点工程（即：hugo 网站源文件）。新建 Hugo 站点。...3.1.6 创建文章日常站点文件，都是采用 markdown 文件进行维护。例如，创建一篇新文件。切换到站点 hugo-site-demo 目录下。...执行命令 hugo new ，创建一个 about 页面。...新建仓库，如：hugo-site-demo。注：hugo-site-demo 为示例仓库，故设置为公开仓库，实践中建议设置为私有仓库。...3.2.3 自动化部署利用 Github Actions实现将站点源文件（如：hugo-site-demo）自动化部署到 GitHub Pages （如：xcbeyond.github.io ）上。

6K4 3

自动构建 Hugo 博客部署至腾讯云对象存储 COS 并刷新 CDN

: true # 启用 hugo extend - name: Build run: hugo --minify 整个工作流主要包括三个部分：拉取代码仓库...准备 Hugo 环境构建静态页面这样，即完成了触发工作流时自动构建静态页面的配置，当工作流被触发时，便会生成静态文件放置在 publish 目录下。...创建成功后，到基础配置 - 静态网站中开启静态网站托管。...secrets.Bucket }} # 存储桶名称，在存储桶基本信息中获取 REGION: ${{ secrets.Region }} # 存储桶地域，在存储桶基本信息中获取，如...创建完脚本后，需要在工作流中调用，配置如下： - name: Flush CDN env: SECRET_ID: ${{ secrets.SecretId }} # 传入鉴权信息

2342 0

Hugo + GitHub Action，搭建你的博客自动发布系统

其他组件源仓库，如 umami 网站数据统计及 Cusdis 网站评论系统等。下文会对搭建、本地测试、自动化部署维护等过程进行详细讲解，希望对大家所有帮助。...brew install hugo 完成后，使用以下命令进行验证： hugo version 创建 Hugo 网站通过上述命令安装 hugo 程序后，就可以通过 hugo new site 命令进行网站创建...hugo new site blog-test 配置主题当通过上文命令创建我们的站点后，需要进行主题配置，Hugo 社区有了很丰富的主题，可以通过官网 Themes 菜单选择自己喜欢的风格，查看预览效果...GitHub Pages 发布博客完成上述准备工作后，我们现在已经可以通过自定义域名来访问我们的 GitHub Pages 页面了，目前因为项目仓库是空的，访问后会报 404 页面。...GitHub Action 是一个持续集成和持续交付(CI/CD) 平台，可用于自动执行构建、测试和部署管道，目前已经有很多开发好的工作流，可以通过简单的配置即可直接使用。

1.7K1 0

加入Istio官方翻译组织的历程记录

Github账号作为全球知名的 Git 代码仓库管理与共享平台，相信您早已注册有账号，如没有账号也没有关系，现在您就可以通过 Github 在线注册快速获取，开启您的“新世界”大门。...登记个人信息为了让大家相互彼此了解及翻译过程中的合作，需要你在 Google Docs（点击加入）上面填写些个人信息，如Github账户名称，邮箱地址，姓名等基础信息。...一般情况之下，是建议每翻译一篇文章都独立创建个分支开展，但如果调整内容比较少的话，可以考虑归并到一起，减轻Reviewer的工作量。...，要逐行逐句进行理解和提炼，非常考验您的耐心，哈在完成翻译工作后，建议启用本地的 Hugo 服务预览验证下，确保排版，图片，标点符号等显示都没有问题。...可能在其他评审后需要您进行修改（按评审建议调整对应内容，重新提交即可），如没有问题一般都是直接被合并的。

760 0

Discuz后台常用函数详解

()创建提交按钮 showhiddenfields()创建隐藏表单域 showsubmenu()二级导航栏显示 shownav()面包屑导航栏显示及二级导航栏标题 ---- showsetting...无返回值、无参数用于接上showformheader()函数进行收尾工作 ---- showtableheader()创建表格头返回值：无参数： $title - 如果输入title则显示标题...用于接上showformheader()函数进行收尾工作 ---- showtablerow()创建列表式页面的行返回值：有参数： $trstyle - 此行 tr 标签的格式定义，如 class...此函数多用于循环中，用来逐行创建一个有规律的数据列表如：论坛版块列表等使用方法举例 ....返回值：无参数： $header - 导航起点 $menu - 子导航标题 $nav - 面包屑导航第三层

3.7K5 1

Windows环境下搭建hugo博客部署到GitHub上

在此电脑上的增加一行hugo.exe的路径，如： ? 电脑上最好安装个git，是比较方便的。...我先在E盘根目录下创建个博客的文件夹，如:myblog,然后启动创建的命令： hugo new site myblog ? 最后检查下hugo version显示表示创建成功了，就这么简单。...更换主题 hugo主题官网：https://www.gohugo.org/theme/ 随便找个主题来更换默认的主题，如：https://themes.gohugo.io/hugo-theme-m10c...实际创建一篇文章创建第一篇文章，放到 post 目录，方便之后生成聚合页面。 hugo new post/first.md ? 然后在/context/post目录下就有first.md了 ?...首先在GitHub上创建一个空的仓库。注意：仓库名必须跟自己的用户名一样用户名.github.io，如： ?

1.3K3 0

Hugo部署教程

这些静态网站可以托管在任何提供静态文件托管的服务器上，如 GitHub Pages、Netlify、Vercel 等。hugo是一个开源的博客程序项目，github上有73K的star。...简便易用：Hugo 使用简单的命令行工具，并且有丰富的文档和社区资源，帮助新手快速上手灵活的模板系统：Hugo 提供强大的模板引擎，支持多种模板语言（如 Go 模板），使得创建复杂的布局和设计变得容易...多语言支持：Hugo 支持多语言网站的生成，方便管理和发布多语言内容。内容管理：Hugo 通过使用 Markdown 文件管理内容，使得内容创建和维护变得简单直观。...执行命令hugo new site test test可以改成你自己期望的目录名字。屏幕输出以下内容，则站点创建成功 Congratulations! ...执行命令 hugo new content content/posts/test.md 这样在content目录下创建一个posts目录，下面会生成一个test.md的文件。

4240 0

一起来刷 Sentry For Go 官方文档之 Enriching Events

面包屑 Sentry 使用面包屑创建事件发生之前的事件线索。这些事件与传统日志非常相似，但是可以记录更丰富的结构化数据。此页面概述了手动面包屑记录和自定义。...当您调用 init() 时，将创建一个 hub，并在其上创建一个 client 和一个 blank scope。然后，该中心与当前线程相关联，并将在内部持有一个作用域堆栈。...例如，Web 框架集成将在您的路由或控制器周围创建和销毁作用域。 Scope 和 Hub 如何工作在开始使用 SDK 时，将自动为您创建开箱即用的 Scope 和 Hub。...在内部调用全局函数(如 capture_event )时，Sentry 会发现当前 Hub 并要求它捕获一个事件。然后，hub 将在内部将事件与最顶层 Scope 的数据合并。...而另一方面，使用with-scope创建当前作用域的克隆，并将保持隔离，直到函数调用完成。

1.4K1 0

利用Hugo和Github Pages免费创建并永久托管网站

安装hugo 参考官方：http://gohugo.io/getting-started/installing/ 创建网站首先初始化你的网站，假如 mysite 是存放网站相关文件的目录： hugo...对，你没看错，直接执行 hugo 就可以了，它编译并生成网站所需的静态页面和文件，输出到当前目录的 public 目录下，当然你也可以改变输出目的地，如： hugo -d docs 你可以将...一般都会先新建第一种 Github Pages 主仓库作为网站主要托管，根据你的账号名创建仓库，如: imroc.github.io，提交静态文件后在仓库的 Settings 里面，翻到下面的 Github...： hugo -d docs 建议写个脚本，每次更新内容执行下脚本网站就可以更新，如(deploy.sh)： #!...进入hugo创建的网站目录并设置 git 的远程地址： cd mysite git remote add origin https://github.com/imroc/blog.git 将 Github

7.3K3 1

Hugo部署教程

这些静态网站可以托管在任何提供静态文件托管的服务器上，如 GitHub Pages、Netlify、Vercel 等。hugo是一个开源的博客程序项目，github上有73K的star。...简便易用：Hugo 使用简单的命令行工具，并且有丰富的文档和社区资源，帮助新手快速上手灵活的模板系统：Hugo 提供强大的模板引擎，支持多种模板语言（如 Go 模板），使得创建复杂的布局和设计变得容易...多语言支持：Hugo 支持多语言网站的生成，方便管理和发布多语言内容。内容管理：Hugo 通过使用 Markdown 文件管理内容，使得内容创建和维护变得简单直观。...执行命令hugo new site test test可以改成你自己期望的目录名字。屏幕输出以下内容，则站点创建成功 Congratulations! ...执行命令 hugo new content content/posts/test.md 这样在content目录下创建一个posts目录，下面会生成一个test.md的文件。

3741 0

基于 Hugo 搭建静态博客网站

支持WebAssembly 拓展功能边界：允许在Hugo中使用WebAssembly，这意味着可以将用其他语言（如Rust、C++等）编写的高性能代码集成到Hugo项目中，为网站添加更多复杂的功能，如高性能的图像处理...使用 hugo 创建新的博客站点本地笔记本安装完 hugo 客户端后，就可以使用 hugo 在本地创建博客站点了：hugo new site local_blogs。...创建文章文章直接放在 content/posts 目录下操作命令为：hugo new content/posts/my_article.md 文章直接存放在posts目录下，所有文章处于同一层级，便于对文章进行统一管理和批量操作...，如批量修改文章的某些属性、进行全站搜索等。...操作步骤：以使用Travis CI为例，在项目根目录下创建.travis.yml文件，配置Hugo的安装、构建和部署脚本。

67510 9

Centos7.3、nginx环境下部署hugo博客

总的来说， hugo虽然比hexo速度快，主要是用hugo是go语言写的，而hexo是node.js，运行起来要加载一大推的插件。但hexo的主题比hugo类型多，也更加美观一点。...下载完成后接着解压到指定的文件夹，先在服务器上创建一个解压后的文件夹，如：/usr/local/hugo 解压后，文件夹中就会有个hugo绿色的文件，就是hugo的执行程序。 ?.../hugo /usr/local/bin/ 不然hugo执行找不到路径可以把除了hugo的其他文件删除掉生成站点，也可以指定其他路径生成，path表示要安装的路径，如：/usr/local/hugo...安装完成后，hugo是没有默认的主题的，可以去主题官网上下载主题：https://gohugo.io/commands/hugo/，如：maupassant主题https://themes.gohugo.io...创建第一篇文章，放到 post 目录，方便之后生成聚合页面。 hugo new post/first.md ?

1.5K3 0

顶级开源项目 Sentry 20.x JS-SDK 设计艺术（Unified API篇）

Internally scoped hub：在一些平台上，如 .NET ambient data 是可用的，在这种情况下 Hub 可以内部管理作用域scopes。...创建面包屑的函数已经创建的面包屑对象面包屑列表(可选) 支持的参数应为：在没有基本重载形式的语言中，只有原始的面包屑对象raw breadcrumb object应该被接受。...如果禁用了 SDK，它就不应该调用回调函数，从而避免不必要的工作。...一些实现可能想要在此处设置最大面包屑计数。 Client Client 是 SDK 中负责事件创建的部分。例如，Client 应将异常转换为 Sentry event。...Client 应该是无状态的，它会注入作用域并委托将事件发送到 Transport 的工作。

1.2K2 0

使用 Cloud Studio 撰写、预览 Hugo 的配置方法

第一步：创建及配置运行环境# 首先进入 Cloud Studio 的官网：https://cloudstudio.net，点击右上角的登陆/注册，使用 Coding 或 Github 账号登陆授权后，进入工作空间...：由于 Hugo 是 go 语言写成，因此在这里我们选择创建一个 go 语言环境，面去自行安装 go 运行环境的时间。...配置完毕后，点击新建，之后在工作空间选择您刚刚创建的空间点击进入，记得允许弹窗。工作空间启动速度应该很快，成功后就能看到一个 code-server 界面了。...运行该配置的方法也很简单，首先停止终端中运行的 hugo server ，之后呼出命令面板，选择 Preview: 打开预览标签：之后选择刚刚创建的配置名称即可： preview 插件会自动在终端中执行上面制定的...数量限制：目前每个用户最多可以创建 5 个工作空间，并且只能同时运行一个工作空间，如果您需要打开另一个工作空间需要先关闭当前运行中的工作空间。

3892 0

Hugo入门教程

BuildDate=2022-06-16T07:09:16Z VendorInfo=gohugoio PS E:\> 2.2、创建项目我们可以使用hugo new site hugo-demo创建一个项目...PS E:\demo> 如上，项目已经创建完毕！ 2.3、项目结构创建完项目后，Hugo会帮我们生成一堆文件，我们需要知道这些文件的用途。...> 2.4、创建第一篇文章默认Hugo生成的文章路径都在content路径下。...hugo server --debug 你会看到hugo输出了很多信息，如当前环境是开发环境，不会启用评论系统等。...2.7、创建并配置单页（关于我）大多数的博客都会有一个关于作者的页面，我们这就在LoveIt的主题中创建这样一个页面。

2.3K3 0

Hugo搭建博客（一）— 基本设置

如windows使用二进制安装：下载Hugo二进制文件 ,下载下来后，解压，将解压后的文件夹名称和文件夹里面的.exe文件都改为同一个名称，否则hugo无法运行。...2 建站 2.1 创建项目 1 2 hugo new site my_website cd my_website 然后hugo会自动生成这样一个目录结构： ▸ archetypes default.md...2.4 创建博客创建第一篇博客 1 hugo new posts/first_blog.md Hugo 允许在文章内容前面添加 yaml, toml 或者 json 格式的前置参数。...注意默认情况下, 所有文章和页面均作为草稿创建....在博客文章的前置参数中加入typora-root-url，如： 1 2 3title: "typora test" draft: false typora-root-url: ../..

3.2K3 1

hugo博客使用 utterances 作为评论系统

hugo博客上的评论插件一直试了好多，但网上关于hugo的评论插件是太少了，找了好长时间都没有值得考究的。...、gitalk这两个评论服务是通过 GitHub 提供的 API 创建含有相应标签的 issue。...国内其实也有很多评论插件，如：有言（官网已经挂了）、畅言（搜狐出品）。...hugo博客配置使用 utterances 首先在github上创建一个空仓库，如：hugoblogtalks，并且初始化设置，仓库必须是Public，而不是私有的，这样我们的读者才可以查看以及发表评论...http://hugo.xdr630.top/ ?

2.3K2 0

如何使用Ubuntu 14.04上的Git Hooks将Hugo站点部署到生产环境

介绍 Hugo是一个静态站点生成器，允许您通过使用简单的标记语言轻松创建和发布Web内容。Hugo可以根据提供的要求解析您的内容并应用主题，以生成可以轻松托管在任何Web服务器或主机上的一致网页。...为了实现这一点，我们需要创建一个gitrepo 的“裸”克隆并将其复制到我们的其他服务器。裸存储库是一个git没有工作目录的特殊存储库。...我们将从/tmp目录中的主Hugo存储库创建一个裸仓库。裸回购通常由尾随.git后缀标识。...因为我们的gitrepo中的themes目录实际上只是指向父目录中某个位置的符号链接，所以我们需要确保工作目录克隆在与我们下载的Hugo主题相同的位置创建。...在Hugo构建内容之后，我们将删除工作目录。然后，我们将重置trap命令，以便在脚本尝试退出时，我们的备份副本不会立即覆盖我们的新内容： #!

2.3K2 0

点击加载更多

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭