Hugo-Hugo补充

2022-10-05 2064 words 5 minutes

Contents

1. 关于使用内联Html元素被忽略

1

<!-- raw HTML omitted -->

需要添加选项

1
2


[markup.goldmark.renderer]
    unsafe = true

之后就能使用了，详见stackoverflow

2. 关于使用原型archetypes

archetype用于hugo new post时使用某模板（包括markdown模板和目录模板），有两种使用方式

直接对content目录下一级目录的文章统一模板。
明确说明某目录使用目录模板或者某文章使用某markdown模板，使用--kind xxx选项

对于第一种情况，举个例子你在archetypes里面添加posts.md，然后content目录下的posts目录中的所有文章在使用hugo new posts/xxx都会应用该模板

对于第二种用法，你可以hugo new xxx --kind yyy 其中xxx是你要在content种新建的目录或者新建的文章，yyy是你要使用的模板格式是archetypes目录中的相对路径，对于文章的模板不需要加.md后缀，比如我要用JavaScript.md的模板，我们只需要使用JavaScript作为模板文件名就行了。对于目录，可以直接使用目录模板，比如我要把"前端"模板目录里面的所有文件应用到新建的目录中，我们需要使用"前端"作为模板目录。

其他详见hugo官网的说明

3. 扩展Shortcodes

扩展Shortcodes

style

style shortcode 用来在你的文章中插入自定义样式.

style shortcode 有两个位置参数.

第一个参数是自定义样式的内容. 它支持 SASS 中的嵌套语法, 并且 & 指代这个父元素.

第二个参数是包裹你要更改样式的内容的 HTML 标签, 默认值是 div.

一个 style 示例:

1

This is a right-aligned paragraph.


        
    comment

4. 目录显示级数设置

markup配置

loveit issue

添加网站设置

  # 配置目录记录的等级
  [markup.tableOfContents]
    startLevel = 2
    endLevel = 6

5. 代码高亮显示

loveit文档

在代码块```后面填写你需要显示的高亮语言类型

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18


grunt.initConfig{
  assemble: {
    options: {
      assets: 'docs/assets',
      data: 'src/data/*.{json,yml}',
      helpers: 'src/custom-helpers.js',
      partials: ['src/partials/**/*.{hbs,md}']
    },
    pages: {
      options: {
        layout: 'default.hbs'
      },
      files: {
        './': ['src/templates/pages/index.hbs']
      }
    }
  }
};

6.搜索引擎检索

Sulv’s Blog Hugo博客seo优化

每篇博客文章设置标题、关键词、描述
config.toml文件设置站点描述
去各个搜索引擎平台进行站点搜索优化，即先添加站点，推荐使用文件添加将文件放到static即可，然后添加sitemap.xml

谷歌搜索，百度搜索，bing搜索可以直接导入谷歌账号

7.代码块设置

hugo官网

代码行号显示+代码拖动条

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15


[markup]
  [markup.highlight]
    anchorLineNos = true
    codeFences = true
    guessSyntax = true
    hl_Lines = ''
    hl_inline = false
    lineAnchors = ''
    lineNoStart = 1
    lineNos = true
    lineNumbersInTable = true
    noClasses = true
    noHl = false
    style = 'monokai'
    tabWidth = 4

8.博文里面引用static中的图片

将图片放到static目录里面，比如image/1.png，hugo会将static最终放到docs目录下，即直接放到静态文件的根目录下，所以我们引用的时候只需在md中写下：


        
    comment

注意最开始有一个/

图片放大功能

loveit 文档

可以通过给图片加图注使得图片可以放大。

1

![Alt text](https://octodex.github.com/images/stormtroopocat.jpg "The Stormtroopocat")

上面的"The Stormtroopocat"就是图注

9.引用站内文章

使用超链接，以根目录相对路径的形式写出目标url，比如文章posts/golang/go-zero/教程/looklook.md，我们的超链接地址写作/posts/golang/go-zero/教程/looklook/，甚至可以在后面添加锚点定位，比如加上#项目架构图和业务架构图。（当一个网页有多个重名锚点时会自动添加-n后缀，n表示第几个重复的锚点）

能这么做的原因是hugo的文章生成静态文件后content文件夹的内容直接生成到根目录。

另外static文件夹直接放到根目录，所以static的文件也可以通过相对路径直接引用在md中。

锚点强制使用小写，且空格使用-代替