NotionNext二次开发手册
2022-11-13
| 2023-1-20
0  |  0 分钟
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,以便用户配置自己的页面个性化。
NotionNext 代码结构
NotionNext 代码结构
或您想更多地自定义自己的主题样式,就需要专业的开发。可以选择在github上发起issue,提出改进页面的建议。
当然,您完全可以自己修改代码进行二次开发。
本文便是针对小白的一篇开发手册,遵循此步骤n您可以尝试自己修改网站的样式。

一、准备

💡
您的电脑上需要有一个开发环境NodeJs、以及代码编辑器VSCode,
  1. NodeJS 运行环境
    1. 安装步骤
      • 安装成功检验
        • 安装成功,测试安装是否成功,运行CMD,分别输入node -v 和 npm -v 分别查看node和npm的版本号,如下图所示:
          notion image
          💡
          node是基础运行环境,npm是依赖包的管理组件
  1. VsCode 编辑器
    1. 安装下载
      设置中文
  1. 下载您的代码
    1. 安装Github Desktop
      下载代码
      notion image
      找到您的残酷地址进行Clone
      notion image
      notion image
      点击Clone即可下载代码

二、在电脑上启动项目

  1. 用vscode打开项目
    1. 打开项目文件
      notion image
      安装项目依赖的组件
      点击 菜单栏的终端,并选择 新建终端,然后在新建的终端窗口中输入安装启动脚本:
      notion image
      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
      notion image
      其他脚本说明
      yarn # 安装依赖 yarn dev # 开发,支持热加载 yarn build # 为生产编译打包 yarn start # 运行打包后的项目构建服务
  1. 访问页面
    1. 浏览器打开 http://localhost:3000/ 即可访问你的本地博客
      notion image
      💡
      调试模式下:代码的每次修改会实时影响到你的页面,不需要刷新或重启服务

三、代码结构简介

项目用NextJS框架构建,以下是代码所有主要目录,修改样式主要在themes 目录下完成。
notion image
 

三、自定义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工具库,上手后开发效率极高。
TailwindCSS为什么你要使用?
TailwindCSS官方称一个可以让你脱离css文件,在html直接通过class修改样式的框架。 但是TailwindCSS一直受到CSS 方案备受争议。第一个问题就是这和写style css有什么区别? 首先在我们的进行修改css样式的风法中,多多少少会用到一些4中方式 越往下走,颗粒度越来越大,约束性变高,自由性不足。而 TailwindCSS 位于第二层。 第一层的话,就很难复用了,所以 TailwindCSS 选择了第二层的原因。 在不久之前Facebook经过重构后的css体积已经重原来的413kb 压缩到74kb。 可是很多开发者,很疑惑。我的css文件下去了,但是我的html和组件的文件变得无比的大,并不知道这里的好处在哪里? 首先第一,现在的开发模式已经是组件开发了,就算你在搞一个css来维护。其实很多的样式属性这个组件有,那个组件也存在复用。这个没有必要,这里的自己的组件样式交给组件自己维护就好了。 第二点就是想到这个疑惑的,估计是没有去了解过nginx的gzip。只是知道有这么一回事。 gzip 的核心Deflate使用的是LZ77 算法和 Huffman 编码来压缩文件,重复度越高的文件可压缩的空间就越大。 即使 HTML 因为类名过多造成体积增大,由于 class 高度相似,gzip 也将会得到一个很大的压缩比例。 这才是 TailwindCSS 想要的结果 第一次我使用 tailwind ui 框架的时候,很多情况看多以下的这种写法。 你想要多少的数值,直接写多少就好了。 还有对应响应式 对应你使用的@media,你感觉谁更加舒服呢? 第三 就是后期维护的时候,就算有人跑路了,这么多个css,后面的人只需要去看html就能维护。这么多的css file你慢慢找吧,反正我是不想找的。 第四 Jit css编译,使用TailwindCSS在编译的过程中,比css-loader less-loader 都要快 说了这么这些好处,TailwindCSS有什么不足呢?我说说我的看法吧。 第一遇到复杂一点的css操作你不能直接使用 TailwindCSS 操作 比如以上的情况,你需要写css来操作子元素的显示,除非你无聊非要用js来写,也不是不行。 第二是增加了记忆负担,它的命名和你认知中的使用不一样,前期需要一直查阅文档,或者下载TailwindCSS的提示插件。要不你无从下手。 但是一旦你有习惯了,形成条件反射,那就是另一种情况,你会直喊香。 如果你正在做代码加速优化的话,你可以试试TailwindCSS.因为gzip后是真的小。 如果你是一个爱折腾的人,可是试试TailwindCSS。 如果你感觉你的组件已经可以完全独立使用一个css的时候,可以使用TailwindCSS来制作这个组件。后面要改代码时候,只需要去这个组件修改,并且不用担心自己的class会影响到他人的组件。
TailwindCSS为什么你要使用?

3.更高级的用法

项目使用React作为页面框架,可以参考以下文章如何嵌入自定义CSS。
说说react中引入css的方式有哪几种?区别?
组件式开发选择合适的 css 解决方案尤为重要 通常会遵循以下规则: 可以编写局部css,不会随意污染其他组件内的原生; 可以编写动态的css,可以获取当前组件的一些状态,根据状态的变化生成不同的css样式; 支持所有的css特性:伪类、动画、媒体查询等; 编写起来简洁方便、最好符合一贯的css风格特点 在这一方面, vue使用 css 起来更为简洁: 通过 style 标签编写样式 scoped 属性决定编写的样式是否局部有效 lang 属性设置预处理器 内联样式风格的方式来根据最新状态设置和改变css 而在 react中,引入 CSS就不如 Vue方便简洁,其引入 css 的方式有很多种,各有利弊 常见的 CSS 引入方式有以下: 直接在组件中书写 css样式,通过 style 属性直接引入,如下: 上面可以看到, css 属性需要转换成驼峰写法 这种方式优点: 内联样式, 样式之间不会有冲突 可以动态获取当前state中的状态 缺点: 将 css单独写在一个 css 文件中,然后在组件中直接引入 组件中引入: 这种方式存在不好的地方在于样式是全局生效,样式之间会互相影响 将 css文件作为一个模块引入,这个模块中的所有 css ,只作用于当前组件。不会影响当前组件的后代组件 这种方式是 webpack特工的方案,只需要配置 webpack配置文件中 modules:true 即可 这种方式能够解决局部作用域问题,但也有一定的缺陷: 引用的类名,不能使用连接符(.xxx-xx),在 JavaScript 中是不识别的 所有的 className 都必须使用 {style.className} 的形式来编写 不方便动态来修改某些样式,依然需要使用内联样式的方式; CSS-in-JS, 是指一种模式,其中 CSS由 JavaScript 生成而不是在外部文件中定义 此功能并不是 React 的一部分,而是由第三方库提供,例如: 下面主要看看 styled-components 的基本使用 本质是通过函数的调用,最终创建出一个组件: 这个组件会被自动添加上一个不重复的class styled-components会给该class添加相关的样式 基本使用如下: 创建一个 style.js 文件用于存放样式组件: 引入样式组件也很简单: 通过上面四种样式的引入,可以看到: 在组件内直接使用css该方式编写方便,容易能够根据状态修改样式属性,但是大量的演示编写容易导致代码混乱 组件中引入 .css 文件符合我们日常的编写习惯,但是作用域是全局的,样式之间会层叠 引入.module.css 文件能够解决局部作用域问题,但是不方便动态修改样式,需要使用内联的方式进行样式的编写 通过css in js 这种方法,可以满足大部分场景的应用,可以类似于预处理器一样样式嵌套、定义、修改状态等 至于使用 react用哪种方案引入 css ,并没有一个绝对的答案,可以根据各自情况选择合适的方案
说说react中引入css的方式有哪几种?区别?
 

四、提交代码

通过GithubDesktop等工具,将您的代码提交后,推送到Github云端即可,Vercel会自动部署代码中的更新。
 

五、贡献代码

欢迎将你的代码分支,合并到NotionNext主仓库中,要为NotionNext做出贡献,请按照以下步骤操作:

0.提交新代码

  1. 将存储库fork到您的GitHub帐户。
  1. 将存储库clone到您的设备上(或使用Codespaces之类的东西)。
  1. 在存储库中创建一个新分支,分支名按照改动的内容命名,建议是feat/bug/开头。
  1. 在分支中进行修改。
  1. 提交修改并推送分支。
  1. 从fork中的分支创建到NotionNext的main分支的PR

1.创建新主题

如果您想创建一个新主题、并提交到NotionNext,请复制一个/themes/example文件夹在themes目录下,并修改文件夹的名称主题的名称。

2.添加本地化

如果您的语言尚未得到NotionNext的支持,欢迎贡献本地化!按照以下步骤添加新的本地化: 1. 在/lib/lang中复制一个en-US.js文件,并将文件命名为语言的代码(例如zh-CN.js)。 2. 开始翻译字符串。 3. 将您的语言配置添加到lang.js中。
软件工具
  • 开发
  • NotionNext
  • Notion快捷键入门到精通NotionNext如何添加评论插件
    • Twikoo
    • Waline
    • Giscus
    • Cusdis
    目录