Next.Mist for Typecho 模板发布

发表于   |   分类于 技术   |   105 条评论

以前一直想换一个简洁大方不花哨的博客主题，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. 侧边栏显示友情链接,友情链接只有在安装了 Hanny 的 Links插件 才可显示,未安装不影响使用。
  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的作者

使用有任何问题欢迎向我反馈~~
已有 105 条评论
  1. Flippy Flippy

    新年快乐

    回复
    1. qing qing

      同乐哈哈哈哈哈哈哈

      回复
  2. diefishfish diefishfish

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

    回复
    1. qing qing

      等我折腾累了再说~~

      回复
  3. 小凉 小凉

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

    回复
    1. 小凉 小凉

      我明白了，谢谢你了

      回复
    2. qing qing

      其实很简单的 ,-)

      回复
  4. 优品网 优品网

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

    回复
    1. qing qing

      挺不错的

      回复
  5. 乐风 乐风

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

    回复
    1. qing qing

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

      回复
    2. qing qing

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

      回复
    3. 乐风 乐风

      谢谢博主了，好好加油高考！

      回复
  6. newraina newraina

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

    回复
    1. qing qing

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

      回复
  7. HOUZI HOUZI

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

    回复
    1. qing qing

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

      回复
  8. zfane zfane

    cdn加速如何实现？

    回复
    1. qing qing

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

      回复
  9. 大锤Tracy 大锤Tracy

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

    回复
    1. qing qing

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

      回复
    2. 大锤Tracy 大锤Tracy

      搞定了，感谢博主！高考顺利~

      回复
  10. dou dou

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

    回复
  11. 菊花 菊花

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

    回复
    1. qing qing

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

      回复
  12. 戌木 戌木

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

    回复
    1. qing qing

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

      回复
  13. 末夏夏末 末夏夏末

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

    回复
    1. qing qing

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

      回复
  14. 孙华 孙华

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

    回复
    1. qing qing

      感谢支持( ´ ▽ ` )ノ

      回复
  15. 孙华 孙华

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

    回复
    1. qing qing

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

      回复
添加新评论