cover-img
avatar

托码特人

分享科技与人文

一个关注互联网的技术博客

The-Update-For-JSimple-in-Early2019

JSimple-Snapshot-Macbook Pro15

效果如上, 更新日志如下

  • 修复夜间模式下,一直被诟病的代码高亮部分空白;
  • 修复返回顶部按钮在 Chrome 下失效的问题;
  • 新增文章置顶功能;
  • 新增 DNS 预取条目,尽可能为站点提速;
  • 替换搜索模块,使用新的本地搜索,内容关键词也可高亮;
  • 优化 404 描述页若干;
  • 替换统计模块为Google Analysis
  • 新增文章,分类,标签等处Google AdSense,为大客户提供方便的流量套现操作;
  • 新增图片懒加载操作;
  • 新增作者统一配置,即优先读文章作者,其次主题作者;
  • 国际化(i18N)优化;
  • 去掉丑陋的滚动条;
  • 优化文字样式、对其方式、屏宽若干;
  • 优化配置字段,去掉不必要的配置项;
  • 页脚链接优化,增加网站地图;
  • 合并资源文件,减少 http 请求(搭配 Gulp 效果更好);

下边对部分模块分别说明

1. 搜索

由于旧版本(< 0.0.7)的搜索,有样式问题,且无法检索文章内容,关键词也无法高亮。此次更新引入Next主题的Local-Search

JSimple对此进行了二次修改,改进了搜索函数不合理或者有潜在问题的地方。新增键盘流操作。**正常浏览时,按F键可迅速唤起搜索;再按ESC可关闭搜索**。理想的交互下,应该使用方向键控制检索结果的选择,无奈改动较大,没有足够的时间精力投入,暂且放弃治疗

需要注意的是,搜索需要引入:hexo-generator-search库,它将为检索内容提供数据保障

2. 置顶

Hexo是静态站,没法做到类似WP那样后台配置一下就能顶。因此这个操作只能在生成静态 HTML 时做改变。

新版本目录中,增加了patch操作,其中generator.js就是置顶逻辑处理。需要将其替换到对应目录中,置顶方能生效。

另外两个文件,是对文章增加了timestamp字段,用在配置文章地址时。一般安装主题后,执行一下:./run.sh即可。当node_modules不慎删除或迁移站点后,页需要执行一次。

3. 广告

策略如下

  1. 首页列表间:使用自动广告,一般会出现在分类列表中间。考虑到首页加载速度与体验及展示量,特使用自动广告取平衡,即:随缘展示。
  2. 归档页:首部横向自适应广告
  3. 标签页:尾部横向自适应广告
  4. 文章页:分布两侧,以及末尾。

为什么用AdSense,个人基于以下几点:

  1. 域名无需备案就能用;
  2. 覆盖面广,如果你是针对这个地球的读者,那目前没有比它合适的;
  3. 美元到帐,收益可观;
  4. 广告质量相对人性化和底线化;

当然,如果观人不喜欢Google套装,请其自力更生…

4. 加速

本次将可以合并的资源,写到了一个文件。如对JQuery的引用不再是从 CDN 拉。引入DNS-Prefetch操作,尽可提高响应速度。

关于 Gulp 压缩资源的操作,请参考这边文章:引入 Gulp 压缩整站资源进一步提高写作效率

5. 将来

  • Disqus 新增局部刷新操作
  • 搜索结果支持方向键选择
  • 更爽的移动端视觉及交互

拖了一个大礼拜,置顶了一大周,终于「象征性」的补完了…… 😅😅😅

赞赏

声明: 本文内容由托码斯创作整理,由于知识水平和时效性问题,行文可能存在差错,欢迎留言交流。读者若需转载,请保留出处,谢谢!