Merge pull request #146 from geoffreygarrett/hugo

This commit is contained in:
Jacky Zhao 2022-06-27 16:27:57 -07:00 committed by GitHub
commit 5caa93cd5e
2 changed files with 73 additions and 1 deletions

View File

@ -23,6 +23,68 @@ links: # Links to show in footer
link: https://github.com/jackyzha0
```
### HTML Favicons
A Favicon is most commonly seen as the **image preceding the URL in a browser**.
Some other examples include (but are not limited to) bookmarks, search history,
and app icons (i.e. "save page to home screen" on mobile devices).
[File format support](https://en.wikipedia.org/wiki/Favicon#File_format_support)
and the [use of favicons](https://en.wikipedia.org/wiki/Favicon#Use_of_favicon)
differ across the combination of platforms and browsers.
If you would like to customize the favicons of your quartz-based website, you
can add them to the `data/config.yaml` file. The **default** without any set
`favicon` key is:
```html
<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. Here is a `List[Dictionary]` example format, which is
equivalent to the default:
```yaml
favicon:
- { rel: "shortcut icon", href: "icon.png", type: "image/png" }
# - { ... } # Repeat for each additional favicon you want to add
```
In this format, the following keys are available:
- `rel`: The `rel` attribute of the `<link>` tag.
- `type`: The `type` attribute of the `<link>` tag.
- `href` (optional): The `href` attribute of the `<link>` tag.
- `sizes` (optional): The `sizes` attribute of the `<link>` tag.
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 quartz's default favicon:
```yaml
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/).
Some websites that **generate favicons** for you (ordered alphabetically) include:
- [`favicon.io`](https://favicon.io/)
- [`realfavicongenerator.net`](https://realfavicongenerator.net/)
- [`www.favicon.cc`](https://www.favicon.cc/)
These sites will take a base image and generate a set of favicons for you,
one of which will be, for example, the `apple-touch-icon` favicon. These sites
will often **also provide the HTML** for the favicon, which can be simply
added to the `data/config.yaml` using the HTML format of the `favicon`
argument.
**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`.

View File

@ -10,7 +10,17 @@
end }}
</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="shortcut icon" type="image/png" href="{{$.Site.BaseURL}}/icon.png" />
<!-- HTML Favicon -->
{{ $favicon := $.Site.Data.config.favicon | default (slice (dict "rel" "shortcut icon" "type" "image/png" "href" "icon.png")) }}
{{ $type := (printf "%T" $favicon) }}
{{ if eq $type "string" }}
{{ $favicon | safeHTML }}
{{ else }}
{{ range $favicon }}
<link rel="{{.rel}}" {{if .type}}type="{{.type}}"{{end}} {{if .sizes}}sizes="{{.sizes}}"{{end}} href="{{$.Site.BaseURL}}/{{.href}}" />
{{- end }}
{{ end }}
<!-- CSS Stylesheets and Fonts -->
<link