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

15
astro.config.mjs
View File

@ -11,14 +11,21 @@ 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: [
expressiveCode(expressiveCodeOptions),
tailwind({
applyBaseStyles: false applyBaseStyles: false
}), sitemap(), mdx(), icon(), react()], }),
sitemap(),
mdx(),
icon(),
react()
],
markdown: { markdown: {
remarkPlugins: [remarkUnwrapImages, remarkReadingTime], remarkPlugins: [remarkUnwrapImages, remarkReadingTime],
rehypePlugins: [ rehypePlugins: [

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>