컨텐츠로 건너뛰기

@studiocms/blog

이 플러그인을 사용하면 Astro 프로젝트에서 StudioCMS 블로그 기능과 프런트엔드를 사용할 수 있습니다. StudioCMS 대시보드에서 블로그 게시물을 생성, 편집 및 삭제할 수 있습니다.

  1. 다음 명령어를 사용하여 패키지를 설치합니다.

    Terminal window
    npm run studiocms add @studiocms/blog
  2. 이제 StudioCMS 구성은 @studiocms/blog를 포함해야 합니다.

    studiocms.config.mjs
    import {
    function defineStudioCMSConfig(config: StudioCMSOptions): {
    sdk?: boolean | {
    cacheConfig?: boolean | {
    lifetime?: string | undefined;
    } | undefined;
    } | undefined;
    dbStartPage?: boolean | undefined;
    imageService?: {
    cdnPlugin?: "cloudinary-js" | undefined;
    } | undefined;
    defaultFrontEndConfig?: boolean | {
    htmlDefaultLanguage?: string | undefined;
    htmlDefaultHead?: {
    tag: "link" | "title" | "base" | "style" | "meta" | "script" | "noscript" | "template";
    attrs?: Record<string, string | boolean | undefined> | undefined;
    content?: string | undefined;
    }[] | undefined;
    favicon?: string | undefined;
    injectQuickActionsMenu?: boolean | undefined;
    } | undefined;
    dashboardConfig?: {
    dashboardEnabled?: boolean | undefined;
    inject404Route?: boolean | undefined;
    faviconURL?: string | undefined;
    dashboardRouteOverride?: string | undefined;
    AuthConfig?: {
    providers?: {
    github?: boolean | undefined;
    discord?: boolean | undefined;
    google?: boolean | undefined;
    auth0?: boolean | undefined;
    usernameAndPassword?: boolean | undefined;
    usernameAndPasswordConfig?: {
    allowUserRegistration?: boolean | undefined;
    } | undefined;
    } | undefined;
    enabled?: boolean | undefined;
    } | undefined;
    developerConfig?: {
    demoMode?: false | {
    password: string ...

    A utility function to define the StudioCMS config object. This function is used to define the optional StudioCMS config object in the Astro project root. The expected file name is studiocms.config.mjs. And it should be adjacent to the Astro project's astro.config.mjs file.

    StudioCMS will attempt to import this file and use the default export as the StudioCMS config object automatically if it exists.

    Using this function is optional, but it can be useful for IDEs to provide better intellisense and type checking.

    @example

    // studiocms.config.mjs
    import { defineStudioCMSConfig } from 'studiocms';
    export default defineStudioCMSConfig({
    dbStartPage: true,
    contentRenderer: 'marked',
    verbose: true,
    dateLocale: 'en-us',
    // ...Other Options
    })

    defineStudioCMSConfig
    } from 'studiocms/config';
    import
    function blog(options?: StudioCMSBlogOptions): StudioCMSPlugin

    Creates and configures the StudioCMS Blog plugin.

    @paramoptions - Optional configuration options for the blog plugin.

    @returnsThe configured StudioCMS plugin.

    @example

    const blogPlugin = studioCMSBlogPlugin({
    blog: {
    title: 'My Blog',
    enableRSS: true,
    route: '/my-blog'
    },
    sitemap: true,
    injectRoutes: true
    });

    @paramoptions.blog - Blog-specific options.

    @paramoptions.blog.title - The title of the blog. Defaults to 'Blog'.

    @paramoptions.blog.enableRSS - Whether to enable RSS feed. Defaults to true.

    @paramoptions.blog.route - The route for the blog. Defaults to '/blog'.

    @paramoptions.sitemap - Whether to trigger sitemap generation. Defaults to true.

    @paramoptions.injectRoutes - Whether to inject routes for the blog. Defaults to true.

    blog
    from '@studiocms/blog';
    export default
    function defineStudioCMSConfig(config: StudioCMSOptions): {
    sdk?: boolean | {
    cacheConfig?: boolean | {
    lifetime?: string | undefined;
    } | undefined;
    } | undefined;
    dbStartPage?: boolean | undefined;
    imageService?: {
    cdnPlugin?: "cloudinary-js" | undefined;
    } | undefined;
    defaultFrontEndConfig?: boolean | {
    htmlDefaultLanguage?: string | undefined;
    htmlDefaultHead?: {
    tag: "link" | "title" | "base" | "style" | "meta" | "script" | "noscript" | "template";
    attrs?: Record<string, string | boolean | undefined> | undefined;
    content?: string | undefined;
    }[] | undefined;
    favicon?: string | undefined;
    injectQuickActionsMenu?: boolean | undefined;
    } | undefined;
    dashboardConfig?: {
    dashboardEnabled?: boolean | undefined;
    inject404Route?: boolean | undefined;
    faviconURL?: string | undefined;
    dashboardRouteOverride?: string | undefined;
    AuthConfig?: {
    providers?: {
    github?: boolean | undefined;
    discord?: boolean | undefined;
    google?: boolean | undefined;
    auth0?: boolean | undefined;
    usernameAndPassword?: boolean | undefined;
    usernameAndPasswordConfig?: {
    allowUserRegistration?: boolean | undefined;
    } | undefined;
    } | undefined;
    enabled?: boolean | undefined;
    } | undefined;
    developerConfig?: {
    demoMode?: false | {
    password: string ...

    A utility function to define the StudioCMS config object. This function is used to define the optional StudioCMS config object in the Astro project root. The expected file name is studiocms.config.mjs. And it should be adjacent to the Astro project's astro.config.mjs file.

    StudioCMS will attempt to import this file and use the default export as the StudioCMS config object automatically if it exists.

    Using this function is optional, but it can be useful for IDEs to provide better intellisense and type checking.

    @example

    // studiocms.config.mjs
    import { defineStudioCMSConfig } from 'studiocms';
    export default defineStudioCMSConfig({
    dbStartPage: true,
    contentRenderer: 'marked',
    verbose: true,
    dateLocale: 'en-us',
    // ...Other Options
    })

    defineStudioCMSConfig
    ({
    plugins?: StudioCMSPlugin[] | undefined
    plugins
    : [
    function blog(options?: StudioCMSBlogOptions): StudioCMSPlugin

    Creates and configures the StudioCMS Blog plugin.

    @paramoptions - Optional configuration options for the blog plugin.

    @returnsThe configured StudioCMS plugin.

    @example

    const blogPlugin = studioCMSBlogPlugin({
    blog: {
    title: 'My Blog',
    enableRSS: true,
    route: '/my-blog'
    },
    sitemap: true,
    injectRoutes: true
    });

    @paramoptions.blog - Blog-specific options.

    @paramoptions.blog.title - The title of the blog. Defaults to 'Blog'.

    @paramoptions.blog.enableRSS - Whether to enable RSS feed. Defaults to true.

    @paramoptions.blog.route - The route for the blog. Defaults to '/blog'.

    @paramoptions.sitemap - Whether to trigger sitemap generation. Defaults to true.

    @paramoptions.injectRoutes - Whether to inject routes for the blog. Defaults to true.

    blog
    (),
    ],
    });

이 플러그인은 어떤 기능을 하나요?

Section titled “이 플러그인은 어떤 기능을 하나요?”

이 통합은 StudioCMS로 제어되는 프런트엔드에 다음과 같은 새로운 라우트를 추가합니다.

  • /[...slug] - 모든 StudioCMS 페이지를 나열하는 메인 블로그 페이지입니다.
  • /blog - 모든 블로그 게시물을 나열하는 메인 블로그 페이지입니다.
  • /blog/[slug] - 개별 블로그 게시물 페이지입니다.
  • /rss.xml - 블로그 게시물에 대한 RSS 피드입니다.