buyfakett/kazoottt-blog
1
0
Fork 0
mirror of https://github.com/KazooTTT/kazoottt-blog.git synced 2025-06-22 18:21:33 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: 修改宽度

Browse Source
This commit is contained in:
KazooTTT
2024-10-11 21:16:20 +08:00
parent 0e780b4200
commit a5e1e93c0d
3 changed files with 49 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
astro.config.mjs
View File

@ -11,34 +11,41 @@ import icon from 'astro-icon'
import vercel from '@astrojs/vercel/serverless' import vercel from '@astrojs/vercel/serverless'
import react from '@astrojs/react'; import react from '@astrojs/react'
// https://astro.build/config // https://astro.build/config
export default defineConfig({ export default defineConfig({
site: 'https://example.me', site: 'https://blog.kazoottt.top',
integrations: [expressiveCode(expressiveCodeOptions), tailwind({ integrations: [
applyBaseStyles: false expressiveCode(expressiveCodeOptions),
}), sitemap(), mdx(), icon(), react()], tailwind({
markdown: { applyBaseStyles: false
remarkPlugins: [remarkUnwrapImages, remarkReadingTime], }),
rehypePlugins: [ sitemap(),
[ mdx(),
rehypeExternalLinks, icon(),
{ react()
target: '_blank', ],
rel: ['nofollow, noopener, noreferrer'] markdown: {
} remarkPlugins: [remarkUnwrapImages, remarkReadingTime],
] rehypePlugins: [
], [
remarkRehype: { rehypeExternalLinks,
footnoteLabelProperties: { {
className: [''] target: '_blank',
} rel: ['nofollow, noopener, noreferrer']
} }
}, ]
prefetch: true, ],
output: 'server', remarkRehype: {
adapter: vercel({ footnoteLabelProperties: {
webAnalytics: { enabled: true } className: ['']
}) }
}) }
},
prefetch: true,
output: 'server',
adapter: vercel({
webAnalytics: { enabled: true }
})
})

2
src/layouts/BaseLayout.astro
View File

@ -25,7 +25,7 @@ const {
<body class='flex justify-center bg-background'> <body class='flex justify-center bg-background'>
<ThemeProvider /> <ThemeProvider />
<main <main
class='flex min-h-screen w-screen max-w-[60rem] flex-col items-center px-6 pb-10 pt-7 font-satoshi text-[0.92rem] leading-relaxed sm:px-10 lg:px-10' class='flex min-h-screen w-screen max-w-[70rem] flex-col items-center px-6 pb-10 pt-7 font-satoshi text-[0.92rem] leading-relaxed sm:px-10 lg:px-10'
> >
<Header /> <Header />
<slot /> <slot />

14
src/layouts/BlogPost.astro
View File

@ -4,7 +4,6 @@ import type { CollectionEntry } from 'astro:content'
import BlogHero from '@/components/blog/Hero.astro' import BlogHero from '@/components/blog/Hero.astro'
import TOC from '@/components/blog/TOC.astro' import TOC from '@/components/blog/TOC.astro'
import Button from '@/components/Button.astro' import Button from '@/components/Button.astro'
import PageLayout from './BaseLayout.astro' import PageLayout from './BaseLayout.astro'
interface Props { interface Props {
@ -44,7 +43,9 @@ const { headings } = await post.render()
<article class='flex-1 flex-grow break-words' data-pagefind-body> <article class='flex-1 flex-grow break-words' data-pagefind-body>
<div id='blog-hero'><BlogHero content={post} /></div> <div id='blog-hero'><BlogHero content={post} /></div>
<div <div
id='blog-gallery'
class='prose prose-base prose-zinc mt-12 text-muted-foreground dark:prose-invert prose-headings:font-medium prose-headings:text-foreground prose-headings:before:absolute prose-headings:before:-ms-4 prose-th:before:content-none' class='prose prose-base prose-zinc mt-12 text-muted-foreground dark:prose-invert prose-headings:font-medium prose-headings:text-foreground prose-headings:before:absolute prose-headings:before:-ms-4 prose-th:before:content-none'
style='max-width: 65rem'
> >
<slot /> <slot />
</div> </div>
@ -88,4 +89,15 @@ const { headings } = await post.render()
const observer = new IntersectionObserver(callback) const observer = new IntersectionObserver(callback)
observer.observe(targetHeader) observer.observe(targetHeader)
import PhotoSwipeLightbox from 'photoswipe/lightbox'
import 'photoswipe/style.css'
const lightbox = new PhotoSwipeLightbox({
gallery: '#blog-gallery',
children: 'a',
pswpModule: () => import('photoswipe')
})
lightbox.init()
</script> </script>