首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何在hugo中为每种内容类型添加菜单

在Hugo中为每种内容类型添加菜单,可以通过以下步骤实现:

  1. 确定每种内容类型的标识符:在Hugo中,每种内容类型都有一个唯一的标识符,通常是内容文件的文件夹名称。例如,如果你有一个名为“文章”的内容类型,那么它的标识符可以是“post”。
  2. 创建菜单配置文件:在Hugo的根目录下,创建一个名为“config.toml”的文件(如果已存在,则打开该文件)。在该文件中,添加一个新的菜单配置,以标识符为键,菜单名称为值。例如:
  3. 创建菜单配置文件:在Hugo的根目录下,创建一个名为“config.toml”的文件(如果已存在,则打开该文件)。在该文件中,添加一个新的菜单配置,以标识符为键,菜单名称为值。例如:
  4. 这将创建一个名为“main”的菜单,并将“文章”作为菜单项添加到该菜单中。
  5. 在模板中显示菜单:在你希望显示菜单的模板文件中,添加以下代码:
  6. 在模板中显示菜单:在你希望显示菜单的模板文件中,添加以下代码:
  7. 这将遍历名为“main”的菜单,并根据当前页面的内容类型匹配菜单项的标识符。如果匹配成功,则添加一个带有“active”类的菜单项,否则添加一个普通的菜单项。
  8. 保存并重新生成网站:保存“config.toml”文件,并使用Hugo重新生成你的网站。运行以下命令:
  9. 保存并重新生成网站:保存“config.toml”文件,并使用Hugo重新生成你的网站。运行以下命令:
  10. 这将根据新的菜单配置重新生成你的网站。

现在,你的Hugo网站中的每种内容类型都应该有一个对应的菜单项了。你可以根据需要自定义菜单的样式和布局。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

玩转开源 |Hugo 的使用实践

用户可以自主添加、编辑和删除导航菜单项,调整它们的顺序和层级关系,以最适合网站内容和用户浏览习惯的方式呈现导航。...配置方式如下: 在 hugo.toml 添加 参数配置 [params], 配置菜单目录;params BookMenuBundle = '/menu' content文件夹 下新建 menu文件夹,...layouts/partials/docs/inject/content-after.html:在页面内容之后。 ... 最简单的应用是在菜单末尾添加友情链接,这个步骤十分简单,相信能够轻松完成。...其中,columns 标签是一个非常实用的特性,能够轻松实现文档描述内容的多列布局,用户呈现更为丰富和易读的页面。 这个功能非常适合在文档展示多个相关内容或步骤,使得阅读更加清晰、有条理。... ### 数组元素(Element) 数组的每个存储位置称为一个元素,并且它们都是相同类型的数据。 ### 数组长度(Length) 数组的长度是指它能够容纳的元素数量。

74821

Hugo入门教程

然后将其解压,二进制文件的路径添加到环境变量,就可以愉快的开始 了。...hugo server --debug 你会看到hugo输出了很多信息,当前环境是开发环境,不会启用评论系统等。...我们点击Read More就可以看到文章的完整内容了。 我们点击右上角的黑白各半按钮,即可实现夜间主题切换,而且LoveIt还为我们内置了文章(归档)、标签(Tags)、分类几个菜单。...但是这个关于页面的二维码没有居中,如果我们想要使用一些html标签和scss样式,那么您需要下载hugo_extended打头的hugo版本。...hugo 就是这么简单,直接hugo,然后将public下的内容拿去部署即可。 3、最后 以上就是关于使用Hugo建站(博客)的简单用法,想信你能够使用Hugo打造出属于你的个人站点。

2K30
  • 从Hexo迁移到Hugo-送漂亮的Hugo Theme主题

    菜单,但是不是Hugo菜单功能,灵活性不足。 不支持友情链接。 没有文档归档功能。 GA统计分析不支持。 没有代码高亮。...Hugo本身有菜单的支持,扩展性更好,所以我改为基于Hugo原生菜单的方式实现,可以无限级扩展、支持菜单排序。...新主题已经实现了文章归档,只需要在新建content/archives/index.md文件,文件内容: content/archives/index.md title: "归档" description...只有文章是html后缀的格式,分类、标签等聚合页是目录Path的格式,:http://www.flysnow.org/categories/Golang/。...在新的Hugo系统,我也想这么做,但是Hugo的permalink是不能配置html后缀的,即可你配置了,也只会生成如下的URL/year/month/day/title.html/还是一个目录,无法以

    2.1K10

    Hugo:构建静态网站的超级利器!

    静态网站生成器近年来在开发者社区引起了广泛关注,而其中最受欢迎的工具之一就是 Hugo。 这款由 Go 语言编写的静态网站生成器以其极速构建、功能强大和高度可定制性著称,受到众多开发者的青睐。...2、强大的内容管理 无论是简单的博客,还是复杂的企业站点,Hugo 都能轻松应对。 它支持无限制的内容类型、分类法、菜单和动态 API 驱动内容等功能,这些特性让内容管理变得更加高效和灵活。...3、短代码功能 Hugo 的短代码 Markdown 赋予了新的生命。无论是嵌入视频、图像,还是处理复杂的布局,短代码都能让你轻松实现,并且保持代码的简洁性。...与前端框架的结合 Hugo 不仅仅是一个静态网站生成工具,它还能与各种前端框架 Bootstrap 或 Tailwind 结合使用,进一步提升网站的视觉效果和用户体验。...此外,Hugo 还可以连接到云端 CMS 系统,让内容编辑者在不需要编程知识的情况下轻松修改网站内容

    10210

    HUGO博客本地Windows环境搭建结合内网穿透发布内网站点至公网教程

    安装环境 接下来教大家如何在Windows系统本地安装HUGO HUGO项目地址:https://github.com/gohugoio/hugo 首先需要安装好Windows版本的 git: (如果没有安装...创建后,我们回到hugo目录,可以看到新增了一个名为myblog的文件夹: 进入该文件夹后,就能看到刚刚创建的博客网站程序: 3.2 在站点中创建一篇文章 创建好了站点后,现在网站还什么内容都没有,...然后随便在文档写一些内容,比如: 然后保存关闭即可。...3.3 网站添加主题 现在我们已经创建好了一个博客网站,并在网站中发布了一篇文章,不过现在我们还不能在浏览器运行这个本地网站进行查看,因为在这之前,我们需要先给网站添加一个主题。...返回登录Cpolar web UI管理界面,点击左侧仪表盘的隧道管理——隧道列表,找到所要配置的隧道 myblog ,点击右侧的编辑: 修改隧道信息,将保留成功的二级子域名配置到隧道 域名类型:选择二级子域名

    14510

    hugo搭建博客笔记

    使用环境 系统:Debian GNU/Linux 11 x86_64 宝塔:7.9.0 GIt 安装hugo apt-get install hugo 检查是否安装成功 hugo version 输出下图内容...https://github.com/budparr/gohugo-theme-ananke.git themes/ananke 显示done,便是安装好了,最后,先打开config.toml 将主题添加到站点的配置文件...theme = "ananke" 当然也可以用一条指令完成添加 echo 'theme = "ananke"' >> config.toml 添加内容 这个时候其实博客已经搭建好了,但为了更好看看效果还是要添加下文章看看效果如何...默认情况下,输出的内容位于 站点目录/public/ 目录(可以通过-d/--destination参数修改输出位置,或者在配置文件设置publishdir参数) hugo -D 然后,我是有个测试站点的...注意就是小写,不是大写 languageCode = "zh-cn" defaultContentLanguage = "zh-cn" 4、关于作者【菜单】 在这个目录下Hugo_blog\content

    60430

    Hugo搭建博客(一)— 基本设置

    windows使用二进制安装: 下载Hugo二进制文件 ,下载下来后,解压,将解压后的文件夹名称和文件夹里面的.exe文件都改为同一个名称,否则hugo无法运行。...配置计算机环境变量,右击计算机-属性-高级系统设置-高级-环境变量-系统变量,找到path,添加hugo路径。 在终端进行 hugo version 进行验证是否安装正确。...2.4 创建博客 创建第一篇博客 1 hugo new posts/first_blog.md Hugo 允许在文章内容前面添加 yaml, toml 或者 json 格式的前置参数。...其他的类别,需要在config.toml增加配置,series: 1 2 3 4 [taxonomies] tag = "tags" series = "series" category =...,根据情况设置 注意:about因为只是单个页面,所以,不能添加到[taxonomies](网站所有的分类标签)目录,要不然就不会显示。

    3K31

    何在Ubuntu上安装和使用Hugo

    在本教程,我们将介绍如何在Ubuntu服务器上安装和使用Hugo。这将允许我们配置静态站点,创建内容,并在同一服务器上发布或部署到生产位置。.../themes 您所见,我们当前目录的themes目录实际上只是指向我们克隆到主目录的主题存储库的链接。....gitkeep; done 通过输入以下内容,我们可以看到隐藏的.gitkeep文件已添加到我们的所有目录 ....我们可以通过将该位置添加到.gitignore文件来告诉git忽略生成内容的公共目录: echo "public" >> .gitignore 现在,我们添加当前目录的所有内容站点框架提交到存储库:...您可能需要调整一些内容才能使每个新主题正常工作。 如果您希望使用Hugo像传统Web服务器一样在端口80上提供内容,则必须在命令行添加--port选项。

    6.6K10

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

    hugo new site blog-test 配置主题 当通过上文命令创建我们的站点后,需要进行主题配置,Hugo 社区有了很丰富的主题,可以通过官网 Themes 菜单选择自己喜欢的风格,查看预览效果...类型选择 Personal 即可,并点击完成购买。 等待 Cloudflare 处理后即可查看信息。...手动发布 当我们编辑博客内容并通过 hugo server 本地调试后,就可以通过 hugo 命令生成静态网页文件了。...其中 Checkout 步骤 with 配置 submodules 值 true 可以同步博客源仓库的子模块,即我们的主题模块。...配置后复制生成的 Token(注:只会出现一次),然后在我们博客源仓库的 Settings - Secrets - Actions 添加 PERSONAL_TOKEN 环境变量刚才的 Token,这样

    1.5K10

    从技术博客到个人IP矩阵:全面攻略与实战示例

    摘要本文旨在探讨如何在自媒体时代,通过技术博客打造和维护个人 IP 矩阵。文章将结合实际经验和具体操作方法,帮助技术爱好者更好地树立个人品牌。...常见的选择包括:自建博客(使用 WordPress、Hugo 等)第三方平台( 腾讯云开发者社区、GitHub Pages、Medium等)示例:使用 Hugo 和 GitHub Pages 搭建博客...# 安装Hugobrew install hugo# 创建新站点hugo new site myblog# 添加主题cd mybloggit initgit submodule add https://...内容规划明确目标受众根据目标受众的需求和兴趣点,制定内容规划。可以通过问卷调查、社区讨论等方式了解受众的偏好。设定内容方向确定博客的主要内容方向,编程教程、技术文章、项目分享等。...内链和外链在文章添加内部链接,增加站内访问深度。同时,尽量获取高质量的外部链接,提升博客的权重。

    22210

    Hugo 建站经验之谈

    品宣介绍,常见就是站点首页、新闻介绍等 同样依赖内容管理系统,能很快支持到不同页面的实现,包括相同组件导航、页脚等的共享,后面也会介绍。...各类内容及字符串处理工具函数 - Functions 这个不用多说,对应程序的各类常见的字符串替换,Hugo 都有着良好的支持,同时它还支持类似 Pipe 管道的方式,将处理内容以 | 分隔层层传递下去...项目结构和内容关系 就像前面介绍的内容管理系统,从结构上了解内容 contents 与模板 layouts 之间的映射关系,适当结合官网文档的介绍,了解这层映射关系后,能方便在后续的开发过程,让你的实践更符合...个人定制 除了 Hugo 本身的框架、规范及工具能力外,因为网页的代码最终还是离不开 HTML/CSS/Javascript,自定义相关的内容,只要善用提供的规则(各个模板的引用,组合),就能在各个模板入口引入你想自己控制的代码部分...,你自己的站点添砖加瓦。

    1K50

    腾讯云静态网站托管之部署 Hugo

    云开发静态网站托管支持通过云开发SDK调用服务端资源:云函数、云存储、云数据库等,从而将静态网站扩展全栈网站 无论是腾讯云·云开发用户,还是小程序·云开发用户,只要开通按量付费,即可享有云开发静态网站托管服务.../my-first-post.md 在目录运行: hugo server 在浏览器打开 http://localhost:1313/ 即可查看效果: ?...云开发环境创建完成后,单击左侧菜单的【静态网站托管】,单击【选择已有按量计费环境】 ? 当您看到这样的界面时,就说明已经开通好了。 ?...在 hugo-site 中将 public 目录的文件给部署上去: cloudbase hosting:deploy ....打开腾讯云 云开发控制台,单击左侧菜单的【静态网站托管】>【设置】,进入设置页面,可以找到默认的域名,单击域名,就可以看到您刚部署的 Hexo。 ?

    14.5K30

    Hugo系列(3.0) - LoveIt主题美化与博客功能增强 · 第一章

    阈值0.0需要完全匹配(字母和位置),阈值1.0将匹配任何内容。 location: 0, // 确定文本预期找到的模式的大致位置。...* 距离0要求匹配位于指定的准确位置,距离100则要求完全匹配位于使用阈值0.2找到的位置的20个字符以内。...resources.ToCSS $options }} 在需要使用友链的页面、文章添加如下...shortcode来引入友链样式即可: 1 {{}} 在菜单栏里新增一个友链按钮 打开站点配置文件config.toml,添加友链按钮: 1 2 3 4 5 6 7 8 #...参考链接 自定义Hugo主题样式 kaushalmodi / hugo-search-fuse-js Hugo 篇四:添加友链卡片 shortcodes img标签设置默认图片 Fuse.js模糊搜索引擎

    2.4K21

    如何使用 Hugo 搭建个人博客?

    要使用我改过的主题,可以按照我的步骤来操作 # 添加子模块 git submodule add https://github.com/iswbm/hugo-theme-den.git themes/hugo-theme-den...将拷贝过来的文件,加入到自己的仓库 git add -A git commit -m "use hugo-theme-den" # 3....发布新文章 通过 hugo new 命令可以在 content/zh 目录下新建文章 hugo new posts/first-post.md 模板的内容,可以自行修改 archetypes/default.md...完成内容的补充后,可以用如下命令直接运行 http 的服务器(若你的模板里指定draft=true,这里就直接执行 hugo server 即可) hugo server --buildDrafts -...由于指定了 menu:"main" ,因此会直接新增一个菜单,效果如下 搜索的效果如下 # 5. 部署上线 一切调度完成后,需要将网站部署到服务器上才可能公网访问。

    15310

    WordPress后台仪表盘“概览”小工具添加其他文章类型数据

    WordPress 的自定义文章类型是非常好的一个功能,允许我们根据需求创建和文章等类似的文章类型每种文章类型都有自己的管理菜单和功能。...如果你的网站拥有自定义文章类型,你肯定希望可以向文章、页面和评论一样,在仪表盘的【概览】小工具显示其他文章类型的数据,如下图所示: 这就是WordPress大学今天要分享的教程:如何在WordPress...后台仪表盘“概览”小工具添加其他文章类型数据。...你只需要根据自己的实际情况,修改第四行代码的 array() 数组的文章类型别名,然后添加到当前主题的 functions.php 即可。...如果你要查看文章类型的值,可以在后台点击对应文章类型导航菜单下的第一个子菜单,比如页面-全部页面,就可以在网址中看到 /wp-admin/edit.php?

    42420

    Hugo系列(2) - 通过配置文件来定制个人站点

    的某一个作为站点的配置文件,可以通过--config来配置读取一个或多个配置文件,如下: 1 2 hugo --config debugconfig.toml hugo --config a.toml...weight是比重,值越小则该菜单的位置越靠上面。 name是菜单名字。 pre和post分别对应当前菜单的前缀和后缀,可以定义fontawesome等图标。...该属性可以提供站点的国际化功能,即区分多语言版本的站点,比如若设定了en、zh两个语言,设定默认语言是zh;则默认的站点url的根目录后会加上/zh/,并可以通过站点首页的切换语言下拉框来切换到其他语音,:...如果想启用压缩功能,可以运行如下命令(记得运行前要先删掉public目录): 1 hugo --minify 也可以直接把这个参数配置到配置文件,这样就可以不在运行命令时指定压缩参数: 1 minify...文中内容可能已过时,请谨慎使用。

    99710

    致敬 AirDrop!基于 WebRTC 的 P2P 文件传输工具 | 开源日报 No.299

    其主要功能、关键特性和核心优势包括: 易于集成到现有环境:可以无缝地将 BunkerWeb 集成到各种环境 Linux、Docker、Swarm、Kubernetes 等,实现平滑过渡和无忧实施...默认安全:BunkerWeb 您的 Web 服务提供开箱即用的最小安全性,无需繁琐的配置即可获得安全保护。...alex-shpak/hugo-bookhttps://github.com/alex-shpak/hugo-book Stars: 3.2k License: MIT picture hugo-book...所有剪切板内容均在本地存储,确保数据隐私和安全。 支持纯文本、富文本、HTML、图片和文件类型。 根据剪切板内容类型自动进行分组,便于高效管理。 支持收藏剪切板内容,便于快速访问和管理重要信息。...内置搜索功能,轻松找到剪切板上的任何内容。 图片内置系统 OCR 功能,支持文本和二维码识别。 提供丰富的右键菜单,增强操作便捷性。 提供丰富的自定义选项,满足个性化需求。

    39910

    WordPress素锦-超级美的小众博客自适应主题

    : https://github.com/honjun/hugo-theme-diaspora 相关说明 网站图标相关 网站需要 3 个 logo 图片,分别是: /images/logo.png  (...logo 另外 32-144 名字的图片网站 favicon 以及添加到手机屏幕所需要的小图片 缩略图相关 网站正常显示需要每篇文章都必须设置特色图片。...> /* 当 USE_TIMTHUMB FALSE 时表示不使用 timthumb,当 TRUE 是表示使用 默认为 FALSE 不使用 */ 文章音乐 主题支持音乐播放,两种方式添加: 只需要在...即可 ***注意要去除 autoplay 属性,不然会引起多次播放 bug*** 文章壁纸 Gallery 只需要在文章编辑后台添加图片即可,***注意不需要插入文章内容页面***,主题会调用壁纸显示...菜单设置 菜单连接支持不跳转预览,只需要在对应菜单加上一个 class pview,然后这个链接支持快速预览。

    2.3K00
    领券