icarus 主题踩坑记

  1. 1. 发表日期
  2. 2. 文章内容过期提醒

emmm,我又双叒叕换博客主题了。

最开始换掉 snippet 主题是因为排版样式太丑陋和粗糙了,以及颜值不够高,其他方面的功能倒是应有尽有是一款好主题。

至于换掉 Next 主题那又是另一回事了,那么为什么我换掉了 Next 主题呢?首先,它排版和样式都很美观和简洁,功能也完善毕竟一直都在更新,而且颜值也够高。非要让我说出个 缺点,那就是 Pisces 那套主题不支持在移动设备上显示 profile 信息框。

总之呢,萝卜青菜各有所爱。好啦,说回正题,我这次换主题是因为 “Next” 这款主题实在是太受欢迎了,让我觉得看到相同的主题博客就像是撞衫了。而且我不是很喜欢顶部那个黑色的 div 框。真正促使我换的原因其实是看到那么一句话,如果你看到两个和你一样主题的博客时,你就可以考虑自己写一个主题了。

那么我真的去自己造轮子,写了个主题?

才怪嘞。写是不可能写的,最多自己找一个喜欢的再修改下样式。理由就是这么个莫名其妙的理由,所以我这次换上了一个让我很满意的主题:icarus。满意在哪里呢?大概是两个地方,一是响应式设计做的是真的好,我最想要的移动设备显示 profile 框都有了(终于不用自己写 js 添加了);二是颜值和逼格都很高,正好很符合我喜欢装文化人的韵味,有点一见钟情相见恨晚的感觉。

简单来说就是对以下两个东西做了点修改:

发表日期

文章发表日期

就像上面这图,文章发表日期是 XXX 天之前。我想多数人是想第一眼就看到类似“2019-3-31”这样的发表日期,而不是 XXX 天之前,然后再去计算下什么时间发表的(这好像有点麻烦)。

于是呢,我就找到了 article.ejs 这个文件去修改。浏览器检查下元素定位到了article.ejs里的位置,然后发现死活改不过来要么就是直接不显示了。直觉告诉我这里面肯定有什么不透明的py。

moment.js 格式化发表日期

果然,让我给在 source/js/main.js 里找到了。感情这是用moment.js 格式化了下日期然后给替换了下 text 啊。难怪我他娘的在 article.ejs 里改半天都没生效,有点坑。

文章内容过期提醒

文章过期提醒

文章内容过期提醒功能我觉得还是蛮重要的,毕竟时间久远点的文章可能参考意义有出入了,会误导一众人。在主题配置文件里找了半天没找到,于是跑到 github 上看到有人提 issue 说希望加上这个功能。

别人都是在等作者更新加上这个功能,我就比较硬核了。

我决定自己加。功能就是这么个功能,看起来是挺简单的,结果越想越复杂。那么怎么加呢?我想把它加载在文章标题下方,首先首页文章摘录是肯定不能出现这个框的,然后文章详细页里超过XXX天的文章显示文章过期提醒。

就是这么回事。样式先丢一边去,首先是实现首页文章摘要不显示,文章详细页显示。那么怎么判断它是首页且又是文章摘要呢?这时候看懂代码就很重要了,往下翻了下,发现:index && post.excerpt ? post.excerpt : post.content 就是判断当前是首页且是文章摘要了。

然后是日期,参考了下 snippet 主题的实现,具体实现如下图:
文章过期提醒实现

毕竟是学过 jsp 页面的选手,实现下这个功能还是在行的。

然后是修改这个过期提醒框的样式,直接在 style.styl 文件的最后依葫芦画瓢就行了。噢,不,没生效。

排查了半天,发现回车和空格、制表符用的是 Unix (LF)。我说他娘的怎么没把 css 样式生成呢,换成 Windows (CR LF)就行了,还有就是别用制表符了乖乖打空格体现层级吧。

有个地方值得注意下,hexo s 之后对配置文件的修改是不会立即反应并且生成文件的,得关掉 server 重新 clean 下生成页面,这样生成的文件才会体现出你修改的东西。

总之,自己修改主题的功能和样式,随你怎么玩都好。