Hexo + Butterfly Article Page Transparency

1. Create a new article_transparent.css file in the \themes\butterfly\source\css directory and add the following:

   1/* Homepage article section background transparency */
   2#recent-posts>.recent-post-item,.layout_page>div:first-child:not(.recent-posts),.layout_post>#page,.layout_post>#post,.read-mode .layout_post>#post {
   3    background: var(--light_bg_color)
   4}
   5
   6/* Sidebar transparency */
   7#aside-content .card-widget {
   8    background: var(--light_bg_color)
   9}
   

2. In the theme configuration file _config.butterfly.yml, under inject, directly introduce the css file in the head section.

   1- <script src="/css/article_transparent.js"></script>
   

ogImage: https://image.coldcoding.top/file/AgACAgQAAyEGAASUgNIDAAOdZ-LLW2SY1yk2VuSGbtbqq3iEFT4AAgPGMRuknBlTlzRoYu-UvNoBAAMCAAN3AAM2BA.jpg