Bitcron 主题「墨」

|6895字|669阅读

又双叒叕填了一个坑,撒花!想把 FarBox 主题「墨」移植到 Bitcron 其实是在写第二个主题「庸」之前,那时候因为纠结于 pure grid 导致过程很心累,遂搁置。直到相继完成了「日记」「它布」之后,才又重新直面这个“特别的主题”。说特别是因为,这是我的第一个有意识设计的博客主题,那时候还是个学生呐,现在都工作了又辞职了,逝者如斯夫啊。但不得不承认,这个设计可能是我至今为止最棒的一个了,即使现在在技术上成长了不少。不过简洁的主题我也玩得差不多了,正好以这个主题为分水岭,之后搞点新花样吧。

Bitcron 主题「墨」
「墨」是一个古风的 Bitcron 主题

特点

  • 中国古风风格,菜单悬停的笔刷背景、文字悬停的晕染效果、网站头像调灰(悬停时恢复),与整体色调更契合
  • 小屏显示时菜单自动隐藏,轻触特制毛笔按钮打开闭合
  • 支持分类、标签、搜索和社交按钮
  • 支持后台设置自定义菜单,当前菜单放置背景更易懂
  • 评论框优化
  • 字体优化:网站标题(仅支持繁体)、菜单和正文分别做了调试

最初的设计就是以中国风为重点,所以加入了水墨晕染和毛笔刷痕等元素。整体色调为深灰黑,就是墨汁掺了点水的颜色。点睛色取的是朱砂红,也就是俗称的“中国红”,是比较正的大红色。这个设计后来被 FarBox 收入后台并重新改写,去掉了很多图片。我也受其启发,这次移植时除了保留了核心的鼠标悬停背景和小屏的菜单按钮图片,其他都尽量采用更灵活的方案替代。

说是移植,准确来说是重写。一来技术精进了不少,二来模板语言不同,移植还不如重写效率高。整体效果对照的是当初的设计图,因为 FarBox 版本现在看来有点“局促”,所以重写时特地注意了留白。另外一些以前没能实现的效果也加上了,同时在小屏上把菜单改成覆盖全屏的了,为的是更宽裕的空间,也支持了搜索。

背景图片是彼时自己用笔刷设计制作的,不是素材哟,是原创,所以这次也放进 GitHub 提供下载。背景配合主题做了多处适配,比如大小屏时分别与头像的位置关系等,可谓是武装到细节。

主题「墨」推荐背景图片
推荐使用的背景图片,同样可以在 GitHub 下载

在线预览

demo.shuiba.co

安装配置

  1. 下载:从 GitHub 下载相应文件,解压后将 template 文件夹放入根目录中;
  2. 网站标题:Dashboard → Site → Title
  3. 每页显示文章数:Dashboard → Common → Posts Per Page
  4. 社交按钮:Dashboard → Common → Social ID
  5. 评论嵌套:Dashboard → Render → Comments Type: tree
  6. 评论显示 Gravatar 头像:Dashboard → Render → Use Gravatar for Visitors: Yes
  7. 自定义菜单:Dashboard → Navigation(建议修改并使用中文,因为对字距做了调整)
  8. 各种网站图片:Dashboard → Images。网站头像对应 Site Avatar;评论者头像对应 Visitor Avatar;背景图片对应 Default Background。

付费购买

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

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

更新日志

  • 2017-07-31
    • 发布主题
  • 2017-08-17
    • 更新样式:二级标题、引用、分类、标签
  • 2017-10-10
    • 修正评论框样式
  • 2017-12-15
    • 修正菜单栏太长时的样式

更多主题

Bitcron 主题


import java.io.File;  
import java.io.FileInputStream;  
import java.io.FileNotFoundException;  
import java.io.FileOutputStream;  
import java.io.IOException;  
import java.io.InputStream;  
import java.io.OutputStream;  
import java.text.DateFormat;  
import java.util.Date;  
import java.util.Iterator;  

import javax.swing.text.html.HTMLDocument.HTMLReader.FormAction;

/** *

  • 功能描述:

  • @author Administrator

  • @Date Jul 19, 2008

  • @Time 9:46:11 AM

  • @version 1.0 */
    public class FileUtil {

    /**

    • 功能描述:列出某文件夹及其子文件夹下面的文件,并可根据扩展名过滤
    • @param path
    •        文件夹 
      

    */
    public static void list(File path) {
    if (!path.exists()) {
    System.out.println("文件名称不存在!");
    } else {
    if (path.isFile()) {
    if (path.getName().toLowerCase().endsWith(".pdf")
    || path.getName().toLowerCase().endsWith(".doc")
    || path.getName().toLowerCase().endsWith(".chm")
    || path.getName().toLowerCase().endsWith(".html")
    || path.getName().toLowerCase().endsWith(".htm")) {// 文件格式
    System.out.println(path);
    System.out.println(path.getName());
    }
    } else {
    File[] files = path.listFiles();
    for (int i = 0; i < files.length; i++) {
    list(files[i]);
    }
    }
    }
    }

    /**

    • 功能描述:拷贝一个目录或者文件到指定路径下,即把源文件拷贝到目标文件路径下
    • @param source
    •        源文件 
      
    • @param target
    •        目标文件路径 
      
    • @return void */
      public static void copy(File source, File target) {
      File tarpath = new File(target, source.getName());
      if (source.isDirectory()) {
      tarpath.mkdir();
      File[] dir = source.listFiles();
      for (int i = 0; i < dir.length; i++) {
      copy(dir[i], tarpath);
      }
      } else {
      try {
      InputStream is = new FileInputStream(source); // 用于读取文件的原始字节流
      OutputStream os = new FileOutputStream(tarpath); // 用于写入文件的原始字节的流
      byte[] buf = new byte[1024];// 存储读取数据的缓冲区大小
      int len = 0;
      while ((len = is.read(buf)) != -1) {
      os.write(buf, 0, len);
      }
      is.close();
      os.close();
      } catch (FileNotFoundException e) {
      e.printStackTrace();
      } catch (IOException e) {
      e.printStackTrace();
      }
      }
      }

    /**

    • @param args */
      public static void main(String[] args) {
      // TODO Auto-generated method stub
      File file = new File("F:\Tomcat");
      list(file);
      Date myDate = new Date();
      DateFormat df = DateFormat.getDateInstance();
      System.out.println(df.format(myDate));
      }

}

|6895字|669阅读
分类: 博客
标签: 主题 博客
面朝大海,春暖花开
点击加载Disqus评论
         
返回顶部