Next.Mist for Typecho 模板发布

以前一直想换一个简洁大方不花哨的博客主题,Typecho 默认主题显得太简陋了一点。用过一段时间的 cho 的 Maupassant 和 Navy 主题,不久之后我便开始审美疲劳了,后来有一天我在 v2ex 上看到了IIssNan 分享了他的 Next 主题 ,看到它的第一眼我就喜欢上了。似乎有那么一种“这就是我要的滑板鞋”的既视感,只可惜它只能用在 Hexo 上。后来 IIssNan 发布了这个主题的另外一个样式:Mist Scheme(就是本站现在用的的这个)感觉它似乎更加地适合我。

于是我便开始着手把它移植到 Typecho 上,过程说起来并不复杂,就是写 php 生成 html 结构的代码,再套上 Next 主题的 css 样式和 js 脚本就ok了,不过这玩意儿细节还是挺多的,所以我花了好多个周末才基本完成(毕竟高三dog也没啥空)。

在主题移植过程中我参考了许多人的代码,原本Next主题只支持多说评论,我把 Navy 的主题的评论样式略微修改了下,感觉它和 Next 的契合度还可以,实现了原生评论的功能。Next 主题文章页自带文章目录的功能,文章目录一般需要在后台生成,然而 Typecho 似乎并没这样的 api,而且我感觉文章输出前后台各种解析html似乎是一个极其低效的操作。后来我在 Typecho 论坛看到钜添移植了这个主题的默认Scheme,他利用js实现了在前台解析所有的<h2><h3>标签并生成文章目录列表的功能,于是我也拿过来用了。在此表示感谢~

目前还剩下标签页没整,Typecho的统计的widget似乎没有标签个数的统计,自己暂时也懒得去写插件生成了(也有那么一点强迫症的原因),先凑合着吧,高考完之后再抽时间更新。
模板发布之后 newraina 把这个主题的 Pisces 版本移植过来了,而且实现了标签页的功能,算是开源之后的一个意外的惊喜吧

关于这个主题

  1. 支持 Typecho 原生评论(评论样式来自 cho 的 Navy 主题)和多说评论框(自行替换comments.php中的代码)
  2. 侧边栏显示友情链接,友情链接只有在安装了 HannyLinks插件 才可显示,未安装不影响使用。
  3. 自带了分类归档标签友链页面模板
  4. js 解析文章目录并显示在侧边栏上(来自 http://howboring.us/ 的代码)

安装方法

  1. 下载源码,解压,将其中文件夹重命名为 next 并上传至博客的 /usr/themes 目录下
  2. 在博客后台点击启用
  3. 设置分类页: 新建一个缩略名为 categories 的页面,在选项的自定义模板选择 categories
  4. 设置归档页: 新建一个缩略名为 archive 的页面,在选项的自定义模板选择 archives archive
  5. 设置标签页: 新建一个缩略名为 tags 的页面,在选项的自定义模板选择 tags
  6. 前往外观设置设置头像,昵称等等

下载

点击链接下载最新版本:立即下载
Github:https://github.com/zgq354/typecho-theme-next/

Next.Pisces传送门:Next.Pisces

鸣谢

IIssNan:设计了这个简洁大方漂亮的主题
钜添:前台生成文章目录的js的作者

使用有任何问题欢迎向我反馈~~

已有 104 条评论
  1. 新年快乐

    1. 同乐哈哈哈哈哈哈哈

  2. hexo有什么不好的嘛,赶紧脱了typecho的坑

    1. 等我折腾累了再说~~

  3. 你好,我不太明白你的安装方法第3步和第4步怎么操作?你能不能说的详细些?新手一枚。多谢了

    1. 我明白了,谢谢你了

    2. 其实很简单的 ,-)

  4. 过来看看咯,很漂亮的主题。虽然暂时没用typecho,说不定哪天又换回来了。

  5. 乐风 乐风

    你好,主题很漂亮!请问主题的侧边栏如何像你的一样自动弹出呢?谢谢!

    1. 只要文章里面有小标题就可以自动弹出来~

    2. 刚刚更新了一下代码,现在可以在设置那里自定义侧边栏弹出了~

    3. 乐风 乐风

      谢谢博主了,好好加油高考!

  6. 支持博主!最近在博主主题的基础上把NexT.Pisces主题移植过来了:https://github.com/newraina/typecho-theme-NexTPisces

    1. 好棒!!!!正考虑把归档页面的archive的文件名的s去掉。。。好多人搞错了。。。

  7. HOUZI HOUZI

    不知道博主文章浏览数量怎么弄的哦?

    1. 用了个 Views 的插件,然后照着 http://notes.iissnan.com/ 的样式改了下代码,有空再更新到github吧~~

  8. cdn加速如何实现?

    1. Typecho在调用 $this->options->themeUrl('xxxxx/xxxx.js'); 的时候会先判断 TYPECHO_THEME_DIR 常量是否存在,存在直接返回这个值,不存在的话就用网站默认的url
      所以我们只要在js输出之前define这个常量为镜像cdn的地址就可以实现了

  9. 博主好棒~
    我原来也是用navy,不过一直觉得NEXT for Hexo也很好看。没想到Typecho上也有NEXT了,特别感谢!
    另外请问一下博主,如何在首页预览状态下不显示全文?

    1. 在需要截断的地方加上 <!--more--> 就好了

    2. 搞定了,感谢博主!高考顺利~

  10. dou dou

    漂亮的主题,已用,感谢博主

  11. 菊花 菊花

    分割线是啥
    typecho设置中聚合全文输出
    如果你不希望在聚合中输出文章全文,请使用仅输出摘要选项.
    摘要的文字取决于你在文章中使用分隔符的位置.

    1. 就是这个
      <!--more-->

  12. 戌木 戌木

    哟,博主的主题很棒,很喜欢,但是有点地方我觉得可以完善一下,就是在点开文章的时候,能不能就body部分有动画,但是header和其他地方不动呢.

    1. 理论上肯定可以的~
      实际上嘛~
      得过一段时间才有精力去改进啦~

  13. 话说如何实现点击文章中链接在新的窗口打开网页

    1. 可能需要插件来实现,具体我也不清楚,不嫌麻烦也可以直接在文章的用a标签加个target='_blank'属性来插入链接

  14. 留言是一种美德;审美疲劳总是会的。我也用用这个,听清新的。谢谢你的劳动。

    1. 感谢支持( ´ ▽ ` )ノ

  15. 真心觉得文章目录这个功能不好用,基本上都是用MD。。。。没有id标签,在这除了技术类博客,目录应用确实少见,可以后台开启关闭最好。

    1. 开启关闭会加上的,感谢建议,md也可以解析目录 比如 ## 和 ###

添加新评论