我看到挺多人导航都是默认的那种颜色，没有透明度，我自己感觉导航和页脚背景有一定的透明好看点，我先说一下透明度怎么搞，因为背景模糊效果的前提是先背景透明。
- 头部导航透明:
打开主题配置文件_config.yml, 找到主题颜色哪里，也就是color_scheme.common.headerMenuBackgroundColor, 这个headerMenuBackgroundColor就是设置头部导航的值，我们将它设置为rgba(66, 185, 133, 0.8), 此时我们头部就是绿色透明的了，0.8就是透明度，数值越小越透明，0.8前面的三个值就是rgb颜色值。会css的应该知道的哦
- 底部页脚透明：
同样我们找到color_scheme.footer.background, 将background的值同样改为rgba(66, 185, 133, 0.8), 这个时候页脚也变透明了。
- 头部导航和页脚高斯模糊
其实很简单，一行代码搞定
首先我们需要在source文件夹下创建custom/menu.css文件，内容如下就是设置这个1
2
3
4
5#navHeader,
#j-fish-skip,
.footer {
backdrop-filter: saturate(120%) blur(5px);
}backdrop-filter属性就行了，这个属性具体可以百度。
然后将创建好的css导入进去:
找到主题配置文件_config.yml中的import，将css导进去：
1 | import: |
上面的source文件夹和主题themes文件夹同级，也就是最外面(根目录下)的那个source文件夹，不是主题里的，这样就不会动源码。
至此，头部导航和页脚的模糊效果就完成了，效果如图：
模糊效果：
透明效果：
差别不大，看个人喜好
