N0ts 笔记小站

简介

起因

日常开发中经常面向笔记编程，每次需要打开 Typora 去查看笔记，换台电脑又需要重新 clone 笔记，装软件，才能愉悦查看，这样太麻烦；

所以此项目诞生！

如果你也想拥有自己的在线笔记，那就继续阅读吧！

已实现功能

• 仿 Typora
• 读取仓库 markdown 文件进行展示
• 在线编辑 markdown 保存到仓库
• 目录展示，跳转
• 代码块展示，复制
• 仓库内图片读取，绕开码云图片外链限制
• 支持分享笔记
• ...

即将实现

• 在线编辑时图片插入，上传到仓库
• 多仓库支持
• 更多可能请告知我...

如何使用？

下面介绍两种方式，下载程序自己部署 or 直接使用

直接使用本站查看&编辑自己笔记

前往 Gitee 私人令牌 申请令牌，权限必须要有 projects，然后拿到令牌

在我网页点击左下角按钮进行登陆，账号与密码可以自行设定，然后填入自己的令牌

登陆完成后，此时按钮变为了网站配置，然后去设置自己的信息，可以使用填入自己的仓库地址来快速填写

例如我的笔记仓库地址为： https://gitee.com/n0ts/note，快速填入进行识别，然后保存即可绑定自己的仓库

此时已经完成了全部操作，后续任何地方登陆即可获取查看&编辑自己的笔记

自己部署

需掌握：Vue 打包，node 部署

后端开源地址：node api tools

后端部署教程请查看仓库 readme

前端则需要修改如下配置，在 App.vue 里面找到

const config = reactive({
    // Gitee 配置
    gitee: {
        // 账号
        owner: "n0ts",
        // 仓库名称
        repo: "note",
        // 分支名
        sha: "master"
    },
    // 后端地址
    serverBase: "https://api.n0ts.top/api/gitee",
    // 主题配置
    Themes: ["default-light", "default-dark"]
});

后端地址改为自己部署的地址，Gitee 配置中改为网页默认展示的仓库信息，然后打包部署即可

支持我

点我点我☕️

QQ 群讨论

坚果茶馆

效果预览

现在您看到的是 README.md 文件的内容，我把它当做了此网页的首页！

标题预览

一级标题

二级标题

三级标题

四级标题

五级标题

六级标题

字体

斜体文本 粗体文本 粗斜体文本

分割线

删除线

这里是删除线

下划线

这里是下划线

列表

• 第一项
• 第二项
• 第三项

1. 第一项

2. 第二项

3. 第三项

4. 第一项：

   • 第一项嵌套的第一个元素
   • 第一项嵌套的第二个元素

5. 第二项：

   • 第二项嵌套的第一个元素
   • 第二项嵌套的第二个元素

6. 1

7. 2

   1. 1-1
   2. 1-2
      1. 2-1
      2. 2-2
   3. 1-3
   4. 1-4

8. 3

9. 4

区块

啦啦啦 啦啦啦啦啦啦 啦啦啦啦啦啦啦啦啦

最外层

第一层嵌套

第二层嵌套

区块中使用列表

1. 第一项
2. 第二项

• 第一项
• 第二项
• 第三项

• 第一项

  啦啦啦 啦啦啦

• 第二项

代码

const data = reactive({
    Trees: null, // 仓库下的所有文件
    content: null, // 当前内容
    contentSelectIndex: -1, // 当前选择的文件
    treeMenu: "文件", // 菜单默认选择
    loadContent: false, // 笔记加载遮罩
    menuData: null, // 文章目录数据
    menuSelectIndex: 0, // 当前目录选择索引
    menuShow: true, // 菜单是否展开
    timeOut: null, // 计算屏幕长度，防抖
});

链接

这里是一个链接

图片

表格

其他

使用 Ctrl+Alt+Del 重启电脑