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. 设计了一个主题,不知 楼主是否有办法做出来,我大一,……另外这个主题细节希望再完善一下

  2. 用上了,非常感谢qing大大

  3. 这个主题绝对是精品,我用了好长一段时间呢,无奈主机速度不好,为了让页面大小控制在40k以内,只能自己码了一个替代品。

  4. yi yi

    我看了这个主题很喜欢,已经装上去试过了,挺好用的谢谢。

  5. McWolf McWolf

    如果要想把分类链接直接放在菜单上,要怎么改?

  6. 感谢.很喜欢,能否问下如何让目录不自动弹出?看文章的时候旁边黑乎乎的好丑

  7. 额..还有个..每篇文章主题图片有控制图片大小的办法么?有时候图片第一张超大...然后在主页看来一个图片就占用了大部分空间

  8. jazzi jazzi

    @qing, 喜欢这个主题,喜欢你的nice品味,不知可有英文版?

    1. 暂时没有(主要还是最近比较忙暂时没啥时间去折腾它),英文的话只是文字的修改应该难度不大,你可以试一试啦,不过这个主题的原作者的 Hexo 版本是有英文支持的,可以移步项目的主页去看一看 hexo-theme-next

  9. 感谢你的邮件恢复.能问下.主题图片可以用自定义字段或者附件来设置么?因为显示的原因想控制主页图片的大小.所以单独截取,如果是靠第一张图片来设定,就太大了.如果放两张大宽高不一样的则重复了

  10. qing,我在根目录放了favicon.ico并且在head里添加了代码,现在的情况是首页,分类归档包括后台都能显示,但是进入文章后显示的是空白图标.这是为啥?

    1. 这就涉及到一个相对路径的问题了,你在head里面设置的 favicon.ico 的href属性是 favicon.ico ,然后浏览器加载的时候加载的是 https://blog.yqfurong.com/favicon.ico ,分类归档页的url的结构也是基于根目录(https://blog.yqfurong.com/archive.html),所以也是一样,但在文章页面的时候url是 https://blog.yqfurong.com/archives/25/ ,然后浏览器就基于这个目录去加载favicon了,实际加载的链接就是 https://blog.yqfurong.com/archives/25/favicon.ico ,显然服务器就找不到文件了。
      所以要解决的话可以把它换为绝对路径 /favicon.ico 。

    2. 嗯嗯.昨天在TYPECHO论坛看到了.改了就好了.THANKYOU

  11. 博主,今天看到朋友说typecho出来beta版支持全系的md语法了,打算更新下,结果这个主题不支持,显示500,博主有时间能不能更新下

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

  13. 你好,gravater头像怎么设置,上传了,写了邮箱地址还是不显示

    1. gravater地址有问题,自己到functions.php改一下getGravater函数改为
      function getGravatar($email, $s = 40, $d = 'mm', $r = 'X') {

      $hash = md5($email);
      
      $avatar = "//cdn.v2ex.com/gravatar/$hash?s=$s&d=$d&r=$r";
      
      return $avatar;
      

      }

    2. 加了这个之后网站直接崩了,是我复制得不对吗

    3. 估计是函数重复了,需要找到这个函数修改,而不是另外添加

  14. ALLEN ALLEN

    想请教一下,怎么隐藏单个独立页面不在导航栏显示呢,例如你的标签页

    1. 页面编辑页>高级选项>公开度>隐藏

    2. ALLEN ALLEN

      明白啦,谢谢哈。

  15. 请教一下这个主题的cdn后台设置之后是通过什么实现替换链接的?

    1. 在 Typecho 网站目录的 var/Widget/Options.php 大概449行附近可以看到一个 themeUrl 函数,其实就是模板里面 $this->options->themeUrl('/xxxx.js'); 用到的函数
      其中我们可以看见有一个判断是否定义了全局常量的语句
      $url = defined('__TYPECHO_THEME_URL__') ? __TYPECHO_THEME_URL__ : Typecho_Common::url(__TYPECHO_THEME_DIR__ . '/' . $theme, $this->siteUrl);
      也就是说,只要我们把 TYPECHO_THEME_URL 的常量设定为cdn地址,就实现替换链接了

    2. 谢谢,只要在themeConfig里设置了参数然后在header.php开头加上判断就行了吗?

    3. 不一定要开头啦,在它被使用之前定义就行

    4. 非常感谢!我加到我的主题里了~

添加新评论