category
软件工具
tags
开发
NotionNext
type
Post
status
Published
slug
how-to-develop-with-notion-next
date
Nov 13, 2022
summary
小白入门如何开发notionnext,下载NotionNext、启动NotionNext、提交合并到NotionNext等。
icon
password
前言
NotionNext项目支持大量的自定义配置,除了了
blog.config.js
文件可以修改,每个主题下都有一个配置文件config_[theme].js
,以便用户配置自己的页面个性化。
或您想更多地自定义自己的主题样式,就需要专业的开发。可以选择在github上发起issue,提出改进页面的建议。
当然,您完全可以自己修改代码进行二次开发。
本文便是针对小白的一篇开发手册,遵循此步骤n您可以尝试自己修改网站的样式。
一、准备
您的电脑上需要有一个开发环境NodeJs、以及代码编辑器VSCode,
- NodeJS 运行环境
- windows操作系统下,在官网下载安装最新版的NodeJs即可
- 安装成功检验
安装步骤
安装成功,测试安装是否成功,运行CMD,分别输入node -v 和 npm -v 分别查看node和npm的版本号,如下图所示:

node是基础运行环境,npm是依赖包的管理组件
- VsCode 编辑器
- 下载您的代码
安装Github Desktop
点击Sign in to Github登录,或者skip this step 稍后登录都可以

下载代码

找到您的残酷地址进行Clone


点击Clone即可下载代码
二、在电脑上启动项目
- 用vscode打开项目
打开项目文件

安装项目依赖的组件
点击 菜单栏的终端,并选择 新建终端,然后在新建的终端窗口中输入安装启动脚本:

npm install -g yarn --registry=https://registry.npm.taobao.org yarn install
静候片刻,首次安装依赖需要花一点时间
启动项目 只需一个命令
yarn dev
# 执行后vscode中会显示 yarn run v1.22.19 $ next dev ready - started server on 0.0.0.0:3000, url: http://localhost:3000 info - Loaded env from D:\Workspace\NotionNext\.env.local

其他脚本说明
yarn # 安装依赖 yarn dev # 开发,支持热加载 yarn build # 为生产编译打包 yarn start # 运行打包后的项目构建服务
- 访问页面
浏览器打开 http://localhost:3000/ 即可访问你的本地博客

调试模式下:代码的每次修改会实时影响到你的页面,不需要刷新或重启服务
三、代码结构简介
项目用NextJS框架构建,以下是代码所有主要目录,修改样式主要在
themes
目录下完成。
三、自定义CSS样式
1.最简单的做法
可在styles/global.css中添加css内容。然后在代码中引用,举例:
/styles/global.css
.custom-card { background-color: red; } .custom-wrapper { margin-top: 10px; }
/themes/example/LayoutBase.js
<div className='custom-card custom-wrapper'> xxx </div>
2.最推荐的做法
项目开发使用TailwindCss,这是一个极简、灵活的CSS工具库,上手后开发效率极高。
3.更高级的用法
项目使用React作为页面框架,可以参考以下文章如何嵌入自定义CSS。
四、提交代码
通过GithubDesktop等工具,将您的代码提交后,推送到Github云端即可,Vercel会自动部署代码中的更新。
五、贡献代码
欢迎将你的代码分支,合并到NotionNext主仓库中,要为NotionNext做出贡献,请按照以下步骤操作:
0.提交新代码
- 将存储库fork到您的GitHub帐户。
- 将存储库clone到您的设备上(或使用Codespaces之类的东西)。
- 在存储库中创建一个新分支,分支名按照改动的内容命名,建议是
feat/
或bug/
开头。
- 在分支中进行修改。
- 提交修改并推送分支。
1.创建新主题
如果您想创建一个新主题、并提交到NotionNext,请复制一个
/themes/example
文件夹在themes
目录下,并修改文件夹的名称主题的名称。