type
status
date
slug
summary
tags
category
icon
password
由于有小伙伴提到Heo主题英雄区这块的配置（如下图红框内，不管什么位置其实原理是相通的），阿森就回顾了一下DIY的全过程，这里也包含了我一些设计小工具的推荐，希望能帮到各位~
1. 原图定位
打开开发者（F12）模式，识别到这块的图片位置
复制并打开该图片的图床地址，可以看到其尺寸位800*500，为你后边要替换的图片提供了一个尺寸的参照
在Github中很快也能找到这张图片的位置，在hero.js这个文件的第273行的位置
想着这块区域应该也有蒙版底图的替换，所以当时试着截原图底部最深的区域颜色，用取色器识别到了颜色代码为0E57D5
2. 图片设计上传
找到位置，那我们接下来只需要进行替换即可，把我们想要替换的图片制作好，尺寸为800*500
设计好后导出，上传到你常用的图床工具，阿森用的是简单图床（GitHub的开源优质项目），你可以选择下载安装到电脑里，也可以用在线网页。
阿森用的在线网页上传，把自己做好的退票上传，然后得到这个地址，复制起来，下面到GitHub替换
https://i2.100024.xyz/2023/08/27/in6c7q.webp
3. 在Github中进行替换
以NotionNext项目4.0.13版本为例，我们在第273行找到此位置，点击编辑按钮，把自己的图床地址粘贴到这然后commit changes，即可进行改动替换。
因为原图是深蓝色，跟我的图放在一起搭配不太和谐所以阿森也选择了替换
PS：
底层蒙版的配色方案是使用了Colormind这个工具，上传一些你喜欢的素材或者你自己拍照的原图，它会识别出一组搭配得当的配色方案
（效果很像万能不出错的眼影盘 🥲）
最终效果呈现
有关Notion安装或者使用上的问题，欢迎您在底部评论区留言，一起交流~
- 作者:Asenkits
- 链接:https://asenkits.top/article/d5eede23-c85a-4a30-8e78-dd0c6e12f251
- 声明:本文采用 CC BY-NC-SA 4.0 许可协议，转载请注明出处。