275 lines
7.2 KiB
Markdown
275 lines
7.2 KiB
Markdown
---
|
||
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) |