2. 创建您的主题
category
tags
type
status
slug
date
password
Last edited time
Jul 27, 2023 04:49 AM
summary
icon
序
在新上线的NotionNext4.0中,整体代码结构做了简化梳理,极大简化了用户自建主题的流程,我强烈推荐每个使用者创建自己的个性主题,并为其起一个自己的名字。
我是一个零基础、纯业余的前端小白,从零开始开发了NotionNext,我会在此文中将自己的学习经验做个总结,并毫无保留地分享给大家。
本篇主要介绍在NotionNext中如何 通过复制文件夹简单地创建一个新主题,并切介绍每个主题下必须包含的三类文件,以及文件的作用。
关于学习路径
最好的学习方式,就是模仿和复制,然后在您熟练上手了一些技巧后,再开始借助技术手册,尝试二次创作。
NotionNext4.0,重新调整了目录结构,让您只需简单复制一个文件夹并重命名,即可开始属于您自己的主题。
主题管理
NotionNext会自动扫描themes目录下的所有文件夹。
切换主题课
例如themes目录下有一个example文件夹,则您可以在blog.config.js 或环境变量中直接切换当前主题theme为文件夹的名字即可。无需其他任何配置

添加删除主题
如需删除主题,只需将某个主题目录整个删除即可,不影响网站使用。(强迫症福音)
如需添加主题,可以将别人做好的主题文件夹直接放在themes目录下即可。
如何创建主题
建议选一个您比较喜欢的主题,复制这个主题的整个文件夹,例如example文件夹,并重命名为您的主题名,例如 adam。
要切换当前主题,您直接修改配置中的theme为adam即可生效。
一开始不推荐自己新建文件夹,而是复制当前已有的主题框架、改名和调整。
截图示例
我复制了一个example主题,并重命名为adam,此时我的主题切换按钮中就多了一个adam主题可以选中。


主题目录说明
每个主题文件夹应有四个部分构成:
1. components
这是存放主题中用到的组件的文件夹。例如卡片、选择框、导航栏、按钮,等等基础组件。这样可以避免重复开发。
每个主题应该有属于自己的一套组件,不要直接引用其它主题的组件,例如您喜欢fukasawa的博客卡牌组件,可以之间拷贝到您的新主题中引用。


2. config.js
主题中常用的一些开关,参数,颜色等等配置都可以提炼成为配置文件放在此处,便于统一维护修改。例如fukasawa主题的config.js中可以配置是否开关侧边栏。我建议一些可供用户个性化的配置都集中在此。

3. index.js 布局
重中之重:主题的基础布局文件,主题的核心元素之一。
前端开发的两个基本核心,一是布局,二是组件。
- 布局:决定了每个元素出现在哪里,它占多大空间。
- 组件:决定了每个元素的颜色、边框、阴影、字体、图片背景等等。
4. style.js 样式
这里可以直接写css,只奏效于当前主题。

关于布局文件
至少要包含以下几个布局:
布局名称 | 必选? | 作用 |
LayoutBase | 是 | 基础框架核心,决定网页的整体布局,
例如上中下、还是左右分栏等等,做为其他所有页面的父页面。
然而您可以不指定基础框架,而在每个布局中自定义。 |
LayoutIndex | 是 | 首页,您的落地页面,往往可以是一个博客列表,顶部嵌入一个Hero或大图等组件 |
LayoutSlug | 是 | 文章详情 |
Layout404 | 是 | 404 |
LayoutPostList | 否 | 博客列表,可以用来复用在首页、搜索页、标签详情、分类详情页中 |
LayoutSearch | 否 | 搜索页布局,如果您使用弹出框搜索,则可以不需要此布局。 |
LayoutArchive | 否 | 归档布局,可以不需要 |
LayoutCategoryIndex | 否 | 分类列表,陈列所有分类 |
LayoutTagIndex | 否 | 标签列表,陈列所有标签 |
即使是非必选的组件也要放回一个空页面元素,或直接返回基础的空白布局。例如
您可以通过阅读任意主题的index.js文件。来了解其工作模式。例如/themes/fukasawa/index.js 中就包含了此主题所有的布局。
关于前端知识
前端技术复杂庞大,但只是想渲染出好看的主题样式,其实只要最基础的布局和组件就够。
另外,这个项目和以往普通的Html项目不同,主要有三个内容我需要展开。
- React-JSX:一个适用于开发超大规模前端页面的框架,
- NextJS:快速路由,快速渲染就靠它了,
- TailwindCSS:用语义化的类名,代替传统的style和.css文件,便于维护扩展。
这三个前端知识,我将在后面三篇文章中介绍。
- Twikoo
- Giscus
- Cusdis
Last update: