Butterfly主题 一图流背景与顶部图修改 |
您所在的位置：网站首页 › 如何修改qq主页背景图 › Butterfly主题 一图流背景与顶部图修改 |
Butterfly主题 一图流背景与顶部图修改
| 介绍 在文章「博客迁移至Hexo，并更名为矩阵。」中，提到过一图流背景与顶部图的修改。 本文会详细介绍其修改过程。
修改 Butterfly 的配置文件 _config.butterfly.yml。 编辑 index_img、index_top_img_height、background、footer_bg、mask.header 选项。设置网站背景，将主页顶部图和页脚背景改为透明，调整主页顶部图高度，移除顶部图的黑色半透遮罩。(需要将示例地址替换为自己的图片地址。) _config.butterfly.yml1234567891011121314151617181920212223# Image (圖片設置)# --------------------------------------# The banner image of home pageindex_img: transparent# Beautify/Effect (美化/效果)# --------------------------------------# The height of top_img, eg: 300px/300em/300rem (主頁top_img高度)index_top_img_height: 400px# Website Background (設置網站背景)# can set it to color or image (可設置圖片 或者 顔色)# The formal of image: url(http://xxxxxx.com/xxx.jpg)background: url(https://example.com/img/background.jpg)# Footer Backgroundfooter_bg: transparent# Add mask to header or footer (为 header 或 footer 添加黑色半透遮罩)mask: header: false引入相关样式新建一个文件，位于 source/css/modify.styl，并增加以下内容。(此处只是举例，也可以使用已有的样式文件。) modify.styl123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051@import 'nib'// 顶部图#page-header background: transparent !important &.post-bg, &.not-home-page height: 280px !important #post-info bottom: 40px !important text-align: center #page-site-info top: 140px !important @media screen and (max-width: 768px) &.not-home-page height: 200px !important #post-info bottom: 10px !important #page-site-info top: 100px !important.top-img height: 250px margin: -50px -40px 50px border-top-left-radius: inherit border-top-right-radius: inherit background-position: center center background-size: cover transition: all 0.3s @media screen and (max-width: 768px) height: 230px margin: -36px -14px 36px [data-theme='dark'] & filter: brightness(0.8)// 页脚#footer:before background-color: alpha(#FFF, .5) [data-theme='dark'] & background-color: alpha(#000, .5)#footer-wrap, #footer-wrap a color: #111 transition: unset [data-theme='dark'] & color: var(--light-grey)修改 Butterfly 的配置文件 _config.butterfly.yml，在 inject.head 选项引入样式。 _config.butterfly.yml123456789# other (其他)# --------------------------------------# Inject# Insert the code to head (before '' tag) and the bottom (before '' tag)# 插入代码到头部 之前 和 底部 之前inject: head: -Hexo 会将 Stylus 渲染成 CSS 文件，所以此处应为 modify.css。 增加插件脚本因为使用了 cheerio 来解析 HTML，所以需要先安装此依赖。 1npm install cheerio新建一个文件，位于 scripts/modify.js，并增加以下内容。(此处只是举例，也可以使用已有的插件脚本文件。) modify.js123456789101112131415161718192021222324'use strict';const { filter } = hexo.extend;const cheerio = require('cheerio');/** * 在页面插入新顶部图 * @param {cheerio.Root} $ Root */function insertTopImg($) { const header = $('#page-header'); if (header.length === 0) return; const background = header.css('background-image'); if (!background) return; $('#post, #page, #archive, #tag, #category').prepend(``);}// 修改 HTMLfilter.register('after_render:html', (str, data) => { const $ = cheerio.load(str, { decodeEntities: false }); insertTopImg($); return $.html();});大功告成👏 恭喜你完成了修改，可以使用以下命令进行预览。 1hexo server后记其实早些时候，有篇最终效果类似的修改教程。是友链的 @Nesxc 大佬写的「butterfly文章页美化教程」。他是通过修改主题源文件的方式实现的。而我是用 Hexo 的 插件 系统实现的。 插件版的优点是更新主题时，只要结构变化不大，无需任何操作即可继续使用。并且在管理上也方便。源文件版的优点是效率会略高一点，毕竟是直接修改的主题源文件。 如果像我一样，不想每次升级主题都可能要重新改一遍，或是为了方便管理，则可以选择插件版。如果本来就修改了源文件，也不介意再多修改这一个，则可以选择源文件版。 |
【本文地址】
今日新闻 |
点击排行 |
|
推荐新闻 |
图片新闻 |
|
专题文章 |