新特性

在这里记录我手搓本博客主题的一些感受，哈哈。

排序时间从近到远。

系列文章入口

移动端现在也可以查看系列文章目录，系列文章也有独立的页面了。

目前只有一个系列：旅行

移动端目录入口优化

当页面宽度小于 1280 px时，目录会被收进顶栏的按钮中，需要点击打开。

现在当页面从下往上滑时，用户可能正在寻找目录按钮，此时将顶栏悬浮，方便操作，无需回到顶部。

图片 Exif

点击下图可展示 Exif 信息

图片 Caption

龙猫
--宫崎骏打开大图查看 Caption 内容

“系列”边栏

目前只为旅行游记文章添加了“旅行”系列标签。

悬浮的文字

例如 悬浮这里 可以看到一些额外的文字。因为我经常有一些补充文字想写，比如 某些文案（补充说明），写多了感觉也不美观，以 ToolTip 形式展现或许是一个不错的选择。

相关文章

筛选所有文章中标签和当前页面文章标签重合达到 2 个以上，则认为它们是相关的，根据日期倒序展示最多 3 篇相关文章。

代码高亮

copy 了一些 highlight.js 中 GitHub 主题的配色方案。

大图预览插件

使用 PhotoSwipe

支持收缩代码块

移动端目录适配

目录 active 状态

现在支持在滚动页面时自动将当前阅读的内容块标题加粗。

整理CSS

预处理器用的是 SASS，将 @mixin 和 @media 相关的样式放入单独的文件。修复了之前部份样式需要用 !important 提升优先级的问题。

封面图地点信息

点击可唤起 Apple 地图。

文章页侧边新增目录

当文章内容较长的时候，有目录的话比较容易直接跳转到想看的部份。

提前加载评论数据

之前我的想法是在滚动到评论区域时才去加载评论模块的 js/css 和数据，避免在进入页面时加载不需要的东西。最近发现这样的感觉有点慢，总是要等一会才能看见评论，于是转念以前还是决定提前加载它们。

用于监听的元素放到了第二个副标题后面，也就是说当读者滑动到第二个 h2 时，我就认为他有可能会一直阅读到最底部去看评论。

更新完感觉确实体验提升了一些。

文章字数统计

1
2
3
4
5
6
7
8
9
10
11
12
13

<%
  const content = post.content || "";
  const text = content
    .replace(/<figure[^>]*>.*?<\/figure>/gs, "")
    .replace(/<noscript[^>]*>.*?<\/noscript>/gs, "")
    .replace(/<style[^>]*>.*?<\/style>/gs, "")
    .replace(/<script[^>]*>.*?<\/script>/gs, "")
    .replace(/<\/?[^>]+(>|$)/g, "")
  
  const currentLanguage = page?.language || config?.language;
  const words = (currentLanguage === 'en'? text?.split(' ')?.length : text?.trim()?.length) || 0;
  const photos = content.match(/class="gallery-item/gi, '')?.length || 0;
%>

复制代码

代码块不能复制着实是非常地不方便，整一个。

一开始想着用伪元素，但是写完样式发现点击事件不会作用于伪元素，除了定位没有其他办法判断点击了复制。

只好用 hexo 的钩子在构建的时候给代码块追加一个 <div class="copy-btn"></div>

手搓主题 1.0

换上了手搓主题 1.0。为什么想自己写一个主题呢，主要是我想要我的博客《小而美》。之前的主题 Icarus 也很符合我的审美，但是它对我来说有点重。过多的插件，有些无从下手去精简，干脆自己搓一个。