@acnb/core 中文文档教程

Question

acnb-core

cnblog主题创建接口。

Install

npm i @acnb/core

API

createTheme

返回提供主题上下文的主题实例。

import { createTheme } from '@acnb/core'

const theme = createTheme()

defineOptions

返回一个通用配置对象。

import { defineOptions } from '@acnb/core'

const useBackgroundOptions = defineOptions('bodyBackground', {
  enable: false,
  value: '',
  opacity: 0.85,
  repeat: false,
})

Cnblog 主题用户可以添加如下配置：

const opts = {
  bodyBackground: {
    enable: false,
    value: '',
    opacity: 0.85,
    repeat: false,
  },
}

使用配置别名：

import { defineOptions } from '@acnb/core'

const useBackgroundOptions = defineOptions(['bodyBackground', 'background'], {
  enable: false,
  value: '',
  opacity: 0.85,
  repeat: false,
})

Plugin System

// plugin.js
import { defineOptions } from '@acnb/core'

export const backgroundPlugin = (theme, devOptions, pluginOptions) => {
  const useBackgroundOptions = defineOptions('bodyBackground', {
    enable: false,
    value: '',
    opacity: 0.85,
    repeat: false,
  })

  const { enable, value, opacity, repeat } = useBackgroundOptions(devOptions)

  if (!enable) return

  const { opacitySelector } = Object.assign(
    {},
    {
      opacitySelector: '#main,#navigator',
    },
    pluginOptions
  )

  setBackground(value, repeat)
  setOpacity(opacity, opacitySelector)
}

// theme/index.js
import { createTheme } from '@acnb/core'
import { backgroundPlugin } from './plugin'

const theme = createTheme()

theme.use(
  backgroundPlugin,
  {
    // Set the default configuration of the theme
    enable: true,
    value: '#ffb3cc',
    opacity: 0.85,
  },
  {
    // Set the default configuration of the plugin
    opacitySelector: '#main',
  }
)