将 <li> 中的项目符号替换为各自 post 中指定的图片

Question

我有一个 html 列表元素，可以将 blogpost 呈现为列表。

<ul class="posts">
{{ range .Data.Pages -}}
  <li>
    <span class="postlist_container">
      <a href="{{ .Permalink }}">{{ .Title }}</a> 
    <time class="pull-right post-list" datetime="{{ .Date.Format "2006-01-02T15:04:05Z0700" }}">{{ .Date.Format "Mon, Jan 2, 2006" }}</time> </span>
  </li>
{{- end }}
</ul>

博客post是用 markdown（以及 Rmarkdown）编写的，我指定了应该出现在列表中的源图像。

---
thumbnail: "/post/source/image_tn.jpg"
---

通过在列表中添加标签，我设法让图像与 post 的标题一起呈现。

<img src="{{ with .Params.thumbnail }}{{ . }}{{ end }}">

这并不理想，因为有一个要点，然后是标题、日期和图像。我想要的是图像替换项目符号。

我已经阅读过有关为此使用 CSS 的信息，但是这些示例始终使用一个图像的绝对路径，例如

.posts {
  list-style-image: url("source/image.jpeg");
}

有没有办法在 markdown 文件中引用 Param.thumbnail 中的图像？

这没有用：

.posts {
  list-style-image: url("{{ with .Params.thumbnail }}{{ . }}{{ end }}");
}

如有任何帮助，我们将不胜感激。

Answer 1

为什么不使用其中一种伪元素，而不是使用 list-style-image？像这样！

li{
  position: relative;
  padding-left: 5px;
}

li::before{
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  background: url("{{ with .Params.thumbnail }}{{ . }}{{ end }}") no-repeat center center;
}

希望对您有所帮助。

Answer 2

要使您的 CSS 样式 sheet 使用降价，您需要将其包含在 HTML 模板中。

在您的模板中插入一次您想要即时更新的规则（最好是在 <head> 中插入，但其他任何地方都可以工作

<style>
.posts {
  list-style-image: url("{{ with .Params.thumbnail }}{{ . }}{{ end }}");
}
</style>

改为

<img src="{{ with .Params.thumbnail }}{{ . }}{{ end }}">

最好从 blogdown 阅读模板教程

https://bookdown.org/yihui/blogdown/templates.html#a-minimal-example

The partials/ directory is the place to put the HTML fragments to be reused by other templates via the partial function. We have four partial templates under this directory:

header.html main defines the <head> tag and the navigation menu in the <nav> tag.

如果您进一步阅读，您会发现 {{ partial "head_custom.html" . }} 是您可能插入的文件 (head_custom.html)

<style>
.posts {
  list-style-image: url("{{ with .Params.thumbnail }}{{ . }}{{ end }}");
}
</style>

将 <li> 中的项目符号替换为各自 post 中指定的图片

replace bullet point in <li> with image specified in respective post

html

css

hugo

blogdown