Notepad/enter/Coding Tips (Classical)/Project Vault/Obsidian/Obsidian Guides/Digital Garden Plugin.md

87 lines
2.7 KiB
Markdown
Raw Normal View History

Digital Garden is the Obsidian plugin that lets me publish changes from my local obsidian here directly to the web on my personal website. Below are some helpful tips & tricks I've collected to streamline the process.
----
## Appearances:
#### Digital Garden Themes:
- 80's Neon - dark mode
- ![[Pasted image 20230816173235.png]]
- Terminal
- ![[Pasted image 20230816174402.png]]
- Bubble Space
- ![[Pasted image 20230817142703.png]]
- Everblush
- ![[Pasted image 20230817143911.png]]
- MagicUser
- ![[Pasted image 20230822101036.png]]
- Molecule
- ![[Pasted image 20230822102448.png]]
- Notation
- ![[Pasted image 20230822102804.png]]
- Origami
- ![[Pasted image 20230822103145.png]]
## Custom Code
---
For further tweaks and customization, adding in your own CSS is helpful. Digital Garden docs provides a helpful guide to notes icon customizing and how to find this in the source files.
### Commands
Helpful commands in digital garden front-matter placed at the top of a note.
- **Hide file from file tree :** If you want to hide a note from the filetree, you can do so by setting dg-hide to true.
```
---
dg-hide: true
---
```
- **Pinning notes to filetree :** If you want certain notes to be at the top of the folder its in, you can use the dg-pinned attribute. Setting this to true will make the note be on top of the folder it is currently in
```
---
dg-pinned: true
---
```
---
### CSS
1. Customizing Icons.
Navigate to `repo/src/site/img` to drop the icon .svg file there and then navigate to `repo/src/site/styles` to edit the `custom-style.css` file.
###### via [Digital Garden Docs. ](https://dg-docs.ole.dev/advanced/note-specific-settings/#note-icons) - Changing and adding icons
You can change and add your own icons the following way:
The ideal way to change the default icons is by adding the svgs in the img folder and setting the appropriate css vars in body in a [custom css file](https://dg-docs.ole.dev/advanced/adding-custom-components/#dynamic-css-scss):
```css
body {
--note-icon-1: url(/img/your-custom.svg);
--note-icon-2: url(/img/tree-2.svg);
--note-icon-3: url(/img/tree-3.svg);
--note-icon-fallback: url(/img/default-note-icon.svg);}
}
```
To add new icons, let's say, for 'stone', add a snippet like this (and add the relevant svg) in a [custom css file](https://dg-docs.ole.dev/advanced/adding-custom-components/#dynamic-css-scss):
```css
body.title-note-icon .cm-s-obsidian > header > h1[data-note-icon="stone"]::before,
body.filetree-note-icon .filename[data-note-icon="stone"]::before,
body.links-note-icon .internal-link[data-note-icon="stone"]::before,
body.backlinks-note-icon .backlink[data-note-icon="3"]::before {
background-image: url(/img/stone.svg);
}
```