MoreMore未完成
# 优化首页
# 站点信息 (opens new window)
跟着CV就行
除了里面的选择
readFile.js或者readFile.ts文件如果报错
Error: Dynamic require of "fs" is not supported要选择readFile.ts
如果你的数据显示异常，要部署到线上才会显示正常
如果你做完评论区没了，可能是你的插件被覆盖了，需要把两个插件写在一起
["Twikoo", "PageInfo"]（别问我是怎么知道的，这是来自CV工程师的经验）[ { name: 'custom-plugins', globalUIComponents: ["Twikoo", "PageInfo"] // 2.x 版本 globalUIComponents 改名为 clientAppRootComponentFiles } ],
WebInfo.vue
<template>
<!-- Young Kbt -->
<div class="web-info card-box">
<div class="webinfo-title">
<i class="iconfont icon-award" style="font-size: 0.875rem; font-weight: 900; width: 1.25em"></i>
<span>站点信息</span>
</div>
<div class="webinfo-item">
<div class="webinfo-item-title">文章数目：</div>
<div class="webinfo-content">{{ mdFileCount }} 篇</div>
</div>
<div class="webinfo-item">
<div class="webinfo-item-title">已运行时间：</div>
<div class="webinfo-content">
{{ createToNowDay != 0 ? createToNowDay + " 天" : "不到一天" }}
</div>
</div>
<div class="webinfo-item">
<div class="webinfo-item-title">本站总字数：</div>
<div class="webinfo-content">{{ totalWords }} 字</div>
</div>
<div class="webinfo-item">
<div class="webinfo-item-title">最后活动时间：</div>
<div class="webinfo-content">
{{ lastActiveDate == "刚刚" ? "刚刚" : lastActiveDate + "前" }}
</div>
</div>
<div v-if="indexView" class="webinfo-item">
<div class="webinfo-item-title">本站访问人次：</div>
<div class="webinfo-content">
<!-- <span id="busuanzi_value_site_pv" class="web-site-pv"><i title="正在获取..."
class="loading iconfont icon-loading"></i>
</span> -->
<span id="busuanzi_site_pv" class="web-site-pv"><i title="正在获取..."
class="loading iconfont icon-loading"></i>
</span>
次
</div>
</div>
<div v-if="indexView" class="webinfo-item">
<div class="webinfo-item-title">本站访客人数：</div>
<div class="webinfo-content busuanzi">
<!-- <span id="busuanzi_value_site_uv" class="web-site-uv"><i title="正在获取..."
class="loading iconfont icon-loading"></i>
</span> -->
<span id="busuanzi_site_uv" class="web-site-uv"><i title="正在获取..."
class="loading iconfont icon-loading"></i>
</span>
人
</div>
</div>
</div>
</template>
<script>
import { dayDiff, timeDiff, lastUpdatePosts } from "../webSiteInfo/utils";
import fetch from "../webSiteInfo/busuanzi"; // 统计量
export default {
data() {
return {
// Young Kbt
mdFileCount: 0, // markdown 文档总数
createToNowDay: 0, // 博客创建时间距今多少天
lastActiveDate: "", // 最后活动时间
totalWords: 0, // 本站总字数
indexView: true, // 开启访问量和排名统计
};
},
computed: {
$lastUpdatePosts() {
return lastUpdatePosts(this.$filterPosts);
},
},
mounted() {
// Young Kbt
if (Object.keys(this.$themeConfig.blogInfo).length > 0) {
const {
blogCreate,
mdFileCountType,
totalWords,
moutedEvent,
eachFileWords,
indexIteration,
indexView,
} = this.$themeConfig.blogInfo;
this.createToNowDay = dayDiff(blogCreate);
if (mdFileCountType != "archives") {
this.mdFileCount = mdFileCountType.length;
} else {
this.mdFileCount = this.$filterPosts.length;
}
if (totalWords == "archives" && eachFileWords) {
let archivesWords = 0;
eachFileWords.forEach((itemFile) => {
if (itemFile.wordsCount < 1000) {
archivesWords += itemFile.wordsCount;
} else {
let wordsCount = itemFile.wordsCount.slice(
0,
itemFile.wordsCount.length - 1
);
archivesWords += wordsCount * 1000;
}
});
this.totalWords = Math.round(archivesWords / 100) / 10 + "k";
} else if (totalWords == "archives") {
this.totalWords = 0;
// console.log(
// "如果 totalWords = 'archives'，必须传入 eachFileWords，显然您并没有传入！"
// );
} else {
this.totalWords = totalWords;
}
// 最后一次活动时间
this.lastActiveDate = timeDiff(this.$lastUpdatePosts[0].lastUpdated);
this.mountedWebInfo(moutedEvent);
// 获取访问量和排名
this.indexView = indexView == undefined ? true : indexView;
if (this.indexView) {
this.getIndexViewCouter(indexIteration);
}
}
},
methods: {
/**
* 挂载站点信息模块
*/
mountedWebInfo(moutedEvent = ".tags-wrapper") {
let interval = setInterval(() => {
const tagsWrapper = document.querySelector(moutedEvent);
const webInfo = document.querySelector(".web-info");
if (tagsWrapper && webInfo) {
if (!this.isSiblilngNode(tagsWrapper, webInfo)) {
tagsWrapper.parentNode.insertBefore(
webInfo,
tagsWrapper.nextSibling
);
clearInterval(interval);
}
}
}, 200);
},
/**
* 挂载在兄弟元素后面，说明当前组件是 siblingNode 变量
*/
isSiblilngNode(element, siblingNode) {
if (element.siblingNode == siblingNode) {
return true;
} else {
return false;
}
},
/**
* 首页的统计量
*/
getIndexViewCouter(iterationTime = 3000) {
fetch();
var i = 0;
var defaultCouter = "9999";
// 如果只需要第一次获取数据（可能获取失败），可注释掉 setTimeout 内容，此内容是第一次获取失败后，重新获取访问量
// 可能会导致访问量再次 + 1 原因：取决于 setTimeout 的时间（需求调节），setTimeout 太快导致第一个获取的数据没返回，就第二次获取，导致结果返回 + 2 的数据
setTimeout(() => {
let indexUv = document.querySelector(".web-site-pv");
let indexPv = document.querySelector(".web-site-uv");
if (
indexPv &&
indexUv &&
indexPv.innerText == "" &&
indexUv.innerText == ""
) {
let interval = setInterval(() => {
// 再次判断原因：防止进入 setInterval 的瞬间，访问量获取成功
if (
indexPv &&
indexUv &&
indexPv.innerText == "" &&
indexUv.innerText == ""
) {
i += iterationTime;
if (i > iterationTime * 5) {
indexPv.innerText = defaultCouter;
indexUv.innerText = defaultCouter;
clearInterval(interval); // 5 次后无法获取，则取消获取
}
if (indexPv.innerText == "" && indexUv.innerText == "") {
// 手动获取访问量
fetch();
} else {
clearInterval(interval);
}
} else {
clearInterval(interval);
}
}, iterationTime);
// 绑定 beforeDestroy 生命钩子，清除定时器
this.$once("hook:beforeDestroy", () => {
clearInterval(interval);
interval = null;
});
}
}, iterationTime);
},
beforeMount() {
let webInfo = document.querySelector(".web-info");
webInfo && webInfo.parentNode.removeChild(webInfo);
},
},
};
</script>
<style scoped>
.web-info {
font-size: 0.875rem;
padding: 0.95rem;
}
.webinfo-title {
text-align: center;
color: #888;
font-weight: bold;
padding: 0 0 10px 0;
}
.webinfo-item {
padding: 8px 0 0;
margin: 0;
}
.webinfo-item-title {
display: inline-block;
}
.webinfo-content {
display: inline-block;
/* float: right; */
}
@keyframes turn {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.loading {
display: inline-block;
animation: turn 1s linear infinite;
-webkit-animation: turn 1s linear infinite;
}
</style>
PageInfo.vue
<template>
<div class="page-info">
<!-- 当前文章页字数 -->
<div class="book-words iconfont icon-book" style="float: left; margin-left: 20px; font-size: 0.8rem;">
<a href="javascript:;" style="margin-left: 3px; color: #888">{{ wordsCount }}</a>
</div>
<!-- 预计阅读时间 -->
<div class="reading-time iconfont icon-shijian" style="float: left; margin-left: 20px; font-size: 0.8rem;">
<a href="javascript:;" style="margin-left: 3px; color: #888">{{ readTimeCount }}</a>
</div>
<!-- 文章页访问量 -->
<div class="page-view iconfont icon-view" style="float: left; margin-left: 20px; font-size: 0.8rem;">
<a href="javascript:;" id="busuanzi_page_pv" class="view-data">
<i title="正在获取..." class="loading iconfont icon-loading"></i>
</a>
</div>
<!-- 本文总访客量 -->
<div class="page_total_view iconfont icon-tongji" style="float: left; margin-left: 20px; font-size: 0.8rem;">
<a href="javascript:;" id="busuanzi_page_uv" class="view-data">
<i title="正在获取..." class="loading iconfont icon-loading"></i>
</a>
</div>
</div>
</template>
<script>
import fetch from "../webSiteInfo/busuanzi";
export default {
data() {
return {
wordsCount: 0,
readTimeCount: 0,
mountedIntervalTime: 1000,
// showPageInfo: true,
moutedParentEvent: ".articleInfo-wrap > .articleInfo > .info"
};
},
mounted: function () {
this.$nextTick(function () {
if (this.$route.path != "/") {
this.initPageInfo();
this.isMounted(document.querySelector(".page-info"));
}
})
},
watch: {
$route(to, from) {
// 如果页面是非首页，# 号也会触发路由变化，这里要排除掉
if (to.path != "/" && to.path != from.path && this.$themeConfig.blogInfo) {
this.initPageInfo();
this.isMounted(document.querySelector(".page-info"));
}
},
},
methods: {
/**
* 初始化页面信息
*/
initPageInfo() {
if (this.$frontmatter.article === undefined || this.$frontmatter.article) {
// 排除掉 article 为 false 的文章
const { eachFileWords, pageView, pageIteration, readingTime } =
this.$themeConfig.blogInfo;
// 下面两个 if 可以调换位置，从而让文章的浏览量和字数交换位置
if (eachFileWords) {
try {
eachFileWords.forEach((itemFile) => {
if (itemFile.permalink === this.$frontmatter.permalink) {
// this.addPageWordsCount 和 if 可以调换位置，从而让文章的字数和预阅读时间交换位置
this.wordsCount = itemFile.wordsCount;
if (readingTime || readingTime === undefined) {
this.readTimeCount = itemFile.readingTime;
}
}
});
} catch (error) {
console.error("获取浏览量失败：", error);
}
}
if (pageView || pageView === undefined) {
this.addPageView();
this.addtotalPageView()
this.getPageViewCouter(pageIteration);
}
let page = document.querySelector(".page-info");
if (page) {
this.mountedView(page);
}
// else {
// console.error("初始化失败：", "站点信息不存在");
// }
return;
}
},
/**
* 文章页的访问量
*/
getPageViewCouter(iterationTime = 3000) {
fetch();
let i = 0;
var defaultCouter = "9999";
// 如果只需要第一次获取数据（可能获取失败），可注释掉 setTimeout 内容，此内容是第一次获取失败后，重新获取访问量
// 可能会导致访问量再次 + 1 原因：取决于 setTimeout 的时间（需求调节），setTimeout 太快导致第一个获取的数据没返回，就第二次获取，导致结果返回 + 2 的数据
setTimeout(() => {
let pageView = document.querySelector(".view-data");
if (pageView && pageView.innerText == "") {
let interval = setInterval(() => {
// 再次判断原因：防止进入 setInterval 的瞬间，访问量获取成功
if (pageView && pageView.innerText == "") {
i += iterationTime;
if (i > iterationTime * 5) {
pageView.innerText = defaultCouter;
clearInterval(interval); // 5 次后无法获取，则取消获取
}
if (pageView.innerText == "") {
// 手动获取访问量
fetch();
} else {
clearInterval(interval);
}
} else {
clearInterval(interval);
}
}, iterationTime);
// 绑定 beforeDestroy 生命钩子，清除定时器
this.$once("hook:beforeDestroy", () => {
clearInterval(interval);
interval = null;
});
}
}, iterationTime);
},
/**
* 浏览量
*/
addPageView() {
let pageView = document.querySelector(".page-view");
if (pageView) {
// 添加 loading 效果
let style = document.createElement("style");
style.innerHTML = `@keyframes turn {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.loading {
display: inline-block;
animation: turn 1s linear infinite;
-webkit-animation: turn 1s linear infinite;
}
`;
document.head.appendChild(style);
}
},
/**
* 本文总访客量
*/
addtotalPageView() {
let pageView = document.querySelector(".page_total_view");
if (pageView) {
// 添加 loading 效果
let style = document.createElement("style");
style.innerHTML = `@keyframes turn {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.loading {
display: inline-block;
animation: turn 1s linear infinite;
-webkit-animation: turn 1s linear infinite;
}`;
document.head.appendChild(style);
}
},
/**
* 挂载目标到页面上
*/
mountedView(template) {
let i = 0;
let parentElement = document.querySelector(this.moutedParentEvent);
if (parentElement) {
if (!this.isMountedView(template, parentElement)) {
parentElement.appendChild(template);
}
} else {
let interval = setInterval(() => {
let parentElement = document.querySelector(this.moutedParentEvent);
if (parentElement) {
if (!this.isMountedView(template, parentElement)) {
parentElement.appendChild(template);
clearInterval(interval);
}
} else if (i > 1 * 10) {
// 10 秒后清除
clearInterval(interval);
}
}, this.mountedIntervalTime);
// 绑定 beforeDestroy 生命钩子，清除定时器
this.$once("hook:beforeDestroy", () => {
clearInterval(interval);
interval = null;
});
}
},
//* 用于判断是否已经挂载到页面上 */
isMounted(template) {
let i = 0;
let interval = setInterval(() => {
let parentElement = document.querySelector(this.moutedParentEvent);
if (parentElement) {
if (!this.isMountedView(template, parentElement) && template) {
parentElement.appendChild(template);
clearInterval(interval);
}
} else if (i > 1 * 10) {
// 10 秒后清除
clearInterval(interval);
}
}, this.mountedIntervalTime);
// 绑定 beforeDestroy 生命钩子，清除定时器
this.$once("hook:beforeDestroy", () => {
clearInterval(interval);
interval = null;
});
},
/**
* 目标是否已经挂载在页面上
*/
isMountedView(element, parentElement) {
if (element) {
if (element.parentNode == parentElement) {
return true;
} else {
return false;
}
} else {
return false;
}
},
},
};
</script>
<style>
.view-data {
color: #999;
margin-left: 3px;
}
.page-info {
display: inline-block;
}
.page-hide{
display: none;
/* position: fixed;
top: 96px;
right: 450px;
background-color: red; */
}
</style>
ArticleInfo.vue
<template>
<div class="articleInfo-wrap">
<div class="articleInfo">
<!-- 面包屑 -->
<ul class="breadcrumbs" v-if="classify1 && classify1 !== '_posts'">
<li>
<router-link to="/" class="iconfont icon-home" title="首页" />
</li>
<li v-for="item in classifyList" :key="item">
<!-- 跳目录页 -->
<router-link v-if="cataloguePermalink" :to="getLink(item)">{{
item
}}</router-link>
<!-- 跳分类页 -->
<router-link
v-else-if="$themeConfig.category !== false"
:to="`/categories/?category=${encodeURIComponent(item)}`"
title="分类"
>{{ item }}</router-link
>
<!-- 没有跳转 -->
<span v-else>{{ item }}</span>
</li>
</ul>
<!-- 作者&日期 -->
<div class="info">
<div class="author iconfont icon-touxiang" title="作者" v-if="author">
<a
:href="author.href || author.link"
v-if="
author.href || (author.link && typeof author.link === 'string')
"
target="_blank"
class="beLink"
title="作者"
>{{ author.name }}</a
>
<a v-else href="javascript:;">{{ author.name || author }}</a>
</div>
<div class="date iconfont icon-riqi" title="创建时间" v-if="date">
<a href="javascript:;">{{ date }}</a>
</div>
<!-- 当前文章页字数 -->
<div class="book-words iconfont icon-book" style="float: left; margin-left: 20px; font-size: 0.8rem;" title="文章字数">
<a href="javascript:;" style="margin-left: 3px; color: #888">{{ wordsCount }}</a>
</div>
<!-- 预计阅读时间 -->
<div class="reading-time iconfont icon-shijian" style="float: left; margin-left: 20px; font-size: 0.8rem;" title="预计阅读时间">
<a href="javascript:;" style="margin-left: 3px; color: #888">{{ readTimeCount }}</a>
</div>
<!-- 文章页访问量 -->
<div class="page-view iconfont icon-view" style="float: left; margin-left: 20px; font-size: 0.8rem;" title="文章访问量">
<a href="javascript:;" id="busuanzi_page_pv" class="view-data">
<i title="正在获取..." class="loading iconfont icon-loading"></i>
</a>
</div>
<!-- 本文总访客量 -->
<div class="page_total_view iconfont icon-tongji" style="float: left; margin-left: 20px; font-size: 0.8rem;" title="本文总访客量">
<a href="javascript:;" id="busuanzi_page_uv" class="visitors-data">
<i title="正在获取..." class="loading iconfont icon-loading"></i>
</a>
</div>
<div
class="date iconfont icon-wenjian"
title="分类"
v-if="
$themeConfig.category !== false &&
!(classify1 && classify1 !== '_posts') &&
categories
"
>
<router-link
:to="`/categories/?category=${encodeURIComponent(item)}`"
v-for="(item, index) in categories"
:key="index"
>{{ item + ' ' }}</router-link
>
</div>
</div>
</div>
</div>
</template>
<script>
import fetch from '../util/busuanzi.js'
export default {
data() {
return {
date: '',
classify1: '',
classifyList: [],
cataloguePermalink: '',
author: null,
categories: [],
wordsCount: 0,
readTimeCount: 0,
mountedIntervalTime: 1000,
moutedParentEvent: ".articleInfo-wrap > .articleInfo > .info"
}
},
created() {
this.getPageInfo()
},
mounted() {
this.$nextTick(function () {
this.initPageInfo();
})
},
watch: {
'$route.path'() {
this.classifyList = []
this.getPageInfo()
this.initPageInfo()
}
},
methods: {
getPageInfo() {
const pageInfo = this.$page
const { relativePath } = pageInfo
const { sidebar } = this.$themeConfig
// 分类采用解析文件夹地址名称的方式 (即使关闭分类功能也可以正确跳转目录页)
const relativePathArr = relativePath.split('/')
// const classifyArr = relativePathArr[0].split('.')
relativePathArr.forEach((item, index) => {
const nameArr = item.split('.')
if (index !== relativePathArr.length - 1) {
if (nameArr === 1) {
this.classifyList.push(nameArr[0])
} else {
const firstDotIndex = item.indexOf('.');
this.classifyList.push(item.substring(firstDotIndex + 1) || '')
}
}
})
this.classify1 = this.classifyList[0]
const cataloguePermalink = sidebar && sidebar.catalogue ? sidebar.catalogue[this.classify1] : ''// 目录页永久链接
const author = this.$frontmatter.author || this.$themeConfig.author // 作者
let date = (pageInfo.frontmatter.date || '').split(' ')[0] // 文章创建时间
// 获取页面frontmatter的分类（碎片化文章使用）
const { categories } = this.$frontmatter
this.date = date
this.cataloguePermalink = cataloguePermalink
this.author = author
this.categories = categories
},
getLink(item) {
const { cataloguePermalink } = this
if (item === cataloguePermalink) {
return cataloguePermalink
}
return `${cataloguePermalink}${cataloguePermalink.charAt(cataloguePermalink.length - 1) === '/'
? ''
: '/'
}#${item}`
},
/**
* 初始化页面信息
*/
initPageInfo() {
if (this.$frontmatter.article === undefined || this.$frontmatter.article) {
// 排除掉 article 为 false 的文章
const { eachFileWords, pageView, pageIteration, readingTime } =
this.$themeConfig.blogInfo;
// 下面两个 if 可以调换位置，从而让文章的浏览量和字数交换位置
if (eachFileWords) {
try {
eachFileWords.forEach((itemFile) => {
if (itemFile.permalink === this.$frontmatter.permalink) {
// this.addPageWordsCount 和 if 可以调换位置，从而让文章的字数和预阅读时间交换位置
this.wordsCount = itemFile.wordsCount;
if (readingTime || readingTime === undefined) {
this.readTimeCount = itemFile.readingTime;
}
}
});
} catch (error) {
// console.error("获取浏览量失败：", error);
}
}
if (pageView || pageView === undefined) {
this.addPageView();
this.addtotalPageView()
this.getPageViewCouter(pageIteration);
}
return;
}
},
/**
* 文章页的访问量
*/
getPageViewCouter(iterationTime = 3000) {
fetch();
let i = 0;
var defaultCouter = "9999";
// 如果只需要第一次获取数据（可能获取失败），可注释掉 setTimeout 内容，此内容是第一次获取失败后，重新获取访问量
// 可能会导致访问量再次 + 1 原因：取决于 setTimeout 的时间（需求调节），setTimeout 太快导致第一个获取的数据没返回，就第二次获取，导致结果返回 + 2 的数据
setTimeout(() => {
let pageView = document.querySelector(".view-data");
if (pageView && pageView.innerText == "") {
let interval = setInterval(() => {
// 再次判断原因：防止进入 setInterval 的瞬间，访问量获取成功
if (pageView && pageView.innerText == "") {
i += iterationTime;
if (i > iterationTime * 5) {
pageView.innerText = defaultCouter;
clearInterval(interval); // 5 次后无法获取，则取消获取
}
if (pageView.innerText == "") {
// 手动获取访问量
fetch();
} else {
clearInterval(interval);
}
} else {
clearInterval(interval);
}
}, iterationTime);
// 绑定 beforeDestroy 生命钩子，清除定时器
this.$once("hook:beforeDestroy", () => {
clearInterval(interval);
interval = null;
});
}
}, iterationTime);
},
/**
* 浏览量
*/
addPageView() {
let pageView = document.querySelector(".page-view");
if (pageView) {
// 添加 loading 效果
let style = document.createElement("style");
style.innerHTML = `@keyframes turn {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.loading {
display: inline-block;
animation: turn 1s linear infinite;
-webkit-animation: turn 1s linear infinite;
}
`;
document.head.appendChild(style);
}
},
/**
* 本文总访客量
*/
addtotalPageView() {
let pageView = document.querySelector(".page_total_view");
if (pageView) {
// 添加 loading 效果
let style = document.createElement("style");
style.innerHTML = `@keyframes turn {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.loading {
display: inline-block;
animation: turn 1s linear infinite;
-webkit-animation: turn 1s linear infinite;
}`;
document.head.appendChild(style);
}
},
}
}
</script>
<style lang='stylus' scoped>
@require '../styles/wrapper.styl'
.theme-style-line
.articleInfo-wrap
.articleInfo
padding-top 0.5rem
.articleInfo-wrap
@extend $wrapper
position relative
z-index 1
color #888
.articleInfo
overflow hidden
font-size 0.92rem
.breadcrumbs
margin 0
padding 0
overflow hidden
display inline-block
line-height 2rem
@media (max-width 960px)
width 100%
li
list-style-type none
float left
padding-right 5px
&:after
content '/'
margin-left 5px
color #999
&:last-child
&:after
content ''
a
color #888
&:before
font-size 0.92rem
&:hover
color $accentColor
.icon-home
text-decoration none
.info
float right
line-height 32px
@media (max-width 960px)
float left
div
float left
margin-left 20px
font-size 0.8rem
@media (max-width 960px)
margin 0 20px 0 0
&:before
margin-right 3px
a
color #888
&:hover
text-decoration none
a.beLink
&:hover
color $accentColor
text-decoration underline
.view-data {
color: #999;
margin-left: 3px;
}
</style>
# 将pageInfo添加到源码中
vupress默认主题的基础上使用vdoing主题会有刷新页面文章页站点信息在页面上不显示的问题，可修改vdoing主题源码，然后用patch-package打补丁
https://liyao52033.github.io/pages/d18e21/#%E5%B0%86pageinfo%E6%B7%BB%E5%8A%A0%E5%88%B0%E6%BA%90%E7%A0%81%E4%B8%AD
在本地开发环境中：
安装
patch-package：npm install patch-package --save-dev生成补丁文件：
npx patch-package <package-name> #如 npx patch-package vuepress-theme-vdoing在
package.json中添加postinstall脚本：
"scripts": { "postinstall": "patch-package" }
- 更新 GitHub Actions 工作流
# ...
# 安装依赖（仅在缓存未命中时执行）
- name: Install dependencies
if: steps.cache-node-modules.outputs.cache-hit != 'true'
run: npm install
# 应用补丁文件
- name: Apply patches with patch-package
run: npx patch-package
# 构建 VuePress 项目
# ...
保留vuepress-theme-vdoing提交到git
node_modules/ !node_modules/vuepress-theme-vdoing/ docs/.vuepress/dist/ .temp/
# 新增访问量
每次看站点信息时，可以看到访问量增多，但是不知道到底增加了多少，所以我就修改了WebInfo和PageInfo中的代码，增加了显示新增访问量的功能，显示的方式为：在访问量后面显示，与你上次访问时网站的访问量相比增加了多少，
主要是新增了showCounterWithIncrement方法，并在
访问量元素加载后，将访问量（+新增访问量）覆盖上去，过一段时间后再显示回访问量- 由于代码执行得比网站快，（代码获取
访问量后，访问量对应的元素才加载出来），导致我们第一次直接获取访问量可能获取不到（你也可以将第一次尝试显示新增访问量的代码去掉
setTimeout(() => { let indexPv = document.querySelector(".web-site-pv"); let indexUv = document.querySelector(".web-site-uv"); if ( indexPv && indexUv && indexPv.innerText !== "" && indexUv.innerText !== "" ) { showCounterWithIncrement(indexPv, indexUv); return; } //... }//记得后面的}也要去掉，只是会等待3秒后才加载新增的访问量，PageInfo.vue的代码同理），所以我用setTimeout等待了1秒才获取
访问量。并把iterationTime从原来的3秒改为2秒，保证加起来与原来等待的时间不变- 由于代码执行得比网站快，（代码获取
修改WebInfo.vue的getIndexViewCouter
/**
* 首页的统计量
*/
getIndexViewCouter(iterationTime = 1500) {
fetch();
var i = 0;
var defaultCouter = "9999";
// 提取显示访问量和新增量的公共方法
const showCounterWithIncrement = (pvElement, uvElement) => {
// 读取 localStorage 中的上次访问量
const lastPv = localStorage.getItem("lastSitePv") || 0;
const lastUv = localStorage.getItem("lastSiteUv") || 0;
// 当前访问量
const currentPv = parseInt(pvElement.innerText) || 0;
const currentUv = parseInt(uvElement.innerText) || 0;
// 计算新增访问量
const newPv = Math.max(currentPv - parseInt(lastPv), 0);
const newUv = Math.max(currentUv - parseInt(lastUv), 0);
// console.log("testtest",lastPv,currentPv,
// newPv, newUv
// );
if(newPv != 0){
// 显示新增的访问量
pvElement.innerText = `${currentPv}（+${newPv}）`;
// 保存当前访问量到 localStorage
localStorage.setItem("lastSitePv", currentPv);
}
if(newUv != 0){
// 显示新增的访问量
uvElement.innerText = `${currentUv}（+${newUv}）`;
// 保存当前访问量到 localStorage
localStorage.setItem("lastSiteUv", currentUv);
}
// 设置定时器隐藏新增访问量
setTimeout(() => {
pvElement.innerText = currentPv; // 仅显示总访问量
uvElement.innerText = currentUv; // 仅显示总访问量
}, 5000); // 5秒后隐藏新增访问量
};
setTimeout(() => {
let indexPv = document.querySelector(".web-site-pv");
let indexUv = document.querySelector(".web-site-uv");
if (
indexPv &&
indexUv &&
indexPv.innerText !== "" &&
indexUv.innerText !== ""
) {
showCounterWithIncrement(indexPv, indexUv);
return;
}
// 如果只需要第一次获取数据（可能获取失败），可注释掉 setTimeout 内容，此内容是第一次获取失败后，重新获取访问量
// 可能会导致访问量再次 + 1 原因：取决于 setTimeout 的时间（需求调节），setTimeout 太快导致第一个获取的数据没返回，就第二次获取，导致结果返回 + 2 的数据
setTimeout(() => {
let indexPv = document.querySelector(".web-site-pv");
let indexUv = document.querySelector(".web-site-uv");
if (
indexPv &&
indexUv &&
indexPv.innerText == "" &&
indexUv.innerText == ""
) {
let interval = setInterval(() => {
// 再次判断原因：防止进入 setInterval 的瞬间，访问量获取成功
if (
indexPv &&
indexUv &&
indexPv.innerText == "" &&
indexUv.innerText == ""
) {
i += iterationTime;
if (i > iterationTime * 5) {
indexPv.innerText = defaultCouter;
indexUv.innerText = defaultCouter;
clearInterval(interval); // 5 次后无法获取，则取消获取
}
if (indexPv.innerText == "" && indexUv.innerText == "") {
// 手动获取访问量
fetch();
} else {
clearInterval(interval);
showCounterWithIncrement(indexPv, indexUv);
}
} else {
clearInterval(interval);
showCounterWithIncrement(indexPv, indexUv);
}
}, iterationTime);
// 绑定 beforeDestroy 生命钩子，清除定时器
this.$once("hook:beforeDestroy", () => {
clearInterval(interval);
interval = null;
});
}else if(indexPv && indexUv){
showCounterWithIncrement(indexPv, indexUv);
}
}, iterationTime);
},1000)
},
修改ArticleInfo.vue中的getPageViewCouter
/**
* 文章页的访问量
*/
getPageViewCouter(iterationTime = 1500) {
fetch();
let i = 0;
var defaultCouter = "9999";
// 提取显示访问量和新增量的公共方法
const showPageViewWithIncrement = (element, visitorsElement) => {
// 获取当前文章的唯一标识符
const articleKey = this.$frontmatter.permalink || window.location.pathname;
// 读取上次访问量
const lastPageView = parseInt(localStorage.getItem(`lastPagePv_${articleKey}`)) || 0;
const lastPageVisitors = parseInt(localStorage.getItem(`lastPageUv_${articleKey}`)) || 0;
// 当前访问量
const currentPageView = parseInt(element.innerText) || 0;
const currentVisitors = parseInt(visitorsElement.innerText) || 0;
// 计算新增访问量（确保不为负数）
const newPageView = Math.max(currentPageView - lastPageView, 0);
const newPageVisitors = Math.max(currentVisitors - lastPageVisitors, 0);
if(newPageView != 0){
// 显示新增访问量
element.innerText = `${currentPageView}（+${newPageView}）`;
// 保存当前访问量
localStorage.setItem(`lastPagePv_${articleKey}`, currentPageView);
}
if(newPageVisitors != 0){
// 显示新增访问量
visitorsElement.innerText = `${currentVisitors}（+${newPageVisitors}）`;
// 保存当前访问量
localStorage.setItem(`lastPageUv_${articleKey}`, currentVisitors);
// 设置定时器隐藏新增访问量
}
const timer = setTimeout(() => {
element.innerText = currentPageView; // 仅显示总访问量
visitorsElement.innerText = currentVisitors; // 仅显示总访问量
}, 5000); // 5秒后隐藏新增访问量
this.$once('hook:beforeDestroy', () => clearTimeout(timer)); // 确保销毁时清理
};
setTimeout(() => {
let pageView = document.querySelector(".view-data");
let visitors = document.querySelector(".visitors-data");
if (pageView && pageView.innerText !== "" && visitors && visitors.innerText !== "") {
showPageViewWithIncrement(pageView, visitors);
return;
}
// 如果只需要第一次获取数据（可能获取失败），可注释掉 setTimeout 内容，此内容是第一次获取失败后，重新获取访问量
// 可能会导致访问量再次 + 1 原因：取决于 setTimeout 的时间（需求调节），setTimeout 太快导致第一个获取的数据没返回，就第二次获取，导致结果返回 + 2 的数据
setTimeout(() => {
let pageView = document.querySelector(".view-data");
let visitors = document.querySelector(".visitors-data");
if (pageView && pageView.innerText == "" && visitors && visitors.innerText == "") {
let interval = setInterval(() => {
// 再次判断原因：防止进入 setInterval 的瞬间，访问量获取成功
if (pageView && pageView.innerText == "" && visitors && visitors.innerText == "") {
i += iterationTime;
if (i > iterationTime * 5) {
pageView.innerText = defaultCouter;
visitors.innerText = defaultCouter;
clearInterval(interval); // 5 次后无法获取，则取消获取
}
if (pageView.innerText == "") {
// 手动获取访问量
fetch();
} else {
clearInterval(interval);
showPageViewWithIncrement(pageView, visitors);
}
} else {
clearInterval(interval);
showPageViewWithIncrement(pageView, visitors);
}
}, iterationTime);
// 绑定 beforeDestroy 生命钩子，清除定时器
this.$once("hook:beforeDestroy", () => {
clearInterval(interval);
interval = null;
});
}else if(pageView){
showPageViewWithIncrement(pageView, visitors);
}
}, iterationTime);
},1500)
},
如果想要在文章中不止显示访问人次，也想显示访问人数
<template></template>
<script>
import fetch from "../webSiteInfo/busuanzi";
export default {
mounted() {
// 首页不初始页面信息
if (this.$route.path != "/") {
this.initPageInfo();
}
},
watch: {
$route(to, from) {
// 如果页面是非首页，# 号也会触发路由变化，这里要排除掉
if (
to.path !== "/" &&
to.path !== from.path &&
this.$themeConfig.blogInfo
) {
this.initPageInfo();
}
},
},
methods: {
/**
* 初始化页面信息
*/
initPageInfo() {
if (this.$frontmatter.article == undefined || this.$frontmatter.article) {
// 排除掉 article 为 false 的文章
const { eachFileWords, pageView, pageIteration, readingTime } =
this.$themeConfig.blogInfo;
// 下面两个 if 可以调换位置，从而让文章的浏览量和字数交换位置
if (eachFileWords) {
try {
eachFileWords.forEach((itemFile) => {
if (itemFile.permalink == this.$frontmatter.permalink) {
// this.addPageWordsCount 和 if 可以调换位置，从而让文章的字数和预阅读时间交换位置
this.addPageWordsCount(itemFile.wordsCount);
if (readingTime || readingTime == undefined) {
this.addReadTimeCount(itemFile.readingTime);
}
throw new Error();
}
});
} catch (error) {}
}
if (pageView || pageView == undefined) {
this.addPageView();
this.getPageViewCouter(pageIteration);
this.addPageVisitors(); // 新增：调用浏览人数方法
}
return;
}
},
/**
* 文章页的访问量
*/
getPageViewCouter(iterationTime = 1500) {
fetch();
let i = 0;
var defaultCouter = "9999";
// 提取显示访问量和新增量的公共方法
const showPageViewWithIncrement = (PvElement, UvElement) => {
// 获取当前文章的唯一标识符
const articleKey = this.$frontmatter.permalink || window.location.pathname;
// 读取上次访问量
const lastPagePv = parseInt(localStorage.getItem(`lastPagePv_${articleKey}`)) || 0;
const lastPageUv = parseInt(localStorage.getItem(`lastPageUv_${articleKey}`)) || 0;
// 当前访问量
const currentPagePv = parseInt(PvElement.innerText) || 0;
const currentPageUv = parseInt(UvElement.innerText) || 0;
// 计算新增访问量（确保不为负数）
const newPagePv = Math.max(currentPagePv - lastPagePv, 0);
const newPageUv = Math.max(currentPageUv - lastPageUv, 0);
if(newPagePv != 0){
// 显示新增访问量
PvElement.innerText = `${currentPagePv}（+${newPagePv}）`;
// 保存当前访问量
localStorage.setItem(`lastPagePv_${articleKey}`, currentPagePv);
// 设置定时器隐藏新增访问量
setTimeout(() => {
PvElement.innerText = currentPagePv; // 仅显示总访问量
}, 5000); // 5秒后隐藏新增访问量
}
if(newPageUv != 0){
// 显示新增访问量
UvElement.innerText = `${currentPageUv}（+${newPageUv}）`;
// 保存当前访问量
localStorage.setItem(`lastPageUv_${articleKey}`, currentPageUv);
// 设置定时器隐藏新增访问量
setTimeout(() => {
UvElement.innerText = currentPageUv; // 仅显示总访问量
}, 5000); // 5秒后隐藏新增访问量
}
};
setTimeout(() => {
let pageView = document.querySelector(".view-data");
let visitors = document.querySelector(".visitors-data");
if (pageView && pageView.innerText !== "" && visitors && visitors.innerText !== "") {
showPageViewWithIncrement(pageView, visitors);
return;
}
// 如果只需要第一次获取数据（可能获取失败），可注释掉 setTimeout 内容，此内容是第一次获取失败后，重新获取访问量
// 可能会导致访问量再次 + 1 原因：取决于 setTimeout 的时间（需求调节），setTimeout 太快导致第一个获取的数据没返回，就第二次获取，导致结果返回 + 2 的数据
setTimeout(() => {
let pageView = document.querySelector(".view-data");
let visitors = document.querySelector(".visitors-data");
if (pageView && pageView.innerText == "" && visitors && visitors.innerText == "") {
let interval = setInterval(() => {
// 再次判断原因：防止进入 setInterval 的瞬间，访问量获取成功
if (pageView && pageView.innerText == "" && visitors && visitors.innerText == "") {
i += iterationTime;
if (i > iterationTime * 5) {
pageView.innerText = defaultCouter;
visitors.innerText = defaultCouter; // 默认值
clearInterval(interval); // 5 次后无法获取，则取消获取
}
if (pageView.innerText == "" && visitors.innerText == "") {
// 手动获取访问量
fetch();
} else {
clearInterval(interval);
showPageViewWithIncrement(pageView, visitors);
}
} else {
clearInterval(interval);
showPageViewWithIncrement(pageView, visitors);
}
}, iterationTime);
// 绑定 beforeDestroy 生命钩子，清除定时器
this.$once("hook:beforeDestroy", () => {
clearInterval(interval);
interval = null;
});
}else if(pageView){
showPageViewWithIncrement(pageView, visitors);
}
}, iterationTime);
},1200)
},
/**
* 添加浏览量元素
*/
addPageView() {
let pageView = document.querySelector(".page-view");
if (pageView) {
pageView.innerHTML =
'<a style="color: #888; margin-left: 3px" href="javascript:;" id="busuanzi_value_page_pv" class="view-data"><i title="正在获取..." class="loading iconfont icon-loading"></i></a>';
} else {
// 创建访问量的元素
let template = document.createElement("div");
template.title = "浏览人次";
template.className = "page-view iconfont icon-view";
template.style.float = "left";
template.style.marginLeft = "20px";
template.style.fontSize = "0.8rem";
template.innerHTML =
'<a style="color: #888; margin-left: 3px" href="javascript:;" id="busuanzi_value_page_pv" class="view-data"><i title="正在获取..." class="loading iconfont icon-loading"></i></a>';
// 添加 loading 效果
let style = document.createElement("style");
style.innerHTML = `@keyframes turn {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.loading {
display: inline-block;
animation: turn 1s linear infinite;
-webkit-animation: turn 1s linear infinite;
}`;
document.head.appendChild(style);
this.mountedView(template);
}
},
/**
* 添加浏览人数元素
*/
addPageVisitors() {
let visitors = document.querySelector(".page-visitors");
if (visitors) {
visitors.innerHTML = `<a style="color: #888; margin-left: 3px" href="javascript:;" id="busuanzi_value_page_uv" class="visitors-data"><i title="正在获取..." class="loading iconfont icon-loading"></i></a>`;
} else {
let template = document.createElement("div");
template.title = "浏览人数";
template.className = "page-visitors iconfont icon-visitors"; // 使用合适的图标类名
template.style.float = "left";
template.style.marginLeft = "20px";
template.style.fontSize = "0.8rem";
template.innerHTML =
'<a style="color: #888; margin-left: 3px" href="javascript:;" id="busuanzi_value_page_uv" class="visitors-data"><i title="正在获取..." class="loading iconfont icon-loading"></i></a>';
// 添加 loading 效果
let style = document.createElement("style");
style.innerHTML = `@keyframes turn {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.loading {
display: inline-block;
animation: turn 1s linear infinite;
-webkit-animation: turn 1s linear infinite;
}`;
document.head.appendChild(style);
this.mountedView(template);
}
}
},
/**
* 添加当前文章页的字数元素
*/
addPageWordsCount(wordsCount = 0) {
let words = document.querySelector(".book-words");
if (words) {
words.innerHTML = `<a href="javascript:;" style="margin-left: 3px; color: #888">${wordsCount}</a>`;
} else {
let template = document.createElement("div");
template.title = "文章字数";
template.className = "book-words iconfont icon-book";
template.style.float = "left";
template.style.marginLeft = "20px";
template.style.fontSize = "0.8rem";
template.innerHTML = `<a href="javascript:;" style="margin-left: 3px; color: #888">${wordsCount}</a>`;
this.mountedView(template);
}
},
/**
* 添加预计的阅读时间
*/
addReadTimeCount(readTimeCount = 0) {
let reading = document.querySelector(".reading-time");
if (reading) {
reading.innerHTML = `<a href="javascript:;" style="margin-left: 3px; color: #888">${readTimeCount}</a>`;
} else {
let template = document.createElement("div");
template.title = "预阅读时长";
template.className = "reading-time iconfont icon-shijian";
template.style.float = "left";
template.style.marginLeft = "20px";
template.style.fontSize = "0.8rem";
template.innerHTML = `<a href="javascript:;" style="margin-left: 3px; color: #888">${readTimeCount}</a>`;
this.mountedView(template);
}
},
/**
* 挂载目标到页面上
*/
mountedView(
template,
mountedIntervalTime = 100,
moutedParentEvent = ".articleInfo-wrap > .articleInfo > .info"
) {
let i = 0;
let parentElement = document.querySelector(moutedParentEvent);
if (parentElement) {
if (!this.isMountedView(template, parentElement)) {
parentElement.appendChild(template);
}
} else {
let interval = setInterval(() => {
parentElement = document.querySelector(moutedParentEvent);
if (parentElement) {
if (!this.isMountedView(template, parentElement)) {
parentElement.appendChild(template);
clearInterval(interval);
}
} else if (i > 1 * 10) {
// 10 秒后清除
clearInterval(interval);
}
}, mountedIntervalTime);
// 绑定 beforeDestroy 生命钩子，清除定时器
this.$once("hook:beforeDestroy", () => {
clearInterval(interval);
interval = null;
});
}
},
/**
* 如果元素存在，则删除
*/
removeElement(selector) {
var element = document.querySelector(selector);
element && element.parentNode.removeChild(element);
},
/**
* 目标是否已经挂载在页面上
*/
isMountedView(element, parentElement) {
if (element.parentNode == parentElement) {
return true;
} else {
return false;
}
},
},
// 防止重写编译时，导致页面信息重复出现问题
beforeMount() {
clearInterval(this.interval);
this.removeElement(".page-view");
this.removeElement(".page-visitors");
this.removeElement(".book-words");
this.removeElement(".reading-time");
},
};
</script>
<style></style>
# 首页大图
# 全局事件提示
TODO
# 目录优化 (opens new window)
我的目录路径图可以参考
.vuepress
├── common
| └──head.ts
├── components
| ├──PageInfo.vue
| ├──Twikoo.vue
| └──WebInfo.vue
├── config
| └──themeConfig.ts
├── dist //构建的项目
├── nav
| └──nav.ts
├── plugins
| └──plugins.ts
├── public
│ └── img
| └──logo.png
├── styles
├── webSiteInfo
| ├──busuanzi.js
| ├──readFiles.ts
| └──utils.js
└── config.js
修改后的文件里的路径修改就交给你们自己了
其中可以将logo放在public里，我放在public/img中，
因为
public目录是一个特殊的目录，用于存放静态资源。这些资源会被直接复制到构建输出的根目录下，可以通过根路径/访问。所以在head.ts、themeConfig.ts和index.dm中访问你的logo图片都可以使用路径 '/img/logo.png'
# 修改项目名称
我们创建了blog-img,blog-code，为了统一分类，我把仓库名cyanyep改为了blog-pages
还需要修改deploy.yml中的仓库名 external_repository: cyanyep/blog-pages #用户名/仓库名
# 打标签titleTag
title: MoreMore
date: 2025-03-31 19:13:22
permalink: /Blog/Moremore/
titleTag: 未完成
categories:
- Blog
tags:
-
# 隐私博客
# 待办事务（xm）
# 热门访问
根据文章的访问量生成热门访问推荐列表
。。。
未完待续
参考
上次更新: 2025/4/4 00:36:40