有没有办法改变 html post in blogdown/hugo 的页面宽度？

Question

我正在使用 blogdown 和主题 hugo-tranquilpeak-theme 构建一个 post。有什么方法可以改变渲染页面的宽度吗？

我这里有一个例子：

看来我太狭隘了。我可以做大一点吗？

我希望我可以将其设置为博客所有 post 的默认行为。

Answer 1

宽度由您的主题决定。我只查看了 here 提供的示例站点，但在这种特殊情况下，您需要处理的元素似乎是 main-content-wrap。我通过右键单击我的浏览器并选择 "Inspect Element" (firefox) 或 "Inspect" (chrome) 得出了这个结论，它为您提供了有关存在哪些元素以及它们如何受现有元素影响的信息CSS。从这里您可以看到它的默认 max-width 为 750px。您需要创建一个 CSS 文件来覆盖此属性。该文件只需包含

.main-content-wrap{
    max-width: [insertYourDesiredWidthHere]px
}

将此文件保存在您的 static 目录下的某处。为了方便起见，最好在名为 css 的文件夹中

实际使用此文件的方式也取决于主题。通常这由 config.toml

中的 customCSS 参数控制

查看 example site at the theme repository 我可以看到描述如何执行此操作的注释行。

所以只需添加

[[params.customCSS]]
 href = "pathToFileUnderStatic"

Answer 2

这对我有用：

找到您的主题正在使用的 .css (themes/hugo-lithium/static/css/main.css) 和编辑下面的 .content，更改 max-width 属性:

.content {
  max-width: 700px;
  margin: 40px auto 10px;
  padding: 0 15px;
  font-size: 16px;
  line-height: 1.7;
  color: #333;
}

来源：https://bookdown.org/yihui/blogdown/css.html

有没有办法改变 html post in blogdown/hugo 的页面宽度？

Is there a way to change the width page of a html post in blogdown/hugo?

r

hugo

blogdown