Typecho Theme RAW 发布

请注意,本文编写于 282 天前,最后修改于 6 天前,其中某些信息可能已经过时。

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

我目前已经没有使用 RAW,因此这个主题转入维护性更新阶段。也就是说它在未来仍然可能收到 bug 修复这样的更新,但是大概率不会有新的功能了。另外,我会在近期重写这个主题的代码,但同样,只是代码层面上的更改,使用上与当前不会有什么变化。

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

Theme RAW 交流群已建立,目前处于无人打理的自由水状态,欢迎进群讨论:777536599

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

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

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

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

几经周折,最近(2018-11-02)我将这个主题从最初版本完全重写,本想新开一个坑,但由于其实整体的样式没有太多改变,因此还是合进了 RAW。

主题升级方式请看:如何升级

相关文章

更新日志

2019-01-03 Ver 0.94

  • 调整字体加载顺序,减少首页白屏时间
  • 最近修改日期超过 100 天添加提示
  • 设置背景图时可选是否启用半透明背景
  • 新的主页文章列表样式
  • 添加主页默认头图设置,支持随机图片API
  • bug fix

更多日志信息查看:Theme RAW 开发日志

外观

三栏布局
三栏布局
两栏布局
两栏布局

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

博客有两种版式,三栏与两栏,也是我观察大多数博主会喜欢的两种样式。

首页

首页的文章列表有两形式:短文章、一般文章。

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

虽说短文章很像说说,但它不是说说。它最好依旧是可以成文的文章,只是篇幅较短。如果你想要使用说说功能,主题同样有提供,见后文。

说说
说说

当文章设置了主图时,首页文章列表将显示主图,否则不显示。

首页两侧分别是作者面板、站点导航、全站友链、最近评论、热门文章。顶部也是导航,不同的是这里的导航在小屏幕下回显示在底部,因此不建议放太多。顶部右侧有搜索与登录按钮。

文章页面

文章页面的总体目标是易于阅读,为了适应我自己的需求,添加了代码高亮功能,同时还借助 fancyBox 添加了好用的图片点击放大功能。

文章页面
文章页面

某些技术性文章可能篇幅较长,为了把握整体结构以及快速跳转查阅,我添加了好用的目录功能,可以在文章编辑页面选择是否启用。比如这篇文章就启用了目录,目录显示在右侧。

独立页面

友链

添加友情链接的语法是:

<div class="board-list link-list"><a target="_blank" href="链接" class="board-item link-item"><div class="board-thumb" style="background-image:url(头像)"></div><div class="board-title">名称</div></a><a target="_blank" href="链接" class="board-item link-item"><div class="board-thumb" style="background-image:url(头像)"></div><div class="board-title">名称</div></a></div>

你也许需要用 !!! 来把 div 标签包起来,例如:

!!!
<div class="board-list link-list"><a target="_blank" href="链接" class="board-item link-item"><div class="board-thumb" style="background-image:url(头像)"></div><div class="board-title">名称</div></a><a target="_blank" href="链接" class="board-item link-item"><div class="board-thumb" style="background-image:url(头像)"></div><div class="board-title">名称</div></a></div>
!!!

友情链接页
友情链接页

归档页面

归档页面
归档页面

使用方法:新建独立页面,自定义模板选择 Archives,内容为空即可。

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

搜索按钮在页面右上角,点击即可打开搜索面板。希望你(在各种意义上都)能找到自己想要的。

说说页面

说说页面
说说页面

说说页面与主题高度集成,支持登陆后在前台发布,只需要在后台新建一个自定义模板为 Words 的独立页面即可。你可以在首页使用面包屑导航模块上的按钮即可切换,切换是 AJAX 加载的,体验十分自然。

特色功能

响应式设计

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

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

主页
主页
文章
文章
说说
说说

PJAX 无刷新

目前站点支持 PJAX 无刷新体验,可选择开启(评论暂时不支持)。

文章点赞与浏览统计

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

好用的表情

评论与文章中均可使用!我特意在 Typecho 后台编辑器顶部添加了表情按钮,方便插入表情~

好用的侧边栏组件

一个三栏主题的最大优势就是侧边栏的存在。目前这个博客有这几种组件:站点统计面板,站点导航,全站友链,最近评论,热门文章;如果你的文章启用了目录的话也会显示目录列表。

自定义 CSS 与 JS

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

代码高亮

借助 highlight.js 实现了代码高亮,对技术博主来说很有用。

夜间模式

可以根据时间切换,也可以手动切换。该模式对 Meting 做了优化。

夜间模式
夜间模式

可设置博客版式

支持设置三栏顺序或者是否显示右侧边栏,给你更多自由~

图片灯箱与并列排版

使用普通的 Markdown 语法插入的图片会加入灯箱效果,点击图片可弹出显示。无需更改太多语法就能实现更多排版~ 在文章编辑器顶部添加了「图集」按钮,然后在插入的 photos 短代码中间使用常用的 Markdown 语法插入图片即可实现排版(注意图片之间不要空行,只换行是 OK 的)。你还可以在标签中添加图集描述。例如(以下代码块中为了演示,使用【】替换了 [],实际上通过按钮插入的是 []):

【photos des="摄于 2018 夏、秋"】
![](https://blog.imalan.cn/usr/uploads/cdn_imalan_cn/img/post/2018-10-26/IMG_0073.jpeg)
![](https://blog.imalan.cn/usr/uploads/cdn_imalan_cn/img/post/2018-10-26/IMG_0053.jpeg)
【/photos】

效果:

【photos des="摄于 2018 夏、秋"】
![](https://blog.imalan.cn/usr/uploads/cdn_imalan_cn/img/post/2018-10-26/IMG_0039.jpeg)
![](https://blog.imalan.cn/usr/uploads/cdn_imalan_cn/img/post/2018-10-26/IMG_0051.jpeg)
![](https://blog.imalan.cn/usr/uploads/cdn_imalan_cn/img/post/2018-10-26/IMG_0005.jpeg)
【/photos】

效果:

这些图片均可点击放大显示。注意,一个 photos 块中的图片会默认显示在一行,图片尺寸可以不同,显示出来的宽度会自动调整。

1B8F0A11-97FE-4988-BBFC-C1A196B65E31.JPG
1B8F0A11-97FE-4988-BBFC-C1A196B65E31.JPG
6B478046-C956-479F-AD92-37F7BACE0D8A.JPG
6B478046-C956-479F-AD92-37F7BACE0D8A.JPG

写在后面

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

目前主题许多地方不甚完善,我也是仓促之中将一团乱麻的代码稍作整理就上传到了 GitHub,我会继续完善这部分内容。

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

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

Credit

这个主题的写作过程离不开 MirageshandsomeMemory 等的帮助,感谢。

本项目引用了:

JQuery | highlight.js | MathJax | fancyBox | scrollTo | OwO | pjax | font-awesome

感谢以上项目。

如果本项目对你有所帮助,请考虑捐助我 ↓↓↓


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

添加新评论

已有 264 条评论

谢谢共享点赞插件,下载下来研究研究,也加入到我的模板中

熊猫小A 熊猫小A 回复 @寻梦xunm

OK呀,不过我共享的有一点修改,你可能得改一下以适合你的需求。

十七七七 十七七七

不知道为什么,启用置顶和统计插件就显示Server Error,页面标题500,无法启用。

熊猫小A 熊猫小A 回复 @十七七七

OK,我回头看一下。

熊猫小A 熊猫小A 回复 @十七七七

应该已经修复:#4941119,请下载新的主题与插件~

若有问题还请再告知一下

十七七七 十七七七 回复 @熊猫小A

插件启用依旧500,你可以测试一下是不是php版本问题

林海草原 林海草原 回复 @十七七七

你看一下是不是插件文件夹名字后面的-master你没有删掉。如果没有删掉,请你删掉。

熊猫小A 熊猫小A 回复 @十七七七

插件文件夹改名了吗?比如 Like 插件,文件夹名需要改成 Like,TePostViews 和 Sticky 同样。

林海草原 林海草原 回复 @十七七七

这几个插件的名字要注意:APlayer-Typecho-master要把文件夹名字改为Meting(大小写不能错,下同);Like-for-RAW-master要把文件夹名字改为Like;TePostViews-for-RAW-master要把文件夹名字改为TePostViews;Sticky-for-RAW-master要把文件夹名字改为Sticky。大小写也不能错,否则就会500错误。只要php版本大于等于5.6肯定没问题。

熊猫小A 熊猫小A 回复 @林海草原

感谢感谢~

十七七七 十七七七 回复 @熊猫小A

可以了,谢谢拉

十七七七 十七七七 回复 @林海草原

谢谢啦

我又来了,2333。主题开源了啊,不错啊。等我有空下载测试一下。我的水平,移植主题也只能移植简单的,复杂的都不行,真的羡慕你。我也在犹豫要不要给我移植的主题开源,可是我知道在专业的人手里,我的主题肯定会被骂,我受不了某些高手对外行人的鄙视。

熊猫小A 熊猫小A 回复 @林海草原

欢迎试试看,就是可能会有蛮多问题的,还请多反馈一下~

我其实 PHP、JS、HTML、CSS 这些都不会,从别的主题和平时的折腾里学到了一些,现学现用的。代码还是非常 naive 的,肯定不可避免的也是会被骂。但是骂就骂呗,care 这些干嘛呢。

林海草原 林海草原 回复 @熊猫小A

确实,是这么回事。
对了,你这么复杂的主题,可以和收费主题媲美了,你没有考虑过收费吗?

熊猫小A 熊猫小A 回复 @林海草原

其实也并不是没有想过。不过我考虑到还是从别的主题学到了很多,这又是我的第一个主题,既然开源世界教会了我这些东西,我还是饮水思源吧。

以后手法更熟练了写出了更好的主题再考虑后续的事吧。

林海草原 林海草原 回复 @熊猫小A

我建议你去typecho.me投稿,让你的主题登上模板站,2333

熊猫小A 熊猫小A 回复 @林海草原

我都不知道还有这个地方!等我把手上已知的 bug 修完就去投稿~

林海草原 林海草原 回复 @熊猫小A

我在测试站测试了,发现几个问题,你先修复一下。第一,页眉的页面链接,我这里显示有问题;第二,首页我这没图的,只显示一个框框,难看;第三,文章内链接,你设置的是一律新窗口打开,但是文章目录呢?我的文章内如果用目录树插件或者第三方解析,依照[TOC]生成的目录,也是新窗口打开了,你可以加一个判断,站内链接原窗口打开,站外链接新窗口打开。目前只有这几个问题。

林海草原 林海草原 回复 @熊猫小A

对了,我把测试站链接告诉你,你看一下,linhai.ga

熊猫小A 熊猫小A 回复 @林海草原

页眉的问题已确认,以及顶部的头图,今晚修复。
链接的打开位置我已经用 JS 做了解析,应该默认是站外在新标签打开,站内在当前页面。目录是锚点的情况会被判定为站外链接,我可以改一下。不过主题自带的目录功能已经专门做了处理,不会有这个问题。

熊猫小A 熊猫小A 回复 @林海草原

目录的问题,能给我一个示例页面吗?
https://linhai.ga/archives/90.html 这一篇的话,里面的目录链接自己带上了 target="_blank" 属性,这个我还是得尊重的,不能解析成 PJAX

熊猫小A 熊猫小A 回复 @林海草原

顶部导航栏与头部大图的问题已经修复:#4941119,下载使用新的主题即可~

现在不对锚点进行处理了,维持它自己的打开地点。一般来说锚点是会在本页面内打开的,除非加上了 target="_blank" 的属性。

设计感很不错,最近新主题很多,左看右看都觉得比我自己瞎搞的好

熊猫小A 熊猫小A 回复 @Siphils

你谦虚过分了啊,Aria 主题超级好看啊。而且我自己还不会搞 AJAX 评论的部分,现在是用的 PJAX 那个库的方法……回头看看你是怎么弄的

Siphils Siphils 回复 @熊猫小A

我的ajax评论就子评论那块做的海星
其实父评论有挺多坑的。。可能用的人少没发现。
如果你看我的js代码可能是看不了啥。。我用gulp-uglify压缩混淆处理过

熊猫小A 熊猫小A 回复 @Siphils

还有就是这个评论现在需要关闭垃圾防护…我最近被垃圾评论烦得不行

Siphils Siphils 回复 @熊猫小A

可以试试Smartspam这个插件

熊猫小A 熊猫小A 回复 @Siphils

用上了!观察两天~

Nice~大佬就是大佬!

大佬谦虚啦~

太好看了,喜欢。

熊猫小A 熊猫小A 回复 @哀愁少年

谢谢~

我一进来就看到了大大的已经开源了几个大字,我要试试看。。。辛苦,谢谢

嘿嘿试试吧~ 只是现在可能坑还比较多,在慢慢完善

pnnk pnnk 回复 @pnnk

。。。上传后页面。。。额。。。可能是我方式有问题。。。有时间的时候再努力试试看。。。

能描述一下问题吗

pnnk pnnk 回复 @熊猫小A

我换过来,pnnk.net 我估计是我没有上传完整,或者啥的...

看到了,静态文件都 404 了啊。难道是伪静态的原因……

十七七七 十七七七

看起来很精致啊大佬,更难得的是开源了,不太喜欢太宽的样式,刚好能自己折腾,开心

熊猫小A 熊猫小A 回复 @十七七七

谢谢~ 是的呀,因为坑比较多,所以想不自己折腾也不行了(逃

太厉害了!真的是佩服,大佬啊!
我最近弄了三个主题。第一个是把别人烂尾的主题,改成了自己喜欢的样子,改来改去发现和付费的“海豚”主题很像,于是索性把页脚“上一页、下一页”按海豚的样式设计。第二个,自己纯手工写了一个,简洁的过分,也过于丑陋,只用了两个多小时。
第三个,就是现在(2018.10.2)在用的,是我扒皮的。把farbox的其中一款官方模板扒了(评论除外),我扒了两个版本,第一个是精仿,所有的样式全部扒下,第二个是自己设计分类博文列表的样式。我在用的就是后者,分类文章列表是自己设计的,因为觉得分类文章列表如果和归档太像了就没意思了。
我扒这个模板,用了两天,修bug修了三天。我对这些是一窍不通,能弄出来已经是不错了。
真的羡慕+佩服啊。你的模板很漂亮,比我的好多了,元素不简洁也不复杂。主次还是分明的。关键问题是,这是你自己设计的!

熊猫小A 熊猫小A 回复 @林海草原

你说得我羞愧难当 ,其实文章里说了,这个主题的主页样式很大程度上参考了 lepture 的博客 Just Lepture,文章页面的样式则是综合考虑了 Medium 的排版和 Ghost 的默认主题 Casper。完全是我自己的设计恐怕只剩下移动端的部分以及几个独立页面的样式了。所以虽然代码是自己写的,但还是没有太多设计上的天分哈哈。
不过会有越来越多个人的特质体现出来的,慢慢来吧。我得在文章里再声明一下。

熊猫小A 熊猫小A 回复 @林海草原

你现在用的这个主题比较适合阅读,字体大小看起来也舒服。海豚那个主题我还不知道,赶紧搜索来看了一下,也很好看。
我写这个主题用了一个周末,然后调 bug 用了好久好久……真是吞噬人生啊。

期待啊,我现在就想用

熊猫小A 熊猫小A 回复 @liucan

哇别啊,弄得我压力好大

liucan liucan 回复 @熊猫小A

加油(ง •̀_•́)ง,好了邮箱通知我

熊猫小A 熊猫小A 回复 @liucan

好的好的我加油

熊猫小A 熊猫小A 回复 @liucan

嗨,主题已经开源了,若有兴趣可以试试哦。

  1. 1
  2. ...
  3. 8
  4. 9
  5. 10