Butterfly主题美化进阶

进一步美化Butterfly主题需要 引入外部文件 ， 真正实现自己想要的效果
温馨提示：

  • 引入css文件需要修改 主体配置文件 _config.yml ， 找到 inject： head
  • 引入js文件需要修改 主体配置文件 _config.yml ， 查找 inject： bottom
  • 新建的 css 和 js 文件需要放在 /butterfly/source/.. 的 相应文件夹 中

根据主题配置文件 _config.yml 中的提示引入即可
示例：

inject:
  head:
    # - <link rel="stylesheet" href="/xxx.css">
    - <link rel="stylesheet" href="/css/background.css"> #主题/source/css文件夹中的background.css文件
  bottom:
    # - <script src="xxxx"></script>
    - <script src="/js/jq.js"></script> #主题/source/js文件夹中的jq.js文件
    - <script src="/js/fish.js"></script> #主题source/js文件夹中的fish.js文件

修改透明度

新建transparent.css文件，写入以下代码并引入：

/* 主页所有文章页面背景 */
#aside_content .card-widget, #recent-posts>.recent-post-item, .layout_page>div:first-child:not(.recent-posts), .layout_post>#page, .layout_post>#post, .read-mode .layout_post>#post{
    /* 以下代表透明度为0.8 */
    background: rgba(255,255,255,.8);
}
/*侧边栏页面*/
#aside-content>.card-widget  {
	background: rgba(255,255,255,.8);
}
#aside-content>.sticky_layout>.card-widget{
	background: rgba(255,255,255,.8);
}
/*文章页面*/
.layout>#post{
	background: rgba(255,255,255,.8);
}
/*分类页面*/
.layout>#page{
	
	background: rgba(255,255,255,.8);
}
/*时间轴页面*/
.layout>#archive{
	background: rgba(255,255,255,.8);
}

设置网站字体

推荐字体网站：
方正字体
我使用的是 方正-雨木圆圆字体
即 FZZH-YMYYTJW
可根据自己的喜好选择字体
在 /butterfly/source/ 目录下新建文件夹命名为 font
将下载好的字体放在里面
新建font.css文件，写入以下代码并引入：

@font-face {
  font-family: 'FZZH-YMYYTJW';//字体名称
  font-display: swap;
  src: url('../font/FZZH-YMYYTJW.TTF') format("truetype"); //字体的所在位置
}
body {
    font-family: 'FZZH-YMYYTJW';//应用字体
}

页脚动态渐变

新建footer.css文件，写入以下代码并引入：

/* 页脚footer */
/* 渐变色滚动动画 */
@-webkit-keyframes Gradient {
    0% {
        background-position: 0 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0 50%;
    }
}

@-moz-keyframes Gradient {
    0% {
        background-position: 0 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0 50%;
    }
}

@keyframes Gradient {
    0% {
        background-position: 0 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0 50%;
    }
}
#footer {
    background: linear-gradient(-45deg, #ee7752, #ce3e75, #23a6d5, #23d5ab);
    background-size: 400% 400%;
    -webkit-animation: Gradient 10s ease infinite;
    -moz-animation: Gradient 10s ease infinite;
    animation: Gradient 10s ease infinite;
    -o-user-select: none;
    -ms-user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}
#footer:before {
    background-color: rgba(0, 0, 0, 0);
}

页脚养鱼

首先到这两个网址引入必要的 js 文件

复制下来保存在TXT文件中分别命名为为 jquery.min 和 fishes
然后 修改后缀为 js
放在博客根目录的 themes/butterfly/source/js/ 文件夹中

引入两个js文件即可
这样就可以在页脚养鱼啦

posted @ 2022-06-06 17:19  ThinkGone  阅读(581)  评论(0)  编辑  收藏  举报