mirror of
https://github.com/youngmoss/obsidian-backgroundset.git
synced 2026-07-22 11:40:24 +00:00
?
This commit is contained in:
daonali
parent
82216ada83
commit
5ca3a69a2b
3 changed files with 30 additions and 157 deletions
57
README-zh.md
57
README-zh.md
|
|
@ -1,57 +0,0 @@
|
|||
# Obsidian Sample
|
||||
|
||||
|
||||
## 介绍
|
||||
|
||||
这是一个最简单的Obsidian插件开发示例。
|
||||
|
||||
这个示例，不需要安装node，git等，只需要使用原生javascript开发即可。
|
||||
|
||||
|
||||
## 使用技巧
|
||||
|
||||
1. 根目录新建.hotreload空文件，并安装Hot Reload插件可以自动热加载
|
||||
|
||||
2. 重启obsidian可以用location.reload()代替
|
||||
|
||||
3. 打开开发者工具
|
||||
|
||||
windows: Ctrl+Shift+I
|
||||
macOS: Cmd+Option+I
|
||||
|
||||
4. 手机调试可以用手机端模拟器
|
||||
|
||||
切换移动设备和桌面设备 this.app.emulateMobile(!this.app.isMobile);
|
||||
|
||||
4. 调试动态生成内容可以用 await sleep(5000);debugger;
|
||||
|
||||
5. 代码提示
|
||||
可以新建node_modules/obsidian文件夹，并把obsidian.d.ts文件复制过来即可。详情可参考[obsidian-sample.zip](https://github.com/wish5115/my-softs/releases/download/ObsidianSample/obsidian-sample.zip)
|
||||
|
||||
|
||||
## 官方文档
|
||||
|
||||
官方英文文档
|
||||
|
||||
https://docs.obsidian.md/Home
|
||||
|
||||
中文文档
|
||||
|
||||
https://luhaifeng666.github.io/obsidian-plugin-docs-zh/zh2.0/
|
||||
|
||||
其他文档（非官方）
|
||||
|
||||
https://publish.obsidian.md/hub/04+-+Guides%2C+Workflows%2C+%26+Courses/for+Plugin+Developers
|
||||
|
||||
https://liamca.in/hello
|
||||
|
||||
|
||||
## 已知问题
|
||||
|
||||
但也有缺点：
|
||||
|
||||
1. 不支持typescript，如想支持需要IDE插件进行转换
|
||||
|
||||
2. 不方便导入外部模块，如果导入外部模块需要用全路径，并且模块的修改不会热加载，每次修改模块需要重启obsidian。
|
||||
不过可以把模块写到main.js中即可，一般小型插件或学习插件开发足够了。
|
||||
**当然，如果有高手有更好的办法，请多多指教！谢谢啦！**
|
||||
121
README.md
121
README.md
|
|
@ -1,118 +1,47 @@
|
|||
# Obsidian Background Manager Plugin
|
||||
|
||||
|
||||
|
||||
This is a plugin for [Obsidian](https://obsidian.md/) that allows users to manage and customize their workspace background. With this plugin, users can add images, set them as backgrounds, and even apply fade-in and fade-out effects for smooth transitions.
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
|
||||
|
||||
## Features
|
||||
|
||||
- **readme edit by gpt**
|
||||
- **Add Background Images**: Add individual images or entire folders of images to the background list.
|
||||
- **Set Background**: Choose any image from the list and set it as the background.
|
||||
- ~~README edited by gpt~~
|
||||
|
||||
- **Add Background folder**: Add individual folder of images to use as background.
|
||||
|
||||
- **Set Background**: Choose any image from the folder and set it as the background.
|
||||
|
||||
- **Random Background**: Automatically set a random background from the list.
|
||||
- **Delete Background**: Remove the current background with a fade-out effect.
|
||||
|
||||
- **Fade Effects**: Smooth fade-in and fade-out transitions for background changes.
|
||||
- **Drag-and-Drop Support**: Drag and drop images directly into the settings panel to add them to the background list.
|
||||
|
||||
|
||||
---
|
||||
|
||||
|
||||
|
||||
## Installation
|
||||
|
||||
|
||||
|
||||
1. Download or clone this repository.
|
||||
|
||||
2. Place the plugin folder in your Obsidian plugins directory:
|
||||
- On Windows: `%APPDATA%/Obsidian/plugins`
|
||||
- On macOS: `~/Library/Application Support/Obsidian/plugins`
|
||||
- On Linux: `~/.config/Obsidian/plugins`
|
||||
|
||||
- On Windows: Obsidian Vault\.obsidian\plugins
|
||||
|
||||
3. Enable the plugin in Obsidian:
|
||||
- Open **Settings** → **Community Plugins** → **Installed Plugins**.
|
||||
- Find "Background Manager" and toggle it on.
|
||||
|
||||
---
|
||||
- Open **Settings** → **Community Plugins** → **Installed Plugins**.
|
||||
|
||||
## Usage
|
||||
- Find "Backgroundset" and toggle it on.
|
||||
|
||||
### 1. **Add Images**
|
||||
- Open the plugin settings panel under **Settings → Background Settings**.
|
||||
- Use the following options to add images:
|
||||
- **Add Image**: Select a single image file to add to the background list.
|
||||
- **Add Folder**: Select a folder to add all images inside it to the background list.
|
||||
- **Drag-and-Drop**: Drag images directly into the settings panel to add them.
|
||||
|
||||
### 2. **Set Background**
|
||||
- In the settings panel, you will see a list of added images.
|
||||
- Click the **Set as Background** button next to an image to apply it as the background.
|
||||
|
||||
### 3. **Random Background**
|
||||
- The plugin automatically sets a random background from the list when loaded.
|
||||
|
||||
### 4. **Delete Background**
|
||||
- Use the **Delete Background** button in the settings panel to remove the current background with a fade-out effect.
|
||||
|
||||
### 5. **Fade Effects**
|
||||
- Background transitions include smooth fade-in and fade-out animations for a polished user experience.
|
||||
|
||||
---
|
||||
|
||||
## Settings
|
||||
|
||||
### Default Settings
|
||||
The plugin uses the following default settings:
|
||||
```javascript
|
||||
const DEFAULT_SETTINGS = {
|
||||
imageAdressList: [], // Stores the list of background images in Base64 format
|
||||
fadeOutTime: 1000, // Duration of fade-out effect in milliseconds
|
||||
};
|
||||
```
|
||||
|
||||
### Customization
|
||||
You can customize the fade-out duration by modifying the `fadeOutTime` value in the plugin code.
|
||||
|
||||
---
|
||||
|
||||
## Development
|
||||
|
||||
### Code Structure
|
||||
- **`MyPlugin` Class**: Main plugin logic.
|
||||
- **`MySettingTab` Class**: Handles the settings panel UI.
|
||||
- **Key Methods**:
|
||||
- `setBackground(index)`: Sets a specific image as the background with fade effects.
|
||||
- `setRandomBackground()`: Chooses a random image from the list and sets it as the background.
|
||||
- `deleteBackground()`: Removes the current background with a fade-out effect.
|
||||
- `fadeOutBackground(styleElement)`: Handles the fade-out animation for background removal.
|
||||
|
||||
### Adding New Features
|
||||
To extend the plugin, you can modify the `MyPlugin` or `MySettingTab` classes. For example:
|
||||
- Add support for additional image formats.
|
||||
- Implement scheduled background changes.
|
||||
|
||||
---
|
||||
|
||||
## Known Issues
|
||||
|
||||
- **Temporary URLs**: Images added via `URL.createObjectURL` are temporary and only valid during the current session. To persist images, consider converting them to Base64 or saving them in a local file system.
|
||||
- **Performance**: Large image lists or high-resolution images may impact performance.
|
||||
|
||||
---
|
||||
|
||||
## Future Improvements
|
||||
|
||||
- **Scheduled Background Changes**: Add an option to automatically change the background at regular intervals.
|
||||
- **Persistent Storage**: Save images in a more permanent format (e.g., Base64 or local file paths).
|
||||
- **Preview Images**: Display thumbnails of added images in the settings panel.
|
||||
|
||||
---
|
||||
|
||||
## License
|
||||
|
||||
This plugin is released under the [MIT License](https://opensource.org/licenses/MIT).
|
||||
|
||||
---
|
||||
|
||||
## Acknowledgments
|
||||
|
||||
- [Obsidian](https://obsidian.md/) for providing an amazing platform for productivity and customization.
|
||||
- The JavaScript and Node.js communities for their excellent libraries and tools.
|
||||
|
||||
---
|
||||
|
||||
If you encounter any issues or have feature requests, feel free to open an issue or submit a pull request!
|
||||
~~If you encounter any issues or have feature requests, feel free to open an issue or submit a pull request!~~
|
||||
|
|
@ -1,7 +1,8 @@
|
|||
{
|
||||
"imageAdressList": [
|
||||
"blob:app://obsidian.md/2eeefc57-ef48-4b79-9229-157a3ae6ff22",
|
||||
"blob:app://obsidian.md/33457fd7-eab4-428f-ac4c-7fac124f51fc"
|
||||
],
|
||||
"defaultFolder": "images",
|
||||
"transTime": 1000,
|
||||
"changeTime": 600000,
|
||||
"opcity": 0.8,
|
||||
"whetherrandom": 1,
|
||||
"fadeOutTime": 1000
|
||||
}
|
||||
Loading…
Reference in a new issue