IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> Hexo-Butterfly主题优化-网站首页显示背景、文章最上方不显示背景 -> 正文阅读

[JavaScript知识库]Hexo-Butterfly主题优化-网站首页显示背景、文章最上方不显示背景

我想保留 Butterfly主题网站主界面的图片 而不想每个文章中的上方都出现为其设置的缩略图

预期效果如下

主界面

文章页面

image-20220215232022741

Butterfly 的配置文件中只提供了 index_img设置主界面图片,文章上方的图片由文章属性 cover 控制,如果为空,则为默认的蓝色界面无法去除

默认界面:

image-20220215230149546

设置了 cover 属性的界面:

image-20220215230628865

如果想将文章界面上面的图片去掉,就需要设置 disable_top_img 但是这样,网站首页的图片也无法显示。(不知道作者为什么要这样设置~)

解决方法:修改源码!!!(我太机智了)

image-20220215231039048

首先在 vscode 中搜索出现 index_img 的文件,发现只有一个 index.pug
(index.pug位于 /themes/butterfly/layout/includes/header/index.pug)
打开之后显示:

image-20220215231132112

根据代码判断

  • is_post() 判断当前页面是不是文章界面
  • is_home() 判断当前页面是不是网站的主界面

为了达到我的要求,我把代码修改如下

image-20220215231300721

修改逻辑为:

  • 如果当前界面是文章的页面,那么设置top_imgfalse ,即文章界面不显示最上方的图片
  • 如果当前界面是网站的首页面,那么设置 top_img 为我们设置的 index_img

这样就满足了首页面有背景图片,文章最上方没有图片的要求。

  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2022-02-16 12:59:54  更:2022-02-16 13:01:40 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 -2024/11/24 10:41:33-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码