Obsidian Style Settings 插件使用教程

Obsidian Style Settings 插件使用教程

obsidian-style-settingsA dynamic user interface for adjusting theme, plugin, and snippet CSS variables within Obsidian项目地址:https://gitcode.com/gh_mirrors/ob/obsidian-style-settings

项目目录结构及介绍

Obsidian Style Settings 插件的目录结构如下：

obsidian-style-settings/
├── .github/
│   └── workflows/
├── .obsidian/
│   └── plugins/
├── .gitignore
├── LICENSE
├── README.md
├── main.ts
├── manifest.json
├── styles.css
└── styles.ts

• .github/workflows/: 包含 GitHub Actions 的工作流配置文件。
• .obsidian/plugins/: 存放 Obsidian 插件的配置文件。
• .gitignore: 指定 Git 版本控制系统忽略的文件和目录。
• LICENSE: 项目的开源许可证。
• README.md: 项目的说明文档。
• main.ts: 插件的主入口文件。
• manifest.json: 插件的清单文件，包含插件的基本信息。
• styles.css: 插件的样式文件。
• styles.ts: 插件的样式配置文件。

项目的启动文件介绍

项目的启动文件是 main.ts。这个文件是插件的入口点，负责初始化插件并加载必要的模块和配置。以下是 main.ts 的主要内容：

import { Plugin } from 'obsidian';
import { StyleSettingsPlugin } from './styles';

export default class StyleSettings extends Plugin {
    async onload() {
        console.log('加载 Style Settings 插件');
        this.addSettingTab(new StyleSettingsPlugin(this.app, this));
    }

    onunload() {
        console.log('卸载 Style Settings 插件');
    }
}

• Plugin: 导入 Obsidian 的插件基类。
• StyleSettingsPlugin: 导入插件的主要功能模块。
• onload(): 插件加载时调用的方法，负责初始化和添加设置标签。
• onunload(): 插件卸载时调用的方法。

项目的配置文件介绍

项目的配置文件主要包括 manifest.json 和 styles.ts。

manifest.json

manifest.json 文件包含了插件的基本信息和依赖项。以下是示例内容：

{
    "id": "obsidian-style-settings",
    "name": "Style Settings",
    "version": "1.0.0",
    "minAppVersion": "0.12.0",
    "description": "为 Obsidian 提供样式设置功能",
    "author": "mgmeyers",
    "authorUrl": "https://github.com/mgmeyers",
    "isDesktopOnly": false
}

• id: 插件的唯一标识符。
• name: 插件的名称。
• version: 插件的版本号。
• minAppVersion: 插件支持的最低 Obsidian 版本。
• description: 插件的描述。
• author: 插件的作者。
• authorUrl: 作者的网址。
• isDesktopOnly: 是否仅支持桌面版 Obsidian。

styles.ts

styles.ts 文件定义了插件的样式设置。以下是示例内容：

import { PluginSettingTab, Setting } from 'obsidian';

export class StyleSettingsPlugin extends PluginSettingTab {
    display(): void {
        const { containerEl } = this;
        containerEl.empty();

        new Setting(containerEl)
            .setName('字体大小')
            .addText(text => text
                .setPlaceholder('输入字体大小')
                .onChange(async (value) => {
                    console.log('字体大小: ' + value);
                    this.plugin.settings.fontSize = value;
                    await this.plugin.saveSettings();
                }));
    }
}

• PluginSettingTab: 导入 Obsidian 的设置标签基类。
• Setting: 导入 Obsidian 的设置组件。
• display(): 设置标签的显示方法，负责创建和显示设置项。

通过以上配置文件，用户可以自定义 Obsidian 的样式设置，例如字体大小、颜色等。

obsidian-style-settingsA dynamic user interface for adjusting theme, plugin, and snippet CSS variables within Obsidian项目地址:https://gitcode.com/gh_mirrors/ob/obsidian-style-settings