这是我第一款自制的博客主题,以前的都是在别的作品中进行二次改造,就像该博客用的是在以 bigfa 的 Puma 主题的基础上进行二次改造的新主题 —— Seed。

为何叫 Areseia,因为我刚想名字的时候正在听 eufonius 的 アレセイア(GalGame 五彩斑斓的世界 OP)。前一作的主题名也是刚好在听 ALVINE(MiU) 的 seed of happiness(GalGame ナツイロココロログ 的 ED)。

主题参考了很多大佬们的设计风格,例如 Amaze 和 Berry 。也有一些地方只能在 Bootstrap 的中文文档的主题中照搬过来...

主题特性

  1. 能看的界面
  2. 请自己感受

主题预览

请回首页

有待完善

  1. AJAX 评论 (未添加)(我不会弄_(:зゝ∠)_)
  2. 优化性能和风格

下载地址

https://github.com/finer04/Areseia

可以 git clone https://github.com/finer04/Areseia.git。也可以直接 Download ZIP。

放到网站目录的 usr/themes/ 即可

注意

  1. 关于自定义文章特色图像设置,如图所示
    TIM截图20180522181738.jpg

更新日志

1.2.6

(包含为 1.2.5 - 1.2.6.5 的版本)

  1. 新增图片 lightbox 功能
  2. 添加字数统计
  3. 重做评论区的样式,改为卡片式
  4. 添加回到顶部按钮
  5. 在首页的文章 meta 中添加评论数量
  6. 可以在 Typecho 后台设置统计代码和开启平滑滚动
  7. 修复了以下问题:

    • 高分辨率下的排版问题
    • 文章目录不生效问题
    • 点击图片后文章目录偏移问题
    • 图片对文章排版的问题
    • 宽度低于 576px 移动端的排版问题
  8. 对部分细节进行修整

1.2.2

  1. 合并其他 Javascript 文件(optimized.js 将会比较大,建议上gzip或br压缩,加载可压到 31kb )
  2. 悬浮文章日期可以显示最后更新日期的气泡,给图片定上 title 属性也可以显示气泡
  3. 修复火狐浏览器显示文章目录的重复调用问题,浏览器后退前进重复调用的问题
  4. 调整首页文章滚动加载的效果,滚动速度过快估计不会出现 bug 吧

1.2.1.3

  1. 用 instantclick 替代 pjax
  2. 修复 instantclick 的回调问题(在firefox,会回调两次toc插件..而chrome和edge却没有,以后再修复)
  3. 修复特色图像的遗留问题
  4. 修复在文章页面,浏览器返回的时候,主页文章滚动特效再次执行的问题

1.2.1.1

  1. 移除特色图像的滚动模糊特效,不然导致 Chrome 用户初次滚动页面体验极其糟糕(只保留透明)
  2. 修正调整浏览器窗口后,特色图像不跟随调整的问题
  3. 暂时移除 Smoothscroll

1.2.1

  1. 移除 wow.js 和 animate.css (以后的动画效果用 velocity 控制)
  2. 新增文章目录 (toc)(移动端不显示)
  3. 修正后退页面时,pjax不回调函数问题
  4. 调整部分代码

1.2.0

  1. 新增无限加载文章(直到尽头)
  2. 优化动画效果
  3. 优化并修复一系列 bug
  4. 新增图片的 lazyload

1.1.6

  1. 修复文章头像在某浏览器无法显示问题
  2. 调整文章meta的位置逻辑
  3. 使用油猴的SmoothScroll,感觉加速度比原版好得多。
  4. 引用合并好的 js 文件。
  5. 关于 Banner 的最终解决办法

1.1.5

  1. 真的解决了各浏览器的 Banner 各种问题(应该是适配好了吧,别再给我出新问题了!!
  2. 用 gulp 合并了的主题需要的几个 js 文件(PJAX+headroom+bootstrap.js+wow.js+SmoothScroll),但默认不使用,如果要用的话就在 footer.php 的引用 js 代码中添加 <script src="https://finer04-cos.b0.upaiyun.com/optimized.js"></script> 吧。

1.1.2

  1. 添加 404 页面
  2. 调整特色图像的判断语句
  3. 添加 Pjax 的加载动画效果
  4. 新增平滑滚动(SmoothScroll)
  5. 精简并调整部分代码
  6. 添加文章最后更新日期(需要悬浮文章时间才能看到)

1.1.0

  1. 修复 firefox 的 post-date 问题
  2. 文章标签放在文章最末
  3. 重做评论区的评论样式
  4. 添加文章特色图自定义字段(img),如果没有设置,文章将会以第一张图/第一个附件作为特色图
  5. 修正分类页面无特色图像banner
  6. 引用块首行不缩进
  7. 添加文章最后更新日期(需要悬浮文章时间才能看到)

1.0.0

初版

参考笔记

对于我这个新手来说,只有查阅其他大佬的作品的代码和笔记才能勉强做得像样,在这里也列出我参考的文章,以便将来弄新主题

使用的开源项目

  • jQuery:用于实现主题的扩展功能
  • Velocity:控制动画效果,不需要 animate.css
  • popper:用于实现提示冒泡效果
  • Bootstrap.js:扩展 bootstrap 主题的组件功能
  • Instantclick:用于实现无刷新加载
  • jQuery-ias:用于实现首页无限滚动加载文章效果
  • jquery.inview:用于实现 lazyload 和文章特效的滚动特效
  • headroom:用于实现导航栏的显示特效
  • bootstrap-toc:用于实现文章目录功能,基于bootstrapv4的样式