1 实现方法

• (1) 创建layouts/partials/widget/xxx.html文件，文件名随意

• (2) 按照以下的模板，把对应的html，script，css代码复制进去

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

<div>
    <!--html内容-->
</div>

<script>
    // script内容
</script>

<style>
    /* css样式 */
</style>

• (3) 修改hugo.yaml文件，在params.widgets中添加对应widget的名称

2 示例

2.1 时钟组件

• 时钟组件: letere-gzj/pure-css3-clock
• 演示地址

• (1) 创建layouts/partials/widget/clock.html文件

• (2) 按照实现方法中给出的模板，把html，script，css复制进去
  • html内容位置: pure-css3-clock/index.html
  • script内容位置: pure-css3-clock/index.html
  • css样式位置: pure-css3-clock/css/style.css

• (3) 修改hugo.yaml文件，在params.widgets中添加clock

• (4) 项目启动后，样式不太对，需对样式进行二次调整，来适配主题

• (4) 修改css样式，将对应的样式进行注释(删除)和添加
  • tips: 没演示到的样式不要乱动

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

.clock-wrapper {
  /* position: absolute; */
  /* top: 0; */
  /* left: 0; */
  /* width: 100%; */
  /* height: 100%; */
  /* background-color: #eceef0; */
  position: relative;
  width: 460px;
  height: 460px;
  zoom: 0.4;
  ...
}
.clock-border {
  /* top: 60px; */
  /* bottom: 0; */
  /* left: 0; */
  /* right: 0; */
  ...
}

• (5) 刷新项目，样式正常，时钟组件引入成功
  • 这是我改好的clock.html，可以直接下载使用(Ctrl+S保存)，下载后将后缀名改回html即可