【亲测免费】 ObsidianCustomFrames 插件安装与配置指南

1. 项目基础介绍和主要编程语言

项目基础介绍

ObsidianCustomFrames 是一个 Obsidian 插件，它允许用户通过 iframe 将网页应用程序转换为 Obsidian 中的面板，并提供自定义样式。该插件还附带了一些预设，如 Google Keep、Todoist 等，方便用户快速使用。

主要编程语言

该项目主要使用以下编程语言：

• TypeScript
• JavaScript
• CSS

2. 项目使用的关键技术和框架

关键技术

• iframe: 用于将网页应用程序嵌入到 Obsidian 面板中。
• 自定义样式: 允许用户为嵌入的网页应用程序添加自定义 CSS。

框架

• Obsidian API: 该项目依赖于 Obsidian 的插件开发 API。

3. 项目安装和配置的准备工作和详细的安装步骤

准备工作

1. 安装 Obsidian: 确保你已经安装并配置好了 Obsidian 笔记软件。
2. Node.js 和 npm: 确保你的系统上已经安装了 Node.js 和 npm。你可以通过在终端中运行 node -v 和 npm -v 来检查是否已安装。

安装步骤

步骤 1: 克隆项目仓库

首先，你需要将项目克隆到本地。打开终端并运行以下命令：

git clone https://github.com/Ellpeck/ObsidianCustomFrames.git

步骤 2: 安装依赖

进入项目目录并安装所需的依赖包：

cd ObsidianCustomFrames
npm install

步骤 3: 构建项目

运行以下命令来构建项目：

npm run build

步骤 4: 安装插件到 Obsidian

1. 打开 Obsidian，进入“设置” -> “社区插件”。
2. 点击“浏览”按钮，搜索“Custom Frames”插件。
3. 找到“Custom Frames”插件后，点击“安装”。
4. 安装完成后，点击“启用”。

步骤 5: 配置插件

1. 在 Obsidian 中，进入“设置” -> “社区插件” -> “Custom Frames”。
2. 点击“添加新帧”按钮，选择一个预设或自定义一个新帧。
3. 根据需要配置帧的样式和其他选项。

使用指南

• 打开帧: 使用“Custom Frames: Open”命令来打开自定义帧。
• Markdown 模式: 你可以在 Markdown 文档中使用特殊的代码块语法来嵌入自定义帧。

通过以上步骤，你已经成功安装并配置了 ObsidianCustomFrames 插件，可以开始使用它来将网页应用程序嵌入到 Obsidian 中。