Coder Social home page Coder Social logo

obsidian-homepage's Introduction

中文说明请往下翻

2022-01-11 Update:

  1. Add 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 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

  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 Obsidian Activity;
  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;
  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 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 https://gist.github.com/chrisgrieser/ac16a80cdd9e8e0e84606cc24e35ad99 so you can check there for more info.

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

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" and leads to your daily note.

  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://)

Obsidian 主页

Screen Shot 2022-01-11 at 3 48 37 PM

目前主页功能

  1. 一个导航,可通向您的Obsidian库中的不同部分(例如您的每日笔记、每周笔记和其他定期笔记),

IMG_6675

  1. 三个选项标签,可让您在要显示的不同部分之间切换。目前有本月音乐和自动生日倒计时功能。
  2. 每日笔记中不同部分的动态视图(在我的情况下,它们是日记、每日议程和我的鹦鹉日志)
  3. 带有标签#project 的笔记项目跟踪
  4. 目前阅读部分尚未自动化
  5. Obsidian动态记录。

要使用此主页

  1. 安装Dataview、Banners、React Components、Admonition和Obsidian Activity;
  2. 建议使用 Blue Topaz 主题,因为它对 Admonition 的额外支持:安装主题后,下载插件 Style Settings 并在其中启用 Admonition Support(否则您可能没有包含日常笔记部分的分栏视图)
  3. 启用React Components;创建一个components文件夹,把“音乐和生日倒计时.md”放进去;
  4. 将这两个 css 文件添加到您的 css 片段中;
  5. Dataview:启用dataviewjs和inline queries;
  6. Admonition:创建一个没有背景颜色和代码块名称的“ad-col2”,配置如下图;

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

8. 在您的 Vault 中打开 00.Homepage,并让所有部分都个性化。

额外说明

  1. 要使用生日倒计时功能,您需要创建一个页面,其中包含您想要倒计时的人/宠物的名称,并在 YAML 中添加“birthday:YYYY-MM-DD”。
  2. 要使用项目跟踪,您需要有一个
target:10000
status:进行中
tags: project

在单笔记项目的 YAML 部分。它基于 https://gist.github.com/chrisgrieser/ac16a80cdd9e8e0e84606cc24e35ad99 因此您可以在此处查看更多信息。

技巧

Customizable Page Header

使用此插件,您可以在 PC 和手机上的任何地方快速访问您的主页(需要Homepage插件)。

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

设置:

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

Advanced URI

使用插件 Advanced URI,您可以为几乎任何内容和操作创建一个 url。目前我只使用它来运行两个命令:

1.打开Big Calendar

2.打开Memos

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

动态按钮

MOC部分有几种动态按钮。

  1. 定期笔记

假设您有一个格式为 YYYY-MM-DD 的每日笔记,您应该如此编写 md 链接,如下所示:

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

它将创建一个显示“今天”的按钮并指向您的每日笔记。

  1. URL方案

如果您使用的是 Apple 产品,MacOS 和 IOS 都有详尽的 URL 方案,允许您使用 URL 打开几乎任何应用程序,甚至可以在应用程序内执行某些操作(例如打开特定笔记;在 IBooks 中打开特定书籍等)我安装了一个名为 REEDER 的 RSS 阅读器,并使用此按钮打开它

- [Reeder](reeder://)

obsidian-homepage's People

Contributors

rainbell129 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.