加载中
首页 » 文章 » Typecho Theme RAW 发布

Typecho Theme RAW 发布

“在互联网上寻找栖息之地”

开始使用 | 常见问题 | 欢迎给我 star 与各种 PR!

从我动手开始写这个主题到现在许多地方与之前已经大有不同。另外还有一些设计了却没有实现的部分,以及实现了后来又删掉的部分。

这个主题叫做 RAW,我花了一个周末写出了这个主题的第一版,考虑到我前端零基础1的事实,效率应该还算可以。不过后期删删改改,增添了许多功能,花的时间就不是一个周末而已了。

自 2017 年入坑个人博客至今,我稳定使用过 handsomeMirages 主题;也短暂地使用过 Moricolor;购买过 YoduGiligili 主题,但都未曾长时间使用;短暂地迁移到 Hexo 时用的是自己修改后的 hexo-theme-cactus

我想自己写一个主题已经很久了。以上说的主题很受欢迎,完成度高,用起来很舒服,只是不能满足我想要自己折腾的冲动。一者,成品(甚至收费的)主题代码都很工程向,功能繁杂,我想插手改动并不容易;二者,在别人的基础上做些修修补补的工作总觉不够味。因此,何不自己写一个呢?所以有了这个主题。

写到一半时我突然担心没办法开源了,因为写完之后左顾右看总觉得和别的主题雷同。直到我又花了几天做出了差异性的地方,才敢斗胆把这个主题放出来。大概因为这毕竟是我的第一个主题,不能让她烂在我手里了。另外,毕竟自己从别处学到了很多东西,还是饮水思源吧。

外观

Screenshot from 2018-10-06 23-06-34

你应该已经看到了,整个博客主要分成中间的与两边的小组件。因此我无法称这个主题是「极简主义」的,虽然精简确实是我的初衷。

首页

首页的文章列表有三种形式:「短文章」,无主图的,主图靠左显示的,以及标题叠加在主图上的;后两种形式在小屏幕上都会自适应为标题叠加在主图上。

短文章是一类比较简短的文章,例如一段引言加上自己的评论,或者一段小感想。这样的内容其实不适合在主页上放大大的标题让人点进去(实际上这样的内容想一个标题都很困难)。因此我会直接展示文章的全部内容,仅留一个评论入口。你可以将其用作说说。

当然还有「面包屑导航」与「博客公告模块」。

主页文章列表虽是我自己的实现,但是很大程度上借鉴了 lepture 的博客 Just Lepture,这是一个很美的博客。

文章页面

文章页面的总体目标是易于阅读,为了适应我自己的需求,添加了代码高亮、流程图等功能,同时还借助 zoom.js 添加了好用的图片点击放大功能。本来还添加了并列图片的功能,但后来觉得必要性不大,就取消了。

某些技术性文章可能篇幅较长,为了把握整体结构以及快速跳转查阅,我添加了好用的目录功能,可以在文章编辑页面选择是否启用。比如这篇文章就启用了目录,目录显示在右侧边栏。点击目录顶部的按钮可以选择收起或者固定,一切都是为了更方便的使用。

独立页面

关于与友链

你需要至少创建两个独立页面,「关于」以及「友链」,其中关于页面的 slug 设置为 about,友情链接页面的 slug 设置为 links,否则顶部导航栏这个两个链接会 404。

添加友情链接的语法是:

<div class="board-list link-list">
...
[名称](链接)+(头像)
...
</div>

你也许需要用 !!! 来把 div 标签包起来。

屏幕截图 2018-10-07 00.51.59

归档页面

这个主题目前没有归档页面,同理的,也没有(专门优化的)标签、分类页面,究其原因是我不在意这些页面:写过的文章权当过眼云烟。因此,我想这个主题不适合大量发文的博主。

与此同时的,我希望来访的人多用搜索功能。数字世界里搜索是极为高效且自然的动作,胜过在归档列表与分类列表里翻找。

搜索按钮在页面右上角,点击它,或者键盘敲击 Esc 键均可打开、关闭搜索面板。希望你(在各种意义上都)能找到自己想要的。

其它页面

我的博客中还有两个个页面比较特殊:读书、电影,可以分别展示豆瓣读书与豆瓣观影的内容,这是我挺引以为傲的功能。后端的数据解析参考了 handsome 主题。不过目前还没有加入主题中,只是自用。其实大部分已经写好了,下一步会加上。

为了把这些页面里面的那些块排列漂亮,我研究了好久 flex 的用法,最终才找到了现在这种比较不错的实现,算是真正体会到了钻研技术的乐趣哈哈哈。

屏幕截图 2018-10-07 00.51.44

特色功能

响应式设计

当然,这个主题是响应式的设计。动手之初我给自己定的目标是尽量少用 JS,能用 CSS 解决就 CSS 解决。最后完成度尚可吧,只是有些我实在不知道怎么实现才用了 JS。这个主题 JS 代码量挺小的(除开第三方的项目)。

在小屏幕上,侧边栏和目录列表都会隐去,通过按钮控制显隐。

mobile-demo

PJAX 无刷新体验

这个主题支持全站无刷新,也就是说浏览本站内容时全程不用跳转不用刷新页面,这让浏览体验更加顺畅与连续。由于不用再次请求与执行多余的 JS 与 CSS,这也会使得站点速度更快。

同时,这使得全站无间断的音乐播放与快速的搜索体验成为可能,整个网站就像是一个 native app 一样易于使用。同时评论也支持无刷新,一切都很美好。

PJAX 功能是默认开启的,目前不能关闭。关于 PJAX 的更多问题见:常见问题 - PJAX

另外还搭载了 AJAX 评论。只要是涉及到评论系统,事情就有点难办。但现在这个博客加上了 AJAX 评论。不完美,但有。

好用的搜索

本站暂时没有归档页面,我建议来访者使用搜索功能。我从写这个主题之初就笃定了要把搜索做好,最后完成尚可。右上角的放大镜图片点击则能打开搜索面板,或者任何时候使用 Esc 键都可以打开/关闭搜索面板,点开后输入框会立刻获得焦点,你可以立即开始输入并回车开始搜索,我认为这个过程体验是很好的。

全站音乐播放器

如你所见,侧边栏有一个音乐播放器,它在浏览站点的全程不会停止播放。关于如何启用这个功能见:常见问题 - 自定义左侧边栏的音乐歌单

文章点赞与浏览统计

文章点赞与浏览统计可以让浏览的交互性更好,并且博主得到的反馈也更多。最多浏览的文章会显示在右侧边栏里,这可以帮助浏览者发现优质内容。文章点赞与浏览统计的使用方式见:常见问题 - 文章浏览统计与热门文章

好用的侧边栏组件

一个三栏主题的最大优势就是侧边栏的存在。目前这个博客有这几种组件:站点作者简介,站点运行计时,全站播放器,热门文章,最近评论;如果你的文章启用了目录的话也会显示目录列表。右侧的小组件点右上角的按钮还可以收起或者展开。

以后会开放更多的设置,帮助你自助添加侧边栏组件。我相信这是凸显博客个性的绝佳方式。

镜像 CDN

你可以为主题设置镜像 CDN,这样静态文件(JS、CSS)就会从 CDN 加载,节省本地带宽。

调试模式

也许你和我一样很喜欢折腾自己的站点,调试模式就是为你而添加的。启用了这个功能后会通过在 URL 后添加随机参数的方法迫使浏览器刷新缓存并加载未压缩的原始 JS 与 CSS,方便你的随时看效果。启用了这个功能后镜像 CDN 的选项会失效,所以日常不需要打开。

自定义 CSS 与 JS

主题开放了在 head 中与 footer 后输出内容的选项,你可以在这些部位引入 JS 与 CSS,达到自定义站点的目标。

写在后面

其实还有许多别的细节,但我决定先说到这里了。

目前是主题的 0.1 版,许多地方不甚完善,我也是仓促之中将一团乱麻的代码稍作整理就上传到了 GitHub。许多本应该开放设置的地方(比如备案号等)尚没有开放,因此大约需要自己改一改代码。我会继续完善这部分内容。

动手之初,除了期待获得一个属于自己的主题之外,也期待能在 JavaScript、CSS、HTML、PHP 等方面有所进步。我没有采用前端框架(但是使用了 JQuery),CSS 样式均使用标准语法2,因此兼容性方面堪忧(IE 上简直一团糟),不过在我这里兼容性优化的优先级是最低的,我不想太多花时间在这上面,除非是非常巨大的问题。

简单的 CSS、节制地使用 JavaScript 代码,一者是因为我就这水平;二者也有些对「简洁」的追求。之所以起名字叫做 「RAW」,也是类似的考虑:表达的欲望是很原始而简单的欲望。每个人都应该找到属于自己的表达方式,当然不一定是博客。

Credit

评论嵌套与评论列表样式部分来自:Mirages。这个主题的写作过程离不开 MirageshandsomeJust Lepture 等的帮助,感谢。

本项目引用了:

JQuery | highlight.js | MathJax | FlowChart | OwO | zoom.js | jquery-pjax

感谢以上项目。


  1. 其实后端也是零基础,但我觉得前端部分要繁琐得多…
  2. 即大都没有带上类似 -moz- 这样的厂商标识

添加新评论

已有 86 条评论

  1. 蛮精致的

  2. 简洁和功能性貌似是两个相对立的词,想多加一些功能就显得不那么简洁了,完全的简洁又显得有些简陋,好纠结。

    1. @Ryoma所以还是得多花一点时间做取舍。
      这个主题开始基本上只能显示文章而已,后来是我自己觉得有侧边栏更好用(比如目录什么的),才加上的,结果功能越来越多了。
      只能尽量让它用起来直观顺手吧。

  3. 测试一次 AJAX 评论

    1. @测试账号安排上了!

  4. 先Star为敬!

    1. @援军谢谢你 还有,你的站好厉害!

  5. 厉害了博主 厉害了博主

    这个比handsome好用。

    1. @厉害了博主哈哈,别,handsome 是我见过最完善的 Typecho 主题了,还有 Mirages 也是。我是真佩服这俩主题的作者。