创造 CANDY 主题，只为更好的交互

This post is from the old blog, so may not be presented at the best

This post was updated 809 days ago and some of the ideas may be out of date

众所周知，Icarus 是一个非常优秀的 Hexo 主题。它不仅提供清爽、简洁的界面，还与各种主流插件、组件兼容的很好。更令人欣喜的是——它几乎是最活跃的 Hexo 主题之一，有着非常良好的社区氛围。作者时刻保持更新，并提供了非常完善的文档。

种种因素使我最终选择了它，并准备在其基础上修改出自己满意的设计，我将其命名为 Candy，并将在 GitHub 上与 Icarus 保持更新。本文将是这一系列文章的第一节——基础设计修改。

本人前端零基础，如有不妥，请在评论区教我做事，谢谢🙏

真正的卡片式设计——让最频繁的交互更人性化

分析

Icarus 主题很美观，但对我来说它与许多 Hexo 主题一样都存在一个核心问题，即首页的文章如需访问全文，需要点击 Read More 按钮、图片或标题才可以进入，而点击主文字或卡片空白处是没有反应的，恰好很多博主喜欢把摘要写成长篇大论，此时的 Read More 按钮看起来更小，很容易被忽视，点击大段文字也许是很多读者的第一反应，虽然这并不会得到任何回应。

[object Object] — 大佬们的博客，长长的「摘要」使 Read More 按钮显得特别小

点击、进入全文，这应该是每个博客最频繁的交互。尴尬的小按钮难免给读者造成一些细微的障碍，当然如果对自己的内容足够自信，或者没那么讲究的话，你就可以跳过这一节了。

尝试

为了达成真正的卡片效果，我探索过一些方法。

我的第一反应是在 <article> 标签外套一层 <a> 标签然后设置 href 属性，同时 <article> 要设置成块级元素。于是我便在 layout/common/article.jsx 中这样修改：

感觉非常合理，但其实并不行，如果这样操作，在实际页面中，<a> 标签并不会正确包裹，反而会被添加到 <article> 元素下每个子元素的首位。我并不确定是什么原因，但是根据 Stack Overflow 上的一篇回答中的评论：

You should really point out (by suggesting this way) that: using this solution you cannot have other Anchor elements inside the article.

Roko C. Buljan

貌似如果想这样操作的话，子元素不能再有其他 <a> 元素。我便以为是不可以的，当时就作罢了。

接下来，我尝试在外面先套一层 <object> 标签，再套 <a> 标签链接到正文，这样我们就实现了整张卡片可点击的效果。

这样确实可以了，本来这一段到这里就结束了，但我想起了文档里对 <object> 标签的描述：

HTML <object> 元素（或者称作 HTML 嵌入对象元素）表示引入一个外部资源，这个资源可能是一张图片，一个嵌入的浏览上下文，亦或是一个插件所使用的资源。

MDN

于是乎，就换来了接下来的方法，也是最终的实现方法。

解法

这种方法的思路其实和第一种是一致的，但是具体实现有区别，这次我们不在 article.jsx 里修改了，直接在 source/js/main.js 最底下添加：

其实就是用了 jQuery 的 warp() 方法，这里我们指定 <a> 元素来包裹 <article> 元素。同时因为我们只需要在首页让这些卡片有链接，所以我们可以通过判断正文末尾的版权信息盒子是否存在，来控制这条语句是否生效。

我们还需要设置一下 card-link 的 color 为 inherit，这样摘要的颜色就会恢复成白色，否则会是你 a 标签的颜色（自定义 CSS 的方法在后文）：

这样我们就实现了整个卡片可点击，且卡片里原有的分类链接照样可以点击并不受影响。但我并不知道为何第一种和第三种方法会有这样的差异，如果有大佬清楚请在评论区解答我，谢谢。

加入一点动效会让体验更好吗？答案是肯定的

所谓「交互」，代表着交流和互动。一个好的交互设计，组件与用户的互动是必不可少的。互联网厂商们早已发现了这一逻辑，并将这些互动悄悄藏在设计里，通过微小的震动、令人愉悦的变换俘获用户的感官。

简单来说，光将整张卡片链接到正文还不够，它得是让用户有感知的，这个感知就由动效来实现。

废话少说，先上效果图👇：

为实现这个效果，我增加了：

向上的位移

阴影的变换

题图的变大（深色模式下，还增加了题图的变暗）

我希望能用纯 CSS 解决的，尽量只用 CSS。为了后期与 Icarus 同步更方便，我们修改 source/css 目录下的 style.styl 来自定义样式。Icarus 使用 Stylus[^3] 作为 CSS 预处理器。它的定义生效规则是：

一个变量不能影响在定义它以前的输出样式。

所以为了方便，我们可以把所有自定义样式放在最前面，把 @import 放在最后。

位移与阴影

首先，我们将位移与阴影一起添加，效果模仿自 Gridsome Blog Starter 🙏。

因为我不希望在正文处也出现动效，同时希望尽可能用纯 CSS 解决，所以我在 article.jsx 最前面添加一个只在正文生效的空的 div 元素，并通过 class 名「controller」来控制：

这样一来，正文的最前面就会多一个空的、class 名为「controller」的 div 元素。接下来我们写伪类：

如果有大佬们有更好的解决方案，请在评论区赐教。

点击展开查看：一个现在不兼容，但未来可能可以的做法。

简单来说就是 :not 里嵌套兄弟选192择器 ~：

很好理解，这个选择器会选择兄弟不为 .controller 的 .card，这样只需要这一个语句即可。

关于这一特性的详细可以看 W3C Editor's Draft 和 CSS4 Selectors，另附 Can I use 兼容情况。

题图

最后我们添加题图放大的动效，这里的效果模仿自 Apple 官网的 Newsroom 📰，注意 :hover 的写法，我希望鼠标放在卡片上时就激活（而不仅仅是放在题图上）：

细心的朋友可能会发现，光这样还不完美——图片在变换的过程中会先取消圆角，再恢复圆角，也就是说中间会有一段时间「四角方方」，这是我们不愿意看到的，解决方法也很简单，再添加一个 0 度的旋转[^6]即可：

在黑暗模式下我还加入了题图变暗的效果。关于黑暗模式我会在之后详解，就不在本文中赘述了：

至此，我们便完成了一个用户友好的卡片设计，它整张卡片可点击，且有合适的动效互动，但这并不是 Candy 主题的全部，还有很多细节性的动效就不在这里赘述了，感兴趣的话可以去查看 style.styl 源码。

「跟着走」的导航栏，贴心而不恼人

最后，我想我需要一个会跟随页面的导航栏，它得是贴心的——当你需要它的时候，比如回首页、切换浅色/深色模式、搜索，它就在那里；它还得是不恼人的——它不应该遮挡太多，影响到正文或视觉平衡，它得是灵巧的，且更好的适配响应式设计。

跟着走？No！它只是固定在那里

导航栏不会真的跟着走的，我们只是给它添加一个 position 为 fixed 的样式。这么做的同时还需要调整 width 为 100% 并将下一个元素 section 下移：

当然，也可以采用 sticky 不过兼容性会差一些，在此案例中效果是一样的。使用 sticky 就不需要设置 section 的下移，不过需要设置 top 属性：

「瘦身」+「毛玻璃」，让导航栏灵巧一些

接下来我想让导航栏看起来更轻巧一些，于是缩窄了导航栏的高度并加入了所谓「毛玻璃」效果。

「瘦身」

通过修改 navbar-item 的内外边距来缩窄高度：

同时 Icarus 原版对于移动端的处理是将 logo 放在一个自适应的 div 里，当屏幕宽度小于 1088 px 的时候，导航栏会分成上下两行。

但这对于一个一直固定在顶端的导航栏来说太大了，所以这里我做了个修改，将自适应去掉，把 logo 也放在 navbar-menu 里：

效果图：

当然，还有些更好的方案，比如制作下拉菜单栏，以解决导航栏里的标签页太多超出屏幕宽度的问题，可以见这个旧版本的 PR。有空的时候我会改进导航栏，如果真的有人看的话。

「毛玻璃」

所谓「毛玻璃」，更专业一点的说法叫「Backdrop Filter effect」，即背景过滤效果。所以核心就是 backdrop-filter 样式。我这里依旧模仿的 Apple Newsroom，将 navbar 背景色变透明并增加饱和度和模糊：

再将 navbar-menu 背景设为透明，这样小尺寸屏幕下也能正常显示：

效果图：

最后，修复锚元素定位

我们固定了导航栏，紧接着问题就来了。你会发现之前的页内锚元素跳转全都错位了（比如目录、脚注），更准确的来说是正好被现在的导航栏所遮挡，所以我们要来修复这个 bug。

脚注修复

先来修复简单的，修复脚注我们只需要用到 CSS（因为新版目录是用 JavaScript 来控制 href 属性值的，这个方法就不行了)，这里我们用到一个小技巧，即用 :target 去定位目标元素，并用 ::before 在前面加一个空的行内元素，然后通过 padding-top 和 margin-top 配合来控制位置这样就修复了正文到脚注的跳转错位：

稍微解释一下，这里就是先用 padding-top 将这个空的 inline-block 移动到距离其容器上方 N px 的位置，然后通过 margin-top 将这个容器整体上移 N px 的位置，这样我们就可以通过调整 N 的值来控制元素的位置。

同理，我们还需要修复下脚注到正文的跳转：

这里有一些细微的差别，因为脚注是一个列表，列表的元素应该按一整条一整条来看，所以我们把 display 改为 block，再按照之前的方法适当调整一下距离，最后我们还需要通过 margin-bottom 来对齐文本和序号。

目录修复

如果你不需要一个「随着滚动到不同位置，动态折叠展开」的目录，你可以使用这个旧版本的 toc.js，并且采用上面修复脚注的方式来修复错位，这里我就不赘述了。

如果你需要这样一个「智能」的目录，请采用最新版本的 toc.js 并把它放在 source/js 里，这里我只说下对于错位的修复。

首先在 source/js/toc.js 中创建一个 scrollTo 方法来代替不支持偏移量的 scrollIntoView 方法：

没有什么可说的，非常好理解，然后在下面替换即可：

就是这么简单，我们完成了所有错位修复。

写在最后的、其他的一些玩意儿

感谢你看到这里，零基础的我可能比较啰嗦，这当然不是我在视觉和交互上做出的全部修改，尽量挑了些对我来说比较有代表性的「坑」，大佬们见笑了。一些细枝末节的修改，网络上可能已经有无数篇相同的文章教你如何去操作了，我就不费口舌了。当然如果你有任何疑问、评价或想教我做事儿，也请不要吝啬，请在文末的评论区给我留言，我会第一时间回复。

这是 Candy 主题修改系列的第一篇，应该也是最零碎的一篇，我非常迫不及待地想分享关于黑暗模式的实现，但是先忍住，下一篇将会是关于 Twikoo 的，一个非常崭新的评论系统，美观、安全、易用、免登录、免费等等，虽然它还有很长的路要走，但目前配得上这些美好的词汇。希望我能在官方作者写出详细教程之前发布（逃）。

本文完。