给Hugo文章增加阅读更多跳转的锚点定位功能
早期在进行
hugo-theme-next
的主题开发时,但想着给首页跳转至文章内容阅读时,能够有个定位到文章后续内容的锚定点功能,而不至于说从头开始阅读影响体验。而恰巧官方在其
hugo-0.134.0-release
发布中新增加这个万众推崇功能的支持实现,为Hugo用户带来全新的体验值得点赞加赏。
在发现此新功能特性“第一时间”便是着手给 hugo-theme-next
主题增加上这个锚定的支持,实现起来的操作也并不复杂。找到原来显示文章的post/body.html
模板文件,将原来的.Content
位置替换把其分割成两个部分,并在两者中间插入一个锚点,具体的参考代码如下:
|
|
另外给这个id为more
的锚点添加一个样式,因为这是手动添加的虚拟因素并不属于文章实际内容,所以为避免阅读的干扰需要将它隐藏起来不显示。可在CSS文件中添加如下参考代码:
|
|
只需要上述两步操作,但轻松实现了文章阅读更多时跳转的锚点定位功能。而且官方新增加的这种实现方案,完美的兼容并支持了通过.Summary
方法和手动添加<!--more-->
的标记两种模式,真是太太赞啦,可谓是为众多的Hugo主题开发者省去很多不必要的复杂二次开发实现。
本来还要想着自己手搓个功能支持出来,通过分割文章内容来的方式实现,但对上述两种文章摘要截取并不能很好支持,没想到在此时遇到Hugo官方的支持,正所谓是顺其自然一切都是刚刚好。
有感而发
最大的感触便是,平时还是得多些关注下官方的发布信息哪!这不仅能够避免自己重复造轮子的“坑”,而且也能够及时掌握Hugo新版本特性,为hugo-theme-next
主题用户带去更多的友好新体验。