Hexo | 初识icarus主题中的Bulma框架

Hexo | 初识icarus主题中的Bulma框架

icarus 主题采用了 Bulma 框架,实现布局的自适应。Bulma 将一块屏幕横向分成12份,大家各取所需共同分割12份的财产。这篇文章就借着调教(shi)icarus 主题的机会,简单学习一下强大的 Bulma 框架。

icarus 默认的两列样式如下图所示:


个人觉得右侧的资料等 widget 宽度太宽了,影响了正文部分的阅读体验。所以这次的探索之旅目标就是:调整插件宽度!

首先,我们找到 icarus 主题设置 Widget 和 Post 宽度的代码:

/themes/icarus/layout/common/widget.ejs

switch (column_count()) {
case 2:
return 'is-4-tablet is-4-desktop is-4-widescreen';
case 3:
return 'is-4-tablet is-4-desktop is-3-widescreen';
}
return '';

/themes/icarus/layout/layout.ejs

switch (column_count()) {
case 1:
return 'is-12';
case 2:
return 'is-8-tablet is-8-desktop is-8-widescreen';
case 3:
return 'is-8-tablet is-8-desktop is-6-widescreen' (意外发现源码少了个分号lol)
}
return '';

icarus 可以设置资料、toc、归档等等插件在文章的左侧或者右侧。也就是说,包括插件和文章在内,列数在1~3列不等:

  1. 无插件的时候,为1列;
  2. 插件统一在左侧或右侧时,为2列;
  3. 插件左、右侧都有时,为3列。

Bulma 引擎将屏幕横向分为12份,所有元素按照自己的需求使用即可。


通过 widget.ejs 文件,我们可以看到,对于插件而言:

  1. 如果屏幕分为2列,则插件的宽度为 is-4-widescreen,也即是4/12=33.33%的宽度;
  2. 如果屏幕分为3列,则插件的宽度为 is-3-widescreen,也即是3/12=25%的宽度,两列插件占了50%宽。

同样的,layout.ejs 文件针对文章也做了宽度限制:

  1. 如果屏幕分为1列,则文章的宽度为 is-12,也即是12/12=100%的宽度;
  2. 如果屏幕分为2列,则文章的宽度为 is-8-widescreen,也即是8/12=66.66%的宽度;
  3. 如果屏幕分为3列,则文章的宽度为 is-6-widescreen,也即是6/12=50%的宽度。

那么调整插件宽度的方法也就差不多想出来啦!修改代码如下:

/themes/icarus/layout/common/widget.ejs

switch (column_count()) {
case 2:
return 'is-4-tablet is-4-desktop is-3-widescreen';
case 3:
return 'is-4-tablet is-4-desktop is-2-widescreen';
}
return '';

/themes/icarus/layout/layout.ejs

switch (column_count()) {
case 1:
return 'is-12';
case 2:
return 'is-8-tablet is-8-desktop is-9-widescreen';
case 3:
return 'is-8-tablet is-8-desktop is-8-widescreen';
}
return '';

看看效果吧!

  0

评论

📧 邮箱: 留下邮箱,别人回复后会收到通知喔
😉 头像: 自动同步邮箱对应的「Gravatar」头像
Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×