Bitcron 主题「墨」

|6895字|893阅读

又双叒叕填了一个坑，撒花！想把 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 主题 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101

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字|893阅读
分类: 博客
标签: 博客 主题
         
↾
返回顶部