配置footer样式效果

最后更新于: 2025-12-06 10:36:40

2025.2.26(已解决)

版权

自己写的。

环境

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

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

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

警告

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

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

效果

配置

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

1/* 页脚的颜色 */
2 .vdoing-index-class .footer {
3  color: #fff;
4  /* color: #33A1C9; */
5}

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

1/*文章底部footer配置*/
2.footer {
3    padding: 5rem 1.5rem 2.5rem;
4    text-align: center;
5    color: #fff;
6    box-sizing: border-box;
7    font-size: 0.85rem;
8    transition: all 0.2s ease;
9}

（3）运行测试

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

提示

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

效果

PixPin_2025-01-17_12-19-22

配置

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

 1/* 页脚的颜色 */
 2.vdoing-index-class .footer {
 3  color: #33A1C9;  /* 默认颜色 */
 4}
 5
 6/* 链接的样式 */
 7.vdoing-index-class .footer a {
 8  color: 	#33A1C9; /* 链接的默认颜色 */
 9  text-decoration: none; /* 避免链接的下划线样式 */
10}
11
12/* 鼠标悬浮在链接上时的颜色 */
13.vdoing-index-class .footer a:hover {
14  color: 	#FF00FF; /* 悬浮时改变颜色 */
15}

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

 1/* 页脚的颜色 */
 2.footer {
 3  color: #33A1C9;  /* 默认颜色 */
 4}
 5
 6/* 链接的样式 */
 7.footer a {
 8  color: 	#33A1C9; /* 链接的默认颜色 */
 9  text-decoration: none; /* 避免链接的下划线样式 */
10}
11
12/* 鼠标悬浮在链接上时的颜色 */
13.footer a:hover {
14  color: 	#FF00FF; /* 悬浮时改变颜色 */
15}