Obsidian 3D Graph 开源项目教程

35 0 0

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

# 随笔