Hexo文章页透明效果

花猪

发布于 2022-02-16 15:49:59

8400

文章被收录于专栏：花猪的学习记录花猪的学习记录

前言

在不妨碍正常阅读的情况下想更好地展示背景或者一些效果，实现文章页透明是一种不错的选择。

操作

在\themes\butterfly\source\css路径下创建一个xxx.css文件，在文件中添加如下代码：

/* 首页文章栏背景透明 */
#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)
}

然后将该文件引入到_config.butterfly.yml文件中inject的head处：

- <link rel="stylesheet" href="/css/xxx.css">

至此，重新部署后就可以看到效果啦

结尾

没得结尾。

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2021-02-19，如有侵权请联系 cloudcommunity@tencent.com 删除

css

Hexo文章页透明效果

Hexo文章页透明效果

前言

操作

结尾

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐