转载

Scoped CSS 与 Github 挂件

最近协助小师妹搭建 Hexo 博客的时候,发现官网的插件列表里面多出了好些插件,其中有一个酷炫的 Github 挂件让我心动不已。 之前我用的 Github 挂件是从开源中国社区的页面上抠下来的,勉强能用,但是和这个挂件比起来就差的远了。

命令崩坏

在充满期待的心情中安装了 hexo-github 插件,迎接我的却是 hexo 的崩坏。除了 server 命令能够照常运行,其余的命令几乎都没法结束退出,仿佛遭遇了死循环。 本想放弃这个插件,但是又实在舍不得那狂拽酷炫的界面和动效,于是我只好硬着头皮翻看插件的源码。 在代码各个部位插入 print 之后,似乎没有发现死循环存在的痕迹。于是我只好开始二分法,一半一半的去注释代码。上古时期流传下来的手段总是好用的,我很快抓到了导致命令无法退出的元凶,就是下面这行代码。
nunjucks.configure(__dirname); 
发现凶手又能怎样,我又不能轻易把这行代码删去。一开始的时候我还是习惯性的瞎改,希望能够碰到死耗子。各种尝试无果后,我只能向 Google 屈服,老老实实查看文档。 nunjucks 是一个来自 Mozilla 的模板引擎,这行代码的作用是初始化引擎的配置 [1] 。我注意到一个默认参数 watch,如果不传任何值,watch 默认为 true,即监听文件的变更并重新渲染。 既然监听都用上了,那么死循环也就是在这里出现的了。我给 configure 函数多传了一个参数,让它不去监听文件变化,于是 Hexo 的命令们又可以正常结束了。
nunjucks.configure(__dirname, {watch: false}); 

样式崩坏

把 Hexo 弄好之后,本以为万事大吉,没想到一波方平一波又起。这次是 Github 挂件把页面的样式弄坏了,使用了挂件的页面,Header 短了一截,看起来各种不和谐。 Scoped CSS 与 Github 挂件 虽然我知道肯定是哪个 CSS 没写好,把影响范围扩展到了整个页面,但是我一时没法定位,在 Chrome 中各种调整 CSS 都没有效果。 无奈翻看源码,这个插件的 CSS 是使用 less 生成的,找到一个叫做 style.less 的文件,内容看起来和 CSS 差不多。 我在其中发现一条万恶的样式,很黄很暴力,附上 Github 传送门 。
* {   box-sizing: border-box; } 
什么鬼啊,直接把所有元素的样式都改了啊!果断把它干掉。 可是干掉之后,Header 是好了,又轮到 Github 挂件崩坏了,左下角出现大片空白。 Scoped CSS 与 Github 挂件 怎么才能把样式的作用范围限定在某个 DOM 树?我想到了之前看过的一个 CSS3 特性,scoped [2] 。 于是我尝试着去修改 tag.html,在挂件所在的结点加上限定作用域的样式。
<div id="" style="padding: 8px 0px; width: 100%;">     <style type="text/css" scoped>     * {box-sizing: border-box;}     </style> </div> 
出乎我的意料,这样修改之后,样式还是把 Header 破坏了。也许是 Chrome在是实现 scoped css 的时候有bug,或者根本就没有实现,或者实现了然后作为试验特性没有开启,反正这种写法在 Chrome 里面是崩坏的,到了 Firefox 是好的。 为了让样式更具通用性,我只好放弃 scoped css,老老实实使用选择器。于是我把 tag.html 里面的修改复原,在 style.less 加上下面这段 CSS。
.hexo-github * {   box-sizing: border-box; } 
终于完成了。我把我对 hexo-github 的变更提交了 Pull Request ,希望能够合并到主干,让其他人不要重复我的工作。   原文章来源:http://blog.jamespan.me/2015/06/03/scoped-css-and-hexo-github/
正文到此结束
Loading...