vdoing新需求😜

让vdoing更加丝滑

vdoing-新需求

【优先】博客首页大图相册api

2025年1月5日提出

需求：

能不能实现，我云端有个相册目录，然后博客首页轮播大图会随机从这个相册目录来获取一张图片作为背景图呢？

请问这个具体要怎么实现？

请给出具体的代码？

这样的好处就是，任何博客系统都可以直接调用我这个背景图库了，而不用再去单独修改网站后端图库了，非常省事儿。我要做的就是，闲暇之际，挑选好看的壁纸（摄影照片或其它照片）上传到这个相册就行。😉

解决方案1：

2025年1月4日提出

【优先】文档具有向下(回到文章底部)的小箭头

2025年1月5日提出

需求

如果文章篇幅过长，希望能有个回到文章底部的小箭头

【优先】分类最好按个数从多到少排序

【优先】标签最好按个数从多到少，颜色逐渐变红排序

【优先】如何把这个字体给换个颜色？

2024年12月25日提出。

默认这个颜色和背景图不是很搭配。

css

.home-wrapper .banner .banner-conent .feature a h2[data-v-7d2bb426] {
    font-weight: 500;
    font-size: 1.3rem;
    border-bottom: none;
    padding-bottom: 0;
    color: #03A89E;
}


.home-wrapper .banner .banner-conent .feature a p[data-v-7d2bb426] {
    opacity: .8;
    padding: 0 0.8rem;
    color: #03A89E;
}

【优先】出现在最上面的文章能不能是按最近更新时间排序的呢？

2025年1月8日提出。

当前默认是按创建时间排序的。

【优先】vdoing目录深度希望可以是无限级深度

2025年1月9日提出。

当前最大支持4级目录，但感觉不是很够用：。。。

使用下来，感觉docusaurus的目录使用更加优雅，它不管你多少级目录，会帮你直接渲染。😂

【优先】如何给标签页名称后面备注一些信息

2025年1月9日提出。

【优先】希望在个人头像下加一个小小公告栏

2025年1月16日提出。

vuepress有博客公告栏这个插件没

VuePress 本身并没有直接提供“博客公告栏”这样的插件，但你可以通过以下几种方式实现类似的功能：

说明：（2025年3月4日更新）

以下几种方法测试了，还是有问题；（有的没插件；有的自己不会修改哈哈哈；）
先搁置把；

一、使用 VuePress 内置功能

VuePress 支持在页面中插入自定义内容，你可以通过以下方式实现公告栏：

在 Markdown 文件中直接添加公告栏：在 README.md 或其他页面文件中，直接使用 Markdown 语法添加公告栏内容：
markdown
```
> **公告**：这是博客的公告栏内容，欢迎关注！
```
1

在主题中全局添加公告栏：如果你使用的是自定义主题，可以在 Layout.vue 或 Page.vue 中添加公告栏组件。例如：

vue

<template>
  <div class="announcement">
    <p>这是博客的公告栏内容，欢迎关注！</p>
  </div>
  <Content />
</template>
<style scoped>
.announcement {
  background-color: #f0f0f0;
  padding: 10px;
  border-radius: 4px;
  margin-bottom: 20px;
}
</style>

二、使用 VuePress 插件

虽然 VuePress 没有专门的“公告栏”插件，但你可以借助以下插件实现类似功能：

vuepress-plugin-container：这是一个用于在 Markdown 中添加自定义容器的插件，可以用来实现公告栏样式。

安装插件：
bash
```
npm install vuepress-plugin-container
```
1

在 config.js 中配置：

javascript

module.exports = {
  plugins: [
    [
      'container',
      {
        type: 'announcement',
        before: info => `<div class="announcement">${info}</div>`,
        after: '</div>',
      },
    ],
  ],
}

在 Markdown 中使用：

markdown

::: announcement
这是博客的公告栏内容，欢迎关注！
:::

vuepress-plugin-notification：这是一个用于显示通知的插件，可以用来实现公告栏功能。

安装插件：

bash

npm install vuepress-plugin-notification

在 config.js 中配置：

javascript

module.exports = {
  plugins: [
    [
      'notification',
      {
        message: '这是博客的公告栏内容，欢迎关注！',
        duration: 0, // 0 表示永久显示
        position: 'top', // 显示在页面顶部
      },
    ],
  ],
}

三、自定义插件

如果你需要更复杂的功能，可以自己编写一个 VuePress 插件：

在 .vuepress/plugins 目录下创建一个新文件，例如 announcement.js：

javascript

module.exports = (options, context) => ({
  name: 'vuepress-plugin-announcement',
  enhanceAppFiles: () => ({
    name: 'announcement',
    content: `
    export default ({ Vue }) => {
      Vue.mixin({
        mounted() {
          const announcement = document.createElement('div');
          announcement.className = 'announcement';
          announcement.innerHTML = '这是博客的公告栏内容，欢迎关注！';
          document.body.prepend(announcement);
        }
      });
    }
    `,
  }),
});

在 config.js 中启用插件：

javascript

module.exports = {
  plugins: [
    require('./.vuepress/plugins/announcement'),
  ],
};

四、总结

方法	特点	适用场景
直接添加 Markdown	简单易用，无需额外配置。	简单的公告栏需求。
使用主题全局添加	灵活，可以自定义样式和位置。	需要全局显示的公告栏。
使用 `container` 插件	支持 Markdown 语法，样式可定制。	需要复杂样式的公告栏。
使用 `notification` 插件	支持通知功能，可控制显示位置和时长。	需要动态显示的公告栏。
自定义插件	完全自定义，功能强大。	需要高度定制化的公告栏。
根据你的需求选择合适的方式。如果你有其他问题，欢迎随时提问！

【优先】如何更加精细地监控这个静态网站数据

2025年1月9日提出。

例如如下效果：

崔亮的博客：

希望可以显示tag数量，分类数量，评论数量。

【优先】docs目录下是否能只存在单独的md文件呢？

2025年1月8日提出

当前环境

官方docs目录下还存在一些其他目录，例如_posts,.vuepress等，能否实现docs目录下是否能只存在单独的md文件呢？

这样子的话，这个docs目录就可以被其他云同步盘来做同步了，仓库配置可以利用git来同步。

【优先】如何控制首页显示的文章数量

2025年1月9日提出。

【优先】如何实现点击logo图标就可以回到首页？

2025年2月17日1提出。

当前效果是在其它网页点击logo图标就可以回到首页，但是在首页的下部分位置点击后，是没法弹到最前面的。。。

PixPin_2025-02-22_07-18-16

【新特性】这个地球元素如何配置

2025年2月20日发现

原作者效果：

https://landhutu.top/

【新特性】【测试失败】网站底部运行时间及访问量显示

2025年2月21日测试

🍊大佬网站新特性

https://spiderapi.cn/

网站底部运行时间，访问量。

上面技术图标。

配置方法

🍊原作者配置

https://github.com/WuKongSecurity/SpiderAPI/blob/9b1346e08b22a281f5d468e4cfa54861a0cf2247/vdoing/components/Footer.vue#L24 https://github.com/WuKongSecurity/SpiderAPI/blob/9b1346e08b22a281f5d468e4cfa54861a0cf2247/docs/.vuepress/public/js/spiderapi.js#L37

🍊作者这个仓库是开源的了

仓库地址：https://github.com/WuKongSecurity/SpiderAPI

哇哦，本地编译后有效果的呢：（nice，接下来就看如何配置里面的优秀元素了😜）

🍊51la

https://v6.51.la/land/3FcHt9RWSQ8XvN5u

html

<script charset="UTF-8" id="LA_COLLECT" src="//sdk.51.la/js-sdk-pro.min.js"></script>
<script>LA.init({id:"3LKG5yjnnPj7TInZ",ck:"3LKG5yjnnPj7TInZ"})</script>

到这一步自己就搞不懂如何配置了。。。。😂

🍊问题：如何把这个js内容给配置到当前的ts主题里呢？？？😁

🍊gpt

bash

docs\.vuepress\public\js\spiderapi.js文件内容如下：
// 控制台打印信息
const consoleStr = function () {
  /*
           _____       _     __          ___          _
          / ___/____  (_)___/ /__  _____/   |  ____  (_)        爬虫爬得欢
          \__ \/ __ \/ / __  / _ \/ ___/ /| | / __ \/ /        监狱要坐穿
         ___/ / /_/ / / /_/ /  __/ /  / ___ |/ /_/ / /        数据玩得溜
        /____/ .___/_/\__,_/\___/_/  /_/  |_/ .___/_/        牢饭吃个够
            /_/                            /_/
  */
};
function makeConsoleStr(string) {
    let l = String(string)
    l = l.substring(l.indexOf("/*") + 3, l.lastIndexOf("*/"))
    return "%c " + l
}
console.log(makeConsoleStr(consoleStr), "color: #0084ff");
console.log("\n %c © BOB'S BLOG %c itbob.cn %c © SpiderApi %c spiderapi.cn %c © SpiderBox %c spiderbox.cn \n", "color: #fadfa3; background: #030307; padding:5px 0;", "background: #fadfa3; padding:5px 0;", "color: #ffffff; background: #0084ff; padding:5px 0;", "background: #fadfa3; padding:5px 0;", "color: #ffffff; background: #f1404b; padding:5px 0;", "background: #fadfa3; padding:5px 0;");


// 百度收录自动推送
(function(){
    let bp = document.createElement('script');
    let curProtocol = window.location.protocol.split(':')[0];
    if (curProtocol === 'https') {
        bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
    }
    else {
        bp.src = 'http://push.zhanzhang.baidu.com/push.js';
    }
    let s = document.getElementsByTagName("script")[0];
    s.parentNode.insertBefore(bp, s);
})();


//网站运行时长
function ShowRunTime(id) {
    let BootDate = new Date("2023/8/13 00:03:16");//设置网站运行时间，格式：年/月/日 时:分:秒
    let NowDate = new Date();
    let RunDateM = parseInt(NowDate - BootDate);
    let RunDays = Math.floor(RunDateM / (24 * 3600 * 1000));
    let RunHours = Math.floor(RunDateM % (24 * 3600 * 1000) / (3600 * 1000));
    let RunMinutes = Math.floor(RunDateM % (24 * 3600 * 1000) % (3600 * 1000) / (60 * 1000));
    let RunSeconds = Math.round(RunDateM % (24 * 3600 * 1000) % (3600 * 1000) % (60 * 1000) / 1000);
    document.getElementById(id).innerHTML = "小破站已运行了 "
        + "<font style='color:#FFA500;font-weight:bold'>" + RunDays + "</font>" + " 天 "
        + "<font style='color:#1DBF97;font-weight:bold'>" + RunHours + "</font>" + " 小时 "
        + "<font style='color:#8A2BE2;font-weight:bold'>" + RunMinutes + "</font>" + " 分 "
        + "<font style='color:#007EC6;font-weight:bold'>" + RunSeconds + "</font>" + " 秒 ";
}
setInterval("ShowRunTime('sitetime')", 1000);

// 51.la 网站统计
(function () {
    LA.init({id:"3FpCxw5JhIELmjz2",ck:"3FpCxw5JhIELmjz2"})
})();



vdoing\components\Footer.vue文件内容如下：
<template>
  <div class="footer">
    <div class="icons" v-if="social && social.icons">
      <a
        :href="item.link"
        :title="item.title"
        :class="['iconfont', item.iconClass]"
        v-for="(item, index) in social.icons"
        :key="index"
        target="_blank"
      ></a>
    </div>
    <!--Vdoing主题遵循MIT协议，完全开源且免费。如果您对主题的修改并不大，希望您保留主题的链接。-->
    <span>
      <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备19003281号-9</a>丨
      <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"> 鄂公网安备42280202422959</a>丨
      <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>丨
      <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>丨
      <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>
    </span>
    <br/>
    <br/>
    Copyright © 2023 - {{ new Date().getFullYear() }}<a href="https://wukongsec.com/" target="_blank"> WuKong Security.</a>丨
    <span ref="sitetime" id="sitetime">正在载入网站运行时间...</span>丨
    <!-- <template v-if="footer">
      | Copyright © {{ footer.createYear }}-{{ new Date().getFullYear() }}
      <span v-html="footer.copyrightInfo"></span>
    </template> -->
  </div>
</template>

<script>
export default {
  mounted() {
    const la51SpanElement = this.$refs.sitetime;
    if (la51SpanElement) {
      const la51scriptElement = document.createElement('script');
      la51scriptElement.id = 'LA-DATA-WIDGET';
      la51scriptElement.src = 'https://v6-widget.51.la/v6/3FpCxw5JhIELmjz2/quote.js?theme=#666666,#333333,#666666,#007BFF,#FFFFFF,#1690FF,13&f=12&display=0,0,0,1,0,1,0,1';
      // la51SpanElement.appendChild(la51scriptElement);
      la51SpanElement.insertAdjacentElement('afterend', la51scriptElement);
    }
  },
  computed: {
    social() {
      return this.$themeConfig.social
    },
    footer() {
      return this.$themeConfig.footer
    }
  }
}
</script>

<style lang='stylus'>
// $mobileSidebarWidth = $sidebarWidth * 0.82
.footer
  padding 5rem 1.5rem 2.5rem
  text-align center
  color #666
  box-sizing border-box
  font-size 0.85rem
  transition all 0.2s ease
  > span
    line-height 1.5rem
  .icons
    margin-bottom 12px
    .iconfont
      padding 0 10px
      font-size 1.3rem
  a
    color inherit
    &:hover
      color $accentColor
@media (min-width ($MQMobile + 1px))
  .sidebar-open .footer
    width auto
    padding-left: ($sidebarWidth + 1.5rem)
@media (min-width 1520px)
  .have-rightmenu .footer
    padding-right: ($rightMenuWidth + 1.5rem)
.no-sidebar .footer
  width auto
  padding-left 1.5rem
</style>


以上是vuepress vdoing的js版本配置，我现在的vuepress vdoing主题是ts版本的，请问该如何把上面的网站底部51la（网站运行时间及访问量）功能给迁移到自己ts版本的主题网站里呢？




但是我当前vdoing版本footer配置在 docs\.vuepress\common\footer.ts里，内容如下：
import { penName, footerTitle } from '../common/info'
interface Footer {
  createYear: number, // 博客创建年份
  copyrightInfo: string // 博客版权信息，支持 a 标签
}
export default <Footer> {
  // 页脚信息
  createYear: 2024, 
  copyrightInfo:
    '<a href="https://onedayxyy.cn/" target="_blank"> One <br></a>' +
    // '<a href="http://beian.miit.gov.cn/" target="_blank"> 陇ICP备2023002645号</a>' +
    // '<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>' +
    '<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>' +
    // ' | <a href="https://beian.mps.gov.cn/" target="_blank"> 甘公网安备62102702000211号</a>' +
    ' | <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>' +
    // ' | <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>' +
    ' | <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>' +
    // ' | <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>' +
    // ' | <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>' +
    ' | <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>' +
    ' | <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>' +
    // ' | <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>' +
    
    //十年之约
    '<a href="https://www.foreverblog.cn/" target="_blank" > <img src="/img/index/logo_en_default.png" alt="" style="width:auto;height:16px;"><br> </a>' +
    // '<br>' +
    
    //诗词
    '初闻不知曲中意，再听已是曲中人' +
     
    // 添加底部动物 banner
    '<div id="footer-animal">' +
    '    <div class="animal-wall"></div>' +
    '    <img class="animal entered loaded" src="/img/index/hao.png" alt="动物" data-ll-status="loaded">' +
    '</div>' +
    // 添加底部动物 banner 样式
    '<style>' +
    '    #footer-animal {' +
    '    position: relative;' +
    '    width: 100%' +
    '}' +
    // '    #footer-animal .animal-wall {' +
    // '    position: absolute;' +
    // '    bottom: 0;' +
    // '    width: 100%;' +
    // '    height: 36px;' +
    // '    max-width: none;' +
    // '    background: #bcb0a4 url(/img/index/haoback.png) repeat center;' +
    // '    background-size: auto 100%;' +
    // '    box-shadow: 0 4px 7px rgba(0,0,0,.15)' +
    // '}' +
    // '    @media screen and (max-width: 1023px) {' +
    // '    #footer-animal .animal-wall {' +
    // '    height:4vw;' +
    // '}' +
    // '}' +
    '    #footer-animal img.animal {' +
    '    position: relative;' +
    '    max-width: min(974px,100vw);' +
    '    margin: 0 auto;' +
    '    display: block' +
    '}' +
    '    #footer-banner {' +
    '    margin-top: 0 !important' +
    '}' +
    '</style>'


    
}


请问我该如何修改当前footer.ts内容进行上面的51la功能适配呢？

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227

测试失败：。。。。

🍊 作者代码仓库

希望自己的留言墙风格如下

2025年2月17日

风格2：手工风格

https://blog.grtsinry43.com/thinking

如何实现鼠标划到菜单栏时出现阴影效果

2025年1月9日提出。

例如：《最美博客》这种风格

PixPin_2025-01-09_08-30-21

如何实现登录首页出现每日推荐功能

2025年1月9日提出。

例如：《最美博客》这种风格

这个底部信息统计如何实现的？

https://doc.xugaoyi.com/

如何测试一个网站的性能？如何将我这个网站性能优化到极致？

如何定制docus(react)

能够基于当前docusaurus模板来制定一个新的模板，满足自己的所有需求。🤣

https

自签证书

cdn

阿里云cdn

多吉云cdn

nginx图床

图片

网络批量执行命令脚本

vdoing部署

vdoing指南

vdoing折腾

配置twikoo评论系统

vdoing文章

vdoing新需求😜 ​

vdoing-新需求 ​

【优先】博客首页大图相册api ​

【优先】文档具有向下(回到文章底部)的小箭头 ​

【优先】分类最好按个数从多到少排序 ​

【优先】标签最好按个数从多到少，颜色逐渐变红排序 ​

【优先】如何把这个字体给换个颜色？ ​

【优先】出现在最上面的文章能不能是按最近更新时间排序的呢？ ​

【优先】vdoing目录深度希望可以是无限级深度 ​

【优先】如何给标签页名称后面备注一些信息 ​

【优先】希望在个人头像下加一个小小公告栏 ​

【优先】如何更加精细地监控这个静态网站数据 ​

【优先】docs目录下是否能只存在单独的md文件呢？ ​

【优先】如何控制首页显示的文章数量 ​

【优先】如何实现点击logo图标就可以回到首页？ ​

【新特性】这个地球元素如何配置 ​

【新特性】【测试失败】网站底部运行时间及访问量显示 ​

希望自己的留言墙风格如下 ​

如何实现鼠标划到菜单栏时出现阴影效果 ​

如何实现登录首页出现每日推荐功能 ​

这个底部信息统计如何实现的？ ​

如何测试一个网站的性能？如何将我这个网站性能优化到极致？ ​

如何定制docus(react) ​

vdoing新需求😜

vdoing-新需求

【优先】博客首页大图相册api

【优先】文档具有向下(回到文章底部)的小箭头

【优先】分类最好按个数从多到少排序

【优先】标签最好按个数从多到少，颜色逐渐变红排序

【优先】如何把这个字体给换个颜色？

【优先】出现在最上面的文章能不能是按最近更新时间排序的呢？

【优先】vdoing目录深度希望可以是无限级深度

【优先】如何给标签页名称后面备注一些信息

【优先】希望在个人头像下加一个小小公告栏

【优先】如何更加精细地监控这个静态网站数据

【优先】docs目录下是否能只存在单独的md文件呢？

【优先】如何控制首页显示的文章数量

【优先】如何实现点击logo图标就可以回到首页？

【新特性】这个地球元素如何配置

【新特性】【测试失败】网站底部运行时间及访问量显示

希望自己的留言墙风格如下

如何实现鼠标划到菜单栏时出现阴影效果

如何实现登录首页出现每日推荐功能

这个底部信息统计如何实现的？

如何测试一个网站的性能？如何将我这个网站性能优化到极致？

如何定制docus(react)