【亲测免费】 Obsidian TextGenerator 插件使用教程

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

Obsidian TextGenerator 插件的目录结构如下：

obsidian-textgenerator-plugin/
├── .github/
│   └── workflows/
├── assets/
│   └── icon.png
├── src/
│   ├── main.ts
│   ├── styles.css
│   └── settings.ts
├── .gitignore
├── .npmrc
├── LICENSE
├── package.json
├── README.md
└── tsconfig.json

• .github/workflows/：包含 GitHub Actions 的工作流配置文件。
• assets/：存放插件的静态资源，如图标。
• src/：包含插件的主要源代码文件。
  • main.ts：插件的主入口文件。
  • styles.css：插件的样式文件。
  • settings.ts：插件的设置相关代码。
• .gitignore：指定 Git 忽略的文件和目录。
• .npmrc：npm 配置文件。
• LICENSE：项目的许可证。
• package.json：项目的 npm 配置文件，包含依赖和脚本。
• README.md：项目的说明文档。
• tsconfig.json：TypeScript 配置文件。

2. 项目的启动文件介绍

项目的启动文件是 src/main.ts。这个文件是插件的入口点，负责初始化插件并注册必要的 Obsidian 事件和命令。

import { Plugin } from 'obsidian';
import { TextGeneratorSettingsTab } from './settings';

export default class TextGeneratorPlugin extends Plugin {
    settings: TextGeneratorSettings;

    async onload() {
        console.log('加载 TextGenerator 插件');

        // 加载设置
        this.settings = new TextGeneratorSettings();
        await this.loadSettings();

        // 注册设置选项卡
        this.addSettingTab(new TextGeneratorSettingsTab(this.app, this));

        // 注册命令
        this.addCommand({
            id: 'generate-text',
            name: '生成文本',
            callback: () => {
                this.generateText();
            }
        });
    }

    async loadSettings() {
        this.settings = Object.assign({}, DEFAULT_SETTINGS, await this.loadData());
    }

    async saveSettings() {
        await this.saveData(this.settings);
    }

    generateText() {
        // 生成文本的逻辑
    }
}

3. 项目的配置文件介绍

项目的配置文件主要是 src/settings.ts 和 package.json。

src/settings.ts

这个文件定义了插件的设置选项和设置界面。

import { App, PluginSettingTab, Setting } from 'obsidian';
import TextGeneratorPlugin from './main';

export interface TextGeneratorSettings {
    apiKey: string;
    model: string;
}

export const DEFAULT_SETTINGS: TextGeneratorSettings = {
    apiKey: '',
    model: 'default'
};

export class TextGeneratorSettingsTab extends PluginSettingTab {
    plugin: TextGeneratorPlugin;

    constructor(app: App, plugin: TextGeneratorPlugin) {
        super(app, plugin);
        this.plugin = plugin;
    }

    display(): void {
        const { containerEl } = this;

        containerEl.empty();

        new Setting(containerEl)
            .setName('API Key')
            .setDesc('输入你的 API Key')
            .addText(text => text
                .setPlaceholder('Enter your API Key')
                .setValue(this.plugin.settings.apiKey)
                .onChange(async (value) => {
                    this.plugin.settings.apiKey = value;
                    await this.plugin.saveSettings();
                }));

        new Setting(containerEl)
            .setName('模型')
            .setDesc('选择使用的模型')
            .addDropdown(dropdown => dropdown
                .addOption('default', '默认模型')
                .addOption('custom', '自定义模型')
                .setValue(this.plugin.settings.model)
                .onChange(async (value) => {
                    this.plugin.settings.