Question

我有一个html list元素，可将博客文章呈现为列表。

locations.append((x,y,z))

博客文章使用markdown（以及Rmarkdown）编写，我指定了应该显示在列表中的源图像。

<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>

我设法通过在列表内添加标签来使图像显示在帖子标题旁边。

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

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

我已经读过关于使用CSS的信息，但是示例始终使用指向一个图像的绝对路径，例如

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

是否有办法从markdown文件中的Param.thumbnail引用图像？

这不起作用：

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

任何帮助将不胜感激。

Answer 1

要使CSS样式表使用markdown，您需要将其包含在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

partials /目录是放置HTML片段以通过partial函数由其他模板重用的位置。在此目录下，我们有四个部分模板：

header.html main定义了<head>标签和<nav>标签中的导航菜单。

如果您进一步阅读，可以看到{{ partial "head_custom.html" . }}是可以在其中插入文件的文件（head_custom.html）

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

Answer 2

为什么不使用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;
}

希望这会有所帮助。

用相应帖子中指定的图像替换<li>中的项目符号点

2 个答案: