logo of Shuibaco

Bitcron主题的CSS样式等

2017. / 843字 / 1,140阅 / 0评

欢迎来到《Bitcron主题制作系列教程》。到上次为止网站的结构部分(HTML)全部讲完了,这次要说说样式CSS和其他七零八碎的东西。其实主要原因还是CSS似乎没什么好说的,只好凑点其他东西,不至于文章太过干瘪。

CSS/Js

在总述「Bitcron主题制作系列教程」时我说过:

制作Bitcron主题需要一定的HTML、CSS和一些JS知识(前端),并且熟悉Bitcron的API(后端)。

因为Bitcron采用的是改良过的Jade语法,融合了前后端的写法,所以实际上前面讲的那么多内容里同时包含了HTML和Bitcron的API,那么剩下的就是CSS和Js了。CSS是必修,Js是选修。

我建议先在W3Schools学习一下CSS的基本知识,然后了解一下Sass。Sass可以让CSS样式表更加简洁有逻辑,特别是嵌套写法(nesting)真的省事很多。下面我列举一些学习网站,毕竟CSS太宽泛了,系统了解更有效果。

对JavaScript/jQuery有兴趣的可以参考:

脑洞

接下来说点杂七杂八的脑洞。

tab功能

Bitcron提供了tab语法块,可以不用刷新就切换页面。所以受到Hexo主题NexT的启发,我在主题「庸」中使用了这个功能将归档页面分为文章归档和分类标签。如此既可控制页面长度,又能相对分类不同内容,同时减少模板文件数量,算是个贯彻了「极简主义」精神的用法。

后来我又萌生了个更大的“野心”,把tab功能运用在所有页面切换中,于是主题「它布」诞生了,效果请到这里查看。虽然这个主题的主题文件只有三个:index+category+tag.jadepost.jadestyle.scss,但最重要的index+category+tag.jade特别长,修改起来也「不太符合人体工学」,故而我在写完之后并不推荐这种写法。

评论功能

Bitcron自带评论,内容由对应的.csv管理。早些时候有人问我能不能做个问答页面,我便想到了用评论。比如在根目录新建一个页面为ask.md,再用修改CSS的方法把评论框和评论列表修饰为问答形式。如果只想要一问一答还能用CSS隐藏回复按钮。

好了,这个系列终于写完了,说实话我也hin累了,还好在我彻底厌倦之前写完了,没有弃坑。另外以后还有补充也会看情况更新,其他与主题不相关的Bitcron技巧则会更新在专门的Bitcron页面里,有兴趣的话可以收藏一下。

相关阅读

下一篇:已完结
返回目录:Bitcron主题制作系列教程
上一篇:Bitcron主题的搜索页面

962°
画了个木头桌子
Comments
Write a Comment
点击加载Disqus