Charles7c/vitepress-theme-blog-charles7c-s1
Archived
0
0
Fork 0
Code Issues 75 Pull Requests Actions Packages Projects Releases Wiki Activity

优化：初步优化全局代码样式

Browse Source
This commit is contained in:
Charles7c
2023-02-25 20:36:27 +08:00
parent a0358e1079
commit 57e1051a01
26 changed files with 433 additions and 453 deletions
Download Patch File Download Diff File Expand all files Collapse all files

205
docs/.vitepress/theme/components/Archive.vue
View File

@@ -79,142 +79,97 @@
</template>
<script lang="ts" setup>
import articleData from '../../../../article-data.json'
import { formatDate, getQueryParam, goToLink } from '../utils.ts'
import articleData from '../../../../article-data.json';
import { getQueryParam, goToLink } from '../utils.ts';
// 文章原始数据和归档数据
let $articleData
let archiveData
// 文章原始数据和归档数据
let $articleData;
let archiveData;
// 要筛选的分类、标签、年份
let $category
let $tag
let $year
// 要筛选的分类、标签、年份
let $category;
let $tag;
let $year;
initTimeline()
/**
* 初始化时间轴
*/
function initTimeline() {
$articleData = [];
archiveData = {};
/**
* 初始化时间轴
*/
function initTimeline() {
$articleData = []
archiveData = {}
// 如果URL路径有category或tag或year参数, 默认筛选出指定category或tag或year的文章数据
// 例如: /archives?category=Bug万象集
// 例如: /archives?tag=JVM
// 例如: /archives?year=2020
$category = getQueryParam('category')
$tag = getQueryParam('tag')
$year = getQueryParam('year')
if ($category && $category.trim() != '') {
for (let i = 0; i < articleData.length; i++) {
let article = articleData[i]
if (article.categories && article.categories.includes($category)) {
$articleData.push(article)
// 如果URL路径有category或tag或year参数, 默认筛选出指定category或tag或year的文章数据
// 例如: /archives?category=Bug万象集
// 例如: /archives?tag=JVM
// 例如: /archives?year=2020
$category = getQueryParam('category');
$tag = getQueryParam('tag');
$year = getQueryParam('year');
if ($category && $category.trim() != '') {
for (let i = 0; i < articleData.length; i++) {
let article = articleData[i];
if (article.categories && article.categories.includes($category)) {
$articleData.push(article);
}
}
}
} else if ($tag && $tag.trim() != '') {
for (let i = 0; i < articleData.length; i++) {
let article = articleData[i]
if (article.tags && article.tags.includes($tag)) {
$articleData.push(article)
} else if ($tag && $tag.trim() != '') {
for (let i = 0; i < articleData.length; i++) {
let article = articleData[i];
if (article.tags && article.tags.includes($tag)) {
$articleData.push(article);
}
}
}
} else if ($year && $year.trim() != '') {
for (let i = 0; i < articleData.length; i++) {
let article = articleData[i]
if (article.date && new Date(article.date).getFullYear() == $year) {
$articleData.push(article)
} else if ($year && $year.trim() != '') {
for (let i = 0; i < articleData.length; i++) {
let article = articleData[i];
if (article.date && new Date(article.date).getFullYear() == $year) {
$articleData.push(article);
}
}
} else {
$articleData.push(...articleData);
}
} else {
$articleData.push(...articleData)
// 文章数据归档处理
// 1.对文章数据进行降序排序
$articleData.sort((a, b) => b.date.localeCompare(a.date));
// 2.按年、月进行归档
for (let i = 0; i < $articleData.length; i++) {
const article = $articleData[i];
let year = (new Date(article.date).getFullYear()) + '年';
let month = (new Date(article.date).getMonth() + 1) + '月';
if (!archiveData[year]) {
archiveData[year] = {};
}
if (!(archiveData[year][month])) {
archiveData[year][month] = [];
}
archiveData[year][month].push(article);
}
}
initTimeline();
/**
* 获取生肖图标
*
* @param year 年份
*/
function getChineseZodiac(year) {
const arr = ['monkey', 'rooster', 'dog', 'pig', 'rat', 'ox', 'tiger', 'rabbit', 'dragon', 'snake', 'horse', 'goat'];
return arr[year % 12];
}
// 文章数据归档处理
// 1.对文章数据进行降序排序
$articleData.sort((a, b) => b.date.localeCompare(a.date))
// 2.按年、月进行归档
for (let i = 0; i < $articleData.length; i++) {
const article = $articleData[i]
let year = (new Date(article.date).getFullYear()) + '年'
let month = (new Date(article.date).getMonth() + 1) + '月'
if (!archiveData[year]) {
archiveData[year] = {}
}
if (!(archiveData[year][month])) {
archiveData[year][month] = []
}
archiveData[year][month].push(article)
}
}
/**
* 获取生肖
*/
function getChineseZodiac(year) {
switch(year % 12){
case 0:
return 'monkey'
case 1:
return 'rooster'
case 2:
return 'dog'
case 3:
return 'pig'
case 4:
return 'rat'
case 5:
return 'ox'
case 6:
return 'tiger'
case 7:
return 'rabbit'
case 8:
return 'dragon'
case 9:
return 'snake'
case 10:
return 'horse'
case 11:
return 'goat'
/**
* 获取生肖名称
*
* @param year 年份
*/
function getChineseZodiacAlias(year) {
const arr = ['猴年', '鸡年', '狗年', '猪年', '鼠年', '牛年', '虎年', '兔年', '龙年', '蛇年', '马年', '羊年'];
return arr[year % 12];
}
}
/**
* 获取生肖名称
*/
function getChineseZodiacAlias(year) {
switch(year % 12){
case 0:
return '猴年'
case 1:
return '鸡年'
case 2:
return '狗年'
case 3:
return '猪年'
case 4:
return '鼠年'
case 5:
return '牛年'
case 6:
return '虎年'
case 7:
return '兔年'
case 8:
return '龙年'
case 9:
return '蛇年'
case 10:
return '马年'
case 11:
return '羊年'
}
}
</script>
<style scoped>

80
docs/.vitepress/theme/components/ArticleMetadata.vue
View File

@@ -68,49 +68,49 @@
</template>
<script lang="ts" setup>
import { reactive, toRefs, onMounted } from 'vue'
import { useData } from 'vitepress'
import md5 from 'blueimp-md5'
import dayjs from 'dayjs'
import 'dayjs/locale/zh-cn'
import relativeTime from 'dayjs/plugin/relativeTime'
import { goToLink } from '../utils.ts'
import { reactive, toRefs, onMounted } from 'vue';
import { useData } from 'vitepress';
import md5 from 'blueimp-md5';
import dayjs from 'dayjs';
import 'dayjs/locale/zh-cn';
import relativeTime from 'dayjs/plugin/relativeTime';
import { goToLink } from '../utils.ts';
dayjs.extend(relativeTime)
dayjs.locale('zh-cn')
dayjs.extend(relativeTime);
dayjs.locale('zh-cn');
// 定义文章属性
const props = defineProps({
article: Object,
showCategory: {
type: Boolean,
default: true
// 定义文章属性
const props = defineProps({
article: Object,
showCategory: {
type: Boolean,
default: true,
},
});
// 初始化文章元数据信息
const { theme, page } = useData();
const data = reactive({
isOriginal: props.article?.isOriginal ?? true,
author: props.article?.author ?? theme.value.articleMetadataConfig.author,
authorLink: props.article?.authorLink ?? theme.value.articleMetadataConfig.authorLink,
showViewCount: theme.value.articleMetadataConfig?.showViewCount ?? false,
viewCount: 0,
date: new Date(props.article.date),
categories: props.article?.categories ?? [],
tags: props.article?.tags ?? [],
showCategory: props.showCategory
});
const { isOriginal, author, authorLink, showViewCount, viewCount, date, toDate, categories, tags, showCategory } = toRefs(data);
if (data.showViewCount) {
// 记录并获取文章阅读数（使用文章标题 + 发布时间生成 MD5 值，作为文章的唯一标识）
onMounted(() => {
$api.getArticleViewCount(md5(props.article.title + props.article.date), location.href, function(viewCountData) {
data.viewCount = viewCountData;
});
});
}
})
// 初始化文章元数据信息
const { theme, page } = useData()
const data = reactive({
isOriginal: props.article?.isOriginal ?? true,
author: props.article?.author ?? theme.value.articleMetadataConfig.author,
authorLink: props.article?.authorLink ?? theme.value.articleMetadataConfig.authorLink,
showViewCount: theme.value.articleMetadataConfig?.showViewCount ?? false,
viewCount: 0,
date: new Date(props.article.date),
categories: props.article?.categories ?? [],
tags: props.article?.tags ?? [],
showCategory: props.showCategory
})
const { isOriginal, author, authorLink, showViewCount, viewCount, date, toDate, categories, tags, showCategory } = toRefs(data)
if (data.showViewCount) {
// 记录并获取文章阅读数（使用文章标题 + 发布时间生成 MD5 值，作为文章的唯一标识）
onMounted(() => {
$api.getArticleViewCount(md5(props.article.title + props.article.date), location.href, function(viewCountData) {
data.viewCount = viewCountData
})
})
}
</script>
<style scoped>

100
docs/.vitepress/theme/components/Tag.vue
View File

@@ -58,63 +58,63 @@
</template>
<script lang="ts" setup>
import { computed, ref, onMounted } from 'vue'
import md5 from 'blueimp-md5'
import articleData from '../../../../article-data.json'
import { formatDate, getQueryParam } from '../utils.ts'
import { computed, ref } from 'vue';
import md5 from 'blueimp-md5';
import articleData from '../../../../article-data.json';
import { getQueryParam } from '../utils.ts';
const tags = computed(() => initTags(articleData))
/**
* 初始化标签数据
* {tagTitle1: [article1, article2, ...}
*/
function initTags(articleData) {
const tags: any = {}
for (let i = 0; i < articleData.length; i++) {
const article = articleData[i]
const articleTags = article.tags
if (Array.isArray(articleTags)) {
articleTags.forEach((articleTag) => {
if (!tags[articleTag]) {
tags[articleTag] = []
}
tags[articleTag].push(article)
// 文章按发布时间降序排序
tags[articleTag].sort((a, b) => b.date.localeCompare(a.date))
})
const tags = computed(() => initTags(articleData));
/**
* 初始化标签数据
* {tagTitle1: [article1, article2, ...}
*/
function initTags(articleData) {
const tags: any = {};
for (let i = 0; i < articleData.length; i++) {
const article = articleData[i];
const articleTags = article.tags;
if (Array.isArray(articleTags)) {
articleTags.forEach((articleTag) => {
if (!tags[articleTag]) {
tags[articleTag] = [];
}
tags[articleTag].push(article);
// 文章按发布时间降序排序
tags[articleTag].sort((a, b) => b.date.localeCompare(a.date));
});
}
}
return tags;
}
// 点击指定Tag后进行选中
let selectTag = ref('');
const toggleTag = (tagTitle: string) => {
if (selectTag.value && selectTag.value == tagTitle) {
selectTag.value = null;
} else {
selectTag.value = tagTitle;
}
}
return tags
}
// 点击指定Tag后进行选中
let selectTag = ref('')
const toggleTag = (tagTitle: string) => {
if (selectTag.value && selectTag.value == tagTitle) {
selectTag.value = null
} else {
selectTag.value = tagTitle
// 如果URL路径有tag参数, 默认选中指定Tag, 例如: /tags?tag=Git
let tag = getQueryParam('tag');
if (tag && tag.trim() != '') {
toggleTag(tag);
}
}
// 如果URL路径有tag参数, 默认选中指定Tag, 例如: /tags?tag=Git
let tag = getQueryParam('tag')
if (tag && tag.trim() != '') {
toggleTag(tag)
}
const dataList = computed(() => initWordCloud(tags))
/**
* 初始化词云数据
* [{"name": xx, "value": xx}]
*/
function initWordCloud(tags) {
const dataList = []
for (let tag in tags.value) {
dataList.push({"name": tag, "value": tags.value[tag].length})
const dataList = computed(() => initWordCloud(tags));
/**
* 初始化词云数据
* [{"name": xx, "value": xx}]
*/
function initWordCloud(tags) {
const dataList = [];
for (let tag in tags.value) {
dataList.push({"name": tag, "value": tags.value[tag].length});
}
return dataList;
}
return dataList
}
</script>
<style scoped>

135
docs/.vitepress/theme/components/layout/Comment.vue
View File

@@ -3,79 +3,78 @@
</template>
<script lang="ts" setup>
import { reactive, toRefs, onMounted } from 'vue'
import { useData } from 'vitepress'
import md5 from 'blueimp-md5'
import $ from 'jquery'
import { Message } from '@arco-design/web-vue'
import '@arco-design/web-vue/es/message/style/css.js'
import Gitalk from 'gitalk'
import '../../styles/components/gitalk.css'
import { reactive, toRefs, onMounted } from 'vue';
import { useData } from 'vitepress';
import md5 from 'blueimp-md5';
import $ from 'jquery';
import { Message } from '@arco-design/web-vue';
import '@arco-design/web-vue/es/message/style/css.js';
import Gitalk from 'gitalk';
import '../../styles/components/gitalk.css';
// 定义属性
const props = defineProps({
commentConfig: Object
})
// 定义属性
const props = defineProps({
commentConfig: Object,
});
const data = reactive({
type: props.commentConfig?.type ?? 'gitalk'
})
const { type } = toRefs(data)
// 初始化评论组件配置
const { page } = useData()
let gitalk
if (type.value && type.value == 'gitalk') {
gitalk = new Gitalk({
clientID: '1de126ce1fbdbe049709',
clientSecret: '035fe49874a43e5cefc28a99b7e40b1925319c62',
repo: 'charles7c.github.io',
owner: 'Charles7c',
admin: ['Charles7c'],
id: md5(page.value.relativePath),
language: 'zh-CN',
distractionFreeMode: false,
// 默认: https://cors-anywhere.azm.workers.dev/https://github.com/login/oauth/access_token
proxy: 'https://vercel.charles7c.top/github_access_token'
const data = reactive({
type: props.commentConfig?.type ?? 'gitalk',
})
}
const { type } = toRefs(data);
// 渲染评论组件
onMounted(() => {
// 初始化评论组件配置
const { page } = useData();
let gitalk;
if (type.value && type.value == 'gitalk') {
gitalk.render('comment-container')
// 如果点赞，先判断有没有登录
let $gc = $('#comment-container');
$gc.on('click', '.gt-comment-like', function () {
if (!window.localStorage.getItem('GT_ACCESS_TOKEN')) {
Message.warning({
content:'点赞前，请您先进行登录',
closable: true
})
return false
}
return true
})
// 提交评论后输入框高度没有重置bug
$gc.on('click', '.gt-header-controls .gt-btn-public', function () {
let $gt = $('.gt-header-textarea')
$gt.css('height', '72px')
})
// 点击预览时，隐藏评论按钮
$gc.on('click', '.gt-header-controls .gt-btn-preview', function () {
let pl = $('.gt-header-controls .gt-btn-public');
if (pl.hasClass('hide')) {
pl.removeClass('hide')
} else {
// 隐藏
pl.addClass('hide')
}
})
gitalk = new Gitalk({
clientID: '1de126ce1fbdbe049709',
clientSecret: '035fe49874a43e5cefc28a99b7e40b1925319c62',
repo: 'charles7c.github.io',
owner: 'Charles7c',
admin: ['Charles7c'],
id: md5(page.value.relativePath),
language: 'zh-CN',
distractionFreeMode: false,
// 默认: https://cors-anywhere.azm.workers.dev/https://github.com/login/oauth/access_token
proxy: 'https://vercel.charles7c.top/github_access_token',
});
}
})
// 渲染评论组件
onMounted(() => {
if (type.value && type.value == 'gitalk') {
gitalk.render('comment-container')
// 如果点赞，先判断有没有登录
let $gc = $('#comment-container');
$gc.on('click', '.gt-comment-like', function () {
if (!window.localStorage.getItem('GT_ACCESS_TOKEN')) {
Message.warning({
content: '点赞前，请您先进行登录',
closable: true
})
return false
}
return true
})
// 提交评论后输入框高度没有重置bug
$gc.on('click', '.gt-header-controls .gt-btn-public', function () {
let $gt = $('.gt-header-textarea')
$gt.css('height', '72px')
})
// 点击预览时，隐藏评论按钮
$gc.on('click', '.gt-header-controls .gt-btn-preview', function () {
let pl = $('.gt-header-controls .gt-btn-public');
if (pl.hasClass('hide')) {
pl.removeClass('hide')
} else {
// 隐藏
pl.addClass('hide')
}
})
}
})
</script>
<style scoped>
</style>
<style scoped></style>

24
docs/.vitepress/theme/components/layout/Copyright.vue
View File

@@ -43,18 +43,18 @@
</template>
<script lang="ts" setup>
import { reactive, toRefs } from 'vue'
import { useData } from 'vitepress'
const { theme, frontmatter } = useData()
import { reactive, toRefs } from 'vue';
import { useData } from 'vitepress';
const { theme, frontmatter } = useData();
const data = reactive({
isOriginal: frontmatter.value?.isOriginal ?? true,
author: frontmatter.value?.author ?? theme.value.articleMetadataConfig.author,
authorLink: frontmatter.value?.authorLink ?? theme.value.articleMetadataConfig.authorLink,
articleTitle: frontmatter.value?.articleTitle ?? frontmatter.value.title,
articleLink: frontmatter.value?.articleLink ?? decodeURI(window.location.href)
})
const { isOriginal, author, authorLink, articleTitle, articleLink } = toRefs(data)
const data = reactive({
isOriginal: frontmatter.value?.isOriginal ?? true,
author: frontmatter.value?.author ?? theme.value.articleMetadataConfig.author,
authorLink: frontmatter.value?.authorLink ?? theme.value.articleMetadataConfig.authorLink,
articleTitle: frontmatter.value?.articleTitle ?? frontmatter.value.title,
articleLink: frontmatter.value?.articleLink ?? decodeURI(window.location.href),
});
const { isOriginal, author, authorLink, articleTitle, articleLink } = toRefs(data);
</script>
<style scoped>
@@ -68,7 +68,7 @@ const { isOriginal, author, authorLink, articleTitle, articleLink } = toRefs(dat
}
.copyright .content {
padding: 13px 16px;
}

4
docs/.vitepress/theme/components/layout/Footer.vue
View File

@@ -23,8 +23,8 @@
</template>
<script lang="ts" setup>
import { useData } from 'vitepress'
const { theme } = useData()
import { useData } from 'vitepress';
const { theme } = useData();
</script>
<style scoped>