配置footer样式效果

配置footer样式效果

2025.2.26(已解决)

版权

自己写的。

环境

自己开源的 《vuepress-theme-vdoing-one-public》网站模板。

此模板是在Young Kbt blog的开源项目《Kele-Bingtang.github.io》基础上修改为自己的风格而成，感谢大佬开源的模板&感谢原作者开源的vdoing主题。❤️❤️

风格1：多张首页大图轮播风格

警告

正常情况下，使用此主题，无需配置。但是自己这个版本的仓库需要配置一下2处地方才行；

此配置适用于首页大图轮播风格；

效果

配置

（1）docs\.vuepress\components\IndexBigImg.vue里添加如下代码：

.vdoing-index-class .footer {color:#fff;}

（2）docs\.vuepress\styles\palette.styl文件也要配置：

.footer{padding:5rem1.5rem2.5rem;text-align:center;color:#fff;box-sizing:border-box;font-size:0.85rem;transition:all0.2sease;}

（3）运行测试

风格2：一张首页大图文章背景为白色风格

提示

此配置适用于首页大图作为壁纸，其它文章为白色背景时，修改footer字体为蓝色。

效果

配置

docs\.vuepress\components\IndexBigImg.vue里添加如下代码：

.vdoing-index-class.footer{color:#33A1C9;}.vdoing-index-class.footera{color:#33A1C9;text-decoration:none;}.vdoing-index-class.footera:hover{color:#FF00FF;}

docs\.vuepress\styles\palette.styl文件也要配置：

.footer{color:#33A1C9;}.footera{color:#33A1C9;text-decoration:none;}.footera:hover{color:#FF00FF;}