@studiocms/devapps

v0.1.0-beta.18 GitHub npm 更新日志

简介

这是一个在 Astro 开发模式下可用的实用工具集合。

安装方法

Astro 方式
手动方式

使用以下命令安装软件包并添加到 astro 配置：
- npm
- pnpm
- yarn
Terminal window
npx astro add @studiocms/devapps
Terminal window
pnpm astro add @studiocms/devapps
Terminal window
yarn astro add @studiocms/devapps
按照下文示例配置更新配置文件

使用以下命令安装软件包：
- npm
- pnpm
- yarn
Terminal window
npm i @studiocms/devapps
Terminal window
pnpm add @studiocms/devapps
Terminal window
yarn add @studiocms/devapps

将 @studiocms/devapps 添加到您的 astro 配置文件：

import { 
function defineConfig<const TLocales extends Locales = never, const TDriver extends SessionDriverName = never, const TFontFamilies extends FontFamily[] = never>(config: AstroUserConfig<TLocales, TDriver, TFontFamilies>): AstroUserConfig<TLocales, TDriver, TFontFamilies>
See the full Astro Configuration API Documentation
https://astro.build/config
defineConfig } from 'astro/config';
import 
function db(): AstroIntegration[]
db from '@astrojs/db';
import 
function devApps(opts?: StudioCMSDevAppsOptions): AstroIntegration
Integrates StudioCMS development applications with Astro.
@param ― opts - Optional configuration options for StudioCMS DevApps.
@returns ― The Astro integration object for StudioCMS DevApps.
@example 
import { studioCMSDevApps } from '@studiocms/devapps';

export default {
  integrations: [
    studioCMSDevApps({
      endpoint: '/api',
      appsConfig: {
        wpImporter: {
          enabled: true,
          endpoint: '/wp-import',
        },
        libSQLViewer: {
          enabled: true,
        },
      },
      verbose: true,
    }),
  ],
};
devApps from '@studiocms/devapps';

export default 
defineConfig<never, never, never>(config: AstroUserConfig<never, never, never>): AstroUserConfig<never, never, never>
See the full Astro Configuration API Documentation
https://astro.build/config
defineConfig({
   
AstroUserConfig<TLocales extends Locales = never, TSession extends SessionDriverName = never, TFontFamilies extends FontFamily[] = never>.site?: string@name ― site
@type ― {string}
@description 
Your final, deployed URL. Astro uses this full URL to generate your sitemap and canonical URLs in your final build. It is strongly recommended that you set this configuration to get the most out of Astro.
{
  site: 'https://www.my-site.dev'
}
site: "https://example.com",
   
AstroUserConfig<TLocales extends Locales = never, TSession extends SessionDriverName = never, TFontFamilies extends FontFamily[] = never>.integrations?: (false | AstroIntegration | (false | AstroIntegration | null | undefined)[] | null | undefined)[]@name ― integrations
@description 
Extend Astro with custom integrations. Integrations are your one-stop-shop for adding framework support (like Solid.js), new features (like sitemaps), and new libraries (like Partytown).
Read our Integrations Guide for help getting started with Astro Integrations.
import react from '@astrojs/react';
import mdx from '@astrojs/mdx';
{
  // Example: Add React + MDX support to Astro
  integrations: [react(), mdx()]
}
integrations: [
       
function db(): AstroIntegration[]
db(),
       
function devApps(opts?: StudioCMSDevAppsOptions): AstroIntegration
Integrates StudioCMS development applications with Astro.
@param ― opts - Optional configuration options for StudioCMS DevApps.
@returns ― The Astro integration object for StudioCMS DevApps.
@example 
import { studioCMSDevApps } from '@studiocms/devapps';

export default {
  integrations: [
    studioCMSDevApps({
      endpoint: '/api',
      appsConfig: {
        wpImporter: {
          enabled: true,
          endpoint: '/wp-import',
        },
        libSQLViewer: {
          enabled: true,
        },
      },
      verbose: true,
    }),
  ],
};
devApps(),
   ],
});

使用说明

所有工具仅在 astro dev 开发模式下可用，不会出现在生产部署中！

示例配置

import { 
function defineConfig<const TLocales extends Locales = never, const TDriver extends SessionDriverName = never, const TFontFamilies extends FontFamily[] = never>(config: AstroUserConfig<TLocales, TDriver, TFontFamilies>): AstroUserConfig<TLocales, TDriver, TFontFamilies>
See the full Astro Configuration API Documentation
https://astro.build/config
defineConfig } from 'astro/config';
import 
function db(): AstroIntegration[]
db from '@astrojs/db';
import 
function devApps(opts?: StudioCMSDevAppsOptions): AstroIntegration
Integrates StudioCMS development applications with Astro.
@param ― opts - Optional configuration options for StudioCMS DevApps.
@returns ― The Astro integration object for StudioCMS DevApps.
@example 
import { studioCMSDevApps } from '@studiocms/devapps';

export default {
  integrations: [
    studioCMSDevApps({
      endpoint: '/api',
      appsConfig: {
        wpImporter: {
          enabled: true,
          endpoint: '/wp-import',
        },
        libSQLViewer: {
          enabled: true,
        },
      },
      verbose: true,
    }),
  ],
};
devApps from '@studiocms/devapps';

export default 
defineConfig<never, never, never>(config: AstroUserConfig<never, never, never>): AstroUserConfig<never, never, never>
See the full Astro Configuration API Documentation
https://astro.build/config
defineConfig({
  
AstroUserConfig<TLocales extends Locales = never, TSession extends SessionDriverName = never, TFontFamilies extends FontFamily[] = never>.site?: string@name ― site
@type ― {string}
@description 
Your final, deployed URL. Astro uses this full URL to generate your sitemap and canonical URLs in your final build. It is strongly recommended that you set this configuration to get the most out of Astro.
{
  site: 'https://www.my-site.dev'
}
site: "https://example.com",
  
AstroUserConfig<TLocales extends Locales = never, TSession extends SessionDriverName = never, TFontFamilies extends FontFamily[] = never>.integrations?: (false | AstroIntegration | (false | AstroIntegration | null | undefined)[] | null | undefined)[]@name ― integrations
@description 
Extend Astro with custom integrations. Integrations are your one-stop-shop for adding framework support (like Solid.js), new features (like sitemaps), and new libraries (like Partytown).
Read our Integrations Guide for help getting started with Astro Integrations.
import react from '@astrojs/react';
import mdx from '@astrojs/mdx';
{
  // Example: Add React + MDX support to Astro
  integrations: [react(), mdx()]
}
integrations: [
    
function db(): AstroIntegration[]
db(), // 必须项
    
function devApps(opts?: StudioCMSDevAppsOptions): AstroIntegration
Integrates StudioCMS development applications with Astro.
@param ― opts - Optional configuration options for StudioCMS DevApps.
@returns ― The Astro integration object for StudioCMS DevApps.
@example 
import { studioCMSDevApps } from '@studiocms/devapps';

export default {
  integrations: [
    studioCMSDevApps({
      endpoint: '/api',
      appsConfig: {
        wpImporter: {
          enabled: true,
          endpoint: '/wp-import',
        },
        libSQLViewer: {
          enabled: true,
        },
      },
      verbose: true,
    }),
  ],
};
devApps(/* 配置选项见下文 */),
  ],
});

配置选项

以下是 devApps 集成的完整可用选项，其中显示了默认值。所有选项均为可选。


endpoint?: string | undefined
endpoint: '_studiocms-devapps',
verbose?: boolean | undefined
verbose: false,
appsConfig?: {
    libSQLViewer: boolean | {
        endpoint?: string | undefined;
    };
    wpImporter: boolean | {
        endpoint?: string | undefined;
    };
} | undefined
appsConfig: {
  
libSQLViewer: boolean | {
    endpoint?: string | undefined;
}
libSQLViewer: true,
  
wpImporter: boolean | {
    endpoint?: string | undefined;
}
wpImporter: true,
},

可用工具

libSQL 查看器

在浏览器中查看 libSQL 数据库表的开发工具。该工具依赖于 @astrojs/db 的远程数据库连接凭证。

环境要求

需设置以下环境变量（同时用于 @astrojs/db）：

ASTRO_DB_REMOTE_URL
ASTRO_DB_APP_TOKEN

功能预览

工具栏应用 (收缩状态)

Astro 开发工具栏应用

工具栏应用 (展开状态)

Astro 开发工具栏应用 (展开)

WordPress 导入器

将 WordPress 文章和页面导入到 StudioCMS 数据库的开发工具。

环境要求

StudioCMS 集成
WordPress 安装
@studiocms/blog (可选：用于将文章导入到博客系统)

功能预览

工具栏应用

Astro 导入器界面