博客文章脚注右浮 #1561
-
|
益辉你好！我在你的博客文章中发现了脚注右浮，一直觉得这种设置看起来会更舒服和更方便。另外，对于记录自己想法的博客文章，我觉得脚注右浮会更有利于及时连接到新的想法。 我按照自己的主题模板寻求过ChatGPT的帮助，但到目前都无法成功实现像你一样的效果，所以想和你请教一下该咋设置（似乎主要是和_default.html和partial.html及css这三个文件相关）？ |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 4 replies
-
|
这问题太细节了，ChatGPT 可能还没有智能到这个程度。粗略的实现是这样： 首先用 JS 把脚注都移动到正文内的脚注序号后面的一个 <script src="https://cdn.jsdelivr.net/npm/@xiee/utils/js/sidenotes.min.js" defer></script>（对 JS 感兴趣的话，源码在此：https://github.com/yihui/misc.js/blob/main/js/sidenotes.js） 这段代码加到任意页面模版里都可以，它只对包含脚注的页面起作用。 然后就是 CSS，这是真正有点复杂的地方，需要考虑的细节比较多。粗略地说，就是把脚注向右浮动： .side-right {
float: right;
width: 200px;
margin-right: calc(-200px - 2em);
font-size: .9em;
}向右浮动后，右边距就是 0 了。通过设置宽度 200 像素（可以是别的数值）然后把这个层向右移动 200 像素，实际上就是把脚注层移动至正文的右侧、正好让脚注的左侧边贴在正文右侧边上，此时为了美观再留一点空隙，也就是向右再移动 2 个字符宽。 你可以在浏览器里直接运行 JS 并添加 CSS 调试你的页面看看效果：https://guozheng.rbind.io/posts/2024/01/passer-by-in-life/ 
稍微有点麻烦的就是响应式的 CSS，即：当页宽不足以在右侧放置脚注时，你需要重新定义 CSS，比如把浮动和边距设置取消，让脚注回到正文区域。也就是需要类似这样的 yihui.org/static/css/custom.css Line 128 in 895c7db 还有个小麻烦是如果页面内没有脚注，正文该如何布局。我目前的做法是如果没有脚注，那么正文在页面内居中；如果有脚注，那么正文向左挪出足够放下脚注的空间，也就是左右栏布局。这可能会带来一点阅读上的不一致体验（有的文章居中、有的文章居左），但我没想出更好的方案。当然也可以一致居左，但我觉得右边空出一片空白完全没用也有点别扭。 |
Beta Was this translation helpful? Give feedback.
-
|
感谢回复！ 按照你的回答，我做出了以下修改：
但是网站没有啥变化，于是我试着检查页面。
footnotes类和side-right类同时存在，前者在后者上方，而脚注内容在前者内。不知道是不是我没理解你的意思，没有设置好。 检查页面网址：https://guozheng.rbind.io/posts/2024/01/passer-by-in-life/ |
Beta Was this translation helpful? Give feedback.
-
.side-right {
float: right;
clear: right;
width: 100%;
margin: 1em 2em;
font-size: .9em;
}
@media only screen and (min-width: 992px) {
.side-right {
width: 200px;
margin-right: calc(-200px - 2em);
}
}但是如我第一次回复所说，这里面麻烦的问题是你的正文在页面上默认是居中的，所以如果你要考虑添加右边栏，那么你是要放弃正文居中，还是保持居中并在左边留出同样宽的空白？如果选择后者，那么在 992 像素的限制下，如果你打算边栏留出 200 像素的宽度，那么正文就会只剩下 992 - 200 x 2 = 592px 的宽度。你目前留的是 600px，二者差不多，不过你还要考虑边栏与主栏之间的小间距，我留的是 2em，默认是 32px，而 592 - 32 x 2 = 528px。 当然，992 并不是什么金标准，你可以选择在更宽的屏幕上进行脚注右移，这样可以留给主栏更宽的空间。 在你面前的两条路是：要么就放弃算了，要么彻底搞懂 |
Beta Was this translation helpful? Give feedback.
-
|
我将js的网址修改回来，也删除了不必要的类side-right，目前采用的方案是“保持居中并在左边留出同样宽的空白”的方案。我想了一下，觉得自己还是比较习惯680px的阅读界面，就将992改为1080了。
你给我的改进代码基本上已经满足了我的需求，给我的分析也很详细！ |
Beta Was this translation helpful? Give feedback.
-
|
嗯，很好，不客气！折腾到底就是胜利！ |
Beta Was this translation helpful? Give feedback.
这问题太细节了，ChatGPT 可能还没有智能到这个程度。粗略的实现是这样：
首先用 JS 把脚注都移动到正文内的脚注序号后面的一个
<div class="side-right">内：（对 JS 感兴趣的话，源码在此：https://github.com/yihui/misc.js/blob/main/js/sidenotes.js）
这段代码加到任意页面模版里都可以，它只对包含脚注的页面起作用。
然后就是 CSS，这是真正有点复杂的地方，需要考虑的细节比较多。粗略地说，就是把脚注向右浮动：
向右浮动后，右边距就是 0 了。通过设置宽度 200 像素（可以是别的数值）然后把这个层向右移动 200 像素，实际上就是把脚注层移动至正文的右侧、正好让脚注的左侧边贴在正文右侧边上，此时为了美观再留一点空隙，也就是向右再移动 2 个字符宽。
你可以在浏览器里直接运行 JS 并添加 CSS 调试你的页面看看效果：https://guozheng.rbind.io/posts/2024/01/passer-by-in-life/
稍微有点麻烦的就是响应式的 CSS，即：当页宽不…