anzhiyu主题博客魔改

Txy2025-02-102025-02-10

此渐进式教程此教程参考于[南栀Space](Hexo 主题背景美化 - 南栀 Space)，并加以修改

使用的主题 anzhiyu 为例（butterfly 通用），为首页顶部图配置渐进式加载。

新建文件source/js/imgloaded.js新增以下内容
你可以修改对应的图片链接
新建文件source/css/imgloaded.css新增以下内容
引入文件
在_config.anzhiyu.yml主题配置文件下inject配置项中 head 和 bottom 处添加以下内容：

inject:
  head:
    - <link rel="stylesheet" href="/css/imgloaded.css?1">

  bottom:
    - <script async data-pjax src="/js/imgloaded.js?1"></script> # 首页图片渐进式加载

背景美化

新建文件source/css/imgloaded.css，我们会在这里添加一些自定义 css
添加以下内容 ### 渐变背景
在_config.anzhiyu.yml主题配置文件下inject配置项中 head 和 bottom 处添加以下内容：

1
2
3

inject:
  head:
    - <link rel="stylesheet" href="/css/costom.css">

作者卡片美化

自定义背景

在已有的themes/anzhiyu/source/css/_extra/anzhiyu/custom.css文件中添加以下内容
在 url() 的括号里里填入图片链接

/* 侧边栏头像卡片 */
#aside-content>.card-widget.card-info::before {
    background: url('');
    border: 0;
    position: absolute;
    background-size: 400% 400%;
    -webkit-animation: Gradient 10s ease infinite;
    -moz-animation: Gradient 10s ease infinite;
    animation: Gradient 10s ease infinite !important;
}

渐进背景

在已有的custom.css文件中添加以下内容
在 url() 的括号里里填入图片链接

/* 侧边栏头像框背景色 */
[data-theme=dark] #aside-content>.card-widget.card-info::before {
    overflow: hidden;
    background-size: contain;
    position: relative;
}

#aside-content>.card-widget.card-info::before {
    background: linear-gradient(-45deg, #e8d8b9, #eccec5, #a3e9eb, #bdbdf0, #eec1ea);
}

图片和渐进结合

在已有的custom.css文件中添加以下内容
在 url() 的括号里里填入图片链接

/* 通用样式 - 同时作用于白天/黑夜模式 */
#aside-content>.card-widget.card-info::before {
    position: absolute;
    overflow: hidden;
    border: 0;
    background-size: cover; 
    background-position: center;
    filter: blur(3px); /* 背景模糊，数字越大越模糊 */
    -webkit-animation: Gradient 10s ease infinite;
    -moz-animation: Gradient 10s ease infinite;
    animation: Gradient 10s ease infinite !important;
}

/* 白天模式 - 图片叠加渐变 */
#aside-content>.card-widget.card-info::before {
    background-image: linear-gradient(-225deg,#d4ffec80 0%, #57f2cc80 48%, #4596fb80 100%),
                      url('');
}

/* 暗黑模式 - 纯渐变效果 */
[data-theme=dark] #aside-content>.card-widget.card-info::before {
    background-image:linear-gradient(60deg,#18171D 0%, #29323c 100%);
}