Hexo文章页透明效果

发表于 更新于 分类于 阅读次数：
本文字数： 548 阅读时长 ≈ 1 分钟
本文将介绍Hexo如何实现文章页透明效果

前言

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

操作

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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    /* 首页文章栏背景透明 */
    #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)
    }

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

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

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

结尾

没得结尾。

相关文章