Jekyll TMaize主题魔改记录

2020-06-13 | Share to Twitter

0

今天偶然在网上看到了tmaize-blog这个主题莫名一下就喜欢上了,一看文档配置(迁移)貌似也不是很麻烦,遂决定换成这个主题。

但感觉原生的主题有一些可以修改的,便自己随便翻着html改了改,不会的css部分邮件联系了主题作者,thx.

参考了一些网上的资源,无奈是改完才决定如此记录的,也就没有记下这些文章的地址,如果觉得眼熟,那就联系一下我,会添加上出处的。

1 迁移

1.0 posts

Jekyll来说,很大一部分meta信息是与文章开头两个---之间的yaml有关的。先前的MDUI主题yaml需要的配置项稍微多一些,删了部分,还有就是layout从post变成了mypost,categories变成了py列表一样的格式。总体来说需要改动的不多,加上刚建站几个月博文不多,就手动来了。以后如果要这样的话或许要写程序了。

虽然之前在推上说过不喜欢把配置信息全部写在_config.yaml里面,但是这边配置项少,倒也无所谓了yaml没有徒手刚htmlcss源码exciting

也就是friends和menu,friends同样这边配置少得可怜,就url和name(原主题叫title),现在有个打算是把描述加上,先算在feature里面吧。menu的话,去掉了mikutap,但仍然可以通过(https://rain.moimo.me/mikutap/)访问(主要是加上mikutap的话header就太长了)。

1.2 others

剩下都是些零零碎碎的了,不足为记,可以对比下两边的_config.yaml

2 评论

算是对于整体风格的妥协,或者说是希望更像一个只是用来写字的地方,去除了post页面的comments(相较于改主题之前,这个主题本身就没有)。

然后留言板页面(/pages/chat.html)在原主题是重定向到腾讯的一个页面的,这个我改了,放上了disqus和valine的代码。

Valine刷新页面会提交两次评论的bug仍然没有解决

3 音乐播放器

这里是参考了一篇博文和使用了两个github项目(meting-js和aplayer)的,但是实在好懒不想找原链接了(土下座)。

这里没用什么高级的方法,翻了翻/layout居然没有找到default.html,但也好,只有mypost.html和page.html,m每个页面都包含这两个layouts,于是就在这里加入了如下的代码:

  <!--APlayer-->
  <script src="https://cdn.jsdelivr.net/npm/vconsole/dist/vconsole.min.js"></script>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/APlayer.min.css">
  <script src="https://cdn.jsdelivr.net/npm/hls.js/dist/hls.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/APlayer.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/src/color-thief.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/Meting.min.js"></script>
  <meting-js server="netease" 
             type="album" 
             id="35157393" 
             fixed="true">
    </meting-js>

这是一篇博文上摘的,实在不想回去翻历史纪录了,抱歉。

meting-js大概是一个快速配置aplayer的东西,类似于oh-my-zsh之于zsh(可能或许吧)。server是说服务比如这里是网易云;type,这里是专辑 id,从分享链接拿下来的,orangestar的海边独白; fixed是让播放器居于右下角,不这么设置的话会跑到奇怪的地方,于是只好true了。

另外有一个bug:只有点击播放之后才可以展示封面。

4 点击随机词

随机词列表在/_includes/script.html的第12行,我这里修改成了海边独白专里的歌曲名。

5 footer

这个其实没啥说的,基本html语法去/_includes/footer.html看心情改就好了。

顺便about的文字,search的提示语,link页面,都是类似的,略。

6 css样式

6.1 去除header头像晃动

这个感觉和主题简单的风格不太搭,遂去掉,这里是主题作者的帮助(这一章都是)。

/static/css/common.css 140行起.header .logo:hover这一块,删掉。(从.删到}

6.2 超链接样式

全局的超链接换成蓝色,鼠标移动到上面时展开下划线。

同样是在common.css里面,把所有的.hover-underline都改成 a再添加a {color: rgba(255,0,0,1)}即可(颜色自己看着选)

最后为了在post里面也是这样的超链接,我们需要在同common.css一个文件夹下面的post.css中找到.page-post a这个块,删掉。

7

然后就差不多了。

总结一下的话,bug有Valine和aplayer,feature有友链。