✨ 更新日志
🚀 安装部署
✒ 写作指引
🛠 站点配置
📊 网站统计
⭐ 主题配置
📩 评论插件
🧷 外部插件
🔊 站点订阅
⌨ 开发指引
👨👦👦 联系方式
🤝 购买服务
主题功能说明
category
tags
type
status
slug
date
password
Last edited time
Jul 2, 2024 05:34 AM
summary
icon
主题功能介绍
NotionNext会扫描/themes目录下的文件夹,并根据文件夹的名字生成一个主题,只要在配置中将您的当前主题设置为对应文件夹名字即可,注意都是小写。
![主题文件夹](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Feced1717-9a1a-423d-9820-163a4b5036fd%2FUntitled.png?table=block&id=0ef3af21-f1d8-4b25-bf0b-a325053c9ecd&t=0ef3af21-f1d8-4b25-bf0b-a325053c9ecd&width=192&cache=v2)
主题预览
多达数十款主题风格任您挑选,其中有适合做技术文档的Gitbook主题(当前文档就是使用Gitbook主题),也有适合做导航站点的Nav主题,还有适合做产品落地页官网的Landing主题与Starter主题,以及适合做相册的Plog主题。
点击博客网页左下角的挂件可以在线切换主题。
![notion image](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F6c096b44-beb9-48ee-8f92-1efdde47f3a3%2Ffd3b55fc-17da-4b6b-bd00-598cf0299965%2FUntitled.png?table=block&id=7e8d3465-3ed1-403b-ae06-40ea8026561d&t=7e8d3465-3ed1-403b-ae06-40ea8026561d&width=176&cache=v2)
- Landing 一个落地页主题
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Fda9b2911-c867-4cd8-8d4f-e7b3c765205c%2FUntitled.png?table=block&id=7ca8f15f-a9ce-4ec8-93e4-a0257ca11e4b&t=7ca8f15f-a9ce-4ec8-93e4-a0257ca11e4b&width=528&cache=v2)
主题目录构成
![notion image](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F6c096b44-beb9-48ee-8f92-1efdde47f3a3%2Fc0417962-6913-499c-87e7-d0f99a54dfce%2FUntitled.png?table=block&id=c3e31354-674e-4312-9fd1-3091ac1d8b52&t=c3e31354-674e-4312-9fd1-3091ac1d8b52&width=270&cache=v2)
每个主题下都有四个部分组成,以example主题为例,目录下有四个元素:
- components 组件文件夹,下面存放着主题用到的所有组件,项目采用react架构,所有的按钮模块都是单独的组件。
- config.js 针对当前主题的配置
- index.js 存放主题的基础布局和对应的路由关系
- style.js 自定义的css样式
如何修改默认主题?
可以改变blog.config.js配置中
THEME
这一项的值;示例如下:- 方法1:改动github中的源代码:
- 方法2 , 在vercel后台添加环境变量:
NEXT_PUBLIC_THEME
![添加环境变量后记得在Deployment中重新部署](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Ff20a06ea-f372-4e26-b5b4-17097fbc67af%2FUntitled.png?table=block&id=1e1afbde-243d-40b4-9c0c-947d560da41b&t=1e1afbde-243d-40b4-9c0c-947d560da41b&width=480&cache=v2)
- 方法3: 使用Notion_config,在您的notion笔记中配置默认主题
在线切换主题
您可以像我的博客站一样,在页面上开启一个实时切换主题的按钮,以供预览;开启方式:
在blog.config.js中开启
开启后效果如下:网页上会始终悬挂一个可以拖拽的面板,用于切换主题。
![notion image](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F6c096b44-beb9-48ee-8f92-1efdde47f3a3%2Fddc6b95e-c897-429f-907c-d08d073acb55%2FUntitled.png?table=block&id=73ce2c1e-abea-4aa8-b813-b235a3b9b1df&t=73ce2c1e-abea-4aa8-b813-b235a3b9b1df&width=216&cache=v2)
如何个性化您的主题
主题的自定义微调
- 可以参考本文档丶关于各个主题可支持的配置进行修改:
![notion image](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F6c096b44-beb9-48ee-8f92-1efdde47f3a3%2F407c3008-a5fd-4d5e-a9eb-17e5634467e2%2FUntitled.png?table=block&id=5fd4a930-ed29-4d2f-ab54-6fd7612327d2&t=5fd4a930-ed29-4d2f-ab54-6fd7612327d2&width=336&cache=v2)
- 另外您可以参考开发指引中,《CSS调整NotionNext样式》这篇文章自定义您的主题。
创建您的主题
您可以复制一个example文件夹到themes目录下,命名为您的主题名字,例如复制一个example文件夹,并且重命名为starter主题。
然后根据您的喜好调整 index.js 中的LayoutBase 基础布局;它是主题每个页面要用到的框架布局;其次您可以从各个其它主题中复制喜欢的components组件,把他放在当前主题的components目录下使用。从而搭配出您喜欢的主题。
![notion image](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F6c096b44-beb9-48ee-8f92-1efdde47f3a3%2F4bf891c1-3e7c-48d9-a1b6-bf2315eeb222%2FUntitled.png?table=block&id=beae63c5-1187-4a36-80a4-a5058d5800a8&t=beae63c5-1187-4a36-80a4-a5058d5800a8&width=288&cache=v2)
也欢迎您将自己开发设计的主题,通过PR的方式提交到NotionNext中央仓库中,提供给更多站友们使用。
最后
接下来在这个主题配置栏目下我将逐一介绍各个主题的配置,但在看主题个性配置前,建议先完整阅读站点的基础配置部分:如何配置站点
Loading...
Last update: