主页配置

2020-12-27
3分钟阅读时长

入门中,相信你已经成功运行了使用Eureka主题的Hugo网站。在本文中你将了解到如何自由配置网站主页。

简介

Eureka提供了一个功能强大且配置灵活的小组件系统来构建主页。Eureka提供的小组件系统可以在不编写代码的情况下自由组合并自定义组件样式。

Eureka目前提供的小组件有:

  • pages:以列表或卡片等多种形式显示文章的组件。
  • about:显示网站作者信息的组件。
  • vintage:经典的Eureka主页组件。
  • blank:可彻底自定义的组件。

主页内容由content/homepage文件夹中的文件定义,每一个小组件对应一个文件。

新建小组件

你可以使用以下命令在homepage文件夹中生成一个pages类型的小组件:

hugo new -k widgets/pages content/zh/homepage/<your-name.md>

需要注意的是,blank类型为用户提供了可以自由编写html代码并嵌入Eureka的功能,所以其文件类型为html。在生成blank类型的文件时应指定其类型为.html而非.md

hugo new -k widgets/blank content/zh/homepage/<your-name.html>

配置小组件

生成小组件后你可以通过Front Matter中的属性对小组件进行配置,小组件的共用属性都包含在[widget]内。

handler(string)

小组件类型。

width(string)

小组件宽度,可选值为sm,md,lg和xl。默认为md。

sidebar.position(string)

侧边栏位置,可选值为left和right。留空为不显示。

sidebar.scale(string)

侧边栏宽度,可选值为sm,md,lg和xl。默认为md。

background.color(string)

背景颜色,可选值为primary,secondary,tertiary和任意css中有效的颜色值。默认为primary。背景图片优先级高于背景颜色。

background.image(string)

背景图片,可填入本地链接或外链。更多见加载图片

background.size(string)

背景图片尺寸,可选值为auto,cover和contain。默认为auto。

background.position(string)

背景图片位置,可选值为center,top,right,bottom和left。

background.attachment(string)

背景图片固定方式,可选值为fixed,local和scroll。

配置pages小组件

pages小组件有部分特有属性,也可以快速地进行配置。

section(string)

需要显示的章节,例如posts等。

count(int)

显示的文章数,默认为5。

style(string)

显示样式,可选值为card,plain和masonry。

配置about小组件

about小组件的属性名与作者页参数一致,可参考作者页参数

配置vintage小组件

vintage小组件默认为两张图片和一句标语构成。你可以简单地自定义图片内容及标语内容。

slogan(string)

vintage小组件标语。

imgLeft(string)

vintage小组件左侧图片,设置方式可参考加载图片

imgRight(string)

vintage小组件右侧图片,设置方式可参考加载图片

小组件排序

网站主页由小组件构成,你也可以快速设置其显示顺序。

每个小组件的Front Matter中都有weight属性值,你只需设置该值即可确定小组件顺序。

主页显示顺序为weight值按升序排列。


喜欢Eureka就请点个Star吧! Star
上一页 入门
下一页 内容管理