✨ 更新日志
🚀 安装部署
✒ 写作指引
🛠 站点配置
📊 网站统计
⭐ 主题配置
📩 评论插件
🧷 外部插件
🔊 站点订阅
⌨ 开发指引
👨👦👦 联系方式
🤝 购买服务
1. NotionNext开发指引
category
tags
type
status
slug
date
password
Last edited time
Jun 27, 2024 09:50 AM
summary
icon
前言
在进行二次开发之前,您需要了解到:NotionNext本身支持大量的自定义配置,开发之前,请先访问《NotionNext操作手册》获取帮助、配置您的站点,例如:
-
blog.config.js
文件中可以修改站点的基础信息、主题、语言、评论插件等核心配置
- 每个主题下都有一个配置文件
config_[theme].js
,以便用户配置自己的页面个性化。
![NotionNext 代码结构](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F77945898-5301-41f5-b05a-28785d5e4af2%2FUntitled.png?table=block&id=732c22c9-3c06-4aaf-b1b9-3f843e850315&t=732c22c9-3c06-4aaf-b1b9-3f843e850315&width=384&cache=v2)
自定义脚本
NotionNext操作手册中,有关于自定义脚本和样式的引入方式;即:
- 在
/public/js/custom.js
/public/css/custom.css
中引入您的脚本,就可以实现任意的页面功能。
- 在
blog.config.js
的CUSTOM_EXTERNAL_JS
、CUSTOM_EXTERNAL_CSS
中也可以引入第三方的脚本。
用这两种方式引入脚本,即使本机上没有安装nodejs等开发环境,也可以直接在浏览器控制台中编写调试。
Notion中自定义JS和CSS
在4.2.0之后的版本中,您可以直接在Notion中指定网页上的样式,以及执行的脚本,只需在NotionConfig中配置
GLOBAL_CSS
属性以及GLOBAL_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%2F12750bae-1a44-4dfc-ad5e-09260f5e1142%2FUntitled.png?table=block&id=3a8bb0a5-e1af-4844-a6d6-fd6cdc9d91c9&t=3a8bb0a5-e1af-4844-a6d6-fd6cdc9d91c9&width=1221&cache=v2)
自行开发
如果上述的配置方式,不能满足您的需要,例如新增组件、深度定制等等。您可以选择在github上发起issue,提出改进页面的建议,或者遵循此教程,进行您的开发之旅。
可选Codespaces云开发,以及本地开发两种方案。
一、云开发(Codespaces)
这是一个可选方案,相比本地开发,您不需要在电脑上安装环境;直接将Github仓库导入到云开发环境,在线编辑即可。
Codespaces是Github官方提供的云开发环境。
导入启动项目
- 点击Codespaces
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F7a08e677-7d7c-4aa2-bd1c-664318c50245%2FUntitled.png?table=block&id=528cee99-8bb6-4306-a8f2-eaa9697828b9&t=528cee99-8bb6-4306-a8f2-eaa9697828b9&width=1597&cache=v2)
- 点击新建代码空间
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Fd1cd6c5c-1d5c-4e3d-ac33-f30abcdc05b2%2FUntitled.png?table=block&id=baa35a04-16fd-408e-b1fc-8e9182c5385a&t=baa35a04-16fd-408e-b1fc-8e9182c5385a&width=1865&cache=v2)
- 导入项目,并选择代码分支、以及云环境的服务器配置,然后点击Create codespacee
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Ff15f19d0-c410-47fd-a476-a838537259a5%2FUntitled.png?table=block&id=0c9f18a0-7b11-4ce7-b333-75a8b45b6283&t=0c9f18a0-7b11-4ce7-b333-75a8b45b6283&width=480&cache=v2)
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F893b5482-6d81-4009-9929-6f8ebc24159c%2FUntitled.png?table=block&id=749e86a9-ca24-4308-93e1-a58093f9e7e1&t=749e86a9-ca24-4308-93e1-a58093f9e7e1&width=480&cache=v2)
- 等待几分钟,您的云开发环境即可搭建
- 在终端中输入
yarn
即可安装依赖的环境 - 等上一步安装全部完成(约3分钟)后,在终端输入
yarn dev
即可开始实时调试 - 调试效果
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F81bc7970-6c99-4ca1-8c20-2d67a6f81065%2FUntitled.png?table=block&id=b9f94816-d3af-4666-af9e-dc18325bfc0b&t=b9f94816-d3af-4666-af9e-dc18325bfc0b&width=1920&cache=v2)
终端会提示以下内容,说明服务启动成功:
点击右下角的在浏览器中打开,即可开启调试页面。
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F03b01693-399b-4e78-9be0-12e35c91d420%2FUntitled.png?table=block&id=16447d82-fcb9-4138-a926-6f7c3b14cc7f&t=16447d82-fcb9-4138-a926-6f7c3b14cc7f&width=1590&cache=v2)
github 会临时分配给您一个临时的域名,用于开发调试
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F6b20906c-e282-49a4-b608-a5b6c41bff9f%2FUntitled.png?table=block&id=1d6f865e-b155-41d1-a77c-7b203143ed79&t=1d6f865e-b155-41d1-a77c-7b203143ed79&width=1481&cache=v2)
二、 本地开发
1.准备开发环境
您的电脑上需要有一个开发环境NodeJs、以及代码编辑器VSCode,
- NodeJS 运行环境
- windows操作系统下,在官网下载安装最新版的NodeJs即可
- 安装成功检验
安装步骤
安装成功,测试安装是否成功,运行CMD,分别输入node -v 和 npm -v 分别查看node和npm的版本号,如下图所示:
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Fa3acaf90-25b0-4689-b548-b79e1681e0a0%2FUntitled.png?table=block&id=4deccacd-11b3-4691-86c6-191e8a66fe07&t=4deccacd-11b3-4691-86c6-191e8a66fe07&width=560&cache=v2)
node是基础运行环境,npm是依赖包的管理组件
- VsCode 编辑器
2.导入启动项目
- 下载您的代码
安装Github Desktop
点击Sign in to Github登录,或者skip this step 稍后登录都可以
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F88b0eacc-ed74-4580-a08a-aa729ec99fd6%2FUntitled.png?table=block&id=942e70e1-6e21-48da-900d-19d9b749b37d&t=942e70e1-6e21-48da-900d-19d9b749b37d&width=2400&cache=v2)
下载代码
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F19bb5199-54eb-4742-9790-3894e89d2bde%2FUntitled.png?table=block&id=1d041282-4c91-40e1-96c9-33f68ba9ebe0&t=1d041282-4c91-40e1-96c9-33f68ba9ebe0&width=1902&cache=v2)
找到您的仓库地址进行Clone
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F6a75fbc1-3263-47c0-ad85-d7c36d98090c%2FUntitled.png?table=block&id=534c0b09-0e24-4a0e-b6bc-96e8b49e2e19&t=534c0b09-0e24-4a0e-b6bc-96e8b49e2e19&width=1908&cache=v2)
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F0adecde9-a776-4bbf-a257-450b218b6f9f%2FUntitled.png?table=block&id=567eae70-c5c7-4bf4-8021-e40042edd077&t=567eae70-c5c7-4bf4-8021-e40042edd077&width=1886&cache=v2)
点击Clone即可下载代码
- 用vscode打开项目
打开项目文件
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F4afb38e9-6e19-4608-aff8-7dedeb3628aa%2FUntitled.png?table=block&id=6636d48e-81cc-4ce7-b723-3dc164377031&t=6636d48e-81cc-4ce7-b723-3dc164377031&width=528&cache=v2)
安装项目依赖的组件
点击 菜单栏的终端,并选择 新建终端,然后在新建的终端窗口中输入安装启动脚本:
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Fdc1d0ab6-1abc-4096-b188-aa8c9f7439ca%2FUntitled.png?table=block&id=cc885c64-1ad3-457e-ae0a-b50735115245&t=cc885c64-1ad3-457e-ae0a-b50735115245&width=2438&cache=v2)
任选一种安装
静候片刻,首次安装依赖需要花一点时间
启动项目 只需一个命令
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F0495c93c-688c-41d1-a6fb-7b03e55cbbf8%2FUntitled.png?table=block&id=d974150b-469b-4984-aa69-e3fe1d754846&t=d974150b-469b-4984-aa69-e3fe1d754846&width=1454&cache=v2)
其他脚本说明
- 访问页面
浏览器打开 http://localhost:3000/ 即可访问你的本地博客
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F2c2b2337-9c50-41d0-84be-a4675a4c4bfa%2FUntitled.png?table=block&id=628feceb-70df-44b2-82ff-15d7a0a3db2f&t=628feceb-70df-44b2-82ff-15d7a0a3db2f&width=1666&cache=v2)
调试模式下:代码的每次修改会实时影响到你的页面,不需要刷新或重启服务
3.本地开发环境配置
VSCode中可以使用launch面板,进行设置环境变量以及断点调试
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F079baae4-624a-4f86-bbf1-fec4327d3796%2FUntitled.png?table=block&id=40fa4170-9b1a-4a7d-8189-0b7bc9974791&t=40fa4170-9b1a-4a7d-8189-0b7bc9974791&width=388&cache=v2)
创建一个launch文件
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F8bed5f0c-26d9-48e5-9e35-696bcee5c00e%2FUntitled.png?table=block&id=fe8f56e6-ecdc-482a-9f46-989134e4989f&t=fe8f56e6-ecdc-482a-9f46-989134e4989f&width=1102&cache=v2)
可以参考我的配置
代码结构简介
NextJS
项目用NextJS框架构建,以下是代码所有主要目录,修改样式主要在
themes
目录下完成。![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F0221eee6-b6fa-4968-a4c1-5021ad3844b1%2FUntitled.png?table=block&id=ac66811b-3807-4440-a168-04ebb9ae8c80&t=ac66811b-3807-4440-a168-04ebb9ae8c80&width=528&cache=v2)
TailWindCSS
项目开发使用TailwindCss,这是一个极简、灵活的CSS工具库,上手后开发效率极高。
代码格式规范
使用Eslint + Prettier,关于格式化代码,可以阅读这篇文档:
- Prettier插件
- 安装后,在项目配置中启用自动格式化,在settings.json中添加如下配置:
有两个插件任选一种,按照插件内的配置说明配置您的工作空间即可。
![notion image](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F6c096b44-beb9-48ee-8f92-1efdde47f3a3%2Fb98c6f03-1f00-4f0c-94e9-baf7ae21b21a%2FUntitled.png?table=block&id=28bd1f33-58cb-4d5f-a3de-8130ff40e3a4&t=28bd1f33-58cb-4d5f-a3de-8130ff40e3a4&width=576&cache=v2)
示例:Prettier - Code formatter
使用说明
安装后,在项目配置中启用自动格式化,在settings.json中添加如下配置:
![notion image](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F6c096b44-beb9-48ee-8f92-1efdde47f3a3%2F414226bc-04b6-4319-b6bc-baa68ce6aa09%2FUntitled.png?table=block&id=227bd3b8-abd3-4bd3-9da3-2aac07e5c079&t=227bd3b8-abd3-4bd3-9da3-2aac07e5c079&width=547&cache=v2)
安装后,在项目配置中启用自动格式化,在用户,或者项目的settings.json中添加如下配置:
示例二:Prettier - Eslint
- 项目中的相关配置文件参考。
Loading...
Last update: 2022-11-13