主题功能说明 | NotionNext帮助手册

主题功能说明

主题功能介绍

NotionNext会扫描/themes目录下的文件夹，并根据文件夹的名字生成一个主题，只要在配置中将您的当前主题设置为对应文件夹名字即可，注意都是小写。

多达数十款主题风格任您挑选，其中有适合做技术文档的Gitbook主题（当前文档就是使用Gitbook主题），也有适合做导航站点的Nav主题，还有适合做产品落地页官网的Landing主题与Starter主题，以及适合做相册的Plog主题。

点击博客网页左下角的挂件可以在线切换主题。

每个主题下都有四个部分组成，以example主题为例，目录下有四个元素：

原本在blog.config.js 中可以设置网站的背景色，但由于不同的主题设计风格不同，所以无法统一。因此背景色交由每个主题自行设置。

在/themes/example/index.js 中 ,找到 theme-example的这行：

其中bg-white 表示默认主题背景色为白色，dark:bg-black表示夜间模式的背景色为黑色。

您可以任意调整成自己的色号，按照TailwindCSS的自定义颜色教程，可以如下设置：bg-[#dca846] dark:bg-[#eeeeee]

同理，要修改其他主题的背景色，也可以通过以上步骤

可以改变blog.config.js配置中THEME这一项的值；示例如下：

您可以像我的博客站一样，在页面上开启一个实时切换主题的按钮，以供预览；开启方式：在blog.config.js中开启

开启后效果如下：网页上会始终悬挂一个可以拖拽的面板，用于切换主题。

您可以复制一个example文件夹到themes目录下，命名为您的主题名字，例如复制一个example文件夹，并且重命名为starter主题。

然后根据您的喜好调整 index.js 中的LayoutBase 基础布局；它是主题每个页面要用到的框架布局；其次您可以从各个其它主题中复制喜欢的components组件，把他放在当前主题的components目录下使用。

从而搭配出您喜欢的主题。

也欢迎您将自己开发设计的主题，通过PR的方式提交到NotionNext中央仓库中，提供给更多站友们使用。

我为人人，人人为我。