# 前言

不知道哪里的想法，想给文章加个目录，方便预览：可能因为 anodyne 主题本身的排版显示，让人有点分不清标题子级？(指一级标题、二级标题这种)

于是想找一个有目录的主题看看，能不能参考下：于是就开始搜索 『Hexo 主题』

# 研究

# 目录跟随效果

开始吭吭哧哧改自己的老主题，用 toc 加上目录后，感觉目录应该根据页面滑动而浮动，但是由于目录处于整个右侧界面的子级，现在的需求是：

widget 不能动，只有当页面滑动超出 toc 起始范围时，仅 toc 跟随页面滑动

基本表现如下：

现在的大概结构如下：

<div class="parent">

  <div class="content">

  </div>

  <div class="widget">

    <div class="toc">

    </div>

  </div>

</div>

toc 就是目录

且不说组件跟文章不是一个框架，用 fixed 之类的属性只能一直固定在一个位置，难道改这个我还要写 js 代码动态去设置 css 节点属性么？

于是开始 面向搜索编程😊 ，找了下，先是找到 关于 CSS：固定位置，但相对于容器，得知了 position sticky 这条属性，它的作用是：在概念上类似于 position: fixed。区别在于，具有 position: sticky 的元素在其父级中的行为类似于 position: relative，直到在视口中满足给定的偏移阈值为止。

现在需求可以做了，那么余下的问题就是：让 toc 容器大小与 content 一致 —— 所以 widget 大小也必须与 content 一致，否则 widget 实际高度多少就是多少，页面就算 1000 个高度， widget 可能也还是 200 个高度。

因为整个页面主要靠 content 撑起来的，不管是设置 toc 还是 widget，都没法让另外一边的自适应 content。

然后又找到一个文章 css 实现 div 的高度随着另一个 div 的高度改变

先是参考上面的设置，将 widget 设置为 position: absolute ，容器大小保持与整个页面高度一至，toc 设置为 position sticky

结果不行，于是继续研究：最后得出结论是 parent 是默认静态的，即 position: static 。

static，静态定位，HTML 元素的默认值，即没有定位，元素出现在正常的流中。 静态定位的元素不会受到 top, bottom, left, right, z-index 影响。

于是又是一通改，成功解决。

# 手机端错位问题

感觉没什么问题，上传服务器。

不过很快就发现：手机端预览又有问题了。

由于已经修复了，现在也看不到截图，不过也可以想象：

• parent relative
• widget absolute

那么在 content 与 widget 宽度不足以同时显示的时候，他们就没法自动排版了。于是两者挤在了一块，相当于叠加了起来。

总之看着挺糟糕的，于是想想要不算了吧，目录也不要浮动定位了，这需求我其实没那么强烈。

下来后想着想着又不大甘心，于是再次一通研究，发现了 flex 这个自定定位排版的容器属性。立刻惊为天人，马上用起来，解决了目录问题。

# 想换新主题了！

然后在这个过程中，看着其它的主题样式，突然就觉得自己的博客主题也太... 简洁了 —— 虽然这个简洁也是以前我觉得挺好看的，现在却想再加点什么。

比如看着 Shoka 的随机背景，于是又了解到了 随机二次元图片 接口这回事，于是想要..... 整一个。

找了下资料，例如用这种方式就可以取得一个随机图片：

fetch ("https://www.dmoe.cc/random.php?return=json")

.then(response => response.json())

.then(data => console.log(data.imgurl));

于是再在自己的主题上，找个合适的位置贴上去，就可以随机展示图片了对吧？稍微研究了一下下..... 没完没了了是吧！(摔 (ﾉ｀⊿´)ﾉ)

这样不如... 直接把主题换了？

特别是看着自己主题的代码样式、Markdown 解析显示的样式，虽然以前感觉简洁也不错... 现在怎么看怎么感觉不香了。

所以...?