Aller au contenu

@studiocms/blog

Ce module d’extension active les fonctionnalités du blog StudioCMS ainsi qu’un front-end dans votre projet Astro. Il vous permettra de créer, modifier et supprimer des articles de blog depuis le tableau de bord de StudioCMS.

  1. Installez le paquet à l’aide de la commande suivante :

    Fenêtre de terminal
    npm run studiocms add @studiocms/blog
  2. Votre configuration StudioCMS devrait désormais inclure @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
    (),
    ],
    });

Cette intégration ajoutera les nouvelles routes suivantes à votre front-end contrôlé par StudioCMS :

  • /[...slug] - La page principale du blog qui répertorie toutes les pages StudioCMS.
  • /blog - La page principale du blog qui répertorie tous les articles du blog.
  • /blog/[slug] - La page de l’article de blog individuel.
  • /rss.xml - Le flux RSS de vos articles de blog.