The code block ccard uses YAML syntax for displaying groups of item data in different styles. The mechanism is that if you put a ccard code block with data definition in your note file, in the preview mode, the code block will be rendered as different style of views of data.
It is initially designed for displaying overview of folder contents in Obsidian vault. A folder may contain some notes and subfolders which can be presented with thumb view or list view as the system file explorer does.
Currently, the Folder Note Plugin for Obsidian uses the ccard code block to define item data and show them in a card style view. In the future, a list view will be supported.
The ccard code block can be used in any normal note to present whatever content you like. There are some sample recipes which can be used for different requirements.
The item data of ccard can be defined one by one, or automatically generated by some pre-defined keywords. The document introduces the syntax of data definition, generation and presentation.
An item data describes the information of something you want to present, it could be a note file, a folder or a link. An item data includes the following attributes:
- title: the title of the item. (Mandatory)
- link: the link URL for the title, it can be a website URL or a obsidian note file path. (Optional)
- head: text appear on the item head. (Optional)
- image: background image for the head. set as '#FF0000', if you want to set the background as pure color. (Optional)
- brief: brief introduction for the item. (Optional)
- foot: footnote for the item. (Optional)
For example, the following image shows two card items with different head styles.
The item data are defined with YAML codes as:
```ccard
items: [
{
title: 'Pen Introduction',
link: 'things/pen.md',
image: 'assets/image-pen.png',
brief: 'This is a note item shown in card view with a backgroud image.',
foot: 'Footnote'
},
{
title: 'Data Folder',
head: 'Folder',
image: '#6B5BD0',
brief: 'This is a folder item shown in card view with a color head with text "FOLDER".',
foot: 'Last modifed: 2020-01-08'
}
]
```
- Since the the Item Data use YAML codes, if any string of the attributes contains quotes
', you should use double quotes:''to escape instead of using\' - Use
::to escape: - Use the key
imagePrefixif your images are stored in different attachment folders. See sample recipes for more information.
The item data can be defined or generated with different methods which is specified by the key type in the code block. This section introduces different types of methods and their options. In the future, there will be more types.
In the above example, all the item data are statically defined in the key items as a list. This is the type: static method which is also the default type. You can omit or explicitly set the key in the code block:
```ccard
type: static
items: [
...
]
This type will automatically generate item data of folder brief for you. For example, if you put the following code block in a note file:
```ccard
type: folder_brief_live
```
In the preview mode, this code block will be displayed as a card view of folder overview. If contents in the folder are changed, the card items will changed automatically.
There are some keys to control the content of folder_brief_live:
The default folder path of folder_brief_live is the parent path of the active note file. If you want to generate overview for other folder path, you can set the folder key in the code block. For example, the following code block will present an overview for the folder media/music in your Obsidian vault.
```ccard
type: folder_brief_live
folder: media/music
```
There can be multiple ccard code blocks in a note file. for example, the following code block shows overview of different folders in a single note file.
# All my music notes
```ccard
type: folder_brief_live
folder: media/music
```
# All my video notes
```ccard
type: folder_brief_live
folder: media/video
```
For the brief contents, it tries to read the first paragraph of a note as its brief. If there is no paragraph text, it will use section headings. The default max length of the brief is 64 characters, if you want to increase it, please use the briefMax key, for example:
```ccard
type: folder_brief_live
folder: media/video
briefMax: 128
```
The folder_brief_live tries to generate folder overview for both sub folders and notes, set the noteOnly key to true to let it show only notes for the overview, for example:
```ccard
type: folder_brief_live
folder: media/video
noteOnly: true
```
You can change the display styles of the item data by the following keys.
This style : card displays item data in a card style view, it is the default style which can be omitted in the code blocks.
You can show the item data in strip style by:
```ccard
type: folder_brief_live
style: strip
```
The following image shows the preview of card and strip style view:
In the future there will be more styles, such as list, chart or mind map.
It controls how many columns in a row for card style view. The default is 3. For example, the following code block display folder overview with 4 cards in a row.
```ccard
type: folder_brief_live
style: card
col: 4
```
It will add a prefix string to every image path defined in the data items. It is useful when all the images are from the same folder or url. For example:
```ccard
items: [
{
title: 'test1',
image: 'image1.png',
brief: 'brief for test1',
},
{
title: 'test2',
image: 'assets/image2.png',
brief: 'brief for test2',
}
]
imagePrefix: 'assets/'
```
Now, the image path of the first item will be modified as assets/image1.png. However, the second item's image path will not be modified since it starts with the same string of imagePrefix. See sample recipes for more information.