进销存文档

写作示例

内置组件

custom-container

一个jtip

tip

This is tip

一个jwarning

warning

This is warning

一个jdanger

danger

This is danger

一个remark

info

This is info

note

This is note

组件开发步骤

  1. 在依赖包./theme-default/lib/client/styles/container.scss增加组件
  2. 修改依赖包./theme-default/lib/node/defaultTheme.js导入组件名
  3. 修改依赖包./theme-default/lib/shared/options.d.ts
  • 容器内增加
查看现有的容器
    container?: {
        tip?: boolean;  // #绿色边框
        warning?: boolean;  // 黄色边框和底色
        danger?: boolean;  // 红色色边框和底色
        jxc?: boolean;  // 尽消存色边框
        imgbox?: boolean;  // 图片阴影
        remark?: boolean;  // 橙色左粗右下角半径
        details?: boolean;  // 查看详情 隐藏
        codeGroup?: boolean;  // 代码组
        codeGroupItem?: boolean;  // 代码项目
    };
  • 将接口导入export interface DefaultThemeLocaleData extends LocaleData……
  1. 在docs目录下的./config.ts引入代码段
查看引入的代码段

高亮显示语法```ts {9,11,13}```

    locales: {
      '/': {
        navbar,
        sidebar,
        tip: ' ',
        warning: ' ',
        danger: ' ',
        // jxc 是二开组件，''里面有一个空格，如果里面有内容，那么自动增加title内容
        jxc: ' ',
        // imgbox 是二开组件
        imgbox: ' ',
        // remark 二开组件
        remark: ' ',
        // 404 页面
        notFound: [
          '这里什么都没有',
          '我们怎么到这来了？',
          '这是一个 404 页面',
          '看起来我们进入了错误的链接',
        ],
        backToHome: '返回首页',
        // a11y
        openInNewWindow: '在新窗口打开',
        toggleColorMode: '切换颜色模式',
        toggleSidebar: '切换侧边栏',
      },
    },








 

 

 














尽消存

+ 新增项
- 删除项

区块

放在这里就粗体
放这里就细体

脚注和链接

链接：尽消存
脚注：尽消存

💬 您好！ // 前面的标签没显示，没考虑兼容性

Badge badge

  • Props:
    • type
      • 类型： 'tip' | 'warning' | 'danger'
      • 默认值： 'tip'
    • text
      • 类型： string
      • 默认值： ''
    • vertical
      • 类型： 'top' | 'middle' | 'bottom' | undefined
      • 默认值： undefined

在依赖文件theme-default\lib\client\components\global\Badge.vue修改type默认值为jxc

defineProps({
  type: {
    type: String,
    required: false,
    default: 'jxc',
  },
  • 示例：

输入

- 进销存文档 - <Badge type="tip" text="v2" vertical="top" />
- 进销存文档 - <Badge type="warning" text="v2" vertical="middle" />
- 进销存文档 - <Badge type="danger" text="v2" vertical="bottom" />
- 进销存橙 - <Badge type="jxc" text="v2" vertical="bottom" />

输出

  • 进销存文档 - v2
  • 进销存文档 - v2
  • 进销存文档 - v2
  • 进销存橙 - v2

CodeGroup

CodeGroupItem

  • Props:

    • title
      • 类型： string
      • 是否必需： true
    • active
      • 类型： boolean
      • 默认值： false

  • 详情：

    该组件必须放置在 CodeGroup 组件的内部。

    可以通过 active Prop 来设置初始激活的元素。如果不设置，默认激活第一个元素。

  • 示例：

输入

<CodeGroup>
  <CodeGroupItem title="YARN">

```bash:no-line-numbers
yarn
```

  </CodeGroupItem>

  <CodeGroupItem title="NPM" active>

```bash:no-line-numbers
npm install
```

  </CodeGroupItem>
</CodeGroup>

输出

yarn

npm install

注意

你必须在 <CodeGroupItem> 的开始标签和代码块之间添加一个空行，否则代码块无法被 Markdown 正确解析。

或者你可以选择使用 自定义容器 。

Markdown

自定义容器

  • 使用：

    ::: <type> [title]
[content]
:::

    type 是必需的， title 和 content 是可选的。

    支持的 type 有：

  • 示例 1 （默认标题）：

输入

::: tip
这是一个提示
:::

::: warning
这是一个警告
:::

::: danger
这是一个危险警告
:::

::: info
这是一个进销存信息
:::

::: jxc
这是一个进销存色
:::

::: details
这是一个 details 标签
:::

输出

注

这是一个备注

提示

这是一个提示

注意

这是一个警告

警告

这是一个危险警告

相关信息

这是一个进销存相关信息

这是一个进销存色

详情

这是一个 details 标签

  • 示例 2 （自定义标题）：

输入

::: danger STOP
危险区域，禁止通行
:::

::: details 点击查看代码
```ts
console.log('你好，进销存文档！')
```
:::

输出

STOP

危险区域，禁止通行

点击查看代码
console.log('你好，进销存文档！')
  • 示例 3 （Code Group 别名）：

输入

:::: code-group
::: code-group-item FOO
```ts
const foo = 'foo'
```
:::
::: code-group-item BAR
```ts
const bar = 'bar'
```
:::
::::

输出

const foo = 'foo'

const bar = 'bar'
  • 示例 3 （乱七八糟）
点击查看代码
...这句代码很牛逼
console.log('Hello，进销存文档！')

开源代码如何推送

# 准备所有文件
git add --all

# 提交并标注
git commit -m "update xxx"

# 推送到主分支
git push -u -origin main

修改容器样式

路径

\theme-default\lib\client\styles\custom-container.scss

  &.tip,
  &.warning,
  &.danger,
  &.jxc {
    padding: 0.1rem 1.5rem;
    margin: 1rem 0;
    border-top: solid 1px;
    border-left: solid 1px;
    border-right: solid 1px;
    border-bottom: solid 1px;
    border-radius: 0.5rem;
  }

注

就是边上有框，这里是白色的框。

相关信息

就是边上有框，这里是橙色的框。

提示

就是边上有框，这里是绿色的框。

注意

就是边上有框，这里是黄色的框。

警告

就是边上有框，这里是红色的框。

橙色边框

就是边上有框，这里是尽消存橙的框。

就是马克

比如这个是标注，标注啥就是啥，左侧是橙色2px的边框，右下角是圆角，底色是tip，就是不知道超宽了问题大不大。

图片边框阴影

尽消存LOGO
尽消存LOGO
代码块测试

按钮样式

重启电脑

Ctrl+Alt+Delete

关于sidebar

同级sidebar这样设计能展开子标签

  • sidebar.ts代码
  '/a/': [
    {
      text: '关于我们',
      link: '/a/',
    },
    {
      text: '写作示例',
      link: '/a/d/',
    },
  ],
  • 文件夹目录
└─ a
   └─ d

ƒ 🔍 ← → ↓ ↑

查看主题代码配置