Obsidian-Main/05. 資料收集/Tool Setup/Software/Obisidian.md

---
tags: 
aliases: 
date: 2022-05-26 
time: 14:51:12
description: 
---

## YAML front matter
官方說明：[YAML front matter - Obsidian Help](https://help.obsidian.md/Advanced+topics/YAML+front+matter)
目前使用的front matter是[[front matter]]。

## 自動產生時間日期
Obsidian在抽入template的時候，可以使用`{{date}}`來表示日期，用`{{time}}`來表示時間。

### `{{date}}` & `{{time}}`
`{{date}}`產生的時間格式為`2022-05-26`，可以使用參數來更改格式，例如不要讓月份與日期自動補0，可以用`{{date:YYYY-M-D}}`。
時間也一樣，`{{time}}`產生的格式為`14:48:45`，也有其他參數來變更格式，其他更詳細參考[Moment.js | Docs](https://momentjs.com/docs/#/displaying/)。

## Customize CSS
路徑是`<valut_name>\.obsidian\snippets\obsidian.css`
Obsidian預設定義了很多CSS class，只要更改這些class就可以定義自己喜歡的外觀。
- [Obsidian自定义样式修改教程 - 知乎](https://zhuanlan.zhihu.com/p/373888121)
- [obsidian-css-snippets](https://github.com/Dmytro-Shulha/obsidian-css-snippets/tree/master/Snippets)
- [使用 CSS 代码片段增强 Obsidian 视觉效果（一） | ReadingHere](https://www.readinghere.com/blog/using-css-snippets-to-enhance-obsidian-visuals-cn/)

## My CSS
The CSS content:
```css
/*************************************************************
 *  Headers
 */
.cm-header-1, .markdown-preview-section h1 {
    color: #081f37;
}

.cm-header-2, .markdown-preview-section h2 {
    color: #1e549f;
}

.cm-header-3, .markdown-preview-section h3 {
    color: #2e79ba;
}

.cm-header-4, .markdown-preview-section h4 {
    color: #5fc9f3;
}

.cm-header-5, .markdown-preview-section h5 {
    color: #415865;
}

.cm-header-6, .markdown-preview-section h6 {
    color: #7a9eb1;
}

/*************************************************************
 * List
 */
.cm-list-1 {
    font-family: Cascadia Code;
}

.cm-list-2 {
    font-family: Cascadia Code;
}

.cm-list-3 {
    font-family: Cascadia Code;
}

.cm-list-4 {
    font-family: Cascadia Code;
}

.cm-list-5 {
    font-family: Cascadia Code;
}

span.cm-formatting-list-ul {
    visibility: hidden !important;
}
  
span.cm-formatting-list-ul:after {
    content: '• '; /* ITS theme; for Blue Topaz  */
    margin-left: -12px;
    color: var(--accent); /* ITS theme; for Blue Topaz --text-normal */
    visibility: visible !important;
}

ol {
    font-family: Cascadia Code;
    padding-inline-start: 2.5rem;
}

ul {
    font-family: Cascadia Code;
    padding-inline-start: 2.4rem;
    list-style-type: disc;
}

/*Make list marker to be a circle*/
input[type="checkbox"],
.cm-formatting-task {
  -webkit-appearance: none;
  appearance: none;
  border-radius: 50%;
  border: 1px solid var(--text-faint);
  padding: 0;
  vertical-align: middle;
}

.cm-s-obsidian span.cm-formatting-task {
  color: transparent;
  width: 1.1em !important;
  height: 1.1em;
  display: inline-block;
}

input[type="checkbox"]:focus {
    outline: 0;
}

input[type="checkbox"]:checked,
.cm-formatting-task.cm-property {
  background-color: var(--text-accent-hover);
  border: 1px solid var(--text-accent-hover);
  background-position: center;
  background-size: 60%;
  background-repeat: no-repeat;
  background-image: url('data:image/svg+xml; utf8, <svg width="12px" height="10px" viewBox="0 0 12 8" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g transform="translate(-4.000000, -6.000000)" fill="%23ffffff"><path d="M8.1043257,14.0367999 L4.52468714,10.5420499 C4.32525014,10.3497722 4.32525014,10.0368095 4.52468714,9.8424863 L5.24777413,9.1439454 C5.44721114,8.95166768 5.77142411,8.95166768 5.97086112,9.1439454 L8.46638057,11.5903727 L14.0291389,6.1442083 C14.2285759,5.95193057 14.5527889,5.95193057 14.7522259,6.1442083 L15.4753129,6.84377194 C15.6747499,7.03604967 15.6747499,7.35003511 15.4753129,7.54129009 L8.82741268,14.0367999 C8.62797568,14.2290777 8.3037627,14.2290777 8.1043257,14.0367999"></path></g></g></svg>');
}

/*************************************************************
 *  External link & Internal link
 */
.cm-s-obsidian span.cm-link, 
.cm-s-obsidian span.cm-url,
.cm-s-obsidian span.cm-hmd-internal-link {
    color: #0000EE;
    font-family: Cascadia Code;
}

a.external-link {
    color: #0000EE;
    font-family: Cascadia Code;
}

/*************************************************************
 *  Outline
 */
.outline {
    font-size: 0.8rem;
    font-weight: 200;
}

.outline .tree-item {
    line-height: 1.3;
}

.outline .tree-item-self {
    padding-top: 0.2rem;
    padding-bottom: 0.1rem;
    padding-left: 0.5rem;
    padding-right: 0.3rem;
}  

.outline .tree-item-collapse {
    left: 0.1rem;
}  

.outline .tree-item-inner{
    position:relative;
    padding-top: 0.2rem;
    /* padding-left: 1rem; */
    padding-left: 1.7em;
    text-indent: -0.8em;
    margin-left: 0.2rem;
    /* font-size: 0.9em; */
}  

.outline .tree-item-children {
    margin-left: 0.7rem;
    padding-left: 0.5rem;
    margin-top: -0.3rem;
    padding-top: 0.3rem;
    border-left: 1px solid var(--sidebar-marks, var(--background-modifier-border));
    border-radius: 4px;
    transition:all 0.5s ease-in-out;
}

.outline .tree-item-children:hover {
    border-left-color: var(--sidebar-marks-hover, var(--background-secondary));
}

.outline .collapse-icon + .tree-item-inner {
    font-weight: 400;
    padding-left: 0.2rem;
    /* margin-left: 0rem; */
    /* font-size: 1em; */
}

.outline .collapse-icon {
    margin-top: 0.2rem;
    margin-left: -0.4rem;
    margin-right: -0.4rem;
    width: 2rem;
}


/*************************************************************
 *  Sidebar
 */
/*Vault name*/
.nav-folder.mod-root > .nav-folder-title {
    padding-left: 6px;
    font-size: 14px;
    font-weight: bolder;
    top: -6px; /* higher */
    cursor: default;
    color: var(--base2);
}

.nav-folder-title,
.nav-file-title {
    font-size: 0.8em;
    font-family: consolas;
    line-height: 0.8em;
}

.nav-folder-title {
    font-weight: bold;
    color: #132743;
}

.nav-file-title {
    color: #407088;
}

.nav-folder,
.nav-file {
    margin: 0 !important;
    border-left: 1px solid rgba(118, 158, 165, 0.2);
}

.cm-quote {
    line-height: 1.2em;
    /*font-style: italic;*/
}


/*************************************************************
 *  Quote
 */
.cm-formatting-quote:before {
  margin-right: -0.1em;
  color: var(--color-10) !important;
  font-family: "ico";
  content: "\edd5";
}


/*************************************************************
 *  Code block(inline)
 */
.cm-s-obsidian span.cm-inline-code {
    /*font-size: 1em;*/
}
```

## 參考
- [使用 CSS 代码片段增强 Obsidian 视觉效果（一） | ReadingHere](https://www.readinghere.com/blog/using-css-snippets-to-enhance-obsidian-visuals-cn/)
- [obsidian-css-snippets](https://github.com/Dmytro-Shulha/obsidian-css-snippets/tree/master/Snippets)
- [Obsidian自定义样式修改教程 - 知乎](https://zhuanlan.zhihu.com/p/373888121)
- [Day 26 : 插件篇 05 — 做好筆記備份，使用 Obsidian Git自動備份筆記到 Github - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天](https://ithelp.ithome.com.tw/articles/10280373)