yuany3721/vuepress-theme-plume
1
0
Fork 0
forked from gitea-yuany3721/vuepress-theme-plume
Code Pull Requests Activity

perf(theme): optimize blog layout

Browse Source
This commit is contained in:
pengzhanbo 2024-09-12 02:22:58 +08:00
parent cd6edc89a5
commit bde059ac3a
10 changed files with 88 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
theme/src/client/components/Blog/VPBlog.vue
View File

@ -19,7 +19,7 @@ const { theme, page } = useData()
</script>
<template>
<div class="vp-blog" :class="{ 'home-blog': homeBlog }">
<div class="vp-blog" :class="{ 'home-blog': homeBlog }" vp-blog>
<slot name="blog-top" />
<div class="blog-container" :class="{ 'no-profile': !theme.profile }">
@ -98,7 +98,7 @@ const { theme, page } = useData()
.vp-blog {
position: relative;
min-height: calc(100vh - var(--vp-footer-height, 0px));
background-color: var(--vp-c-bg);
padding: calc(var(--vp-nav-height) + 32px) 16px 32px;
transition: background-color var(--t-color);
}
@ -110,24 +110,19 @@ const { theme, page } = useData()
.blog-container {
display: flex;
gap: 24px;
align-items: flex-start;
justify-content: flex-start;
width: 100%;
padding-top: var(--vp-nav-height);
margin: 0 auto;
}
.blog-container.no-profile {
display: block;
max-width: 784px;
padding-right: 24px;
}
@media (min-width: 768px) {
.vp-blog {
background-color: transparent;
}
.blog-container {
position: relative;
z-index: 2;
@ -137,10 +132,7 @@ const { theme, page } = useData()
@media (min-width: 960px) {
.vp-blog {
min-height: calc(100vh - var(--vp-nav-height) - var(--vp-footer-height, 0px));
}
.blog-container {
padding-top: 0;
padding: 32px 24px;
}
}

40
theme/src/client/components/Blog/VPBlogArchives.vue
View File

@ -32,17 +32,18 @@ const { archives } = useArchives()
<style scoped>
.vp-blog-archives {
flex: 1;
padding: 32px 24px;
margin: 0 auto;
}
.archives-title {
display: flex;
align-items: center;
margin-bottom: 40px;
padding: 16px;
margin: 0 -16px 40px;
font-size: 24px;
font-weight: 700;
color: var(--vp-c-brand-1);
background-color: var(--vp-c-bg);
transition: background-color var(--t-color);
}
.archives-title .icon {
@ -50,39 +51,34 @@ const { archives } = useArchives()
}
.archive {
padding-bottom: 1rem;
border-bottom: 1px dashed var(--vp-c-divider);
}
.archive:last-of-type {
border-bottom: none;
padding: 16px;
margin: 0 -16px 24px;
background-color: var(--vp-c-bg);
transition: background-color var(--t-color);
}
.archive-title {
margin-top: 2rem;
padding-bottom: 12px;
padding-left: 16px;
margin: 0 -16px;
font-size: 18px;
font-weight: 700;
border-bottom: solid 1px var(--vp-c-divider);
transition: border-bottom var(--t-color);
}
@media (min-width: 768px) {
.vp-blog-archives {
padding: 32px 0;
margin-left: 20px;
}
.archives-title {
display: none;
}
.archive {
padding: 20px;
margin-bottom: 24px;
background-color: var(--vp-c-bg);
border-bottom: none;
padding: 20px 24px;
margin: 0 0 24px;
border-radius: 8px;
box-shadow: var(--vp-shadow-1);
transition: var(--t-color);
transition-property: border-bottom, box-shadow, background-color;
transition-property: box-shadow, background-color;
}
.archive:hover {
@ -90,8 +86,8 @@ const { archives } = useArchives()
}
.archive-title {
padding-bottom: 10px;
margin-top: 0;
padding-left: 24px;
margin: 0 -24px;
border-bottom: solid 1px var(--vp-c-divider);
transition: border-bottom var(--t-color);
}

1
theme/src/client/components/Blog/VPBlogAside.vue
View File

@ -28,7 +28,6 @@ const { theme } = useData()
@media (min-width: 768px) {
.vp-blog-aside {
display: block;
margin: 2rem 1rem 1rem 1.5rem;
}
}
</style>

21
theme/src/client/components/Blog/VPBlogCategories.vue
View File

@ -28,15 +28,16 @@ const { categories } = useBlogCategory()
<style scoped>
.vp-blog-categories {
flex: 1;
padding: 32px 0;
margin: 0 auto;
padding: 16px;
margin: 0 -16px 32px;
background-color: var(--vp-c-bg);
transition: background-color var(--t-color), box-shadow var(--t-color);
}
@media (min-width: 768px) {
.vp-blog-categories {
padding: 20px 0;
margin: 32px auto 32px 20px;
padding: 20px 24px;
margin: 0 0 32px;
background-color: var(--vp-c-bg);
border-radius: 8px;
box-shadow: var(--vp-shadow-1);
@ -50,11 +51,13 @@ const { categories } = useBlogCategory()
.categories-title {
display: flex;
align-items: center;
padding: 0 20px;
padding: 0 16px 12px;
margin: 0 -16px;
font-size: 20px;
font-weight: 700;
color: var(--vp-c-text-1);
transition: color var(--t-color);
border-bottom: solid 1px var(--vp-c-divider);
transition: color var(--t-color), border-color var(--t-color);
}
.categories-title .icon {
@ -63,8 +66,8 @@ const { categories } = useBlogCategory()
@media (min-width: 768px) {
.categories-title {
padding-bottom: 20px;
margin-top: 0;
padding: 0 24px 12px;
margin: 0 -24px;
border-bottom: solid 1px var(--vp-c-divider);
transition: border-bottom var(--t-color);
}
@ -77,6 +80,6 @@ const { categories } = useBlogCategory()
}
.vp-blog-categories .content {
padding: 20px 20px 0;
padding: 20px 0 0;
}
</style>

7
theme/src/client/components/Blog/VPBlogNav.vue
View File

@ -55,13 +55,13 @@ const { hasBlogExtract, tags, archives, categories } = useBlogExtract()
.vp-blog-nav.local {
display: none;
padding-top: 2rem;
margin-left: 20px;
margin-bottom: 24px;
}
@media (min-width: 768px) {
.vp-blog-nav.local {
display: flex;
gap: 24px;
}
}
@ -100,8 +100,7 @@ const { hasBlogExtract, tags, archives, categories } = useBlogExtract()
.vp-blog-nav.local .nav-link {
flex: 1;
max-width: 200px;
margin-right: 20px;
max-width: 50%;
margin-bottom: 0;
}

32
theme/src/client/components/Blog/VPBlogTags.vue
View File

@ -46,14 +46,24 @@ const { tags, currentTag, postList, handleTagClick } = useTags()
<style scoped>
.vp-blog-tags {
flex: 1;
padding: 32px 24px;
margin: 0 auto;
}
.vp-blog-tags.has-list {
padding-bottom: 64px;
}
.tags-nav,
.tags-container {
padding: 20px 16px;
margin: 0 -16px;
background-color: var(--vp-c-bg);
transition: background-color var(--t-color);
}
.tags-container {
margin-top: 24px;
}
.tags-title {
display: flex;
align-items: center;
@ -73,6 +83,7 @@ const { tags, currentTag, postList, handleTagClick } = useTags()
.tags {
display: flex;
flex-wrap: wrap;
gap: 16px;
align-items: center;
justify-content: flex-start;
}
@ -81,7 +92,6 @@ const { tags, currentTag, postList, handleTagClick } = useTags()
display: flex;
align-items: center;
padding: 6px 10px 6px 12px;
margin: 6px;
font-size: 14px;
line-height: 1;
color: var(--vp-c-bg);
@ -94,8 +104,9 @@ const { tags, currentTag, postList, handleTagClick } = useTags()
}
.tag-title {
padding-bottom: 8px;
margin: 20px 12px -10px;
padding-bottom: 12px;
padding-left: 16px;
margin: 0 -16px;
font-size: 20px;
font-weight: 600;
border-bottom: 1px solid var(--vp-c-divider);
@ -124,14 +135,10 @@ const { tags, currentTag, postList, handleTagClick } = useTags()
}
@media (min-width: 768px) {
.vp-blog-tags {
padding: 32px 0;
margin-left: 20px;
}
.tags-nav,
.tags-container {
padding: 20px;
padding: 16px 24px;
margin: 0;
background-color: var(--vp-c-bg);
border-radius: 8px;
box-shadow: var(--vp-shadow-1);
@ -150,7 +157,8 @@ const { tags, currentTag, postList, handleTagClick } = useTags()
}
.tags-container .tag-title {
margin-top: 0;
padding-left: 24px;
margin: 0 -24px;
}
}

8
theme/src/client/components/Blog/VPPagination.vue
View File

@ -52,7 +52,10 @@ const { theme } = useData()
display: flex;
align-items: center;
justify-content: space-between;
padding: 32px 20px 24px;
padding: 16px;
margin: 0 -16px;
background-color: var(--vp-c-bg);
transition: background-color var(--t-color);
}
.btn {
@ -82,8 +85,7 @@ const { theme } = useData()
@media (min-width: 768px) {
.vp-blog-pagination {
padding: 20px;
margin-left: 20px;
margin: 0;
background-color: var(--vp-c-bg);
border-radius: 6px;
box-shadow: var(--vp-shadow-1);

28
theme/src/client/components/Blog/VPPostItem.vue
View File

@ -83,8 +83,13 @@ const createTime = computed(() =>
<style scoped>
.vp-blog-post-item {
padding-top: 1rem;
margin: 0 1.75rem 2rem;
display: flex;
flex-direction: column;
gap: 8px;
padding: 16px;
margin: 0 -16px;
background-color: var(--vp-c-bg);
transition: background-color var(--t-color);
}
.vp-blog-post-item:last-of-type {
@ -118,7 +123,6 @@ const createTime = computed(() =>
.vp-blog-post-item h3 {
display: flex;
align-items: center;
margin-bottom: 0.75rem;
font-size: 18px;
font-weight: 600;
color: var(--vp-c-text-1);
@ -133,11 +137,14 @@ const createTime = computed(() =>
color: var(--vp-c-text-2);
}
.vp-blog-post-item .excerpt {
margin-top: 12px;
}
@media (min-width: 768px) {
.vp-blog-post-item {
padding: 24px 20px;
margin: 0 0 24px 20px;
background-color: var(--vp-c-bg);
margin: 0;
border-radius: 8px;
box-shadow: var(--vp-shadow-1);
transition: var(--t-color);
@ -152,16 +159,6 @@ const createTime = computed(() =>
.vp-blog-post-item .post-meta {
margin-bottom: 0;
}
.vp-blog-post-item .excerpt {
margin-top: 24px;
}
}
@media (min-width: 1200px) {
.vp-blog-post-item {
margin: 0 0 24px;
}
}
.post-meta {
@ -169,7 +166,6 @@ const createTime = computed(() =>
flex-wrap: wrap;
align-items: center;
justify-content: flex-start;
margin-bottom: 0.5rem;
font-size: 14px;
font-weight: 400;
color: var(--vp-c-text-2);

12
theme/src/client/components/Blog/VPPostList.vue
View File

@ -48,9 +48,17 @@ const {
<style scoped>
.vp-blog-post-list {
display: flex;
flex: 1;
padding-top: 32px;
padding-bottom: 36px;
flex-direction: column;
gap: 16px;
margin: 0 auto;
}
@media (min-width: 419px) {
.vp-blog-post-list {
gap: 24px;
padding-bottom: 24px;
}
}
</style>

7
theme/src/client/components/Blog/VPShortPostList.vue
View File

@ -25,15 +25,16 @@ defineProps<{
<style scoped>
.vp-blog-short-post-list {
padding: 0 12px;
margin-top: 32px;
display: flex;
flex-direction: column;
gap: 16px;
margin-top: 24px;
}
.vp-blog-short-post-list li {
display: flex;
align-items: center;
justify-content: space-between;
margin: 14px 0;
color: var(--vp-c-text-1);
transition: color var(--t-color);
}