我從入門如何成功掛載第一個plugin到自己的obsidian筆記中

操作前情提要 :

我是一位對typescript、node.js 完全沒概念的人，且我這裡的入門，指的是對github有簡單的概念作為起點，所以請斟酌參考，個人經驗分享而已。

以下依據你目前obsidian 資料保存方式，建議你實作的段落 :

1 )如果，你的obsidian 資料只在自己的電腦裡運行，可以執行第一階段就好，因為自己的電腦直接運行並開發即可。

2 )如果像我，因為obsidian 的vault是存放在雲端，我就會把以下3階段的流程實際跑完，藉由obsidian 的brat plugin 來掛載自己的第一個自己的plugin

我們開始吧!

階段1 :
如何在自己的電腦有效建立測試第一個
Obsidian Plugin?

step1 :

• 找到自己obsidian 放置plugin 的資料夾(在.obsidian底下可以找到),
  並在該路徑上，直接修改刪除路徑，並輸入"cmd"就可開啟CMD

step2 :

• • 先下載git (https://git-scm.com/) ，接著在step1開啟的CMD執行指令
    "git clone https://github.com/obsidianmd/obsidian-sample-plugin.git "
    (只需要複製雙引號裡面的即可)
  • 執行完畢後，應該要在plugin資料夾底下看到一個檔名是"obsidian-sample-plugin"
  • 接著CMD輸入指令"exit"，即可關閉CMD
  

step3:

• • 找到下載的obsidian-sample-plugin 的檔案，重新命名為自己plugin 的名稱(範例以OK為命名)

step4:

• • 點進自己的plugin資料夾內(範例就是在OK資料夾裡)，請在這一層開啟cmd
    指令為"npm install"
    
  
  • 執行安裝完畢後，接著是下指令"npm run dev"
  

step5:

• • 並在OK資料夾裡面找到manifest.json檔案，找到id、name 改成自己第一個plugin 名稱(範例為OK)
  
  • 回到obsidian 設定>第三方外掛程式>重新整理已安裝的程式,你的第一個plugin就成功掛載囉
  

step6:

• • 接著到找到Plugin >自己的plugin >src ，這層資料夾，找到main.ts 就可開始修改你自己的需求囉!
    
  
  • 後續只要main.ts有修改，注意2件事情 :
    
  • • 1) 確保背景有啟動cmd，並執行step4: npm run dev，下指令完成後就放著不要關閉
    • 2) obsidian的外掛介面要重啟
    

step7 :

• 我與AI簡單的範例調整
  

• 可直接複製AI調整的程式

import { App, Modal, Plugin } from 'obsidian';

export default class WelcomePlugin extends Plugin {

	async onload() {
		console.log('載入歡迎光臨外掛');

		// 註冊全域點擊事件
		this.registerDomEvent(document, 'click', (evt: MouseEvent) => {
			// 當點擊時，開啟自定義的歡迎視窗
			new WelcomeModal(this.app).open();
		});
	}

	onunload() {
		console.log('卸載歡迎光臨外掛');
		// 外掛卸載時會自動清除事件監聽
	}
}

// 定義彈出的歡迎視窗
class WelcomeModal extends Modal {
	constructor(app: App) {
		super(app);
	}

	onOpen() {
		const { contentEl, modalEl } = this;

		// --- 1. 設定視窗本身的樣式 (例如紅色外框) ---
		// 為整個視窗元素 (modalEl) 加上樣式
		modalEl.style.border = '4px solid red'; // 4像素寬的紅色實線外框
		modalEl.style.borderRadius = '10px';    // 圓角，讓它看起來更好看
		modalEl.style.padding = '20px';         // 增加內距

		// --- 2. 設定顯示的文字內容 ---
		// 清空內容，確保乾淨
		contentEl.empty(); 
		
				// 建立一個標題元素 (h1)，並設定文字和樣式
		const titleEl = contentEl.createEl('h1', { text: '歡迎光臨' });
		
				// 設定文字樣式，使其置中並放大
		titleEl.style.textAlign = 'center';
		titleEl.style.margin = '0'; // 移除標題預設的邊距
		titleEl.style.fontSize = '2.5em'; // 字體放大
	}

	onClose() {
		const { contentEl } = this;
		contentEl.empty();
	}
}

• 效果 : 跳出，可以按下esc取消

step8 :

如何把npm run dev指令停止，按下快捷鍵 : ctrl + c,

輸入Y即可結束

階段2:
如何更新github repo，釋出版本1

為何需要此步驟?因為我的obsidian vault 是存在雲端硬碟，把測試的所有資料以及node_modle資料夾同步，非常浪費空間，所以開始思考，如何從頭建立一個plugin 資料夾，資料只需要能成功被brat plugin 掛載就算是成功了

step1 :

• 要先建立1個github帳號先(細節請上網查詢，這邊忽略)

step2 :

• 建立新的repo，複製自己專案的連結

step3 :

• 接著我在下載的路徑開啟CMD，並執行以下指令 : "git clone 貼上剛剛在github上的連結"
• 正常情況下會出現一個空的資料夾，裡面有個隱藏的.git資料夾

step4 :

• 接著從原先電腦中測試的plugin 資料夾中(就是我第一階段開發的資料夾位置:OK)，找出以下清單檔案複製到剛剛從github下載的資料夾中
• 請檢查.gitignore 檔案內有無 data.json 與 main.js，這是一個重要的檔案可以多上網查詢用途

step5 :

• 接著在上述資料夾中開啟cmd，一步步往下執行，這是在把電腦的檔案同步回遠端的github 庫
• • 先檢查gitignore 是否正常排除data.json 與 main.js
  • 指令分別是

1) git check-ignore -v data.json

2) git check-ignore -v main.js

• • 有顯示表示有成功被忽略
    
  
  • 接著，指令 : git status
  • 應該會看到剛剛加入的檔案，在畫面中顯示出來
    
  
  • 接著，指令 : git add .
  • 沒錯點的前面要加入一個空白格，系統不會跳任何資訊
    
  
  • 接著，指令 : git commit -m "我的第一個plugin"
  • 沒錯會跳出一堆訊息，有看到9 changed 即可
    
  
  • 接著，指令 : git push
  • 沒錯又看到一推訊息,找到done 關鍵字，與to 你的github 位置就對了
    
  
  • 回到自己的github 網站重新整理，應該要看到剛剛新增的檔案更新囉!
  

step6 :

• 先回到第一階段開發的plugin 資料夾底下，開啟CMD
• 並執行指令 : npm run build
  

• 回到github 上傳畫面中點選"Tags" > 並點選create a new release > 點選SELECT TAG > create new tag >輸入 1.0.0 >create > 輸入release title > 往下點選 Attach...的大方塊 > 選擇原先開發的plugin 資料夾中的main.js與manifest.json 檔案 >Publish release
  

• 恭喜產生釋出自己的1.0.0版本的plugin

階段三:
如何用obsidian brat plugin掛載自己的第一個plugin

step1 :

• 開啟obsidian 設定>第三方外掛程式 >瀏覽 >搜尋brat >並安裝後>開啟該plugin

step2 :

• 先去github 網站打開更新的repo，點選畫面中code，複製https的連結
  

• 回到obsidian 空白畫面，按下快捷鍵ctrl+P，開啟並輸入並點選 :
  brat : add a beta plugin for testing(with or without version)
  
  

• 選取後，在repository 貼上剛剛複製的連結 >選擇版本1.0.0 >add plugin
  

• 掛載成功後，右邊跳出相關視窗

總結 --

這次練習建置自己第一個obsidian plugin整理出以下3大脈絡，

首先，先下載官方提供的範例，下載到自己電腦中，嘗試啟動這個
plugin

接著，新建一個資料夾，放置自己第一個plugin 需要的檔案，並同步到github，記得檢查.gitignore檔案

最後，使用obsidian 中的brat plugin 來抓取github上的第一個plugin 內容