前言

其实我早就想写一篇关于我这个部落格的所有美化了,但一直不想写,没有为什么,后续也会在此篇文章更新

PS:基本没修改过源码!

适用人群:

  1. 看上我部落格的人😁
  2. Hexo 主题是 Butterfly

首页背景图

查看预览

img

配置

这个背景图其实很简单,在主题的配置文件(_config.yml)里,CTRL + F 找到 index_img 配置项,修改它即可img

首页字体

查看预览

img

配置

这个就需要你自己新建一个 css 文件,在主题文件里的 source \ css 文件夹里新建一个 css 文件,命名随意

img

往里写几行代码就完事了

1
2
3
4
5
6
7
8
9
10
11
12
13
14
@font-face {
font-family:'arzhu';
src:url('https://cdn.jsdelivr.net/gh/zjwo/CDN@master/font/arzhu.ttf');
font-display:swap
}
h1#site-title {
font-family:arzhu!important
}
span#subtitle {
font-family:arzhu!important
}
a#site-name {
font-family:arzhu!important
}

这里推荐俩字体网站

挑选您心爱的字体,并把它下载下来,可以存在本地,也可以利用 jsdelivr 的方式加速,最后替换 css 文件中的 url 即可,arzhu 只是别名,可以任意修改,不过引用的时候,要确保名字相同

最后在主题的配置文件里找到 inject 配置项,引用刚刚新建的 css 文件即可

img

href 这里我是采用 CDN 的方式,如果你是存在本地的话,那么此时的 href 就应该是

1
- <link rel="stylesheet" href="/css/custom.css" media="defer" onload="this.media='all'">

media="defer" onload="this.media='all'" 这个只是 css 的异步加载,当然,你不写也可以!

全局背景透明渐变

查看预览

img

配置

同理,在刚刚新建的 css 文件里,添加如下代码

1
2
3
4
5
6
7
8
9
10
11
#recent-posts>.recent-post-item,.layout_page>div:first-child:not(.recent-posts),.layout_post>#page,.layout_post>#post,.read-mode .layout_post>#post {
background: var(--light_bg_color)
}

#aside-content .card-widget {
background: var(--light_bg_color)
}

#web_bg {
background: linear-gradient(90deg,rgba(247,149,51,.1),rgba(243,112,85,.1) 15%,rgba(239,78,123,.1) 30%,rgba(161,102,171,.1) 44%,rgba(80,115,184,.1) 58%,rgba(16,152,173,.1) 72%,rgba(7,179,155,.1) 86%,rgba(109,186,130,.1))
}

页脚透明渐变

完成了如上全局背景透明渐变,那么你的部落格背景就应该会有所变化了,但是发现这个页脚和我们的背景完全不搭

img

那我们就进行美化页脚部分

查看预览

img

配置

一样在刚刚新建的 css 文件里,添加如下代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
#footer {
background: rgba(255,255,255,.15);
color: #000;
border-top-right-radius: 20px;
border-top-left-radius: 20px;
backdrop-filter: saturate(100%) blur(5px)
}

#footer::before {
background: rgba(255,255,255,.15)
}

#footer #footer-wrap {
color: var(--font-color)
}

#footer #footer-wrap a {
color: var(--font-color)
}

此时,页脚部分就和我们的背景很般配了

社交图标

查看预览

img

配置

社交图标我采用的是阿里巴巴矢量图标库

首先打开 阿里巴巴矢量图标库

在搜索框输入你想要的图标,比如 QQ

img

看中哪个就加入购物车

img

加购完毕之后点击右上角的购物车,添加至项目,选择其中一种快捷方式登录,项目名称随便填

然后在我的项目里选择 Font class,点击查看在线链接并在浏览器中打开此链接,最后另存为本地

img

吧刚刚另存为的文件复制到主题文件下的 source \ css 里面

img

然后在主题的配置文件(_config.yml)里的 inject 引入刚刚的图标 css 文件

img

接着不要关闭配置文件,继续在配置文件里 CTRL + F 找到 social 配置项

格式为:iconfont class 名: 链接 || 名称

其中

  • iconfont:是固定的

  • class 名:可在刚刚的阿里巴巴矢量图标库生成的 css 文件里找到

    img

  • 链接:点击图标之后跳转的链接

  • 名称:对应你图标的含义,例如:Twitter、Facebook

如下图:

img

此时你高兴的回到首页查看效果,可是你发现这图标又小又丑又黑,心情都不好了

img

不慌,打开 icon.css 也就是刚刚在阿里巴巴矢量图标库中生成的 css 文件

给他们穿件衣裳

img

果然,穿上衣裳就好看多了

img

如果你还想加其他的,比如微博、GitHub、哔哩哔哩等,其方法大同小异

页脚徽标

查看预览

footer

配置

这个挺简单的,可以直接通过 shields.io 在线生成

  • label:标签,徽标左侧内容
  • message:信息,徽标右侧内容
  • color:色值,支持支持十六进制、rgb、rgba、hsl、hsla 和 css 命名颜色。十六进制记得删除前面的 # 号

输入相关信息后,点击 make badge 即可得到徽标的 URL。可以用 img 标签引用

接着打开主题的配置文件(_config.yml)找到 custom_text 配置项并修改它,最后建议把 footer 配置下的 copyright 设为 false

img

我这里只是简单的举了个例子,想要啥就在 shields.io 直接生成即可

如果你看上了我的徽标,那我就把我的徽标贴出来 (不包含备案)

1
<p><a style="margin-inline:5px"target="_blank" href="https://hexo.io/"><img src="https://img.shields.io/badge/Frame-Hexo-blue?style=flat&logo=hexo" title="博客框架为 Hexo" alt="HEXO"></a><a style="margin-inline:5px"target="_blank" href="https://butterfly.js.org/"><img src="https://img.shields.io/badge/Theme-Butterfly-6513df?style=flat&logo=bitdefender" title="主题采用 Butterfly" alt="Butterfly"></a><a style="margin-inline:5px"target="_blank" href="https://www.jsdelivr.com/"><img src="https://img.shields.io/badge/CDN-jsDelivr-orange?style=flat&logo=jsDelivr" title="本站使用 Jsdelivr 为静态资源提供CDN加速" alt="Jsdelivr"></a><a style="margin-inline:5px"target="_blank" href="https://github.com/"><img src="https://img.shields.io/badge/Source-Github-d021d6?style=flat&logo=GitHub" title="本站项目由 GitHub 托管" alt="GitHub"></a><a style="margin-inline:5px"target="_blank"href="http://creativecommons.org/licenses/by-nc-sa/4.0/"><img src="https://img.shields.io/badge/Copyright-BY--NC--SA%204.0-d42328?style=flat&logo=Claris" alt="img" title="本站采用知识共享署名-非商业性使用-相同方式共享4.0国际许可协议进行许可"></a></p>

关闭侧边栏

这个其实官方文档也有讲,在某个页面如果你不想要侧边栏的话,可以在对应页面的 Markdown 里加如下配置

1
2
3
4
5
6
7
8
---
title: 标签
date: 2020-03-07 12:33:35
type: "tags"
comments: false
aside: false <-- 关闭侧边栏
top_img: false
---

此时我们对应的页面就没有侧边栏了

img

留言板信封

查看预览

message_gif

配置

首先最起码你得要有一个留言的页面

博客根目录右键 Git Bash 输入如下命令

1
hexo new page "message"

接着在博客根目录的 source 下就会发现刚刚新建的文件了

img

我们点进去打开 index.md

复制如下代码,即可完事

1
2
3
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/zjwo/CDN/css/messagebar.css"/>

<div id="computer"><div id="maincontent"><br><div id="form-wrap"><img src="https://cdn.jsdelivr.net/gh/Akilarlxh/Valine-Admin@v1.0/source/img/before.png"id="beforeimg"><div id="envelope"><form><div class="formmain"><img class="headerimg"src="https://ae01.alicdn.com/kf/U5bb04af32be544c4b41206d9a42fcacfd.jpg"/><div style="padding: 5px 20px;"><center><h3 calss="title3">来自小嘉的留言</h3></center><center class="comments">有什么想問的?<br>有什么想說的?<br>有什么想吐槽的?<br>都可以在這裏留言哦💋💋<br>此处感谢<a href="https://akilar.top/"> akilar </a>大佬的<a href="https://akilar.top/posts/e2d3c450/">留言板动态弹出信封样式</a>教程</center><div class="bottomcontent"><img class="bottomimg"src="https://ae01.alicdn.com/kf/U0968ee80fd5c4f05a02bdda9709b041eE.png"/></div><p class="bottomhr">自动书记人偶竭诚为您服务!</p></div></div></form></div><img id="afterimg"src="https://cdn.jsdelivr.net/gh/Akilarlxh/Valine-Admin@v1.0/source/img/after.png"></div></div></div><div id="mobile"><form><div class="formmain"><img class="headerimg"src="https://ae01.alicdn.com/kf/U5bb04af32be544c4b41206d9a42fcacfd.jpg"/><div style="padding: 5px 20px;"><center><h3 class="title3">来自小嘉的留言:</h3></center><center class="comments">有什么想問的?<br>有什么想說的?<br>有什么想吐槽的?<br>都可以在這裏留言哦💋💋<br>此处感谢<a href="https://akilar.top/">akilar</a>大佬的<a href="https://akilar.top/posts/e2d3c450/">留言板动态弹出信封样式</a>教程</center><div class="bottomcontent"><img src="https://ae01.alicdn.com/kf/U0968ee80fd5c4f05a02bdda9709b041eE.png"class="bottomhr"></div><p class="bottomhr">自动书记人偶竭诚为您服务!</p></div></div></form></div>

然后按照自己的需求,该改的改

注:如果你是 Typora 写作的话,粘贴时请用 CTRL + SHIFT + V

gulp 压缩

查看预览

img

配置

一个可以自动压缩 HTML、JS、CSS 文件、图片,可以将 ES6 语法转换成 ES5,减少网络请求,同时降低网络负担

首先全局安装 gulp

1
npm install --global gulp-cli

安装压缩 HTML

1
2
npm install gulp-htmlclean --save-dev
npm install --save gulp-html-minifier-terser

安装压缩 CSS

1
npm install gulp-clean-css --save-dev

安装压缩 JS

这里我选择 gulp-uglify + gulp-babel,可以把 ES6 转换成 ES5,因为兼容所以选择

1
2
npm install --save-dev gulp-uglify
npm install --save-dev gulp-babel @babel/core @babel/preset-env

安装如上插件之后,在你的博客根目录创建一个 gulpfile.js 文件并把如下代码 CV 进去

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
var gulp = require('gulp');
var cleanCSS = require('gulp-clean-css');
var htmlmin = require('gulp-html-minifier-terser');
var htmlclean = require('gulp-htmlclean');
var uglify = require('gulp-uglify')
var babel = require('gulp-babel')
// 压缩js
gulp.task('compress', () =>
gulp.src(['./public/**/*.js', '!./public/**/*.min.js'])
.pipe(babel({
presets: ['@babel/preset-env']
}))
.pipe(uglify().on('error', function (e) {
console.log(e)
}))
.pipe(gulp.dest('./public'))
)
// 压缩css
gulp.task('minify-css', () => {
return gulp.src(['./public/**/*.css'])
.pipe(cleanCSS({
compatibility: 'ie11'
}))
.pipe(gulp.dest('./public'));
});
// 压缩html
gulp.task('minify-html', () => {
return gulp.src('./public/**/*.html')
.pipe(htmlclean())
.pipe(htmlmin({
removeComments: true, // 清除 html 注释
collapseWhitespace: true, // 压缩 html
collapseBooleanAttributes: true,
// 省略布尔属性的值,例如:<input checked="true"/> ==> <input />
removeEmptyAttributes: true,
// 删除所有空格作属性值,例如:<input id="" /> ==> <input />
removeScriptTypeAttributes: true,
// 删除<script>的type="text/javascript"
removeStyleLinkTypeAttributes: true,
// 删除<style>和<link>的 type="text/css"
minifyJS: true, // 压缩页面 JS
minifyCSS: true, // 压缩页面 CSS
minifyURLs: true // 压缩页面 URL
}))
.pipe(gulp.dest('./public'))
});

// 运行gulp命令时依次执行以下任务
gulp.task('default', gulp.parallel(
'compress', 'minify-css', 'minify-html'
))

使用:

在 hexo g 之后运行 gulp 即可

例如:

1
hexo cl && hexo g && gulp && hexo d

不过要注意的是,gulp 在本地运行是没有效果的,请部署之后再看效果

图片压缩

图片压缩我用的是 Imagine

首先要先去下载安装

根据自己系统选择版本

使用也很简单,下载安装之后,把想压缩的图片拖进去就好

外挂标签

关于外挂标签请移步至 Akilar 的 基于 Butterfly 的外挂标签引入

此时,您的部落格整体样貌就基本和我的差不多了

友链魔改

查看预览

link

配置

原教程:Friend Link Card Beautify

友链这块修改了主题源码,是否要修改自行斟酌

魔改适用 Butterfly@3.6.0 +

3.3.0-3.5.1 的请看 Akilar 的原帖:Friend Link Card Beautify

  1. 修改 butterfly\layout\includes\page\flink.pug

    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
    #article-container
    if top_img === false
    h1.page-title= page.title

    if (theme.flink_style === 'butterfly')
    .flink
    if site.data.link
    each i in site.data.link
    if i.class_name
    h2!= i.class_name
    if i.class_desc
    .flink-desc!=i.class_desc
    .flink-list
    each item in i.link_list
    .flink-list-item
    a(href=url_for(item.link) title=item.name target="_blank")
    if theme.lazyload.enable
    img(data-lazy-src=url_for(item.avatar) onerror=`this.onerror=null;this.src='` + url_for(theme.error_img.flink) + `'` alt=item.name )
    else
    img(src=url_for(item.avatar) onerror=`this.onerror=null;this.src='` + url_for(theme.error_img.flink) + `'` alt=item.name )
    span.flink-item-name= item.name
    span.flink-item-desc(title=item.descr)= item.descr
    != page.content
    else if (theme.flink_style === 'volantis')
    .flink
    if site.data.link
    each i in site.data.link
    if i.class_name
    h2!= i.class_name
    if i.class_desc
    .flink-desc!=i.class_desc
    .site-card-group
    each item in i.link_list
    a.site-card(target='_blank' rel='noopener' href=url_for(item.link))
    .img
    - var siteshot = item.siteshot ? url_for(item.siteshot) : 'https://image.thum.io/get/width/400/crop/800/allowJPG/wait/20/noanimate/' + item.link
    if theme.lazyload.enable
    img(data-lazy-src=siteshot onerror=`this.onerror=null;this.src='` + url_for(theme.error_img.post_page) + `'` alt='' )
    else
    img(src=siteshot onerror=`this.onerror=null;this.src='` + url_for(theme.error_img.flink) + `'` alt='' )
    .info
    if theme.lazyload.enable
    img(data-lazy-src=url_for(item.avatar) onerror=`this.onerror=null;this.src='` + url_for(theme.error_img.flink) + `'` alt='' )
    else
    img(src=url_for(item.avatar) onerror=`this.onerror=null;this.src='` + url_for(theme.error_img.flink) + `'` alt='' )
    span.title= item.name
    span.desc(title=item.descr)= item.descr
    != page.content
    else if (theme.flink_style === 'flexcard')
    .flink
    if site.data.link
    each i in site.data.link
    if i.class_name
    h2!= i.class_name
    if i.class_desc
    .flink-desc!=i.class_desc
    .flink-list
    each item in i.link_list
    a.flink-list-card(href=url_for(item.link) target='_blank' data-title=item.descr)
    .wrapper.cover
    - var siteshot = item.siteshot ? url_for(item.siteshot) : 'https://image.thum.io/get/width/400/crop/800/allowJPG/wait/20/noanimate/' + item.link
    if theme.lazyload.enable
    img.cover.fadeIn(data-lazy-src=siteshot onerror=`this.onerror=null;this.src='` + url_for(theme.error_img.post_page) + `'` alt='' )
    else
    img.cover.fadeIn(src=siteshot onerror=`this.onerror=null;this.src='` + url_for(theme.error_img.flink) + `'` alt='' )
    .info
    if theme.lazyload.enable
    img.flink-avatar(data-lazy-src=url_for(item.avatar) onerror=`this.onerror=null;this.src='` + url_for(theme.error_img.flink) + `'` alt='' )
    else
    img(src=url_for(item.avatar) onerror=`this.onerror=null;this.src='` + url_for(theme.error_img.flink) + `'` alt='' )
    span.flink-sitename= item.name
    != page.content
  2. 修改 butterfly\source\css\_page\flink.styl

    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
    if hexo-config('flink_style') == 'butterfly'
    .flink#article-container
    .flink-desc
    margin: .2rem 0 .5rem

    .flink-list
    overflow: auto
    padding: 10px 10px 0
    text-align: center

    & > .flink-list-item
    position: relative
    float: left
    overflow: hidden
    margin: 15px 7px
    width: calc(100% / 3 - 15px)
    height: 90px
    border-radius: 8px
    line-height: 17px
    -webkit-transform: translateZ(0)

    +maxWidth1024()
    width: calc(50% - 15px) !important

    +maxWidth600()
    width: calc(100% - 15px) !important

    &:hover
    img
    transform: rotate(360deg)

    &:before
    position: absolute
    top: 0
    right: 0
    bottom: 0
    left: 0
    z-index: -1
    background: var(--text-bg-hover)
    content: ''
    transition: transform .3s ease-out
    transform: scale(0)

    &:hover:before,
    &:focus:before,
    &:active:before
    transform: scale(1)

    a
    color: var(--font-color)
    text-decoration: none

    img
    float: left
    margin: 15px 10px
    width: 60px
    height: 60px
    border-radius: 35px
    transition: all .3s

    .img-alt
    display: none

    .flink-item-name
    @extend .limit-one-line
    display: block
    padding: 16px 10px 0 0
    height: 40px
    font-weight: bold
    font-size: 1.43em

    .flink-item-desc
    @extend .limit-one-line
    display: block
    padding: 16px 10px 16px 0
    height: 50px
    font-size: .93em
    else if hexo-config('flink_style') == 'volantis'
    trans($time = 0.28s)
    transition: all $time ease
    -moz-transition: all $time ease
    -webkit-transition: all $time ease
    -o-transition: all $time ease
    .site-card-group
    display: flex
    flex-wrap: wrap
    justify-content: flex-start
    margin: -0.5 * 16px
    align-items: stretch
    .site-card
    margin: 16px * 0.5
    width: "calc(100% / 4 - %s)" % 16px
    @media screen and (min-width: 2048px)
    width: "calc(100% / 5 - %s)" % 16px
    @media screen and (max-width: 768px)
    width: "calc(100% / 3 - %s)" % 16px
    @media screen and (max-width: 500px)
    width: "calc(100% / 2 - %s)" % 16px
    display: block
    line-height: 1.4
    height 100%
    .img
    width: 100%
    height 120px
    @media screen and (max-width: 500px)
    height 100px
    overflow: hidden
    border-radius: 12px * 0.5
    box-shadow: 0 1px 2px 0px rgba(0, 0, 0, 0.2)
    background: #f6f6f6
    img
    width: 100%
    height 100%
    // trans(.75s)
    transition: transform 2s ease
    object-fit: cover

    .info
    margin-top: 16px * 0.5
    img
    width: 32px
    height: 32px
    border-radius: 16px
    float: left
    margin-right: 8px
    margin-top: 2px
    span
    display: block
    .title
    font-weight: 600
    font-size: $fontsize-list
    color: #444
    display: -webkit-box
    -webkit-box-orient: vertical
    overflow: hidden
    -webkit-line-clamp: 1
    trans()
    .desc
    font-size: $fontsize-footnote
    word-wrap: break-word;
    line-height: 1.2
    color: #888
    display: -webkit-box
    -webkit-box-orient: vertical
    overflow: hidden
    -webkit-line-clamp: 2
    .img
    trans()
    &:hover
    .img
    box-shadow: 0 4px 8px 0px rgba(0, 0, 0, 0.1), 0 2px 4px 0px rgba(0, 0, 0, 0.1), 0 4px 8px 0px rgba(0, 0, 0, 0.1), 0 8px 16px 0px rgba(0, 0, 0, 0.1)
    .info .title
    color: #ff5722
    else if hexo-config('flink_style') == 'flexcard'
    #article-container img
    margin 0 auto!important
    .flink-list
    overflow auto
    & > a
    width calc(25% - 15px)
    height 130px
    position relative
    display block
    margin 15px 7px
    float left
    overflow hidden
    border-radius 10px
    transition all .3s ease 0s, transform .6s cubic-bezier(.6, .2, .1, 1) 0s
    box-shadow 0 14px 38px rgba(0, 0, 0, .08), 0 3px 8px rgba(0, 0, 0, .06)
    &:hover
    .info
    transform translateY(-100%)
    .wrapper
    img
    transform scale(1.2)
    &:before
    position: fixed
    width:inherit
    margin:auto
    left:0
    right:0
    top:10%
    border-radius: 10px
    text-align: center
    z-index: 100
    content: attr(data-title)
    font-size: 20px
    color: #fff
    padding: 10px
    background-color: rgba($theme-color,0.8)
    .cover
    width 100%
    transition transform .5s ease-out
    .wrapper
    position relative
    .fadeIn
    animation coverIn .8s ease-out forwards
    img
    height 130px
    pointer-events none
    .info
    display flex
    flex-direction column
    justify-content center
    align-items center
    width 100%
    height 100%
    overflow hidden
    border-radius 3px
    background-color hsla(0, 0%, 100%, .7)
    transition transform .5s cubic-bezier(.6, .2, .1, 1) 0s
    img
    position relative
    top 22px //因为字体大小不同,可能导致头像偏高,可以在此处通过修改top的值来微调头像框的位置至卡片正中。
    width 66px
    height 66px
    border-radius 50%
    box-shadow 0 0 10px rgba(0, 0, 0, .3)
    z-index 1
    text-align center
    pointer-events none
    span
    padding 20px 10% 60px 10%
    font-size 16px
    width 100%
    text-align center
    box-shadow 0 0 10px rgba(0, 0, 0, .3)
    background-color hsla(0, 0%, 100%, .7)
    color var(--font-color)
    white-space nowrap
    overflow hidden
    text-overflow ellipsis
    .flink-list>a .info,
    .flink-list>a .wrapper .cover
    position absolute
    top 0
    left 0

    @media screen and (max-width:1024px)
    .flink-list
    & > a
    width calc(33.33333% - 15px)

    @media screen and (max-width:600px)
    .flink-list
    & > a
    width calc(50% - 15px)

    [data-theme=dark]
    .flink-list a .info,
    .flink-list a .info span
    background-color rgba(0, 0, 0, .6)
    .flink-list
    & > a
    &:hover
    &:before
    background-color: rgba(#121212,0.8);

  3. blog\source\_data\link.yml 根据自身是否添加 siteshot,因为 Volantis 的 site-card 比 Butterfly 的 flink-card 多了一个站点缩略图,所以需要再额外添加一条 siteshot 配置项,不添加也可以,通过 butterfly\layout\includes\page\flink.pug 源码可以看出,如果你配置了 siteshot 的话,它就走 siteshot,没有配置的话,默认就调 API,其优先级 siteshot 高于 API

    flink.pug

    1
    2
    3
    4
    5
    6
    7
    8
    - class_name: xxx
    class_desc: xxx
    link_list:
    - name: xxx
    link: xxx
    avatar: xxx
    descr: xxx
    siteshot: # 站点缩略图
  4. blog\_config.butterfly.yml 中添加配置项,如果你没有用主题升级方法的话,那么在 butterfly\_config.yml 中添加。

    1
    2
    # 友链样式,butterfly 为默认样式,volantis 为站点卡片样式.flexcard 为弹性卡片样式
    flink_style: flexcard # butterfly | volantis | flexcard

    继续配置懒加载和 404 配置,因为站点卡片添加了懒加载和图片失效替换

    1
    2
    3
    4
    # 替换无法显示的图片
    error_img:
    flink: //cdn.jsdelivr.net... # 头像失效替换图
    post_page: //cdn.jsdelivr.net... # 文章图失效替换图
  5. hexo cl && hexo g && hexo s 本地调式查看效果

已知问题

相册样式错乱

link

解决:

在你的自定义 css 文件中,添加如下代码

1
2
3
4
5
6
7
8
9
10
11
12
a > img, .justified-gallery > div > img,
.justified-gallery > figure > img,
.justified-gallery > a > a > img,
.justified-gallery > div > a > img,
.justified-gallery > figure > a > img,
.justified-gallery > a > svg,
.justified-gallery > div > svg,
.justified-gallery > figure > svg,
.justified-gallery > a > a > svg,
.justified-gallery > div > a > svg,
.justified-gallery > figure > a > svg{
position:static!important;}

其它问题

参考:可能遇到的 Bug

友链朋友圈

参考:基于 hexo 的友链朋友圈

link_pyq

GitHub 贡献度

查看预览

images

配置

项目地址:hexo-github-calendar

先安装插件

1
npm i hexo-githubcalendar --save

然后打开 Hexo 的配置文件,注:不是主题的配置文件

1
2
3
4
5
6
7
8
9
10
11
12
githubcalendar:
enable: true
enable_page: / # 表示只在根目录(首页)显示
user: zjwo # 替换成你 GitHub 的用户名
layout_id: recent-posts
githubcalendar_html: '<div class="recent-post-item" style="width:100%;height:auto;padding:10px;"><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="#d0d0d0" 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><div id="github_container"></div></div>'
pc_minheight: 280px
mobile_minheight: 0px
color: "['#ebedf0', '#fdcdec', '#fc9bd9', '#fa6ac5', '#f838b2', '#f5089f', '#c4067e', '#92055e', '#540336', '#48022f', '#30021f']"
api: https://python-github-calendar-api.vercel.app/api
# api: https://python-gitee-calendar-api.vercel.app/api
calendar_js: https://cdn.jsdelivr.net/gh/Zfour/hexo-github-calendar@1.16/hexo_githubcalendar.js

如果你觉得默认的浅紫色不好看,可以选择以下色调

1
2
3
4
5
6
# 橘黄色调
color: "['#e4dfd7', '#f9f4dc', '#f7e8aa', '#f7e8aa', '#f8df72', '#fcd217', '#fcc515', '#f28e16', '#fb8b05', '#d85916', '#f43e06']"
# 翠绿色调
color: "['#ebedf0', '#f0fff4', '#dcffe4', '#bef5cb', '#85e89d', '#34d058', '#28a745', '#22863a', '#176f2c', '#165c26', '#144620']"
# 天青色调
color: "['#ebedf0', '#f1f8ff', '#dbedff', '#c8e1ff', '#79b8ff', '#2188ff', '#0366d6', '#005cc5', '#044289', '#032f62', '#05264c']"

也可以自己自定义

最后 hexo cl 三连命令查看效果

特别鸣谢