侧边栏
发表于：2021-09-28 | 分类： 前端
字数统计: 9.9k | 阅读时长: 56分钟 | 阅读量：

默认的侧边栏

在主题的config.yml文件中配置

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
115
116
117
# sidebar侧边栏
sidebar:
  on: true
  position: left # left right
  widget_library:
    side_blogger:
      on: true
      avatar: http://api.btstu.cn/sjtx/api.php?lx=c1&format=images
      shape: rectangle # circle, rectangle
      url: /about/
      title: 青墨书晚风
      subtitle: 我是副标题
      jinrishici: true # Poetry Today. You can set a string, and it will be displayed when loading fails.
      fontFammily: Long Cang,cursive
      background: '#fff'
      order:  # 卡片排序, 数值越小，越在上面
      social:
        - icon: fas fa-rss
          url: /atom.xml
        - icon: fas fa-envelope
          url: mailto:me@xxx.com
        - icon: fab fa-github
          url: https://github.com/yuang01/hexo-theme-bamboo
        - icon: fab fa-qq
          url: tencent://AddContact/?fromId=50&fromSubId=1&subcmd=all&uin=你的qq号码
    # ---------------------------------------
    # category widget
    side_category:
      on: true
      background: '#fff'
      order:  # 卡片排序(widget都有)，任意数字，数字小的在上面
      header:
        icon: fas fa-folder-open
        icon_color: # 标题字体颜色
        title: 文章分类
        url: /blog/categories/
    # ---------------------------------------
    # tagcloud widget
    side_tagcloud:
      on: true
      background: '#fff'
      order: 
      header:
        icon: fas fa-tags
        icon_color: 
        title: 热门标签
        url: /tags/
      min_font: 14
      max_font: 24
      color: true
      start_color: '#999'
      end_color: '#555'
    # ---------------------------------------
    # recent_post widget
    side_recent_post:
      on: true
      background: '#fff'
      limit: 5
      sort: update # date
      order: 
      header:
        icon: fas fa-book
        icon_color: 
        title: 最新文章
        url: /tags/
    # ---------------------------------------
    # side_archives widget
    side_archives:
      on: true
      type: monthly # yearly or monthly      or yearly
      format: MMMM YYYY # eg: YYYY年MM月     or YYYY
      timeOrder: -1 # Sort of order. 1, asc for ascending; -1, desc for descending 时间排序
      limit: 8 # if set 0 will show all
      order:  # widget order 卡片排序
      background: '#fff'
      header: 
        icon: fas fa-archive
        icon_color: red
        title: 归档
    # ---------------------------------------
    # side_webinfo widget
    side_webinfo:
      background: '#fff'
      order: 
      header: 
        icon: fas fa-chart-line
        title: 站点信息
      type:
        article:
          on: true
          text: '文章数目：'
          unit: '篇'
        runtime:
          on: true
          data: '2020/01/01'    # 填写建站日期
          text: '已运行时间：'
          unit: '天'
        wordcount:
          on: true
          text: '本站总字数：'   # 需要启用 wordcount
          unit: '字'
        visitcounter:
          service: busuanzi # only busuanzi
          siteuv:
            on: true
            text: '本站访客数：'
            unit: '人'
          sitepv:
            on: true
            text: '本站总访问量：'
            unit: '次'
        lastupd:
          on: true
          friendlyShow: true    # 更友好的时间显示
          text: '最后活动时间：'
          unit: '日'

widget 排序

只需要配置 order就行。（使用了 Flex 佈局的 order 屬性)，值越小越靠前(靠上)

自定义侧边栏

创建 widget.yml

在Hexo博客目錄中的source/_data（如果沒有 _data 文件夾，请自行创建），創建一個文件 widget.yml

格式

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
# widget_library 里面的不会出现在sticky区域，也就是不会粘贴在左侧 
widget_library:
  - class_name: test_a
    id_name: test_a
    order: 0
    name: 这个widget不会粘贴
    icon: fab fa-weibo
    icon_color: '#d63130'
    url: http://baidu.com
    background: '#fff'
    html: 'haha'


# widget_library_sticky 里面的会出现在sticky区域，会粘贴在左侧
widget_library_sticky:
  - class_name: testWidget
    id_name: testWidget
    order: -1
    name: 微博热搜
    icon: fab fa-weibo
    icon_color: '#d63130'
    url: http://baidu.com
    background: '#fff'
    html: 'xixi'

# home_widget里面的内容会出现在座右铭那一个栏目里面
home_widget:
  - class_name: welcome
    id_name: welcome
    order: -1
    name: 欢迎
    icon: fas fa-envelope
    icon_color: blue
    url: http://baidu.com
    background: '#fff'
    html: '针不戳'

参数

参数 解释
class_name 所创建的 widget 父类 class 名
id_name 所创建的 widget 父类 id 名
order 所创建的 widget 排序 （可选）
name 所创建的 widget 名称
icon 所创建的 widget 头部的字体图标
icon_color 所创建的 widget 头部的字体图标的颜色
url 所创建的 widget 头部点击跳转的链接
background 所创建的 widget 的背景颜色
html 所创建的 widget 的相关代码

结构

生成的代码为

1
2
3
4
5
6
7
8
9
10
<div class="widget test_a" id="test_a" style="order: 0;background: #fff">
  <header>
    <a style="color: #d63130" target="_blank" rel="noopener" href="http://baidu.com" data-pjax-state="">
      <i class="fab fa-weibo fa-fw" aria-hidden="true"></i><span class="name">这个widget不会粘贴</span>
    </a>
  </header>
  <div class="content">
    haha
  </div>
</div>

如果你需要对添加的 widget 进行 UI 调整，请自行添加 css 到 inject 去。

例子

首页添加github日历

例如我在``里添加一个github日历，首先我在source文件夹下创建一个js文件/githubcalendar/index.js, js代码如下:

github日历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
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
var github_canlendar = (git_user, git_color) => {
    var git_githubapiurl = "https://python-github-calendar-api.vercel.app/api?" + git_user;
    var git_fixed = 'fixed';
    var git_px = 'px';
    var git_month = ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'];
    var git_monthchange = [];
    var git_oneyearbeforeday = '';
    var git_thisday = '';
    var git_amonthago = '';
    var git_aweekago = '';
    var git_weekdatacore = 0;
    var git_datacore = 0;
    var git_total = 0;
    var git_datadate = '';
    var git_git_data = [];
    var git_positionplusdata = [];
    var git_firstweek = [];
    var git_lastweek = [];
    var git_beforeweek = [];
    var git_thisweekdatacore = 0;
    var git_mounthbeforeday = 0;
    var git_mounthfirstindex = 0;
    var git_crispedges = 'crispedges';
    var git_thisdayindex = 0;
    var git_amonthagoindex = 0;
    var git_amonthagoweek = [];
    var git_firstdate = [];
    var git_first2date = [];
    var git_montharrbefore = [];
    var git_monthindex = 0;
    var retinaCanvas = (canvas, context, ratio) => {
        if (ratio > 1) {
            var canvasWidth = canvas.width;
            var canvasHeight = canvas.height;
            canvas.width = canvasWidth * ratio;
            canvas.height = canvasHeight * ratio;
            canvas.style.width = '100%';
            canvas.style.height = canvasHeight + 'px';
            context.scale(ratio, ratio);
        }
    };
    function responsiveChart() {
        var ratio = window.devicePixelRatio || 1
        var git_tooltip_container = document.getElementById('git_tooltip_container');
        var git_x = '';
        var git_y = '';
        var git_span1 = '';
        var git_span2 = '';
        var c = document.getElementById("gitcanvas");
        c.style.width = '100%';
        c.style.height = '';
        var cmessage = document.getElementById("gitmessage");
        var ctx = c.getContext("2d");
        width = c.width = document.getElementById("gitcalendarcanvasbox").offsetWidth;
        height = c.height = 9 * 0.96 * c.width / git_data.length;
        retinaCanvas(c,ctx, ratio)
        var linemaxwitdh = height/ 9;
        var lineminwitdh = 0.8 * linemaxwitdh;
        var setposition = {x: 0.02 * width, y: 0.025 * width};
        for (var week in git_data) {
            weekdata = git_data[week];
            for (var day in weekdata) {
                var dataitem = {date: "", count: "", x: 0, y: 0};
                git_positionplusdata.push(dataitem);
                ctx.fillStyle = git_thiscolor(git_color, weekdata[day].count);
                setposition.y = Math.round(setposition.y * 100) / 100;
                dataitem.date = weekdata[day].date;
                dataitem.count = weekdata[day].count;
                dataitem.x = setposition.x;
                dataitem.y = setposition.y;
                ctx.fillRect(setposition.x, setposition.y, lineminwitdh, lineminwitdh);
                setposition.y = setposition.y + linemaxwitdh
            }
            setposition.y = 0.025 * width;
            setposition.x = setposition.x + linemaxwitdh
        }
        if (document.body.clientWidth > 700) {
            ctx.font = "600  Arial";
            ctx.fillStyle = '#aaa';
            ctx.fillText("日", 0, 1.9 * linemaxwitdh);
            ctx.fillText("二", 0, 3.9 * linemaxwitdh);
            ctx.fillText("四", 0, 5.9 * linemaxwitdh);
            ctx.fillText("六", 0, 7.9 * linemaxwitdh);
            var monthindexlist = width / 24;
            for (var index in git_monthchange) {
                ctx.fillText(git_monthchange[index], monthindexlist, 0.7 * linemaxwitdh);
                monthindexlist = monthindexlist + width / 12
            }
        }
        c.onmousemove = function (event) {
            if (document.querySelector('.gitmessage')) {
                git_tooltip_container.innerHTML = ""
            }
            getMousePos(c, event)
        };
        git_tooltip_container.onmousemove = function (event) {
            if (document.querySelector('.gitmessage')) {
                git_tooltip_container.innerHTML = ""
            }
        };

        function getMousePos(canvas, event) {
            var rect = canvas.getBoundingClientRect();
            var x = event.clientX - rect.left * (canvas.width / rect.width);
            var y = event.clientY - rect.top * (canvas.height / rect.height);
            for (var item of git_positionplusdata) {
                var lenthx = x - item.x;
                var lenthy = y - item.y;
                if (0 < lenthx && lenthx < lineminwitdh) {
                    if (0 < lenthy && lenthy < lineminwitdh) {
                        git_span1 = item.date;
                        git_span2 = item.count;
                        git_x = event.clientX - 100;
                        git_y = event.clientY - 60;
                        html = tooltip_html(git_x, git_y, git_span1, git_span2);
                        append_div_gitcalendar(git_tooltip_container, html)
                    }
                }
            }
        }
    }

    function addlastmonth() {
        if (git_thisdayindex === 0) {
            thisweekcore(52);
            thisweekcore(51);
            thisweekcore(50);
            thisweekcore(49);
            thisweekcore(48);
            git_thisweekdatacore += git_firstdate[6].count;
            git_amonthago = git_firstdate[6].date
        } else {
            thisweekcore(52);
            thisweekcore(51);
            thisweekcore(50);
            thisweekcore(49);
            thisweek2core();
            git_amonthago = git_first2date[git_thisdayindex - 1].date
        }
    }

    function thisweek2core() {
        for (var i = git_thisdayindex - 1; i < git_first2date.length; i++) {
            git_thisweekdatacore += git_first2date[i].count
        }
    }

    function thisweekcore(index) {
        for (var item of git_data[index]) {
            git_thisweekdatacore += item.count
        }
    }

    function addlastweek() {
        for (var item of git_lastweek) {
            git_weekdatacore += item.count
        }
    }

    function addbeforeweek() {
        for (var i = git_thisdayindex; i < git_beforeweek.length; i++) {
            git_weekdatacore += git_beforeweek[i].count
        }
    }

    function addweek(data) {
        if (git_thisdayindex === 6) {
            git_aweekago = git_lastweek[0].date;
            addlastweek()
        } else {
            lastweek = data.contributions[51];
            git_aweekago = lastweek[git_thisdayindex + 1].date;
            addlastweek();
            addbeforeweek()
        }
    }

    fetch(git_githubapiurl).then(data => data.json()).then(data => {
        git_data = data.contributions;
        git_total = data.total;
        git_first2date = git_data[48];
        git_firstdate = git_data[47];
        git_firstweek = data.contributions[0];
        git_lastweek = data.contributions[52];
        git_beforeweek = data.contributions[51];
        git_thisdayindex = git_lastweek.length - 1;
        git_thisday = git_lastweek[git_thisdayindex].date;
        git_oneyearbeforeday = git_firstweek[0].date;
        git_monthindex = git_thisday.substring(5, 7) * 1;
        git_montharrbefore = git_month.splice(git_monthindex, 12 - git_monthindex);
        git_monthchange = git_montharrbefore.concat(git_month);
        addweek(data);
        addlastmonth();
        var html = github_main_box(git_monthchange, git_data, git_user, git_color, git_total, git_thisweekdatacore, git_weekdatacore, git_oneyearbeforeday, git_thisday, git_aweekago, git_amonthago);
        append_div_gitcalendar(github_container, html);
        if(document.getElementById('github_loading')){
            document.getElementById('github_loading').remove()};
        responsiveChart()
    }).catch(function (error) {
        console.log(error)
    });
      window.addEventListener('resize', function () {
          if (document.getElementById('gitcanvas')) {
            responsiveChart()
          }
    })
    window.addEventListener('scroll', function () {
      if (document.querySelector('.gitmessage')) {
        git_tooltip_container.innerHTML = ""
    }
    })
    var git_thiscolor = (color, x) => {
        if (x === 0) {
            var i = parseInt(x / 2);
            return color[0]
        } else if (x < 2) {
            return color[1]
        } else if (x < 20) {
            var i = parseInt(x / 2);
            return color[i]
        } else {
            return color[9]
        }
    };
    var tooltip_html = (x, y, span1, span2) => {
        var html = '';
        html += '<div class="gitmessage" style="top:' + y + 'px;left:' + x + 'px;position: fixed;z-index:9999"><div class="angle-wrapper" style="display:block;"><span>' + span1 + '&nbsp;</span><span>' + span2 + ' 次上传</span></div></div>';
        return html
    };
    var github_canvas_box = () => {
        var html = '<div id="gitcalendarcanvasbox"> <canvas id="gitcanvas" style="animation: none;"></canvas></div>';
        return html
    };
    var github_info_box = (user, color) => {
        var html = '';
        html += '<div id="git_tooltip_container"></div><div class="contrib-footer clearfix mt-1 mx-3 px-3 pb-1"><div class="float-left text-gray">数据来源 <a href="https://github.com/' + user + '" target="blank">@' + user + '</a></div><div class="contrib-legend text-gray">Less <ul class="legend"><li style="background-color:' + color[0] + '"></li><li style="background-color:' + color[2] + '"></li><li style="background-color:' + color[4] + '"></li><li style="background-color:' + color[6] + '"></li><li style="background-color:' + color[8] + '"></li></ul>More </div></div>';
        return html
    };
    var github_main_box = (monthchange, git_data, user, color, total, thisweekdatacore, weekdatacore, oneyearbeforeday, thisday, aweekago, amonthago) => {
        var html = '';
        var canvasbox = github_canvas_box();
        var infobox = github_info_box(user, color);
        var style = github_main_style();
        html += '<div class="position-relative"><div class="border py-2 graph-before-activity-overview"><div class="js-gitcalendar-graph mx-md-2 mx-3 d-flex flex-column flex-items-end flex-xl-items-center overflow-hidden pt-1 is-graph-loading graph-canvas gitcalendar-graph height-full text-center">' + canvasbox + '</div>' + infobox + '</div></div>';
        html += '<div style="display:flex;width:100%"><div class="contrib-column contrib-column-first table-column"><span class="text-muted">过去一年提交</span><span class="contrib-number">' + total + '</span><span class="text-muted">' + oneyearbeforeday + '&nbsp;-&nbsp;' + thisday + '</span></div><div class="contrib-column table-column"><span class="text-muted">最近一月提交</span><span class="contrib-number">' + thisweekdatacore + '</span><span class="text-muted">' + amonthago + '&nbsp;-&nbsp;' + thisday + '</span></div><div class="contrib-column table-column"><span class="text-muted">最近一周提交</span><span class="contrib-number">' + weekdatacore + '</span><span class="text-muted">' + aweekago + '&nbsp;-&nbsp;' + thisday + '</span></div></div>' + style;
        return html
    };
    var github_main_style = () => {
        style = '<style>#github_container{text-align:center;margin:0 auto;width:100%;display:flex;display:-webkit-flex;justify-content:center;align-items:center;flex-wrap:wrap;}.gitcalendar-graph text.wday,.gitcalendar-graph text.month{font-size:10px;fill:#aaa;}.contrib-legend{text-align:right;padding:0 14px 10px 0;display:inline-block;float:right;}.contrib-legend .legend{display:inline-block;list-style:none;margin:0 5px;position:relative;bottom:-1px;padding:0;}.contrib-legend .legend li{display:inline-block;width:10px;height:10px;}.text-small{font-size:12px;color:#767676;}.gitcalendar-graph{padding:15px 0 0;text-align:center;}.contrib-column{text-align:center;border-left:1px solid #ddd;border-top:1px solid #ddd;font-size:11px;}.contrib-column-first{border-left:0;}.table-column{padding:10px;display:table-cell;flex:1;vertical-align:top;}.contrib-number{font-weight:300;line-height:1.3em;font-size:24px;display:block;}.gitcalendar img.spinner{width:70px;margin-top:50px;min-height:70px;}.monospace{text-align:center;color:#000;font-family:monospace;}.monospace a{color:#1D75AB;text-decoration:none;}.contrib-footer{font-size:11px;padding:0 10px 12px;text-align:left;width:100%;box-sizing:border-box;height:26px;}.left.text-muted{float:left;margin-left:9px;color:#767676;}.left.text-muted a{color:#4078c0;text-decoration:none;}.left.text-muted a:hover,.monospace a:hover{text-decoration:underline;}h2.f4.text-normal.mb-3{display:none;}.float-left.text-gray{float:left;}#user-activity-overview{display:none;}.day-tooltip{white-space:nowrap;position:absolute;z-index:99999;padding:10px;font-size:12px;color:#959da5;text-align:center;background:rgba(0,0,0,.85);border-radius:3px;display:none;pointer-events:none;}.day-tooltip strong{color:#dfe2e5;}.day-tooltip.is-visible{display:block;}.day-tooltip:after{position:absolute;bottom:-10px;left:50%;width:5px;height:5px;box-sizing:border-box;margin:0 0 0 -5px;content:" ";border:5px solid transparent;border-top-color:rgba(0,0,0,.85)}.position-relative{width:100%;}@media screen and (max-width:650px){.contrib-column{display:none}}.angle-wrapper{z-index:9999;display:inline;width:200px;height:40px;position:relative;padding:5px 0;background:rgba(0,0,0,0.8);border-radius:8px;text-align:center;color:white;}.angle-box{position:fixed;padding:10px}.angle-wrapper span{padding-bottom:1em;}.angle-wrapper:before{content:"";width:0;height:0;border:10px solid transparent;border-top-color:rgba(0,0,0,0.8);position:absolute;left:47.5%;top:100%;}</style>';
        return style
    }
};
var append_div_gitcalendar = (parent, text) => {
    if (typeof text === 'string') {
        var temp = document.createElement('div');
        temp.innerHTML = text;
        var frag = document.createDocumentFragment();
        while (temp.firstChild) {
            frag.appendChild(temp.firstChild)
        }
        parent.appendChild(frag)
    } else {
        parent.appendChild(text)
    }
};
var loading_git = (color) => {
    loading = '<div id="github_loading" style="width:10%;height:100%;margin:0 auto;display: block"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"  viewBox="0 0 50 50" style="enable-background:new 0 0 50 50" xml:space="preserve"><path fill="' + color + '" d="M25.251,6.461c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615V6.461z" transform="rotate(275.098 25 25)"><animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 25 25" to="360 25 25" dur="0.6s" repeatCount="indefinite"></animateTransform></path></svg></div>';
    return loading
};

(function(){
    var git_user = 'yuang01';
    var github_container = document.getElementById('github_container');
    var github_loading = document.getElementById('github_loading');
    var git_purple = ['#ebedf0', '#fdcdec', '#fc9bd9', '#fa6ac5', '#f838b2', '#f5089f', '#c4067e', '#92055e', '#540336', '#48022f', '#30021f',];
    var git_green = ['#ebedf0', '#f0fff4', '#dcffe4', '#bef5cb', '#85e89d', '#34d058', '#28a745', '#22863a', '#176f2c', '#165c26', '#144620'];
    var git_blue = ['#ebedf0', '#f1f8ff', '#dbedff', '#c8e1ff', '#79b8ff', '#2188ff', '#0366d6', '#005cc5', '#044289', '#032f62', '#05264c',];
    var git_color = git_green;
    if (github_container) {
      append_div_gitcalendar(github_container, loading_git(git_color[4]));
      github_canlendar(git_user, git_color)
    } else {
      console.log('nonono');
    }
    
})()

将 272行的git_user改为你自己的用户名
然后在 自定义侧边栏的home_widget中写入以下内容:

1
2
3
4
5
6
7
8
9
10
11
12
13
home_widget:
  - class_name: my_github_container
    id_name: my_github_container
    order: -1
    name: 测试日历
    icon: fas fa-envelope
    icon_color: blue
    url: http://baidu.com
    background: '#fff'
    html: '
      <div id="github_container"></div>
      <script defer data-pjax src="/githubcalendar/index.js"></script>
    '

然后就会在首页出现github日历图
github日历图

添加IP签名档

1
2
3
4
5
6
7
8
9
10
home_widget:
  - class_name: welcome
    id_name: welcome
    order: -1
    name: 欢迎
    icon: fas fa-envelope
    icon_color: blue
    url: http://baidu.com
    background: '#fff'
    html: '<img src="https://api.amogu.cn/api/ipimg/" style="width:100%">'

IP签名档

添加轮播图

同样在source文件夹下创建mySwiper/index.js和mySwiper/index.css文件，然后创建mySwiper/img文件夹，用于存放图片，轮播图嘛，肯定要图片。

mySwiper/index.js

js用vue写的，因为主题已经引入了vue版本的swiper轮播图插件, 当然你也可以引入jquery插件，用jquery来写，都可以的。

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
// 如果想变换轮播方式等，进阶的话，可以看这个 https://github.surmon.me/vue-awesome-swiper/
// 当然你也可以引入jquery插件，都可以的, 不只是轮播图，其他特效也可以
new Vue({
  el: "#mySwiper",
  data: function () {
    return {
      swiperOption: {
        direction: "vertical", // 这个是竖着的
        slidesPerView: 1,
        spaceBetween: 30,
        mousewheel: true,
        // 注释上面的四个，则水平方向轮播
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
        },
        // 注释掉上面这个，则不显示小点点
        loop: true, // 循环
        autoplay: {
          delay: 2500,
          disableOnInteraction: false,
        }, // 自动播放,注释掉则不自动播放
        on: {
          init: function () {
            swiperAnimateCache(this); //隐藏动画元素
            swiperAnimate(this); //初始化完成开始动画
          },
          slideChangeTransitionEnd: function () {
            swiperAnimate(this); //每个slide切换结束时也运行当前slide动画
          },
        },
        // or data-swiper-parallax="-100"
        // 上面是文字动画效果，注释则取消文字动画，动画效果参见 https://www.swiper.com.cn/usage/animate/index.html
      },
    };
  },
  computed: {
    swiper() {
      return this.$refs.myswiper.$swiper;
    },
  },
  methods: {
    // 鼠标移入停止轮播
    stopAutoPlay() {
      this.swiperOption.autoplay && this.swiper.autoplay.stop();
    },
    // 鼠标移出开始轮播
    startAutoPlay() {
      this.swiperOption.autoplay && this.swiper.autoplay.start();
    },
  },
});

mySwiper/index.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

.myswiper .swiper-slide {
    position: relative;
}

.myswiper .swiper-slide p {
    position: absolute;
    font-size: 18px;
    top: 50px;
    left: 10px;
    z-index: 9999;
    color: #fff;
}
.myswiper .swiper-slide a.toPath {
    display: block;
    width: 100%;
    height: 100%;
}
.myswiper .swiper-slide h2 {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 9999;
    color: #fff;
    font-size: 24px;
}
.myswiper .swiper-slide img {
    filter: brightness(0.8); /* 图片变暗 ,字体看得清 */
}
.myswiper.swiper-container-vertical .swiper-pagination-bullet-active {
    height: 30px;
    border-radius: 10px;
    transition: all 0.3s;
}

/* 暗黑模式样式在  .darkModel { }  类下 */
/* 例如 
    .darkModel .aaa {
        color: #c9d1d9;
    }
} */

最后在自定义侧边栏的home_widget写上

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
home_widget:
  - class_name: test2_swiper
    id_name: test2_swiper
    order: -1
    name: 测试轮播图
    icon: fas fa-envelope
    icon_color: blue
    url: http://baidu.com
    background: '#fff'
    html: '
    <div id="mySwiper" @mouseenter="stopAutoPlay()" @mouseleave="startAutoPlay()">
      <swiper class="myswiper" ref="myswiper" style="height:350px;" :options="swiperOption">

        <swiper-slide>
          <a href="http://baidu.com" class="toPath">
            <img class="no-lazy" src="/mySwiper/img/2.jpg" style="width:100%;height:100%;object-fit: cover;">
            <h2 class="ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">我是标题</h2>
            <p class="ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">我是描述哦</p>
          </a>
        </swiper-slide>

        <swiper-slide>
          <a href="http://baidu.com" class="toPath">
            <img class="no-lazy" src="/mySwiper/img/3.jpg" style="width:100%;height:100%;object-fit: cover;">
            <h2 class="ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">我是标题2</h2>
            <p class="ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">我是描述2</p>
          </a>
        </swiper-slide>

        <swiper-slide>
          <a href="http://baidu.com" class="toPath">
            <img class="no-lazy" src="/mySwiper/img/4.jpg" style="width:100%;height:100%;object-fit: cover;">
            <h2 class="ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">我是标题3</h2>
            <p class="ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">我是描述3</p>
          </a>
        </swiper-slide>

        <swiper-slide>
          <a href="http://baidu.com" class="toPath">
            <img class="no-lazy" src="/mySwiper/img/5.jpg" style="width:100%;height:100%;object-fit: cover;">
            <h2 class="ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">我是标题4</h2>
            <p class="ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">我是描述4</p>
          </a>
        </swiper-slide>

        <swiper-slide>
          <a href="http://baidu.com" class="toPath">
            <img class="no-lazy" src="https://api.dujin.org/pic/ghibli/" style="width:100%;height:100%;object-fit: cover;">
            <h2 class="ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">我是标题5</h2>
            <p class="ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">我是描述5</p>
          </a>
        </swiper-slide>

        <swiper-slide>
          <a href="http://baidu.com" class="toPath">
            <img class="no-lazy" src="/mySwiper/img/7.jpg" style="width:100%;height:100%;object-fit: cover;">
            <h2 class="ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">我是标题6</h2>
            <p class="ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">我是描述6</p>
          </a>
        </swiper-slide>

        <!-- 如果你想继续增加轮播图，继续在下面写<swiper-slide>我是内容</swiper-slide>就行了 -->
        <div class="swiper-pagination" slot="pagination"></div>

      </swiper>
    </div>

    <script defer src="/mySwiper/index.js"></script>
    <link href="/mySwiper/index.css" rel="stylesheet">
    '

注意，请自行修改a链接地址和图片地址和标题名称和描述

1
2
3
4
5
6
7
<swiper-slide>
  <a href="http://baidu.com" class="toPath">  <!-- a链接地址 -->
    <img class="no-lazy" src="/mySwiper/img/2.jpg" style="width:100%;height:100%;object-fit: cover;">  <!-- 图片地址 -->
    <h2 class="ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">我是标题</h2> <!-- 修改标题名称 -->
    <p class="ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">我是描述哦</p> <!-- 修改描述 -->
  </a>
</swiper-slide>

如果你想加轮播图或者删除轮播图，则增加或者删除上面这个模块就行了，这样，一个轮播图就放在了首页。
自定义轮播图

横向滚动特效

首先需要在source文件夹下创建bli/index.js和bli/index.css文件

bli/index.js 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// 主题已经默认cdn引入了vue-seamless-scroll插件
// https://chenxuan0000.github.io/vue-seamless-scroll/zh/guide/01-basic.html
new Vue({
  el: "#myBli", // el不要是最外面的id_name，应该是html: ''里的div的id
  data: function () {
    return {
      content: [],
      listData: [1, 2, 3, 4, 5, 6],
      classOption: {
        limitMoveNum: 2,
        direction: 3,
      },
    };
  },
  methods: {},
});

bli/index.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
#myBli .warp {
  width: 100%;
  height: 120px;
  margin: 0 auto;
  overflow: hidden;
}
#myBli .warp ul {
  list-style: none;
  padding: 0;
  margin: 0 auto;
}
#myBli .warp ul.ul-item {
  display: flex;
}
#myBli .warp ul.ul-item .li-item {
  width: 120px;
  display: block;
  height: 120px;
  margin-right: 10px;
  line-height: 120px;
  background-color: #999;
  color: #fff;
  text-align: center;
  font-size: 30px;
}

#myBli .warp ul.ul-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

最后在自定义侧边栏的home_widget中加入以下内容:

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
home_widget:
  - class_name: mybilibili
    id_name: mybilibili
    order: -1
    name: 测试bli
    icon: fas fa-envelope
    icon_color: blue
    url: http://baidu.com
    background: '#fff'
    html: '
      <div id="myBli">
        <vue-seamless-scroll
          :data="listData"
          :class-option="classOption"
          class="warp"
        >
          <ul class="ul-item" style="width:720px;">
            <!-- 在这里改, 手动修改a连接的href值和img的src值, 如果你会进阶，你可以使用v-for, 或者数据使用动态数据-->
            
            <li class="li-item">
              <a href="http://baidu.com">
                <img class="no-lazy" src="https://pic4.zhimg.com/80/v2-f549722dac8f777693c090a92498de0f_1440w.jpg">
              </a>
            </li>

            <li class="li-item">
              <a href="http://baidu.com">
                <img class="no-lazy" src="https://pic4.zhimg.com/80/v2-f549722dac8f777693c090a92498de0f_1440w.jpg">
              </a>
            </li>

            <li class="li-item">
              <a href="http://baidu.com">
                <img class="no-lazy" src="https://pic4.zhimg.com/80/v2-f549722dac8f777693c090a92498de0f_1440w.jpg">
              </a>
            </li>

            <li class="li-item">
              <a href="http://baidu.com">
                <img class="no-lazy" src="https://pic4.zhimg.com/80/v2-f549722dac8f777693c090a92498de0f_1440w.jpg">
              </a>
            </li>

            <li class="li-item">
              <a href="http://baidu.com">
                <img class="no-lazy" src="https://pic4.zhimg.com/80/v2-f549722dac8f777693c090a92498de0f_1440w.jpg">
              </a>
            </li>

            <li class="li-item">
              <a href="http://baidu.com">
                <img class="no-lazy" src="https://pic4.zhimg.com/80/v2-f549722dac8f777693c090a92498de0f_1440w.jpg">
              </a>
            </li>
            <!-- 在这里结束 -->
          </ul>
        </vue-seamless-scroll>
      </div>

      <script defer src="/bli/index.js"></script>
      <link href="/bli/index.css" rel="stylesheet">
    '

同样，自行修改上面a标签的链接和图片地址，至此横向滚动特效完成。

注意，使用vue写法的话，图片需要带上class=”no-lazy”，否则可能加载不出来，，js原生或者jquery不需要带

横向滚动特效

侧边栏增加微博热搜

同样同样，在source文件夹下创建weibo/index.js和weibo/index.css文件

weibo/index.js

又是vue写的，哈哈，随便用啥写

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
new Vue({
  el: "#myWeibo", // el不要是最外面的id_name，应该是html: ''里的div的id
  data: function () {
    return {
      content: [],
      classOption: {
        singleHeight: 30,
      },
    };
  },
  created() {
    this.getWeiboList();
  },
  methods: {
    // 请求开源api, 获取历史上的今天数据
    getWeiboList() {
      fetch("https://tenapi.cn/resou/", {
        method: "GET", // *GET, POST, PUT, DELETE, etc.
      })
        .then((res) => {
          return res.json();
        })
        .then((data) => {
          this.content = data.list;
        })
        .catch((err) => {
          console.log("err", err);
        });
    },
  },
});
weibo/index.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
.weibo-container {
    width: 100%;
    line-height: 30px;
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    height: 30px;
}
.weibo-container .left {
    display: flex;
}
.weibo-container .name {
    margin-left: 5px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
}
#myWeibo .warp {
    height: 300px;
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
}
.weibo-container .order {
    color: #fe962e;
}
.weibo-container .name a{
    color: black;
}
.weibo-container .name a:hover {
    text-decoration: underline;
    color: red;
}
.weibo-container .red {
    color: red;
}

最后在自定义侧边栏的widget_library_sticky或者widget_library中加入html,

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
widget_library_sticky:
  - class_name: testWidget
    id_name: testWidget
    order: -1
    name: 微博热搜
    icon: fab fa-weibo
    icon_color: '#d63130'
    url: http://baidu.com
    background: '#fff'
    html: '
      <div id="myWeibo">

      <!-- 如果不要滚动，则去掉 vue-seamless-scroll标签就行了，这个插件使用cdn向左向右滚动好像有问题 -->

        <vue-seamless-scroll
          :data="content"
          :class-option="classOption"
          class="warp"
        >
          <div class="weibo-container" v-for="(item, index) in content" :key="index">
            <div class="left">
              <div class="order" :class="{ red: index<=2 }">{{index + 1}}</div>
              <div class="name"><a :href="item.url" target="_blank">{{item.name}}</a></div>
            </div>
            <div class="hot">{{item.hot}}</div>
          </div>
        </vue-seamless-scroll>
      </div>

      <script defer src="/weibo/index.js"></script>
      <link href="/weibo/index.css" rel="stylesheet">
    '

这样，热搜侧边栏也弄好了，如果不要热搜榜滚动的话，自己去掉<vue-seamless-scroll></vue-seamless-scroll>这个html标签就行了

历史上的今天

嘿嘿，同样要在source文件夹下创建historyToday/index.js文件，好吧，我写累了

historyToday/index.js

又是vue.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
// 如果想变换轮播方式等，进阶的话，可以看这个 https://github.surmon.me/vue-awesome-swiper/
// 当然你也可以引入jquery插件，都可以的, 不只是轮播图，其他特效也可以
new Vue({
  el: "#myHistorySwiper", // el不要是最外面的id_name，应该是html: ''里的div的id
  data: function () {
    return {
      swiperOption: {
        effect: "cube", // 轮播特效
        loop: true, // 循环
        autoplay: {
          delay: 2500,
          disableOnInteraction: false,
        },
      },
      content: [],
    };
  },
  computed: {
    swiper() {
      return this.$refs.myhistoryswiper.$swiper;
    },
  },
  created() {
    this.getHistoryList();
  },
  methods: {
    // 鼠标移入停止轮播
    stopAutoPlay() {
      this.swiperOption.autoplay && this.swiper.autoplay.stop();
    },
    // 鼠标移出开始轮播
    startAutoPlay() {
      this.swiperOption.autoplay && this.swiper.autoplay.start();
    },
    // 请求开源api, 获取历史上的今天数据
    getHistoryList() {
      fetch("https://tenapi.cn/lishi/?format=json", {
        method: "GET", // *GET, POST, PUT, DELETE, etc.
      })
        .then((res) => {
          return res.json();
        })
        .then((data) => {
          this.content = data.content;
        })
        .catch((err) => {
          console.log("err", err);
        });
    },
  },
});

最后在自定义侧边栏的widget_library_sticky或者widget_library中加入html,

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
widget_library_sticky:
  - class_name: historyToday
    id_name: historyToday
    order: -1
    name: 历史上的今天
    icon: fas fa-calendar-week
    icon_color: '#d63130'
    url: http://baidu.com
    background: '#fff'
    html: '
      <div id="myHistorySwiper" @mouseenter="stopAutoPlay()" @mouseleave="startAutoPlay()">
        <swiper class="myhistoryswiper" ref="myhistoryswiper" style="height:80px;" :options="swiperOption">
          <swiper-slide v-for="(item, index) in content" :key="index">
            {{item}}
          </swiper-slide>
        </swiper>
      </div>
      <script defer src="/historyToday/index.js"></script>
    '

这样历史上的今天就完成了
历史上的今天

恋爱墙

在source文件夹下创建love/index.js文件

love/index.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
var htmer_time = document.getElementById("htmer_time");
var htmer_time_time = null;

function setTime() {
  var create_time = Math.round(
    new Date(Date.UTC(2018, 10, 26, 6, 45, 0)).getTime() / 1000
  );
  var timestamp = Math.round(
    (new Date().getTime() + 8 * 60 * 60 * 1000) / 1000
  );
  currentTime = secondToDate(timestamp - create_time);
  currentTimeHtml =
    currentTime[0] +
    " 年 " +
    currentTime[1] +
    " 天 " +
    currentTime[2] +
    " 时 " +
    currentTime[3] +
    " 分 " +
    currentTime[4] +
    " 秒";
  htmer_time.innerHTML = currentTimeHtml;
}
function secondToDate(second) {
  if (!second) {
    return 0;
  }
  var time = new Array(0, 0, 0, 0, 0);
  if (second >= 365 * 24 * 3600) {
    time[0] = parseInt(second / (365 * 24 * 3600));
    second %= 365 * 24 * 3600;
  }
  if (second >= 24 * 3600) {
    time[1] = parseInt(second / (24 * 3600));
    second %= 24 * 3600;
  }
  if (second >= 3600) {
    time[2] = parseInt(second / 3600);
    second %= 3600;
  }
  if (second >= 60) {
    time[3] = parseInt(second / 60);
    second %= 60;
  }
  if (second > 0) {
    time[4] = second;
  }
  return time;
}

if (htmer_time) {
  htmer_time_time = setInterval(setTime, 1000);
} else {
  clearInterval(htmer_time_time);
}

在第6行修改时间就行了，改成你自己想要开始的时间，这里是2018年10月26号开始的
最后在自定义侧边栏的widget_library_sticky或者widget_library中加入html

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
widget_library_sticky:
  - class_name: testLove
    id_name: testLove
    order: -1
    name: 恋爱墙
    icon: fas fa-heart
    icon_color: '#d63130'
    url: http://baidu.com
    background: '#fff'
    html: '
    
      <div style="text-align: center;">
        <img src="https://a-oss.zmki.cn/20190601/img_9879.jpg"
          style="width: 50px;height: 50px;vertical-align: -20px;border-radius: 50%;margin-right: 5px;margin-bottom: 5px;-webkit-box-shadow: 1px 1px 1px rgba(0,0,0,.1), 1px 1px 1px rgba(0,0,0,0.1), 1px 1px 1px rgba(0,0,0,0.1);box-shadow: 1px 1px 1px rgba(0,0,0,.1), 1px 1px 1px rgba(0,0,0,0.1), 1px 1px 1px rgba(0,0,0,0.1);border: 2px solid #fff;" />
        <svg viewbox="0 0 1024 1024" style="margin-left: 5px;margin-right: 5px;" version="1.0" width="15" height="15"
          class="my-face">
          <path
            d="M863.597631 513.574282l-271.33965-140.213484L729.783667 81.926656c3.583731-7.87141 7.167462-15.742819 7.167462-25.214109C736.887134 25.226908 708.345275 0.012799 672.635953 0.012799a63.611229 63.611229 0 0 0-39.293053 12.607055c-1.791866 1.59988-3.519736 3.19976-5.311602 3.19976L147.87531 418.925381a55.547834 55.547834 0 0 0-19.646527 47.356448c1.791866 17.278704 14.27093 33.021523 32.125591 42.492813l271.33965 141.749369L292.504463 945.221908c-12.479064 25.214109-1.791866 53.563983 23.166262 69.306802 10.751194 6.335525 23.230258 9.47129 35.709322 9.47129 16.062795 0 32.125591-4.735645 44.604655-15.742819l480.091993-403.297753a55.547834 55.547834 0 0 0 19.646526-47.228458 61.243407 61.243407 0 0 0-32.12559-44.156688z"
            fill="#515151" />
        </svg>
        <img src="https://a-oss.zmki.cn/20190601/img_9878.jpg"
          style="width: 50px;height: 50px;vertical-align: -20px;border-radius: 50%;margin-left: 5px;margin-bottom: 5px;-webkit-box-shadow: 1px 1px 1px rgba(0,0,0,.1), 1px 1px 1px rgba(0,0,0,0.1), 1px 1px 1px rgba(0,0,0,0.1);box-shadow: 1px 1px 1px rgba(0,0,0,.1), 1px 1px 1px rgba(0,0,0,0.1), 1px 1px 1px rgba(0,0,0,0.1);border: 2px solid #fff;" /><br />
        <span id="htmer_time"></span>
      </div>

      <script defer data-pjax src="/love/index.js"></script>
    '

这样，恋爱墙就完成了，但是，除了修改时间，你还可以把两张图片地址也修改成你自己的图片地址
恋爱墙

这几个模块就相当于给你一个容器，你可以自己往里面方html，然后放js，css，放一些自己的插件，vue.js,jquery.js，原生js都可以，只是提供一个容器，你可以自己搞更好看更好玩的扩展，如果你懒得折腾，用我上面写的扩展（自定义侧边栏）也挺好的。

最后我将我的source/_data/widget.yml写法贴下来,如下所示

注意：所有script标签带上defer属性 <script defer src="xxx.js"></script>

source/_data/widget.yml 
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
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
widget_library:

widget_library_sticky:
  - class_name: testWidget
    id_name: testWidget
    order: -1
    name: 微博热搜
    icon: fab fa-weibo
    icon_color: '#d63130'
    url: http://baidu.com
    background: '#fff'
    html: '
      <div id="myWeibo">

      <!-- 如果不要滚动，则去掉 vue-seamless-scroll标签就行了，这个插件使用cdn向左向右滚动好像有问题 -->

        <vue-seamless-scroll
          :data="content"
          :class-option="classOption"
          class="warp"
        >
          <div class="weibo-container" v-for="(item, index) in content" :key="index">
            <div class="left">
              <div class="order" :class="{ red: index<=2 }">{{index + 1}}</div>
              <div class="name"><a :href="item.url" target="_blank">{{item.name}}</a></div>
            </div>
            <div class="hot">{{item.hot}}</div>
          </div>
        </vue-seamless-scroll>
      </div>

      <script defer src="/weibo/index.js"></script>
      <link href="/weibo/index.css" rel="stylesheet">
    '
  - class_name: historyToday
    id_name: historyToday
    order: -1
    name: 历史上的今天
    icon: fas fa-calendar-week
    icon_color: '#d63130'
    url: http://baidu.com
    background: '#fff'
    html: '
      <div id="myHistorySwiper" @mouseenter="stopAutoPlay()" @mouseleave="startAutoPlay()">
        <swiper class="myhistoryswiper" ref="myhistoryswiper" style="height:80px;" :options="swiperOption">
          <swiper-slide v-for="(item, index) in content" :key="index">
            {{item}}
          </swiper-slide>
        </swiper>
      </div>
      <script defer src="/historyToday/index.js"></script>
    '
  - class_name: testLove
    id_name: testLove
    order: -1
    name: 恋爱墙
    icon: fas fa-heart
    icon_color: '#d63130'
    url: http://baidu.com
    background: '#fff'
    html: '
    
      <div style="text-align: center;">
        <img src="https://a-oss.zmki.cn/20190601/img_9879.jpg"
          style="width: 50px;height: 50px;vertical-align: -20px;border-radius: 50%;margin-right: 5px;margin-bottom: 5px;-webkit-box-shadow: 1px 1px 1px rgba(0,0,0,.1), 1px 1px 1px rgba(0,0,0,0.1), 1px 1px 1px rgba(0,0,0,0.1);box-shadow: 1px 1px 1px rgba(0,0,0,.1), 1px 1px 1px rgba(0,0,0,0.1), 1px 1px 1px rgba(0,0,0,0.1);border: 2px solid #fff;" />
        <svg viewbox="0 0 1024 1024" style="margin-left: 5px;margin-right: 5px;" version="1.0" width="15" height="15"
          class="my-face">
          <path
            d="M863.597631 513.574282l-271.33965-140.213484L729.783667 81.926656c3.583731-7.87141 7.167462-15.742819 7.167462-25.214109C736.887134 25.226908 708.345275 0.012799 672.635953 0.012799a63.611229 63.611229 0 0 0-39.293053 12.607055c-1.791866 1.59988-3.519736 3.19976-5.311602 3.19976L147.87531 418.925381a55.547834 55.547834 0 0 0-19.646527 47.356448c1.791866 17.278704 14.27093 33.021523 32.125591 42.492813l271.33965 141.749369L292.504463 945.221908c-12.479064 25.214109-1.791866 53.563983 23.166262 69.306802 10.751194 6.335525 23.230258 9.47129 35.709322 9.47129 16.062795 0 32.125591-4.735645 44.604655-15.742819l480.091993-403.297753a55.547834 55.547834 0 0 0 19.646526-47.228458 61.243407 61.243407 0 0 0-32.12559-44.156688z"
            fill="#515151" />
        </svg>
        <img src="https://a-oss.zmki.cn/20190601/img_9878.jpg"
          style="width: 50px;height: 50px;vertical-align: -20px;border-radius: 50%;margin-left: 5px;margin-bottom: 5px;-webkit-box-shadow: 1px 1px 1px rgba(0,0,0,.1), 1px 1px 1px rgba(0,0,0,0.1), 1px 1px 1px rgba(0,0,0,0.1);box-shadow: 1px 1px 1px rgba(0,0,0,.1), 1px 1px 1px rgba(0,0,0,0.1), 1px 1px 1px rgba(0,0,0,0.1);border: 2px solid #fff;" /><br />
        <span id="htmer_time"></span>
      </div>

      <script defer data-pjax src="/love/index.js"></script>
    '

home_widget:
  - class_name: welcome
    id_name: welcome
    order: -1
    name: 欢迎
    icon: fas fa-envelope
    icon_color: blue
    url: http://baidu.com
    background: '#fff'
    html: '<img src="https://api.amogu.cn/api/ipimg/" style="width:100%">'
  - class_name: my_github_container
    id_name: my_github_container
    order: -1
    name: 测试日历
    icon: fas fa-envelope
    icon_color: blue
    url: http://baidu.com
    background: '#fff'
    html: '
      <div id="github_container"></div>
      <script defer data-pjax src="/githubcalendar/index.js"></script>
    '
  - class_name: test2
    id_name: test2
    order: -1
    name: 测试轮播图
    icon: fas fa-envelope
    icon_color: blue
    url: http://baidu.com
    background: '#fff'
    html: '
    <div id="mySwiper" @mouseenter="stopAutoPlay()" @mouseleave="startAutoPlay()">
      <swiper class="myswiper" ref="myswiper" style="height:350px;" :options="swiperOption">

        <swiper-slide>
          <a href="http://baidu.com" class="toPath">
            <img class="no-lazy" src="/mySwiper/img/2.jpg" style="width:100%;height:100%;object-fit: cover;">
            <h2 class="ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">我是标题</h2>
            <p class="ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">我是描述哦</p>
          </a>
        </swiper-slide>

        <swiper-slide>
          <a href="http://baidu.com" class="toPath">
            <img class="no-lazy" src="/mySwiper/img/3.jpg" style="width:100%;height:100%;object-fit: cover;">
            <h2 class="ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">我是标题2</h2>
            <p class="ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">我是描述2</p>
          </a>
        </swiper-slide>

        <swiper-slide>
          <a href="http://baidu.com" class="toPath">
            <img class="no-lazy" src="/mySwiper/img/4.jpg" style="width:100%;height:100%;object-fit: cover;">
            <h2 class="ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">我是标题3</h2>
            <p class="ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">我是描述3</p>
          </a>
        </swiper-slide>

        <swiper-slide>
          <a href="http://baidu.com" class="toPath">
            <img class="no-lazy" src="/mySwiper/img/5.jpg" style="width:100%;height:100%;object-fit: cover;">
            <h2 class="ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">我是标题4</h2>
            <p class="ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">我是描述4</p>
          </a>
        </swiper-slide>

        <swiper-slide>
          <a href="http://baidu.com" class="toPath">
            <img class="no-lazy" src="https://api.dujin.org/pic/ghibli/" style="width:100%;height:100%;object-fit: cover;">
            <h2 class="ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">我是标题5</h2>
            <p class="ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">我是描述5</p>
          </a>
        </swiper-slide>

        <swiper-slide>
          <a href="http://baidu.com" class="toPath">
            <img class="no-lazy" src="/mySwiper/img/7.jpg" style="width:100%;height:100%;object-fit: cover;">
            <h2 class="ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">我是标题6</h2>
            <p class="ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">我是描述6</p>
          </a>
        </swiper-slide>

        <!-- 如果你想继续增加轮播图，继续在下面写<swiper-slide>我是内容</swiper-slide>就行了 -->
        <div class="swiper-pagination" slot="pagination"></div>

      </swiper>
    </div>

    <script defer src="/mySwiper/index.js"></script>
    <link href="/mySwiper/index.css" rel="stylesheet">
    '
  - class_name: mybilibili
    id_name: mybilibili
    order: -1
    name: 测试bli
    icon: fas fa-envelope
    icon_color: blue
    url: http://baidu.com
    background: '#fff'
    html: '
      <div id="myBli">
        <vue-seamless-scroll
          :data="listData"
          :class-option="classOption"
          class="warp"
        >
          <ul class="ul-item" style="width:720px;">
            <!-- 在这里改, 手动修改a连接的href值和img的src值, 如果你会进阶，你可以使用v-for, 或者数据使用动态数据-->
            
            <li class="li-item">
              <a href="http://baidu.com">
                <img class="no-lazy" src="https://pic4.zhimg.com/80/v2-f549722dac8f777693c090a92498de0f_1440w.jpg">
              </a>
            </li>

            <li class="li-item">
              <a href="http://baidu.com">
                <img class="no-lazy" src="https://pic4.zhimg.com/80/v2-f549722dac8f777693c090a92498de0f_1440w.jpg">
              </a>
            </li>

            <li class="li-item">
              <a href="http://baidu.com">
                <img class="no-lazy" src="https://pic4.zhimg.com/80/v2-f549722dac8f777693c090a92498de0f_1440w.jpg">
              </a>
            </li>

            <li class="li-item">
              <a href="http://baidu.com">
                <img class="no-lazy" src="https://pic4.zhimg.com/80/v2-f549722dac8f777693c090a92498de0f_1440w.jpg">
              </a>
            </li>

            <li class="li-item">
              <a href="http://baidu.com">
                <img class="no-lazy" src="https://pic4.zhimg.com/80/v2-f549722dac8f777693c090a92498de0f_1440w.jpg">
              </a>
            </li>

            <li class="li-item">
              <a href="http://baidu.com">
                <img class="no-lazy" src="https://pic4.zhimg.com/80/v2-f549722dac8f777693c090a92498de0f_1440w.jpg">
              </a>
            </li>
            <!-- 在这里结束 -->
          </ul>
        </vue-seamless-scroll>
      </div>

      <script defer src="/bli/index.js"></script>
      <link href="/bli/index.css" rel="stylesheet">
    '

Hexo sidebar
上一篇:
新增mathjax
下一篇:
getFiles文件获取

    • Copyright © 2019 - 2023 yuang01 | Powered by Hexo | Theme Bamboo