自定义 API

在这一章节，将带你了解 daymd.config.js 文件中暴露出的接口及其作用。daymd.config.js 是全局配置文件，它能帮你自定义网站中的一些功能和样式。

#title

网站标题。接受值类型为 string，只接受一个参数值。

示例值：

title: 'Daymd',
title: '我的博客',
title: '小山羊的博客',
title: 'XX大学计算机协会',
...

它将产生如下效果：

#heroMode

首页的展示形式。接受值类型为 number，只接受一个参数值。除开不展示首页外，Daymd 为您提供了三种首页展示形式。

#heroMode:1

heroMode: 1,

#heroMode:2

heroMode: 2,

#heroMode:3

heroMode: 3,

动图效果展示：

接下来就不再提供动图展示了，比较占用流量。

#heroModeConfig

heroMode:2时的配置表，只有在 heroMode 是 2 的时候才生效。

heroModeConfig: {
    // 星星数量，number，要求：<1000
    starsCount: 250,
    // 星星颜色,string
    starsColor: '#ffffff',
    // 星星旋转速度,number
    starsRotationSpeed: 3,
    // 彗星出现的频度，number，若值设置为0，隐藏彗星
    cometFrequence: 2,
    // 星云强度，number，即两侧颜色深度
    nebulasIntensity: 0,
    // 太阳系数量，number，若设置为0，隐藏
    sunScale: 1,
    // 行星数量，number，若设置为0，隐藏
    planetsScale: 1,
    // 太阳系轨道，number，要求<100
    solarSystemOrbite: 65,
    // 轨道速度，number
    solarSystemSpeedOrbit: 100,
},

#heroText

首页的大文字。接受值类型为 string，只接受一个参数值。

关联配置：heroMode，只在 heroMode 为 1 2 3 时生效。并且在 3 时的大图模式不生效。

可能的值：

heroText: 'Do it all with API.',
heroText: 'Hello World！',
heroText: '静水流深',
...

#heroContent

首页上的小字内容。接受值为 string ，只接受一个参数值。

关联配置：heroMode，只有在 heroMode 为 1 时生效。

// 大文字下的说明文字,限heroMode：1
heroContent:
'A blog site builder built with Next.js, Tailwind, DaisyUI, Contentlayer. Almost everything can be configured via the API interface. Get started quickly with zero basics.',

作用示意：

#favicon

网站的 favicon。接受值为 string ，只接受一个参数值。

// 标签图标
favicon:
'https://jetzihan-img.oss-cn-beijing.aliyuncs.com/blog/daymd_logo1.svg',

作用示意：

#navTheme

导航栏的主题。接受值为 string ，只接受一个参数值。我们为您提供了两种样式。所有可能值：

navTheme: 1,
navTheme: 2,

#navTheme: 1

Logo 在导航栏中间，导航在左边的收拢按钮中。

#navTheme: 2

Logo 在导航栏左边，导航在导航栏中间。

#isNavLogo

是否显示导航栏的 Logo(Logo不含文字)。接受值为 number ，只接受一个参数值。可选参数为 1 或 0。0为不显示，1为显示。

isNavLogo: 1,
isNavLogo: 0,

#buildTime

博客创建时间。接受值为 string ，只接受一个参数值。格式：YYYY-MM-DD。

buildTime: '2022-08-31',
buildTime: '2022-09-30',

#navLogo

导航栏的 Logo。接受值为 string ，只接受一个参数值。

navLogo:
'https://jetzihan-img.oss-cn-beijing.aliyuncs.com/blog/daymd_logo1.svg',

#navOpacity

导航栏的透明度。接受值为 string ，可以接受多个参数值，但是必须在同一个引号内。bg-opacity-请不要修改，后面的数字越大越不透明，值为每10增加，范围0~100。例如56、45等非整十的值无效。bg-opacity-xx后面可以添加其他 Tailwind 样式类。

参考的值：

navOpacity: 'bg-opacity-10',
navOpacity: 'bg-opacity-30',
navOpacity: 'bg-opacity-60',
navOpacity: 'bg-opacity-60 border-8',

#heroBg

首页的背景图片。接受值为 string ，只接受一个参数值。

关联配置：heroMode，只在 heroMode 为 1 时生效。

可能的值：

heroBg: 'url(https://api.maho.cc/random-img/pc.php)',
heroBg: 'url(https://mypicbed.com/background.png)',

使用 https://api.maho.cc/random-img/pc.php 接口可以每刷新一次得到不同的二次元背景图片，这是一个免费的图片接口。

#heroButton

首页的按钮上的文字。接受值为 string ，只接受一个参数值。

关联配置：heroMode，只在 heroMode 为 1 时生效。

可能的值：

heroButton: 'Get Start',
heroButton: '进入',
heroButton: '查看文档',
...

影响的区域：

#heroButtonLink

首页按钮对应的链接。接受值为 string ，只接受一个参数值。点击按钮可以跳转到某个页面或者某篇文章：

heroButtonLink: '/docs',
heroButtonLink: '/posts',
heroButtonLink: '/nav',
heroButtonLink: '/docs/api',

#theme2Setting

heroMode 为 3 时的配置。接受值为 object ，可以接受多个参数值。

关联配置：heroMode，只在 heroMode 为 3 时生效。

#avatar

右边栏中的头像，接受值为 string ，只接受一个参数值。

可能的值：

theme2Setting: {
    ...
    avatar:'https://jetzihan-img.oss-cn-beijing.aliyuncs.com/blog/20220710133634.png',
    ...
}

影响区域：

#backSize

博客模式背景图片的大小，接受值为 number ，只接受一个参数值。

可能的值：

theme2Setting: {
    ...
    backSize: 1,
    // 或
    backSize: 2,
    // 或
    backSize: 3,
    ...
}

backSize: 1 顶图模式

backSize: 2 整页模式

backSize: 3 混合模式

#topImg

背景图片，接受值为 string ，只接受一个参数值。

topImg: 'https://jetzihan-img.oss-cn-beijing.aliyuncs.com/blog/20220830215348.png',

#authorName

页面右边作者名称，接受值为 string ，只接受一个参数值。

authorName: 'Jetzihan',
// 或
authorName: 'Andy'

#isDocLinks

是否显示文档链接，接受值为 number ，只接受一个参数值。

可选值：

// 1 显示
isDocLinks: 1,
// 或 0 不显示
isDocLinks: 0,

#zhan

是够用中文显示下面两个按钮，接受值为 number ，只接受一个参数值。

可选值：

// 中文显示
zhan:1,
// 英文显示
zhan:0,

zhan:1

zhan:0

#techLinks

技术栈。是一个列表，每条数据由参数 tech 和 styles 组成，styles 的值由背景颜色和字体颜色组成。

techLinks: [
    {
    tech: 'Vue',
    styles: 'bg-green-200 text-green-900',
    },
    {
    tech: 'React',
    styles: 'bg-blue-200 text-blue-900',
    },
    {
    tech: 'Python',
    styles: 'bg-yellow-200 text-yellow-900',
    },
    ...
],

可以提供的背景颜色有：
gary:
bg-gray-50 bg-gray-100 bg-gray-200 bg-gray-300 bg-gray-400 bg-gray-500 bg-gray-600 bg-gray-700 bg-gray-800 bg-gray-900
red:
bg-red-50 bg-red-100 bg-red-200 bg-red-300 bg-red-400 bg-red-500 bg-red-600 bg-red-700 bg-red-800 bg-red-900
yellow:
bg-yellow-50 bg-yellow-100 bg-yellow-200 bg-yellow-300 bg-yellow-400 bg-yellow-500 bg-yellow-600 bg-yellow-700 bg-yellow-800 bg-yellow-900
green:
bg-green-50 bg-green-100 bg-green-200 bg-green-300 bg-green-400 bg-green-500 bg-green-600 bg-green-700 bg-green-800 bg-green-900
blue:
bg-blue-50 bg-blue-100 bg-blue-200 bg-blue-300 bg-blue-400 bg-blue-500 bg-blue-600 bg-blue-700 bg-blue-800 bg-blue-900
indigo(靛):
bg-indigo-50 bg-indigo-100 bg-indigo-200 bg-indigo-300 bg-indigo-400 bg-indigo-500 bg-indigo-600 bg-indigo-700 bg-indigo-800 bg-indigo-900
purple:
bg-purple-50 bg-purple-100 bg-purple-200 bg-purple-300 bg-purple-400 bg-purple-500 bg-purple-600 bg-purple-700 bg-purple-800 bg-purple-900
pink:
bg-pink-50 bg-pink-100 bg-pink-200 bg-pink-300 bg-pink-400 bg-pink-500 bg-pink-600 bg-pink-700 bg-pink-800 bg-pink-900

可以提供的字体颜色有：
gary:
text-gray-50 text-gray-100 text-gray-200 text-gray-300 text-gray-400 text-gray-500 text-gray-600 text-gray-700 text-gray-800 text-gray-900
red:
text-red-50 text-red-100 text-red-200 text-red-300 text-red-400 text-red-500 text-red-600 text-red-700 text-red-800 text-red-900
yellow:
text-yellow-50 text-yellow-100 text-yellow-200 text-yellow-300 text-yellow-400 text-yellow-500 text-yellow-600 text-yellow-700 text-yellow-800 text-yellow-900
green:
text-green-50 text-green-100 text-green-200 text-green-300 text-green-400 text-green-500 text-green-600 text-green-700 text-green-800 text-green-900
blue: text-blue-50 text-blue-100 text-blue-200 text-blue-300 text-blue-400 text-blue-500 text-blue-600 text-blue-700 text-blue-800 text-blue-900
indigo(靛):
text-indigo-50 text-indigo-100 text-indigo-200 text-indigo-300 text-indigo-400 text-indigo-500 text-indigo-600 text-indigo-700 text-indigo-800 text-indigo-900
purple:
text-purple-50 text-purple-100 text-purple-200 text-purple-300 text-purple-400 text-purple-500 text-purple-600 text-purple-700 text-purple-800 text-purple-900
pink:
text-pink-50 text-pink-100 text-pink-200 text-pink-300 text-pink-400 text-pink-500 text-pink-600 text-pink-700 text-pink-800 text-pink-900

另外，你也可以在这个引号中添加自定义的 Tailwind 样式或自定义类名。

#Words

个人格言，String，仅接受字符串。

示例：

Words: '风筝有风，海豚有海。',
Words: 'Coding my life.',

#socialIcons

socialIcons，Array，仅接受数组。可以接受多条数据。每条数据由参数 name svgPath link 组成。name 是链接名称，svgPath 是链接的图标路径（它应当是一个外链，支持多种图片格式，建议使用 svg 格式），下面提供的链接你都可以使用，link 是链接的链接地址。

这是一条数据，每条数据被一个大括号包裹，所有数据被一个中括号包裹：

{
    name: 'GitHub',
    svgPath:
        'https://jetzihan-img.oss-cn-beijing.aliyuncs.com/blog/icon-github-1.svg',
    link: 'https://github.com/inannan423',
},

同时可以接受多条数据：

socialIcons: [
      {
        name: 'GitHub',
        svgPath:
          'https://jetzihan-img.oss-cn-beijing.aliyuncs.com/blog/icon-github-1.svg',
        link: 'https://github.com/inannan423',
      },
      {
        name: '掘金',
        svgPath:
          'https://jetzihan-img.oss-cn-beijing.aliyuncs.com/blog/icon-juejin-1.svg',
        link: 'https://juejin.cn',
      },
      {
        name: 'CSDN',
        svgPath:
          'https://jetzihan-img.oss-cn-beijing.aliyuncs.com/blog/icon-csdn-1.svg',
        link: 'www.csdn.com',
      },
      {
        name: 'bilibili',
        svgPath:
          'https://jetzihan-img.oss-cn-beijing.aliyuncs.com/blog/icon-bilibili-1.svg',
        link: 'https://bilibili.com',
      },
      {
        name: 'gitee',
        svgPath:
          'https://jetzihan-img.oss-cn-beijing.aliyuncs.com/blog/icon-gitee-1.svg',
        link: 'www.gitee.com',
      },
      {
        name: 'weibo',
        svgPath:
          'https://jetzihan-img.oss-cn-beijing.aliyuncs.com/blog/icon-wb-1.svg',
        link: 'www.weibo.com',
      },
      {
        name: 'Zhihu',
        svgPath:
          'https://jetzihan-img.oss-cn-beijing.aliyuncs.com/blog/icon-zh-1.svg',
        link: 'www.weibo.com',
      },
      {
        name: '抖音',
        svgPath:
          'https://jetzihan-img.oss-cn-beijing.aliyuncs.com/blog/icon-dy-1.svg',
        link: 'www.weibo.com',
      },
      // ...
    ],
  },

渲染结果：

#isHeroButton

是否显示 Hero 的按钮，String。可选值为 1（显示）或 0（不显示）。

关联参数：heroMode。仅在 heroMode 为 1 时有效。

#navItems

导航栏所有导航项目的链接。接受多条数据，每条数据对应一个导航栏选项。每条数据包含两个参数，分别是 name 和 to，其中 name 是链接名称，link 是链接的链接地址。

navItems: [
    {
      name: 'Docs',
      to: '/docs',
    },
    {
      name: 'Blog',
      to: '/posts',
    },
    {
      name: 'Nav',
      to: '/website',
    },
    // ...可以继续添加
],

以上数据渲染结果：

#navIcons

导航栏的社交图标，接受多条数据，每条数据对应一个图标，每条数据包含三个参数。分别是 name，icon 和 to，其中 name 是图标的名称，icon 是图标的路径，to 是图标的链接地址。

  navIcons: [
    {
      name: 'Github',
      icon: 'https://jetzihan-img.oss-cn-beijing.aliyuncs.com/blog/icon-github-1.svg',
      to: 'https://github.com/inannan423',
    },
    //... 可以继续添加
  ],

#showTheme

是否显示主题切换按钮，number。可选值为 1（显示）或 0（不显示）。

showTheme: 1,
showTheme: 0,

#themeSelect

选用的主题，我们为您提供了 29 种主题，您可以通过此参数来选择您喜欢的主题到展示列表。你可以到页面进行挑选。

  themeSelect: [
    {
      theme: 'winter',
    },
    {
      theme: 'forest',
    },
    {
      theme: 'dark',
    },
    {
      theme: 'night',
    },
    {
      theme: 'cupcake',
    },
    {
      theme: 'lofi',
    },
    // ...可以继续添加，请参考文档中的所有主题列表
  ],

可以接受多条数据，每条数据由一个大括号包围，只有一个参数 theme 后面跟着参数名称，所有主题列表见页面，请注意，在这个预览界面中主题名称是大写，实际应用时是英文小写，填写不正确会导致渲染失败。

上面的代码例子中渲染结果如下：

#ifFootItems

是否显示底部项目，number。可选值为 1（显示）或 0（不显示）。

可能的值：

ifFootItems: 1,
ifFootItems: 0,

显示时(ifFootItems:1)：

不显示时(ifFootItems:0)：

#ifFootTheme

不显示页脚项目时，是否显示底部主题切换，number。可选值为 1（显示）或 0（不显示）。

可能的值：

ifFootTheme: 1,
ifFootTheme: 0,

显示时(ifFootTheme:1)：

不显示时(ifFootTheme:0)：

#FooterItems

底部项目，接受多条数据。每条数据是一列的数据信息，每条数据中又有每行的数据，每条数据由 label 和 items 参数组成。label 指定这一列的标题，items 指定这一列的数据。其中 items 又包含多条数据，构成每一行。每条数据包含指定行号的 key 参数，指定连接名称的 name 参数，指定连接地址的 to 参数（支持内部导航和外部导航），以及指定在当前页面打开还是新开页面的 blank 参数，blank为0时，当前页面打开，blank为1时，新开页面。

下面是完整的一列数据示例：

FooterItems: [
  {
    label: '关于',
    items: [
      {
        key: '1',
        name: '关于',
        to: '/about',
        blank: 0,
      },
      {
        key: '2',
        name: '联系',
        to: '/contact',
        blank: 0,
      },
      {
        key: '3',
        name: '友情链接',
        to: '/links',
        blank: 0,
      },
    ],
  },
  // ...
]

下面是多列的例子：

 FooterItems: [
    // 每一列
    {
      label: '本站',
      // 列中的每一行
      items: [
        {
          key: 0,
          // 链接名称
          name: '部署指南',
          // 链接地址
          to: '/docs',
          blank: 0,
        },
        {
          key: 1,
          name: '博客',
          to: '/posts',
          blank: 0,
        },
        {
          key: 1,
          name: '快速链接',
          to: '/website',
          blank: 0,
        },
        // ... 可继续添加
      ],
    },
    {
      label: '技术支持',
      items: [
        {
          key: 0,
          name: 'React',
          to: 'https://react.docschina.org/',
          blank: 1,
        },
        {
          key: 1,
          name: 'Next.js',
          to: 'https://nextjs.org/',
          blank: 1,
        },
        {
          key: 2,
          name: 'Contentlayer',
          to: 'https://www.contentlayer.dev/',
          blank: 1,
        },
        {
          key: 3,
          name: 'DaisyUI',
          to: 'https://daisyui.com/',
          blank: 1,
        },
        {
          key: 4,
          name: 'Tailwind',
          to: 'https://tailwindcss.com/',
          blank: 1,
        },
      ],
    },
    {
      label: '链接',
      items: [
        {
          key: 0,
          name: 'Jetzihan',
          to: 'https://jetzihan.netlify.app',
          blank: 1,
        },
      ],
    },
    // ... 可继续添加
  ],

上述渲染结果：

#footLogo

底部logo，string。

  footLogo:
    'https://jetzihan-img.oss-cn-beijing.aliyuncs.com/blog/daymd_logo1.svg',

渲染结果：

#footText

底部Logo下的加粗文字，string。可能的值：

footText: 'Jetzihan',
footText: '版权所有 © 2020 Jetzihan',

示例值：

footText: 'Daymd by Jetzihan.',

#footTextNormal

底部Logo下的文字下的文字，string。可能的值：

footTextNormal: 'Made with ❤ by Chengzihan.',
footTextNormal: '欢迎光临',

影响区域：

#socialIcon

与 navIcons 类似，底部图标，接受多条数据。

socialIcon: [
    {
      name: 'bilibili',
      icon: 'https://jetzihan-img.oss-cn-beijing.aliyuncs.com/blog/bzhan.svg',
      to: 'https://bilibili.com',
    },
    {
      name: 'CSDN',
      icon: 'https://jetzihan-img.oss-cn-beijing.aliyuncs.com/blog/csdn.svg',
      to: 'https://csdn.com',
    },
    {
      name: '稀土掘金',
      icon: 'https://jetzihan-img.oss-cn-beijing.aliyuncs.com/blog/xitujuejin.svg',
      to: 'https://juejin.cn/',
    },
    // ... 可继续添加
],

#ifBackTop

是否显示返回顶部按钮，number,为 0 时不显示，为 1 时显示。

ifBackTop: 1,
ifBackTop: 0,

#backTopText

返回顶部按钮文字，string。您可以换成”Top“或者”🌵“甚至”❤“等字符

示例值：

backTopText: '↑',
backTopText: '❤',
backTopText: 'Top',
// ...

#notePageTitle

笔记页面标题,建议为tutorial、notes等。

示例值：

notePageTitle: 'tutorial',
notePageTitle: 'notes',

#rightContentText

右边的目录标题，string。

rightContentText: '目录',
rightContentText: 'Topics',
rightContentText: 'Content',

#ifBread

是否显示面包屑，number,为 0 时不显示，为 1 时显示。

ifBread: 1,
ifBread: 0,

#ifRightBar

文档页面是否显示右边目录栏，number,为 0 时不显示，为 1 时显示。

ifRightBar: 1,
ifRightBar: 0,

#ifPostRightBar

博客页面是否显示右边目录栏，number,为 0 时不显示，为 1 时显示。

ifPostRightBar: 1,
ifPostRightBar: 0,

#cardsInDoc

Markdown 中告示条显示的文字，默认值如下，你可以进行修改。

cardsInDoc: {
    // "注意"卡片的固定文字显示，示例：”注意“、”Warning！“、”⚠“、”警告“
    Warning: '注意',
    Tip: '提示',
    Danger: '危险',
    Note: '笔记',
    Example: '举例',
},

#docPostBgImg

doc和post的背景图片，string。可以为空，为空时不显示。需要显示时， url() 是必须的。否则不会显示。

docPostBgImg: 'url(https://api.maho.cc/random-img/pc.php)',
docPostBgImg: 'url()',
// ...

❌错误示例：

docPostBgImg: '',

显示效果：

#postPageTitle

博客页面的标题，string。

postPageTitle: '博客',
postPageTitle: '我的博客',

#mdCodeTheme

Markdown 中代码块高亮主题，string。

示例值：

mdCodeTheme: 'monokai',
mdCodeTheme: 'one-dark-pro',

所有支持的值：

  | 'css-variables'
  | 'dark-plus'
  | 'dracula-soft'
  | 'dracula'
  | 'github-dark-dimmed'
  | 'github-dark'
  | 'github-light'
  | 'hc_light'
  | 'light-plus'
  | 'material-darker'
  | 'material-default'
  | 'material-lighter'
  | 'material-ocean'
  | 'material-palenight'
  | 'min-dark'
  | 'min-light'
  | 'monokai'
  | 'nord'
  | 'one-dark-pro'
  | 'poimandres'
  | 'rose-pine-dawn'
  | 'rose-pine-moon'
  | 'rose-pine'
  | 'slack-dark'
  | 'slack-ochin'
  | 'solarized-dark'
  | 'solarized-light'
  | 'vitesse-dark'
  | 'vitesse-light'

#timeText

文档界面时间前显示的文字：string。

示例值：

timeText: '修改时间',
timeText: 'Last Updated:',

#postTimeText

博客界面时间前显示的文字：string。

示例值：

postTimeText: '发布时间',
postTimeText: 'Published:',

#ifDocLink

是否显示文档页面底部的链接，number,为 0 时不显示，为 1 时显示。

ifDocLink: 1,
ifDocLink: 0,

#docLinkText

文档页面底部的链接文字，string。

示例值：

docLinkText: '文档链接',
docLinkText: '仓库地址',
docLinkText: '关注公众号',

#docLinkUrl

文档页面底部的链接地址，string。文章底部附属链接地址，你可以填写你的Github仓库，也可以为你的公众号引流。

docLinkUrl: 'https://github.com/inannan423/Daymd/tree/main/content/docs',

#navTitle

个人导航页面标题。string。

示例值：

navTitle: '个人导航',
navTitle: 'My Navigation',

提示

个人导航为拓展功能，如果您选择不启用，可以在 navItems 选项删去 Nav 的数据

#ifNavBanner

是否显示个人导航页面的Banner，number,为 0 时不显示，为 1 时显示。

ifNavBanner: 1,
ifNavBanner: 0,

#navBanner

个人导航页面的Banner图片链接，string。url() 是必须的。否则不会显示。

示例值：

navBanner:
    'url(https://jetzihan-img.oss-cn-beijing.aliyuncs.com/blog/NavBanner.png)',

❌错误示例：

navBanner: 'https://jetzihan-img.oss-cn-beijing.aliyuncs.com/blog/NavBanner.png',

自定义 API 可真够多的，足够让你个性化使用了嘛？！您可以给我一个 Star 或者向我提出建议。(在页面右上角点击 Star)

提示

遇到问题？

如需要帮助，可以选择给电子邮箱发邮件: `czhorange@foxmail.com 或者点击进入 issue 提交界面.

Last Updated:2022-08-30

文档地址