博客架构


框架:Hexo

主题:Theme Fork From Material-Flow

渲染引擎:Marked.js

托管平台:Github Pages Aliyun EC2

同步平台:语雀

保留了大部分的样式。增加或修改了以下这些项目,

  • 采用valine作为评论系统,解决了之前的pjax不兼容问题。
  • 引入思源字体,现在速度跟不上。尝试过google开源的webfontloader,好像没有感觉到很异步的感觉。也尝试过使用内联字,直接转为base64,但这样就是初始的加载太慢了,css大概5M左右。现在暂时使用的是typekit的方案。
  • preload.js,作为预缓存live2d的加载效果。
  • 引入了新的背景,彩色飘带canvas。尤雨溪博客背景。
  • 引入了每日bing图片选项,开启后背景图片为每日的bing壁纸。
  • 引入右下角live2d,一个比较可爱的妹子,作为引导角色。
  • 修复了header由于滚动条宽度造成的问题,vw和%的区别。这一点还是很难完全兼容。
  • 引入了chatbot,基于deepQA的api,可惜。
  • mathJax,SVG静态显式,为了加速动态渲染的过程。
  • toc,还存在Bug,看了一些其他例子,暂时没法解决。
  • pjax,整体采用局部刷新布局,加速网页。
  • aplayer,在pjax的前提下,实现了切换网页播放不停滞。
  • 侧边栏poem,今日诗词api。网页路径更改时自动切换。
  • page essay,利用每日一文API 。点击标题或者侧边栏入口可以切换。
  • page gallery,参考纯CSS实现Google Photos照片列表布局
  • page timeline,参考Material主题
  • page tagcloud,参考Material主题,基本的md风格便签,以及引入了tagcanvas。支持多种形状风格。
  • page Project,简单的展示页。
  • lazyload.js,优化图片加载效果。
  • fancybox,优化图片展示效果。
  • 文章置顶,更改了默认的index-generator。
  • 文章字数以及阅读时长统计,参考hexo-theme-next的实现方式。
  • 文章阅读人数统计,leancloud数据统计。
  • valine,评论系统,也是基于leancloud的,因为与pjax没法兼容,测试了一下可能是因为是leancloud的问题。
  • disqus,评论系统,太丑了。
  • gitalk,基于github repo issues的评论系统,非anonymous。
  • header,主要工作在于适配pjax以及一些跳转按钮的优化。
  • canvas-nest.js,背景的动画粒子线条效果。
  • material-icons,font awesome的引进,作为css 图标。为什么选了两个的原因日志里面有。
  • since,计时系统,参考hexo-theme-next的实现方式。样式参考DIYgod
  • BootCDN,大部分css,js的国内cdn镜像源。
  • font.loli.net,从google fonts更换到国内源。这个好像是个人的?
  • gulp,基于gulp的全站压缩。
  • sitemap,提交了一些站点地图给baidu和google。
  • hexo-douban,这个原来引入了,后来觉得不太合适删了。
  • 想不起来了。

主目录结构

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.
├── public
├── scaffolds
├── source
│ ├── _posts
│ ├── about
│ ├── assets
│ ├── essay
│ ├── gallery
│ ├── project
│ ├── recent
│ ├── tagcloud
│ └── timeline
└── themes
└── material

依赖项

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
{
"name": "hexo-site",
"version": "0.0.0",
"private": true,
"hexo": {
"version": "3.8.0"
},
"dependencies": {
"aplayer": "^1.10.1",
"gulp": "^4.0.0",
"gulp-babel": "^8.0.0",
"gulp-clean-css": "^4.0.0",
"gulp-htmlclean": "^2.7.22",
"gulp-htmlmin": "^5.0.1",
"gulp-imagemin": "^5.0.3",
"gulp-mathjax-page": "^1.1.0",
"gulp-uglify": "^3.0.1",
"hexo": "^3.7.0",
"hexo-autoprefixer": "^2.0.0",
"hexo-deployer-git": "^1.0.0",
"hexo-generator-archive": "^0.1.5",
"hexo-generator-baidu-sitemap": "^0.1.6",
"hexo-generator-category": "^0.1.3",
"hexo-generator-feed": "^1.2.2",
"hexo-generator-index": "^0.2.1",
"hexo-generator-json-content": "^3.0.1",
"hexo-generator-search": "^2.4.0",
"hexo-generator-sitemap": "^1.2.0",
"hexo-generator-tag": "^0.2.0",
"hexo-helper-live2d": "^3.1.0",
"hexo-pdf": "^1.1.1",
"hexo-renderer-ejs": "^0.3.1",
"hexo-renderer-less": "^1.0.0",
"hexo-renderer-marked": "^0.3.2",
"hexo-renderer-stylus": "^0.3.3",
"hexo-server": "^0.3.1",
"live2d-widget-model-hijiki": "^1.0.5"
}
}

更新日志

  • 2019/02/16

细节优化了live2d的显示效果,加入了preload.js实现缓存。

  • 2019/02/13

全面引入gulp压缩资源,以及将mathjax转会svg存放。

引入了Poem,Essay两个功能,随机更换内容。增加静态博客的动态性哈哈!

正本清源,删除了hexo-douban在内的一些冗余功能。

  • 2019/02/12

引入update_date属性。

引入跳转底部按钮,在当前页面没有评论的情况下,因为跳转评论约等于跳转底部。

  • 2019/02/11

重写了架构,改用局部刷新。

引入aplayer,采用固定末端的形式。

引入评论,优先考虑兼容pjax,最终选定gitalk

  • 2019/02/06

干脆直接就删除了翻页处的icons

修正了原先material-design-icons的位置偏差。

加入了hexo-douban,豆瓣读书,电影,游戏页面。

  • 2019/02/05

原先icon是icomoon webfont,本地引入。更换乘了material-icons + fontawesome的组合,为什么要用两个的组合,因为暂时没找到一个比较全的web font。

引入了文章阅读字数,阅读时长,hexo-wordcount,以及阅读人数,busuanzi.js

更新了文章排序方式,引入了top字段。现在的逻辑是,只在index页面引入top字段,在tag和category不引入。

加入了3D 动态词云效果,参考TagCanvas

修复了on-phone端的显示效果。

  • 2019/02/03

引入了canvas-nest.js

  • 2019/02/01

之前习惯了用语雀作为在线写作的工具。所以考虑把本地的一些文档全部迁移到语雀上去。

语雀给开发者提供了很好的api接口,通过token验证,很轻松就可以把云端的一些文档pull到本地。

文档地址:API

原来想一口气把所有的doc都同步,但是发现语雀editor2.0对应的markdown导出api,对之前的bug似乎进行了一个错误的处理,期待2.0版本整体迁移到3.0版本的编辑器。后续会把一些笔记慢慢同步到这个Blog。

其实同步到语雀的另一个好处,就是变相使用了国内的CDN加速哈哈。所以你会看到许多静态资源实际上指向的是Ant对应的存储服务。