Digital Garden发布方案自定义组件

查看双链版本请看Digital Garden自定义组件

[!info]
在 [[发布方案]] 中我使用的是 Digital Garden 作为[[发布方案]],当然 DG 的默认组件还是做不到开箱即用的,而作者也考虑到了这一点为我们自定义网站提供了充足的空间,我们可以自定义 css 和添加标签至页面中。这篇文章提供了部分 Slot 的翻译,当然没翻译的部分其实也和这部分差不了多少(才不是因为懒得写那么多),以及我会开源一部分我使用的组件(现在还没想好是放网盘还是放 github)

添加自定义组件

[!info] 作者原文
Release 1.39.0 of the template introduced a new way to add custom components to your site. Previously, any customization done in the template would be overwritten whenever you updated the template, making it hard to maintain if you wanted the latest update.

The template now has the concept of slots, where you can add any content you want. Be it Javascript, HTML or CSS.

模板引入插槽(插件)的概念,现在可以向网站中引入任何你想要添加的组件!无论是 JS 还是 HTML 还是 CSS,即使模板更新了也不会被覆盖。

具体的使用方法和介绍作者写的十分详细可以在 Adding custom components 查看具体的使用方法

添加自定义组件的模板语法

这是一段路径,包含了自定组件的作用域等待内容。

src/site/_includes/components/user/<namespace>/<slot>/<filename>.njk

Namespace

支持使用自定义组件的命名空间:

  • common
    同时在主页和笔记上添加
  • index
    只添加到主页
  • notes
    添加到笔记

Slot

以下是支持的插槽:

  • head
    • 将被放置在 html<head> 标记内
  • header
    • 将被放置在 <header> 中, 在 tag 和标题后
  • beforeContent
    • 将被放置在页面内容之前
  • afterContent
    • 将被放置在页面内容的后面
  • footer
    • 将被放置在页面的页脚
1 个赞