跳转到内容

@studiocms/blog

该插件为 Astro 项目提供 StudioCMS 博客功能及前端界面,支持从 StudioCMS 仪表盘创建、编辑和管理博客文章。

  1. 使用以下命令安装软件包:

    Terminal window
    npm run studiocms add @studiocms/blog
  2. 在 StudioCMS 配置中添加该插件:

    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
    (), // 启用博客功能
    ],
    });

该插件将向 StudioCMS 控制的前端应用添加以下路由:

  • /[...slug] - 通用内容路由(用于常规页面)
  • /blog - 博客主页(文章列表)
  • /blog/[slug] - 单篇博客文章详情页
  • /rss.xml - 自动生成的博客 RSS 订阅源