115 lines
4.7 KiB
Markdown
115 lines
4.7 KiB
Markdown
---
|
|
title: "Customization"
|
|
tags:
|
|
- setup
|
|
weight: 0
|
|
---
|
|
|
|
# Configuration
|
|
Amethyst is designed to be extremely configurable. You can find the bulk of the configuration scattered throughout the repository depending on how in-depth you'd like to get.
|
|
|
|
The majority of configuration can be found under `config.yaml`. An example, with descriptions for each setting, can be found [here](https://github.com/64bitpandas/amethyst/blob/main/config.yaml).
|
|
|
|
### Code Block Titles
|
|
To add code block titles with Amethyst:
|
|
|
|
1. Ensure that code block titles are enabled in the configuration:
|
|
|
|
```yaml {title="data/config.yaml", linenos=false}
|
|
enableCodeBlockTitle: true
|
|
```
|
|
|
|
2. Add the `title` attribute to the desired [code block
|
|
fence](https://gohugo.io/content-management/syntax-highlighting/#highlighting-in-code-fences):
|
|
|
|
```markdown {linenos=false}
|
|
```yaml {title="data/config.yaml"}
|
|
enableCodeBlockTitle: true # example from step 1
|
|
```
|
|
```
|
|
|
|
**Note** that if `{title=<my-title>}` is included, and code block titles are not
|
|
enabled, no errors will occur, and the title attribute will be ignored.
|
|
|
|
### HTML Favicons
|
|
If you would like to customize the favicons, you
|
|
can add them to the `data/config.yaml` file. The **default** without any set
|
|
`favicon` key is:
|
|
|
|
```html {title="layouts/partials/head.html", linenostart=15}
|
|
<link rel="shortcut icon" href="icon.png" type="image/png">
|
|
```
|
|
|
|
The default can be overridden by defining a value to the `favicon` key in your
|
|
`data/config.yaml` file. For example, here is a `List[Dictionary]` example format, which is
|
|
equivalent to the default:
|
|
|
|
```yaml {title="data/config.yaml", linenos=false}
|
|
favicon:
|
|
- { rel: "shortcut icon", href: "icon.png", type: "image/png" }
|
|
# - { ... } # Repeat for each additional favicon you want to add
|
|
```
|
|
|
|
In this format, the keys are identical to their HTML representations.
|
|
|
|
If you plan to add multiple favicons generated by a website (see list below), it
|
|
may be easier to define it as HTML. Here is an example which appends the
|
|
**Apple touch icon** to Amethyst's default favicon:
|
|
|
|
```yaml {title="data/config.yaml", linenos=false}
|
|
favicon: |
|
|
<link rel="shortcut icon" href="icon.png" type="image/png">
|
|
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
|
|
```
|
|
|
|
This second favicon will now be used as a web page icon when someone adds your
|
|
webpage to the home screen of their Apple device. If you are interested in more
|
|
information about the current and past standards of favicons, you can read
|
|
[this article](https://www.emergeinteractive.com/insights/detail/the-essentials-of-favicons/).
|
|
|
|
**Note** that all generated favicon paths, defined by the `href`
|
|
attribute, are relative to the `static/` directory.
|
|
|
|
### Graph View
|
|
To customize the Interactive Graph view, you can poke around `data/graphConfig.yaml`. The default configuration, with descriptions, can be found [here](https://github.com/64bitpandas/amethyst/blob/main/data/graphConfig.yaml).
|
|
|
|
### Language Support
|
|
[Chinese, Japanese, and Korean support](features/language.md) comes out of the box with Amethyst.
|
|
|
|
Want to support languages that read from right-to-left (like Arabic)? Hugo (and by proxy, Amethyst) supports this natively.
|
|
|
|
Follow the steps [Hugo provides here](https://gohugo.io/content-management/multilingual/#configure-languages) and modify your `config.yaml`
|
|
|
|
For example:
|
|
|
|
```yaml
|
|
defaultContentLanguage: ar
|
|
languages:
|
|
ar:
|
|
languagedirection: rtl
|
|
title: مدونتي
|
|
weight: 2
|
|
```
|
|
|
|
# Custom Styles
|
|
Want to go even more in-depth? You can add custom CSS styling in `assets/_custom.scss`. If you'd like to target specific parts of the site, you can add ids and classes to the HTML partials in `/layouts/partials`.
|
|
|
|
### Changing the Color Scheme
|
|
The default color schemes for light mode and dark mode are located in `assets/_colors.scss`. You can replace the values for existing color variables for drop-in edits, or create new variables to reference in `_custom.scss`.
|
|
|
|
### Changing the Fonts
|
|
All fonts are defined in `assets/_fonts.scss`. There are examples for both local fonts (defined using `@font-face`) and webfonts (fetched with `@import` from a font distributor such as Google Fonts).
|
|
|
|
You can place all local fonts in the `static/fonts` folder.
|
|
|
|
### Partials
|
|
Partials are what dictate what gets rendered to the page. Want to change how pages are styled and structured? You can edit the appropriate layout in `/layouts`.
|
|
|
|
For example, the structure of the home page can be edited through `/layouts/index.html`. To customize the footer, you can edit `/layouts/partials/footer.html`
|
|
|
|
More info about partials on [Hugo's website.](https://gohugo.io/templates/partials/)
|
|
|
|
Still having problems? Checkout our [FAQ and Troubleshooting guide](setup/troubleshooting.md).
|
|
|
|
|