× 1,513字 × 430阅

Bitcron主题「方」

受人欢迎的「墨」、为了证明自己的「庸」、尝试符合大众口味的「入灰」,都不及把「日记」截图设为相册封面时的愉悦,和面对「淡泊」时的再次动心。以前我分不清到底是能力限制了我的审美,还是我本就喜欢简洁的设计。但当写出了好几个“复杂”的主题之后,我好像有点明白了,即使我仍说不准这是否是惯性,但我决定直面自己的内心,做自己喜欢的设计。

Bitcron主题「方」
「方」是一个正经的Bitcron主题

上面这些废话并不是「方」的来源,而是完成主题之后的感受。说起来源,其实是偶然翻阅OneDrive时看到「网页设计」文件夹里躺着几份“古时候”做的设计。有些对于当时的我来说是没有能力实现的,而有些则有着妥协的意味。在现在的我看来,妥协的确实远远简单于天马行空的,于是顺手实现了简单的那份,而天马行空待有机会再看吧。

三年前的设计图
三年前的设计图

虽然最后还是决定改掉方块的背景色,但2px的边框被保留了下来并感到做了非常正确的决定。如果没有那些红字标注,也许我会把所有的边框都设置为1px,我毫不怀疑这个微小的变动会像蝴蝶效应一般,最终改变整个主题的风格走向。「幸好、幸好」,我在心里默默说着。

一旦发现主题「太过朴素」之后,之前的华美风Mockup似乎就不太适合了(可参见「淡泊」的效果图)。于是我又到老地方——Pixeden寻找新的免费素材,在此真诚感谢设计师们的无私奉献。(虽然我隐隐开始想要自己做Mockup了,如果实在找不到合适的素材的话。)

特点和注意

其实我有点厌倦这种格式了,但还没想到更好的,就先这样吧。所以按照惯例说说这个主题的特点和需要注意的地方。

  • 网站logo默认为黑白,鼠标悬停时变为彩色
  • 自定义菜单,悬停时显示特色背景(特别鸣谢4585_5360矩阵良的出谋划策)
  • 自定义部分样式(下文会做具体说明)
  • 优化代码块样式(特别针对有行数的代码块),并加强了在iOS上的体验
  • 设置/posts页面存放所有文章,下拉自动加载,带缩略图
  • 归档页面包含所有分类和标签,以及可分页的文章列表
  • 优化评论框
  • 上一篇下一篇导航
  • 搜索框
  • 优化标题字体(采用Google Font和Adobe Typekit在线字体:思源宋体)

下面说明一下style.scss中可自定义样式的各参数:

1) 基本设置

  • $font-size 字体大小:因为关联了很多缩进值,所以请务必使用px
  • $line-height 行高
  • $max-width 网站内容的最大宽度
  • $word-color 文本颜色
  • $second-color 第二种颜色:用于文本和链接之外的地方
  • $link-color 链接颜色
  • $hover-color 鼠标悬停时的链接颜色
  • $bg-color 背景颜色:用于precode、TOC和脚注等地方
  • $border-color 边框颜色

2) 菜单方块大小(※根据$max-width的变化而调整)

  • $square-height 菜单方块大小
  • $square-height-800 屏幕宽度小于800px时菜单方块大小
  • $square-height-600 屏幕宽度小于600px时菜单方块大小

3) 悬停时菜单栏方块的背景

  • $nav-bg 菜单栏方块的背景:可使用图片或颜色
  • $nav-bg-size 菜单栏方块的背景尺寸
  • $nav-bg-opacity 菜单栏方块的背景透明度

4) /posts页面的缩略图

  • $thumb-width 缩略图宽度
  • $thumb-height 缩略图高度
  • $thumb-width-mobile 缩略图宽度(小屏幕)
  • $thumb-height-mobile 缩略图高度(小屏幕)

5) 集大成者

/* 用于blockquote、pre、评论、TOC、脚注、/posts页面等 */
.module {
    font-size: $font-size*0.9; /* 字体为一般正文的0.9倍 */
    line-height: $line-height;
}
/* 用于各类边框 */
.square {
    border: 2px solid $border-color; 
    background: #fff;
    transition: 0.5s;
    &:hover, &:focus {
        box-shadow: 0 0 8px $border-color;
    }
}

在线预览

demo.shuiba.co

安装配置

  • 下载:从GitHub下载相应文件,解压后将template文件夹放入根目录
  • 二级标题:Dashboard → Site → Sub Title
  • 显示TOC:Dashboard → Common → Show TOC: Yes
  • 自定义菜单:Dashboard → Navigation(可以用<br>换行,比如ARCHIVE<br>归档
  • 博主名称:Dashboard → Advanced → Admin Name(显示在页脚版权处。如果此处留空,则采用网站名称。)
  • 评论嵌套:Dashboard → Render → Comments Type: tree
  • 评论显示Gravatar头像:Dashboard → Render → Use Gravatar for Visitors: Yes
  • 网站头像/Apple touch icon:Dashboard → Images → Site Avatar
  • 评论中的博主头像:Dashboard → Images → Admin Avatar
  • 评论中的访客头像:Dashboard → Images → Visitor Avatar (后台未开启评论显示Gravatar、访客邮箱不对应Gravatar或Bitcron账号时显示)

付费购买

主题「方」的定价为¥60。购买前请先确认版权声明,如果购买则默认同意此声明。

支付宝二维码
支付宝二维码

更新日志

  • 2017-12-13
    • 发布主题
  • 2017-12-20
    • 菜单方块尺寸设为参数,便于随着最大宽度变动

更多主题

Bitcron主题

VSCO是一款网红App,因其逼真的胶片滤镜深受广大小清新族群的喜爱,当然我也不例外,甚至付费买了500日元的滤镜套餐以表支持。不过滤镜多了反而有点选择困难症,而且后来我发现要拍好照片光靠滤镜是不够的。而当我被VSCO疯狂吸粉的同时,我也发现Instagram上有很多feature摄影作品的账号,因为本身就跟朋友们联合运营着一个华人社区(@captchina),所以想着再做一个feature使用VSCO滤镜的摄影账号,顺便给自己带点人气。当时已经存在几个或有名或无名的类似账号,比如@vscoism、@vscocammer、@vsco_plants之类的,年代太久远记不太清了。因为彼时VSCO还叫VSCOcam,所以似乎没什么人在VSCO这四个字母上下文章,我也顺利注册到@vscoer的账号。 左边是旧logo,右边是更新后的新logo 敲定了名号后,我便开始着手设计logo。当时VSCO新版使用的是金色,因此我在设计中借用了这个颜色,也由此发现金色不管搭配黑色还是白色都很好看。Logo完成后,我便在#vscocam中寻找符合自己审美的图片,然后主动feature......
点击加载Disqus评论