Default theme
安装
npm install --save @sveltepress/theme-default
在 vite.config.(js|ts) 中配置
import { } from 'vite'
import { } from '@sveltepress/vite'
import { } from '@sveltepress/theme-default'
const = ({
: [
({/** 配置 */}),
({
: (/** 主题配置 */)
})
],
})
export default
主题配置
类型一览
/// <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
}
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
你可以在
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
提供自 G-XXXXXXX
配置该项将会自动添加 gtag 相关脚本
docsearch
- appId
- apiKey
- indexName
阅读
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
一些你可能在编写文档过程中用到的
为一个对象,键是分类名称,值是该分类下需要预构建的图标集合,下面是此站点的配置
'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: {
这些图标看起来像这样:
<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>
全局上下文
全局上下文的键在模块 @sveltepress/theme-default/context
中,你可以通过
<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>
上下文属性一览:
$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>
Typescript
您需要在 src/app.d.ts 文件中添加 @sveltepress/theme-default/types
来获得默认主题相关类型提示
/// <reference types="@sveltepress/theme-default/types" />
// Your other types