安知鱼主题美化及魔改教程库

汇总一些安知鱼主题的魔改教程，有些已经经过测试、整理，放在了自己的博客上，感兴趣的朋友可以自己修改测试。

1.链接卡片的介绍

教程收集整理的展现模式，使用的是安知鱼的 链接卡片 ，感兴趣的朋友可以看相关的教程。其实就是 分栏 tab 的实例应用，看下面的演示。

1
{% link 标题, 站点描述, 链接, 图片链接（可选） %}
引用站外地址
favicon
给你的Hexo博客添加灯笼和春联
琅環书生
1
{% link 给你的Hexo博客添加灯笼和春联, 琅環书生, https://chn.us.kg/blog/zz-14/, https://images.chn.us.kg/hexo/avatar.webp %}

2.纯粹的 CSS 修改

2.1.滚动条样式

非常漂亮的网页滚动条美化 CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
/**彩色滚动条样式开始*/
::-webkit-scrollbar {
  width: 10px;
  height: 1px;
}
::-webkit-scrollbar-thumb {
  background-color: #12b7f5;
  background-image: -webkit-linear-gradient(45deg, rgba(255, 93, 143, 1) 25%, transparent 25%, transparent 50%, rgba(255, 93, 143, 1) 50%, rgba(255, 93, 143, 1) 75%, transparent 75%, transparent);
}
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
    background: #f6f6f6;
}

2.2.隐藏侧边栏滚动条

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
::-webkit-scrollbar {
    width: 0;
    border: none;
    background: #9b9b9b;
}
::-webkit-scrollbar-thumb {
    border: none;
    background: none;
    -webkit-transition: all 1.7s;
    transition: all 1.7s;
}
  
::-webkit-scrollbar-track {
    background: #f1f1f1;
}

2.3.文章卡片擦亮效果

文章卡片擦亮效果的 CSS 代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
#recent-posts > .recent-post-item:not(a)::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 200%;
  background: linear-gradient(to right, transparent, white, transparent);
  transform: translateX(-200%);
  transition: transform 0.5s linear;
  z-index: 1;
}
#recent-posts > .recent-post-item:not(a):hover::before {
  transform: translateX(100%) skewX(-60deg);
}

2.4.主题渐变背景色

修改主题背景颜色效果的 CSS 代码

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

#footer,#footer:before {
  background: hsla(0,0%,100%,.15)
}

#footer #footer-wrap,#footer #footer-wrap a {
  color: #333;
}
#footer #footer-wrap{
  background: transparent!important;
}

#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))
}

2.5.添加日/夜背景图

修改文件 source/css/ 文件夹下面的 custom.css 文件，

1
2
3
4
5
6
7
8
9
/* 在 custom.css 中添加（或替换） */
body {
  background: url('https://sourcebucket.s3.bitiful.net/img/dm3.webp') no-repeat center center fixed;
  background-size: cover;
}
[data-theme="dark"] body {
  background: url('https://sourcebucket.s3.bitiful.net/img/yuanshen1.webp') no-repeat center center fixed;
  background-size: cover;
}

调试：切换主题或系统深色模式，Ctrl+F5 清缓存查看。

2.6.导航栏nav模糊效果

我测试的时候感觉就是有些透明，模糊的效果也有，更主要是透明

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
[data-theme=light] #nav .menus_items .menus_item .menus_item_child {
    background-color: #ffffff4f!important;
    backdrop-filter: blur(7px)!important;
    -webkit-backdrop-filter: blur(7px)!important
}

[data-theme=dark] #nav .menus_items .menus_item .menus_item_child {
    background-color: #1d1e224f!important;
    backdrop-filter: blur(7px)!important;
    -webkit-backdrop-filter: blur(7px)!important
}

[data-theme=dark] #page-header.nav-fixed #nav {
    background: #0000006f!important
}

[data-theme=light] #page-header.nav-fixed #nav {
    background: #ffffff4f!important;
}

#page-header.nav-fixed #nav {
    outline: 1px #7c7c7c43 solid!important;
    backdrop-filter: blur(7px)!important;
    -webkit-backdrop-filter: blur(7px)!important
}

@media screen and (max-width: 768px) {
    #nav {
        background:#fff0!important
    }
}

@media screen and (max-width: 768px) {
    body[data-type=post] #page-header #nav {
        --font-color:#fff
    }
}

@media screen and (max-width: 768px) {
    #page-header.nav-fixed #nav {
    --font-color: var(--efu-fontcolor)!important;
    }
}

[data-theme=dark] #page-header.nav-fixed #nav {
    background: #1d1e224f!important;
    backdrop-filter: blur(7px)!important;
    -webkit-backdrop-filter: blur(7px)!important
}

2.7.首页卡片图放大效果

1
2
3
4
#recent-posts>.recent-post-item:not(a):hover {
    box-shadow: 0 5px 15px rgba(0,0,0,.4);
    transform: scale(1.015);
}

主要是为了让主页卡片有一种呼吸感，大家可以自己调整相关参数。

2.8.全局毛玻璃样式

个人测试的时候没有感觉出太好的效果，毛玻璃似有似无，可能是我的主题背景颜色设置了渐变色的缘故。

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
/* 明亮模式 */
#body-wrap #recent-posts > .recent-post-item,
#body-wrap .recent-post-item,
#body-wrap #aside-content .card-widget,
#body-wrap .layout > div:first-child:not(.recent-posts),
#body-wrap #nav .menus_items .menus_item .menus_item_child,
#body-wrap #pagination .page-number:not(.current),
#body-wrap #pagination .extend,
#page-header #post-info {
    background: rgba(255, 255, 255, 0.85); 
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    border: 1px solid rgba(255, 255, 255, 0.85);
    box-shadow: 0 8px 16px -4px rgba(138, 138, 138, 0.15);
    transition: background 0.3s ease, border 0.3s ease, box-shadow 0.3s ease;
}
#body-wrap #pagination .page-number:not(.current):hover,
#body-wrap #pagination .extend:hover {
    background: #ff7142d2;
    border-color: #ff7142d2;
    color: #fff;
}
/* 夜间模式 */
html[data-theme="dark"] #body-wrap #recent-posts > .recent-post-item,
html[data-theme="dark"] #body-wrap .recent-post-item,
html[data-theme="dark"] #body-wrap #aside-content .card-widget,
html[data-theme="dark"] #body-wrap .layout > div:first-child:not(.recent-posts),
html[data-theme="dark"] #body-wrap #nav .menus_items .menus_item .menus_item_child,
html[data-theme="dark"] #body-wrap #pagination .page-number:not(.current),
html[data-theme="dark"] #body-wrap #pagination .extend,
html[data-theme="dark"] #page-header #post-info {
    background: rgba(30, 30, 30, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 8px 16px -4px rgba(0, 0, 0, 0.2);
}

3.安知鱼主题魔改

新建这篇文章，主要就是随看随手记，方便日后用到，自己不用满处搜索，日后有时间也可以写一篇博文凑数。废话不多说，感谢大咖的原创。

3.1.给博客添加灯笼和春联

引用站外地址
favicon
给你的Hexo博客添加灯笼和春联
琅環书生

3.2.让你的博客支持 LivePhoto 照片

引用站外地址
favicon
让你的博客支持 LivePhoto 照片
琅環书生

3.3.给你的Hexo博客添加农历年份生肖标志

引用站外地址
favicon
给你的Hexo博客添加农历年份生肖标志
琅環书生

3.4.给你的博客网站添加一个站点监测服务

引用站外地址
favicon
给你的博客网站添加一个站点监测服务
琅環书生

3.5.给你的Hexo博客添加一个朋友圈

引用站外地址
favicon
给你的Hexo博客添加一个朋友圈
琅環书生

3.6.为安知鱼主题的 Twikoo 评论系统恢复预览按钮

引用站外地址
favicon
为安知鱼主题的 Twikoo 评论系统恢复预览按钮
辰渊尘

3.7.为安知鱼主题添加对数学公式的支持

引用站外地址
favicon
为安知鱼主题添加对数学公式的支持
琅環书生

3.8.为博客安装上便携小空调

引用站外地址
favicon
为博客安装上便携小空调
安知鱼

3.9.solitude主题侧边栏添加监控卡片

引用站外地址
favicon
solitude主题侧边栏添加监控卡片
https://www.xrbk.cn/post/6.html

3.10.solitude主题添加今日热榜

引用站外地址
favicon
solitude主题添加今日热榜
https://www.xrbk.cn/post/5.html

3.11.solitude主题底部添加一排宠物

引用站外地址
favicon
solitude主题底部添加一排宠物
https://www.xrbk.cn/post/4.html

3.12.solitude主题更换自定义字体

引用站外地址
favicon
solitude主题更换自定义字体
https://www.xrbk.cn/post/3.html

3.13.solitude主题更换自定义字体

引用站外地址
favicon
solitude主题更换自定义字体
https://www.xrbk.cn/post/3.html

3.14.Hexo安知鱼主题开启AI摘要

引用站外地址
favicon
Hexo安知鱼主题开启AI摘要
https://blog.yujiay.wang/tech/techPractice/AISummary/

3.15.安知鱼主题动态极光渐变背景

引用站外地址
favicon
安知鱼主题动态极光渐变背景
https://www.ta0t1e.com/posts/aurorabackground.html

3.16.魔改朋友圈之友链异常

引用站外地址
favicon
魔改朋友圈之友链异常
https://www.hydsb0.com/posts/918977cb#%E5%89%8D%E8%A8%80

3.17.魔改朋友圈之友链异常

引用站外地址
favicon
网站添加点赞、踩功能
https://www.qcqx.cn/article/5de26c08.html

这篇文章会不定时更新，也希望大家给推荐优质的魔改教程，共同进步。