hugo-teek is loading...

footer小特性配置

最后更新于:

footer小特性配置

版权

次风格来源于《spiderapi.cn》、《landhutu.top》大佬网站,十分感谢原作者💖。

环境

2025.2.24(已解决)

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

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

效果

https://onedayxyy.cn/

image-20250224215525077

配置

(1)将相关图片素材放到docs\.vuepress\public\img\index路径

image-20250224214245823

图片下载路径:

2025.2.24-footer-photos.zip

(2)docs\.vuepress\common\footer.ts文件内容替换为如下:

 1import { penName, footerTitle } from '../common/info'
 2interface Footer {
 3  createYear: number, // 博客创建年份
 4  copyrightInfo: string // 博客版权信息,支持 a 标签
 5}
 6export default <Footer> {
 7  // 页脚信息
 8  createYear: 2024, 
 9  copyrightInfo:
10    '<a href="https://onedayxyy.cn/" target="_blank"> One <br></a>' +
11    // '<a href="http://beian.miit.gov.cn/" target="_blank"> 陇ICP备2023002645号</a>' +
12    // '<a href="https://beian.miit.gov.cn/" target="_blank"><img src="https://static.spiderapi.cn/public/images/logo/icp_48x48.png" alt="ICP 备案" style="width:20px; height:auto; margin-bottom:-2px"> 陇ICP备2023002645号</a>' +
13    '<a href="https://beian.miit.gov.cn/" target="_blank"><img src="/img/index/icp_48x48.png" alt="ICP 备案" style="width:20px; height:auto; margin-bottom:-2px"> 陇ICP备2023002645号</a>' +
14    // ' | <a href="https://beian.mps.gov.cn/" target="_blank"> 甘公网安备62102702000211号</a>' +
15    ' | <a href="https://beian.mps.gov.cn/" target="_blank"><img src="/img/index/mps_48x48.png" alt="MPS 公网安备" style="width:auto; height:20px; margin-bottom:-4px"> 甘公网安备62102702000211号</a>' +
16    // ' | <a href="https://beian.mps.gov.cn/" target="_blank"><img src="https://static.spiderapi.cn/public/images/logo/mps_48x48.png" alt="MPS 公网安备" style="width:auto; height:20px; margin-bottom:-4px"> 甘公网安备62102702000211号</a>' +
17    ' | <a href="https://github.com/xugaoyi/vuepress-theme-vdoing" target="_blank"><img src="/img/index/vue_48x48.png" alt="Theme by Vdoing" style="width:18px; height:auto; margin-bottom:-4px"> Theme Vdoing</a>' +
18    // ' | <a href="https://github.com/xugaoyi/vuepress-theme-vdoing" target="_blank"><img src="https://static.spiderapi.cn/public/images/logo/vue_48x48.png" alt="Theme by Vdoing" style="width:18px; height:auto; margin-bottom:-4px"> Theme Vdoing</a>' +
19    // ' | <a href="https://edgeone.ai/" target="_blank"><img src="https://static.spiderapi.cn/public/images/logo/tencent_edgeone_48x48.png" alt="Tencent EdgeOne" style="width:18px; height:auto; margin-bottom:-3px"> Tencent EdgeOne</a>' +
20    ' | <a href="https://edgeone.ai/" target="_blank"><img src="/img/index/tencent_edgeone_48x48.png" alt="Tencent EdgeOne" style="width:18px; height:auto; margin-bottom:-3px"> Tencent EdgeOne</a>' +
21    ' | <a href="https://v6.51.la/land/3FcHt9RWSQ8XvN5u" target="_blank"><img src="/img/index/51la.png" alt="51la 网站统计" style="width:auto; height:12px; margin-bottom:-1px"><br></a>' +
22    // ' | <a href="https://v6.51.la/land/3FcHt9RWSQ8XvN5u" target="_blank"><img src="https://sdk.51.la/icon/1-1.png" alt="51la 网站统计" style="width:auto; height:12px; margin-bottom:-1px"></a>' +
23    
24
25    //虫洞
26    ' <a href="https://www.foreverblog.cn/go.html" target="_blank" > <img src="/img/index/wormhole_3.gif" alt="" style="width:auto;height:23px;"> </a>' +
27    
28    ' | <a href="https://www.travellings.cn/go-by-clouds.html" target="_blank" > <img src="/img/index/traveling.gif" alt="" style="width:auto;height:23px;"> </a>' +
29
30    //十年之约
31    ' | <a href="https://www.foreverblog.cn/" target="_blank" > <img src="/img/index/logo_en_default.png" alt="" style="width:auto;height:18px;"> </a>' +
32 
33    ' | <a href="/friends/" target="_blank" >😘友链 </a>' +
34    ' | <a href="/daohang/" target="_blank" >🏀网站导航 </a>' +
35
36
37    '<br>' +
38    //诗词
39    // '初闻不知曲中意,再听已是曲中人' +
40    '<span style="font-size: 16px;">初闻不知曲中意,再听已是曲中人</span>' +
41
42    // 添加底部动物 banner
43    '<div id="footer-animal">' +
44    '    <div class="animal-wall"></div>' +
45    '    <img class="animal entered loaded" src="/img/index/hao.png" alt="动物" data-ll-status="loaded">' +
46    '</div>' +
47    // 添加底部动物 banner 样式
48    '<style>' +
49    '    #footer-animal {' +
50    '    position: relative;' +
51    '    width: 100%' +
52    '}' +
53    // '    #footer-animal .animal-wall {' +
54    // '    position: absolute;' +
55    // '    bottom: 0;' +
56    // '    width: 100%;' +
57    // '    height: 36px;' +
58    // '    max-width: none;' +
59    // '    background: #bcb0a4 url(/img/index/haoback.png) repeat center;' +
60    // '    background-size: auto 100%;' +
61    // '    box-shadow: 0 4px 7px rgba(0,0,0,.15)' +
62    // '}' +
63    // '    @media screen and (max-width: 1023px) {' +
64    // '    #footer-animal .animal-wall {' +
65    // '    height:4vw;' +
66    // '}' +
67    // '}' +
68    '    #footer-animal img.animal {' +
69    '    position: relative;' +
70    '    max-width: min(974px,100vw);' +
71    '    margin: 0 auto;' +
72    '    display: block' +
73    '}' +
74    '    #footer-banner {' +
75    '    margin-top: 0 !important' +
76    '}' +
77    '</style>'
78}

(3)运行测试效果。

推荐使用微信支付
微信支付二维码
推荐使用支付宝
支付宝二维码
最新文章

文档导航