Lolipop's Studio.

基于 Archer 主题的博客开发

字数统计: 971阅读时长: 3 min
2019/12/27

本博客使用的主题 Archer 有足够稳定以支持长期运行。不过正好学习了一些前端开发技巧,不如在使用过程中对本博客的页面做一些小小的开发及优化。

更新日志

2021/07/28

v1.6.3 版本合并到了主分支,主要添加了 Dark 模式支持。

添加了一些令人舒适的动效,另外修复了很多编码和依赖相关的问题。

2021/06/26

有幸成为了 hexo-theme-archer 的维护者的一员,最近也把自己开发的 v1.6.2 版本合并到了主题的主分支上去。

  • 修复了代码格式化脚本。现在使用 npm run prettier 能够正确地格式化项目代码。
  • 修复了一些已知问题。
    • 顶部 header 元素不再遮挡点击事件。
    • 回到顶部按钮现在正确配合侧边栏动画移动。
    • 博文的列表间距现在更加合理。
    • 修复博文的超链接,以及 banner 博客名的间距配置。
    • 去除博文标题前面占位的 headerlink。
    • 修复 Toc 过长时隐藏的问题。
  • 添加了一些主题配置。
  • 添加了中国建站用户备案信息配置。
  • 优化了前端工程化代码生成逻辑。添加了 postcss autoprefixer 支持。
  • 优化包括移动端在内的博客样式表配置。
  • 更新了评论插件 Gitalk 版本,并添加主题颜色支持。
  • 移除了不必要的依赖。

2021/05/20

刚好最近整理学习了函数节流和函数防抖的知识,用到了博客 JS 代码中的滚动事件上边,提高了一些性能。

  • 些许提高了页面滚动性能。坏处是悬浮按钮样式转变可能会有细微的不顺滑。
  • 修改了一些页面设计。例如,把悬浮按钮设置为侵略性更低的圆形,鼠标悬浮时呈主颜色。
  • 修复了打开侧边栏,回到顶部按钮不随侧边栏移动的问题。
  • 现在博文页面向上滑动更容易显示顶部 Banner 了。
  • 注意到链接有莫名奇妙的 padding-left: 2px;,于是加上了 padding-right: 2px;,嘿整洁。
  • 优化了手机端侧边框的宽度,避免把按钮挤出界面外。

2021/05/19

也算使用这个主题一阵子了,今天终于操刀把一些自己觉得可以改进的地方修改了一下。主要包括:

  • 设置了自用的主颜色。从原来充满活力的橙红色(#f75357)修改为了现在的叫不出名字的蓝绿色(#61bfad)。
  • 修改了部分颜色设计。譬如将大多数纯黑色修改成了灰黑色,更加柔和。
  • 为博文的列表添加间距。不知为何一直没有人修复这个,添加间距后列表会好看很多。
  • 修改博文向上滑动时,顶部出现的 banner 的设计。不大喜欢原来白色透明很多,还在底下加黑色边框的感觉。于是降低了透明度,去掉了黑色边框。此外标题部分有一个 padding-bottom 属性,导致标题不能垂直居中对齐,遂去掉。

2020/08/21

  • 合并了原作者 2020 年 3 月 9 日提交的博客主题版本。

2019/12/28

  • 现在可以通过点击按钮关闭侧边栏。由 Stark-X 修复。
  • 为推文页面的头图和 404 页面开启了 unsplush 随机图片接口。Watch your network flow!

预计开发的内容

网页菜单栏

预计在网页上方添加菜单栏,方便索引一些页面。

移动端适配

目前的侧边栏对移动端的支持很差,无法实现右滑显示和左滑关闭。

预计在移动端设计全覆盖页面的侧边栏。

CATALOG
  1. 1. 更新日志
    1. 1.1. 2021/07/28
    2. 1.2. 2021/06/26
    3. 1.3. 2021/05/20
    4. 1.4. 2021/05/19
    5. 1.5. 2020/08/21
    6. 1.6. 2019/12/28
  2. 2. 预计开发的内容
    1. 2.1. 网页菜单栏
    2. 2.2. 移动端适配