Hugo站点聚合页面中标题换行的实现方法

嘿，我太懂你刚上手blogdown、还没深挖Hugo细节时的这种小困扰了！长标题在索引页挤成一团确实看着糟，其实不用折腾复杂的Hugo变量，有两个超简单的方法能搞定：

方法1：CSS快速修复（零模板修改） #

这是最快的方式，大多数Hugo主题都支持自定义CSS——你可以找找主题目录里的assets/css/custom.css或者static/css/custom.css（如果没有，直接在static/css下新建一个，然后在站点配置文件里引入这个CSS文件就行）。

往里面加这段代码：

/* 替换成你博客标题的实际class，比如很多主题是.entry-title */
.post-title {
  word-wrap: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
}

• word-wrap和overflow-wrap是让长单词强制换行的核心属性，适配不同浏览器
• hyphens: auto能让浏览器自动给长单词加连字符，换行更美观自然

不知道标题的class是什么？打开博客索引页，右键点击标题选「检查」，就能看到标题元素的class啦，把上面的.post-title换成对应的就行。

方法2：模板层面微调（更定制化） #

如果你想从模板本身入手，也很简单。找到主题的列表模板文件，一般是layouts/_default/list.html或者layouts/index.html（不同主题结构略有差异），找到输出标题的代码段，大概是这样：

<h2 class="post-title"><a href="{{ .Permalink }}">{{ .Title }}</a></h2>

你可以直接给标题标签内嵌样式：

<h2 class="post-title" style="word-wrap: break-word; overflow-wrap: break-word; hyphens: auto;">
  <a href="{{ .Permalink }}">{{ .Title }}</a>
</h2>

或者给标题加个自定义class，再去CSS里写样式，和方法1逻辑一致。

另外，如果你遇到特别长的专有名词，还可以在写文章标题时手动加软连字符­，比如hyper­text­markup­language，浏览器会在需要的位置自动断开，效果更可控。

这些方法都不用深入研究Hugo的复杂变量，都是前端层面的小调整，分分钟就能解决问题！

内容的提问来源于stack exchange，提问作者Lenn