logologo

Guide - Writing

Dec 14, 2022 · 2min

Frontmatter

build/node/resolvePage.ts and src/composables/frontmatter.ts
To resolve page frontmatter

ts
export interface PageFrontmatter {
  /**
   * using page title and og:title
   */
  title: string
  /**
   * using page description and og:description
   * `desc` is alias for `description`
   */
  description?: string
  desc?: string
  /**
   * Use custom header image for og:image
   */
  headerImage?: string
}

export interface PageFrontmatter {
  /**
   * using page title and og:title
   */
  title: string
  /**
   * using page description and og:description
   * `desc` is alias for `description`
   */
  description?: string
  desc?: string
  /**
   * Use custom header image for og:image
   */
  headerImage?: string
}

Image

Custom plugins enhance image /build/markdown/image.ts

  • usage:
    ![image-alt](image-src) <-- <size="..."> <class="..."> <!> <desc="..."> -->
  • description: Custom figure size. figure class. image not zoom. figcaption.
md

use lazy attr. 300x300 size. middle. figcaption: "Campground by [@Finca Los Vientos](https://reurl.cc/28aQr4) • Aug 2021"
![Image Example](/image/vitesse.webp) <!-- <size="300x300"> <class="m-auto"> <desc="Campground by [@Finca Los Vientos](https://reurl.cc/28aQr4) • Aug 2021"> -->

use lazy attr. 400x400 size. not Zoom
![Image Example](/image/vitesse.webp) <!-- <size="400"> <!> -->

use lazy attr.
![Image Example](/image/vitesse.webp) <!-- -->


use lazy attr. 300x300 size. middle. figcaption: "Campground by [@Finca Los Vientos](https://reurl.cc/28aQr4) • Aug 2021"
![Image Example](/image/vitesse.webp) <!-- <size="300x300"> <class="m-auto"> <desc="Campground by [@Finca Los Vientos](https://reurl.cc/28aQr4) • Aug 2021"> -->

use lazy attr. 400x400 size. not Zoom
![Image Example](/image/vitesse.webp) <!-- <size="400"> <!> -->

use lazy attr.
![Image Example](/image/vitesse.webp) <!-- -->

Image Example
Campground by @Finca Los Vientos • Aug 2021

Image Example

Image Example

Icon

https://icones.netlify.app/

  1. Search for your favorite icon.
  2. Copy name
  3. Add i- prefix to class
html
<i class="i-carbon:campsite"/> <i class="i-carbon:idea" />

<i class="i-carbon:campsite"/> <i class="i-carbon:idea" />

Container

Default Title

md
::: info
This is an info box.
:::

::: tip
This is a tip.
:::

::: warning
This is a warning.
:::

::: danger
This is a dangerous warning.
:::

::: details
This is a details block.
:::

::: info
This is an info box.
:::

::: tip
This is a tip.
:::

::: warning
This is a warning.
:::

::: danger
This is a dangerous warning.
:::

::: details
This is a details block.
:::

INFO

This is an info box.

TIP

This is a tip.

WARNING

This is a warning.

DANGER

This is a dangerous warning.

Details

This is a details block.

Custom Title

md
::: tip <i class="i-uil:lightbulb-alt" /> Tip: custom title
This is an info message and custom title.
:::

::: tip <i class="i-uil:lightbulb-alt" /> Tip: custom title
This is an info message and custom title.
:::

Tip: custom title

This is an info message and custom title.

Flow

md
::::ul
:::li 2022-02-15
Create repo
:::

:::li 2022-02-28
Released the first available version
:::
::::

::::ul
:::li 2022-02-15
Create repo
:::

:::li 2022-02-28
Released the first available version
:::
::::
2022-02-15

Create repo

2022-02-28

Released the first available version

md
::::ol
:::li First

First Step...

:::
:::li Second ...

Second Step...

:::
::::

::::ol
:::li First

First Step...

:::
:::li Second ...

Second Step...

:::
::::
First

First Step…

Second …

Second Step…

Previous page
Guide - Introduction
Next page
Guide - Custom Theme