魔改前须知
魔改有风险,记得备份 。
魔改参考:akilar | Fomalhaut🥝 | 安知鱼 …,更多人请到 友链寻找 )(全是大佬)。本文仅做一个好用的魔改总结,便于自己查找。
鉴于每个人的根目录名称都不一样,本帖 博客根目录 一律以[BlogRoot]
指代。
涉及魔改源码的内容,会使用diff代码块 标识,复制时请不要忘记删除 前面的+、-
符号。
引入 自定义的css与js文件 ,方法见 Hexo博客添加自定义css和js文件
themes/butterfly
等同于 /node_modules/hexo-theme-butterfly
violet留言板(在用) 详见:信笺样式留言板 )
1)在 [Blogroot]
运行指令:
1 npm install hexo-butterfly-envelope --save
2 )在配置文件 _config.yml
或 主题配置文件 _config.butterfly.yml
添加以下配置项:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 envelope_comment: enable: true custom_pic: cover: https://npm.elemecdn.com/hexo-butterfly-envelope/lib/violet.jpg line: https://npm.elemecdn.com/hexo-butterfly-envelope/lib/line.png beforeimg: https://npm.elemecdn.com/hexo-butterfly-envelope/lib/before.png afterimg: https://npm.elemecdn.com/hexo-butterfly-envelope/lib/after.png message: - 有什么想问的? - 有什么想说的? - 有什么想吐槽的? - 哪怕是有什么想吃的,都可以告诉我哦~ bottom: 自动书记人偶竭诚为您服务! height: path: front_matter: title: 留言板 comments: true
一图流教程(在用) 1)在 [Blogroot]/source/css/custom.css
中填入以下内容:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 #footer { background : transparent !important ; } #page-header { background : transparent !important ; } #footer ::before { background : transparent !important ; } #page-header ::before { background : transparent !important ; } [data-theme="dark" ] #footer ::before { background : transparent !important ; } [data-theme="dark" ] #page-header ::before { background : transparent !important ; }
2)在主题配置文件 [BlogRoot]\_config.butterfly.yml
文件中的 index_img
和 footer_bg
配置项取消头图与页脚图的加载项:
1 2 3 4 5 index_img: footer_bg: false
5 1#card-wechat.card-widget.tzy-right-widget2 #flip-wrapper3 #flip-content4 .face5 .back.facepug
1 2 3 4 background: url(https://s1.vika.cn/space/2022/12/17/52cf9c6e3f19472bb38b265132221b7d)
页脚Github徽标 详见:Add Github Badge
1)安装插件,在博客根目录 [Blogroot]
下打开终端,运行以下指令:
1 npm install hexo-butterfly-footer-beautify --save
2)在站点配置文件 _config.yml
或者主题配置文件 _config.butterfly.yml
中添加以下内容:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 footer_beautify: enable: timer: true bdage: true priority: 5 enable_page: all exclude: layout: type: id name: footer-wrap index: 0 runtime_js: https://npm.elemecdn.com/hexo-butterfly-footer-beautify@1.0.0/lib/runtime.js runtime_css: https://npm.elemecdn.com/hexo-butterfly-footer-beautify@1.0.0/lib/runtime.css swiperpara: 3 bdageitem: - link: https://hexo.io/ shields: https://img.shields.io/badge/Frame-Hexo-blue?style=flat&logo=hexo message: 博客框架为Hexo_v5.4.0 - link: https://butterfly.js.org/ shields: https://img.shields.io/badge/Theme-Butterfly-6513df?style=flat&logo=bitdefender message: 主题版本Butterfly_v3.8.2 - link: https://www.jsdelivr.com/ shields: https://img.shields.io/badge/CDN-jsDelivr-orange?style=flat&logo=jsDelivr message: 本站使用JsDelivr为静态资源提供CDN加速 - link: https://vercel.com/ shields: https://img.shields.io/badge/Hosted-Vercel-brightgreen?style=flat&logo=Vercel message: 本站采用双线部署,默认线路托管于Vercel - link: https://vercel.com/ shields: https://img.shields.io/badge/Hosted-Coding-0cedbe?style=flat&logo=Codio message: 本站采用双线部署,联通线路托管于Coding - link: https://github.com/ shields: https://img.shields.io/badge/Source-Github-d021d6?style=flat&logo=GitHub message: 本站项目由Github托管 - link: http://creativecommons.org/licenses/by-nc-sa/4.0/ shields: https://img.shields.io/badge/Copyright-BY--NC--SA%204.0-d42328?style=flat&logo=Claris message: 本站采用知识共享署名-非商业性使用-相同方式共享4.0国际许可协议进行许可 swiper_css: https://npm.elemecdn.com/hexo-butterfly-swiper/lib/swiper.min.css swiper_js: https://npm.elemecdn.com/hexo-butterfly-swiper/lib/swiper.min.js swiperbdage_init_js: https://npm.elemecdn.com/hexo-butterfly-footer-beautify/lib/swiperbdage_init.min.js
3)参数释义
参数
备选值/类型
释义
priority
number
【可选】过滤器优先级,数值越小,执行越早,默认为10,选填
enable.timer
true/false
【必选】计时器控制开关
enable.bdage
true/false
【必选】徽标控制开关
enable_page
path
【可选】填写想要应用的页面,如根目录就填’/‘,分类页面就填’/categories/‘。若要应用于所有页面,就填all
,默认为all
exclude
path
【可选】填写想要屏蔽的页面,可以多个。仅当enable_page为’all’时生效。写法见示例。原理是将屏蔽项的内容逐个放到当前路径去匹配,若当前路径包含任一屏蔽项,则不会挂载。
layout.type
id/class
【可选】挂载容器类型,填写id或class,不填则默认为id
layout.name
text
【必选】挂载容器名称
layout.index
0和正整数
【可选】前提是layout.type为class,因为同一页面可能有多个class,此项用来确认究竟排在第几个顺位
runtime_js
url
【必选】页脚计时器脚本,可以下载上文填写示例的链接,参照注释和教程:Native JS Timer 自行修改。
runtime_css
url
【可选】自定义样式,预留开发者接口,可自行下载。
swiperpara
number
【可选】若非零,则开启轮播功能,此项表示每行最多容纳徽标个数,用来应对徽标过多显得页脚拥挤的问题
bdageitem.link
url
【可选】页脚徽标指向的网站链接
bdageitem.shields
url
【必选】页脚徽标对应的API,API具体写法示例参照教程Add Github Badge
bdageitem.message
text
【可选】页脚徽标悬停时显示的信息
swiper_css
url
【可选】swiper的依赖
swiper_js
url
【可选】swiper的依赖
swiperbdage_init_js
url
【可选】swiper初始化方法
首页分类磁贴新版 详见:Categories Magnet
1)安装插件,在博客根目录 [Blogroot]
下打开终端,运行以下指令:
1 npm install hexo-butterfly-categories-card --save
2)在站点配置文件 _config.yml
或者主题配置文件 _config.butterfly.yml
中添加以下内容:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 categoryBar: enable: true priority: 5 enable_page: / layout: type: id name: recent-posts index: 0 column: odd row: 1 message: - descr: Ubuntu指南 cover: https://npm.elemecdn.com/akilar-candyassets/image/cover1.webp - descr: 玩转Win10 cover: https://npm.elemecdn.com/akilar-candyassets/image/cover2.webp - descr: 长篇小说连载 cover: https://npm.elemecdn.com/akilar-candyassets/image/cover3.webp - descr: 个人日记 cover: https://npm.elemecdn.com/akilar-candyassets/image/cover4.webp - descr: 诗词歌赋 cover: https://npm.elemecdn.com/akilar-candyassets/image/cover5.webp - descr: 杂谈教程 cover: https://npm.elemecdn.com/akilar-candyassets/image/cover6.webp custom_css: https://npm.elemecdn.com/hexo-butterfly-categories-card@1.0.0/lib/categorybar.css
3)参数释义
参数
备选值/类型
释义
priority
number
【可选】过滤器优先级,数值越小,执行越早,默认为10,选填
enable
true/false
【必选】控制开关
enable_page
path/all
【可选】填写想要应用的页面的相对路径(即路由地址),如根目录就填’/‘,分类页面就填’/categories/‘。若要应用于所有页面,就填’all’,默认为’/‘
layout.type
id/class
【可选】挂载容器类型,填写id或class,不填则默认为id
layout.name
text
【必选】挂载容器名称
layout.index
0和正整数
【可选】前提是layout.type为class,因为同一页面可能有多个class,此项用来确认究竟排在第几个顺位
column
odd/even
【可选】显示列数,考虑到比例问题,只提供3列和4列,odd为3列, even为4列
row
number
【可选】显示行数,默认两行,超过行数切换为滚动显示
message.descr
text
分类描述,需要和你自己的文章分类一一对应。
message.cover
url
分类背景,需要和你自己的文章分类一一对应。
custom_css
url
【可选】自定义样式,会替换默认的css链接,可以下载文档给出的cdn链接后自主修改
文章置顶滚动栏(在用) 详见:Swiper Bar
1)安装插件,在博客根目录 [Blogroot]
下打开终端,运行以下指令:
1 npm install hexo-butterfly-swiper --save
2)添加配置信息,以下为写法示例 在站点配置文件 _config.yml
或者主题配置文件 _config.butterfly.yml
中添加
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 swiper: enable: true priority: 5 enable_page: all timemode: date layout: type: id name: recent-posts index: 0 default_descr: 再怎么看我也不知道怎么描述它的啦! swiper_css: https://npm.elemecdn.com/hexo-butterfly-swiper/lib/swiper.min.css swiper_js: https://npm.elemecdn.com/hexo-butterfly-swiper/lib/swiper.min.js custom_css: https://npm.elemecdn.com/hexo-butterfly-swiper/lib/swiperstyle.css custom_js: https://npm.elemecdn.com/hexo-butterfly-swiper/lib/swiper_init.js
3)参数释义
参数
备选值/类型
释义
priority
number
【可选】过滤器优先级,数值越小,执行越早,默认为10,选填
enable
true/false
【必选】控制开关
enable_page
path/all
【可选】填写想要应用的页面的相对路径(即路由地址),如根目录就填’/‘,分类页面就填’/categories/‘。若要应用于所有页面,就填’all’,默认为all
timemode
date/updated
【可选】时间显示,date为显示创建日期,updated为显示更新日期,默认为date
layout.type
id/class
【可选】挂载容器类型,填写id或class,不填则默认为id
layout.name
text
【必选】挂载容器名称
layout.index
0和正整数
【可选】前提是layout.type为class,因为同一页面可能有多个class,此项用来确认究竟排在第几个顺位
default_descr
text
默认文章描述
swiper_css
url
【可选】自定义的swiper依赖项css链接
swiper_js
url
【可选】自定义的swiper依赖项加js链接
custom_css
url
【可选】适配主题样式补丁
custom_js
url
【可选】swiper初始化方法
4)在文章的 front_matter
中添加 swiper_index
配置项即可。
1 2 3 4 5 6 7 8 --- title: 文章标题 date: 创建日期 updated: 更新日期 cover: 文章封面 description: 文章描述 swiper_index: 1 #置顶轮播图顺序,非负整数,数字越大越靠前 ---
GitCalendar(在用) 详见:Gitcalendar
1)安装插件,在博客根目录 [Blogroot]
下打开终端,运行以下指令:
1 npm install hexo-filter-gitcalendar --save
2)在站点配置文件 _config.yml
或者主题配置文件 _config.butterfly.yml
中添加以下内容:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 gitcalendar: enable: true priority: 5 enable_page: / layout: type: id name: gitZone index: 0 user: lmx0 apiurl: 'https://github-calendar.lmx0.top' minheight: pc: 280px mibile: 0px color: "['#d9e0df', '#c6e0dc', '#a8dcd4', '#9adcd2', '#89ded1', '#77e0d0', '#5fdecb', '#47dcc6', '#39dcc3', '#1fdabe', '#00dab9']" container: .recent-post-item(style='width:100%;height:auto;padding:10px;') gitcalendar_css: https://cdn.cbd.int/hexo-filter-gitcalendar/lib/gitcalendar.css gitcalendar_js: https://cdn.cbd.int/hexo-filter-gitcalendar/lib/gitcalendar.js
3)参数释义
参数
备选值/类型
释义
priority
number
【可选】过滤器优先级,数值越小,执行越早,默认为10,选填
enable
true/false
【必选】控制开关
enable_page
path/all
【可选】填写想要应用的页面的相对路径(即路由地址),如根目录就填’/‘,分类页面就填’/categories/‘。若要应用于所有页面,就填’all’,默认为’/‘
layout.type
id/class
【可选】挂载容器类型,填写id或class,不填则默认为id
layout.name
text
【必选】挂载容器名称
layout.index
0和正整数
【可选】前提是layout.type为class,因为同一页面可能有多个class,此项用来确认究竟排在第几个顺位
user
text
【必选】git用户名
apiurl
url
【可选】默认使用提供文档提供的api,但还是建议自建api,参考教程:自建API部署
minheight.pc
280px
【可选】桌面端最小高度,默认为280px
minheight.mobile
0px
【可选】移动端最小高度,默认为0px
color
list
【可选】一个包含11个色值的数组,文档给出了四款预设值
container
pug
【可选】预留的父元素容器,用以适配多主题,需要用pug语法填写,目前已适配butterfly ,volantis ,matery ,mengd 主题,这四个主题,插件会自自动识别_config.yml
内填写的theme
配置项。其余主题需要自己填写父元素容器。
gitcalendar_css
URL
【可选】自定义CSS样式链接
gitcalendar_js
URL
【可选】自定义js链接
Tag Plugins标签的引入(在用) 详见:Tag Plugins Plus
1)安装插件,在博客根目录 [Blogroot]
下打开终端,运行以下指令:
1 npm install hexo-butterfly-tag-plugins-plus --save
考虑到hexo自带的markdown渲染插件 hexo-renderer-marked
与Tag Plugins标签语法的兼容性较差,建议您将其替换成hexo-renderer-kramed
1 2 npm uninstall hexo-renderer-marked --save npm install hexo-renderer-kramed --save
2)在站点配置文件 _config.yml
或者主题配置文件 _config.butterfly.yml
中添加以下内容:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 tag_plugins: enable: true priority: 5 issues: false link: placeholder: /img/link.png CDN: anima: https://npm.elemecdn.com/hexo-butterfly-tag-plugins-plus@latest/lib/assets/font-awesome-animation.min.css jquery: https://npm.elemecdn.com/jquery@latest/dist/jquery.min.js issues: https://npm.elemecdn.com/hexo-butterfly-tag-plugins-plus@latest/lib/assets/issues.js iconfont: //at.alicdn.com/t/font_2032782_8d5kxvn09md.js carousel: https://npm.elemecdn.com/hexo-butterfly-tag-plugins-plus@latest/lib/assets/carousel-touch.js tag_plugins_css: https://npm.elemecdn.com/hexo-butterfly-tag-plugins-plus@latest/lib/tag_plugins.css
3)参数释义
参数
备选值/类型
释义
enable
true/false
【必选】控制开关
priority
number
【可选】过滤器优先级,数值越小,执行越早,默认为10,选填
issues
true/false
【可选】issues标签控制开关,默认为false
link.placeholder
【必选】link卡片Tag Plugins标签的默认图标
CDN.anima
URL
【可选】动画标签anima的依赖
CDN.jquery
URL
【可选】issues标签依赖
CDN.issues
URL
【可选】issues标签依赖
CDN.iconfont
URL
【可选】iconfont标签symbol样式引入,如果不想引入,则设为false
CDN.carousel
URL
【可选】carousel旋转相册标签鼠标拖动依赖,如果不想引入则设为false
CDN.tag_plugins_css
URL
【可选】Tag Plugins标签样式的CSS依赖,为避免CDN缓存延迟,建议将@latest改为具体版本号
具体样式和写法可见:Markdown语法与Tag Plugins标签写法汇总
文章H1~H6标题小风车转动效果 1)修改主题配置文件 _config.butterfly.yml
文件的 beautify
配置项:
1 2 3 4 5 6 beautify: enable: true field: post title-prefix-icon: '\f863' title-prefix-icon-color: "#F47466"
2)在 [Blogroot]/source/css/custom.css
中填入以下内容:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 h1 ::before ,h2 ::before ,h3 ::before ,h4 ::before ,h5 ::before ,h6 ::before { -webkit-animation : ccc 4s linear infinite; animation : ccc 4s linear infinite; } @-webkit-keyframes ccc { 0% { -webkit-transform : rotate (0deg ); transform : rotate (0deg ); } to { -webkit-transform : rotate (-1turn ); transform : rotate (-1turn ); } } @keyframes ccc { 0% { -webkit-transform : rotate (0deg ); transform : rotate (0deg ); } to { -webkit-transform : rotate (-1turn ); transform : rotate (-1turn ); } } #content-inner .layout h1 ::before { color : #ef50a8 ; margin-left : -1.55rem ; font-size : 1.3rem ; margin-top : -0.23rem ; } #content-inner .layout h2 ::before { color : #fb7061 ; margin-left : -1.35rem ; font-size : 1.1rem ; margin-top : -0.12rem ; } #content-inner .layout h3 ::before { color : #ffbf00 ; margin-left : -1.22rem ; font-size : 0.95rem ; margin-top : -0.09rem ; } #content-inner .layout h4 ::before { color : #a9e000 ; margin-left : -1.05rem ; font-size : 0.8rem ; margin-top : -0.09rem ; } #content-inner .layout h5 ::before { color : #57c850 ; margin-left : -0.9rem ; font-size : 0.7rem ; margin-top : 0rem ; } #content-inner .layout h6 ::before { color : #5ec1e0 ; margin-left : -0.9rem ; font-size : 0.66rem ; margin-top : 0rem ; } #content-inner .layout h1 :hover ,#content-inner .layout h2 :hover ,#content-inner .layout h3 :hover ,#content-inner .layout h4 :hover ,#content-inner .layout h5 :hover ,#content-inner .layout h6 :hover { color : var (--theme-color); } #content-inner .layout h1 :hover ::before ,#content-inner .layout h2 :hover ::before ,#content-inner .layout h3 :hover ::before ,#content-inner .layout h4 :hover ::before ,#content-inner .layout h5 :hover ::before ,#content-inner .layout h6 :hover ::before { color : var (--theme-color); -webkit-animation : ccc 6s linear infinite; animation : ccc 6s linear infinite; }
iconfont(在用) 详见:Iconfont Inject
新建图标项目
访问阿里巴巴矢量图标库 ,注册登录。
搜索自己心仪的图标,然后选择添加入库 ,加到购物车。
选择完毕后点击右上角的购物车图标,打开侧栏,选择添加到项目,如果没有项目就新建一个。
可以通过上方顶栏菜单->资源管理->我的项目,找到之前添加的图标项目。(现在的iconfont可以在图标库的项目设置里直接打开彩色设置,然后采用fontclass的引用方式即可使用多彩图标。但是单一项目彩色图标上限是40个图标 ,酌情采用。)
引入图标
在主题配置文件 _config.butterfly.yml
中的 inject
配置项进行全局引入:
链接在获取方式在上方 ,两个都需要引入 ,我踩过的坑。
1 2 3 4 5 inject: head: - <link rel="stylesheet" href="//at.alicdn.com/t/font_2264842_b004iy0kk2b.css" media="defer" onload="this.media='all'"> bottom: - <script async src="//at.alicdn.com/t/font_2264842_b004iy0kk2b.js"></script>
同时可以在自定义 CSS
中添加如下样式来控制图标默认大小和颜色等属性(若已经在项目设置中勾选了彩色选项,则无需再定义图标颜色 ),写法与字体样式类似,这恐怕也是它被称为 iconfont
(图标字体)的原因:
1 2 3 4 5 6 7 8 .iconfont { font-family : "iconfont" !important ; font-size : 3em ; font-style : normal; -webkit-font-smoothing : antialiased; -moz-osx-font-smoothing : grayscale; }
菜单栏图标的使用: 注意:格式为 iconfont 图标名
,当时搞了好久。具体格式参照下面代码:
修改主题配置文件 _config.butterfly.yml
文件的 menu
配置项:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 menu: 首页: / || fas fa-home 文章|| || hide: 归档: /archives/ || iconfont icon-archive1 标签: /tags/ || iconfont icon-tags 分类: /categories/ || iconfont icon-cube 随便逛逛: javascript:toRandomPost(); || iconfont icon-bus1 我的|| || hide: 电影: /movies || iconfont icon-dianying 追番: /bangumis/index.html || iconfont icon-bilibili 照片: /gallery/ || iconfont icon-tupian 音乐: /music/ || iconfont icon-yinle1 友链|| || hide: 友人帐: /link/ || iconfont icon-link 朋友圈: /fcircle/ || iconfont icon-pengyouquan 留言板: /comments/ || iconfont icon-comment2 即刻短文: /essay/ || iconfont icon-message1 关于|| || hide: 关于我: /about/ || iconfont icon-person 时间轴: /time/ || iconfont icon-timeline 网站分析: /charts/ || iconfont icon-shujufenxi1 网址导航: /guide/ || iconfont icon-guide
右边按钮阅读进度+返回顶部(在用) 详见:返回顶部显示网页阅读进度
1)修改文件themes\butterfly\layout\includes\rightside.pug
注意:+
需要删除,注意缩进
1 2 3 4 button#go-up(type="button" title=_p("rightside.back_to_top")) i.fas.fa-arrow-up + span#percent 0 + span %
2)新建文件[BlogRoot]\source\js\readPercent.js
,在自定义js文件中加入如下代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 window .onscroll = percent;function percent ( ) { let a = document .documentElement .scrollTop || window .pageYOffset , b = Math .max (document .body .scrollHeight , document .documentElement .scrollHeight , document .body .offsetHeight , document .documentElement .offsetHeight , document .body .clientHeight , document .documentElement .clientHeight ) - document .documentElement .clientHeight , result = Math .round (a / b * 100 ), up = document .querySelector ("#go-up" ) if (result <= 95 ) { up.childNodes [0 ].style .display = 'none' up.childNodes [1 ].style .display = 'block' up.childNodes [1 ].innerHTML = result; } else { up.childNodes [1 ].style .display = 'none' up.childNodes [0 ].style .display = 'block' } }
3)在 [BlogRoot]\source\css\custom.css
增加如下代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 button #go-up #percent { display : none; font-weight : bold; font-size : 15px !important ; } button #go-up span { font-size : 12px !important ; margin-right : -1px ; } button #go-up :hover i { display : block !important ; } button #go-up :hover #percent { display : none !important ; }
4)引入js文件与css文件
1 2 3 4 5 inject: head: - <link rel="stylesheet" href="/css/custom.css"> bottom: - <script defer data-pjax src="/js/readPercent.js"></script>
评论表情包放大(在用) 详见:评论表情包放大功能,超实用
1)新建文件[BlogRoot]\source\js\emoji.js
,写入如下内容:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 if (document .getElementById ('post-comment' )) owoBig ();function owoBig ( ) { let flag = 1 , owo_time = '' , m = 3 ; let div = document .createElement ('div' ), body = document .querySelector ('body' ); div.id = 'owo-big' ; body.appendChild (div) let observer = new MutationObserver (mutations => { for (let i = 0 ; i < mutations.length ; i++) { let dom = mutations[i].addedNodes , owo_body = '' ; if (dom.length == 2 && dom[1 ].className == 'OwO-body' ) owo_body = dom[1 ]; else continue ; if (document .body .clientWidth <= 768 ) owo_body.addEventListener ('contextmenu' , e => e.preventDefault ()); owo_body.onmouseover = (e ) => { if (flag && e.target .tagName == 'IMG' ) { flag = 0 ; owo_time = setTimeout (() => { let height = e.path [0 ].clientHeight * m, width = e.path [0 ].clientWidth * m, left = (e.x - e.offsetX ) - (width - e.path [0 ].clientWidth ) / 2 , top = e.y - e.offsetY ; if ((left + width) > body.clientWidth ) left -= ((left + width) - body.clientWidth + 10 ); if (left < 0 ) left = 10 ; div.style .cssText = `display:flex; height:${height} px; width:${width} px; left:${left} px; top:${top} px;` ; div.innerHTML = `<img src="${e.target.src} ">` }, 300 ); } }; owo_body.onmouseout = () => { div.style .display = 'none' , flag = 1 , clearTimeout (owo_time); } } }) observer.observe (document .getElementById ('post-comment' ), { subtree : true , childList : true }) }
2)在 [BlogRoot]\source\css\custom.css
增加如下代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 #owo-big { position : fixed; align-items : center; background-color : rgb (255 , 255 , 255 ); border : 1px #aaa solid; border-radius : 10px ; z-index : 9999 ; display : none; transform : translate (0 , -105% ); overflow : hidden; animation : owoIn 0.3s cubic-bezier (0.42 , 0 , 0.3 , 1.11 ); } [data-theme=dark] #owo-big { background-color : #4a4a4a } #owo-big img { width : 100% ; } @keyframes owoIn { 0% { transform : translate (0 , -95% ); opacity : 0 ; } 100% { transform : translate (0 , -105% ); opacity : 1 ; } }
4)引入js文件与css文件
1 2 3 4 5 inject: head: - <link rel="stylesheet" href="/css/custom.css"> bottom: - <script src="/js/emoji.js"></script>