Skip to content

Commit 6e2a242

Browse files
SubilanSubilan
committed
add og image
1 parent 77261d3 commit 6e2a242

File tree

7 files changed

+9327
-17
lines changed

7 files changed

+9327
-17
lines changed

‎app.vue

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -14,14 +14,18 @@ const route = useRoute();
1414
1515
const sitename = getSiteName();
1616
17-
const titleWithPrefix = computed(() => `${sitename} - ${route.meta.title}`);
17+
const titleWithPrefix = computed(() => {
18+
if (route.params.postname) {
19+
return `${sitename} - ${getPostContent(route.params.postname).title}`
20+
}
21+
return `${sitename} - ${route.meta.title}`;
22+
});
1823
const titleWithSuffix = computed(() => {
1924
if (route.params.postname) {
2025
return `${getPostContent(route.params.postname).title} - ${sitename}`
2126
}
2227
return `${route.meta.title} - ${sitename}`;
2328
});
24-
const darkMode = usePreferredDark();
2529
2630
useHead({
2731
meta: [
@@ -51,7 +55,7 @@ onMounted(() => {
5155
useFavicon('/avatar.jpg', {
5256
rel: 'icon'
5357
})
54-
})
58+
});
5559
</script>
5660

5761
<style lang="scss">

‎components/OgImage/blog-post.vue

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
<script setup lang="ts">
2+
const props = defineProps({
3+
postTitle: {
4+
type: String,
5+
default: '测试标题'
6+
},
7+
date: {
8+
type: String
9+
},
10+
wordCount: {
11+
type: Number,
12+
default: 0
13+
}
14+
})
15+
16+
function estimateReadingTime(charCount: number, speed = 300, roundUp = true) {
17+
const minutes = charCount / speed;
18+
19+
if (roundUp) {
20+
return Math.ceil(minutes);
21+
} else {
22+
return Number(minutes.toFixed(2));
23+
}
24+
}
25+
</script>
26+
27+
<template>
28+
<div style="font-family: Literata, 'Noto Serif SC';"
29+
class="h-full w-full flex items-start justify-start bg-gray-50">
30+
<div class="flex items-start justify-start h-full">
31+
<div class="flex flex-col justify-between w-full h-full">
32+
<div class="flex flex-col items-start px-20 pt-10">
33+
<img src="/avatar.jpg" height="150px" width="150px" />
34+
<h1 class="text-[80px] font-black text-left">
35+
{{ postTitle }}
36+
</h1>
37+
<div class="flex flex-row items-center text-[40px]">
38+
<span v-if="date">发布于 {{ date }}</span>
39+
<span v-if="date && wordCount" class="px-4">·</span>
40+
<span v-if="wordCount">约 {{ estimateReadingTime(wordCount) }} 分钟读完</span>
41+
</div>
42+
</div>
43+
<p class="text-2xl pb-10 px-20 mb-0">
44+
<strong>Solitude Scroll</strong> / subilan.win
45+
</p>
46+
</div>
47+
</div>
48+
</div>
49+
</template>

‎error.vue

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
<template>
22
<div class="error-container">
33
<div class="inner card">
4-
<p class="title"><strong>维护界面: {{ error.statusCode }}</strong> — {{ error.message.split('Require stack')[0] }}</p>
4+
<p class="title"><strong>维护界面: {{ error.statusCode }}</strong> — {{ error.message.split('Require stack')[0]
5+
}}</p>
56
<p v-if="error.statusCode === 404">
67
此页面不存在，请检查 URL 拼写是否正确。
78
</p>
@@ -13,7 +14,9 @@
1314
href="mailto:[email protected]">[email protected]</a>。
1415
</p>
1516
<div class="actions right mobile-center">
16-
<button class="button" @click="handleError"><icon :path="mdiArrowLeft"/>回到主页</button>
17+
<button class="button" @click="handleError">
18+
<icon :path="mdiArrowLeft" />回到主页
19+
</button>
1720
</div>
1821
</div>
1922
</div>
@@ -46,7 +49,8 @@
4649
margin: 0 32px;
4750
}
4851
49-
a, .title {
52+
a,
53+
.title {
5054
color: var(--primary);
5155
}
5256
@@ -71,7 +75,7 @@
7175
7276
.actions {
7377
display: flex;
74-
78+
7579
&.mobile-center {
7680
@media (max-width: 768px) {
7781
justify-content: center !important;

‎nuxt.config.ts

Lines changed: 34 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ export default defineNuxtConfig({
55
devtools: { enabled: true },
66

77
runtimeConfig: {
8-
umamiEndpoint: 'https://analytics.subilan.win',
8+
umamiEndpoint: 'https://analytics.subilan.win',
99
umamiUsername: '',
1010
umamiPassword: ''
1111
},
@@ -23,7 +23,7 @@ export default defineNuxtConfig({
2323
name: 'SolitudeScroll'
2424
},
2525

26-
modules: ['@nuxtjs/sitemap', '@nuxt/image'],
26+
modules: ['@nuxtjs/sitemap', '@nuxt/image', 'nuxt-og-image'],
2727

2828
sitemap: {
2929
sources: ['/api/get-post-urls']
@@ -36,11 +36,36 @@ export default defineNuxtConfig({
3636
}
3737
},
3838

39-
app: {
40-
head: {
41-
htmlAttrs: {
42-
lang: 'zh'
43-
}
44-
}
45-
}
39+
app: {
40+
head: {
41+
htmlAttrs: {
42+
lang: 'zh'
43+
}
44+
}
45+
},
46+
47+
ogImage: {
48+
fonts: [
49+
{
50+
name: 'Noto Serif SC',
51+
weight: 700,
52+
path: '/fonts/noto-serif-sc/noto-serif-sc-v31-chinese-simplified_latin-700.ttf'
53+
},
54+
{
55+
name: 'Noto Serif SC',
56+
weight: 400,
57+
path: '/fonts/noto-serif-sc/noto-serif-sc-v31-chinese-simplified_latin-regular.ttf'
58+
},
59+
{
60+
name: 'Literata',
61+
weight: 400,
62+
path: '/fonts/literata/literata-v35-latin-regular.ttf'
63+
},
64+
{
65+
name: 'Literata',
66+
weight: 700,
67+
path: '/fonts/literata/literata-v35-latin-700.ttf'
68+
}
69+
]
70+
}
4671
});

‎package.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,8 @@
3131
"markdown-it-sup": "^2.0.0",
3232
"markdown-it-table-of-contents": "^0.9.0",
3333
"medium-zoom": "^1.1.0",
34-
"nuxt": "^3.13.0",
34+
"nuxt": "^3.16.2",
35+
"nuxt-og-image": "^5.1.2",
3536
"nzh": "^1.0.14",
3637
"prismjs": "^1.29.0",
3738
"react": "^19.0.0",

‎pages/posts/[postname].vue

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -137,6 +137,12 @@ definePageMeta({
137137
useSeoMeta({
138138
articleModifiedTime: post.date.replace(/\//g, '-')
139139
})
140+
141+
defineOgImageComponent('blog-post', {
142+
postTitle: post.title,
143+
date: post.date,
144+
wordCount: post.wordCount
145+
})
140146
</script>
141147

142148
<style lang="scss">

0 commit comments

Comments
 (0)