Default theme

安装

npm install --save @sveltepress/theme-default

在 vite.config.(js|ts) 中配置

vite.config.(js|ts)

import { defineConfig } from 'vite'
import { sveltepress } from '@sveltepress/vite'

import { defaultTheme } from '@sveltepress/theme-default' 

const config = defineConfig({
  plugins: [
    sveltepress(), 
    sveltepress({ 
      theme: defaultTheme(/** theme options */) 
    }) 
  ],
})

export default config

主题配置

}

export interface DefaultThemeOptions {
  : <>
  ?: string
  ?: string
  ?: <string, []>
  ?: string
  ?: string
  ?: string
  ?:  & {
    ?: string
  }
  ?: {
    : string
    : string
    : string
  }
  ?: {
    : string
    : string
    ?: string
    ?: string
    ?: {
      : string
      : string
    }
  }
  ?: {
    ?: []
    ?: string
    ?: string
  }
  ?: {
    ?: string
    ?: string
    ?: string
    ?: string
    ?: string
    ?: string
    ?: {
      ?: string
      ?: string
      ?: string
      ?: string
      ?: string
    }
    ?: string
  }
  ?: {
    [: string]: string[]

`navbar`

title
标题
to
链接地址
icon 自定义展示 HTML 内容，通常用于展示自定义图标内容
external
如果设置为 true，将会展示一个标记外部链接的图标
items
子项，如果配置会展示下拉导航

`discord`

Discord 链接，如果提供将会展示一个 Discord 图标

`github`

GitHub 仓库链接，如果提供将会展示一个 GitHub 图标

`logo`

Logo 图片

`sidebar`

一个对象，键为分组路由前缀，值为包含如下属性的对象数组

title
组标题
collapsible
组是否可折叠
to
链接地址
items
子链接，若配置该属性，则 to 将会失效，展示一个分组链接

`highlight`

一个包含如下属性的代码块高亮相关配置：

languages - 自定义支持的语言列表，默认为：


const : [] = ['svelte', 'sh', 'js', 'html', 'ts', 'md', 'css', 'scss']

themeLight - 日间模式所使用的高亮主题，默认为：vitesse-light
darkTheme - 夜间模式所使用的高亮主题，默认为：night-owl

你可以在

Shiki Repo

获得所有支持的语言以及主题

`editLink`

页面底部展示的“在 Github” 上编辑此页的链接，例如该站点使用的配置为：https://github.com/Blackman99/sveltepress/edit/main/packages/docs-site/src/routes/:route

:route 代表路由，例如 src/routes/foo/bar/+page.md => /foo/bar

`ga`

提供自

Google Analytics

，形如 G-XXXXXXX

配置该项将会自动添加 gtag 相关脚本

`docsearch`

appId
apiKey
indexName

阅读

Docsearch

来获得更多信息

`pwa`

阅读

PWA 章节

来获得更多信息

`themeColor`

主题色相关

light - 日间模式主题色，也会应用在 pwa 顶部窗口导航
dark - 夜间模式主题色，也会应用在 pwa 顶部窗口导航
gradient - 全站使用到的渐变色，如：首页标题，首页按钮，链接高亮文字

const defaultGradient = {
  start: '#fa709a',
  end: '#fee140',
}

primary - 站点主色
hover - 鼠标上浮时主色

`i18n`

一些固定的文本内容，可以被您的配置所覆盖，方便站点国际化

onThisPage - "On this page"
suggestChangesToThisPage - "Suggest changes to this page"
lastUpdateAt - "Last update at:"
previousPage - "Previous"
nextPage - "Next"
expansionTitle - 在 Markdown 以及 Svelte 可折叠代码块上的折叠面板标题："Click to expand/fold code"
pwa - PWA 提示弹窗中的文本，下面的每个字段都直接对应到弹窗中对应意义的文本
- tip
- reload
- close
- appReadyToWorkOffline
- newContentAvailable
footnoteLabel - 自动生成的脚注标题，默认为 "Footnotes"

`preBuildIconifyIcons`

一些你可能在编写文档过程中用到的

Iconify

图标

为一个对象，键是分类名称，值是该分类下需要预构建的图标集合，下面是此站点的配置

'vscode-icons': ['file-type-svelte', 'file-type-markdown', 'file-type-vite'],
'logos': ['typescript-icon', 'svelte-kit'],
'emojione': ['artist-palette'],
'openmoji': ['red-apple'],
'ph': ['smiley', 'layout-duotone'],
'noto': ['package'],
'solar': ['chat-square-code-outline', 'reorder-outline'],
'carbon': ['tree-view-alt', 'import-export'],
'ic': ['sharp-rocket-launch'],
'tabler': ['icons'],
'mdi': ['theme-light-dark'],
        },
      })

这些图标看起来像这样：

<script>
  import { IconifyIcon } from '@sveltepress/theme-default/components'
  import themeOptions from 'virtual:sveltepress/theme-default'
</script>
<div class="flex items-center gap-4 text-[48px] flex-wrap">
  {#each Object.entries(themeOptions.preBuildIconifyIcons) as [collection, names]}
    {#each names as name}
      <div>
        <IconifyIcon {collection} {name} />
      </div>
    {/each}
  {/each}
</div>

svelte

全局上下文

全局上下文的键在模块 @sveltepress/theme-default/context 中，你可以通过

getContext

API 来获取所有的上下文，下面是一个示例：

isDark: false

<script>
  import { getContext } from 'svelte'
  import { SVELTEPRESS_CONTEXT_KEY } from '@sveltepress/theme-default/context'

  const { isDark } = getContext(SVELTEPRESS_CONTEXT_KEY)
</script>

<div class:dark-text="{$isDark}" class="text-10">
  isDark: {$isDark}
</div>
<style>
  .dark-text {
    --at-apply: 'text-red';
  }
</style>

svelte

上下文属性一览：

$isDark - 用来表示当前的主题是否为暗色，是一个响应式的
svelte store

虚拟模块

`virtual:sveltepress/theme-default`

这个模块默认导出所有传递给 defaultTheme() 函数的选项

这是当前站点所使用的配置：

    {
  "navbar": [
    {
      "title": "指南",
      "to": "/guide/introduction/"
    },
    {
      "title": "参考",
      "to": "/reference/vite-plugin/"
    },
    {
      "icon": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"1em\" height=\"1em\" viewBox=\"0 0 32 32\"><path fill=\"currentColor\" d=\"M27.85 29H30l-6-15h-2.35l-6 15h2.15l1.6-4h6.85zm-7.65-6l2.62-6.56L25.45 23zM18 7V5h-7V2H9v3H2v2h10.74a14.71 14.71 0 0 1-3.19 6.18A13.5 13.5 0 0 1 7.26 9h-2.1a16.47 16.47 0 0 0 3 5.58A16.84 16.84 0 0 1 3 18l.75 1.86A18.47 18.47 0 0 0 9.53 16a16.92 16.92 0 0 0 5.76 3.84L16 18a14.48 14.48 0 0 1-5.12-3.37A17.64 17.64 0 0 0 14.8 7z\"/></svg>",
      "items": [
        {
          "title": "English",
          "to": "https://sveltepress.site/",
          "external": true
        }
      ]
    }
  ],
  "sidebar": {
    "/guide/": [
      {
        "title": "介绍",
        "collapsible": true,
        "items": [
          {
            "title": "Sveltepress 是什么",
            "to": "/guide/introduction/"
          },
          {
            "title": "快速开始",
            "to": "/guide/quick-start/"
          },
          {
            "title": "主题",
            "to": "/guide/themes/"
          },
          {
            "title": "与 Typescript 一起开发",
            "to": "/guide/typescript/"
          }
        ]
      },
      {
        "title": "Markdown 相关",
        "items": [
          {
            "title": "写作基础",
            "to": "/guide/markdown/basic-writing/"
          },
          {
            "title": "Frontmatter",
            "to": "/guide/markdown/frontmatter/"
          },
          {
            "title": "在 Markdown 中使用 Svelte",
            "to": "/guide/markdown/svelte-in-markdown/"
          }
        ]
      },
      {
        "title": "默认主题特性",
        "collapsible": true,
        "items": [
          {
            "title": "Frontmatter",
            "to": "/guide/default-theme/frontmatter/"
          },
          {
            "title": "导航栏",
            "to": "/guide/default-theme/navbar/"
          },
          {
            "title": "侧边栏",
            "to": "/guide/default-theme/sidebar/"
          },
          {
            "title": "主页",
            "to": "/guide/default-theme/home-page/"
          },
          {
            "title": "内置组件",
            "to": "/guide/default-theme/builtin-components/"
          },
          {
            "title": "标题与页内导航",
            "to": "/guide/default-theme/headings-and-anchors/"
          },
          {
            "title": "高亮块",
            "to": "/guide/default-theme/admonitions/"
          },
          {
            "title": "代码相关",
            "to": "/guide/default-theme/code-related/"
          },
          {
            "title": "Twoslash",
            "to": "/guide/default-theme/twoslash/"
          },
          {
            "title": "Unocss",
            "to": "/guide/default-theme/unocss/"
          },
          {
            "title": "Docsearch",
            "to": "/guide/default-theme/docsearch/"
          },
          {
            "title": "PWA",
            "to": "/guide/default-theme/pwa/"
          },
          {
            "title": "Google Analytics",
            "to": "/guide/default-theme/google-analytics/"
          }
        ]
      }
    ],
    "/reference/": [
      {
        "title": "参考",
        "items": [
          {
            "title": "Vite 插件",
            "to": "/reference/vite-plugin/"
          },
          {
            "title": "默认主题",
            "to": "/reference/default-theme/"
          }
        ]
      }
    ]
  },
  "editLink": "https://github.com/Blackman99/sveltepress/edit/main/packages/docs-site/src/routes/:route",
  "github": "https://github.com/Blackman99/sveltepress",
  "logo": "/sveltepress.svg",
  "discord": "https://discord.gg/MeYRrGGxbE",
  "ga": "G-J2W78BKCHB",
  "docsearch": {
    "apiKey": "1c6fd2e6532da778b7eb108990545866",
    "appId": "D6826K4656",
    "indexName": "cn",
    "translations": {
      "button": {
        "buttonText": "搜索",
        "buttonAriaLabel": "搜索"
      },
      "modal": {
        "searchBox": {
          "resetButtonTitle": "重置查询",
          "resetButtonAriaLabel": "重置查询",
          "cancelButtonText": "取消",
          "cancelButtonAriaLabel": "取消"
        },
        "startScreen": {
          "recentSearchesTitle": "最近",
          "noRecentSearchesText": "无最近搜索",
          "saveRecentSearchButtonTitle": "保存当前搜索",
          "removeRecentSearchButtonTitle": "从历史中删除当前搜索",
          "favoriteSearchesTitle": "最爱的搜索",
          "removeFavoriteSearchButtonTitle": "从最爱中移除"
        },
        "errorScreen": {
          "titleText": "无法获取搜索结果",
          "helpText": "请检查网络连接"
        },
        "footer": {
          "selectText": "请选择",
          "selectKeyAriaLabel": "输入关键字",
          "navigateText": "导航",
          "navigateUpKeyAriaLabel": "向上",
          "navigateDownKeyAriaLabel": "向下",
          "closeText": "关闭",
          "closeKeyAriaLabel": "关闭",
          "searchByText": "根据文字搜索"
        },
        "noResultsScreen": {
          "noResultsText": "没有找到结果",
          "suggestedQueryText": "您可能想搜索",
          "reportMissingResultsText": "没有找到结果？请报告缺失",
          "reportMissingResultsLinkText": "报告缺失"
        }
      }
    }
  },
  "pwa": {
    "scope": "/",
    "base": "/",
    "strategies": "injectManifest",
    "kit": {
      "trailingSlash": "always"
    },
    "darkManifest": "/manifest-dark.webmanifest",
    "manifest": {
      "start_url": "/",
      "scope": "/",
      "name": "Sveltepress zh-CN",
      "short_name": "Sveltepress zh-CN",
      "icons": [
        {
          "src": "/android-chrome-192x192.png",
          "sizes": "192x192",
          "type": "image/png"
        },
        {
          "src": "/android-chrome-512x512.png",
          "sizes": "512x512",
          "type": "image/png"
        }
      ],
      "theme_color": "#f2f2f2",
      "background_color": "#f2f2f2",
      "display": "standalone"
    }
  },
  "themeColor": {
    "light": "#f2f2f2",
    "dark": "#18181b"
  },
  "i18n": {
    "suggestChangesToThisPage": "在 Github 上编辑此页",
    "lastUpdateAt": "最后更新于：",
    "previousPage": "上一页",
    "nextPage": "下一页",
    "expansionTitle": "点击展开/折叠代码",
    "pwa": {
      "tip": "提示",
      "reload": "刷新",
      "close": "关闭",
      "appReadyToWorkOffline": "应用已经可以离线工作",
      "newContentAvailable": "发现新内容，点击刷新按钮来更新"
    },
    "onThisPage": "当前页面",
    "footnoteLabel": "脚注"
  },
  "preBuildIconifyIcons": {
    "vscode-icons": [
      "file-type-svelte",
      "file-type-markdown",
      "file-type-vite"
    ],
    "logos": [
      "typescript-icon",
      "svelte-kit"
    ],
    "emojione": [
      "artist-palette"
    ],
    "openmoji": [
      "red-apple"
    ],
    "ph": [
      "smiley",
      "layout-duotone"
    ],
    "noto": [
      "package"
    ],
    "solar": [
      "chat-square-code-outline",
      "reorder-outline"
    ],
    "carbon": [
      "tree-view-alt",
      "import-export"
    ],
    "ic": [
      "sharp-rocket-launch"
    ],
    "tabler": [
      "icons"
    ],
    "mdi": [
      "theme-light-dark"
    ]
  }
}

<script>
  import themeOptions from 'virtual:sveltepress/theme-default'
</script>
<div class="viewer">
  <pre>
    {JSON.stringify(themeOptions, null, 2)}
  </pre>
</div>
<style>
  .viewer {
    max-height: 40vh;
    overflow-y: auto;
    overflow-x: hidden;
  }
</style>

svelte

Typescript

您需要在 src/app.d.ts 文件中添加 @sveltepress/theme-default/types 来获得默认主题相关类型提示

/src/app.d.ts

/// <reference types="@sveltepress/theme-default/types" />

// Your other types

在 Github 上编辑此页

最后更新于： 2024/02/29 06:34:59