You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

97 lines
4.5 KiB

4 years ago
  1. +++
  2. title = "SVG Favicon"
  3. description = "Hiasi situs anda dengan favicon SVG yang unik."
  4. categories = ["customizing"]
  5. tags = ["color", "style", "graphics", "branding"]
  6. feature = ["code highlighter", "snippets", "related content"]
  7. [[copyright]]
  8. owner = "Josh Habdas"
  9. date = "2019"
  10. license = "agpl-3.0-or-later"
  11. +++
  12. After Dark dikirimkan dengan 169B yang dioptimalkan[^1] SVG favicon tertanam di setiap halaman:
  13. <details>
  14. <summary>Perluas untuk melihat kode</summary>
  15. {{< highlight html >}}
  16. {{< include "themes/after-dark/layouts/partials/head/favicon.html" >}}
  17. {{< /highlight >}}
  18. </details>
  19. {{% hackcss-alert type="info" %}}**Catatan**: HTML (Go) Komentar template yang dilucuti selama generasi situs.{{% /hackcss-alert %}}
  20. Favicon adalah segitiga miring berwarna hitam dalam bentuk tepee seperti yang ditunjukkan[^2] di [Bantuan Online](../online-help) [Overview](/). Pusat segitiga menggunakan ruang negatif untuk memberikan ilusi segitiga sama sisi kedua dalam bentuk piramida, atau api terbuka, yang terkandung di dalam.
  21. Warna ikon dapat dimodifikasi dengan mengubah atribut `fill`:
  22. <style>
  23. .hack figure {
  24. text-align: center;
  25. margin-top: 2rem;
  26. }
  27. </style>
  28. {{< hackcss-grid class="-around" >}}
  29. {{< hackcss-cell class="-2of12" >}}
  30. <figure>
  31. <img src="data:image/svg+xml,%3Csvg%20viewBox='0%200%2046%2045'%20xmlns='http://www.w3.org/2000/svg'%3E%3Ctitle%3EAfter%20Dark%3C/title%3E%3Cpath%20d='M.708%2045L23%20.416%2045.292%2045H.708zM35%2038L23%2019%2011%2038h24z'%20fill='%23f00'/%3E%3C/svg%3E" width="96">
  32. <figcaption class="highlight">
  33. <pre class="chroma"><code class="language-toml" data-lang="toml"><span class="nx">fill</span><span class="p">=</span><span class="s1">&quot;%23f00&quot;</span></code></pre>
  34. </figcaption>
  35. </figure>
  36. {{< /hackcss-cell >}}
  37. {{< hackcss-cell class="-2of12" >}}
  38. <figure>
  39. <img src="data:image/svg+xml,%3Csvg%20viewBox='0%200%2046%2045'%20xmlns='http://www.w3.org/2000/svg'%3E%3Ctitle%3EAfter%20Dark%3C/title%3E%3Cpath%20d='M.708%2045L23%20.416%2045.292%2045H.708zM35%2038L23%2019%2011%2038h24z'%20fill='lime'/%3E%3C/svg%3E" width="96">
  40. <figcaption class="highlight">
  41. <pre class="chroma"><code class="language-toml" data-lang="toml"><span class="nx">fill</span><span class="p">=</span><span class="s1">&quot;lime&quot;</span></code></pre>
  42. </figcaption>
  43. </figure>
  44. {{< /hackcss-cell >}}
  45. {{< hackcss-cell class="-2of12" >}}
  46. <figure>
  47. <img src="data:image/svg+xml,%3Csvg%20viewBox='0%200%2046%2045'%20xmlns='http://www.w3.org/2000/svg'%3E%3Ctitle%3EAfter%20Dark%3C/title%3E%3Cpath%20d='M.708%2045L23%20.416%2045.292%2045H.708zM35%2038L23%2019%2011%2038h24z'%20fill='%2300f'/%3E%3C/svg%3E" width="96">
  48. <figcaption class="highlight">
  49. <pre class="chroma"><code class="language-toml" data-lang="toml"><span class="nx">fill</span><span class="p">=</span><span class="s1">&quot;%2300f&quot;</span></code></pre>
  50. </figcaption>
  51. </figure>
  52. {{< /hackcss-cell >}}
  53. {{< /hackcss-grid >}}
  54. Sesuaikan dari`favicon.html` di direktori situs `layouts/partials/head`:
  55. ```
  56. ├── content
  57. ├── layouts
  58. │   └── partials
  59. │      └── head
  60. │   └── favicon.html
  61. ├── static
  62. ```
  63. Jika file belum ada, salin darii tema default:
  64. ```sh
  65. $ mkdir -p layouts/partials/head
  66. $ cp themes/after-dark/layouts/partials/head/favicon.html layouts/partials/head
  67. ```
  68. Ganti SVG dengan grafik lain jika diinginkan:
  69. ```html
  70. <link rel="icon" sizes="128x128" href="/favicon.png">
  71. ```
  72. Jika mengoptimalkan pengalaman platform lakukan dari dalam `favicon.html`:
  73. {{< highlight go-html-template "linenos=inline" >}}
  74. <meta name="apple-mobile-web-app-capable" content="yes">
  75. <meta name="apple-mobile-web-app-status-bar-style" content="black">
  76. <meta name="apple-mobile-web-app-title" content="{{ .Site.Title }}">
  77. <link rel="apple-touch-icon" href="data:image/png;base64,{{ readFile "static/icon.png" | base64Encode }}">
  78. {{< /highlight >}}
  79. Lihat {{< external href="https://github.com/h5bp/html5-boilerplate/blob/master/dist/doc/extend.md#web-apps" text="H5BP Extend" />}} untuk persyaratan khusus platform dan {{< external href="https://gohugo.io/documentation/" text="Hugo Documentation" />}} untuk bantuan dengan templating fungsi dan variabel.
  80. [^1]: Lihat [Mengoptimalkan SVGs dalam data URIs](https://codepen.io/tigt/post/optimizing-svgs-in-data-uris) untuk membantu mengoptimalkan SVGs anda sendiri.
  81. [^2]: Pelajari cara mendaftar [animasi SVG dengan SMIL](https://devdocs.io/svg/svg_animation_with_smil).