typecho主题:RAW精简三栏博客模板

模板介绍

RAW是一款免费的typecho主题,这是一个简约三栏主题。该主题由typecho模板作者熊猫小A制作并免费发布,当前版本为0.92。一个非常美观大方的三栏博客主题,响应式设计,主题默认有两种文章形式,一种是普通文章,一种是说说。整体设计简洁大气,博客有两种版式,三栏与两栏,适合个人博客使用。

模板相关

  • 主题作者:熊猫小A
  • 版本:0.92
  • 更新时间:2019年2月25日23:13:38
  • 适用于typecho1.1

模板使用

友链

添加友情链接的语法是:

<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://cdn.imalan.cn/img/post/2018-10-26/IMG_0073.jpeg)
![](https://cdn.imalan.cn/img/post/2018-10-26/IMG_0053.jpeg)
【/photos】

模板截图