Default theme

安装

npm install --save @sveltepress/theme-default
sh

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

vite.config.(js|ts)
+
-
+
+
+
import {  } from 'vite'
import {  } from '@sveltepress/vite'

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

const  = ({
  : [
    ({/** 配置 */}), 
    ({ 
      : (/** 主题配置 */) 
    }) 
  ],
})

export default 
ts

主题配置

类型一览

类型一览

/// <reference types="vite/client" />
/// <reference types="@sveltepress/vite/types" />


declare module 'virtual:sveltepress/theme-default' {
  import type {  } from 'shiki/langs'
  import type {  } from '@sveltepress/vite'
  import type {  } from '@vite-pwa/sveltekit'
  
  export interface WithTitle {
    ?: string
  }
  
  export interface LinkItem extends WithTitle {
    ?: string
    ?: string
    ?: boolean
    ?: boolean
    ?: LinkItem[]
  }

  export interface DefaultThemeOptions {
    : <LinkItem>
    ?: string
    ?: string
    ?: <string, LinkItem[]>
    ?: string
    ?: string
    ?: string
    ?:  & {
      ?: string
    }
    ?: {
      : string
      : string
      : string
    }
    ?: {
      : string
      : string
      ?: string
      ?: string
      ?: {
        : string
        : string
      }
    }
    ?: {
      ?: []
      ?: string
      ?: string
      ?: boolean
    }
    ?: {
      ?: string
      ?: string
      ?: string
      ?: string
      ?: string
      ?: string
      ?: {
        ?: string
        ?: string
        ?: string
        ?: string
        ?: string
      }
      ?: string
    }
    ?: {
      [: string]: string[]
    }
  }
  export type  = <DefaultThemeOptions>

  const : DefaultThemeOptions
  export default 
}


declare module '@sveltepress/theme-default/components' {
  export const : any
  export const : any
  export const : any
  export const : any
  export const : any
  export const : any
  export const : any
  export const : any
}

declare module '@sveltepress/theme-default/context' {
  import {  } from 'svelte/store'
  export interface SveltepressContext {
    : <boolean>
  }
  export const : Symbol
}
ts

navbar

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

discord

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

github

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

logo

Logo 图片

sidebar

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

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

highlighter

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

  • languages - 自定义支持的语言列表,默认为:['svelte', 'sh', 'js', 'html', 'ts', 'md', 'css', 'scss']
  • themeLight - 日间模式所使用的高亮主题,默认为:vitesse-light
  • darkTheme - 夜间模式所使用的高亮主题,默认为:night-owl
  • twoslash - 设置为 true 可以开启
    Twoslash
    功能. 默认为 false
TIP

你可以在

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

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',
}
js
  • 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'],
        },
        highlighter: {
ts

这些图标看起来像这样:

<script lang="ts">
  import {  } from '@sveltepress/theme-default/components'
  import  from 'virtual:sveltepress/theme-default'
</script>
<div class="flex items-center gap-4 text-[48px] flex-wrap">
  {#each .(. || []) as [, ]}
    {#each  as }
      <div>
        < {} {} />
      </div>
    {/each}
  {/each}
</div>
svelte
点击展开/折叠代码

全局上下文

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

getContext
API 来获取所有的上下文,下面是一个示例:

isDark: false
<script lang="ts">
  import {  } from 'svelte'
  import {  } from '@sveltepress/theme-default/context'
  import type { SveltepressContext } from '@sveltepress/theme-default/context'

  const {  } = <SveltepressContext>(
</script>

<div class:dark-text="{}" class="text-10">
  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
        },
        {
          "title": "বাংলা",
          "to": "https://bn.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"
    ]
  },
  "highlighter": {
    "twoslash": true
  }
}
  
<script>
  import  from 'virtual:sveltepress/theme-default'
</script>
<div class="viewer">
  <pre>
    {.(, 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
ts
最后更新于: 2024/03/22 12:10:31