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、标签栏,怎么不在 “首页 分类 归档 留言 关于 ” 这里显示出来,但是点击 右边 https://www.XXXXXX/tags.html 又是可用的?
    2、我安装你的主题,显示的https://www.XXXXX/index.php/tags.html, 多了一个index.php/ ,请问 怎么设置起来跟你的一样 , 没有 index.php/ 呀?

  2. 来过

  3. 文章目录我好像生成不了,用的是MD 也是h2,h3

  4. 已解决,用了自带的Markdown解析就好了,不用插件的

  5. 米奇 米奇

    主题是不是采用了谷歌字体,一直显示“正在等待 fonts.googleapis.com 的响应”

  6. 米奇 米奇

    header.php中有一段“”这一条有谷歌字体加载项,是不是可以直接删除这一条,或者还有其他更好的办法避免谷歌字体的加载?ps:本人测试时没有采用加速,所以谷歌字体这个问题还是比较突出的,站长可以提供方法吗。

    1. 不好意思刚刚才看到评论,谷歌字体加载不了的话删掉也是可以的,或者换成国内的字体镜像

  7. 米奇 米奇

    link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Lato:300,400,700,400italic&subset=latin,latin-ext"/

    1. 米奇 米奇

      删除之后,多个浏览器测试了,可以,也不加载谷歌字体了,站点秒开。

  8. Vihor Vihor

    额… 主题怎么两年没更新啊,啥时候更新一下呀

    1. 还是比较想重构一下的,无奈暂时精力分不出来哇

  9. saucerman saucerman

    你好,请问怎么去除文章目录自动生成编号呢,找了挺久的了

    1. 在 footer.php 里面 41-44 行有个判断,把这一部分去掉就可以了

      <?php if ($this->is('post')): ?>
      <script type="text/javascript" src="<?php $this->options->themeUrl('/js/bootstrap.scrollspy.js?v=0.4.5.2');?>"></script>
      <script type="text/javascript" src="<?php $this->options->themeUrl('/js/post_sidebar.js?v=0.4.5.2');?>"></script>
      <?php endif; ?>
    2. saucerman saucerman

      解决了谢谢!

  10. fefy fefy

    博主,您好。
    目前,首页全文显示是用来进行截断的。
    有没有什么方法设置成自动截断呢?

    1. 大概需要修改一下首页显示的代码,比如说判断一下文字的长度,具体我还不是非常清楚
      个人还是比较倾向于手动用 more 来做,有时候图片链接被截断的话就比较尴尬了

  11. vae vae

    提交评论的时候 没有写邮箱和用户名的提示 可以改成弹窗提示吗?不要新开一个页面 如果可以 怎么改呢?

    1. 可能你需要研究一下 Ajax 提交之类的问题

  12. Sunhao Sunhao

    想问一下评论是用的什么呢?

    1. 就,Typecho自带的评论系统

  13. FEENIX FEENIX

    你好呀,非常喜欢Next.Mist for Typecho主题。有一个问题请教。
    模板设置隐藏搜索框后,在电脑WEB端显示时,标题和导航菜单会整体向左偏约20px。在手机端显示无此问题。
    如果是bug,能否告知应该在何处修正?谢谢!

    1. main.css 里面有个 .site-meta { } 类设置了 margin-left: -20px; 如果对它觉得不爽的话,把它去掉就好了。
      有重构这个主题的想法~

    2. FEENIX FEENIX

      感谢回复。
      昨晚用chrome开发工具找到了site-meta并作了调整,另外还有一个menu类好像也需要调整。
      HEXO上NEXT主题最近更新了,期待克隆重构。
      大神威武~

  14. 你好呀,非常喜欢Next.Mist for Typecho主题。辛苦了。
    博客要在侧边栏添加友链按钮并添加独立页面要怎么加呀?

    1. 需要手动修改一下HTML的代码

  15. grandly grandly

    网站开启HTTPS之后样式不能加载,试了两个type的next主题都没成功,报错都一样
    Mixed Content: The page at 'https://xxxxx.com/' was loaded over HTTPS, but requested an insecure stylesheet 'http://xxxxx.com/usr/themes/next/vendors/fancybox/source/jquery.fancybox.css?v=2.1.5'. This request has been blocked; the content must be served over HTTPS.

添加新评论