Blogs
Hugo自定义视图view详细教程

Hugo自定义视图view详细教程

本文提供Hugo中如何修改公开主题模板的视图view以达到网站布局自定义的目的。

keywords: Hugo view修改， Hugo view 视图修改，定制 Hugo view，Hugo 自定义，Hugo个性化

一、前言

2.1 View存储位置

view是某些block中的一种页面布局选择，如在hugo academic主题的collection这个block中有article-grid、card、date-title-summary、citation等选择。

View为HTML文件，默认存储在layouts/paritals/views/中，很多主题模板没有此文件夹，以hugo academic 主题为例，layouts/parital中只有hooks文件夹，可以自己建一个名为views的文件夹。自定义的view可以直接存在views/文件夹下，也可以新建views/community/。

├── layouts/partials					<-- 布局等模板文件
│   └── hooks							<-- 钩子文件，保存一些可复用性的代码
│   └── blox							<-- blok内容块文件，详见2.2  # block存储位置
│   └── views							<-- view文件，详见2.2
│   	└── community					<-- 自定义view文件
│   		└── custom-view.html		<-- 自定义view.html文件
│   		└── custom-view.start.html	<-- 自定义view.start.html文件(必须有)
│   		└── custom-view.end.html	<-- 自定义view.end.html文件

也可以将公开仓库中已有的view保存到此文件夹中直接进行使用

  • 公开仓库：hugo-blox-builder
  • block文件在仓库中的存储位置：hugo-blox-builder-main\modules\blox-tailwind\layouts\partials\views

2.2 网页结构

Easily create customized landing pages

在hugo中，图中的section中包含若干个block，比方说专门展示文字的block、专门用于项目的block、专门用于奖项展示的block。每个block又可以使用不同的view，如在展示文章的block中可以选择使用竖排view、横排view、图文view、仅文字view等。

Header 和Footer也可以视为block的一种。

block和view的配置主要在content/_index.md中。

二、注意事项

注意事项：

  • content/_index.md中修改主页block信息，将view改成自定义view
  • view只是将block对应的md文件中已有的信息重排，注意view对应的block中能够存储哪些信息。需要额外信息的话，可能需要修改对应的block HTML文件。
  • _index.md中为YAML配置，须严格执行缩进
  • 必须要有.start.html，如自定义view命名为

明白主要步骤之后就可以压榨GPT等一众机器人干活了，制造自己想要的网页布局。

三、示例

需求：

  • 原始citation.html作为展示文章列表的一个view，可以显示文章作者、题目、期刊、时间等信息，并提供了点击题目之后跳转到详情页的功能。此功能很鸡肋，想要直接去掉。

content/_index.md中的部分内容：

sections:
- block: collection
    id: papers
    content:
      title: Recent Publications
      count: 5
      filters:
        folders:
          - publication
        featured_only: true
    design:
      view: community/citation #修改此处为自定义view

修改desing/view为自定义view明，community/citation代表存储在community/文件夹下的citation.html。

layouts/paritals/views/citation-custom.html中的部分内容：

  <!-- <a href="{{ $item.RelPermalink }}">{{ $item.Title }}</a>. -->
  <span class="underline">{{ $item.Title }}</span>

去掉了点击题目跳转的代码。