bootstrap 可重用的Sass实用程序API文档部分

huwehgph 于 5个月前发布在 Bootstrap

关注(0)|答案(3)|浏览(66)

在#38219(评论)中提出的建议。
我们的“Sass实用程序API”部分总是以相同的方式编写。
我们需要一个短代码、部分或其他具有两个参数的东西：

句子的第一部分(例如“背景”或“对象适应”)
用于scss-docs的参数(键)(例如“utils-bg-color”)

我们希望这样调用它：

{{< sass-utilities-api-section "Background" "utils-bg-color" >}}

它将包含类似以下内容：

### Sass utilities API

{{ firstParam }} utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]({{< docsref "/utilities/api#using-the-api" >}})

{{< scss-docs name="{{ secondParam }}" file="scss/_utilities.scss" >}}

我们需要一些帮助来实现它。就我而言，我不太清楚如何使用Hugo构建它。我尝试了一些方法，但还没有成功地在另一个短代码或部分内调用scss-docs和docsref。

Bootstrap

来源：https://github.com/twbs/bootstrap/issues/38434

3条答案

按热度按时间

juud5qan1#

我偶然遇到了这个问题，并对Hugo如何处理部分和短代码感到好奇，于是决定尝试一下。我来到了这里：

<h3>Sass utilities API</h3>

{{ index .Params 0 }} utilities are declared in our utilities API in <code>scss/_utilities.scss</code>. <a href="{{ .Inner }}">Learn how to use the utilities API.</a>

并且正在测试：

## CSS

### Sass utilities API

Overflow utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]({{< docsref "/utilities/api#using-the-api" >}})

{{< sass-utilities-api-section "Overflow" >}}
  {{< docsref "/utilities/api#using-the-api" >}}
{{< /sass-utilities-api-section >}}

{{< scss-docs name="utils-overflow" file="scss/_utilities.scss" >}}

然而，我仍然遇到了一个问题，即内部变量如何填充短代码docsref的结果，因为值的开头和结尾都有空格。
如果解决方案听起来不错且仍然令人满意，我可以在下个周末再试一次。我对Hugo不太熟悉，我与类似工具的最接近的接触。
编辑：目前看来，Hugo似乎不支持在短代码中使用短代码；s

赞(0）回复(0）举报 5个月前

mznpcxlj2#

感谢@guilhermejcgois的挖掘🙏
如果解决方案听起来不错且仍然有需求，可以在下个周末再试一次。我对Hugo不太熟悉，我与类似工具的接触最多。
不幸的是，我现在无法检查这个问题，但如果你能找到一些改进当前情况的方法，使其更易于维护，即使它与问题中的描述不完全一样，你也可以创建一个草稿PR,我会加入其中与你一起检查这个问题。
我对Hugo的高级用法也不熟悉，但正如你在编辑中所说的那样，如果我记得没错的话，Hugo不支持在shortcode内部使用shortcode,这使得任务变得困难。

赞(0）回复(0）举报 5个月前

wtlkbnrh3#

我提出了一个可能的解决方案，但起初我担心是否有实际功能可以讨论是否合理等。如果你们认为继续使用(解决方法)是合理的，那么我会更好地记录它并将其应用于其他页面。

赞(0）回复(0）举报 5个月前