xmdhs's blog

对于博客的一点点折腾

xmdhs

虽然说是不折腾,但是完全不折腾是不可能的,不然实在是太丑也不好用。不过折腾的地方也比较少,效果我自己觉得还是不错的。

主题

主题一开始使用的是“Simply Simple”,挺不错的,很简洁。不过不是自适应的主题,手机界面就有点丑了,去修改模板的 html 可是可以,但是没有必要。

又去试了下“Light”,是自适应的主题,配色也不错。不过因为里面的首字下沉不咋地,应该是对中文的首字下沉支持不行,而且我也不喜欢首字下沉。也就没用这个主题。

之后也是现在用的主题是“Contempo Light”,也挺简洁的,有点 Material Design 的感觉。背景图片有点不喜欢,于是就用 css 换掉,换成了 bing 的每日一图。顺便再用 css 隐藏了“主题背景图片创建者”,毕竟现在用的是 bing 的图片了。

布局

布局中禁用了“精选博文”和“热门博文”,总共能有几篇博文呢?当然是禁用掉了。

“我的简介”也禁用掉了,我自己当然没什么好介绍的。

自定义的 css 和 js

blogger 好就好在这里,可以随意的添加自己的 js 和 css,甚至还能编辑主题的 html。

不过我没有编辑主题的 html,而是通过布局中的“HTML/JavaScript”小工具来自定义的。这样做的好处是修改方便。

首先添加了这个

img {
max-width: 100%;
max-height: 100%;
}

之前的主题图片如果选择原始大小会戳破框架,虽然现在的主题也设置了 max-width,但是我不删除也不碍事嘛。

其次是设置了主题的背景,这个是直接参照主题自己的 css,修改了其中背景的链接,没啥技术含量。

之后是添加了两个 js。

<script src="https://cdn.jsdelivr.net/npm/anchor-js/anchor.min.js"></script>
<script>anchors.add();</script>

这个是给标题增加锚点,就像这样

复制这个链接,之后打开这个链接就会跳转到到指定的位置,就不用自己往下翻了。

<script src="https://cdnjs.loli.net/ajax/libs/instantclick/3.0.1/instantclick.min.js" data-no-instant></script>
<script data-no-instant>InstantClick.init()</script>

这个是预加载页面,当鼠标悬停在某个本站的链接上,就会开始预加载,这样在鼠标悬停和点下的几百毫秒间的时间就不会浪费,可以达到看上去非常快的网页打开速度。(不过毕竟是在 blogspot 上,快也快不到哪里去)

因为会导致一点问题,所以还是去除了。

其他

虽然很多地方很满意,但是这个日期的格式太不符合我的习惯了,无论怎么选,都只有日期在前年份在后。用 js 去修改可是可以,但是没必要。

越看越不爽,于是就用 js 改掉了,顺便再导入了一个 jquery。

还有就是编辑器不能插入代码,我也就只能退而求其次的直接粘贴,然后调小字体。不支持 markdown 也可以理解,但是有就好了。

现在用 js 实现了,虽然还是不方便,但是也能用了。

引用的样式也很奇怪,是这样的

之后用 css 改改吧。

现在改成了这样

test 测试

css 是用 github.com/necolas/normalize.css,所以似乎还得按照 mit 协议加一行注释。

xmdhs