Skip to content

Aypz/Obsidian-Homepage

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

96 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

中文示例库最新版下载 | Download the newest Example Vault in English

Screen Shot 2022-06-01 at 12 05 27

2022-10-17 Warning:

  1. Rainbell users have repetitively reported problems with one specific plug-in that is Icon Folder. It can cause various problems such as disabling searching or causing trouble for synchronization. I recommend that you disable this plugin or use its older version (v1.0.61). 雨铃库使用者经常在插件icon folder上遇到问题,该插件可能导致搜索功能失效或对同步造成麻烦(尤其是坚果云同步),推荐使用该插件老版本(v1.0.61)或者卸载该插件。

2022-05-19 Update:

  1. Added an example vault in English.

2022-05-13 Update:

  1. Added an example vault (in Chinese). An English example vault will also be released this month.

Screen Shot 2022-05-13 at 11 35 00 AM


2022-04-14 Update:

  1. Added banner icon as date today in homepage setting.css;
  2. Added stickie css for birthday countdown in homepage setting.css;

WeChat5e2e0344e00b1c22b7cce116230b8e6b

2022-02-24 Update:

  1. Added task-based Project Tracking which would present a progress bar of finished_tasks/all_tasks in the project page. (To use, include target: tasks and tags: project in the YAML section and enable sharetype.css for special tag styling.
  2. Deleted Profile photo; Added Banners Icon.

Screen Shot 2022-02-24 at 8 39 04 PM


2022-01-11 Update:

  1. Added status bar styling to the project tracking section.

Screen Shot 2022-01-11 at 3 46 06 PM

Screen Shot 2022-01-11 at 3 50 43 PM


2022-01-07 Update:

  1. Fixed mobile view of the homepage;
  2. Made modifications to allow an all-theme homepage view.

Obsidian-Homepage

A dashboard for your obsidian vault.

IMG_7055

Features

Currently the homepage features:

  1. A map of contents that leads to different parts in your vaults (such as your daily notes, weekly notes an other periodic notes);

IMG_6675

  1. Three button tabs that allow you to switch between different parts you'd like to display. Currently there's a music of the month and automatic birthday countdown featured (this part is supported by the plugin React Components);
  2. A dynamic view of different sections in your daily note (in my case they are diaries, daily agendas, and my parrot logs);

Screen Shot 2022-01-11 at 3 54 05 PM

  • using dataviewjs to to present the daily note embeds is convenient but it has one drawback which I simply cannot endure, that is, it will crash down every time you edit the daily note (which I do a lot through quickadd while staying on homepage). There is now an alternative to this which I recommend using quickadd macro. Please check ### QA automatic date update for more information;
  1. A project tracking for notes with the tag #project;
  2. A Currently Reading section yet to be automatized;
  3. Obsidian activity.

To use this homepage

  1. Install Dataview, Banners, React Components, Admonition and Activity History (Quickadd optional);
  2. The theme Blue Topaz is suggested;
  3. Enable React Components; Create a components folder and put "music and birthday countdown.md" in it;
  4. Add the two css files to your css snippets folder; (* The css file disable hover preview for wiki links)
  5. Dataview: enable dataviewjs and inline queries;
  6. Admonition: create an "ad-col2" view with no background colors and no codeblock names;

Screen Shot 2022-01-11 at 11 48 36 PM

  1. Open the 00. Homepage.md note in your vault and get all sections personalized.

Extra notes

  1. To use birthday countdown function, you'll need to create a page with the name of the persons/pets you'd like to have a countdown for and add "birthday: YYYY-MM-DD" in the YAML.
  2. To use project tracking you'll need to have a
target: 10000
status: in progress
tags: project

in the YAML section of your single note project. It's based on WordCountTable so you can check there for more info.

If your project is tasks-based, and you want the progress bar to depict finished_tasks/all_tasks instead, use the YAML

target: tasks
status: in progress
tags: project

Enable sharetype.css for special tag styling.

Tricks

Customizable Page Header

With this plugin you can quickly access your homepage (Homepage plugin required) from anywhere, both on PC and your phone.

Screen Shot 2022-01-11 at 11 27 19 PM

Settings:

Screen Shot 2022-01-11 at 11 45 03 PM

Advanced URI

With the plugin Advanced URI you can create a url for literally anything. Currently I am only using this for running two commands:

  1. open big calendar
  2. open memos

Screen Shot 2022-01-11 at 11 37 18 PM

3. I also strongly recommend using Advanced URI to generate buttons for open daily notes (or monthly, weekly notes), for the dataviewjs code in the next section proves to be unreliable on mobile and cannot create the daily note when it doesn't exist.

Screen Shot 2022-04-20 at 8 14 16 PM

Dynamic Buttons

There are several kinds of dynamic buttons in the MOC part.

  1. Periodic Notes

Supposing you have a daily note formatted YYYY-MM-DD, you should write the md link as followed:

- `$= '[['+moment().format("YYYY-MM-DD")+'|Today]]'`

It'll create a button displaying "Today" that leads to your daily note.

Some other suggestions with Advanced URI

  • you can change the current daily note button to link to the command: open daily note which would create the daily note with your chosen template when it does not exist.
  1. URL scheme

If you are using Apple products, both MacOS and IOS have extensive URL schemes that allow you to open almost any app using URL, even perfoming some actions within the app (e.g. open a specific note; open a specific book in IBooks, etc.) I have installed a RSS reader called REEDER and am using this button to open it

- [Reeder](reeder:https://)

QA Automatic Date Update

This is a roundabout way to display dynamic daily notes embeds in our homepage. Originally, we used Dataviewjs to achieve this, but with dvjs we have to refresh the page every time we made modifications to the daily note (I frequently modified daily note while staying on my homepage with quickadd).

Now there is a more stable way using quickadd macro.

We will start with this codeblock (it is present in the 00. homepage.md file, but hidden with %%).


![[2022年01月19日#日记]]

![[2022年01月19日#日程]]

![[Pasted image 20211221152043.png#center|200]]

![[2022年01月18日#鸟崽]]

In which I display three sections of my daily note.

Screen Shot 2022-01-19 at 9 46 36 AM

Then, we install quickadd, click on manage macros, then add a new macro Date Update set to run on plugin load.

Screen Shot 2022-01-19 at 9 48 11 AM

Next, download the DateUpdate.js script to anyplace in your vault.

Open the script with any editor, and change the homepage filepath and section formats according to the instructions.

Screen Shot 2022-01-19 at 9 51 37 AM

Screen Shot 2022-01-19 at 9 51 50 AM

Configure the new macro, and you'll see DateUpdate listed in the userscript.

Screen Shot 2022-01-19 at 9 50 11 AM

Add it.

Screen Shot 2022-01-19 at 9 52 38 AM

Then you are all set! Now the date will automatically update whenever you open Obsidian.

Obsidian 主页