tags
开发
type
Post
status
Published
slug
how-to-develop-with-notion-next
date
Nov 13, 2022
summary
小白入门如何开发notionnext,下载NotionNext、启动NotionNext、提交合并到NotionNext等。
category
软件工具
icon
password

前言

NotionNext是一个在Github免费开源的博客生成器项目,项目自带了 blog.config.js 以及每个主题下都有一个配置文件config_[theme].js,以便用户配置自己的页面个性化。
除此之外,若你想要更大程度地自定义页面,就需要专业的开发,这时候你可以选择在github上向我提交issue,提出改进页面的建议。
当然,你也可以自己修改代码来开发。
本文便是针对小白的一篇开发手册,遵循此步骤你可以尝试自己修改网站的样式。
💡
文档将持续更新完善,有什么疑问欢迎在评论区、或聊天群组中给我留言。

一、准备条件

  1. NodeJS 运行环境
    1. 安装步骤
      • windows操作系统下,在官网下载安装最新版的NodeJs即可
      • 安装成功检验
        • 安装成功,测试安装是否成功,运行CMD,分别输入node -v 和 npm -v 分别查看node和npm的版本号,如下图所示:
          notion image
          💡
          node是基础运行环境,npm是依赖包的管理组件
  1. VsCode 编辑器
    1. 安装下载
      设置中文

二、在你的电脑上启动项目

  1. 下载代码
    1. 安装Git
      下载代码
      在你想要存放代码的文件夹空白处,右键点选 Git GUI Here
      notion image
      输入 以下指令下载代码
      git clone https://github.com/tangly1024/NotionNext.git
  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
      💡
      调试模式下:代码的每次修改会实时影响到你的页面,不需要刷新或重启服务
 

三、代码简介

如果你是小白的话,这里基本只会改到themes目录下的文件;以hexo 主题为例, component目录下是不同的组件,以Layout命名的文件是页面的样式布局。其他的目前可以不用关心。
notion image
 

四、贡献代码步骤

欢迎将你的代码分支,合并到NotionNext主仓库中,要为NotionNext做出贡献,请按照以下步骤操作:
  1. 将存储库fork到您的GitHub帐户。
  1. 将存储库clone到您的设备上(或使用Codespaces之类的东西)。
  1. 在存储库中创建一个新分支,分支名按照改动的内容命名,建议是feat/bug/开头。
  1. 进行修改。
  1. 提交修改并推送分支。
  1. 从fork中的分支创建到NotionNextmain分支的PR
 

1.创建新主题

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

2.添加本地化

如果您的语言尚未得到NotionNext的支持,欢迎贡献本地化!按照以下步骤添加新的本地化: 1. 在/lib/lang中复制一个en-US.js文件,并将文件命名为语言的代码(例如zh-CN.js)。 2. 开始翻译字符串。 3. 将您的语言配置添加到lang.js中。

五、推荐文章

项目使用TailwindCSS实现样式,上手很快:
底层由NextJs实现
什么是npm
什么是NodeJS
什么是React

  • Utterance
  • Cusdis