备份

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
.
├── _config.yml
├── languages
│   └── zh-CN.yml
├── layout
|   ├── index.pug
│   └── includes
│       ├── addons
│       │   ├── blackandwhite.pug
│       │   ├── footplayerh.pug
│       │   └── funnytitle.pug
│       ├── footer.pug
│       ├── header
│       │   └── index.pug
│       ├── page
│       │   └── flink.pug
│       ├── layout.pug
│       └── third-party
│           └── comments
│               └── valine.pug
├── source
|   └── css
|       ├── _layout
|       |   └── categoryBar.styl
|       └── _page
|           └── flink.styl
└── scripts
    └── filters
        └── random_cover.js

美化友链

使用方法：糖果屋店长的 Friend Link Card Beautify

  1. 增加了如下文件
    • \butterfly\layout\includes\page\flink.pug
  2. 修改了如下文件
    1. \butterfly\source\css\_page\flink.styl
    2. [Blogroot]\source\_data\link.yml
    3. \butterfly\_config.yml

首页单列变双列

使用方法：小冰博客しゅふがく的 教程：基于Butterfly主题的双栏卡片主页文章css样式

  1. 修改了如下文件
    • blog\source\mogai.css

双列左右高度随意排布

文件blog\source\mogai.css

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
102
103
104
105
106
107
108
109
110
111
112
113
114
/* 首页排版变成双行 */
.recent-post-area {
    display: flex;
    flex-direction: column;
}

#recent-posts {
    margin-top: -1rem;
    /*头部为空时抵消间隔，若有磁贴或日历请注释掉该行*/
    column-count: 2;
    /* 默认为三列布局 */
    column-gap: 10px;
    /* 设置列与列之间的间隙 */
    /*。*/
}

#recent-posts>.recent-post-item {
    /*max-height:324px;*/
    /*文章容器最大高度*/
    margin-top: 1rem;
    /*最小间距*/
    display: inline-block;
    height: auto;
    /*高度自动*/
    width: 100%;
    /*文章容器容器宽度*/
    margin-bottom: 10px;
    /* 设置元素之间的间距 */
    break-inside: avoid;
    /* 避免元素在列中断开 */
}

#recent-posts>.recent-post-item .post_cover {
    width: 100%;
    /*图片封面宽度*/
    height: 200px;
    /*图片封面高度*/
}

#recent-posts>.recent-post-item .post_cover img.post_bg {
    width: 100%;
    /*图片宽度*/
    height: 100%;
    /*图片高度*/
}


#recent-posts>.recent-post-item>.recent-post-info>.content {
    display: none;
    /*隐藏文章详情*/
}

#recent-posts>.recent-post-item {

    -webkit-flex-direction: column;
    /*容器内部纵向排列*/
    -ms-flex-direction: column;
    /*容器内部纵向排列*/
    flex-direction: column;
    /*容器内部纵向排列*/

}

#recent-posts>.recent-post-item .left_radius {
    border-radius: 8px 8px 0 0;
    /*圆角修改*/
}

#recent-posts>.recent-post-item .right_radius {
    border-radius: 8px 8px 0 0;
    /*圆角修改*/
}

.recent-post-info {

    padding: 0 40px;
    /*容器内部文字左右间距*/
    margin-top: 1em;
    /*容器内部文字上间距*/
    width: 100% !important;
    /*容器宽度*/
}

#recent-posts>.recent-post-item>.recent-post-info>.article-title {
    -webkit-line-clamp: 1;
    /*控制标题的行数*/
    margin-top: 0.3rem;
    /*控制标题的上间距*/
    margin-bottom: 0.3rem;
    /*控制标题的下间距*/
    color: var(--text-highlight-color);
    font-size: 1.2em;
    /*控制标题的字体大小*/
    line-height: 1.4;
    /*控制标题的行高*/

}

#recent-posts>.recent-post-item>.recent-post-info>.article-meta-wrap {
    margin-bottom: 1rem;
    /*控制标题meta信息的底部间距*/
}

@media screen and (max-width: 768px) {
    #recent-posts>.recent-post-item {
        width: 100%;
        /*控制手机自适应*/
    }

    #recent-posts {
        column-count: 1;
        /* 屏幕更小时只显示一列 */
    }
}

文件blog/themes/butterfly/layout/index.pug

1
2
3
4
5
6
7
8
9
10
11
extends includes/layout.pug

block content
  include ./includes/mixins/post-ui.pug
  .recent-post-area
    #recent-posts.recent-posts
      if theme.categoryBar.enable
        .recent-post-item(style='height:auto;width:100%;padding:0px;')
          #categoryBar!= list_categories(site.categories,{class: 'categoryBar',depth: 1})
      +postUI
    include includes/pagination.pug

分类磁贴

使用方法：糖果屋店长的 Categories Magnet

  1. 修改了如下文件
    • butterfly\layout\index.pug
    • [Blogroot]\_config.butterfly.yml
  2. 增加了如下文件
    • \butterfly\source\css\_layout\categoryBar.styl

卡片透明

使用方法：贰猹の小窝 个人哔哔：我的 butterfly 魔改记录

  1. 修改了如下文件
    • blog\source\mogai.css

启用SSL

这里的启用ssl是指在本地预览的时候启用ssl，为了方便某些测试和功能因此使用了这个功能

当然本网站的数据还是依托github经由cloudflare转发所提供的，次修改仅供我自己测试用。

参考（抄袭）内容：https://www.programmersought.com/article/73016589463/

  1. 在网站根目录下放置关于ssl证书的key和pem文件
  2. 修改/node_modules/hexo-server/lib目录下的server.js（需要备份）文件如下
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
102
103
104
105
106
107
108
109
110
var fs = require('fs');
var connect = require('connect');
var http = require('https');
var chalk = require('chalk');
var Promise = require('bluebird');
var open = require('opn');
var net = require('net');
var url = require('url');
var express = require('express');

var httpApp = express();

httpApp.all("*", (req, res, next) => {
    let host = req.headers.host;
    host = host.replace(/\:\d+$/, ''); // Remove port number
    res.redirect(307, `https://${host}${req.path}`);
});

httpApp.listen(80, function() {
    console.log('http on 80 Welcome to Smileyan.cn');
});

const options = {
    key: fs.readFileSync("./********.key"),
    cert: fs.readFileSync("./********.pem")
}

module.exports = function(args) {
    var app = connect();
    var config = this.config;
    var ip = args.i || args.ip || config.server.ip || undefined;
    var port = parseInt(args.p || args.port || config.server.port || process.env.port, 10) || 4000;
    var root = config.root;
    var self = this;

    return checkPort(ip, port).then(function() {
        return self.extend.filter.exec('server_middleware', app, { context: self });
    }).then(function() {
        if (args.s || args.static) {
            return self.load();
        }

        return self.watch();
    }).then(function() {
        return startServer(http.createServer(options, app), 4000, ip);
    }).then(function(server) {
        var addr = server.address();
        var addrString = formatAddress(ip || addr.address, addr.port, root);

        self.log.info('Hexo is running at %s . Press Ctrl+C to stop.', chalk.underline(addrString));
        self.emit('server');

        if (args.o || args.open) {
            open(addrString);
        }

        return server;
    }).catch(function(err) {
        switch (err.code) {
            case 'EADDRINUSE':
                self.log.fatal('Port %d has been used. Try other port instead.', port);
                break;

            case 'EACCES':
                self.log.fatal('Permission denied. You can\'t use port ' + port + '.');
                break;
        }

        self.unwatch();
        throw err;
    });
};

function startServer(server, port, ip) {
    return new Promise(function(resolve, reject) {
        server.listen(port, ip, function() {
            resolve(server);
        });

        server.on('error', reject);
    });
}

function checkPort(ip, port) {
    return new Promise(function(resolve, reject) {
        if (port > 65535 || port < 1) {
            return reject(new Error('Port number ' + port + ' is invalid. Try a number between 1 and 65535.'));
        }

        var server = net.createServer();

        server.once('error', reject);

        server.once('listening', function() {
            server.close();
            resolve();
        });

        server.listen(port, ip);
    });
}

function formatAddress(ip, port, root) {
    var hostname = ip;
    if (ip === '0.0.0.0' || ip === '::') {
        hostname = 'localhost';
    }

    return url.format({ protocol: 'http', hostname: hostname, port: port, path: root });
}

然后再次运行服务器就必须使用ssl进行浏览了