mirror of
https://github.com/foo-dogsquared/wiki.git
synced 2025-02-07 12:19:31 +00:00
1 line
3.2 KiB
JSON
1 line
3.2 KiB
JSON
|
{"pageProps":{"metadata":{"date":"\"2021-06-22 20:31:50 +08:00\"","date_modified":"\"2021-06-24 20:42:52 +08:00\"","language":"en","source":""},"title":"Implementing Base16 themes in Hugo","hast":{"type":"root","children":[{"type":"element","tagName":"nav","properties":{"className":"toc"},"children":[{"type":"element","tagName":"ol","properties":{"className":"toc-level toc-level-1"},"children":[]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Making use of "},{"type":"element","tagName":"a","properties":{"href":"https://github.com/chriskempson/base16"},"children":[{"type":"text","value":"Base16"}]},{"type":"text","value":" themes would be a great way to let users customize their sites quickly.\nIt is an established project that spawned related projects and a lot of user support for it.\nLet's implement this in Hugo for the same reason.\n"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"We'll make heavy use of CSS variables, Hugo data templates, and their support for several data formats including YAML.\n"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"To do that, we want to convert the Base16 theme...\n"}]},{"type":"element","tagName":"pre","properties":{"className":["src-block"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-yaml"]},"children":[{"type":"text","value":"scheme: \"Bark on a tree\"\nauthor: \"Gabriel Arazas (https://foo-dogsquared.github.io)\"\nbase00: \"2b221f\"\nbase01: \"412c26\"\nbase02: \"54352c\"\nbase03: \"8d5c4c\"\nbase04: \"e1bcb2\"\nbase05: \"f5ecea\"\nbase06: \"fefefe\"\nbase07: \"eb8a65\"\nbase08: \"d03e68\"\nbase09: \"eb914a\"\nbase0A: \"afa644\"\nbase0B: \"85b26e\"\nbase0C: \"df937a\" #accent\nbase0D: \"a15c40\"\nbase0E: \"8b7ab9\"\nbase0F: \"6f3920\"\n"}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"...into CSS.\n"}]},{"type":"element","tagName":"pre","properties":{"className":["src-block"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-css"]},"children":[{"type":"text","value":"[data-theme=\"Bark on a tree\"]:root {\n --base00: #2b221f;\n --base01: #412c26;\n --base02: #54352c;\n --base03: #8d5c4c;\n --base04: #e1bcb2;\n --base05: #f5ecea;\n --base06: #fefefe;\n --base07: #eb8a65;\n --base08: #d03e68;\n --base09: #eb914a;\n --base0A: #afa644;\n --base0B: #85b26e;\n --base0C: #df937a;\n --base0D: #a15c40;\n --base0E: #8b7ab9;\n --base0F: #6f3920\n}\n"}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Here's one template to do that.\n"}]},{"type":"element","tagName":"pre","properties":{"className":["src-block"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-go"]},"children":[{"type":"text","value":"{{- $name := index $ \"name\" -}}\n{{- $scheme := index $ \"scheme\" -}}\n{{- if ne $name \"_index\" }}[data-theme=\"{{ $scheme.scheme }}\"]{{ end }}:root {\n {{- range $i := seq 0 15 }}\n {{- $hex := upper (printf \"%02x\" $i) }}\n {{- $key := printf \"base%s\" $hex }}\n --{{ $key }}: #{{ index $scheme $key }};\n {{- end -}}\n}\n"}]}]}]},"backlinks":[]},"__N_SSG":true}
|