有没有办法在 blogdown/hugo 中更改 html 帖子的宽度页面？答案

【问题标题】：Is there a way to change the width page of a html post in blogdown/hugo?有没有办法在 blogdown/hugo 中更改 html 帖子的宽度页面？
【发布时间】：2020-08-24 20:39:10
【问题描述】：

我正在使用blogdown 以hugo-tranquilpeak-theme 为主题创建一个帖子。有没有办法可以改变渲染页面的宽度？

我这里有一个例子：

看来我太狭隘了。我可以做得更大吗？

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

【问题讨论】：

标签： r hugo blogdown

【解决方案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"

【讨论】：

你知道 config.toml 从哪里开始寻找吗？我想我指定的路径错误。我按照您的建议进行设置并使用 href = "static/css/MyWidth.css" 但没有任何变化
参见：bookdown.org/yihui/blogdown/css.html#css：“对于一些主题（即，hugo-anatole 主题），您可以选择链接到自定义 CSS，您可以使用它进一步定制您网站的视觉风格。”如果您的主题没有此选项，您需要将 CSS 放在文件中（例如 /static/css/custom.css），并在布局中添加链接。添加或编辑 /layout/partials/head_custom.html 并写入：。另见：stackoverflow.com/questions/65329202/…

【解决方案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

【讨论】：

我知道不建议直接编辑/themes/下的文件（布局见bookdown.org/yihui/blogdown/custom-layouts.html#custom-layouts但也适用于CSS）。