配置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;
  /* color: #33A1C9; */
}

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

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

（3）运行测试

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

提示

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

效果

配置

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

/* 页脚的颜色 */
.vdoing-index-class .footer {
  color: #33A1C9;  /* 默认颜色 */
}

/* 链接的样式 */
.vdoing-index-class .footer a {
  color: 	#33A1C9; /* 链接的默认颜色 */
  text-decoration: none; /* 避免链接的下划线样式 */
}

/* 鼠标悬浮在链接上时的颜色 */
.vdoing-index-class .footer a:hover {
  color: 	#FF00FF; /* 悬浮时改变颜色 */
}

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

/* 页脚的颜色 */
.footer {
  color: #33A1C9;  /* 默认颜色 */
}

/* 链接的样式 */
.footer a {
  color: 	#33A1C9; /* 链接的默认颜色 */
  text-decoration: none; /* 避免链接的下划线样式 */
}

/* 鼠标悬浮在链接上时的颜色 */
.footer a:hover {
  color: 	#FF00FF; /* 悬浮时改变颜色 */
}