There are three ways to reference local resources such as **images** and **music**:
1. Using [page resources](https://gohugo.io/content-management/page-resources/) in [page bundles](https://gohugo.io/content-management/page-bundles/).
You can reference page resources by the value for `Resources.GetMatch` or the filepath of the resource relative to the page directory directly.
2. Store resources in the **assets** directory, which is `/assets` by default.
The filepath of the resource to reference in the post is relative to the assets directory.
3. Store resources in the **static** directory, which is `/static` by default.
The filepath of the resource to reference in the post is relative to the static directory.
The **priority** of references is also in the above order.
There are many places in the theme where the above local resource references can be used,
such as **links**, **images**, `image` shortcode, `music` shortcode and some params in the **front matter**.
Images in page resources or assets directory [processing](https://gohugo.io/content-management/image-processing/)
will be supported in the future.
It's really cool! :(far fa-grin-squint fa-fw):
{{</admonition>}}
## 2 Front Matter {#front-matter}
**Hugo** allows you to add front matter in `yaml`, `toml` or `json` to your content files.
{{<admonition>}}
**Not all** of the below front matters need to be set in each of your posts.
It is necessary only if the front matters and the `page` part in your [site configuration](../theme-documentation-basics#site-configuration) are inconsistent.
- **date**: the datetime assigned to this page, which is usually fetched from the `date` field in front matter, but this behaviour is configurable in the [site configuration](../theme-documentation-basics#site-configuration).
By default, Hugo automatically takes the first 70 words of your content as its summary.
You may customize the summary length by setting `summaryLength` in the [site configuration](../theme-documentation-basics#site-configuration).
If you are creating content in a [CJK]^(Chinese/Japanese/Korean) language and want to use Hugo’s automatic summary splitting, set `hasCJKLanguage` to `true` in your [site configuration](../theme-documentation-basics#site-configuration).
### Manual Summary Splitting
Alternatively, you may add the `<!--more-->` summary divider where you want to split the article.
Content that comes before the summary divider will be used as that content’s summary.
{{<admonition>}}
Be careful to enter `<!--more-->` exactly; i.e., all lowercase and with no whitespace.
{{</admonition>}}
### Front Matter Summary
You might want your summary to be something other than the text that starts the article. In this case you can provide a separate summary in the `summary` variable of the article front matter.
### Use Description as Summary
You might want your description in the `description` variable of the article front matter as the summary.
You may add the `<!--more-->` summary divider at the start of the article. Keep content that comes before the summary divider empty. Then **CodeIT** theme will use your description as the summary.
Because there are multiple ways in which a summary can be specified it is useful to understand the order. It is as follows:
1. If there is a `<!--more-->` summary divider present in the article but no content is before the divider, the description will be used as the summary.
2. If there is a `<!--more-->` summary divider present in the article the text up to the divider will be provided as per the manual summary split method.
3. If there is a summary variable in the article front matter the value of the variable will be provided as per the front matter summary method.
4. The text at the start of the article will be provided as per the automatic summary split method.
{{<admonition>}}
It is not recommended to include rich text block elements in the summary, which will cause typographic errors. Such as code blocks, pictures, tables, etc.
{{</admonition>}}
## 4 Basic Markdown Syntax
This part is shown in the [basic markdown syntax page](../basic-markdown-syntax/).
By the extension, when selecting and copying $ \KaTeX $ rendered elements, copies their $ \LaTeX $ source to the clipboard.
Set the property `copyTex = true` under `[params.math]` in your [site configuration](../theme-documentation-basics#site-configuration) to enable Copy-tex.
Select and copy the formula rendered in the previous section, and you can find that the copied content is the LaTeX source code.
#### mhchem
**[mhchem](https://github.com/Khan/KaTeX/tree/master/contrib/mhchem)** is an extension for **$ \KaTeX $**.
By the extension, you can write beautiful chemical equations easily in the article.
Set the property `mhchem = true` under `[params.math]` in your [site configuration](../theme-documentation-basics#site-configuration) to enable mhchem.
