Typecho Theme Moricolor - 森之色

Moricolor

一片森林,一座木屋,如世外桃源般,静谧、安逸。森林的气息,如梦境般,让人神往。

如同她的名字一样,给人以一种自然、恬静的文字阅读体验。

Moricolor Chapter I 现已发布

欢迎体验使用

Demo1: Yumoe v2

MoriColor for Hexo by Anapopo.


Moricolor Chapter I

细节

  • 点击 主页的日期 ,可 快速预览文章
  • 在文章页面下,可通过文章结尾处的 HOME按钮 返回主页,或是浏览器返回
  • 在其他任何页面下,都是通过 点击博客标题 返回主页,或是浏览器返回

一些食用方法

'config.php' 为主题全局配置文件

// 'on' 为开启
// 'off'或留空 为关闭

//Pages -换页导航中间的三条杠!
$GLOBALS['tools_Pages_if'] = 'off'; //是否开启自定义链接
$GLOBALS['tools_Pages'] = array(
  '{your_title}' => '{your_url}', 
  'Moricolor' => 'https://github.com/txperl/Moricolor-for-Typecho'
  );

//底部小工具
$GLOBALS['bottomTools'] = 'on'; //总
$GLOBALS['bottomTools_hitokoto'] = 'on'; //一言
$GLOBALS['bottomTools_category'] = 'on'; //分类
$GLOBALS['bottomTools_tag'] = 'off'; //标签
$GLOBALS['bottomTools_page'] = 'off'; //页面
$GLOBALS['bottomTools_search'] = 'on'; //搜索

//主页
$GLOBALS['index_QuickPreview'] = '1'; //每页默认显示 X 个快速预览
$GLOBALS['index_QuickPreview_Img'] = 'off'; //文章预览是否显示图片

//样式
$GLOBALS['style_TextBar'] = '1'; //文章页头部信息 | 1:功能按钮及分享按钮(文章目录导航仅支持 h3,h4 层级) | 0:纯文本
$GLOBALS['style_TextIndent'] = 'off'; //首行缩进
$GLOBALS['style_CommentShow'] = 'off'; //默认显示评论
$GLOBALS['style_BGPic'] = ''; //博客背景图设置(填入图片链接),留空为不开启
$GLOBALS['style_FontWeight'] = 'normal'; //字体粗细 | normal:默认 | lighter:细 | bolder:粗
//因有些背景图与原主题风格不同,你可以将'style_FontWeight'设置为 lighter 再更换一下配色,这样整体性会高一些

//配色 全局配色设定(请自行复制粘贴以下相应数组) | 初版,只包含小部分颜色调整(文章配色请自行在 mori.css 中更改)
//Mori(森) - array('Mori')
//H(类似黑) - array('','#546e7a','#90a4ae','#90a4ae')
//Q(应该青) - array('','#00838f','#00acc1','#00acc1')
//L(有点蓝) - array('#0277bd','#0288d1','#03a9f4','#90caf9')
//F(微微粉) - array('#f48fb1','#f48fb1','#f8bbd0','')
$GLOBALS['style_Color'] = array('Mori');
> 
//前方有怪兽!
$GLOBALS['beta_MoriGarden'] = 'off'; //开启后请自行修改 ./MoriGarden/config.php 配置,否则会出事情的!

MoriGarden[Beta]

MoriGarden是基于Thatsi的一个简单例子
这个工具可将你的社交平台动态与博客同步,开启后位于主页底部
目前包含如下内容:
twitter: 以时间轴顺序,获取对应 id (@后面的名称)的公开推文(墙内也可使用)
bangumi: 以时间轴顺序,获取对应 id (@后面的名称)的在看番剧 (这个应该只有二次元迷会用得到吧,我反正是用了...)
bilibili: 以时间轴顺序,获取对应 id 的在看番剧
P.s. 因为测试阶段默认使用我个人注册的 API TOKEN,所以请勿随意或恶意提交

本主题包含一套 Material Design 图标

位于 './fonts/md'

详细情况请参考 Material Design Iconic Font

配色参考

Prism.js使用 [代码高亮]

只有部分语言适用,若想支持更多请去官网自行下载

<pre><code class="language-xxx">{your_code}</code></pre>

&


```{language}
{your_code}
```

封面图设置

在文章中加入

<!-- img_quick:img_url; -->

为了整体样式的美观性,建议 图片宽度 >= 980px

自定义快速预览内容

在文章中加入

<!-- des_quick:your_words; -->

将 your_words 改成你需要的内容即可

配色与背景图与字体粗细相关

目前配色只是一个初版,所以很不完善
关于背景图,设置一下淡灰风格的图片会显得不那么奇怪
字体粗细如果没有更改,但你添加了背景图,可以试着改成 lighter 或 bolder ,这样样式整体性会高一些

其他注意事项

  1. 本主题引用了多个本地资源,若是访问速度明显下降,请自行将本地资源上传到CDN或使用其他解决方案
  2. 文章目录导航仅支持 h3,h4 层级,并且手机端不会显示
  3. 更多问题可以询问作者

Moricolor的诞生离不开以下开源项目

更新日志

Chapter I
  • [v1.5]
  • 微调 <h4>,<h5>,<img> 标签样式
  • 微调 MoriGarden bilibili 功能与样式
  • 更改 一言 API 更换为『api.imjad.cn』
  • [v1.4]
  • 全新 MoriColor for Hexo 主题 (感谢 Anapopo)
  • 微调 <h4>,<a>,<li> 标签样式
  • 微调 背景图片灰度取值
  • 微调 页面细节
  • 更改 一言 API 更换为『api.imjad.cn』
  • 更改 主题资源 CDN(CloudflareCDN → StaticfileCDN)
  • 更改 MoriGarden 基于重写版的 Thatsi
  • [v1.3]
  • 修复 文章导航重名替换 BUG
  • 优化 SEO
  • [v1.2!]
  • 新增 自定义快速预览内容
  • [v1.2]
  • 新增 博客背景图
  • 新增 字体粗细选择(配合博客背景图一起使用效果更佳)
  • 新增 评论分页样式(之前忘记写惹)
  • 新增 非常少的配色选择
  • 微调 <h1>,<h2>,<h3>,<h4>,<h5>,<h6>,<a>,<li>,<blockquote> 标签样式
  • 优化 文章排版
  • [v1.1]
  • 新增 是否允许评论判断
  • 更改 将字体源由 本地&七牛CDN 转至 Cloudflare
  • 删除 多余本地文件
  • [v1.0]
  • 新增 归档页面折叠显示
  • 新增 figure,figcaption标签样式
  • 新增 文章页头部图片(封面图片) | 使用方式: <!-- img_quick:img_url; -->
  • 微调 移动端布局
  • 取消 MoriGarden Weibo 解析
  • 取消 首页分页反转
  • [beta5]
  • 新增 文章页头部样式设置
  • 新增 webkit自定义滚动条
  • 微调 部分样式(归档页面tag,主页小工具排版,文章排版与字体大小)
  • 微调 其他细节
  • [beta4]
  • 全新 文章页面头部样式
  • 新增 TextBar
  • 新增 文章目录导航(仅支持 h3,h4 层级)
  • 优化 评论层级样式
  • [beta3]
  • 测试 Moricolor后花园_基于Thatsi
  • 新增 默认显示评论设置
  • 新增 自定义Pages导航设置(换页导航中间的三条杠杠)
  • 修复 插件无法显示BUG
  • [beta2]
  • 全新 归档页面设计
  • 新增 段落缩进设置
  • 新增 标签云(归档页面中)
  • 新增 小工具_Tag,Page
  • 更改 主页月份显示方式(3个字母简写)
  • 修复 评论作者信息编辑BUG

写在最后

本程序源代码可任意修改并任意使用,但禁止商业化用途。一旦使用,任何不可知事件都与原作者无关,原作者不承担任何后果。

如果您喜欢,希望可以在页面某处保留原作者(Trii Hsia)版权信息。

感谢。

Edit with Markdown

已有 109 条评论

  1. bing

    对了,为啥markdown中的checkbox显示不了?我已经加入了“MarkdownParse”的插件,正常来说可以显示最新的markdown语法。

    bing March 8th, 2018 at 10:47 am回复
    1. Trii Hsia

      请先判定确实是 Moricolor 主题引起的,要不然我也不知道是不是主题的BUG。如果不是,那就凭你这句话我是不可能知道为什么的...

      Trii Hsia March 10th, 2018 at 08:11 pm回复
      1. bing

        你试试“ - [x]” 看看能不能显示checkbox

        bing March 10th, 2018 at 08:22 pm回复
        1. Trii Hsia

          未显示,但我用原生 typecho 主题也是不显示的。

          Trii Hsia March 11th, 2018 at 03:29 am回复
          1. bing

            嗯,估计是原生typecho对markdown支持不足,与版本or主题无关

            bing March 11th, 2018 at 12:03 pm
  2. bing

    我做了一个首页“吐槽”,实现方式:修改comment的function模块,然后只提取制定“id(例如作者)”。 判断是否首页<?php if ($this->_currentPage==1): ?>,如果已跳转到page2,则不再显示“吐槽”。 这个功能的目的是类似twitter,但鉴于每次调用twitter api太慢了,所以就利用了comment的模版来实现。不知道你有没有更好的方法? 这是首页效果:http://bingwong.org/

    bing March 4th, 2018 at 11:06 am回复
    1. Trii Hsia

      写本地缓存吧,每隔一段时间刷新一次就行了

      Trii Hsia March 10th, 2018 at 08:08 pm回复
    2. bing
      class Widget_Comments_RecentPlus extends Widget_Abstract_Comments { /** * 构造函数,初始化组件 * * @access public * @param mixed $request request对象 * @param mixed $response response对象 * @param mixed $params 参数列表 * @return void */ public function __construct($request, $response, $params = NULL) { parent::__construct($request, $response, $params); $this->parameter->setDefault(array('pageSize' => $this->options->commentsListSize, 'parentId' => 0, 'ignoreAuthor' => false)); } /** * 执行函数 * * @access public * @return void */ public function execute() { $slug = "cross"; //页面缩略名 $db = $this->db; $page = $db->fetchRow($db->select()->from('table.contents') ->where('table.contents.slug = ?', $slug)); $select = $this->select()->limit($this->parameter->pageSize) ->where('table.comments.status = ?', 'approved') ->order('table.comments.coid', Typecho_Db::SORT_DESC); if ($this->parameter->parentId) { $select->where('cid = ?', $this->parameter->parentId); } if ($this->options->commentsShowCommentOnly) { $select->where('type = ?', 'comment'); } /** 忽略作者评论 */ if ($this->parameter->ignoreAuthor) { $select->where('ownerId <> authorId'); } if ($this->parameter->mail) { $select->where('mail = ?', $this->parameter->mail); } $this->db->fetchAll($select, array($this, 'push')); } }

      请问如何加入指定页面?为参考下面的link,但是改不成功。
      https://mrasong.com/a/typecho-comment-list

      bing March 4th, 2018 at 03:05 pm回复
      1. Trii Hsia

        这个还请个人解决吧,不属于 Moricolor 主题问题哦

        Trii Hsia March 10th, 2018 at 08:10 pm回复
    3. bing

      美中不足的是,因为是根据作者id来提取评论的,如果为在其他页面回复了别人的评论,一样会出现在首页。。。。

      bing March 4th, 2018 at 11:07 am回复
      1. Trii Hsia

        为什么要根据作者ID提取?

        Trii Hsia March 10th, 2018 at 08:09 pm回复
  3. bing

    你好,你的主题的设计非常过瘾,特别是config,很像hexo。你提及到里面的其中一个细节“在其他任何页面下,都是通过 点击博客标题 返回主页,或是浏览器返回”, 但是为用了这个theme之后点击标题并不会返回。 具体网址:http://bingwong.org/2017/11/13/90.html

    bing March 3rd, 2018 at 07:57 pm回复
    1. Trii Hsia

      感谢!唔...在其他任何页面是指 除文章以外 的页面...因为文章页前面提过了。在文章页的话,点击 页尾HOME 或 页头HOME 可返回。

      Trii Hsia March 3rd, 2018 at 08:41 pm回复
      1. bing

        对了,忘记问你。那个twitter爬虫是不是每次加载都要爬?感觉有点慢。

        bing March 3rd, 2018 at 09:06 pm回复
        1. Trii Hsia

          是的,每次都是调用 twitter api 的,懒得写缓存了...而且有缓存肯定有延迟,万一发推量很大就没什么用了。

          Trii Hsia March 3rd, 2018 at 09:29 pm回复
  4. YJLAugus

    博主,那个新建的独立页面怎么可以显示有评论功能呢,我想做个留言板的独立页面,但是默认的独立页面是不允许评论的,emmm,前端盲一枚~,另外,可以加友链吗博主~

    YJLAugus January 18th, 2018 at 11:18 am回复
    1. Trii Hsia

      参考 post.php 代码就行了...呃...我个人是不怎么喜欢一上来就换友链的,如果你执意要的话也不是不行。

      Trii Hsia January 24th, 2018 at 08:43 pm回复
  5. 怪兽大大王

    博主您好,有两个小问题想请教您:1.请问“#预览图”那个 粉红色的#是怎么弄出来的呢? 2.请问应该如何修改模板的背景颜色呢? 谢谢~非常喜欢你的主题。

    怪兽大大王 December 8th, 2017 at 02:28 pm回复
    1. Trii Hsia

      1.在 mori.css '.post-content h4::before' 属性中改
      2.这个就要看你要改多少了...
      感谢你能喜欢。

      Trii Hsia December 17th, 2017 at 12:41 am回复
      1. 怪兽大大王

        你好,1已经解决~谢谢你~2.模板颜色:想把首页和帖子里纯白的背景颜色调一下啦~但是不知道实在哪个文件里调

        怪兽大大王 December 17th, 2017 at 03:35 pm回复
        1. Trii Hsia

          这个在这里也讲不清...建议快速入门一下HTML+CSS就行了。

          Trii Hsia December 24th, 2017 at 01:42 am回复
  6. 书屋听雨

    感谢博主回复。按你说的方法改了,可是月份还是原样的。另外,标签前的#在哪可去掉。不懂程序,可能很简单的问题,麻烦了。

    书屋听雨 November 26th, 2017 at 07:07 pm回复
    1. 书屋听雨

      已经找到了,谢谢~~

      书屋听雨 November 28th, 2017 at 06:13 pm回复
      1. Trii Hsia

        抱歉,之前我上学所以不能回复...总之找到了就没事了。

        Trii Hsia December 2nd, 2017 at 07:38 pm回复
  7. 书屋听雨

    博主,归档日期,能不能换成数字的?怎么换在哪?

    书屋听雨 November 26th, 2017 at 04:09 pm回复
    1. Trii Hsia

      归档日期现在本来就是数字啊...就月份是英文缩写。要改的话可以在 page-archive.php 66行将 "M" 换成 "m" 即可。

      Trii Hsia November 26th, 2017 at 04:15 pm回复
      1. 书屋听雨

        本来不想搞博客了,博主的主题正是我想要的,非常感谢!只是不懂程序一些小问题也要麻烦博主了,问一下,首页显示文章的数量在哪修改?多谢~~~

        书屋听雨 November 27th, 2017 at 08:54 pm回复
  8. 灰常记忆

    这个主题代码真够少的,加载速度肯定直线上升。

    灰常记忆 November 14th, 2017 at 01:53 pm回复
    1. Trii Hsia

      主题加载速度快慢和代码多少没有必然关系哦...主要还是看加载项和优化。

      Trii Hsia November 18th, 2017 at 11:26 pm回复
  9. aogooc

    你好,请问一下列表缩进有没有办法调整一下,前端盲一枚:)

    aogooc September 14th, 2017 at 10:48 pm回复
    1. Trii Hsia

      请问你指的列表缩进是指什么...? li 标签吗?还是...?

      Trii Hsia September 16th, 2017 at 08:44 pm回复
      1. aogooc

        文章分有序列表和无序,这个

        aogooc September 17th, 2017 at 03:49 am回复
        1. Trii Hsia

          是我理解有误还是什么...能再具体点吗...?

          Trii Hsia September 23rd, 2017 at 07:01 pm回复
  10. Rocry

    我感觉下面放个时间统计信息好看些,博主作者怎么认为?

    Rocry August 28th, 2017 at 11:27 pm回复
    1. Trii Hsia

      我觉得统计信息并不是博客必要的...

      Trii Hsia September 4th, 2017 at 11:16 pm回复