add readme

README.md

@@ -1,22 +1,44 @@
 # Metadata Icon
 
+<div style="text-align:center">
+
 ![Obsidian Downloads](https://img.shields.io/badge/dynamic/json?logo=obsidian&color=%23483699&label=downloads&query=%24%5B%22metadata-icon%22%5D.downloads&url=https%3A%2F%2Fraw.githubusercontent.com%2Fobsidianmd%2Fobsidian-releases%2Fmaster%2Fcommunity-plugin-stats.json) ![GitHub stars](https://img.shields.io/github/stars/Benature/obsidian-metadata-icon?style=flat) ![latest download](https://img.shields.io/github/downloads/Benature/obsidian-metadata-icon/latest/total?style=plastic)
 
+[click to install](https://obsidian.md/plugins?id=metadata-icon)
+
+</div>
+
 Customize metadata (property) entries icon.
 
-[click to install](https://obsidian.md/plugins?id=metadata-icon)
+
 
 <center>
 <img src="https://s2.loli.net/2024/01/24/cuvJPSjtZpaFmyk.png" >
 <!-- <img width="655" alt="image" src="https://github.com/Benature/obsidian-metadata-icon/assets/35028647/3006defa-16dc-47c6-99e2-8019d738eb5a"> -->
 </center>
 
+
+Links support online URLs, local file paths, and base64-encoded images.
+- Online URLs: Must start with `http://` or `https://`. 
+  - e.g. `https://www.facebook.com/favicon.ico`.
+- Local files: Can be a relative file path within the Obsidian vault, or a relative file path from the root directory of the computer. 
+  - e.g. `.obsidian/svg/Benature.svg`, `D:/Figures/Benature.png`, `/Users/Benature/Pictures/Benature.jpg`.
+- Base64-encoded images: Must start with `data:`.
+
+<!-- "链接支持在线网址、本地文件路径、base64编码图片等。",
+"在线网址：需以 `http://` 或 `https://` 开头。如 `https://mp.weixin.qq.com/favicon.ico`。",
+"本地文件：可以是相对 Obsidian 库的文件路径，或者相对电脑根目录的文件路径。如 `.obsidian/svg/木一.svg`、`D:/图片/木一.png`",
+"base64编码图片：需以 `data:` 开头。" -->
+
+> Chinese simple introduction: [小红书](http://xhslink.com/Uix9iF)、[公众号](https://mp.weixin.qq.com/s/F2ixCiDU-yP6PKAyOcDhjw) 
+> 如有汉化需要请联系作者
+
 ## Support
 
 If you find this plugin useful and would like to support its development, you can sponsor me via [Buy Me a Coffee ☕️](https://www.buymeacoffee.com/benature), WeChat, Alipay or [AiFaDian](https://afdian.net/a/Benature-K). Any amount is welcome, thank you!
 
 <p align="center">
-<img src="https://s2.loli.net/2024/01/30/jQ9fTSyBxvXRoOM.png" width="500px">
+<img src="https://s2.loli.net/2024/04/01/VtX3vYLobdF6MBc.png" width="500px">
 </p>
 
 

main.ts

@@ -1,5 +1,6 @@
 import { App, Editor, MarkdownView, Modal, Notice, Plugin, PluginSettingTab, ButtonComponent, Setting, debounce } from 'obsidian';
 import { Locals } from "./src/i18n/i18n";
+import { addDonationElement } from 'src/settings/donation';
 
 export interface IconAttrSetting {
 	entry: string;
@@ -244,5 +245,12 @@ class MetadataHiderSettingTab extends PluginSettingTab {
 						}
 					});
 			})
+
+		const pluginDescEl = containerEl.createEl("div");
+		pluginDescEl.setAttribute("style", "color: gray; font-size: 12px; margin-top: 30px;");
+		pluginDescEl.innerHTML = t.settings.readmeHTML;
+
+
+		addDonationElement(containerEl);
 	}
 }

manifest.json

@@ -1,7 +1,7 @@
 {
 	"id": "metadata-icon",
 	"name": "Metadata Icon",
-	"version": "0.0.13",
+	"version": "0.0.14",
 	"minAppVersion": "0.15.0",
 	"description": "Change metadata entry icon",
 	"author": "Benature",

src/i18n/i18n.ts

@@ -1,7 +1,70 @@
-import { EN } from "./en";
-import { LocalProperty } from "./types";
-import { ZH } from "./zh";
-import { ZHtw } from "./zh-tw";
+export interface LocalProperty {
+	settingAddIconName: string;
+	settingAddIconDesc: string;
+	settingAddIconTooltip: string;
+	settingAddIconDescElSpan: string;
+	settingAddIconPlaceholderEntry: string;
+	settingAddIconPlaceholderImage: string;
+	settingRemoveIconTooltip: string;
+	settings: {
+		readmeHTML: string;
+	}
+}
+
+
+const EN: LocalProperty = {
+	settingAddIconName: "Add custom entry icon",
+	settingAddIconDesc: "Input entry name and icon url. The image will be automatically loaded on the left side. If there is no image shown on the left side, please check the image link.",
+	settingAddIconTooltip: "Add new icon",
+	settingAddIconDescElSpan: "icon preview:",
+	settingAddIconPlaceholderEntry: "entry name",
+	settingAddIconPlaceholderImage: "image link",
+	settingRemoveIconTooltip: "Delete",
+	settings: {
+		readmeHTML:
+			`<h5>Usage</h5>
+			<div>Links support online URLs, local file paths, and base64-encoded images.</div>
+			<ul>
+			<li><b>Online URLs</b>: Must start with <code>http://</code> or <code>https://</code>. For example, <code>https://www.facebook.com/favicon.ico</code>.</li>
+			<li><b>Local files</b>: Can be a relative file path within the Obsidian vault, or a relative file path from the root directory of the computer. For example, <code>.obsidian/svg/Benature.svg</code> or <code>D:/Figures/Benature.png</code>.</li>
+			<li><b>Base64-encoded images</b>: Must start with <code>data:</code>.</li>
+			</ul>`,
+	}
+}
+
+const ZH: LocalProperty = {
+	settingAddIconName: "添加自定义图标",
+	settingAddIconDesc: "输入文档属性名称和图标链接。图标将在左侧自动预览，如果左侧没有显示图片，请检查图片链接是否正确。",
+	settingAddIconTooltip: "添加新图标",
+	settingAddIconDescElSpan: "图标预览：",
+	settingAddIconPlaceholderEntry: "文档属性名称",
+	settingAddIconPlaceholderImage: "图标链接",
+	settingRemoveIconTooltip: "删除",
+	settings: {
+		readmeHTML: `
+			<h5>使用说明</h5>
+			<div>链接支持在线网址、本地文件路径、base64编码图片等。</div>
+			<ul>
+			<li><b>在线网址</b>：需以 <code>http://</code> 或 <code>https://</code> 开头。如 <code>https://mp.weixin.qq.com/favicon.ico</code>。</li>
+			<li><b>本地文件</b>：可以是相对 Obsidian 库的文件路径，或者相对电脑根目录的文件路径。如 <code>.obsidian/svg/木一.svg</code> 或 <code>D:/图片/木一.png</code>。</li>
+			<li><b>base64编码图片</b>：需以 <code>data:</code> 开头。</li>
+			</ul>
+		`,
+	}
+}
+
+
+const ZHtw = {
+	settingAddIconName: "新增自定義圖示",
+	settingAddIconDesc: "輸入文件屬性名稱和圖示鏈接。圖示將在左側自動預覽，如果左側沒有顯示圖片，請檢查圖片鏈接是否正確。",
+	settingAddIconTooltip: "新增圖示",
+	settingAddIconDescElSpan: "圖示預覽：",
+	settingAddIconPlaceholderEntry: "文件屬性名稱",
+	settingAddIconPlaceholderImage: "圖示鏈接",
+	settingRemoveIconTooltip: "删除",
+}
+
+
 
 export class Locals {
 
@@ -11,7 +74,7 @@ export class Locals {
 			case "zh":
 				return ZH;
 			case "zh-tw":
-				return ZHtw;
+				return ZH;
 			default:
 				return EN;
 		}