首页
学习
活动
专区
工具
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) 数组的长度是指它能够容纳的元素数量。

61521

Hugo入门教程

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

1.9K30

从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搭建博客笔记

使用环境 系统: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

56730

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](网站所有的分类标签)目录,要不然就不会显示。

2.9K31

何在Ubuntu上安装和使用Hugo

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

6.5K10

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.3K10

Hugo 建站经验之谈

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

98950

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

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

14.4K30

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.3K21

如何使用 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. 部署上线 一切调度完成后,需要将网站部署到服务器上才可能公网访问。

10610

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

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

40820

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...文中内容可能已过时,请谨慎使用。

96810

致敬 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 功能,支持文本和二维码识别。 提供丰富的右键菜单,增强操作便捷性。 提供丰富的自定义选项,满足个性化需求。

8210

hugo博客搭建之旅

,一般json文件,hugo提供相关命令可从data读取数据,渲染到html页面,实 │ 现业务数据与模板分离 │ ├─layouts #存放自定义的模板文件,hugo优先使用此目录下模板...,未发现再去themes同目录下查找 ├─public #编译生成的静态文件存放目录 ├─static #存放静态文件,css,js,img等文件目录,hugo直接复制到public目录下,不会做渲染...clone https://github.com/dillonzq/FixIt 下载完后,里面一般都会有一个exampleSite\文件夹,里面放的是主题的样式,你可以直接把里面的config.toml内容复制到你的博客主目录的...,例如图标 pre = "" # 你可以在名称(允许 HTML 格式)之后添加其他信息,例如图标 post = "" # 是否标题显示打字机动画..."_blank">CC BY-NC 4.0' # 是否在文章页面显示原始 Markdown 文档链接 linkToMarkdown = true # 是否在 RSS 显示全文内容

62520

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

Hugo NexT主题升级记录

这不乘着周末的时间,把自己的站点也是升级到最新开发的主题,同时也是后续想升级旧版本 Hugo NexT 的用户打个样吧。...✊ 配置更新首先声明一下配置文件已经和旧版本完全不兼容,因此在配置主题时无须参考原来的配置,只须根据新版本主题提供 示例配置文件 里面的注释说明调整自己站点信息即可,站点名称,标题,头像,菜单,评论等个性化设置...站点菜单项│   └── params.yaml # 各类效果,组件参数配置└── development # 本地开发预览的配置文件(不上传到代码仓库)当在本地运行 hugo server 命令预览站点时...91011121314151617181920212223242526272829303132333435363738394041def append_alias_fm(source, target): """在原来的博客文章添加新的...图片也希望能够吸引到更多的小伙伴们,一起参与进来共同建设 Hugo NexT 主题。除了主题的开发工作外,也会做好博客内容的打造。

77300

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

下面以主题 Universal 例说明。 将主题 hugo-universal-theme 示例站点 exampleSite 文件夹的内容,全部复制到你的站点根目录。...新建 仓库,hugo-site-demo。 注:hugo-site-demo 示例仓库,故设置公开仓库,实践建议设置私有仓库。...3.2.3 自动化部署 利用 Github Actions实现将站点源文件(hugo-site-demo)自动化部署到 GitHub Pages (:xcbeyond.github.io )上。...以后每次提交个人站点内容时,会自动编译并部署。 4、总结 个人网站的创建、部署、上线已经完成,确保站点持续运转,需要你的精心维护、优化。...站点功能的完善、好看,还需持续优化,可通过添加 Hugo 插件、修改主题样式等一系列方法完成。

5.6K43
领券