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 背景颜色：用于pre、code、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主题