博客文章脚注右浮

yihui 2024-01-30 14:56:03 ✓ Answer

这问题太细节了，ChatGPT 可能还没有智能到这个程度。粗略的实现是这样：

首先用 JS 把脚注都移动到正文内的脚注序号后面的一个 <div class="side-right"> 内：

<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，比如把浮动和边距设置取消，让脚注回到正文区域。也就是需要类似这样的 @media {} 语句：

yihui.org/static/css/custom.css

Line 128 in 895c7db

@media only screen and (min-width: 992px) {

还有个小麻烦是如果页面内没有脚注，正文该如何布局。我目前的做法是如果没有脚注，那么正文在页面内居中；如果有脚注，那么正文向左挪出足够放下脚注的空间，也就是左右栏布局。这可能会带来一点阅读上的不一致体验（有的文章居中、有的文章居左），但我没想出更好的方案。当然也可以一致居左，但我觉得右边空出一片空白完全没用也有点别扭。

residualsun1 2024-01-30 16:41:56

感谢回复！

按照你的回答，我做出了以下修改：

在baseof.html文件中添加<script src="https://cdn.jsdelivr.net/npm/@xiee/utils/js/sitenotes.min.js" defer></script>

<!DOCTYPE html>
<html lang="{{ $.Site.LanguageCode | default "en" }}">
  <head>
    <title>{{ block "title" . }}{{ with .Params.Title }}{{ . }} | {{ end }}{{ .Site.Title }}{{ end }}</title>

    {{ partial "head.html" . }}
    <script src="https://cdn.jsdelivr.net/npm/@xiee/utils/js/sitenotes.min.js" defer></script>
  </head>

在single.html文件中手动添加<div class="side-right">

    <div class="content">
      {{ .Content }}
       <style>
        h2 {
        text-align: center;
        font-weight: bold;
          }
       </style>
      <div class="side-right"></div>
    </div>

在css文件添加代码：

.side-right {
    float: right;
    width: 200px;
    margin-right: calc(-200px - 2em);
    font-size: .9em;
}

@media only screen and (min-width: 992px) {
  .has-sidenotes .main, .has-sidenotes .fullwidth {
    margin-left: 0;
  }
  
  .side-right {
    float: right;
    clear: right;
    background: none;
    padding: 0 0 1em 0;
    width: calc(var(--body-width) - var(--text-width) - 2.5rem * 2 - 2rem);
    margin-right: calc(var(--text-width) + 2.5rem * 2 - var(--body-width));
  }
  
  blockquote .side-right {
    margin-right: calc(var(--text-width) + 2.5rem * 2 - var(--body-width) - 2rem);
  }
}

但是网站没有啥变化，于是我试着检查页面。

footnotes类和side-right类同时存在，前者在后者上方，而脚注内容在前者内。不知道是不是我没理解你的意思，没有设置好。

检查页面网址：https://guozheng.rbind.io/posts/2024/01/passer-by-in-life/

yihui 2024-01-30 21:50:27

我敲错了一个字母，是 sidenotes 而不是 sitenotes。
这一步没必要。
你不能照抄我的 CSS，所以我说的是“类似的 @media 语句”。我的一些设定和你的主题不同，比如 --啥啥 变量。“类似”的意思是，你需要考虑页面宽窄不同时 .side-right 类的不同样式定义。它有两种可能的实现方式，一种是定义默认样式再定义最小宽度超过某宽度时的样式（min-width），另一种是定义默认样式再定义最大宽度小于某宽度时的样式（max-width），就是两种方向的定义，基本都是等价的。我个人是习惯用前者。你的网站上用如下 CSS 定义大致可以实现在 992px 页面上脚注右移（这只是个大致，还有些细节需要微调，我没时间帮你到底）：

.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 并不是什么金标准，你可以选择在更宽的屏幕上进行脚注右移，这样可以留给主栏更宽的空间。

在你面前的两条路是：要么就放弃算了，要么彻底搞懂 @media 的原理，在纸上把上面的各种宽度问题想清楚，给出适合你的主题的 CSS 定义，这件事可能够你折腾小半天。

residualsun1 2024-01-31 14:04:07

我将js的网址修改回来，也删除了不必要的类side-right，目前采用的方案是“保持居中并在左边留出同样宽的空白”的方案。我想了一下，觉得自己还是比较习惯680px的阅读界面，就将992改为1080了。

这只是个大致，还有些细节需要微调，我没时间帮你到底

在你面前的两条路是：要么就放弃算了，要么彻底搞懂 @media 的原理，在纸上把上面的各种宽度问题想清楚，给出适合你的主题的 CSS 定义，这件事可能够你折腾小半天。

你给我的改进代码基本上已经满足了我的需求，给我的分析也很详细！@media部分我会自己慢慢试错和调整的，该折腾就得折腾（这也是博客的一个乐趣），不然可就是伸手党了哈哈。真的很感谢你的耐心帮助(●◡●)！

yihui 2024-01-31 14:08:22

嗯，很好，不客气！折腾到底就是胜利！

博客文章脚注右浮

1 Comment