Obsidian 3D Graph 开源项目教程

Obsidian 3D Graph 开源项目教程

obsidian-3d-graph👓 A 3D graph for Obsidian!项目地址:https://gitcode.com/gh_mirrors/obs/obsidian-3d-graph

1. 项目的目录结构及介绍

Obsidian 3D Graph 项目的目录结构如下：

obsidian-3d-graph/
├── .github/
│   └── workflows/
├── assets/
│   ├── css/
│   └── js/
├── src/
│   ├── components/
│   ├── models/
│   └── utils/
├── .gitignore
├── LICENSE
├── README.md
├── package.json
└── tsconfig.json

• .github/workflows/: 包含 GitHub Actions 的工作流配置文件。
• assets/: 包含项目所需的静态资源，如 CSS 和 JavaScript 文件。
• src/: 项目的源代码目录，包含组件、模型和工具函数。
• .gitignore: 指定 Git 忽略的文件和目录。
• LICENSE: 项目的开源许可证。
• README.md: 项目的介绍和使用说明。
• package.json: 项目的依赖和脚本配置。
• tsconfig.json: TypeScript 的配置文件。

2. 项目的启动文件介绍

项目的启动文件是 src/index.ts。该文件负责初始化插件并加载必要的组件和资源。以下是 src/index.ts 的主要内容：

import { Plugin } from 'obsidian';
import { ThreeDGraphView, VIEW_TYPE_THREE_D_GRAPH } from './components/ThreeDGraphView';

export default class ThreeDGraphPlugin extends Plugin {
    async onload() {
        this.registerView(VIEW_TYPE_THREE_D_GRAPH, (leaf) => new ThreeDGraphView(leaf));
    }
}

• Plugin: 从 Obsidian API 导入的插件基类。
• ThreeDGraphView: 自定义的 3D 图视图组件。
• VIEW_TYPE_THREE_D_GRAPH: 视图类型的常量。
• ThreeDGraphPlugin: 插件的主类，继承自 Plugin。
• onload: 插件加载时调用的方法，注册视图组件。

3. 项目的配置文件介绍

项目的配置文件主要包括 package.json 和 tsconfig.json。

package.json

package.json 文件定义了项目的依赖、脚本和其他元数据。以下是部分内容：

{
  "name": "obsidian-3d-graph",
  "version": "1.0.0",
  "description": "A 3D graph plugin for Obsidian",
  "main": "src/index.ts",
  "scripts": {
    "build": "tsc",
    "dev": "tsc -w"
  },
  "dependencies": {
    "obsidian": "^0.12.0"
  },
  "devDependencies": {
    "typescript": "^4.4.3"
  }
}

• name: 项目名称。
• version: 项目版本。
• description: 项目描述。
• main: 主入口文件。
• scripts: 定义了构建和开发脚本。
• dependencies: 生产环境依赖。
• devDependencies: 开发环境依赖。

tsconfig.json

tsconfig.json 文件是 TypeScript 的配置文件，定义了编译选项。以下是部分内容：

{
  "compilerOptions": {
    "target": "ES6",
    "module": "CommonJS",
    "outDir": "./dist",
    "rootDir": "./src",
    "strict": true
  },
  "include": ["src/**/*"]
}

• compilerOptions: 编译选项。
  • target: 编译目标 ES 版本。
  • module: 模块系统。
  • outDir: 输出目录。
  • rootDir: 源代码目录。
  • strict: 启用严格模式。
• include: 包含的文件和目录。

obsidian-3d-graph👓 A 3D graph for Obsidian!项目地址:https://gitcode.com/gh_mirrors/obs/obsidian-3d-graph