Default theme
安装
npm install --save @sveltepress/theme-defaultsh
在 vite.config.(js|ts) 中配置
vite.config.(js|ts)
+
-
+
+
+
import { } from '@sveltepress/theme-default'
import { } from '@sveltepress/vite'
import { } from 'vite'
const = ({
: [
({/** 配置 */}),
({
: (/** 主题配置 */)
})
],
})
export default ts
主题配置
类型一览
类型一览
/// <reference types="vite/client" />
/// <reference types="@sveltepress/vite/types" />
/// <reference types="@sveltejs/kit/vite" />
declare module 'virtual:sveltepress/theme-default' {
import type { } from '@sveltepress/docsearch/types'
import type { } from '@sveltepress/twoslash'
import type { } from '@sveltepress/vite'
import type { } from '@vite-pwa/sveltekit'
import type { } from 'shiki'
import type { } from 'shiki/langs'
import type { } from 'svelte'
export interface WithTitle {
?: string
}
export interface LinkItem extends WithTitle {
?: string
?: string
?: boolean
?: boolean
?: LinkItem[]
}
export interface AutoSidebarOptions {
/**
* Enable auto-generated sidebar
*/
: boolean
/**
* Routes directory, default 'src/routes'
*/
?: string
/**
* Root paths to generate sidebar for, e.g. ['/guide/', '/reference/']
* If not specified, auto-detect from top-level route directories
*/
?: string[]
}
export interface DefaultThemeOptions {
?: <LinkItem>
?: string
?: string
?: <string, LinkItem[]> | AutoSidebarOptions
?: string
?: string
?: string
?: & {
?: string
}
?: <, 'container' | 'theme'>
?: | 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/context' {
import type { } 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
侧边栏可以通过两种方式配置：
自动生成侧边栏
传入一个包含 enabled: true 的对象，即可从路由目录自动生成侧边栏。
enabled- 设为true启用自动侧边栏生成routesDir- 自定义路由目录路径。默认为'src/routes'roots- 生成侧边栏的根路径，如['/guide/', '/reference/']。未指定时从顶级路由目录自动检测
页面可以通过 frontmatter 控制其在侧边栏中的显示：
title- 页面标题，同时用作侧边栏标签sidebarTitle- 覆盖侧边栏标签（优先级高于title）order- 同级排序。数字越小越靠前。默认为100sidebar- 设为false可将此页面从侧边栏中排除collapsible- 侧边栏分组是否可折叠
手动配置侧边栏
传入一个对象，键为分组路由前缀，值为侧边栏项数组：
title组标题collapsible组是否可折叠to链接地址items子链接，若配置该属性，则to将会失效，展示一个分组链接
highlighter
一个包含如下属性的代码块高亮相关配置：
languages- 自定义支持的语言列表，默认为：['svelte', 'sh', 'js', 'html', 'ts', 'md', 'css', 'scss']themeLight- 日间模式所使用的高亮主题，默认为：vitesse-lightdarkTheme- 夜间模式所使用的高亮主题，默认为：night-owltwoslash- 设置为true可以开启 Twoslash 功能. 默认为false
TIP
你可以在 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 相关脚本
search
导航栏自定义搜索组件。
- 类型：
Component | string - 传入
Component时将直接渲染。 - 传入
string时会被当作组件路径，并通过动态import()加载。
示例：
// 使用 Meilisearch
search: '@sveltepress/meilisearch/Search.svelte'
// 或自定义组件
search: '/src/lib/MySearch.svelte'ts
search 与 docsearch 的优先级
当 search 和 docsearch 同时配置时，search 优先，docsearch 将被忽略。
docsearch
- appId
- apiKey
- indexName
阅读 Docsearch 来获得更多信息
仅当未提供
search时，才会使用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 提示弹窗中的文本，下面的每个字段都直接对应到弹窗中对应意义的文本tipreloadcloseappReadyToWorkOfflinenewContentAvailable
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']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 type { SveltepressContext } from '@sveltepress/theme-default/context'
import { } from '@sveltepress/theme-default/context'
import { } from 'svelte'
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": "搜索",
"to": "/guide/default-theme/search/"
},
{
"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": "generateSW",
"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 typests