One

主题

2025-03-09配置配置
2385
10.4m
Get...

文章配置 ​

articleAnalyze ​

文章信息分析配置，分别作用在首页和文章页。

提示

如果在 config.mts中配置，则首页和文章页都生效。

文章页的图片点击可以预览，但是当图片元素的 class 里存在 no-preview，则不会触发预览，这对于兼容 Teek 的图片相关插件有所帮助。

ts
import{defineTeekConfig } from"vitepress-theme-teek/config";constteekConfig=defineTeekConfig({articleAnalyze:{showIcon:true,dateFormat:"yyyy-MM-dd hh:mm:ss",showInfo:true,showAuthor:true,showCreateDate:true,showUpdateDate:false,showCategory:false,showTag:false,},});
yaml
---tk:articleAnalyze:showIcon:truedateFormat:yyyy-MM-dd hh:mm:ssshowInfo:trueshowAuthor:trueshowCreateDate:trueshowUpdateDate:falseshowCategory:falseshowTag:false---
yaml
---articleAnalyze:showIcon:truedateFormat:yyyy-MM-dd hh:mm:ssshowInfo:trueshowAuthor:trueshowCreateDate:trueshowUpdateDate:falseshowCategory:falseshowTag:false---
ts
interfaceArticle{showIcon?:boolean;dateFormat?:"yyyy-MM-dd"|"yyyy-MM-dd hh:mm:ss"|((date:string) =>string);showInfo?:boolean|ArticleInfoPosition[];showAuthor?:boolean|ArticleInfoPosition[];showCreateDate?:boolean|ArticleInfoPosition[];showUpdateDate?:boolean;showCategory?:boolean|ArticleInfoPosition[];showTag?:boolean|ArticleInfoPosition[];teleport?:{selector?:string;position?:"before"|"after";className?:string;};imageViewer?:Partial<ImageViewerProps>;}

配置项中，teleport可以将文章信息传送到指定位置，仅限在文章页生效，默认在文章页顶部。

如将文章信息传到一级标题下面：

ts
import{defineTeekConfig } from"vitepress-theme-teek/config";constteekConfig=defineTeekConfig({articleAnalyze:{teleport:{selector:"h1",position:"after",className:"h1-bottom-info",},},});
yaml
---tk:articleAnalyze:teleport:selector:h1position:afterclassName:h1-bottom-info---

面包屑配置。

ts
import{defineTeekConfig } from"vitepress-theme-teek/config";constteekConfig=defineTeekConfig({breadcrumb:{enabled:true,showCurrentName:false,separator:"/",},});
yaml
---tk:breadcrumb:enabled:trueshowCurrentName:falseseparator:/---
ts
interfaceBreadcrumb{enabled?:boolean;showCurrentName?:boolean;separator?:string;homeLabel?:string;}

pageStyle ​

  • 类型："default"|"card"|"segment"|"card-nav"|"segment-nav"
  • 默认值：default

文章页的样式风格，default为 VitePress 原生风格，card为单卡片风格，segment为片段卡片风格，card-nav和 segment-nav会额外修改导航栏样式。

提示

在文章页的 frontmatter配置 pageStyle，可以针对不同的文章页开启不同的样式风格。

如果使用了主题增强的布局尺寸切换，且布局尺寸不是 VitePress 默认尺寸，则该配置项失效

ts
import{defineTeekConfig } from"vitepress-theme-teek/config";constteekConfig=defineTeekConfig({pageStyle:"segment-nav",});
yaml
---pageStyle:segment-nav---

appreciation ​

赞赏功能配置。

赞赏功能提供 3 个位置选择：

  • doc-after：文章页底部，评论区上方
  • doc-after-popper：文章页底部，评论区上方，以弹框形式出现 v1.3.0
  • aside-bottom：文章页大纲栏下方

每个位置分别有不同的配置项。

ts
import{defineTeekConfig } from"vitepress-theme-teek/config";constteekConfig=defineTeekConfig({appreciation:{position:"doc-after",options:{icon:"weChatPay",expandTitle:"打赏支持",collapseTitle:"下次一定",content:`<img src='/teek-logo-large.png'>`,expand:false,},},});
ts
import{defineTeekConfig } from"vitepress-theme-teek/config";constteekConfig=defineTeekConfig({appreciation:{position:"doc-after-popper",options:{trigger:"click",icon:"weChatPay",title:"打赏支持",content:`<img src='/teek-logo-large.png'> <img src='/teek-logo-large.png'>`,},},});
ts
import{defineTeekConfig } from"vitepress-theme-teek/config";constteekConfig=defineTeekConfig({appreciation:{position:"aside-bottom",options:{title:`<span style="color: var(--tk-theme-color)">欢迎打赏支持</span>`,content:`<img src='/teek-logo-large.png'>`,},},});
ts
importtype{IconProps } from"vitepress-theme-teek";typeAppreciation<TextendskeyofAppreciationPosition="">={position?:T;options?:AppreciationPosition[T];};typeAppreciationPosition={"":object;"aside-bottom":{title?:string;content?:string;};"doc-after":{buttonHtml?:string;icon?:IconProps["icon"] |"weChatPay"|"alipay";expandTitle?:string;collapseTitle?:string;content?:string;expand?:boolean;};"doc-after-popper":{trigger?:"click"|"hover";buttonHtml?:string;icon?:IconProps["icon"] |"weChatPay"|"alipay";title?:string;content?:string;};};

Teek 内置两个 icon：

  • weChatPay：微信支付图标
  • alipay：支付宝图标

如果您需要自定义图标，则通过 icon配置项传入。

赞赏功能同样支持在单个 Markdown 的 frontmatter配置来覆盖全局配置。

yaml
---appreciation:position:doc-afteroptions:icon:weChatPayexpandTitle:打赏支持collapseTitle:下次一定content:"<img src='/teek-logo-large.png'>"expand:false---

articleShare ​

文章分享配置。

本功能主要是在文章右侧的大纲栏添加一个按钮，点击后自动复制文章链接到剪贴板。

ts
import{defineTeekConfig } from"vitepress-theme-teek/config";constteekConfig=defineTeekConfig({articleShare:{enabled:true,text:"分享此页面",copiedText:"链接已复制",query:false,hash:false,},});
yaml
---articleShare:enabled:truetext:分享此页面copiedText:链接已复制query:falsehash:false---
ts
importtype{IconProps } from"vitepress-theme-teek";interfaceArticleShare{enabled?:boolean;icon?:IconProps["icon"];text?:string;copiedIcon?:IconProps["icon"];copiedText?:string;query?:boolean;hash?:boolean;}

articleTopTip ​

在每个文章页顶部显示 VitePress 容器添加提示，使用场景如超过半年的文章自动提示文章内容可能已过时。

ts
import{defineTeekConfig } from"vitepress-theme-teek/config";constteekConfig=defineTeekConfig({articleTopTip:(frontmatter,localeIndex,page) =>{consttip:Record<string,string>={type:"warning",text:"文章发布较早，内容可能过时，阅读注意甄别。",};constlongTime=6*30*24*60*60*1000;if(frontmatter.date &&Date.now() -newDate(frontmatter.date).getTime() >longTime) returntip;},});
ts
importtype{PageData } from"vitepress";importtype{VpContainerProps } from"@teek/components/common/VpContainer/src/vpContainer";interfaceTeekConfig{articleTopTip?:(frontmatter:PageData["frontmatter"],localeIndex:string,page:PageData) =>VpContainerProps|undefined;}

articleBottomTip v1.3.4​

在每个文章页顶部显示 VitePress 容器添加提示，使用场景如添加文章版权声明。

ts
import{defineTeekConfig } from"vitepress-theme-teek/config";constteekConfig=defineTeekConfig({articleBottomTip:() =>{return{type:"tip",text:`<p>作者：Teek</p>
             <p>版权：此文章版权归 Teek 所有，如有转载，请注明出处!</p>
             <p style="margin-bottom: 0">链接：可点击右上角分享此页面复制文章链接</p>
            `,};},});
ts
importtype{PageData } from"vitepress";importtype{VpContainerProps } from"@teek/components/common/VpContainer/src/vpContainer";interfaceTeekConfig{articleBottomTip?:(frontmatter:PageData["frontmatter"],localeIndex:string,page:PageData) =>VpContainerProps|undefined;}

articleUpdate v1.2.0​

文章页底部的最近更新栏配置。

ts
import{defineTeekConfig } from"vitepress-theme-teek/config";constteekConfig=defineTeekConfig({articleUpdate:{enabled:true,limit:3,},});
yaml
---articleShare:false# 禁用文章分享栏---
yaml
---articleShare:enabled:truelimit:3---
ts
interfaceArticleUpdate{enabled?:boolean;limit?:number;}

:::

最近更新