0°

VOID-精致

一款优雅精美的Typecho主题

来源于/演示:

https://blog.imalan.cn/archives/247/

Github/最新版本:

https://github.com/AlanDecode/Typecho-Theme-VOID

本站下载:

版本:2.0.1

VOID-2.0.1

提取码:无,解压码:

下载

Typecho-Theme-VOID-2.0.1(源码)

提取码:无,解压码:

下载

VOID-1.6.4

提取码:无,解压码:

下载

特性

演示站点:熊猫小A的博客,介绍文章:VOID:现在可以公开的情报

  • PJAX 无刷新体验
  • AJAX 评论
  • 响应式设计
  • 优秀的可读性
  • 代码高亮
  • MathJax 公式
  • 表情解析
  • 图片排版(可用作相册)
  • 灵活的头图设置
  • 目录解析
  • 够用的后台设置与丰富的高级设置

以及其他很多细节,总之用起来还算舒服。我建立了一个示例页面,在这里你可以看到 VOID 对常用写作元素的支持以及一些特色功能演示:示例页面

开始使用

  1. 下载主题:发布版 | 开发版
  2. 解压
  3. 把解压后的文件夹重命名为 VOID
  4. 检查文件夹名是否为 VOID,不是的话改成 VOID
  5. 检查文件夹名是否为 VOID,不是的话改成 VOID
  6. 检查文件夹名是否为 VOID,不是的话改成 VOID
  7. 上传文件夹至站点 /usr/themes 目录下
  8. 后台启用主题
  • 可选:将主题 assets 文件夹下的 VOIDCacheRule.js 复制一份到站点根目录,并在主题设置中启用 Service Worker 缓存。
  • 可选:主题文件夹下 advanceSetting.sample.json 中有一些高级设置,可以看看。

常见问题(请务必仔细阅读)

下载安装后样式不对?

仓库中的是未压缩的源代码,包含大量实际使用中不需要的文件,并且可能无法直接使用。请一定通过这两个链接下载主题:发布版 | 开发版

添加归档页面

新建独立页面,自定义模板选择 Archives,内容留空。

添加友情链接

新建独立页面,然后如此书写:

[links]
[熊猫小A](https://www.imalan.cn)+(https://secure.gravatar.com/avatar/1741a6eef5c824899e347e4afcbaa75d?s=200&r=G&d=)
[熊猫小A的博客](https://blog.imalan.cn)+(https://secure.gravatar.com/avatar/1741a6eef5c824899e347e4afcbaa75d?s=64&r=G&d=)
[/links]

文章中、独立页面中都可以通过该语法插入类似的展示块。

图片排版

在文章中,使用 [photos][/photos] 包起来的图片可显示在同一行。例如:

[photos]
![](https://cdn.imalan.cn/img/post/2018-10-26/IMG_0073.jpeg)
![](https://cdn.imalan.cn/img/post/2018-10-26/IMG_0053.jpeg)
[/photos]

[photos]
![](https://cdn.imalan.cn/img/post/2018-10-26/IMG_0039.jpeg)
![](https://cdn.imalan.cn/img/post/2018-10-26/IMG_0051.jpeg)
![](https://cdn.imalan.cn/img/post/2018-10-26/IMG_0005.jpeg)
[/photos]

浏览量统计

使用插件:TePostViews

TePostViews-Typecho文章浏览数统计插件

015

文章点赞

使用插件:Like

Like-Typecho文章点赞插件

011

更新

开始使用,区别是你可以直接覆盖主题文件,不禁用主题,这样你的主题设置就不会丢失。

 猴子打字机原理的产物

VOID 是我从头开发的全新作品。开发过程中借鉴了 Ghost 默认主题 Casper 与水八口开发的 Bitcron 主题 Card

VOID 中图片的展示占了很大的比重,首页上文字量很少,一眼看过去是十来张图片。另外,你或许会有这样的感觉:VOID 这个主题方方正正的,显得很端庄的样子。确实是这样的,主题中圆角很少,不规则的图形也很少。

这其实是我自己动的一点小心思。

既然是挂上了 MIT 许可的开源项目,自然就没有立场干涉别人怎么用。但多少是自己的作品,心底里对别人如何使用它还是有所期待的。DIYgod 在关于开源项目赞助这件事里提到 DPlayer:


作为计算机术语时,VOID 的意思是「无类型」。在本文中,它是由我开发并开源的第二款 Typecho 主题。

写本文时距离我发布上一款也是第一款主题 RAW 并不久。一开始我对 RAW 很满意,但它逐渐成为了我的试验田、游乐场,而不是一个可以给大家使用的作品。一团乱麻的代码,不甚合理的设计,冗余过度实用不足的功能集,让维护与进一步开发变得没有乐趣可言。

回头想想,这几个月通过开发与维护 RAW 也学到了不少东西,认识了不少朋友。当它无法为我带来更多的乐趣时,我意识到 RAW 在我这里的使命已经完成,是时候前进了。

…再加上用户大多是盗版站和小黄站,这曾一度让我产生了弃坑的想法。

若要我说出最诚实的想法:我希望使用这些主题的博主,能认真地多写几篇正经文章,这才是独立博客的精髓。一两句话的牢骚,大可以去微博与 Twitter 上说;花花绿绿的代刷广告与盗版采集还是免了吧。

「媒介即讯息」。虽然这句话放在这里不甚恰当,我实际要表达的意思是主题的形式能在一定程度上影响作者的产出。VOID 的排版很规整,可以用来修改的空间并不大,甚至连个广告都很难找到合适的地方放。再加上图片占了很大比重,若是不认真对待,恐怕用这个主题的结果就很难看了。

这是自损八百的做法:我丢失了一部分潜在的使用者。但并非不值得。

去除了繁杂的功能、版式,最终还是回归到文本上来。如何使网页可用性更高是一个很大的话题,涉及到排版、无障碍等等方面。VOID 的文字样式使用 Lepture 的项目 yue.css,经过我的反复考虑,这个 CSS 集应用到内容块上效果很好。有一个小的改动:原项目的字体默认大小是 18px,综合考虑下 VOID 使用了 17px。相比起 RAW,以及其他许多主题,应该能感觉到 VOID 的文字可读性要高得多。

无障碍这一块 VOID 现在做得不好。主要是因为我主业并非前端,全凭兴趣,某些基础修养尚有欠缺。这将在后续的维护中逐步提升。

我不准备在这篇文章中详叙 VOID 的使用方法与功能,罗列功能是一件很无聊的事情。这部分内容请参阅主题的 GitHub 主页:AlanDecode/Typecho-Theme-VOID,功能更新与 bug 修复记录请查看 GitHub 上的提交记录


其实基本的思考是:独立博客到底应该是什么样的。

这个问题我无法回答,恐怕叱咤独立博客界 17 年之久的 Daring Fireball 作者 John Gruber 也给不出让所有人信服的回答。这个问题大概本来就没有答案。

互联网发展到现在,带宽、内容丰富程度都与 20 年前不可同日而语。独立博客这样需要坐下来花上个把小时写文章的介质实在很难与 GIF、视频、emoji 抗衡。

作为一个写主题的人,能做的只有为博主带来无障碍的写作环境、为读者带来无障碍的阅读环境。不要去打击博主可能的创作欲,也不要给想获取信息的读者平添难度。

你觉得这简单吗?这一点也不简单。

开发

如果你有不错的想法,可以定制自己的版本。首先你需要准备好 NodeJS 环境,然后 clone 这个 repo:

git clone https://github.com/AlanDecode/Typecho-Theme-VOID ./VOID && cd ./VOID

安装依赖:

npm install -g gulp
npm install

然后将依赖打包:

gulp dev

你可以使用自己喜欢的方式编译 SCSS,或者使用:

gulp sass

监听 SCSS 更改然后实时编译。尽请添加自己想要的功能,满意后就提交代码。然后:

gulp build

构建你的主题,生成的主题位于 ./build 目录下。如果你对自己的更改很满意,欢迎提出 Pull Request

鸣谢

开源项目

JQuery | highlight.js | MathJax | fancyBox | bigfoot.js | OwO | pjax | yue.css | tocbot | pangu.js | social | Headroom.js

其他

RAW | Mirages | handsome | Card | Casper | Typlog

因主题原因,在示例代码中,有部分
0 条回复 A 作者 M 管理员
    所有的伟大,都源于一个勇敢的开始!
欢迎您,新朋友,感谢参与互动!欢迎您 {{author}},您在本站有{{commentsCount}}条评论