sveltekit blog mdx
1.0.0
SvelteKit 블로그 스타터는 다음 Svelte 블로그 사이트를 시작하는 데 도움이 됩니다. 이 프로젝트는 즉시 사용 가능한 PWA(Progressive Web App)를 생성합니다. 로고 등으로 사용자 정의하면 됩니다.
내부 내용과 사용자 정의 방법에 대한 설명은 Rodney Lab 사이트의 Sveltekit Blog Starter 블로그 게시물을 참조하세요. 해당 페이지 하단의 댓글에 질문을 남겨주세요.
빠른 시작은 다음과 같습니다.
sveltekit-blog-mdx 로 구동되는 Svelte 블로그 사이트를 구축하는 데 필요한 모든 것.
이 내용이 표시된다면 아마도 이미 이 단계를 완료했을 것입니다. 축하해요!
git clone https://github.com/rodneylab/sveltekit-blog-mdx.git my-new-mdsvex-blog
cd my-new-mdsvex-blog
pnpm install # or npm install
npm run dev 스타터는 vite-imagetools 플러그인을 사용하여 반응형 이미지를 생성하고 캐시합니다. 어떤 이미지를 포함할지 미리 알고 있는 경우 사용하기 쉽습니다. 사용하려는 페이지에서 가져오기만 하면 됩니다.
import featuredImageSrc from '$lib/assets/home/home.jpg' ; 그러면 vite-imagetools 플러그인이 이미지를 생성하고 해시합니다. src/routes/index.svelte 의 예를 참조하세요.
각 블로그 게시물에 대해 서로 다른 추천 이미지를 갖고 싶은 예는 조금 더 복잡하지만 관리는 가능합니다. 이 경우 스크립트( generate-responsive-image-data.js 참조)를 실행하여 모든 블로그 게시물을 반복하고 블로그 게시물 머리말에서 추천 이미지를 가져올 수 있습니다. 그런 다음 이 스크립트는 각 블로그 게시물에 대해 하나씩 생성된 JavaScript 파일로 필요한 가져오기를 출력할 수 있습니다( src/lib/generated 디렉터리 참조). 마지막으로 블로그 템플릿 로드 기능에서 해당 JavaScript 파일을 동적으로 가져올 수 있습니다.
다음과 같은 명령에 포함된 스크립트를 실행하려면 다음을 입력하십시오.
pnpm run gen:images새 블로그 게시물을 추가할 때마다 이 작업을 수행해야 합니다. 또한 페이지 로드 중 콘텐츠 레이아웃 이동을 최소화하기 위해 저해상도 자리 표시자를 생성합니다.
블로그 게시물 이미지를 찾는 스크립트의 경우 해당 이미지를 src/lib/assets/blog 폴더 아래에 추가하세요. 해당 폴더에서 이름이 포스트 슬러그와 일치하는 새 폴더를 만들고 이미지를 새 폴더에 추가합니다. 파일 이름은 사용하는 이름(예: FeaturedImage의 경우)과 일치해야 합니다.
사용 사례에 맞게 스크립트를 약간 조정해야 할 수도 있습니다. 어떻게 개선할 수 있는지 알려주세요.
src/routes/sitemap.xml/+server.js 에서 생성됩니다. 출력을 조정하려면 이 파일을 조정하세요. 사이트의 URL이 .env 에 PUBLIC_SITE_URL 변수로 정의되어 올바른 URL이 사이트 맵에 출력되는지 확인하세요.
스타터는 오프라인 가용성을 위한 서비스 작업자를 포함하고 HTML 헤드 섹션에 메타를 추가하는 등 대부분 자동으로 PWA 구성을 생성합니다. PWA에는 다양한 장치와 호환되는 다양한 크기의 로고(파비콘용)를 자세히 설명하는 매니페스트 파일이 필요합니다. assets/ 에 아이콘 세트를 생성해야 합니다.
무료 오픈 소스 도구를 사용하여 입력 SVG에서 이를 생성하고 최적화할 수 있습니다. 해당 리소스에는 생성을 자동화하기 위해 실행할 수 있는 셸 스크립트가 포함되어 있습니다.
PWA용 HTML 메타는 src/lib/components/PWA.svelte 의 구성 요소에 추가됩니다.
src/lib/config/website.js 편집하여 매니페스트(아이콘 파일 경로 포함)를 사용자 정의할 수 있습니다. 다음 변수는 생성된 manifest.json 파일에 제공됩니다.
siteTitle ,siteShortTitle ,siteUrl ,backgroundColor ,themeColor .자세한 내용은 SvelteKit의 프로그레시브 웹 앱에 대한 기사를 참조하세요.
npm run build어댑터 설치 여부에 관계없이
npm run preview사용하여 빌드된 앱을 미리 볼 수 있습니다. 프로덕션 환경에서 앱을 제공하는 데 사용하면 안 됩니다.
.
├── README.md
├── generate-responsive-image-data.js
├── jsconfig.json
├── netlify.toml
├── package.json
├── src
│ ├── app.html
│ ├── content
│ │ └── blog
│ │ ├── best-medium-format-camera-for-starting-out
│ │ ├── folding-camera
│ │ └── twin-lens-reflex-camera
│ ├── global.d.ts
│ ├── hooks.server.js
│ ├── lib
│ │ ├── assets
│ │ │ ├── blog
│ │ │ └── home
│ │ ├── components
│ │ │ ├── BannerImage.svelte
│ │ │ └── ...
│ │ ├── config
│ │ │ └── website.js
│ │ ├── constants
│ │ │ └── entities.js
│ │ ├── generated
│ │ │ └── posts
│ │ ├── styles
│ │ └── utilities
│ │ ├── blog.js
│ │ ├── file.js
│ │ └── image.js
│ ├── routes
│ │ ├── +error.svelte
│ │ ├── +layout.js
│ │ ├── +layout.svelte
│ │ ├── +page.js
│ │ ├── +page.svelte
│ │ ├── [slug]
│ │ │ ├── +layout.svelte
│ │ │ ├── +page.js
│ │ │ └── +page.svelte
│ │ ├── contact
│ │ │ └── +page.svelte
│ │ ├── manifest.webmanifest
│ │ │ └── +server.js
│ │ └── sitemap.xml
│ │ └── +server.js
│ └── service-worker.js
├── static
│ ├── assets
│ ├── favicon.png
│ ├── icon.svg
│ ├── robots.txt
│ └── sitemap.xml
└── svelte.config.js
src/contentsrc/content/blog 는 블로그 게시물을 넣어야 하는 곳입니다. 샘플 콘텐츠를 정리하고 세상에 대한 당신의 견해로 대체해보세요! 각 게시물마다 별도의 폴더가 있어 게시물과 관련된 이미지, 비디오 및 기타 관련 미디어를 더 잘 정리할 수 있습니다. 이 폴더 이름으로 브라우저 경로를 설정하므로 폴더 이름을 지정할 때 이를 염두에 두십시오. 게시물 폴더 내의 index.md 라는 파일에 실제 게시물을 작성합니다. 파일 확장자는 .md 이지만 Svelte를 쓸 수 있습니다.srchooks.server.js 여기서는 서버 측 렌더링 앱에 효과적인 CSP(콘텐츠 보안 정책) 및 기타 HTTP 보안 헤더를 정의합니다. 정적 사이트에 대해 CSP 등을 설정하는 방법을 보려면 SvelteKit 정적 사이트 HTTP 헤더에 대한 게시물을 참조하세요.src/componentssrc/lib/components 이것은 우리가 페이지에서 사용하는 구성 요소입니다.src/lib src/lib/config/website.js 편의를 위해 여기서는 사이트 제목, 연락처 이메일 주소, 소셜 미디어 계정과 같은 사이트 속성을 정의합니다. 일부 속성은 환경 변수에서 제공됩니다. SvelteKit의 환경 변수에 대한 자세한 내용은 SvelteKit 시작하기 게시물을 참조하세요.
src/lib/styles 여러분이 기대하는 대로 작동합니다! 우리는 레이아웃에서 자체 호스팅 글꼴의 스타일을 지정하고 소스에 SCSS를 사용합니다.
src/utilitiessrc/utilities/blog.js 이 파일에는 블로그 게시물의 마크다운을 Svelte로 변환하는 데 도움이 되는 일부 코드가 포함되어 있습니다. 뿐만 아니라 머리말에서 필드를 추출하는 데 도움이 됩니다(이것은 블로그 게시물 index.md 파일 상단에 포함된 메타데이터입니다).src/routes src/routes/[slug]/+page.js 이것은 본질적으로 블로그 게시물 데이터를 위한 템플릿입니다. 이러한 파일 중 하나는 각 블로그 게시물의 빌드 시 생성됩니다. 게시물의 HTML을 생성하는 데 사용되는 Svelte 파일에 필요한 데이터를 추출하는 데 사용됩니다.
src/routes/[slug]/+page.svelte 이전 파일과 유사하게 각 블로그 게시물에 대해 이들 중 하나가 생성됩니다. 이번에는 SvelteKit이 블로그 게시물에 대한 HTML 및 JavaScript를 생성하는 데 사용하는 Svelte 코드입니다.
SvelteKit 시작하기 블로그 게시물에서 대부분의 다른 파일을 언급했지만, 추가 설명이 필요한 항목을 놓친 경우 알려주시기 바랍니다.
Rodney Lab 매트릭스 채팅방에 자유롭게 뛰어들어 보세요.
