icon: LiSettings
description: Learn all about the various configurations of the plugin
tags:
- Tutorial
cssclasses:
- close-subheaders
- Settings
Export Modal
The export modal contains a few important configurations too. Check out export modal to learn about them.
Page Features
This section contains settings to enable or disable different features that can be added to the export.
Add a theme toggle
Setting name: Theme Toggle
Include a theme toggle at the top left of the page. This option is only available in Online Web Server mode and HTML Documents mode.
Add a document outline or table of contents
Setting name: Document outline / table of contents
Include an outline in the right sidebar that shows the table of contents of the current page. This option is only available in Online Web Server mode and HTML Documents mode.
Add a file navigation tree
Setting name: File navigation tree
Include file navigation in the left sidebar. This feature is recommended to be used alongside the Search bar. This option is only available in Online Web Server mode and HTML Documents mode. To learn more about this feature see File Navigation.
Enable default file & folder icons
Setting name: File & folder icons
Include a file icon next to files and a folder icon next to folders. This adds an icon to every item in the File navigation tree. This option does not have to be enabled in order to use Custom icons.
Custom file & folder icons
To have more control over the icons shown on your files and folders, use the Iconize Plugin. Once the plugin is installed, open the Iconize plugin's settings and add some icon packs. You can then right click on any file or folder to change it's icon.
You may also set the icon using frontmatter.
Set the icon or sticker property in frontmatter to an emoji or the name of a Lucide icon, or iconize icon. You can find a searchable list of Lucide icons here: https://lucide.dev/icons/.
The icon will also be pulled from the MAKE.md plugin or the Banners plugin if they are being used for icons.
Add a search bar
Setting name: Search Bar
Include a full text search bar above the File Navigation. To learn more about this feature see Search Bar.
Add a global graph view
Setting name: Graph View
Include a global graph view of your export. To learn more about this feature see Graph View. The controls for the graph view are listed below.
Attraction Force
How strong is the attraction between each node.
Link Length
How long are the links between each node.
Repulsion Force
How strongly do the nodes repel each other.
Central Force
How strongly are the nodes attracted towards the center.
Min / Max Node Radius
What is the minimum or maximum size a node can be? The farther away these are from the same value the more "contrast" there will be between the sizes of different nodes. Nodes are sized based on how many other files are linked to them.
Edge Pruning Factor
This is a more advanced option which is used to make extremely complex tangled graphs more pleasing to look at. As links between nodes get longer they are less easy to follow around the graph. This option allows you to hide links that are significantly longer than the normal link length. These links still contribute to the simulation, and they still show up when a node is hovered, but otherwise they are hidden. This makes the links that are close much easier to read.
File & folder emoji style
Setting name: Icon emoji style
This option ONLY affects the icons shown next to files and folders or icons shown above the page title. Choose between a number of different styles of emoji.
Native: 😊🎉❤️🤞
Twemoji: 
OpenMoji: 
OpenMoji Outline: 
Fluent UI: 
Add custom head content
Setting name: Custom head content
Custom head content allows you to embed any .html file into the <head> tag of every html document. This allows you to include new html, JavaScript, analytics, or stylesheets into your website. This accepts both absolute paths, or paths relative to the vault. so for example if you are storing your head.html at the root of your vault you can just type head.html into the path. You can also browse for a file using the Browse button.
To add a script to the html you must you script tags:
<script>
alert("Wow my custom script works");
</script>
To add a style to the html you must use style tags:
<style>
body
{
--tree-vertical-spacing: 1.4em !important;
}
</style>
Note that you can also add styles using Snippets, all enabled user snippets are added to the export automatically.
Add a favicon
Setting name: Favicon path
This is an absolute or relative path to an image file to use as the favicon for you page. This is the little icon that will show next to your page in the browser.
Page Behaviors
This section lets you modify the behavior of different features.
Adjust outline collapse depth
Setting name: Min outline collapse depth
Sets the minimum header level that can be collapsed in the outline. The options are:
- 1 - This means all items can be collapsed
- 2 - This means the page title cannot be collapsed
- None - No elements can be collapsed
Make outline collapsed by default
Setting name: Start outline collapsed
If this is enabled all the items in the outline will be collapsed by default. The user can then open them as they explore the document. This is really only useful for very very long documents.
Allow folding headings
Setting name: Allow folding headings
An arrow will appear when a heading is hovered over which will allow the user to collapse everything inside that header.
Allow folding lists
Setting name: Allow folding lists
An arrow will appear when a list with sub-items is hovered which will allow the user to collapse everything inside that header.
Allow resizing sidebars
Setting name: Allow resizing sidebars
Allow the user to resize the sidebars by clicking and dragging on the edge of the sidebar. They will also be able to double click the handle to reset the sidebar to default. Learn more about the sidebars here: Sidebars.
Layout Options
Adjust document line width
Setting name: Document width
The document width is just the width of the document! However you can define it using any CSS units. I would recommend using em units which are relative to the font size. For example 40em will make the page roughly 40 characters wide.
Adjust sidebar width
Setting name: Sidebar width
The sidebar width is... you guessed it, the width of the sidebar! You can also define this using any CSS units. I would recommend using em units which are relative to the font size. For example 20em will make the sidebar roughly 20 characters wide.
Export Options
Only export newly modified files
Setting name: Only export modified files
This option, when on, will make the plugin only generate new html for files which have been changed since the last export. It also will try it's best to update all other data in other files like themes, classes, scripts, styles, etc.
Automatically delete old files
Setting name: Delete old files
This option, when on, will delete old files which have been renamed or moved since the last export. This helps keep the export directory clean of junk files that are no longer being used. This option should never delete files which are not part of the original export, but you should always back up your files just in case.
Minify HTML
Setting name: Minify HTML
Should the HTML, JS, and CSS be minified? I would recommend always leaving this on unless you know why you need to turn it off. If you turn it off the files will take longer to load.
Change the logging Level
Setting name: Log Level
What level of logs should be output to the console, if you like more detailed info about the export you can switch this to Info or if you don't want to see warnings you can change it to Error, however I highly recommend leaving it on Warning as there are some warnings that can be quite important.
Asset Options
Control styles and the way they are included on the page.
Make files work offline
Setting name: Make offline compatible
Should we make sure no links to online resources are used? If you don't need this you should leave it off because it will help things load faster if we can load from CDNs.
Include CSS from Plugins
Setting name: Include CSS from Plugins
This setting allows you to select which plugins to include CSS for. Many plugins will not show up here because their styles would have no effect or because they do not have styles.
If plugin features aren't rendering correctly, try adding the plugin to this list. Avoid adding plugins unless you specifically notice a problem, because more CSS will increase the loading time of your page.
Example of the plugin picker:
Include plugin CSS using svelte
Setting name: Include Svelte CSS
Should we include all plugin styles using svelte? Unfortunately we cannot determine which plugins correspond to which svelte styles so these are all combined into a single toggle.
Metadata
Control the metadata for your pages and control RSS feeds
Public site URL
Setting name: Public site URL
This is the publish URL which your files will be uploaded to. This needs to include the whole domain and all the subfolders up until your website. For example this website's public URL is https://docs.obsidianweb.net/ however if I decided to upload the site to a subfolder instead it might be something like https://obsidianweb.net/docs/.
Setting an author name
Setting name: Author name
This is your name! Or someone else's name! It doesn't really matter, it will just show up in the metadata of the site and in the RSS feed. You can override this per-page by setting the author property.
Change the vault title
Setting name: Vault title
This is the vault's title, it will be displayed above the File Navigation, and be included in a number of other various places.
Creating an RSS feed
Setting name: Create RSS Feed
Should we create an RSS feed for the export? If we do create one it will be saved to /lib/rss.xml. For example, this website's RSS feed is located at https://docs.obsidianweb.net/lib/rss.xml
Page Description / Summary
You can set a page's description using the description property or the summary property. This description will be shown in the RSS feed and in the HTML description metadata. Setting this can help SEO. It will also possibly be used for more things in the future 😉
Page title property
This lets you change the property name that is used to set a custom page title. By default you can use the title property to set a custom display title for any document.