This commit is contained in:
Kiri Stolz 2025-01-26 17:39:48 -07:00
parent bfbe0de3c6
commit 30c2170ae7
1369 changed files with 92622 additions and 16 deletions

View file

@ -0,0 +1,25 @@
---
title: "Benvenuti a Blowfish!"
description: "Questa pagina è stata creata utilizzando il tema Blowfish per Hugo."
---
<div class="flex px-4 py-2 mb-8 text-base rounded-md bg-primary-100 dark:bg-primary-900">
<span class="flex items-center ltr:pr-3 rtl:pl-3 text-primary-400">
{{< icon "triangle-exclamation" >}}
</span>
<span class="flex items-center justify-between grow dark:text-neutral-300">
<span class="prose dark:prose-invert">Questa è una demo del layout <code id="layout">background</code>.</span>
<pulsante
id="interruttore-layout-pulsante"
class="px-4 !text-neutral !no-underline round-md bg-primary-600 hover:!bg-primary-500 dark:bg-primary-800 dark:hover:!bg-primary-700"
>
Cambia layout &orarr;
</pulsante>
</span>
</div>
```node
npx blowfish-tools
```
{{< youtubeLite id="SgXhGb-7QbU" label="Demo degli strumenti Blowfish" >}}

View file

@ -0,0 +1,29 @@
---
title: "Blowfish へようこそ! :tada:"
description: "このページは Hugo の Blowfish テーマを利用して構築されています。"
---
<div class="flex px-4 py-2 mb-8 text-base rounded-md bg-primary-100 dark:bg-primary-900">
<span class="flex items-center ltr:pr-3 rtl:pl-3 text-primary-400">
{{< icon "triangle-exclamation" >}}
</span>
<span class="flex items-center justify-between grow dark:text-neutral-300">
<span class="prose dark:prose-invert">こちらは <code id="layout">background</code> レイアウトのデモです。</span>
<button
id="switch-layout-button"
class="px-4 !text-neutral !no-underline rounded-md bg-primary-600 hover:!bg-primary-500 dark:bg-primary-800 dark:hover:!bg-primary-700"
>
レイアウトを変更する&orarr;
</button>
</span>
</div>
```node
npx blowfish-tools
```
{{< youtubeLite id="SgXhGb-7QbU" label="Blowfish-tools demo" >}}

View file

@ -0,0 +1,29 @@
---
title: "Welcome to Blowfish! :tada:"
description: "This page was built using the Blowfish theme for Hugo."
---
<div class="flex px-4 py-2 mb-8 text-base rounded-md bg-primary-100 dark:bg-primary-900">
<span class="flex items-center ltr:pr-3 rtl:pl-3 text-primary-400">
{{< icon "triangle-exclamation" >}}
</span>
<span class="flex items-center justify-between grow dark:text-neutral-300">
<span class="prose dark:prose-invert">This is a demo of the <code id="layout">background</code> layout.</span>
<button
id="switch-layout-button"
class="px-4 !text-neutral !no-underline rounded-md bg-primary-600 hover:!bg-primary-500 dark:bg-primary-800 dark:hover:!bg-primary-700"
>
Switch layout &orarr;
</button>
</span>
</div>
```node
npx blowfish-tools
```
{{< youtubeLite id="SgXhGb-7QbU" label="Blowfish-tools demo" >}}

View file

@ -0,0 +1,29 @@
---
title: "欢迎来到 Blowfish! :tada:"
description: "此页面是使用 Hugo 的 Blowfish 主题搭建的"
---
<div class="flex px-4 py-2 mb-8 text-base rounded-md bg-primary-100 dark:bg-primary-900">
<span class="flex items-center ltr:pr-3 rtl:pl-3 text-primary-400">
{{< icon "triangle-exclamation" >}}
</span>
<span class="flex items-center justify-between grow dark:text-neutral-300">
<span class="prose dark:prose-invert"> 这是 <code id="layout">background</code> 的样式示例。</span>
<button
id="switch-layout-button"
class="px-4 !text-neutral !no-underline rounded-md bg-primary-600 hover:!bg-primary-500 dark:bg-primary-800 dark:hover:!bg-primary-700"
>
切换 layout &orarr;
</button>
</span>
</div>
```node
npx blowfish-tools
```
{{< youtubeLite id="SgXhGb-7QbU" label="Blowfish-tools demo" >}}

View file

@ -0,0 +1,5 @@
---
title: "Esempio di elenco di tassonomia degli autori"
---
Un rapido esempio di come iniziare a utilizzare le tassonomie degli autori nei tuoi articoli.

View file

@ -0,0 +1,5 @@
---
title: "著者のタクソノミーリストの例"
---
あなたの記事で著者のタクソノミーを使う方法の簡単な例です。

View file

@ -0,0 +1,5 @@
---
title: "Authors Taxonomy Listing Example"
---
A quick example of how to start using author taxonomies in your articles.

View file

@ -0,0 +1,5 @@
---
title: "作者列表示例"
---
在你的文章中添加不同作者的简单示例。

View file

@ -0,0 +1,5 @@
---
title: "Nuno Coraçao"
---
La fantastica biografia di Nuno.

View file

@ -0,0 +1,5 @@
---
title: "Nuno Coração"
---
Nuno の素晴らしいダミープロフィールです。

View file

@ -0,0 +1,5 @@
---
title: "Nuno Coração"
---
Nuno's awesome dummy bio.

View file

@ -0,0 +1,5 @@
---
title: "Nuno Coração"
---
假装这里有一份 Nuno 的简介。

View file

@ -0,0 +1,5 @@
---
title: "Secondo autore fittizio"
---
La fantastica biografia fittizia di Dummy Second Author.

View file

@ -0,0 +1,5 @@
---
title: "2人目のダミー作者"
---
2人目のダミー作者の素晴らしいダミープロフィールです。

View file

@ -0,0 +1,5 @@
---
title: "Dummy Second Author"
---
Dummy Second Author's awesome dummy bio.

View file

@ -0,0 +1,5 @@
---
title: "Dummy Second Author"
---
假装这里有一份第二位作者的简介。

View file

@ -0,0 +1,15 @@
---
title: "Documenti"
description: "Scopri come utilizzare Blowfish e le sue funzionalità."
cascade:
showDate: false
showAuthor: false
invertPagination: true
---
{{< lead >}}
Semplice ma potente. Scopri come utilizzare Blowfish e le sue funzionalità.
{{< /lead >}}
Questa sezione contiene tutto ciò che devi sapere su Blowfish. Se sei nuovo, consulta la guida [Installazione]({{< ref "docs/installation" >}}) per iniziare o visita la sezione [Esempi]({{< ref "samples" >}}) per vedere cosa può fare Blowfish.

View file

@ -0,0 +1,17 @@
---
title: "ドキュメント"
description: "Blowfish の利用方法と特徴について学ぶ。"
cascade:
showDate: false
showAuthor: false
invertPagination: true
---
{{< lead >}}
シンプル、それでいて強力。 Blowfish の利用方法と特徴について学ぶ。
{{< /lead >}}
このセクションでは、Blowfish について知っておくべきことをすべて網羅しています。初めての方は、まず[インストール]({{< ref "docs/installation" >}})ガイドをご覧いただくか、[サンプル]({{< ref "samples" >}})セクションで Blowfish で何ができるかを確認してみてください。
---

View file

@ -0,0 +1,17 @@
---
title: "Documentation"
description: "Learn how to use Blowfish and its features."
cascade:
showDate: false
showAuthor: false
invertPagination: true
---
{{< lead >}}
Simple, yet powerful. Learn how to use Blowfish and its features.
{{< /lead >}}
This section contains everything you need to know about Blowfish. If you're new, check out the [Installation]({{< ref "docs/installation" >}}) guide to begin or visit the [Samples]({{< ref "samples" >}}) section to see what Blowfish can do.
---

View file

@ -0,0 +1,18 @@
---
title: "文档"
description: "如何使用 Blowfish。"
cascade:
showDate: false
showAuthor: false
invertPagination: true
---
{{< lead >}}
了解如何使用简单而强大的 Blowfish。
{{< /lead >}}
本章节包含了你需要了解的有关 Blowfish 的所有信息。如果你是新用户,请查阅[安装]({{< ref "docs/installation" >}}) 指南,或者访问[示例]({{< ref "samples" >}}) 来了解 Blowfish 能做什么。
---

View file

@ -0,0 +1,574 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
style="margin:auto;background:rgba(NaN, NaN, NaN, 0);display:block;z-index:1;position:relative"
width="1084" height="322" preserveAspectRatio="xMidYMid" viewBox="0 0 1084 322">
<defs>
<pattern id="pid-0.7735807359934106" x="0" y="0" width="345.6" height="345.6"
patternUnits="userSpaceOnUse">
<g transform="scale(1.35)">
<g>
<line x1="237.6288884328494" x2="201.39714008747956" y1="119.05338354492488"
y2="155.28513189029474" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="237.6288884328494" x2="201.39714008747956" y1="-392.9466164550751"
y2="-356.71486810970526" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="493.6288884328494" x2="457.39714008747956" y1="-392.9466164550751"
y2="-356.71486810970526" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="749.6288884328494" x2="713.3971400874796" y1="-392.9466164550751"
y2="-356.71486810970526" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="237.6288884328494" x2="201.39714008747956" y1="-136.94661645507512"
y2="-100.71486810970526" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="493.6288884328494" x2="457.39714008747956" y1="-136.94661645507512"
y2="-100.71486810970526" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="749.6288884328494" x2="713.3971400874796" y1="-136.94661645507512"
y2="-100.71486810970526" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="237.6288884328494" x2="201.39714008747956" y1="119.05338354492488"
y2="155.28513189029474" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="493.6288884328494" x2="457.39714008747956" y1="119.05338354492488"
y2="155.28513189029474" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="749.6288884328494" x2="713.3971400874796" y1="119.05338354492488"
y2="155.28513189029474" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="244.43797352167968" x2="179.25167385613412" y1="196.21419032492787"
y2="261.40048999047343" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="244.43797352167968" x2="179.25167385613412" y1="-315.78580967507213"
y2="-250.59951000952657" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="500.4379735216797" x2="435.2516738561341" y1="-315.78580967507213"
y2="-250.59951000952657" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="756.4379735216796" x2="691.2516738561342" y1="-315.78580967507213"
y2="-250.59951000952657" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="244.43797352167968" x2="179.25167385613412" y1="-59.78580967507213"
y2="5.400489990473432" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="500.4379735216797" x2="435.2516738561341" y1="-59.78580967507213"
y2="5.400489990473432" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="756.4379735216796" x2="691.2516738561342" y1="-59.78580967507213"
y2="5.400489990473432" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="244.43797352167968" x2="179.25167385613412" y1="196.21419032492787"
y2="261.40048999047343" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="500.4379735216797" x2="435.2516738561341" y1="196.21419032492787"
y2="261.40048999047343" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="756.4379735216796" x2="691.2516738561342" y1="196.21419032492787"
y2="261.40048999047343" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="219.6724359102308" x2="209.2181431749452" y1="92.85808081141191"
y2="103.31237354669749" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="219.6724359102308" x2="209.2181431749452" y1="-419.1419191885881"
y2="-408.6876264533025" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="475.6724359102308" x2="465.2181431749452" y1="-419.1419191885881"
y2="-408.6876264533025" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="731.6724359102308" x2="721.2181431749452" y1="-419.1419191885881"
y2="-408.6876264533025" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="219.6724359102308" x2="209.2181431749452" y1="-163.14191918858808"
y2="-152.68762645330253" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="475.6724359102308" x2="465.2181431749452" y1="-163.14191918858808"
y2="-152.68762645330253" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="731.6724359102308" x2="721.2181431749452" y1="-163.14191918858808"
y2="-152.68762645330253" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="219.6724359102308" x2="209.2181431749452" y1="92.85808081141191"
y2="103.31237354669749" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="475.6724359102308" x2="465.2181431749452" y1="92.85808081141191"
y2="103.31237354669749" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="731.6724359102308" x2="721.2181431749452" y1="92.85808081141191"
y2="103.31237354669749" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="112.00565118011832" x2="71.15817744773324" y1="56.63419812919665"
y2="97.48167186158173" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="112.00565118011832" x2="71.15817744773324" y1="-455.36580187080335"
y2="-414.51832813841827" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="368.0056511801183" x2="327.15817744773324" y1="-455.36580187080335"
y2="-414.51832813841827" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="624.0056511801183" x2="583.1581774477332" y1="-455.36580187080335"
y2="-414.51832813841827" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="112.00565118011832" x2="71.15817744773324" y1="-199.36580187080335"
y2="-158.51832813841827" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="368.0056511801183" x2="327.15817744773324" y1="-199.36580187080335"
y2="-158.51832813841827" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="624.0056511801183" x2="583.1581774477332" y1="-199.36580187080335"
y2="-158.51832813841827" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="112.00565118011832" x2="71.15817744773324" y1="56.63419812919665"
y2="97.48167186158173" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="368.0056511801183" x2="327.15817744773324" y1="56.63419812919665"
y2="97.48167186158173" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="624.0056511801183" x2="583.1581774477332" y1="56.63419812919665"
y2="97.48167186158173" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="60.932966336476014" x2="49.388821076756514" y1="125.65681060957188"
y2="137.20095586929136" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="60.932966336476014" x2="49.388821076756514" y1="-386.3431893904281"
y2="-374.79904413070864" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="316.932966336476" x2="305.3888210767565" y1="-386.3431893904281"
y2="-374.79904413070864" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="572.932966336476" x2="561.3888210767565" y1="-386.3431893904281"
y2="-374.79904413070864" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="60.932966336476014" x2="49.388821076756514" y1="-130.3431893904281"
y2="-118.79904413070864" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="316.932966336476" x2="305.3888210767565" y1="-130.3431893904281"
y2="-118.79904413070864" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="572.932966336476" x2="561.3888210767565" y1="-130.3431893904281"
y2="-118.79904413070864" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="60.932966336476014" x2="49.388821076756514" y1="125.65681060957188"
y2="137.20095586929136" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="316.932966336476" x2="305.3888210767565" y1="125.65681060957188"
y2="137.20095586929136" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="572.932966336476" x2="561.3888210767565" y1="125.65681060957188"
y2="137.20095586929136" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="103.78310212459807" x2="35.08486945593138" y1="-2.328164446496814"
y2="66.37006822216988" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="103.78310212459807" x2="35.08486945593138" y1="-514.3281644464968"
y2="-445.6299317778301" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="359.7831021245981" x2="291.08486945593137" y1="-514.3281644464968"
y2="-445.6299317778301" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="615.783102124598" x2="547.0848694559314" y1="-514.3281644464968"
y2="-445.6299317778301" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="103.78310212459807" x2="35.08486945593138" y1="-258.3281644464968"
y2="-189.6299317778301" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="359.7831021245981" x2="291.08486945593137" y1="-258.3281644464968"
y2="-189.6299317778301" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="615.783102124598" x2="547.0848694559314" y1="-258.3281644464968"
y2="-189.6299317778301" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="103.78310212459807" x2="35.08486945593138" y1="-2.328164446496814"
y2="66.37006822216988" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="359.7831021245981" x2="291.08486945593137" y1="-2.328164446496814"
y2="66.37006822216988" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="615.783102124598" x2="547.0848694559314" y1="-2.328164446496814"
y2="66.37006822216988" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="103.78310212459807" x2="35.08486945593138" y1="253.67183555350317"
y2="322.3700682221699" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="211.69894364075495" x2="194.13528259328754" y1="166.21741462144607"
y2="183.78107566891347" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="211.69894364075495" x2="194.13528259328754" y1="-345.7825853785539"
y2="-328.21892433108655" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="467.6989436407549" x2="450.13528259328757" y1="-345.7825853785539"
y2="-328.21892433108655" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="723.6989436407549" x2="706.1352825932876" y1="-345.7825853785539"
y2="-328.21892433108655" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="211.69894364075495" x2="194.13528259328754" y1="-89.78258537855393"
y2="-72.21892433108653" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="467.6989436407549" x2="450.13528259328757" y1="-89.78258537855393"
y2="-72.21892433108653" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="723.6989436407549" x2="706.1352825932876" y1="-89.78258537855393"
y2="-72.21892433108653" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="211.69894364075495" x2="194.13528259328754" y1="166.21741462144607"
y2="183.78107566891347" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="467.6989436407549" x2="450.13528259328757" y1="166.21741462144607"
y2="183.78107566891347" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="723.6989436407549" x2="706.1352825932876" y1="166.21741462144607"
y2="183.78107566891347" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="44.012515207413756" x2="6.2920050630466875" y1="153.79537767995515"
y2="191.5158878243222" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="44.012515207413756" x2="6.2920050630466875" y1="-358.20462232004485"
y2="-320.4841121756778" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="300.01251520741374" x2="262.2920050630467" y1="-358.20462232004485"
y2="-320.4841121756778" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="556.0125152074138" x2="518.2920050630466" y1="-358.20462232004485"
y2="-320.4841121756778" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="44.012515207413756" x2="6.2920050630466875" y1="-102.20462232004485"
y2="-64.48411217567781" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="300.01251520741374" x2="262.2920050630467" y1="-102.20462232004485"
y2="-64.48411217567781" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="556.0125152074138" x2="518.2920050630466" y1="-102.20462232004485"
y2="-64.48411217567781" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="44.012515207413756" x2="6.2920050630466875" y1="153.79537767995515"
y2="191.5158878243222" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="300.01251520741374" x2="262.2920050630467" y1="153.79537767995515"
y2="191.5158878243222" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="556.0125152074138" x2="518.2920050630466" y1="153.79537767995515"
y2="191.5158878243222" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="105.49237048043514" x2="31.549625942354083" y1="123.41684480916788"
y2="197.35958934724894" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="105.49237048043514" x2="31.549625942354083" y1="-388.58315519083214"
y2="-314.64041065275103" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="361.49237048043517" x2="287.54962594235406" y1="-388.58315519083214"
y2="-314.64041065275103" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="617.4923704804352" x2="543.549625942354" y1="-388.58315519083214"
y2="-314.64041065275103" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="105.49237048043514" x2="31.549625942354083" y1="-132.58315519083212"
y2="-58.64041065275106" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="361.49237048043517" x2="287.54962594235406" y1="-132.58315519083212"
y2="-58.64041065275106" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="617.4923704804352" x2="543.549625942354" y1="-132.58315519083212"
y2="-58.64041065275106" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="105.49237048043514" x2="31.549625942354083" y1="123.41684480916788"
y2="197.35958934724894" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="361.49237048043517" x2="287.54962594235406" y1="123.41684480916788"
y2="197.35958934724894" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="617.4923704804352" x2="543.549625942354" y1="123.41684480916788"
y2="197.35958934724894" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<animateTransform attributeName="transform" type="translate" values="0 0;-256 256"
keyTimes="0;1" repeatCount="indefinite" dur="10s"></animateTransform>
</g>
<g>
<line x1="95.73622575770466" x2="50.085335235319484" y1="20.45659654328417"
y2="66.10748706566935" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="95.73622575770466" x2="50.085335235319484" y1="-491.54340345671585"
y2="-445.8925129343306" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="351.7362257577047" x2="306.08533523531946" y1="-491.54340345671585"
y2="-445.8925129343306" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="607.7362257577047" x2="562.0853352353195" y1="-491.54340345671585"
y2="-445.8925129343306" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="95.73622575770466" x2="50.085335235319484" y1="-235.54340345671582"
y2="-189.89251293433065" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="351.7362257577047" x2="306.08533523531946" y1="-235.54340345671582"
y2="-189.89251293433065" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="607.7362257577047" x2="562.0853352353195" y1="-235.54340345671582"
y2="-189.89251293433065" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="95.73622575770466" x2="50.085335235319484" y1="20.45659654328417"
y2="66.10748706566935" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="351.7362257577047" x2="306.08533523531946" y1="20.45659654328417"
y2="66.10748706566935" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="607.7362257577047" x2="562.0853352353195" y1="20.45659654328417"
y2="66.10748706566935" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="263.34308373797757" x2="226.59561736370148" y1="112.42933995479353"
y2="149.17680632906962" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="263.34308373797757" x2="226.59561736370148" y1="-399.57066004520647"
y2="-362.8231936709304" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="519.3430837379776" x2="482.5956173637015" y1="-399.57066004520647"
y2="-362.8231936709304" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="775.3430837379776" x2="738.5956173637014" y1="-399.57066004520647"
y2="-362.8231936709304" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="263.34308373797757" x2="226.59561736370148" y1="-143.57066004520647"
y2="-106.82319367093038" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="519.3430837379776" x2="482.5956173637015" y1="-143.57066004520647"
y2="-106.82319367093038" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="775.3430837379776" x2="738.5956173637014" y1="-143.57066004520647"
y2="-106.82319367093038" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="263.34308373797757" x2="226.59561736370148" y1="112.42933995479353"
y2="149.17680632906962" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="519.3430837379776" x2="482.5956173637015" y1="112.42933995479353"
y2="149.17680632906962" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="775.3430837379776" x2="738.5956173637014" y1="112.42933995479353"
y2="149.17680632906962" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="7.343083737977565" x2="-29.40438263629852" y1="112.42933995479353"
y2="149.17680632906962" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="29.5343611349199" x2="-26.261040392985034" y1="205.16777076655512"
y2="260.96317229446004" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="29.5343611349199" x2="-26.261040392985034" y1="-306.8322292334449"
y2="-251.03682770553996" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="285.5343611349199" x2="229.73895960701498" y1="-306.8322292334449"
y2="-251.03682770553996" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="541.5343611349199" x2="485.738959607015" y1="-306.8322292334449"
y2="-251.03682770553996" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="29.5343611349199" x2="-26.261040392985034" y1="-50.83222923344488"
y2="4.963172294460037" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="285.5343611349199" x2="229.73895960701498" y1="-50.83222923344488"
y2="4.963172294460037" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="541.5343611349199" x2="485.738959607015" y1="-50.83222923344488"
y2="4.963172294460037" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="29.5343611349199" x2="-26.261040392985034" y1="205.16777076655512"
y2="260.96317229446004" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="285.5343611349199" x2="229.73895960701498" y1="205.16777076655512"
y2="260.96317229446004" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="541.5343611349199" x2="485.738959607015" y1="205.16777076655512"
y2="260.96317229446004" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="235.025028503587" x2="173.48946106938683" y1="23.306929884424335"
y2="84.84249731862451" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="235.025028503587" x2="173.48946106938683" y1="-488.69307011557567"
y2="-427.1575026813755" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="491.025028503587" x2="429.48946106938683" y1="-488.69307011557567"
y2="-427.1575026813755" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="747.025028503587" x2="685.4894610693868" y1="-488.69307011557567"
y2="-427.1575026813755" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="235.025028503587" x2="173.48946106938683" y1="-232.69307011557567"
y2="-171.1575026813755" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="491.025028503587" x2="429.48946106938683" y1="-232.69307011557567"
y2="-171.1575026813755" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="747.025028503587" x2="685.4894610693868" y1="-232.69307011557567"
y2="-171.1575026813755" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="235.025028503587" x2="173.48946106938683" y1="23.306929884424335"
y2="84.84249731862451" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="491.025028503587" x2="429.48946106938683" y1="23.306929884424335"
y2="84.84249731862451" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="747.025028503587" x2="685.4894610693868" y1="23.306929884424335"
y2="84.84249731862451" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="225.00990918130768" x2="200.62370409686488" y1="210.1052181599721"
y2="234.4914232444149" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="225.00990918130768" x2="200.62370409686488" y1="-301.8947818400279"
y2="-277.50857675558507" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="481.00990918130765" x2="456.6237040968649" y1="-301.8947818400279"
y2="-277.50857675558507" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="737.0099091813076" x2="712.6237040968649" y1="-301.8947818400279"
y2="-277.50857675558507" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="225.00990918130768" x2="200.62370409686488" y1="-45.89478184002789"
y2="-21.508576755585096" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="481.00990918130765" x2="456.6237040968649" y1="-45.89478184002789"
y2="-21.508576755585096" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="737.0099091813076" x2="712.6237040968649" y1="-45.89478184002789"
y2="-21.508576755585096" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="225.00990918130768" x2="200.62370409686488" y1="210.1052181599721"
y2="234.4914232444149" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="481.00990918130765" x2="456.6237040968649" y1="210.1052181599721"
y2="234.4914232444149" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="737.0099091813076" x2="712.6237040968649" y1="210.1052181599721"
y2="234.4914232444149" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="171.55017713954658" x2="102.05334080042758" y1="78.55895711807653"
y2="148.05579345719553" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="171.55017713954658" x2="102.05334080042758" y1="-433.44104288192347"
y2="-363.94420654280447" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="427.5501771395466" x2="358.0533408004276" y1="-433.44104288192347"
y2="-363.94420654280447" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="683.5501771395466" x2="614.0533408004276" y1="-433.44104288192347"
y2="-363.94420654280447" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="171.55017713954658" x2="102.05334080042758" y1="-177.44104288192347"
y2="-107.94420654280447" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="427.5501771395466" x2="358.0533408004276" y1="-177.44104288192347"
y2="-107.94420654280447" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="683.5501771395466" x2="614.0533408004276" y1="-177.44104288192347"
y2="-107.94420654280447" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="171.55017713954658" x2="102.05334080042758" y1="78.55895711807653"
y2="148.05579345719553" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="427.5501771395466" x2="358.0533408004276" y1="78.55895711807653"
y2="148.05579345719553" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="683.5501771395466" x2="614.0533408004276" y1="78.55895711807653"
y2="148.05579345719553" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="258.4358284744095" x2="228.09906783279462" y1="10.646186924515469"
y2="40.98294756613034" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="258.4358284744095" x2="228.09906783279462" y1="-501.35381307548454"
y2="-471.01705243386965" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="514.4358284744095" x2="484.0990678327946" y1="-501.35381307548454"
y2="-471.01705243386965" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="770.4358284744095" x2="740.0990678327946" y1="-501.35381307548454"
y2="-471.01705243386965" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="258.4358284744095" x2="228.09906783279462" y1="-245.35381307548454"
y2="-215.01705243386965" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="514.4358284744095" x2="484.0990678327946" y1="-245.35381307548454"
y2="-215.01705243386965" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="770.4358284744095" x2="740.0990678327946" y1="-245.35381307548454"
y2="-215.01705243386965" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="258.4358284744095" x2="228.09906783279462" y1="10.646186924515469"
y2="40.98294756613034" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="514.4358284744095" x2="484.0990678327946" y1="10.646186924515469"
y2="40.98294756613034" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="770.4358284744095" x2="740.0990678327946" y1="10.646186924515469"
y2="40.98294756613034" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="2.4358284744095045" x2="-27.900932167205383" y1="10.646186924515469"
y2="40.98294756613034" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="35.41624886616098" x2="-5.966808810922494" y1="10.151780697595989"
y2="51.53483837467946" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="35.41624886616098" x2="-5.966808810922494" y1="-501.848219302404"
y2="-460.46516162532055" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="291.41624886616097" x2="250.0331911890775" y1="-501.848219302404"
y2="-460.46516162532055" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="547.416248866161" x2="506.0331911890775" y1="-501.848219302404"
y2="-460.46516162532055" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="35.41624886616098" x2="-5.966808810922494" y1="-245.848219302404"
y2="-204.46516162532055" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="291.41624886616097" x2="250.0331911890775" y1="-245.848219302404"
y2="-204.46516162532055" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="547.416248866161" x2="506.0331911890775" y1="-245.848219302404"
y2="-204.46516162532055" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="35.41624886616098" x2="-5.966808810922494" y1="10.151780697595989"
y2="51.53483837467946" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="291.41624886616097" x2="250.0331911890775" y1="10.151780697595989"
y2="51.53483837467946" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="547.416248866161" x2="506.0331911890775" y1="10.151780697595989"
y2="51.53483837467946" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="90.76285286976488" x2="72.92514980496989" y1="79.79001478147771"
y2="97.6277178462727" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="90.76285286976488" x2="72.92514980496989" y1="-432.2099852185223"
y2="-414.37228215372727" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="346.76285286976486" x2="328.9251498049699" y1="-432.2099852185223"
y2="-414.37228215372727" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="602.7628528697649" x2="584.9251498049699" y1="-432.2099852185223"
y2="-414.37228215372727" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="90.76285286976488" x2="72.92514980496989" y1="-176.2099852185223"
y2="-158.3722821537273" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="346.76285286976486" x2="328.9251498049699" y1="-176.2099852185223"
y2="-158.3722821537273" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="602.7628528697649" x2="584.9251498049699" y1="-176.2099852185223"
y2="-158.3722821537273" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="90.76285286976488" x2="72.92514980496989" y1="79.79001478147771"
y2="97.6277178462727" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="346.76285286976486" x2="328.9251498049699" y1="79.79001478147771"
y2="97.6277178462727" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="602.7628528697649" x2="584.9251498049699" y1="79.79001478147771"
y2="97.6277178462727" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<animateTransform attributeName="transform" type="translate" values="0 0;-256 256"
keyTimes="0;1" repeatCount="indefinite" dur="5s"></animateTransform>
</g>
<g>
<line x1="93.6896305353637" x2="75.71575147590588" y1="83.83758835275793"
y2="101.81146741221576" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="93.6896305353637" x2="75.71575147590588" y1="-428.16241164724204"
y2="-410.18853258778427" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="349.6896305353637" x2="331.7157514759059" y1="-428.16241164724204"
y2="-410.18853258778427" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="605.6896305353637" x2="587.7157514759059" y1="-428.16241164724204"
y2="-410.18853258778427" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="93.6896305353637" x2="75.71575147590588" y1="-172.16241164724207"
y2="-154.18853258778424" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="349.6896305353637" x2="331.7157514759059" y1="-172.16241164724207"
y2="-154.18853258778424" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="605.6896305353637" x2="587.7157514759059" y1="-172.16241164724207"
y2="-154.18853258778424" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="93.6896305353637" x2="75.71575147590588" y1="83.83758835275793"
y2="101.81146741221576" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="349.6896305353637" x2="331.7157514759059" y1="83.83758835275793"
y2="101.81146741221576" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="605.6896305353637" x2="587.7157514759059" y1="83.83758835275793"
y2="101.81146741221576" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="207.24941141296466" x2="167.48134532138562" y1="234.55973050121918"
y2="274.3277965927982" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="207.24941141296466" x2="167.48134532138562" y1="-277.4402694987808"
y2="-237.67220340720178" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="463.24941141296466" x2="423.4813453213856" y1="-277.4402694987808"
y2="-237.67220340720178" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="719.2494114129647" x2="679.4813453213856" y1="-277.4402694987808"
y2="-237.67220340720178" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="207.24941141296466" x2="167.48134532138562" y1="-21.440269498780822"
y2="18.327796592798222" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="463.24941141296466" x2="423.4813453213856" y1="-21.440269498780822"
y2="18.327796592798222" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="719.2494114129647" x2="679.4813453213856" y1="-21.440269498780822"
y2="18.327796592798222" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="207.24941141296466" x2="167.48134532138562" y1="234.55973050121918"
y2="274.3277965927982" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="463.24941141296466" x2="423.4813453213856" y1="234.55973050121918"
y2="274.3277965927982" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="719.2494114129647" x2="679.4813453213856" y1="234.55973050121918"
y2="274.3277965927982" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="69.19671201083756" x2="20.15599089926107" y1="61.52941038272999"
y2="110.57013149430648" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="69.19671201083756" x2="20.15599089926107" y1="-450.47058961727"
y2="-401.42986850569355" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="325.1967120108376" x2="276.15599089926104" y1="-450.47058961727"
y2="-401.42986850569355" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="581.1967120108376" x2="532.155990899261" y1="-450.47058961727"
y2="-401.42986850569355" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="69.19671201083756" x2="20.15599089926107" y1="-194.47058961727"
y2="-145.42986850569352" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="325.1967120108376" x2="276.15599089926104" y1="-194.47058961727"
y2="-145.42986850569352" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="581.1967120108376" x2="532.155990899261" y1="-194.47058961727"
y2="-145.42986850569352" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="69.19671201083756" x2="20.15599089926107" y1="61.52941038272999"
y2="110.57013149430648" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="325.1967120108376" x2="276.15599089926104" y1="61.52941038272999"
y2="110.57013149430648" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="581.1967120108376" x2="532.155990899261" y1="61.52941038272999"
y2="110.57013149430648" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="153.36870174443493" x2="103.52218176454608" y1="129.93915864820679"
y2="179.78567862809564" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="153.36870174443493" x2="103.52218176454608" y1="-382.0608413517932"
y2="-332.21432137190436" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="409.36870174443493" x2="359.5221817645461" y1="-382.0608413517932"
y2="-332.21432137190436" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="665.3687017444349" x2="615.5221817645461" y1="-382.0608413517932"
y2="-332.21432137190436" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="153.36870174443493" x2="103.52218176454608" y1="-126.06084135179321"
y2="-76.21432137190436" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="409.36870174443493" x2="359.5221817645461" y1="-126.06084135179321"
y2="-76.21432137190436" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="665.3687017444349" x2="615.5221817645461" y1="-126.06084135179321"
y2="-76.21432137190436" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="153.36870174443493" x2="103.52218176454608" y1="129.93915864820679"
y2="179.78567862809564" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="409.36870174443493" x2="359.5221817645461" y1="129.93915864820679"
y2="179.78567862809564" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="665.3687017444349" x2="615.5221817645461" y1="129.93915864820679"
y2="179.78567862809564" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="49.20494471467643" x2="2.7142059537850685" y1="141.75997600855746"
y2="188.25071476944882" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="49.20494471467643" x2="2.7142059537850685" y1="-370.2400239914425"
y2="-323.7492852305512" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="305.20494471467646" x2="258.71420595378504" y1="-370.2400239914425"
y2="-323.7492852305512" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="561.2049447146765" x2="514.714205953785" y1="-370.2400239914425"
y2="-323.7492852305512" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="49.20494471467643" x2="2.7142059537850685" y1="-114.24002399144254"
y2="-67.74928523055118" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="305.20494471467646" x2="258.71420595378504" y1="-114.24002399144254"
y2="-67.74928523055118" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="561.2049447146765" x2="514.714205953785" y1="-114.24002399144254"
y2="-67.74928523055118" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="49.20494471467643" x2="2.7142059537850685" y1="141.75997600855746"
y2="188.25071476944882" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="305.20494471467646" x2="258.71420595378504" y1="141.75997600855746"
y2="188.25071476944882" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="561.2049447146765" x2="514.714205953785" y1="141.75997600855746"
y2="188.25071476944882" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="84.6808460539986" x2="32.68305955000314" y1="-7.711036017440037"
y2="44.28675048655542" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="84.6808460539986" x2="32.68305955000314" y1="-519.71103601744"
y2="-467.71324951344457" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="340.6808460539986" x2="288.6830595500031" y1="-519.71103601744"
y2="-467.71324951344457" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="596.6808460539986" x2="544.6830595500031" y1="-519.71103601744"
y2="-467.71324951344457" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="84.6808460539986" x2="32.68305955000314" y1="-263.71103601744005"
y2="-211.71324951344457" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="340.6808460539986" x2="288.6830595500031" y1="-263.71103601744005"
y2="-211.71324951344457" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="596.6808460539986" x2="544.6830595500031" y1="-263.71103601744005"
y2="-211.71324951344457" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="84.6808460539986" x2="32.68305955000314" y1="-7.711036017440037"
y2="44.28675048655542" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="340.6808460539986" x2="288.6830595500031" y1="-7.711036017440037"
y2="44.28675048655542" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="596.6808460539986" x2="544.6830595500031" y1="-7.711036017440037"
y2="44.28675048655542" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="84.6808460539986" x2="32.68305955000314" y1="248.28896398255995"
y2="300.28675048655543" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="225.38342310559023" x2="185.66602314192056" y1="109.68961591653738"
y2="149.40701588020704" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="225.38342310559023" x2="185.66602314192056" y1="-402.3103840834626"
y2="-362.59298411979296" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="481.3834231055902" x2="441.66602314192056" y1="-402.3103840834626"
y2="-362.59298411979296" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="737.3834231055903" x2="697.6660231419205" y1="-402.3103840834626"
y2="-362.59298411979296" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="225.38342310559023" x2="185.66602314192056" y1="-146.31038408346262"
y2="-106.59298411979296" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="481.3834231055902" x2="441.66602314192056" y1="-146.31038408346262"
y2="-106.59298411979296" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="737.3834231055903" x2="697.6660231419205" y1="-146.31038408346262"
y2="-106.59298411979296" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="225.38342310559023" x2="185.66602314192056" y1="109.68961591653738"
y2="149.40701588020704" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="481.3834231055902" x2="441.66602314192056" y1="109.68961591653738"
y2="149.40701588020704" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="737.3834231055903" x2="697.6660231419205" y1="109.68961591653738"
y2="149.40701588020704" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="172.83662370669697" x2="103.52581079778793" y1="164.45975635392284"
y2="233.77056926283188" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="172.83662370669697" x2="103.52581079778793" y1="-347.54024364607716"
y2="-278.2294307371681" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="428.83662370669697" x2="359.5258107977879" y1="-347.54024364607716"
y2="-278.2294307371681" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="684.836623706697" x2="615.5258107977879" y1="-347.54024364607716"
y2="-278.2294307371681" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="172.83662370669697" x2="103.52581079778793" y1="-91.54024364607716"
y2="-22.229430737168116" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="428.83662370669697" x2="359.5258107977879" y1="-91.54024364607716"
y2="-22.229430737168116" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="684.836623706697" x2="615.5258107977879" y1="-91.54024364607716"
y2="-22.229430737168116" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="172.83662370669697" x2="103.52581079778793" y1="164.45975635392284"
y2="233.77056926283188" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="428.83662370669697" x2="359.5258107977879" y1="164.45975635392284"
y2="233.77056926283188" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="684.836623706697" x2="615.5258107977879" y1="164.45975635392284"
y2="233.77056926283188" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="254.85435949520382" x2="240.10841684705935" y1="-1.209429949430282"
y2="13.536512698714214" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="254.85435949520382" x2="240.10841684705935" y1="-513.2094299494303"
y2="-498.4634873012858" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="510.8543594952038" x2="496.10841684705935" y1="-513.2094299494303"
y2="-498.4634873012858" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="766.8543594952039" x2="752.1084168470593" y1="-513.2094299494303"
y2="-498.4634873012858" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="254.85435949520382" x2="240.10841684705935" y1="-257.2094299494303"
y2="-242.4634873012858" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="510.8543594952038" x2="496.10841684705935" y1="-257.2094299494303"
y2="-242.4634873012858" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="766.8543594952039" x2="752.1084168470593" y1="-257.2094299494303"
y2="-242.4634873012858" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="254.85435949520382" x2="240.10841684705935" y1="-1.209429949430282"
y2="13.536512698714214" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="510.8543594952038" x2="496.10841684705935" y1="-1.209429949430282"
y2="13.536512698714214" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="766.8543594952039" x2="752.1084168470593" y1="-1.209429949430282"
y2="13.536512698714214" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="254.85435949520382" x2="240.10841684705935" y1="254.79057005056973"
y2="269.5365126987142" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<animateTransform attributeName="transform" type="translate" values="0 0;-256 256"
keyTimes="0;1" repeatCount="indefinite" dur="10.3333333333333335s"></animateTransform>
</g>
</g>
</pattern>
</defs>
<rect x="0" y="0" width="1084" height="322" fill="url(#pid-0.7735807359934106)"></rect>
</svg>

View file

@ -0,0 +1,146 @@
<svg id="canvas" height="100%" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.dev/svgjs" viewBox="0 0 600 600"><rect width="600" height="600" fill="transparent"></rect><mask id="mask" mask-type="alpha" maskUnits="userSpaceOnUse"><rect transform="translate(0, 0)" width="600" height="600" fill="white"></rect></mask><svg><path transform="translate(0, 0 translate(30,30) rotate(180) translate(-30,-30)" d="M0 60C33.1371 60 60 33.1371 60 5.24537e-06L5.24537e-06 0L0 60Z" fill="#03045e"></path></svg><svg><path transform="translate(0, 3600 translate(30,30) rotate(270) translate(-30,-30)" d="M0 60C33.1371 60 60 33.1371 60 5.24537e-06L5.24537e-06 0L0 60Z" fill="#90e0ef"></path></svg><svg><path transform="
translate(0, 120)
" d="M0 0h60v60H0z" fill="
#90e0ef"></path></svg><svg><path transform="translate(0, 10800 translate(30,30) rotate(270) translate(-30,-30)" d="M0 60C33.1371 60 60 33.1371 60 5.24537e-06L5.24537e-06 0L0 60Z" fill="#00b4d8"></path></svg><svg><path transform="translate(0,240) translate(30,30) rotate(270) translate(-30,-30)" fill="#ade8f4" d="M60 0v60H0V0z"></path><path transform="translate(0,240) translate(30,30) rotate(270) translate(-30,-30)" fill="#03045e" d="M60 0v60H0C0 26.863 26.863 0 60 0z"></path></svg><svg><path transform="translate(0, 300) translate(30,30) rotate(180) translate(-30,-30)" fill="#023e8a" d="M0 0h60v60H0z"></path><circle cx="30" cy="30" r="30" transform="translate(0, 300) translate(30,30) rotate(180) translate(-30,-30)" fill="#caf0f8"></circle></svg><svg><path transform="translate(0,360) translate(30,30) rotate(90) translate(-30,-30)" fill="#0096c7" d="M60 0v60H0V0z"></path><path transform="translate(0,360) translate(30,30) rotate(90) translate(-30,-30)" fill="#caf0f8" d="M60 0v60H0C0 26.863 26.863 0 60 0z"></path></svg><svg><path transform="translate(0, 25200 translate(30,30) rotate(270) translate(-30,-30)" d="M0 60C33.1371 60 60 33.1371 60 5.24537e-06L5.24537e-06 0L0 60Z" fill="#00b4d8"></path></svg><svg><circle cx="30" cy="30" r="30" transform="
translate(0, 480)
" fill="
#0077b6
"></circle></svg><svg><circle cx="30" cy="30" r="30" transform="
translate(0, 540)
" fill="
#90e0ef
"></circle></svg><svg><path transform="translate(3600, 0 translate(30,30) rotate(0) translate(-30,-30)" d="M0 60C33.1371 60 60 33.1371 60 5.24537e-06L5.24537e-06 0L0 60Z" fill="#ade8f4"></path></svg><svg><path transform="
translate(60, 60)
" d="M0 0h60v60H0z" fill="
#48cae4"></path></svg><svg><path transform="
translate(60, 120)
" d="M0 0h60v60H0z" fill="
#90e0ef"></path></svg><svg><path transform="translate(3600, 10800 translate(30,30) rotate(0) translate(-30,-30)" d="M0 60C33.1371 60 60 33.1371 60 5.24537e-06L5.24537e-06 0L0 60Z" fill="#023e8a"></path></svg><svg><path transform="translate(3600, 14400 translate(30,30) rotate(180) translate(-30,-30)" d="M0 60C33.1371 60 60 33.1371 60 5.24537e-06L5.24537e-06 0L0 60Z" fill="#03045e"></path></svg><svg><path transform="
translate(60, 300)
" d="M0 0h60v60H0z" fill="
#00b4d8"></path></svg><svg><circle cx="30" cy="30" r="30" transform="
translate(60, 360)
" fill="
#03045e
"></circle></svg><svg><path transform="translate(60,420) translate(30,30) rotate(90) translate(-30,-30)" fill="#90e0ef" d="M60 0v60H0V0z"></path><path transform="translate(60,420) translate(30,30) rotate(90) translate(-30,-30)" fill="#00b4d8" d="M60 0v60H0C0 26.863 26.863 0 60 0z"></path></svg><svg><path transform="translate(60,480) translate(30,30) rotate(90) translate(-30,-30)" fill="#0096c7" d="M60 0v60H0V0z"></path><path transform="translate(60,480) translate(30,30) rotate(90) translate(-30,-30)" fill="#0096c7" d="M60 0v60H0C0 26.863 26.863 0 60 0z"></path></svg><svg><path transform="translate(3600, 32400 translate(30,30) rotate(180) translate(-30,-30)" d="M0 60C33.1371 60 60 33.1371 60 5.24537e-06L5.24537e-06 0L0 60Z" fill="#03045e"></path></svg><svg><circle cx="30" cy="30" r="30" transform="
translate(120, 0)
" fill="
#00b4d8
"></circle></svg><svg><path transform="translate(120,60) translate(30,30) rotate(180) translate(-30,-30)" fill="#caf0f8" d="M60 0v60H0V0z"></path><path transform="translate(120,60) translate(30,30) rotate(180) translate(-30,-30)" fill="#90e0ef" d="M60 0v60H0C0 26.863 26.863 0 60 0z"></path></svg><svg><circle cx="30" cy="30" r="30" transform="
translate(120, 120)
" fill="
#00b4d8
"></circle></svg><svg><path transform="translate(120, 180) translate(30,30) rotate(180) translate(-30,-30)" fill="#48cae4" d="M0 0h60v60H0z"></path><circle cx="30" cy="30" r="30" transform="translate(120, 180) translate(30,30) rotate(180) translate(-30,-30)" fill="#023e8a"></circle></svg><svg><path transform="translate(120, 240) translate(30,30) rotate(180) translate(-30,-30)" fill="#03045e" d="M0 0h60v60H0z"></path><circle cx="30" cy="30" r="30" transform="translate(120, 240) translate(30,30) rotate(180) translate(-30,-30)" fill="#00b4d8"></circle></svg><svg><path transform="translate(7200, 18000 translate(30,30) rotate(270) translate(-30,-30)" d="M0 60C33.1371 60 60 33.1371 60 5.24537e-06L5.24537e-06 0L0 60Z" fill="#90e0ef"></path></svg><svg><path transform="translate(7200, 21600 translate(30,30) rotate(90) translate(-30,-30)" d="M0 60C33.1371 60 60 33.1371 60 5.24537e-06L5.24537e-06 0L0 60Z" fill="#023e8a"></path></svg><svg><circle cx="30" cy="30" r="30" transform="
translate(120, 420)
" fill="
#023e8a
"></circle></svg><svg><path transform="
translate(120, 480)
" d="M0 0h60v60H0z" fill="
#48cae4"></path></svg><svg><circle cx="30" cy="30" r="30" transform="
translate(120, 540)
" fill="
#00b4d8
"></circle></svg><svg><path transform="translate(10800, 0 translate(30,30) rotate(0) translate(-30,-30)" d="M0 60C33.1371 60 60 33.1371 60 5.24537e-06L5.24537e-06 0L0 60Z" fill="#00b4d8"></path></svg><svg><path transform="
translate(180, 60)
" d="M0 0h60v60H0z" fill="
#023e8a"></path></svg><svg><path transform="translate(180,120) translate(30,30) rotate(90) translate(-30,-30)" fill="#ade8f4" d="M60 0v60H0V0z"></path><path transform="translate(180,120) translate(30,30) rotate(90) translate(-30,-30)" fill="#00b4d8" d="M60 0v60H0C0 26.863 26.863 0 60 0z"></path></svg><svg><path transform="
translate(180, 180)
" d="M0 0h60v60H0z" fill="
#0096c7"></path></svg><svg><circle cx="30" cy="30" r="30" transform="
translate(180, 240)
" fill="
#90e0ef
"></circle></svg><svg><path transform="translate(180,300) translate(30,30) rotate(0) translate(-30,-30)" fill="#0096c7" d="M60 0v60H0V0z"></path><path transform="translate(180,300) translate(30,30) rotate(0) translate(-30,-30)" fill="#023e8a" d="M60 0v60H0C0 26.863 26.863 0 60 0z"></path></svg><svg><path transform="
translate(180, 360)
" d="M0 0h60v60H0z" fill="
#00b4d8"></path></svg><svg><path transform="
translate(180, 420)
" d="M0 0h60v60H0z" fill="
#90e0ef"></path></svg><svg><path transform="
translate(180, 480)
" d="M0 0h60v60H0z" fill="
#0077b6"></path></svg><svg><path transform="translate(10800, 32400 translate(30,30) rotate(0) translate(-30,-30)" d="M0 60C33.1371 60 60 33.1371 60 5.24537e-06L5.24537e-06 0L0 60Z" fill="#ade8f4"></path></svg><svg><path transform="translate(14400, 0 translate(30,30) rotate(180) translate(-30,-30)" d="M0 60C33.1371 60 60 33.1371 60 5.24537e-06L5.24537e-06 0L0 60Z" fill="#0077b6"></path></svg><svg><path transform="translate(240, 60) translate(30,30) rotate(180) translate(-30,-30)" fill="#0096c7" d="M0 0h60v60H0z"></path><circle cx="30" cy="30" r="30" transform="translate(240, 60) translate(30,30) rotate(180) translate(-30,-30)" fill="#023e8a"></circle></svg><svg><path transform="
translate(240, 120)
" d="M0 0h60v60H0z" fill="
#0096c7"></path></svg><svg><path transform="
translate(240, 180)
" d="M0 0h60v60H0z" fill="
#00b4d8"></path></svg><svg><path transform="translate(14400, 14400 translate(30,30) rotate(0) translate(-30,-30)" d="M0 60C33.1371 60 60 33.1371 60 5.24537e-06L5.24537e-06 0L0 60Z" fill="#caf0f8"></path></svg><svg><path transform="
translate(240, 300)
" d="M0 0h60v60H0z" fill="
#0096c7"></path></svg><svg><path transform="translate(240, 360) translate(30,30) rotate(270) translate(-30,-30)" fill="#0077b6" d="M0 0h60v60H0z"></path><circle cx="30" cy="30" r="30" transform="translate(240, 360) translate(30,30) rotate(270) translate(-30,-30)" fill="#ade8f4"></circle></svg><svg><path transform="translate(240,420) translate(30,30) rotate(270) translate(-30,-30)" fill="#023e8a" d="M60 0v60H0V0z"></path><path transform="translate(240,420) translate(30,30) rotate(270) translate(-30,-30)" fill="#00b4d8" d="M60 0v60H0C0 26.863 26.863 0 60 0z"></path></svg><svg><path transform="translate(240,480) translate(30,30) rotate(180) translate(-30,-30)" fill="#48cae4" d="M60 0v60H0V0z"></path><path transform="translate(240,480) translate(30,30) rotate(180) translate(-30,-30)" fill="#0096c7" d="M60 0v60H0C0 26.863 26.863 0 60 0z"></path></svg><svg><circle cx="30" cy="30" r="30" transform="
translate(240, 540)
" fill="
#90e0ef
"></circle></svg><svg><path transform="translate(18000, 0 translate(30,30) rotate(270) translate(-30,-30)" d="M0 60C33.1371 60 60 33.1371 60 5.24537e-06L5.24537e-06 0L0 60Z" fill="#0077b6"></path></svg><svg><path transform="
translate(300, 60)
" d="M0 0h60v60H0z" fill="
#023e8a"></path></svg><svg><path transform="translate(18000, 7200 translate(30,30) rotate(90) translate(-30,-30)" d="M0 60C33.1371 60 60 33.1371 60 5.24537e-06L5.24537e-06 0L0 60Z" fill="#ade8f4"></path></svg><svg><path transform="
translate(300, 180)
" d="M0 0h60v60H0z" fill="
#caf0f8"></path></svg><svg><path transform="translate(300,240) translate(30,30) rotate(270) translate(-30,-30)" fill="#0096c7" d="M60 0v60H0V0z"></path><path transform="translate(300,240) translate(30,30) rotate(270) translate(-30,-30)" fill="#0096c7" d="M60 0v60H0C0 26.863 26.863 0 60 0z"></path></svg><svg><path transform="
translate(300, 300)
" d="M0 0h60v60H0z" fill="
#03045e"></path></svg><svg><path transform="translate(18000, 21600 translate(30,30) rotate(0) translate(-30,-30)" d="M0 60C33.1371 60 60 33.1371 60 5.24537e-06L5.24537e-06 0L0 60Z" fill="#48cae4"></path></svg><svg><path transform="
translate(300, 420)
" d="M0 0h60v60H0z" fill="
#90e0ef"></path></svg><svg><path transform="translate(18000, 28800 translate(30,30) rotate(90) translate(-30,-30)" d="M0 60C33.1371 60 60 33.1371 60 5.24537e-06L5.24537e-06 0L0 60Z" fill="#023e8a"></path></svg><svg><path transform="translate(300,540) translate(30,30) rotate(0) translate(-30,-30)" fill="#48cae4" d="M60 0v60H0V0z"></path><path transform="translate(300,540) translate(30,30) rotate(0) translate(-30,-30)" fill="#90e0ef" d="M60 0v60H0C0 26.863 26.863 0 60 0z"></path></svg><svg><path transform="translate(360,0) translate(30,30) rotate(270) translate(-30,-30)" fill="#0077b6" d="M60 0v60H0V0z"></path><path transform="translate(360,0) translate(30,30) rotate(270) translate(-30,-30)" fill="#90e0ef" d="M60 0v60H0C0 26.863 26.863 0 60 0z"></path></svg><svg><circle cx="30" cy="30" r="30" transform="
translate(360, 60)
" fill="
#caf0f8
"></circle></svg><svg><path transform="translate(360,120) translate(30,30) rotate(180) translate(-30,-30)" fill="#caf0f8" d="M60 0v60H0V0z"></path><path transform="translate(360,120) translate(30,30) rotate(180) translate(-30,-30)" fill="#0096c7" d="M60 0v60H0C0 26.863 26.863 0 60 0z"></path></svg><svg><path transform="
translate(360, 180)
" d="M0 0h60v60H0z" fill="
#0077b6"></path></svg><svg><path transform="translate(360,240) translate(30,30) rotate(270) translate(-30,-30)" fill="#00b4d8" d="M60 0v60H0V0z"></path><path transform="translate(360,240) translate(30,30) rotate(270) translate(-30,-30)" fill="#00b4d8" d="M60 0v60H0C0 26.863 26.863 0 60 0z"></path></svg><svg><path transform="translate(360, 300) translate(30,30) rotate(180) translate(-30,-30)" fill="#0096c7" d="M0 0h60v60H0z"></path><circle cx="30" cy="30" r="30" transform="translate(360, 300) translate(30,30) rotate(180) translate(-30,-30)" fill="#023e8a"></circle></svg><svg><path transform="
translate(360, 360)
" d="M0 0h60v60H0z" fill="
#ade8f4"></path></svg><svg><path transform="translate(360,420) translate(30,30) rotate(90) translate(-30,-30)" fill="#0096c7" d="M60 0v60H0V0z"></path><path transform="translate(360,420) translate(30,30) rotate(90) translate(-30,-30)" fill="#0096c7" d="M60 0v60H0C0 26.863 26.863 0 60 0z"></path></svg><svg><circle cx="30" cy="30" r="30" transform="
translate(360, 480)
" fill="
#ade8f4
"></circle></svg><svg><circle cx="30" cy="30" r="30" transform="
translate(360, 540)
" fill="
#ade8f4
"></circle></svg><svg><path transform="translate(420,0) translate(30,30) rotate(270) translate(-30,-30)" fill="#023e8a" d="M60 0v60H0V0z"></path><path transform="translate(420,0) translate(30,30) rotate(270) translate(-30,-30)" fill="#0096c7" d="M60 0v60H0C0 26.863 26.863 0 60 0z"></path></svg><svg><path transform="translate(25200, 3600 translate(30,30) rotate(0) translate(-30,-30)" d="M0 60C33.1371 60 60 33.1371 60 5.24537e-06L5.24537e-06 0L0 60Z" fill="#0096c7"></path></svg><svg><path transform="
translate(420, 120)
" d="M0 0h60v60H0z" fill="
#48cae4"></path></svg><svg><path transform="translate(420,180) translate(30,30) rotate(90) translate(-30,-30)" fill="#0077b6" d="M60 0v60H0V0z"></path><path transform="translate(420,180) translate(30,30) rotate(90) translate(-30,-30)" fill="#023e8a" d="M60 0v60H0C0 26.863 26.863 0 60 0z"></path></svg><svg><path transform="translate(25200, 14400 translate(30,30) rotate(270) translate(-30,-30)" d="M0 60C33.1371 60 60 33.1371 60 5.24537e-06L5.24537e-06 0L0 60Z" fill="#48cae4"></path></svg><svg><path transform="translate(420,300) translate(30,30) rotate(180) translate(-30,-30)" fill="#00b4d8" d="M60 0v60H0V0z"></path><path transform="translate(420,300) translate(30,30) rotate(180) translate(-30,-30)" fill="#48cae4" d="M60 0v60H0C0 26.863 26.863 0 60 0z"></path></svg><svg><path transform="translate(25200, 21600 translate(30,30) rotate(180) translate(-30,-30)" d="M0 60C33.1371 60 60 33.1371 60 5.24537e-06L5.24537e-06 0L0 60Z" fill="#023e8a"></path></svg><svg><circle cx="30" cy="30" r="30" transform="
translate(420, 420)
" fill="
#023e8a
"></circle></svg><svg><path transform="translate(420,480) translate(30,30) rotate(90) translate(-30,-30)" fill="#ade8f4" d="M60 0v60H0V0z"></path><path transform="translate(420,480) translate(30,30) rotate(90) translate(-30,-30)" fill="#caf0f8" d="M60 0v60H0C0 26.863 26.863 0 60 0z"></path></svg><svg><path transform="
translate(420, 540)
" d="M0 0h60v60H0z" fill="
#ade8f4"></path></svg><svg><circle cx="30" cy="30" r="30" transform="
translate(480, 0)
" fill="
#03045e
"></circle></svg><svg><path transform="
translate(480, 60)
" d="M0 0h60v60H0z" fill="
#023e8a"></path></svg><svg><path transform="translate(28800, 7200 translate(30,30) rotate(270) translate(-30,-30)" d="M0 60C33.1371 60 60 33.1371 60 5.24537e-06L5.24537e-06 0L0 60Z" fill="#00b4d8"></path></svg><svg><path transform="translate(480,180) translate(30,30) rotate(90) translate(-30,-30)" fill="#48cae4" d="M60 0v60H0V0z"></path><path transform="translate(480,180) translate(30,30) rotate(90) translate(-30,-30)" fill="#ade8f4" d="M60 0v60H0C0 26.863 26.863 0 60 0z"></path></svg><svg><path transform="
translate(480, 240)
" d="M0 0h60v60H0z" fill="
#48cae4"></path></svg><svg><path transform="
translate(480, 300)
" d="M0 0h60v60H0z" fill="
#90e0ef"></path></svg><svg><path transform="translate(480, 360) translate(30,30) rotate(270) translate(-30,-30)" fill="#ade8f4" d="M0 0h60v60H0z"></path><circle cx="30" cy="30" r="30" transform="translate(480, 360) translate(30,30) rotate(270) translate(-30,-30)" fill="#03045e"></circle></svg><svg><path transform="translate(480,420) translate(30,30) rotate(180) translate(-30,-30)" fill="#90e0ef" d="M60 0v60H0V0z"></path><path transform="translate(480,420) translate(30,30) rotate(180) translate(-30,-30)" fill="#caf0f8" d="M60 0v60H0C0 26.863 26.863 0 60 0z"></path></svg><svg><circle cx="30" cy="30" r="30" transform="
translate(480, 480)
" fill="
#03045e
"></circle></svg><svg><path transform="translate(28800, 32400 translate(30,30) rotate(90) translate(-30,-30)" d="M0 60C33.1371 60 60 33.1371 60 5.24537e-06L5.24537e-06 0L0 60Z" fill="#00b4d8"></path></svg><svg><path transform="translate(540,0) translate(30,30) rotate(270) translate(-30,-30)" fill="#90e0ef" d="M60 0v60H0V0z"></path><path transform="translate(540,0) translate(30,30) rotate(270) translate(-30,-30)" fill="#023e8a" d="M60 0v60H0C0 26.863 26.863 0 60 0z"></path></svg><svg><path transform="translate(540, 60) translate(30,30) rotate(270) translate(-30,-30)" fill="#0077b6" d="M0 0h60v60H0z"></path><circle cx="30" cy="30" r="30" transform="translate(540, 60) translate(30,30) rotate(270) translate(-30,-30)" fill="#0077b6"></circle></svg><svg><path transform="translate(540, 120) translate(30,30) rotate(90) translate(-30,-30)" fill="#90e0ef" d="M0 0h60v60H0z"></path><circle cx="30" cy="30" r="30" transform="translate(540, 120) translate(30,30) rotate(90) translate(-30,-30)" fill="#0096c7"></circle></svg><svg><path transform="translate(32400, 10800 translate(30,30) rotate(0) translate(-30,-30)" d="M0 60C33.1371 60 60 33.1371 60 5.24537e-06L5.24537e-06 0L0 60Z" fill="#90e0ef"></path></svg><svg><path transform="translate(540, 240) translate(30,30) rotate(90) translate(-30,-30)" fill="#0096c7" d="M0 0h60v60H0z"></path><circle cx="30" cy="30" r="30" transform="translate(540, 240) translate(30,30) rotate(90) translate(-30,-30)" fill="#0077b6"></circle></svg><svg><path transform="
translate(540, 300)
" d="M0 0h60v60H0z" fill="
#023e8a"></path></svg><svg><path transform="translate(540, 360) translate(30,30) rotate(0) translate(-30,-30)" fill="#00b4d8" d="M0 0h60v60H0z"></path><circle cx="30" cy="30" r="30" transform="translate(540, 360) translate(30,30) rotate(0) translate(-30,-30)" fill="#00b4d8"></circle></svg><svg><path transform="
translate(540, 420)
" d="M0 0h60v60H0z" fill="
#0077b6"></path></svg><svg><path transform="
translate(540, 480)
" d="M0 0h60v60H0z" fill="
#48cae4"></path></svg><svg><circle cx="30" cy="30" r="30" transform="
translate(540, 540)
" fill="
#0096c7
"></circle></svg></svg>

After

Width:  |  Height:  |  Size: 18 KiB

View file

@ -0,0 +1,235 @@
---
title: "Advanced Customisation"
weight: 13
draft: false
description: "Learn how to build Blowfish manually."
slug: "advanced-customisation"
tags: ["advanced", "css", "docs"]
series: ["Documentation"]
series_order: 13
---
There are many ways you can make advanced changes to Blowfish. Read below to learn more about what can be customised and the best way of achieving your desired result.
If you need further advice, post your questions on [GitHub Discussions](https://github.com/nunocoracao/blowfish/discussions).
## Hugo project structure
Before leaping into it, first a quick note about [Hugo project structure](https://gohugo.io/getting-started/directory-structure/) and best practices for managing your content and theme customisations.
{{< alert >}}
**In summary:** Never directly edit the theme files. Only make customisations in your Hugo project's sub-directories, not in the themes directory itself.
{{< /alert >}}
Blowfish is built to take advantage of all the standard Hugo practices. It is designed to allow all aspects of the theme to be customised and overridden without changing any of the core theme files. This allows for a seamless upgrade experience while giving you total control over the look and feel of your website.
In order to achieve this, you should never manually adjust any of the theme files directly. Whether you install using Hugo modules, as a git submodule or manually include the theme in your `themes/` directory, you should always leave these files intact.
The correct way to adjust any theme behaviour is by overriding files using Hugo's powerful [file lookup order](https://gohugo.io/templates/lookup-order/). In summary, the lookup order ensures any files you include in your project directory will automatically take precedence over any theme files.
For example, if you wanted to override the main article template in Blowfish, you can simply create your own `layouts/_default/single.html` file and place it in the root of your project. This file will then override the `single.html` from the theme without ever changing the theme itself. This works for any theme files - HTML templates, partials, shortcodes, config files, data, assets, etc.
As long as you follow this simple practice, you will always be able to update the theme (or test different theme versions) without worrying that you will lose any of your custom changes.
## Change image optimization settings
Hugo has various builtin methods to resize, crop and optimize images.
As an example - in `layouts/partials/article-link/card.html`, you have the following code:
```go
{{ with .Resize "600x" }}
<div class="w-full thumbnail_card nozoom" style="background-image:url({{ .RelPermalink }});"></div>
{{ end }}
```
The default behavior of Hugo here is to resize the image to 600px keeping the ratio.
It is worth noting here that default image configurations such as [anchor point](https://gohugo.io/content-management/image-processing/#anchor) can also be set in your [site configuration](https://gohugo.io/content-management/image-processing/#processing-options) as well as in the template itself.
See the [Hugo docs on image processing](https://gohugo.io/content-management/image-processing/#image-processing-methods) for more info.
## Colour schemes
Blowfish ships with a number of colour schemes out of the box. To change the basic colour scheme, you can set the `colorScheme` theme parameter. Refer to the [Getting Started]({{< ref "getting-started#colour-schemes" >}}) section to learn more about the built-in schemes.
In addition to the default schemes, you can also create your own and re-style the entire website to your liking. Schemes are created by by placing a `<scheme-name>.css` file in the `assets/css/schemes/` folder. Once the file is created, simply refer to it by name in the theme configuration.
{{< alert "github">}}
**Note:** generating these files manually can be hard, I've built a `nodejs` terminal tool to help with that, [Fugu](https://github.com/nunocoracao/fugu). In a nutshell, you pass the main three `hex` values of your color palette and the program will output a css file that can be imported directly into Blowfish.
{{< /alert >}}
Blowfish defines a three-colour palette that is used throughout the theme. The three colours are defined as `neutral`, `primary` and `secondary` variants, each containing ten shades of colour.
Due to the way Tailwind CSS 3.0 calculates colour values with opacity, the colours specified in the scheme need to [conform to a particular format](https://github.com/adamwathan/tailwind-css-variable-text-opacity-demo) by providing the red, green and blue colour values.
```css
:root {
--color-primary-500: 139, 92, 246;
}
```
This example defines a CSS variable for the `primary-500` colour with a red value of `139`, green value of `92` and blue value of `246`.
Use one of the existing theme stylesheets as a template. You are free to define your own colours, but for some inspiration, check out the official [Tailwind colour palette reference](https://tailwindcss.com/docs/customizing-colors#color-palette-reference).
## Overriding the stylesheet
Sometimes you need to add a custom style to style your own HTML elements. Blowfish provides for this scenario by allowing you to override the default styles in your own CSS stylesheet. Simply create a `custom.css` file in your project's `assets/css/` folder.
The `custom.css` file will be minified by Hugo and loaded automatically after all the other theme styles which means anything in your custom file will take precedence over the defaults.
### Using additional fonts
Blowfish allows you to easily change the font for your site. After creating a `custom.css` file in your project's `assets/css/` folder, place you font file inside a `fonts` folder within the `static` root folder.
```shell
.
├── assets
│ └── css
│ └── custom.css
...
└─── static
└── fonts
└─── font.ttf
```
This makes the font available to the website. Now, the font can just import it in your `custom.css` and replaced wherever you see fit. The example below shows what replacing the font for the entire `html` would look like.
```css
@font-face {
font-family: font;
src: url('/fonts/font.ttf');
}
html {
font-family: font;
}
```
### Adjusting the font size
Changing the font size of your website is one example of overriding the default stylesheet. Blowfish makes this simple as it uses scaled font sizes throughout the theme which are derived from the base HTML font size. By default, Tailwind sets the default size to `12pt`, but it can be changed to whatever value you prefer.
Create a `custom.css` file using the [instructions above]({{< ref "#overriding-the-stylesheet" >}}) and add the following CSS declaration:
```css
/* Increase the default font size */
html {
font-size: 13pt;
}
```
Simply by changing this one value, all the font sizes on your website will be adjusted to match this new size. Therefore, to increase the overall font sizes used, make the value greater than `12pt`. Similarly, to decrease the font sizes, make the value less than `12pt`.
## Building the theme CSS from source
If you'd like to make a major change, you can take advantage of Tailwind CSS's JIT compiler and rebuild the entire theme CSS from scratch. This is useful if you want to adjust the Tailwind configuration or add extra Tailwind classes to the main stylesheet.
{{< alert >}}
**Note:** Building the theme manually is intended for advanced users.
{{< /alert >}}
Let's step through how building the Tailwind CSS works.
### Tailwind configuration
In order to generate a CSS file that only contains the Tailwind classes that are actually being used the JIT compiler needs to scan through all the HTML templates and Markdown content files to check which styles are present in the markup. The compiler does this by looking at the `tailwind.config.js` file which is included in the root of the theme directory:
```js
// themes/blowfish/tailwind.config.js
module.exports = {
content: [
"./layouts/**/*.html",
"./content/**/*.{html,md}",
"./themes/blowfish/layouts/**/*.html",
"./themes/blowfish/content/**/*.{html,md}",
],
// and more...
};
```
This default configuration has been included with these content paths so that you can easily generate your own CSS file without needing to modify it, provided you follow a particular project structure. Namely, **you have to include Blowfish in your project as a subdirectory at `themes/blowfish/`**. This means you cannot easily use Hugo Modules to install the theme and you must go down either the git submodule (recommended) or manual install routes. The [Installation docs]({{< ref "installation" >}}) explain how to install the theme using either of these methods.
### Project structure
In order to take advantage of the default configuration, your project should look something like this...
```shell
.
├── assets
│ └── css
│ └── compiled
│ └── main.css # this is the file we will generate
├── config # site config
│ └── _default
├── content # site content
│ ├── _index.md
│ ├── projects
│ │ └── _index.md
│ └── blog
│ └── _index.md
├── layouts # custom layouts for your site
│ ├── partials
│ │ └── extend-article-link/simple.html
│ ├── projects
│ │ └── list.html
│ └── shortcodes
│ └── disclaimer.html
└── themes
└── blowfish # git submodule or manual theme install
```
This example structure adds a new `projects` content type with its own custom layout along with a custom shortcode and extended partial. Provided the project follows this structure, all that's required is to recompile the `main.css` file.
### Install dependencies
In order for this to work you'll need to change into the `themes/blowfish/` directory and install the project dependencies. You'll need [npm](https://docs.npmjs.com/cli/v7/configuring-npm/install) on your local machine for this step.
```shell
cd themes/blowfish
npm install
```
### Run the Tailwind compiler
With the dependencies installed all that's left is to use [Tailwind CLI](https://v2.tailwindcss.com/docs/installation#using-tailwind-cli) to invoke the JIT compiler. Navigate back to the root of your Hugo project and issue the following command:
```shell
cd ../..
./themes/blowfish/node_modules/tailwindcss/lib/cli.js -c ./themes/blowfish/tailwind.config.js -i ./themes/blowfish/assets/css/main.css -o ./assets/css/compiled/main.css --jit
```
It's a bit of an ugly command due to the paths involved but essentially you're calling Tailwind CLI and passing it the location of the Tailwind config file (the one we looked at above), where to find the theme's `main.css` file and then where you want the compiled CSS file to be placed (it's going into the `assets/css/compiled/` folder of your Hugo project).
The config file will automatically inspect all the content and layouts in your project as well as all those in the theme and build a new CSS file that contains all the CSS required for your website. Due to the way Hugo handles file hierarchy, this file in your project will now automatically override the one that comes with the theme.
Each time you make a change to your layouts and need new Tailwind CSS styles, you can simply re-run the command and generate the new CSS file. You can also add `-w` to the end of the command to run the JIT compiler in watch mode.
### Make a build script
To fully complete this solution, you can simplify this whole process by adding aliases for these commands, or do what I do and add a `package.json` to the root of your project which contains the necessary scripts...
```js
// package.json
{
"name": "my-website",
"version": "1.0.0",
"description": "",
"scripts": {
"server": "hugo server -b http://localhost -p 8000",
"dev": "NODE_ENV=development ./themes/blowfish/node_modules/tailwindcss/lib/cli.js -c ./themes/blowfish/tailwind.config.js -i ./themes/blowfish/assets/css/main.css -o ./assets/css/compiled/main.css --jit -w",
"build": "NODE_ENV=production ./themes/blowfish/node_modules/tailwindcss/lib/cli.js -c ./themes/blowfish/tailwind.config.js -i ./themes/blowfish/assets/css/main.css -o ./assets/css/compiled/main.css --jit"
},
// and more...
}
```
Now when you want to work on designing your site, you can invoke `npm run dev` and the compiler will run in watch mode. When you're ready to deploy, run `npm run build` and you'll get a clean Tailwind CSS build.
🙋‍♀️ If you need help, feel free to ask a question on [GitHub Discussions](https://github.com/nunocoracao/blowfish/discussions).

View file

@ -0,0 +1,236 @@
---
title: "高度なカスタマイズ"
weight: 13
draft: false
description: "Blowfishを手動でビルドする方法を学びましょう。"
slug: "advanced-customisation"
tags: ["advanced", "css", "docs"]
series: ["Documentation"]
series_order: 13
---
Blowfish には高度な変更を加えるための多くの方法があります。カスタマイズできる内容や、希望する結果を得るための最良の方法については、以下をご覧ください。
さらにアドバイスが必要な場合は、 [GitHub Discussions](https://github.com/nunocoracao/blowfish/discussions) に質問を投稿してください。
## Hugo プロジェクトの構造
始める前に、[Hugo プロジェクトの構造](https://gohugo.io/getting-started/directory-structure/)と、コンテンツとテーマのカスタマイズを管理するためのベストプラクティスについて簡単に説明します。
{{< alert >}}
**簡単に言うと:** テーマファイルを直接編集してはいけません。カスタマイズは、テーマディレクトリ自体ではなく、Hugoプロジェクトのサブディレクトリ内でのみ行います。
{{< /alert >}}
Blowfish は、Hugo の標準的な実装をすべて活用できるように構築されています。コアのテーマファイルを変更することなく、テーマのあらゆる側面をカスタマイズしたりオーバーライドしたりできるように設計されています。これにより、ウェブサイトの見た目を完全にコントロールしながら、シームレスな改善が可能になります。
そのために、テーマファイルを手動で直接編集するのは避けてください。Hugo モジュール、git サブモジュール、または手動でテーマを `themes/` ディレクトリに格納するなど、どのインストール方法を使用する場合でも、これらのファイルは常にそのままにしておく必要があります。
テーマの動作を調整する正しい方法は、Hugo の強力な[ファイル優先順位](https://gohugo.io/templates/lookup-order/)を使用してファイルをオーバーライドすることです。要約すると、優先順位により、プロジェクトディレクトリに含めたファイルは、すべてのテーマファイルよりも自動的に優先されます。
たとえば、Blowfish のメイン記事テンプレートをオーバーライドしたい場合は、独自の `layouts/_default/single.html` ファイルを作成してプロジェクトのルートに配置するだけです。このファイルは、テーマ自体を変更することなく、テーマの `single.html` をオーバーライドします。これは、HTML テンプレート、パーシャル、ショートコード、設定ファイル、データ、アセットなど、すべてのテーマファイルで機能します。
この簡単なプラクティスに従う限り、カスタム変更が失われることを心配することなく、いつでもテーマを更新したり(または異なるテーマバージョンをテストしたり)することができます。
## 画像最適化設定の変更
Hugo には、画像のサイズ変更、トリミング、最適化を行うためのさまざまな組み込みメソッドがあります。
例として - `layouts/partials/article-link/card.html` には、次のコードがあります。
```go
{{ with .Resize "600x" }}
<div class="w-full thumbnail_card nozoom" style="background-image:url({{ .RelPermalink }});"></div>
{{ end }}
```
ここでの Hugo のデフォルトの動作は、比率を維持しながら画像のサイズを 600px に変更することです。
ここで、[アンカーポイント](https://gohugo.io/content-management/image-processing/#anchor)のようなデフォルトの画像設定は、テンプレート自体だけでなく、[サイト設定](https://gohugo.io/content-management/image-processing/#processing-options)でも設定できることに注意してください。
詳細については、[画像処理に関する Hugo ドキュメント](https://gohugo.io/content-management/image-processing/#image-processing-methods)を参照してください。
## カラースキーム
Blowfish には、すぐに使用できる多数のカラースキームが付属しています。基本的なカラースキームを変更するには、`colorScheme` テーマパラメータを設定します。 組み込みのスキームの詳細については、[はじめに]({{< ref "getting-started#カラースキーム" >}})セクションを参照してください。
デフォルトのスキームに加えて、独自のスキームを作成し、ウェブサイト全体を好みに合わせて再スタイルすることもできます。 スキームは、`assets/css/schemes/` フォルダに `<scheme-name>.css` ファイルを配置することで作成されます。ファイルが作成されたら、テーマ設定で名前で参照するだけです。
{{< alert "github">}}
**注:** これらのファイルを手動で生成するのは難しい場合があるため、それを支援する `nodejs` ターミナルツール [Fugu](https://github.com/nunocoracao/fugu) を作成しました。これは、カラーパレットの主要な3つの `hex` 値を渡すと、プログラムは Blowfish に直接インポートできる css ファイルを出力します。
{{< /alert >}}
Blowfish は、テーマ全体で使用される3色のパレットを定義します。3色は `neutral``primary``secondary` のバリエーションとして定義され、それぞれに10の色合いが含まれています。
Tailwind CSS 3.0 が不透明度で色の値を計算する方式のため、スキームで指定された色は、赤、緑、青の色の値を提供することにより、[特定の形式に準拠](https://github.com/adamwathan/tailwind-css-variable-text-opacity-demo)する必要があります。
```css
:root {
--color-primary-500: 139, 92, 246;
}
```
この例では、赤の値が `139`、緑の値が `92`、青の値が `246``primary-500` カラーの CSS 変数を定義しています。
既存のテーマスタイルシートの1つをテンプレートとして使用します。独自の色を自由に定義できますが、インスピレーションが必要な場合は、公式の [Tailwind カラーパレットリファレンス](https://tailwindcss.com/docs/customizing-colors#color-palette-reference)を確認してください。
## スタイルシートのオーバーライド
独自の HTML 要素をスタイルするために、カスタムスタイルを追加する必要がある場合があります。Blowfish は、独自の CSS スタイルシートでデフォルトのスタイルをオーバーライドできるようにすることで、このシナリオに対応します。プロジェクトの `assets/css/` フォルダに `custom.css` ファイルを作成するだけです。
`custom.css` ファイルは Hugo によって縮小され、他のすべてのテーマスタイルの後に自動的にロードされます。つまり、カスタムファイルの内容はデフォルトよりも優先されます。
### 追加フォントの使用
Blowfishでは、サイトのフォントを簡単に変更することができます。プロジェクトの`assets/css/`フォルダ内に`custom.css`ファイルを作成した後、`static`ルートフォルダ内の`fonts`フォルダ内にフォントファイルを配置するだけです。
```shell
.
├── assets
│ └── css
│ └── custom.css
...
└─── static
└── fonts
└─── font.ttf
```
これにより、フォントをウェブサイトで使用できるようになります。すると、フォントを `custom.css` にインポートし、適切と思われる場所で置き換えることができます。以下の例は、`html` 全体のフォントを置き換える方法を示しています。
```css
@font-face {
font-family: font;
src: url('/fonts/font.ttf');
}
html {
font-family: font;
}
```
### フォントサイズの調整
ウェブサイトのフォントサイズを変更することは、デフォルトのスタイルシートをオーバーライドする1つの例です。Blowfish は、テーマ全体で基本 HTML フォントサイズから派生したスケーリングされたフォントサイズを使用するため、これを簡単にします。デフォルトでは、Tailwind はデフォルトサイズを `12pt` に設定していますが、任意の値に変更できます。
[上記の手順]({{< ref "#スタイルシートのオーバーライド" >}}) を使用して `custom.css` ファイルを作成し、次の CSS 宣言を追加します。
```css
/* デフォルトのフォントサイズを大きくする */
html {
font-size: 13pt;
}
```
この1つの値を変更するだけで、ウェブサイトのすべてのフォントサイズがこの新しいサイズに合わせて調整されます。なので、使用されるフォントサイズ全体を大きくするには、値を `12pt` より大きくすれば良いです。同様に、フォントサイズを小さくするには、値を `12pt` より小さくすれば良いです。
## ソースからテーマ CSS をビルドする
大幅な変更を加えたい場合は、Tailwind CSS の JIT コンパイラを利用して、テーマ CSS 全体を最初から再構築できます。これは、Tailwind 設定を調整したり、メインスタイルシートに追加の Tailwind クラスを追加したりする場合に便利です。
{{< alert >}}
**注:** テーマの手動ビルドは上級者向けです。
{{< /alert >}}
Tailwind CSS のビルド方法を順番に説明します。
### Tailwind 設定
実際に使用されている Tailwind クラスのみを含む CSS ファイルを生成するために、JIT コンパイラはすべての HTML テンプレートと Markdown コンテンツファイルをスキャンして、マークアップにどのスタイルが存在するかを確認する必要があります。コンパイラは、テーマディレクトリのルートに含まれる `tailwind.config.js` ファイルを調べてこれを行います。
```js
// themes/blowfish/tailwind.config.js
module.exports = {
content: [
"./layouts/**/*.html",
"./content/**/*.{html,md}",
"./themes/blowfish/layouts/**/*.html",
"./themes/blowfish/content/**/*.{html,md}",
],
// その他...
};
```
このデフォルト設定には、これらのコンテンツパスが含まれているため、特定のプロジェクト構造に従う限り、変更することなく独自の CSS ファイルを簡単に生成できます。つまり、**Blowfish を `themes/blowfish/` のサブディレクトリとしてプロジェクトに含める必要があります**。これは、Hugo Modules を使用してテーマを簡単にインストールできないことを意味し、git サブモジュール(推奨)または手動インストールルートのいずれかを選択する必要があります。[インストールドキュメント]({{< ref "installation" >}}) では、これらのいずれかの方法を使用してテーマをインストールする方法について説明しています。
### プロジェクト構造
デフォルト設定を利用するために、プロジェクトは次のようになります...
```shell
.
├── assets
│ └── css
│ └── compiled
│ └── main.css # これが生成するファイル
├── config # サイト設定
│ └── _default
├── content # サイトコンテンツ
│ ├── _index.md
│ ├── projects
│ │ └── _index.md
│ └── blog
│ └── _index.md
├── layouts # サイトのカスタムレイアウト
│ ├── partials
│ │ └── extend-article-link/simple.html
│ ├── projects
│ │ └── list.html
│ └── shortcodes
│ └── disclaimer.html
└── themes
└── blowfish # git サブモジュールまたは手動テーマインストール
```
この例の構造では、独自のカスタムレイアウトを持つ新しい `projects` コンテンツタイプと、カスタムショートコードと拡張パーシャルが追加されています。プロジェクトがこの構造に従っている場合、必要なのは `main.css` ファイルを再コンパイルすることだけです。
### 依存関係のインストール
これが機能するには、`themes/blowfish/` ディレクトリに移動し、プロジェクトの依存関係をインストールする必要があります。この手順では、ローカルマシンに [npm](https://docs.npmjs.com/cli/v7/configuring-npm/install) が必要になります。
```shell
cd themes/blowfish
npm install
```
### Tailwind コンパイラを実行する
依存関係がインストールされたら、あとは [Tailwind CLI](https://v2.tailwindcss.com/docs/installation#using-tailwind-cli) を使用して JIT コンパイラを呼び出すだけです。Hugo プロジェクトのルートに戻り、次のコマンドを実行します。
```shell
cd ../..
./themes/blowfish/node_modules/tailwindcss/lib/cli.js -c ./themes/blowfish/tailwind.config.js -i ./themes/blowfish/assets/css/main.css -o ./assets/css/compiled/main.css --jit
```
関係するパスのため少し見苦しいコマンドですが、基本的に Tailwind CLI を呼び出し、Tailwind 設定ファイルの場所(上で見たもの)、テーマの `main.css` ファイルの場所、そしてコンパイル済み CSS ファイルを配置する場所Hugo プロジェクトの `assets/css/compiled/` フォルダ)を渡しています。
設定ファイルは、プロジェクト内のすべてのコンテンツとレイアウト、およびテーマ内のすべてのコンテンツとレイアウトを自動的にスキャンし、ウェブサイトに必要なすべての CSS を含む新しい CSS ファイルを作ります。Hugo のファイル階層を処理する方法のため、プロジェクト内のこのファイルは、テーマに付属のファイルを自動的にオーバーライドするようになります。
レイアウトに変更を加え、新しい Tailwind CSS スタイルが必要になるたびに、コマンドを再実行して新しい CSS ファイルを生成するだけです。 コマンドの最後に `-w` を追加して、JIT コンパイラをウォッチモードで実行することもできます。
### ビルドスクリプトを作成する
このソリューションを完全に完了するには、これらのコマンドのエイリアスを追加するか、私が行っているように、必要なスクリプトを含む `package.json` をプロジェクトのルートに追加することで、このプロセス全体を簡素化できます...
```js
// package.json
{
"name": "my-website",
"version": "1.0.0",
"description": "",
"scripts": {
"server": "hugo server -b http://localhost -p 8000",
"dev": "NODE_ENV=development ./themes/blowfish/node_modules/tailwindcss/lib/cli.js -c ./themes/blowfish/tailwind.config.js -i ./themes/blowfish/assets/css/main.css -o ./assets/css/compiled/main.css --jit -w",
"build": "NODE_ENV=production ./themes/blowfish/node_modules/tailwindcss/lib/cli.js -c ./themes/blowfish/tailwind.config.js -i ./themes/blowfish/assets/css/main.css -o ./assets/css/compiled/main.css --jit"
},
// その他...
}
```
これで、サイトの設計に取り組むときは、 `npm run dev` を呼び出すと、コンパイラがウォッチモードで実行されます。デプロイの準備ができたら、`npm run build` を実行すると、クリーンな Tailwind CSS ビルドが得られます。
🙋‍♀️ ご不明な点がありましたら、[GitHub Discussions](https://github.com/nunocoracao/blowfish/discussions) で気軽に質問してください。

View file

@ -0,0 +1,235 @@
---
title: "Advanced Customisation"
weight: 13
draft: false
description: "Learn how to build Blowfish manually."
slug: "advanced-customisation"
tags: ["advanced", "css", "docs"]
series: ["Documentation"]
series_order: 13
---
There are many ways you can make advanced changes to Blowfish. Read below to learn more about what can be customised and the best way of achieving your desired result.
If you need further advice, post your questions on [GitHub Discussions](https://github.com/nunocoracao/blowfish/discussions).
## Hugo project structure
Before leaping into it, first a quick note about [Hugo project structure](https://gohugo.io/getting-started/directory-structure/) and best practices for managing your content and theme customisations.
{{< alert >}}
**In summary:** Never directly edit the theme files. Only make customisations in your Hugo project's sub-directories, not in the themes directory itself.
{{< /alert >}}
Blowfish is built to take advantage of all the standard Hugo practices. It is designed to allow all aspects of the theme to be customised and overridden without changing any of the core theme files. This allows for a seamless upgrade experience while giving you total control over the look and feel of your website.
In order to achieve this, you should never manually adjust any of the theme files directly. Whether you install using Hugo modules, as a git submodule or manually include the theme in your `themes/` directory, you should always leave these files intact.
The correct way to adjust any theme behaviour is by overriding files using Hugo's powerful [file lookup order](https://gohugo.io/templates/lookup-order/). In summary, the lookup order ensures any files you include in your project directory will automatically take precedence over any theme files.
For example, if you wanted to override the main article template in Blowfish, you can simply create your own `layouts/_default/single.html` file and place it in the root of your project. This file will then override the `single.html` from the theme without ever changing the theme itself. This works for any theme files - HTML templates, partials, shortcodes, config files, data, assets, etc.
As long as you follow this simple practice, you will always be able to update the theme (or test different theme versions) without worrying that you will lose any of your custom changes.
## Change image optimization settings
Hugo has various builtin methods to resize, crop and optimize images.
As an example - in `layouts/partials/article-link/card.html`, you have the following code:
```go
{{ with .Resize "600x" }}
<div class="w-full thumbnail_card nozoom" style="background-image:url({{ .RelPermalink }});"></div>
{{ end }}
```
The default behavior of Hugo here is to resize the image to 600px keeping the ratio.
It is worth noting here that default image configurations such as [anchor point](https://gohugo.io/content-management/image-processing/#anchor) can also be set in your [site configuration](https://gohugo.io/content-management/image-processing/#processing-options) as well as in the template itself.
See the [Hugo docs on image processing](https://gohugo.io/content-management/image-processing/#image-processing-methods) for more info.
## Colour schemes
Blowfish ships with a number of colour schemes out of the box. To change the basic colour scheme, you can set the `colorScheme` theme parameter. Refer to the [Getting Started]({{< ref "getting-started#colour-schemes" >}}) section to learn more about the built-in schemes.
In addition to the default schemes, you can also create your own and re-style the entire website to your liking. Schemes are created by by placing a `<scheme-name>.css` file in the `assets/css/schemes/` folder. Once the file is created, simply refer to it by name in the theme configuration.
{{< alert "github">}}
**Note:** generating these files manually can be hard, I've built a `nodejs` terminal tool to help with that, [Fugu](https://github.com/nunocoracao/fugu). In a nutshell, you pass the main three `hex` values of your color palette and the program will output a css file that can be imported directly into Blowfish.
{{< /alert >}}
Blowfish defines a three-colour palette that is used throughout the theme. The three colours are defined as `neutral`, `primary` and `secondary` variants, each containing ten shades of colour.
Due to the way Tailwind CSS 3.0 calculates colour values with opacity, the colours specified in the scheme need to [conform to a particular format](https://github.com/adamwathan/tailwind-css-variable-text-opacity-demo) by providing the red, green and blue colour values.
```css
:root {
--color-primary-500: 139, 92, 246;
}
```
This example defines a CSS variable for the `primary-500` colour with a red value of `139`, green value of `92` and blue value of `246`.
Use one of the existing theme stylesheets as a template. You are free to define your own colours, but for some inspiration, check out the official [Tailwind colour palette reference](https://tailwindcss.com/docs/customizing-colors#color-palette-reference).
## Overriding the stylesheet
Sometimes you need to add a custom style to style your own HTML elements. Blowfish provides for this scenario by allowing you to override the default styles in your own CSS stylesheet. Simply create a `custom.css` file in your project's `assets/css/` folder.
The `custom.css` file will be minified by Hugo and loaded automatically after all the other theme styles which means anything in your custom file will take precedence over the defaults.
### Using additional fonts
Blowfish allows you to easily change the font for your site. After creating a `custom.css` file in your project's `assets/css/` folder, place you font file inside a `fonts` folder within the `static` root folder.
```shell
.
├── assets
│ └── css
│ └── custom.css
...
└─── static
└── fonts
└─── font.ttf
```
This makes the font available to the website. Now, the font can just import it in your `custom.css` and replaced wherever you see fit. The example below shows what replacing the font for the entire `html` would look like.
```css
@font-face {
font-family: font;
src: url('/fonts/font.ttf');
}
html {
font-family: font;
}
```
### Adjusting the font size
Changing the font size of your website is one example of overriding the default stylesheet. Blowfish makes this simple as it uses scaled font sizes throughout the theme which are derived from the base HTML font size. By default, Tailwind sets the default size to `12pt`, but it can be changed to whatever value you prefer.
Create a `custom.css` file using the [instructions above]({{< ref "#overriding-the-stylesheet" >}}) and add the following CSS declaration:
```css
/* Increase the default font size */
html {
font-size: 13pt;
}
```
Simply by changing this one value, all the font sizes on your website will be adjusted to match this new size. Therefore, to increase the overall font sizes used, make the value greater than `12pt`. Similarly, to decrease the font sizes, make the value less than `12pt`.
## Building the theme CSS from source
If you'd like to make a major change, you can take advantage of Tailwind CSS's JIT compiler and rebuild the entire theme CSS from scratch. This is useful if you want to adjust the Tailwind configuration or add extra Tailwind classes to the main stylesheet.
{{< alert >}}
**Note:** Building the theme manually is intended for advanced users.
{{< /alert >}}
Let's step through how building the Tailwind CSS works.
### Tailwind configuration
In order to generate a CSS file that only contains the Tailwind classes that are actually being used the JIT compiler needs to scan through all the HTML templates and Markdown content files to check which styles are present in the markup. The compiler does this by looking at the `tailwind.config.js` file which is included in the root of the theme directory:
```js
// themes/blowfish/tailwind.config.js
module.exports = {
content: [
"./layouts/**/*.html",
"./content/**/*.{html,md}",
"./themes/blowfish/layouts/**/*.html",
"./themes/blowfish/content/**/*.{html,md}",
],
// and more...
};
```
This default configuration has been included with these content paths so that you can easily generate your own CSS file without needing to modify it, provided you follow a particular project structure. Namely, **you have to include Blowfish in your project as a subdirectory at `themes/blowfish/`**. This means you cannot easily use Hugo Modules to install the theme and you must go down either the git submodule (recommended) or manual install routes. The [Installation docs]({{< ref "installation" >}}) explain how to install the theme using either of these methods.
### Project structure
In order to take advantage of the default configuration, your project should look something like this...
```shell
.
├── assets
│ └── css
│ └── compiled
│ └── main.css # this is the file we will generate
├── config # site config
│ └── _default
├── content # site content
│ ├── _index.md
│ ├── projects
│ │ └── _index.md
│ └── blog
│ └── _index.md
├── layouts # custom layouts for your site
│ ├── partials
│ │ └── extend-article-link/simple.html
│ ├── projects
│ │ └── list.html
│ └── shortcodes
│ └── disclaimer.html
└── themes
└── blowfish # git submodule or manual theme install
```
This example structure adds a new `projects` content type with its own custom layout along with a custom shortcode and extended partial. Provided the project follows this structure, all that's required is to recompile the `main.css` file.
### Install dependencies
In order for this to work you'll need to change into the `themes/blowfish/` directory and install the project dependencies. You'll need [npm](https://docs.npmjs.com/cli/v7/configuring-npm/install) on your local machine for this step.
```shell
cd themes/blowfish
npm install
```
### Run the Tailwind compiler
With the dependencies installed all that's left is to use [Tailwind CLI](https://v2.tailwindcss.com/docs/installation#using-tailwind-cli) to invoke the JIT compiler. Navigate back to the root of your Hugo project and issue the following command:
```shell
cd ../..
./themes/blowfish/node_modules/tailwindcss/lib/cli.js -c ./themes/blowfish/tailwind.config.js -i ./themes/blowfish/assets/css/main.css -o ./assets/css/compiled/main.css --jit
```
It's a bit of an ugly command due to the paths involved but essentially you're calling Tailwind CLI and passing it the location of the Tailwind config file (the one we looked at above), where to find the theme's `main.css` file and then where you want the compiled CSS file to be placed (it's going into the `assets/css/compiled/` folder of your Hugo project).
The config file will automatically inspect all the content and layouts in your project as well as all those in the theme and build a new CSS file that contains all the CSS required for your website. Due to the way Hugo handles file hierarchy, this file in your project will now automatically override the one that comes with the theme.
Each time you make a change to your layouts and need new Tailwind CSS styles, you can simply re-run the command and generate the new CSS file. You can also add `-w` to the end of the command to run the JIT compiler in watch mode.
### Make a build script
To fully complete this solution, you can simplify this whole process by adding aliases for these commands, or do what I do and add a `package.json` to the root of your project which contains the necessary scripts...
```js
// package.json
{
"name": "my-website",
"version": "1.0.0",
"description": "",
"scripts": {
"server": "hugo server -b http://localhost -p 8000",
"dev": "NODE_ENV=development ./themes/blowfish/node_modules/tailwindcss/lib/cli.js -c ./themes/blowfish/tailwind.config.js -i ./themes/blowfish/assets/css/main.css -o ./assets/css/compiled/main.css --jit -w",
"build": "NODE_ENV=production ./themes/blowfish/node_modules/tailwindcss/lib/cli.js -c ./themes/blowfish/tailwind.config.js -i ./themes/blowfish/assets/css/main.css -o ./assets/css/compiled/main.css --jit"
},
// and more...
}
```
Now when you want to work on designing your site, you can invoke `npm run dev` and the compiler will run in watch mode. When you're ready to deploy, run `npm run build` and you'll get a clean Tailwind CSS build.
🙋‍♀️ If you need help, feel free to ask a question on [GitHub Discussions](https://github.com/nunocoracao/blowfish/discussions).

View file

@ -0,0 +1,237 @@
---
title: 进阶自定义
weight: 13
draft: false
description: "了解如何手动构建 Blowfish。"
slug: "advanced-customisation"
tags: ["高级", "CSS", "文档"]
series: ["部署教程"]
series_order: 13
---
您可以通过多种方式对 Blowfish 进行高级自定义。请阅读下文,了解更多可自定义的内容以及实现想要效果的最佳方法。
如果您需要更多指导,请在 [GitHub Discussions](https://github.com/nunocoracao/blowfish/discussions) 上提问。
## Hugo 项目结构
在开始讨论之前,首先简要介绍一下 [Hugo 项目结构](https://gohugo.io/getting-started/directory-struct/) 以及管理内容和主题自定义的最佳方式。
{{< alert >}}
**总结:** 切勿直接编辑主题文件。一定要仅在 Hugo 项目的子目录中进行自定义,而不是在主题目录中进行自定义。
{{< /alert >}}
Blowfish 旨在利用所有标准的 Hugo 参数操作。它旨在允许在不更改任何核心主题文件的情况下自定义和覆盖主题的所有方面。这也给您提供了一种无缝升级的体验,同时让您完全控制网站的外观和感觉。
为了实现这一点,您永远不应该直接手动更改任何主题核心文件。无论你是使用 Hugo 模块安装,还是作为 git 子模块安装,还是手动将主题安装在 `themes/` 目录中,你都应该始终保持这些主题文件不变。
调整主题行为的正确方法是通过使用 Hugo 强大的[文件查找顺序](https://gohugo.io/templates/lookup-order/)覆盖文件。总之,查找顺序确保了包含在你的项目目录中的文件都会优先于主题文件。
例如,如果您想覆盖 Blowfish 中的主要文章模板, 您可以创建自己的 `layouts/_default/single.html` 文件并将其放在项目的根目录中。然后,此文件将覆盖主题文件中的 `single.html` 同时也不会对主题文件本身进行更改。 这适用于任何主题文件HTML 模板、partials、shortcodes、config 文件、data、assets 等等。
只要您遵循这个方法,您将始终能够无缝更新主题(或测试不同的主题版本),而不必担心会丢失任何自定义更改。
## 修改图片优化设置
Hugo 有各种内置的方法来调整大小,裁剪和优化图像。
举个例子,如果在 `layouts/partials/article-link/card.html` 中,您有以下代码:
```go
{{ with .Resize "600x" }}
<div class="w-full thumbnail_card nozoom" style="background-image:url({{ .RelPermalink }});"></div>
{{ end }}
```
Hugo 将默认把图像大小调整为 600px 同时保持比例不变。
值得注意的是,默认的图像设置比如[锚点](https://gohugo.io/content-management/image-processing/#anchor) 也可以在你的 [站点配置](https://gohugo.io/content-management/image-processing/#processing-options) 中修改,就和修改模板一样。
想要了解更多信息,请再参考 [有关图像处理的 Hugo 文档](https://gohugo.io/content-management/image-processing/#image-processing-methods)。
## 配色方案
Blowfish 附带了多种开箱即用的配色方案。想要更改基本配色方案,您可以设置 `colorScheme` 主题参数。请参阅[快速上手#配色方案]({{< ref "getting-started#colour-schemes" >}}) 以了解更多内置方案。
除了默认方案之外,您还可以创建自己的方案并根据自己的喜好重新设计整个网站的样式。 通过在 `assets/css/schemes/` 中创建 `<scheme-name>.css` 文件可以创建新的配色方案。创建文件后,只需在主题配置中按名称引用它即可。
{{< alert "github">}}
**注意:** 手动生成这些文件可能会比较困难,我编写了一个 `nodejs` 工具 [Fugu](https://github.com/nunocoracao/fugu) 来帮助解决这个问题。简而言之,您只需要提供调色板的三个主要 `hex` 值,程序将生成一个可以直接导入到 Blowfish 中的 css 文件。
{{< /alert >}}
Blowfish 使用一种定义了整个主题中使用的三色调色板。这三种颜色被定义为 `neutral``primary``secondary` 颜色,每种颜色包含十种色调。
由于 Tailwind CSS 3.0 计算不透明度颜色值的方式,方案中指定的颜色需要通过提供红色、绿色和蓝色值来[符合特定格式](https://github.com/adamwathan/tailwind-css-variable-text-opacity-demo) 。
```css
:root {
--color-primary-500: 139, 92, 246;
}
```
此示例为一个 `primary-500` 的 CSS 颜色变量,红色值为 `139`,绿色值为 `92`,蓝色值为 `246`
您可以使用现有主题样式表之一作为模板并自由配置自己的颜色。如果想要寻求一些灵感,请查看官方 [Tailwind 调色板参考](https://tailwindcss.com/docs/customizing-colors#color-palette-reference) 。
## 覆盖样式
有时您需要添加自定义样式来设置您自己的 HTML 元素的样式。 Blowfish 允许您覆盖自己的 CSS 样式表中的默认样式来进行自定义。只需在项目的 `assets/css/` 文件夹中创建一个 `custom.css` 文件即可。
`custom.css` 文件将被 Hugo 优化并在所有其他主题样式之后自动加载,这意味着自定义文件中的任何内容都将优先于默认值。
### 使用附加字体
Blowfish 可以让您轻松更改网站的字体。在项目的 `assets/css/` 文件夹中创建 `custom.css` 文件后,将字体文件放入 `static/fonts` 文件夹中。
```shell
.
├── assets
│ └── css
│ └── custom.css
...
└─── static
└── fonts
└─── font.ttf
```
这样,该字体便可供网站使用。现在,可以将字体导入到您的 `custom.css` 中,并在您认为合适的地方进行替换。下面的示例展示了替换整个 `html` 字体的方法。
```css
@font-face {
font-family: font;
src: url('/fonts/font.ttf');
}
html {
font-family: font;
}
```
### 调整字体大小
我们也提供更改网站的字体大小的示例。 Blowfish 使这一切变得简单,因为它在整个主题中使用源自基本 HTML 语言的缩放字体大小方法。默认情况下Tailwind 将默认大小设置为 `12pt` ,但您可以将其更改为喜欢的大小。
参考[上面的说明]({{< ref "#overriding-the-stylesheet" >}}) 创建一个 `custom.css` 文件并添加以下 CSS 声明:
```css
/* Increase the default font size */
html {
font-size: 13pt;
}
```
只需更改此值,您网站上的所有字体大小都将调整为此新大小。因此,要增加使用的整体字体大小,请将该值设置为大于 `12pt` 。同样,要减小字体大小,请将值设置为小于 `12pt`
## 从源代码构建主题 CSS
如果您想进行大量更改,您可以利用 Tailwind CSS 的 JIT 编译器并从头开始重建整个主题 CSS。尤其是您想要调整 Tailwind 配置或向主样式表添加额外的 Tailwind 类的时候,这种方法将非常有用。
{{< alert >}}
**注意:** 手动构建主题仅适用于高级用户。
{{< /alert >}}
让我们逐步了解构建 Tailwind CSS 的工作原理。
### Tailwind 配置
为了生成仅包含用于实际使用的 Tailwind 类的 CSS 文件JIT 编译器需要扫描所有 HTML 模板和 Markdown 文档,以检查 markup 中存在哪些样式。编译器将根据主题目录根目录中的 `tailwind.config.js` 文件来完成此操作:
```js
// themes/blowfish/tailwind.config.js
module.exports = {
content: [
"./layouts/**/*.html",
"./content/**/*.{html,md}",
"./themes/blowfish/layouts/**/*.html",
"./themes/blowfish/content/**/*.{html,md}",
],
// 更多...
};
```
此默认配置包含了这些路径,以便您可以十分方便地生成自己的 CSS 文件,而无需修改它,前提是您遵循我们的主题项目结构。也就是说,**您必须将 Blowfish 主题文件夹 `themes/blowfish/` 作为子目录包含在项目中**。这意味着您无法使用 Hugo Modules 方式来安装主题,而必须使用 git 子模块(推荐)或手动安装。 [安装文档]({{< ref "installation" >}}) 介绍了如何使用以上方法安装主题。
### 项目结构
为了充分利用默认配置,您的项目结构应该如下所示:
```shell
.
├── assets
│ └── css
│ └── compiled
│ └── main.css # 这是我们生成的文件
├── config # 站点配置
│ └── _default
├── content # site content
│ ├── _index.md
│ ├── projects
│ │ └── _index.md
│ └── blog
│ └── _index.md
├── layouts # 站点的自定义布局
│ ├── partials
│ │ └── extend-article-link/simple.html
│ ├── projects
│ │ └── list.html
│ └── shortcodes
│ └── disclaimer.html
└── themes
└── blowfish # Git 子模块或本地复制安装
```
此示例结构添加了一个新自定义的 `projects` 内容类型,具有自定义的 layout 以及自定义的 shortcodes 和扩展的 partials 。如果项目遵循类似结构,所需要做的就是仅仅是重新编译 `main.css` 文件。
### 安装依赖项
为了使 Tailwind 正常工作,您需要更改终端工作目录为 `themes/blowfish/` 并安装项目依赖项。您需要安装 [npm](https://docs.npmjs.com/cli/v7/configuring-npm/install)。
```shell
cd themes/blowfish
npm install
```
### 运行 Tailwind 编译器
安装依赖项后,接下来可以使用 [Tailwind CLI](https://v2.tailwindcss.com/docs/installation#using-tailwind-cli) 来调用 JIT 编译器。返回 Hugo 项目的根目录并在终端输入以下命令:
```shell
cd ../..
./themes/blowfish/node_modules/tailwindcss/lib/cli.js -c ./themes/blowfish/tailwind.config.js -i ./themes/blowfish/assets/css/main.css -o ./assets/css/compiled/main.css --jit
```
这个命令稍微有点复杂,因为涉及到几个路径。但本质上你是在调用 Tailwind CLI 并提供下面三个参数:
- Tailwind 配置文件 `tailwind.config.js`
- 主题的 `main.css` 文件
- 编译产出后的 CSS 文件的位置 `assets/css/compiled/`
配置文件将自动检查项目中以及主题中的所有内容和布局,并构建一个新的 CSS 文件,其中包含网站所需的所有 CSS。由于 Hugo 处理文件层次结构的方式,此文件现在将自动覆盖主题附带的文件。
每次更改布局并需要新的 Tailwind CSS 样式时,您只需重新运行命令并生成新的 CSS 文件即可。您还可以在命令末尾添加 `-w` 以在监视模式下运行 JIT 编译器。
### 制作构建脚本
要完成此解决方案,您可以通过为这些命令添加别名来简化整个过程,或者参照我的操作,将该 `package.json` 添加到包含必要脚本的项目的根目录:
```js
// package.json
{
"name": "my-website",
"version": "1.0.0",
"description": "",
"scripts": {
"server": "hugo server -b http://localhost -p 8000",
"dev": "NODE_ENV=development ./themes/blowfish/node_modules/tailwindcss/lib/cli.js -c ./themes/blowfish/tailwind.config.js -i ./themes/blowfish/assets/css/main.css -o ./assets/css/compiled/main.css --jit -w",
"build": "NODE_ENV=production ./themes/blowfish/node_modules/tailwindcss/lib/cli.js -c ./themes/blowfish/tailwind.config.js -i ./themes/blowfish/assets/css/main.css -o ./assets/css/compiled/main.css --jit"
},
// and more...
}
```
现在,当您想要设计站点时,可以调用 `npm run dev` ,编译器将以监视模式运行。当您准备好部署时,运行 `npm run build` ,您将生成一个编译好的 Tailwind CSS。
🙋‍♀️ 如果您需要帮助,请随时在 [GitHub Discusions](https://github.com/nunocoracao/blowfish/discussions) 上提问。

View file

@ -0,0 +1,574 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
style="margin:auto;background:rgba(NaN, NaN, NaN, 0);display:block;z-index:1;position:relative"
width="1084" height="322" preserveAspectRatio="xMidYMid" viewBox="0 0 1084 322">
<defs>
<pattern id="pid-0.7735807359934106" x="0" y="0" width="345.6" height="345.6"
patternUnits="userSpaceOnUse">
<g transform="scale(1.35)">
<g>
<line x1="237.6288884328494" x2="201.39714008747956" y1="119.05338354492488"
y2="155.28513189029474" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="237.6288884328494" x2="201.39714008747956" y1="-392.9466164550751"
y2="-356.71486810970526" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="493.6288884328494" x2="457.39714008747956" y1="-392.9466164550751"
y2="-356.71486810970526" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="749.6288884328494" x2="713.3971400874796" y1="-392.9466164550751"
y2="-356.71486810970526" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="237.6288884328494" x2="201.39714008747956" y1="-136.94661645507512"
y2="-100.71486810970526" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="493.6288884328494" x2="457.39714008747956" y1="-136.94661645507512"
y2="-100.71486810970526" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="749.6288884328494" x2="713.3971400874796" y1="-136.94661645507512"
y2="-100.71486810970526" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="237.6288884328494" x2="201.39714008747956" y1="119.05338354492488"
y2="155.28513189029474" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="493.6288884328494" x2="457.39714008747956" y1="119.05338354492488"
y2="155.28513189029474" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="749.6288884328494" x2="713.3971400874796" y1="119.05338354492488"
y2="155.28513189029474" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="244.43797352167968" x2="179.25167385613412" y1="196.21419032492787"
y2="261.40048999047343" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="244.43797352167968" x2="179.25167385613412" y1="-315.78580967507213"
y2="-250.59951000952657" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="500.4379735216797" x2="435.2516738561341" y1="-315.78580967507213"
y2="-250.59951000952657" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="756.4379735216796" x2="691.2516738561342" y1="-315.78580967507213"
y2="-250.59951000952657" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="244.43797352167968" x2="179.25167385613412" y1="-59.78580967507213"
y2="5.400489990473432" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="500.4379735216797" x2="435.2516738561341" y1="-59.78580967507213"
y2="5.400489990473432" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="756.4379735216796" x2="691.2516738561342" y1="-59.78580967507213"
y2="5.400489990473432" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="244.43797352167968" x2="179.25167385613412" y1="196.21419032492787"
y2="261.40048999047343" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="500.4379735216797" x2="435.2516738561341" y1="196.21419032492787"
y2="261.40048999047343" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="756.4379735216796" x2="691.2516738561342" y1="196.21419032492787"
y2="261.40048999047343" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="219.6724359102308" x2="209.2181431749452" y1="92.85808081141191"
y2="103.31237354669749" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="219.6724359102308" x2="209.2181431749452" y1="-419.1419191885881"
y2="-408.6876264533025" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="475.6724359102308" x2="465.2181431749452" y1="-419.1419191885881"
y2="-408.6876264533025" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="731.6724359102308" x2="721.2181431749452" y1="-419.1419191885881"
y2="-408.6876264533025" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="219.6724359102308" x2="209.2181431749452" y1="-163.14191918858808"
y2="-152.68762645330253" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="475.6724359102308" x2="465.2181431749452" y1="-163.14191918858808"
y2="-152.68762645330253" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="731.6724359102308" x2="721.2181431749452" y1="-163.14191918858808"
y2="-152.68762645330253" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="219.6724359102308" x2="209.2181431749452" y1="92.85808081141191"
y2="103.31237354669749" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="475.6724359102308" x2="465.2181431749452" y1="92.85808081141191"
y2="103.31237354669749" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="731.6724359102308" x2="721.2181431749452" y1="92.85808081141191"
y2="103.31237354669749" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="112.00565118011832" x2="71.15817744773324" y1="56.63419812919665"
y2="97.48167186158173" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="112.00565118011832" x2="71.15817744773324" y1="-455.36580187080335"
y2="-414.51832813841827" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="368.0056511801183" x2="327.15817744773324" y1="-455.36580187080335"
y2="-414.51832813841827" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="624.0056511801183" x2="583.1581774477332" y1="-455.36580187080335"
y2="-414.51832813841827" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="112.00565118011832" x2="71.15817744773324" y1="-199.36580187080335"
y2="-158.51832813841827" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="368.0056511801183" x2="327.15817744773324" y1="-199.36580187080335"
y2="-158.51832813841827" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="624.0056511801183" x2="583.1581774477332" y1="-199.36580187080335"
y2="-158.51832813841827" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="112.00565118011832" x2="71.15817744773324" y1="56.63419812919665"
y2="97.48167186158173" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="368.0056511801183" x2="327.15817744773324" y1="56.63419812919665"
y2="97.48167186158173" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="624.0056511801183" x2="583.1581774477332" y1="56.63419812919665"
y2="97.48167186158173" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="60.932966336476014" x2="49.388821076756514" y1="125.65681060957188"
y2="137.20095586929136" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="60.932966336476014" x2="49.388821076756514" y1="-386.3431893904281"
y2="-374.79904413070864" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="316.932966336476" x2="305.3888210767565" y1="-386.3431893904281"
y2="-374.79904413070864" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="572.932966336476" x2="561.3888210767565" y1="-386.3431893904281"
y2="-374.79904413070864" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="60.932966336476014" x2="49.388821076756514" y1="-130.3431893904281"
y2="-118.79904413070864" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="316.932966336476" x2="305.3888210767565" y1="-130.3431893904281"
y2="-118.79904413070864" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="572.932966336476" x2="561.3888210767565" y1="-130.3431893904281"
y2="-118.79904413070864" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="60.932966336476014" x2="49.388821076756514" y1="125.65681060957188"
y2="137.20095586929136" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="316.932966336476" x2="305.3888210767565" y1="125.65681060957188"
y2="137.20095586929136" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="572.932966336476" x2="561.3888210767565" y1="125.65681060957188"
y2="137.20095586929136" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="103.78310212459807" x2="35.08486945593138" y1="-2.328164446496814"
y2="66.37006822216988" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="103.78310212459807" x2="35.08486945593138" y1="-514.3281644464968"
y2="-445.6299317778301" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="359.7831021245981" x2="291.08486945593137" y1="-514.3281644464968"
y2="-445.6299317778301" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="615.783102124598" x2="547.0848694559314" y1="-514.3281644464968"
y2="-445.6299317778301" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="103.78310212459807" x2="35.08486945593138" y1="-258.3281644464968"
y2="-189.6299317778301" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="359.7831021245981" x2="291.08486945593137" y1="-258.3281644464968"
y2="-189.6299317778301" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="615.783102124598" x2="547.0848694559314" y1="-258.3281644464968"
y2="-189.6299317778301" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="103.78310212459807" x2="35.08486945593138" y1="-2.328164446496814"
y2="66.37006822216988" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="359.7831021245981" x2="291.08486945593137" y1="-2.328164446496814"
y2="66.37006822216988" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="615.783102124598" x2="547.0848694559314" y1="-2.328164446496814"
y2="66.37006822216988" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="103.78310212459807" x2="35.08486945593138" y1="253.67183555350317"
y2="322.3700682221699" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="211.69894364075495" x2="194.13528259328754" y1="166.21741462144607"
y2="183.78107566891347" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="211.69894364075495" x2="194.13528259328754" y1="-345.7825853785539"
y2="-328.21892433108655" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="467.6989436407549" x2="450.13528259328757" y1="-345.7825853785539"
y2="-328.21892433108655" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="723.6989436407549" x2="706.1352825932876" y1="-345.7825853785539"
y2="-328.21892433108655" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="211.69894364075495" x2="194.13528259328754" y1="-89.78258537855393"
y2="-72.21892433108653" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="467.6989436407549" x2="450.13528259328757" y1="-89.78258537855393"
y2="-72.21892433108653" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="723.6989436407549" x2="706.1352825932876" y1="-89.78258537855393"
y2="-72.21892433108653" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="211.69894364075495" x2="194.13528259328754" y1="166.21741462144607"
y2="183.78107566891347" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="467.6989436407549" x2="450.13528259328757" y1="166.21741462144607"
y2="183.78107566891347" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="723.6989436407549" x2="706.1352825932876" y1="166.21741462144607"
y2="183.78107566891347" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="44.012515207413756" x2="6.2920050630466875" y1="153.79537767995515"
y2="191.5158878243222" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="44.012515207413756" x2="6.2920050630466875" y1="-358.20462232004485"
y2="-320.4841121756778" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="300.01251520741374" x2="262.2920050630467" y1="-358.20462232004485"
y2="-320.4841121756778" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="556.0125152074138" x2="518.2920050630466" y1="-358.20462232004485"
y2="-320.4841121756778" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="44.012515207413756" x2="6.2920050630466875" y1="-102.20462232004485"
y2="-64.48411217567781" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="300.01251520741374" x2="262.2920050630467" y1="-102.20462232004485"
y2="-64.48411217567781" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="556.0125152074138" x2="518.2920050630466" y1="-102.20462232004485"
y2="-64.48411217567781" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="44.012515207413756" x2="6.2920050630466875" y1="153.79537767995515"
y2="191.5158878243222" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="300.01251520741374" x2="262.2920050630467" y1="153.79537767995515"
y2="191.5158878243222" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="556.0125152074138" x2="518.2920050630466" y1="153.79537767995515"
y2="191.5158878243222" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="105.49237048043514" x2="31.549625942354083" y1="123.41684480916788"
y2="197.35958934724894" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="105.49237048043514" x2="31.549625942354083" y1="-388.58315519083214"
y2="-314.64041065275103" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="361.49237048043517" x2="287.54962594235406" y1="-388.58315519083214"
y2="-314.64041065275103" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="617.4923704804352" x2="543.549625942354" y1="-388.58315519083214"
y2="-314.64041065275103" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="105.49237048043514" x2="31.549625942354083" y1="-132.58315519083212"
y2="-58.64041065275106" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="361.49237048043517" x2="287.54962594235406" y1="-132.58315519083212"
y2="-58.64041065275106" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="617.4923704804352" x2="543.549625942354" y1="-132.58315519083212"
y2="-58.64041065275106" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="105.49237048043514" x2="31.549625942354083" y1="123.41684480916788"
y2="197.35958934724894" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="361.49237048043517" x2="287.54962594235406" y1="123.41684480916788"
y2="197.35958934724894" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="617.4923704804352" x2="543.549625942354" y1="123.41684480916788"
y2="197.35958934724894" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<animateTransform attributeName="transform" type="translate" values="0 0;-256 256"
keyTimes="0;1" repeatCount="indefinite" dur="10s"></animateTransform>
</g>
<g>
<line x1="95.73622575770466" x2="50.085335235319484" y1="20.45659654328417"
y2="66.10748706566935" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="95.73622575770466" x2="50.085335235319484" y1="-491.54340345671585"
y2="-445.8925129343306" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="351.7362257577047" x2="306.08533523531946" y1="-491.54340345671585"
y2="-445.8925129343306" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="607.7362257577047" x2="562.0853352353195" y1="-491.54340345671585"
y2="-445.8925129343306" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="95.73622575770466" x2="50.085335235319484" y1="-235.54340345671582"
y2="-189.89251293433065" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="351.7362257577047" x2="306.08533523531946" y1="-235.54340345671582"
y2="-189.89251293433065" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="607.7362257577047" x2="562.0853352353195" y1="-235.54340345671582"
y2="-189.89251293433065" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="95.73622575770466" x2="50.085335235319484" y1="20.45659654328417"
y2="66.10748706566935" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="351.7362257577047" x2="306.08533523531946" y1="20.45659654328417"
y2="66.10748706566935" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="607.7362257577047" x2="562.0853352353195" y1="20.45659654328417"
y2="66.10748706566935" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="263.34308373797757" x2="226.59561736370148" y1="112.42933995479353"
y2="149.17680632906962" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="263.34308373797757" x2="226.59561736370148" y1="-399.57066004520647"
y2="-362.8231936709304" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="519.3430837379776" x2="482.5956173637015" y1="-399.57066004520647"
y2="-362.8231936709304" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="775.3430837379776" x2="738.5956173637014" y1="-399.57066004520647"
y2="-362.8231936709304" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="263.34308373797757" x2="226.59561736370148" y1="-143.57066004520647"
y2="-106.82319367093038" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="519.3430837379776" x2="482.5956173637015" y1="-143.57066004520647"
y2="-106.82319367093038" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="775.3430837379776" x2="738.5956173637014" y1="-143.57066004520647"
y2="-106.82319367093038" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="263.34308373797757" x2="226.59561736370148" y1="112.42933995479353"
y2="149.17680632906962" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="519.3430837379776" x2="482.5956173637015" y1="112.42933995479353"
y2="149.17680632906962" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="775.3430837379776" x2="738.5956173637014" y1="112.42933995479353"
y2="149.17680632906962" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="7.343083737977565" x2="-29.40438263629852" y1="112.42933995479353"
y2="149.17680632906962" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="29.5343611349199" x2="-26.261040392985034" y1="205.16777076655512"
y2="260.96317229446004" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="29.5343611349199" x2="-26.261040392985034" y1="-306.8322292334449"
y2="-251.03682770553996" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="285.5343611349199" x2="229.73895960701498" y1="-306.8322292334449"
y2="-251.03682770553996" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="541.5343611349199" x2="485.738959607015" y1="-306.8322292334449"
y2="-251.03682770553996" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="29.5343611349199" x2="-26.261040392985034" y1="-50.83222923344488"
y2="4.963172294460037" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="285.5343611349199" x2="229.73895960701498" y1="-50.83222923344488"
y2="4.963172294460037" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="541.5343611349199" x2="485.738959607015" y1="-50.83222923344488"
y2="4.963172294460037" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="29.5343611349199" x2="-26.261040392985034" y1="205.16777076655512"
y2="260.96317229446004" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="285.5343611349199" x2="229.73895960701498" y1="205.16777076655512"
y2="260.96317229446004" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="541.5343611349199" x2="485.738959607015" y1="205.16777076655512"
y2="260.96317229446004" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="235.025028503587" x2="173.48946106938683" y1="23.306929884424335"
y2="84.84249731862451" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="235.025028503587" x2="173.48946106938683" y1="-488.69307011557567"
y2="-427.1575026813755" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="491.025028503587" x2="429.48946106938683" y1="-488.69307011557567"
y2="-427.1575026813755" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="747.025028503587" x2="685.4894610693868" y1="-488.69307011557567"
y2="-427.1575026813755" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="235.025028503587" x2="173.48946106938683" y1="-232.69307011557567"
y2="-171.1575026813755" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="491.025028503587" x2="429.48946106938683" y1="-232.69307011557567"
y2="-171.1575026813755" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="747.025028503587" x2="685.4894610693868" y1="-232.69307011557567"
y2="-171.1575026813755" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="235.025028503587" x2="173.48946106938683" y1="23.306929884424335"
y2="84.84249731862451" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="491.025028503587" x2="429.48946106938683" y1="23.306929884424335"
y2="84.84249731862451" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="747.025028503587" x2="685.4894610693868" y1="23.306929884424335"
y2="84.84249731862451" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="225.00990918130768" x2="200.62370409686488" y1="210.1052181599721"
y2="234.4914232444149" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="225.00990918130768" x2="200.62370409686488" y1="-301.8947818400279"
y2="-277.50857675558507" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="481.00990918130765" x2="456.6237040968649" y1="-301.8947818400279"
y2="-277.50857675558507" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="737.0099091813076" x2="712.6237040968649" y1="-301.8947818400279"
y2="-277.50857675558507" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="225.00990918130768" x2="200.62370409686488" y1="-45.89478184002789"
y2="-21.508576755585096" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="481.00990918130765" x2="456.6237040968649" y1="-45.89478184002789"
y2="-21.508576755585096" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="737.0099091813076" x2="712.6237040968649" y1="-45.89478184002789"
y2="-21.508576755585096" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="225.00990918130768" x2="200.62370409686488" y1="210.1052181599721"
y2="234.4914232444149" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="481.00990918130765" x2="456.6237040968649" y1="210.1052181599721"
y2="234.4914232444149" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="737.0099091813076" x2="712.6237040968649" y1="210.1052181599721"
y2="234.4914232444149" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="171.55017713954658" x2="102.05334080042758" y1="78.55895711807653"
y2="148.05579345719553" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="171.55017713954658" x2="102.05334080042758" y1="-433.44104288192347"
y2="-363.94420654280447" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="427.5501771395466" x2="358.0533408004276" y1="-433.44104288192347"
y2="-363.94420654280447" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="683.5501771395466" x2="614.0533408004276" y1="-433.44104288192347"
y2="-363.94420654280447" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="171.55017713954658" x2="102.05334080042758" y1="-177.44104288192347"
y2="-107.94420654280447" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="427.5501771395466" x2="358.0533408004276" y1="-177.44104288192347"
y2="-107.94420654280447" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="683.5501771395466" x2="614.0533408004276" y1="-177.44104288192347"
y2="-107.94420654280447" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="171.55017713954658" x2="102.05334080042758" y1="78.55895711807653"
y2="148.05579345719553" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="427.5501771395466" x2="358.0533408004276" y1="78.55895711807653"
y2="148.05579345719553" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="683.5501771395466" x2="614.0533408004276" y1="78.55895711807653"
y2="148.05579345719553" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="258.4358284744095" x2="228.09906783279462" y1="10.646186924515469"
y2="40.98294756613034" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="258.4358284744095" x2="228.09906783279462" y1="-501.35381307548454"
y2="-471.01705243386965" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="514.4358284744095" x2="484.0990678327946" y1="-501.35381307548454"
y2="-471.01705243386965" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="770.4358284744095" x2="740.0990678327946" y1="-501.35381307548454"
y2="-471.01705243386965" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="258.4358284744095" x2="228.09906783279462" y1="-245.35381307548454"
y2="-215.01705243386965" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="514.4358284744095" x2="484.0990678327946" y1="-245.35381307548454"
y2="-215.01705243386965" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="770.4358284744095" x2="740.0990678327946" y1="-245.35381307548454"
y2="-215.01705243386965" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="258.4358284744095" x2="228.09906783279462" y1="10.646186924515469"
y2="40.98294756613034" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="514.4358284744095" x2="484.0990678327946" y1="10.646186924515469"
y2="40.98294756613034" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="770.4358284744095" x2="740.0990678327946" y1="10.646186924515469"
y2="40.98294756613034" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="2.4358284744095045" x2="-27.900932167205383" y1="10.646186924515469"
y2="40.98294756613034" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="35.41624886616098" x2="-5.966808810922494" y1="10.151780697595989"
y2="51.53483837467946" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="35.41624886616098" x2="-5.966808810922494" y1="-501.848219302404"
y2="-460.46516162532055" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="291.41624886616097" x2="250.0331911890775" y1="-501.848219302404"
y2="-460.46516162532055" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="547.416248866161" x2="506.0331911890775" y1="-501.848219302404"
y2="-460.46516162532055" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="35.41624886616098" x2="-5.966808810922494" y1="-245.848219302404"
y2="-204.46516162532055" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="291.41624886616097" x2="250.0331911890775" y1="-245.848219302404"
y2="-204.46516162532055" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="547.416248866161" x2="506.0331911890775" y1="-245.848219302404"
y2="-204.46516162532055" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="35.41624886616098" x2="-5.966808810922494" y1="10.151780697595989"
y2="51.53483837467946" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="291.41624886616097" x2="250.0331911890775" y1="10.151780697595989"
y2="51.53483837467946" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="547.416248866161" x2="506.0331911890775" y1="10.151780697595989"
y2="51.53483837467946" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="90.76285286976488" x2="72.92514980496989" y1="79.79001478147771"
y2="97.6277178462727" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="90.76285286976488" x2="72.92514980496989" y1="-432.2099852185223"
y2="-414.37228215372727" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="346.76285286976486" x2="328.9251498049699" y1="-432.2099852185223"
y2="-414.37228215372727" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="602.7628528697649" x2="584.9251498049699" y1="-432.2099852185223"
y2="-414.37228215372727" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="90.76285286976488" x2="72.92514980496989" y1="-176.2099852185223"
y2="-158.3722821537273" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="346.76285286976486" x2="328.9251498049699" y1="-176.2099852185223"
y2="-158.3722821537273" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="602.7628528697649" x2="584.9251498049699" y1="-176.2099852185223"
y2="-158.3722821537273" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="90.76285286976488" x2="72.92514980496989" y1="79.79001478147771"
y2="97.6277178462727" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="346.76285286976486" x2="328.9251498049699" y1="79.79001478147771"
y2="97.6277178462727" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="602.7628528697649" x2="584.9251498049699" y1="79.79001478147771"
y2="97.6277178462727" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<animateTransform attributeName="transform" type="translate" values="0 0;-256 256"
keyTimes="0;1" repeatCount="indefinite" dur="5s"></animateTransform>
</g>
<g>
<line x1="93.6896305353637" x2="75.71575147590588" y1="83.83758835275793"
y2="101.81146741221576" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="93.6896305353637" x2="75.71575147590588" y1="-428.16241164724204"
y2="-410.18853258778427" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="349.6896305353637" x2="331.7157514759059" y1="-428.16241164724204"
y2="-410.18853258778427" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="605.6896305353637" x2="587.7157514759059" y1="-428.16241164724204"
y2="-410.18853258778427" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="93.6896305353637" x2="75.71575147590588" y1="-172.16241164724207"
y2="-154.18853258778424" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="349.6896305353637" x2="331.7157514759059" y1="-172.16241164724207"
y2="-154.18853258778424" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="605.6896305353637" x2="587.7157514759059" y1="-172.16241164724207"
y2="-154.18853258778424" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="93.6896305353637" x2="75.71575147590588" y1="83.83758835275793"
y2="101.81146741221576" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="349.6896305353637" x2="331.7157514759059" y1="83.83758835275793"
y2="101.81146741221576" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="605.6896305353637" x2="587.7157514759059" y1="83.83758835275793"
y2="101.81146741221576" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="207.24941141296466" x2="167.48134532138562" y1="234.55973050121918"
y2="274.3277965927982" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="207.24941141296466" x2="167.48134532138562" y1="-277.4402694987808"
y2="-237.67220340720178" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="463.24941141296466" x2="423.4813453213856" y1="-277.4402694987808"
y2="-237.67220340720178" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="719.2494114129647" x2="679.4813453213856" y1="-277.4402694987808"
y2="-237.67220340720178" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="207.24941141296466" x2="167.48134532138562" y1="-21.440269498780822"
y2="18.327796592798222" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="463.24941141296466" x2="423.4813453213856" y1="-21.440269498780822"
y2="18.327796592798222" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="719.2494114129647" x2="679.4813453213856" y1="-21.440269498780822"
y2="18.327796592798222" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="207.24941141296466" x2="167.48134532138562" y1="234.55973050121918"
y2="274.3277965927982" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="463.24941141296466" x2="423.4813453213856" y1="234.55973050121918"
y2="274.3277965927982" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="719.2494114129647" x2="679.4813453213856" y1="234.55973050121918"
y2="274.3277965927982" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="69.19671201083756" x2="20.15599089926107" y1="61.52941038272999"
y2="110.57013149430648" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="69.19671201083756" x2="20.15599089926107" y1="-450.47058961727"
y2="-401.42986850569355" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="325.1967120108376" x2="276.15599089926104" y1="-450.47058961727"
y2="-401.42986850569355" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="581.1967120108376" x2="532.155990899261" y1="-450.47058961727"
y2="-401.42986850569355" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="69.19671201083756" x2="20.15599089926107" y1="-194.47058961727"
y2="-145.42986850569352" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="325.1967120108376" x2="276.15599089926104" y1="-194.47058961727"
y2="-145.42986850569352" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="581.1967120108376" x2="532.155990899261" y1="-194.47058961727"
y2="-145.42986850569352" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="69.19671201083756" x2="20.15599089926107" y1="61.52941038272999"
y2="110.57013149430648" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="325.1967120108376" x2="276.15599089926104" y1="61.52941038272999"
y2="110.57013149430648" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="581.1967120108376" x2="532.155990899261" y1="61.52941038272999"
y2="110.57013149430648" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="153.36870174443493" x2="103.52218176454608" y1="129.93915864820679"
y2="179.78567862809564" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="153.36870174443493" x2="103.52218176454608" y1="-382.0608413517932"
y2="-332.21432137190436" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="409.36870174443493" x2="359.5221817645461" y1="-382.0608413517932"
y2="-332.21432137190436" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="665.3687017444349" x2="615.5221817645461" y1="-382.0608413517932"
y2="-332.21432137190436" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="153.36870174443493" x2="103.52218176454608" y1="-126.06084135179321"
y2="-76.21432137190436" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="409.36870174443493" x2="359.5221817645461" y1="-126.06084135179321"
y2="-76.21432137190436" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="665.3687017444349" x2="615.5221817645461" y1="-126.06084135179321"
y2="-76.21432137190436" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="153.36870174443493" x2="103.52218176454608" y1="129.93915864820679"
y2="179.78567862809564" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="409.36870174443493" x2="359.5221817645461" y1="129.93915864820679"
y2="179.78567862809564" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="665.3687017444349" x2="615.5221817645461" y1="129.93915864820679"
y2="179.78567862809564" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="49.20494471467643" x2="2.7142059537850685" y1="141.75997600855746"
y2="188.25071476944882" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="49.20494471467643" x2="2.7142059537850685" y1="-370.2400239914425"
y2="-323.7492852305512" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="305.20494471467646" x2="258.71420595378504" y1="-370.2400239914425"
y2="-323.7492852305512" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="561.2049447146765" x2="514.714205953785" y1="-370.2400239914425"
y2="-323.7492852305512" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="49.20494471467643" x2="2.7142059537850685" y1="-114.24002399144254"
y2="-67.74928523055118" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="305.20494471467646" x2="258.71420595378504" y1="-114.24002399144254"
y2="-67.74928523055118" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="561.2049447146765" x2="514.714205953785" y1="-114.24002399144254"
y2="-67.74928523055118" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="49.20494471467643" x2="2.7142059537850685" y1="141.75997600855746"
y2="188.25071476944882" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="305.20494471467646" x2="258.71420595378504" y1="141.75997600855746"
y2="188.25071476944882" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="561.2049447146765" x2="514.714205953785" y1="141.75997600855746"
y2="188.25071476944882" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="84.6808460539986" x2="32.68305955000314" y1="-7.711036017440037"
y2="44.28675048655542" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="84.6808460539986" x2="32.68305955000314" y1="-519.71103601744"
y2="-467.71324951344457" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="340.6808460539986" x2="288.6830595500031" y1="-519.71103601744"
y2="-467.71324951344457" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="596.6808460539986" x2="544.6830595500031" y1="-519.71103601744"
y2="-467.71324951344457" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="84.6808460539986" x2="32.68305955000314" y1="-263.71103601744005"
y2="-211.71324951344457" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="340.6808460539986" x2="288.6830595500031" y1="-263.71103601744005"
y2="-211.71324951344457" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="596.6808460539986" x2="544.6830595500031" y1="-263.71103601744005"
y2="-211.71324951344457" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="84.6808460539986" x2="32.68305955000314" y1="-7.711036017440037"
y2="44.28675048655542" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="340.6808460539986" x2="288.6830595500031" y1="-7.711036017440037"
y2="44.28675048655542" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="596.6808460539986" x2="544.6830595500031" y1="-7.711036017440037"
y2="44.28675048655542" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="84.6808460539986" x2="32.68305955000314" y1="248.28896398255995"
y2="300.28675048655543" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="225.38342310559023" x2="185.66602314192056" y1="109.68961591653738"
y2="149.40701588020704" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="225.38342310559023" x2="185.66602314192056" y1="-402.3103840834626"
y2="-362.59298411979296" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="481.3834231055902" x2="441.66602314192056" y1="-402.3103840834626"
y2="-362.59298411979296" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="737.3834231055903" x2="697.6660231419205" y1="-402.3103840834626"
y2="-362.59298411979296" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="225.38342310559023" x2="185.66602314192056" y1="-146.31038408346262"
y2="-106.59298411979296" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="481.3834231055902" x2="441.66602314192056" y1="-146.31038408346262"
y2="-106.59298411979296" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="737.3834231055903" x2="697.6660231419205" y1="-146.31038408346262"
y2="-106.59298411979296" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="225.38342310559023" x2="185.66602314192056" y1="109.68961591653738"
y2="149.40701588020704" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="481.3834231055902" x2="441.66602314192056" y1="109.68961591653738"
y2="149.40701588020704" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="737.3834231055903" x2="697.6660231419205" y1="109.68961591653738"
y2="149.40701588020704" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="172.83662370669697" x2="103.52581079778793" y1="164.45975635392284"
y2="233.77056926283188" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="172.83662370669697" x2="103.52581079778793" y1="-347.54024364607716"
y2="-278.2294307371681" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="428.83662370669697" x2="359.5258107977879" y1="-347.54024364607716"
y2="-278.2294307371681" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="684.836623706697" x2="615.5258107977879" y1="-347.54024364607716"
y2="-278.2294307371681" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="172.83662370669697" x2="103.52581079778793" y1="-91.54024364607716"
y2="-22.229430737168116" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="428.83662370669697" x2="359.5258107977879" y1="-91.54024364607716"
y2="-22.229430737168116" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="684.836623706697" x2="615.5258107977879" y1="-91.54024364607716"
y2="-22.229430737168116" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="172.83662370669697" x2="103.52581079778793" y1="164.45975635392284"
y2="233.77056926283188" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="428.83662370669697" x2="359.5258107977879" y1="164.45975635392284"
y2="233.77056926283188" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="684.836623706697" x2="615.5258107977879" y1="164.45975635392284"
y2="233.77056926283188" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="254.85435949520382" x2="240.10841684705935" y1="-1.209429949430282"
y2="13.536512698714214" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="254.85435949520382" x2="240.10841684705935" y1="-513.2094299494303"
y2="-498.4634873012858" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="510.8543594952038" x2="496.10841684705935" y1="-513.2094299494303"
y2="-498.4634873012858" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="766.8543594952039" x2="752.1084168470593" y1="-513.2094299494303"
y2="-498.4634873012858" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="254.85435949520382" x2="240.10841684705935" y1="-257.2094299494303"
y2="-242.4634873012858" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="510.8543594952038" x2="496.10841684705935" y1="-257.2094299494303"
y2="-242.4634873012858" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="766.8543594952039" x2="752.1084168470593" y1="-257.2094299494303"
y2="-242.4634873012858" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="254.85435949520382" x2="240.10841684705935" y1="-1.209429949430282"
y2="13.536512698714214" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="510.8543594952038" x2="496.10841684705935" y1="-1.209429949430282"
y2="13.536512698714214" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="766.8543594952039" x2="752.1084168470593" y1="-1.209429949430282"
y2="13.536512698714214" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="254.85435949520382" x2="240.10841684705935" y1="254.79057005056973"
y2="269.5365126987142" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<animateTransform attributeName="transform" type="translate" values="0 0;-256 256"
keyTimes="0;1" repeatCount="indefinite" dur="10.3333333333333335s"></animateTransform>
</g>
</g>
</pattern>
</defs>
<rect x="0" y="0" width="1084" height="322" fill="url(#pid-0.7735807359934106)"></rect>
</svg>

View file

@ -0,0 +1,827 @@
<svg id="canvas" height="100%" xmlns="http://www.w3.org/2000/svg" version="1.1"
xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.dev/svgjs"
viewBox="0 0 600 600">
<rect width="600" height="600" fill="transparent"></rect>
<mask id="mask" mask-type="alpha" maskUnits="userSpaceOnUse">
<rect transform="translate(0, 0)" width="600" height="600" fill="white"></rect>
</mask>
<svg>
<path transform="translate(0, 0) translate(30,30) rotate(270) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2" d="M0 0h60v60h-60z"></path>
<path transform="translate(0, 0) translate(30,30) rotate(270) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2"
d="M30 30c0 16.569 13.432 30 30 30v-60c-16.568 0-30 13.432-30 30z"></path>
<path transform="translate(0, 0) translate(30,30) rotate(270) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2"
d="M30 30c0-16.57-13.431-30-30-30v60c16.569 0 30-13.432 30-30z"></path>
</svg>
<svg>
<path transform="translate(0, 60) translate(30,30) rotate(270) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2" d="M0 0h60v60h-60z"></path>
<path transform="translate(0, 60) translate(30,30) rotate(270) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2"
d="M30 30c0 16.569 13.432 30 30 30v-60c-16.568 0-30 13.432-30 30z"></path>
<path transform="translate(0, 60) translate(30,30) rotate(270) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2"
d="M30 30c0-16.57-13.431-30-30-30v60c16.569 0 30-13.432 30-30z"></path>
</svg>
<svg>
<path transform="translate(0, 120)" fill="none" stroke="#48cae4" stroke-width="2"
d="M0 0h60v60h-60z"></path>
<circle transform="translate(0, 120)" cx="30" cy="30" r="30" fill="none" stroke="#48cae4"
stroke-width="2"></circle>
</svg>
<svg>
<path transform="translate(0, 180) translate(30,30) rotate(0) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2" d="M0 0h60v60h-60z"></path>
<path transform="translate(0, 180) translate(30,30) rotate(0) translate(-30,-30)"
fill="#90e0ef" stroke="#48cae4" stroke-width="2"
d="M0 30c0 16.569 13.432 30 30 30v-60c-16.568 0-30 13.432-30 30z"></path>
</svg>
<svg>
<path transform="translate(0, 240) translate(30,30) rotate(90) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2" d="M0 0h60v60h-60z"></path>
<path transform="translate(0, 240) translate(30,30) rotate(90) translate(-30,-30)"
fill="#0096c7" stroke="#48cae4" stroke-width="2"
d="M0 30c0 16.569 13.432 30 30 30v-60c-16.568 0-30 13.432-30 30z"></path>
</svg>
<svg>
<path transform="translate(0, 300) translate(30,30) rotate(270) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2" d="M0 0h60v60h-60z"></path>
<path transform="translate(0, 300) translate(30,30) rotate(270) translate(-30,-30)"
d="M0 30C0 48.05 15.3348 60 30 60V0C15.3348 0 0 14.9129 0 30Z" stroke="#48cae4"
stroke-width="2" fill="#023e8a"></path>
<path transform="translate(0, 300) translate(30,30) rotate(270) translate(-30,-30)"
d="M60 30C60 14.9129 48.4719 0 30 0L30 60C48.4719 60 60 48.05 60 30Z" stroke="#48cae4"
stroke-width="2" fill="none"></path>
</svg>
<svg>
<path transform="translate(0, 360) translate(30,30) rotate(270) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2" d="M0 0h60v60h-60z"></path>
<path transform="translate(0, 360) translate(30,30) rotate(270) translate(-30,-30)"
fill="#0096c7" stroke="#48cae4" stroke-width="2"
d="M0 30c0 16.569 13.432 30 30 30v-60c-16.568 0-30 13.432-30 30z"></path>
</svg>
<svg>
<path transform="translate(0, 420) translate(30,30) rotate(180) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2" d="M0 0h60v60h-60z"></path>
<path transform="translate(0, 420) translate(30,30) rotate(180) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2"
d="M30 30c0 16.569 13.432 30 30 30v-60c-16.568 0-30 13.432-30 30z"></path>
<path transform="translate(0, 420) translate(30,30) rotate(180) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2"
d="M30 30c0-16.57-13.431-30-30-30v60c16.569 0 30-13.432 30-30z"></path>
</svg>
<svg>
<path transform="translate(0, 480)" fill="none" stroke="#48cae4" stroke-width="2"
d="M0 0h60v60h-60z"></path>
<circle transform="translate(0, 480)" cx="30" cy="30" r="30" fill="none" stroke="#48cae4"
stroke-width="2"></circle>
</svg>
<svg>
<path transform="translate(0, 540)" fill="none" stroke="#48cae4" stroke-width="2"
d="M0 0h60v60h-60z"></path>
</svg>
<svg>
<path transform="translate(60, 0) translate(30,30) rotate(270) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2" d="M0 0h60v60h-60z"></path>
<path transform="translate(60, 0) translate(30,30) rotate(270) translate(-30,-30)"
d="M0 30C0 48.05 15.3348 60 30 60V0C15.3348 0 0 14.9129 0 30Z" stroke="#48cae4"
stroke-width="2" fill="#00b4d8"></path>
<path transform="translate(60, 0) translate(30,30) rotate(270) translate(-30,-30)"
d="M60 30C60 14.9129 48.4719 0 30 0L30 60C48.4719 60 60 48.05 60 30Z" stroke="#48cae4"
stroke-width="2" fill="none"></path>
</svg>
<svg>
<path transform="translate(60, 60)" fill="none" stroke="#48cae4" stroke-width="2"
d="M0 0h60v60h-60z"></path>
</svg>
<svg>
<rect transform="translate(60, 120) translate(30,30) rotate(90) translate(-30,-30)"
fill="none" x="0" y="0" width="60" height="60" stroke="#48cae4" stroke-width="2"></rect>
<path transform="translate(60, 120) translate(30,30) rotate(90) translate(-30,-30)"
fill="none" d="M0 0L60 60" stroke="#48cae4" stroke-width="2"></path>
</svg>
<svg>
<path transform="translate(60, 180) translate(30,30) rotate(0) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2" d="M0 0h60v60h-60z"></path>
<path transform="translate(60, 180) translate(30,30) rotate(0) translate(-30,-30)"
fill="#90e0ef" stroke="#48cae4" stroke-width="2"
d="M0 30c0 16.569 13.432 30 30 30v-60c-16.568 0-30 13.432-30 30z"></path>
</svg>
<svg>
<path transform="translate(60, 240)" fill="none" stroke="#48cae4" stroke-width="2"
d="M0 0h60v60h-60z"></path>
</svg>
<svg>
<path transform="translate(60, 300)" fill="none" stroke="#48cae4" stroke-width="2"
d="M0 0h60v60h-60z"></path>
<circle transform="translate(60, 300)" cx="30" cy="30" r="30" fill="#48cae4"
stroke="#48cae4" stroke-width="2"></circle>
</svg>
<svg>
<path transform="translate(60, 360)" fill="none" stroke="#48cae4" stroke-width="2"
d="M0 0h60v60h-60z"></path>
</svg>
<svg>
<path transform="translate(60, 420)" fill="none" stroke="#48cae4" stroke-width="2"
d="M0 0h60v60h-60z"></path>
<circle transform="translate(60, 420)" cx="30" cy="30" r="30" fill="#48cae4"
stroke="#48cae4" stroke-width="2"></circle>
</svg>
<svg>
<path transform="translate(60, 480)" fill="none" stroke="#48cae4" stroke-width="2"
d="M0 0h60v60h-60z"></path>
<circle transform="translate(60, 480)" cx="30" cy="30" r="30" fill="none" stroke="#48cae4"
stroke-width="2"></circle>
</svg>
<svg>
<path transform="translate(60, 540)" fill="none" stroke="#48cae4" stroke-width="2"
d="M0 0h60v60h-60z"></path>
<circle transform="translate(60, 540)" cx="30" cy="30" r="30" fill="#48cae4"
stroke="#48cae4" stroke-width="2"></circle>
</svg>
<svg>
<path transform="translate(120, 0)" fill="none" stroke="#48cae4" stroke-width="2"
d="M0 0h60v60h-60z"></path>
<circle transform="translate(120, 0)" cx="30" cy="30" r="30" fill="#023e8a" stroke="#48cae4"
stroke-width="2"></circle>
</svg>
<svg>
<path transform="translate(120, 60) translate(30,30) rotate(180) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2" d="M0 0h60v60h-60z"></path>
<path transform="translate(120, 60) translate(30,30) rotate(180) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2"
d="M30 30c0 16.569 13.432 30 30 30v-60c-16.568 0-30 13.432-30 30z"></path>
<path transform="translate(120, 60) translate(30,30) rotate(180) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2"
d="M30 30c0-16.57-13.431-30-30-30v60c16.569 0 30-13.432 30-30z"></path>
</svg>
<svg>
<rect transform="translate(120, 120) translate(30,30) rotate(90) translate(-30,-30)"
fill="none" x="0" y="0" width="60" height="60" stroke="#48cae4" stroke-width="2"></rect>
<path transform="translate(120, 120) translate(30,30) rotate(90) translate(-30,-30)"
fill="none" d="M0 0L60 60" stroke="#48cae4" stroke-width="2"></path>
</svg>
<svg>
<path transform="translate(120, 180) translate(30,30) rotate(90) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2" d="M0 0h60v60h-60z"></path>
<path transform="translate(120, 180) translate(30,30) rotate(90) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2"
d="M30 30c0 16.569 13.432 30 30 30v-60c-16.568 0-30 13.432-30 30z"></path>
<path transform="translate(120, 180) translate(30,30) rotate(90) translate(-30,-30)"
fill="#90e0ef" stroke="#48cae4" stroke-width="2"
d="M30 30c0-16.57-13.431-30-30-30v60c16.569 0 30-13.432 30-30z"></path>
</svg>
<svg>
<path transform="translate(120, 240) translate(30,30) rotate(180) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2" d="M0 0h60v60h-60z"></path>
<path transform="translate(120, 240) translate(30,30) rotate(180) translate(-30,-30)"
d="M0 30C0 48.05 15.3348 60 30 60V0C15.3348 0 0 14.9129 0 30Z" stroke="#48cae4"
stroke-width="2" fill="#ade8f4"></path>
<path transform="translate(120, 240) translate(30,30) rotate(180) translate(-30,-30)"
d="M60 30C60 14.9129 48.4719 0 30 0L30 60C48.4719 60 60 48.05 60 30Z" stroke="#48cae4"
stroke-width="2" fill="none"></path>
</svg>
<svg>
<path transform="translate(120, 300) translate(30,30) rotate(270) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2" d="M0 0h60v60h-60z"></path>
<path transform="translate(120, 300) translate(30,30) rotate(270) translate(-30,-30)"
d="M0 30C0 48.05 15.3348 60 30 60V0C15.3348 0 0 14.9129 0 30Z" stroke="#48cae4"
stroke-width="2" fill="none"></path>
<path transform="translate(120, 300) translate(30,30) rotate(270) translate(-30,-30)"
d="M60 30C60 14.9129 48.4719 0 30 0L30 60C48.4719 60 60 48.05 60 30Z" stroke="#48cae4"
stroke-width="2" fill="none"></path>
</svg>
<svg>
<path transform="translate(120, 360) translate(30,30) rotate(90) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2" d="M0 0h60v60h-60z"></path>
<path transform="translate(120, 360) translate(30,30) rotate(90) translate(-30,-30)"
fill="#48cae4" stroke="#48cae4" stroke-width="2" d="M30 0h30v60h-30z"></path>
<path transform="translate(120, 360) translate(30,30) rotate(90) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2"
d="M0 30c0 16.569 13.432 30 30 30v-60c-16.568 0-30 13.432-30 30z"></path>
</svg>
<svg>
<path transform="translate(120, 420)" fill="none" stroke="#48cae4" stroke-width="2"
d="M0 0h60v60h-60z"></path>
<circle transform="translate(120, 420)" cx="30" cy="30" r="30" fill="#90e0ef"
stroke="#48cae4" stroke-width="2"></circle>
</svg>
<svg>
<path transform="translate(120, 480) translate(30,30) rotate(180) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2" d="M0 0h60v60h-60z"></path>
<path transform="translate(120, 480) translate(30,30) rotate(180) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2"
d="M30 30c0 16.569 13.432 30 30 30v-60c-16.568 0-30 13.432-30 30z"></path>
<path transform="translate(120, 480) translate(30,30) rotate(180) translate(-30,-30)"
fill="#ade8f4" stroke="#48cae4" stroke-width="2"
d="M30 30c0-16.57-13.431-30-30-30v60c16.569 0 30-13.432 30-30z"></path>
</svg>
<svg>
<path transform="translate(120, 540) translate(30,30) rotate(0) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2" d="M0 0h60v60h-60z"></path>
<path transform="translate(120, 540) translate(30,30) rotate(0) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2"
d="M30 30c0 16.569 13.432 30 30 30v-60c-16.568 0-30 13.432-30 30z"></path>
<path transform="translate(120, 540) translate(30,30) rotate(0) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2"
d="M30 30c0-16.57-13.431-30-30-30v60c16.569 0 30-13.432 30-30z"></path>
</svg>
<svg>
<path transform="translate(180, 0) translate(30,30) rotate(180) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2" d="M0 0h60v60h-60z"></path>
<path transform="translate(180, 0) translate(30,30) rotate(180) translate(-30,-30)"
fill="#caf0f8" stroke="#48cae4" stroke-width="2"
d="M0 30c0 16.569 13.432 30 30 30v-60c-16.568 0-30 13.432-30 30z"></path>
</svg>
<svg>
<path transform="translate(180, 60) translate(30,30) rotate(0) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2" d="M0 0h60v60h-60z"></path>
<path transform="translate(180, 60) translate(30,30) rotate(0) translate(-30,-30)"
fill="#023e8a" stroke="#48cae4" stroke-width="2"
d="M0 30c0 16.569 13.432 30 30 30v-60c-16.568 0-30 13.432-30 30z"></path>
</svg>
<svg>
<path transform="translate(180, 120) translate(30,30) rotate(270) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2" d="M0 0h60v60h-60z"></path>
<path transform="translate(180, 120) translate(30,30) rotate(270) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2"
d="M30 30c0 16.569 13.432 30 30 30v-60c-16.568 0-30 13.432-30 30z"></path>
<path transform="translate(180, 120) translate(30,30) rotate(270) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2"
d="M30 30c0-16.57-13.431-30-30-30v60c16.569 0 30-13.432 30-30z"></path>
</svg>
<svg>
<path transform="translate(180, 180) translate(30,30) rotate(90) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2" d="M0 0h60v60h-60z"></path>
<path transform="translate(180, 180) translate(30,30) rotate(90) translate(-30,-30)"
fill="#ade8f4" stroke="#48cae4" stroke-width="2" d="M30 0h30v60h-30z"></path>
<path transform="translate(180, 180) translate(30,30) rotate(90) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2"
d="M0 30c0 16.569 13.432 30 30 30v-60c-16.568 0-30 13.432-30 30z"></path>
</svg>
<svg>
<path transform="translate(180, 240) translate(30,30) rotate(90) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2" d="M0 0h60v60h-60z"></path>
<path transform="translate(180, 240) translate(30,30) rotate(90) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2"
d="M30 30c0 16.569 13.432 30 30 30v-60c-16.568 0-30 13.432-30 30z"></path>
<path transform="translate(180, 240) translate(30,30) rotate(90) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2"
d="M30 30c0-16.57-13.431-30-30-30v60c16.569 0 30-13.432 30-30z"></path>
</svg>
<svg>
<path transform="translate(180, 300) translate(30,30) rotate(0) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2" d="M0 0h60v60h-60z"></path>
<path transform="translate(180, 300) translate(30,30) rotate(0) translate(-30,-30)"
d="M0 30C0 48.05 15.3348 60 30 60V0C15.3348 0 0 14.9129 0 30Z" stroke="#48cae4"
stroke-width="2" fill="none"></path>
<path transform="translate(180, 300) translate(30,30) rotate(0) translate(-30,-30)"
d="M60 30C60 14.9129 48.4719 0 30 0L30 60C48.4719 60 60 48.05 60 30Z" stroke="#48cae4"
stroke-width="2" fill="none"></path>
</svg>
<svg>
<path transform="translate(180, 360)" fill="none" stroke="#48cae4" stroke-width="2"
d="M0 0h60v60h-60z"></path>
</svg>
<svg>
<rect transform="translate(180, 420) translate(30,30) rotate(90) translate(-30,-30)"
fill="none" x="0" y="0" width="60" height="60" stroke="#48cae4" stroke-width="2"></rect>
<path transform="translate(180, 420) translate(30,30) rotate(90) translate(-30,-30)"
fill="none" d="M0 0L60 60" stroke="#48cae4" stroke-width="2"></path>
</svg>
<svg>
<path transform="translate(180, 480)" fill="none" stroke="#48cae4" stroke-width="2"
d="M0 0h60v60h-60z"></path>
</svg>
<svg>
<path transform="translate(180, 540) translate(30,30) rotate(180) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2" d="M0 0h60v60h-60z"></path>
<path transform="translate(180, 540) translate(30,30) rotate(180) translate(-30,-30)"
d="M0 30C0 48.05 15.3348 60 30 60V0C15.3348 0 0 14.9129 0 30Z" stroke="#48cae4"
stroke-width="2" fill="#0077b6"></path>
<path transform="translate(180, 540) translate(30,30) rotate(180) translate(-30,-30)"
d="M60 30C60 14.9129 48.4719 0 30 0L30 60C48.4719 60 60 48.05 60 30Z" stroke="#48cae4"
stroke-width="2" fill="none"></path>
</svg>
<svg>
<rect transform="translate(240, 0) translate(30,30) rotate(90) translate(-30,-30)"
fill="none" x="0" y="0" width="60" height="60" stroke="#48cae4" stroke-width="2"></rect>
<path transform="translate(240, 0) translate(30,30) rotate(90) translate(-30,-30)"
fill="none" d="M0 0L60 60" stroke="#48cae4" stroke-width="2"></path>
</svg>
<svg>
<path transform="translate(240, 60)" fill="none" stroke="#48cae4" stroke-width="2"
d="M0 0h60v60h-60z"></path>
<circle transform="translate(240, 60)" cx="30" cy="30" r="30" fill="#0096c7"
stroke="#48cae4" stroke-width="2"></circle>
</svg>
<svg>
<path transform="translate(240, 120) translate(30,30) rotate(90) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2" d="M0 0h60v60h-60z"></path>
<path transform="translate(240, 120) translate(30,30) rotate(90) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2"
d="M30 30c0 16.569 13.432 30 30 30v-60c-16.568 0-30 13.432-30 30z"></path>
<path transform="translate(240, 120) translate(30,30) rotate(90) translate(-30,-30)"
fill="#90e0ef" stroke="#48cae4" stroke-width="2"
d="M30 30c0-16.57-13.431-30-30-30v60c16.569 0 30-13.432 30-30z"></path>
</svg>
<svg>
<path transform="translate(240, 180) translate(30,30) rotate(270) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2" d="M0 0h60v60h-60z"></path>
<path transform="translate(240, 180) translate(30,30) rotate(270) translate(-30,-30)"
d="M0 30C0 48.05 15.3348 60 30 60V0C15.3348 0 0 14.9129 0 30Z" stroke="#48cae4"
stroke-width="2" fill="#48cae4"></path>
<path transform="translate(240, 180) translate(30,30) rotate(270) translate(-30,-30)"
d="M60 30C60 14.9129 48.4719 0 30 0L30 60C48.4719 60 60 48.05 60 30Z" stroke="#48cae4"
stroke-width="2" fill="none"></path>
</svg>
<svg>
<path transform="translate(240, 240) translate(30,30) rotate(90) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2" d="M0 0h60v60h-60z"></path>
<path transform="translate(240, 240) translate(30,30) rotate(90) translate(-30,-30)"
fill="#03045e" stroke="#48cae4" stroke-width="2" d="M30 0h30v60h-30z"></path>
<path transform="translate(240, 240) translate(30,30) rotate(90) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2"
d="M0 30c0 16.569 13.432 30 30 30v-60c-16.568 0-30 13.432-30 30z"></path>
</svg>
<svg>
<path transform="translate(240, 300) translate(30,30) rotate(90) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2" d="M0 0h60v60h-60z"></path>
<path transform="translate(240, 300) translate(30,30) rotate(90) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2"
d="M30 30c0 16.569 13.432 30 30 30v-60c-16.568 0-30 13.432-30 30z"></path>
<path transform="translate(240, 300) translate(30,30) rotate(90) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2"
d="M30 30c0-16.57-13.431-30-30-30v60c16.569 0 30-13.432 30-30z"></path>
</svg>
<svg>
<path transform="translate(240, 360) translate(30,30) rotate(180) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2" d="M0 0h60v60h-60z"></path>
<path transform="translate(240, 360) translate(30,30) rotate(180) translate(-30,-30)"
d="M0 30C0 48.05 15.3348 60 30 60V0C15.3348 0 0 14.9129 0 30Z" stroke="#48cae4"
stroke-width="2" fill="#00b4d8"></path>
<path transform="translate(240, 360) translate(30,30) rotate(180) translate(-30,-30)"
d="M60 30C60 14.9129 48.4719 0 30 0L30 60C48.4719 60 60 48.05 60 30Z" stroke="#48cae4"
stroke-width="2" fill="none"></path>
</svg>
<svg>
<path transform="translate(240, 420) translate(30,30) rotate(270) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2" d="M0 0h60v60h-60z"></path>
<path transform="translate(240, 420) translate(30,30) rotate(270) translate(-30,-30)"
fill="#90e0ef" stroke="#48cae4" stroke-width="2" d="M30 0h30v60h-30z"></path>
<path transform="translate(240, 420) translate(30,30) rotate(270) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2"
d="M0 30c0 16.569 13.432 30 30 30v-60c-16.568 0-30 13.432-30 30z"></path>
</svg>
<svg>
<path transform="translate(240, 480)" fill="none" stroke="#48cae4" stroke-width="2"
d="M0 0h60v60h-60z"></path>
<circle transform="translate(240, 480)" cx="30" cy="30" r="30" fill="#48cae4"
stroke="#48cae4" stroke-width="2"></circle>
</svg>
<svg>
<path transform="translate(240, 540) translate(30,30) rotate(180) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2" d="M0 0h60v60h-60z"></path>
<path transform="translate(240, 540) translate(30,30) rotate(180) translate(-30,-30)"
d="M0 30C0 48.05 15.3348 60 30 60V0C15.3348 0 0 14.9129 0 30Z" stroke="#48cae4"
stroke-width="2" fill="#00b4d8"></path>
<path transform="translate(240, 540) translate(30,30) rotate(180) translate(-30,-30)"
d="M60 30C60 14.9129 48.4719 0 30 0L30 60C48.4719 60 60 48.05 60 30Z" stroke="#48cae4"
stroke-width="2" fill="none"></path>
</svg>
<svg>
<path transform="translate(300, 0) translate(30,30) rotate(0) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2" d="M0 0h60v60h-60z"></path>
<path transform="translate(300, 0) translate(30,30) rotate(0) translate(-30,-30)"
d="M0 30C0 48.05 15.3348 60 30 60V0C15.3348 0 0 14.9129 0 30Z" stroke="#48cae4"
stroke-width="2" fill="#00b4d8"></path>
<path transform="translate(300, 0) translate(30,30) rotate(0) translate(-30,-30)"
d="M60 30C60 14.9129 48.4719 0 30 0L30 60C48.4719 60 60 48.05 60 30Z" stroke="#48cae4"
stroke-width="2" fill="none"></path>
</svg>
<svg>
<path transform="translate(300, 60)" fill="none" stroke="#48cae4" stroke-width="2"
d="M0 0h60v60h-60z"></path>
<circle transform="translate(300, 60)" cx="30" cy="30" r="30" fill="none" stroke="#48cae4"
stroke-width="2"></circle>
</svg>
<svg>
<path transform="translate(300, 120) translate(30,30) rotate(90) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2" d="M0 0h60v60h-60z"></path>
<path transform="translate(300, 120) translate(30,30) rotate(90) translate(-30,-30)"
d="M0 30C0 48.05 15.3348 60 30 60V0C15.3348 0 0 14.9129 0 30Z" stroke="#48cae4"
stroke-width="2" fill="#023e8a"></path>
<path transform="translate(300, 120) translate(30,30) rotate(90) translate(-30,-30)"
d="M60 30C60 14.9129 48.4719 0 30 0L30 60C48.4719 60 60 48.05 60 30Z" stroke="#48cae4"
stroke-width="2" fill="none"></path>
</svg>
<svg>
<path transform="translate(300, 180) translate(30,30) rotate(90) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2" d="M0 0h60v60h-60z"></path>
<path transform="translate(300, 180) translate(30,30) rotate(90) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2"
d="M30 30c0 16.569 13.432 30 30 30v-60c-16.568 0-30 13.432-30 30z"></path>
<path transform="translate(300, 180) translate(30,30) rotate(90) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2"
d="M30 30c0-16.57-13.431-30-30-30v60c16.569 0 30-13.432 30-30z"></path>
</svg>
<svg>
<path transform="translate(300, 240) translate(30,30) rotate(270) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2" d="M0 0h60v60h-60z"></path>
<path transform="translate(300, 240) translate(30,30) rotate(270) translate(-30,-30)"
d="M0 30C0 48.05 15.3348 60 30 60V0C15.3348 0 0 14.9129 0 30Z" stroke="#48cae4"
stroke-width="2" fill="#0077b6"></path>
<path transform="translate(300, 240) translate(30,30) rotate(270) translate(-30,-30)"
d="M60 30C60 14.9129 48.4719 0 30 0L30 60C48.4719 60 60 48.05 60 30Z" stroke="#48cae4"
stroke-width="2" fill="none"></path>
</svg>
<svg>
<path transform="translate(300, 300) translate(30,30) rotate(90) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2" d="M0 0h60v60h-60z"></path>
<path transform="translate(300, 300) translate(30,30) rotate(90) translate(-30,-30)"
d="M0 30C0 48.05 15.3348 60 30 60V0C15.3348 0 0 14.9129 0 30Z" stroke="#48cae4"
stroke-width="2" fill="#48cae4"></path>
<path transform="translate(300, 300) translate(30,30) rotate(90) translate(-30,-30)"
d="M60 30C60 14.9129 48.4719 0 30 0L30 60C48.4719 60 60 48.05 60 30Z" stroke="#48cae4"
stroke-width="2" fill="none"></path>
</svg>
<svg>
<path transform="translate(300, 360) translate(30,30) rotate(270) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2" d="M0 0h60v60h-60z"></path>
<path transform="translate(300, 360) translate(30,30) rotate(270) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2"
d="M30 30c0 16.569 13.432 30 30 30v-60c-16.568 0-30 13.432-30 30z"></path>
<path transform="translate(300, 360) translate(30,30) rotate(270) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2"
d="M30 30c0-16.57-13.431-30-30-30v60c16.569 0 30-13.432 30-30z"></path>
</svg>
<svg>
<path transform="translate(300, 420) translate(30,30) rotate(270) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2" d="M0 0h60v60h-60z"></path>
<path transform="translate(300, 420) translate(30,30) rotate(270) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2"
d="M30 30c0 16.569 13.432 30 30 30v-60c-16.568 0-30 13.432-30 30z"></path>
<path transform="translate(300, 420) translate(30,30) rotate(270) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2"
d="M30 30c0-16.57-13.431-30-30-30v60c16.569 0 30-13.432 30-30z"></path>
</svg>
<svg>
<path transform="translate(300, 480) translate(30,30) rotate(90) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2" d="M0 0h60v60h-60z"></path>
<path transform="translate(300, 480) translate(30,30) rotate(90) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2"
d="M30 30c0 16.569 13.432 30 30 30v-60c-16.568 0-30 13.432-30 30z"></path>
<path transform="translate(300, 480) translate(30,30) rotate(90) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2"
d="M30 30c0-16.57-13.431-30-30-30v60c16.569 0 30-13.432 30-30z"></path>
</svg>
<svg>
<path transform="translate(300, 540) translate(30,30) rotate(0) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2" d="M0 0h60v60h-60z"></path>
<path transform="translate(300, 540) translate(30,30) rotate(0) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2"
d="M30 30c0 16.569 13.432 30 30 30v-60c-16.568 0-30 13.432-30 30z"></path>
<path transform="translate(300, 540) translate(30,30) rotate(0) translate(-30,-30)"
fill="#0096c7" stroke="#48cae4" stroke-width="2"
d="M30 30c0-16.57-13.431-30-30-30v60c16.569 0 30-13.432 30-30z"></path>
</svg>
<svg>
<path transform="translate(360, 0) translate(30,30) rotate(270) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2" d="M0 0h60v60h-60z"></path>
<path transform="translate(360, 0) translate(30,30) rotate(270) translate(-30,-30)"
fill="#03045e" stroke="#48cae4" stroke-width="2" d="M30 0h30v60h-30z"></path>
<path transform="translate(360, 0) translate(30,30) rotate(270) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2"
d="M0 30c0 16.569 13.432 30 30 30v-60c-16.568 0-30 13.432-30 30z"></path>
</svg>
<svg>
<path transform="translate(360, 60) translate(30,30) rotate(0) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2" d="M0 0h60v60h-60z"></path>
<path transform="translate(360, 60) translate(30,30) rotate(0) translate(-30,-30)"
fill="#48cae4" stroke="#48cae4" stroke-width="2"
d="M0 30c0 16.569 13.432 30 30 30v-60c-16.568 0-30 13.432-30 30z"></path>
</svg>
<svg>
<path transform="translate(360, 120)" fill="none" stroke="#48cae4" stroke-width="2"
d="M0 0h60v60h-60z"></path>
<circle transform="translate(360, 120)" cx="30" cy="30" r="30" fill="none" stroke="#48cae4"
stroke-width="2"></circle>
</svg>
<svg>
<path transform="translate(360, 180) translate(30,30) rotate(180) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2" d="M0 0h60v60h-60z"></path>
<path transform="translate(360, 180) translate(30,30) rotate(180) translate(-30,-30)"
fill="#caf0f8" stroke="#48cae4" stroke-width="2" d="M30 0h30v60h-30z"></path>
<path transform="translate(360, 180) translate(30,30) rotate(180) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2"
d="M0 30c0 16.569 13.432 30 30 30v-60c-16.568 0-30 13.432-30 30z"></path>
</svg>
<svg>
<path transform="translate(360, 240) translate(30,30) rotate(90) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2" d="M0 0h60v60h-60z"></path>
<path transform="translate(360, 240) translate(30,30) rotate(90) translate(-30,-30)"
fill="#ade8f4" stroke="#48cae4" stroke-width="2"
d="M0 30c0 16.569 13.432 30 30 30v-60c-16.568 0-30 13.432-30 30z"></path>
</svg>
<svg>
<path transform="translate(360, 300) translate(30,30) rotate(0) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2" d="M0 0h60v60h-60z"></path>
<path transform="translate(360, 300) translate(30,30) rotate(0) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2"
d="M30 30c0 16.569 13.432 30 30 30v-60c-16.568 0-30 13.432-30 30z"></path>
<path transform="translate(360, 300) translate(30,30) rotate(0) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2"
d="M30 30c0-16.57-13.431-30-30-30v60c16.569 0 30-13.432 30-30z"></path>
</svg>
<svg>
<path transform="translate(360, 360) translate(30,30) rotate(180) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2" d="M0 0h60v60h-60z"></path>
<path transform="translate(360, 360) translate(30,30) rotate(180) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2"
d="M30 30c0 16.569 13.432 30 30 30v-60c-16.568 0-30 13.432-30 30z"></path>
<path transform="translate(360, 360) translate(30,30) rotate(180) translate(-30,-30)"
fill="#0096c7" stroke="#48cae4" stroke-width="2"
d="M30 30c0-16.57-13.431-30-30-30v60c16.569 0 30-13.432 30-30z"></path>
</svg>
<svg>
<path transform="translate(360, 420)" fill="none" stroke="#48cae4" stroke-width="2"
d="M0 0h60v60h-60z"></path>
<circle transform="translate(360, 420)" cx="30" cy="30" r="30" fill="none" stroke="#48cae4"
stroke-width="2"></circle>
</svg>
<svg>
<path transform="translate(360, 480) translate(30,30) rotate(90) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2" d="M0 0h60v60h-60z"></path>
<path transform="translate(360, 480) translate(30,30) rotate(90) translate(-30,-30)"
fill="#0096c7" stroke="#48cae4" stroke-width="2"
d="M0 30c0 16.569 13.432 30 30 30v-60c-16.568 0-30 13.432-30 30z"></path>
</svg>
<svg>
<path transform="translate(360, 540) translate(30,30) rotate(180) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2" d="M0 0h60v60h-60z"></path>
<path transform="translate(360, 540) translate(30,30) rotate(180) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2"
d="M30 30c0 16.569 13.432 30 30 30v-60c-16.568 0-30 13.432-30 30z"></path>
<path transform="translate(360, 540) translate(30,30) rotate(180) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2"
d="M30 30c0-16.57-13.431-30-30-30v60c16.569 0 30-13.432 30-30z"></path>
</svg>
<svg>
<path transform="translate(420, 0) translate(30,30) rotate(0) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2" d="M0 0h60v60h-60z"></path>
<path transform="translate(420, 0) translate(30,30) rotate(0) translate(-30,-30)"
d="M0 30C0 48.05 15.3348 60 30 60V0C15.3348 0 0 14.9129 0 30Z" stroke="#48cae4"
stroke-width="2" fill="#00b4d8"></path>
<path transform="translate(420, 0) translate(30,30) rotate(0) translate(-30,-30)"
d="M60 30C60 14.9129 48.4719 0 30 0L30 60C48.4719 60 60 48.05 60 30Z" stroke="#48cae4"
stroke-width="2" fill="none"></path>
</svg>
<svg>
<path transform="translate(420, 60) translate(30,30) rotate(180) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2" d="M0 0h60v60h-60z"></path>
<path transform="translate(420, 60) translate(30,30) rotate(180) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2"
d="M30 30c0 16.569 13.432 30 30 30v-60c-16.568 0-30 13.432-30 30z"></path>
<path transform="translate(420, 60) translate(30,30) rotate(180) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2"
d="M30 30c0-16.57-13.431-30-30-30v60c16.569 0 30-13.432 30-30z"></path>
</svg>
<svg>
<path transform="translate(420, 120)" fill="none" stroke="#48cae4" stroke-width="2"
d="M0 0h60v60h-60z"></path>
<circle transform="translate(420, 120)" cx="30" cy="30" r="30" fill="none" stroke="#48cae4"
stroke-width="2"></circle>
</svg>
<svg>
<path transform="translate(420, 180) translate(30,30) rotate(90) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2" d="M0 0h60v60h-60z"></path>
<path transform="translate(420, 180) translate(30,30) rotate(90) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2"
d="M30 30c0 16.569 13.432 30 30 30v-60c-16.568 0-30 13.432-30 30z"></path>
<path transform="translate(420, 180) translate(30,30) rotate(90) translate(-30,-30)"
fill="#90e0ef" stroke="#48cae4" stroke-width="2"
d="M30 30c0-16.57-13.431-30-30-30v60c16.569 0 30-13.432 30-30z"></path>
</svg>
<svg>
<path transform="translate(420, 240) translate(30,30) rotate(270) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2" d="M0 0h60v60h-60z"></path>
<path transform="translate(420, 240) translate(30,30) rotate(270) translate(-30,-30)"
fill="#ade8f4" stroke="#48cae4" stroke-width="2"
d="M0 30c0 16.569 13.432 30 30 30v-60c-16.568 0-30 13.432-30 30z"></path>
</svg>
<svg>
<path transform="translate(420, 300)" fill="none" stroke="#48cae4" stroke-width="2"
d="M0 0h60v60h-60z"></path>
</svg>
<svg>
<path transform="translate(420, 360) translate(30,30) rotate(90) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2" d="M0 0h60v60h-60z"></path>
<path transform="translate(420, 360) translate(30,30) rotate(90) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2"
d="M30 30c0 16.569 13.432 30 30 30v-60c-16.568 0-30 13.432-30 30z"></path>
<path transform="translate(420, 360) translate(30,30) rotate(90) translate(-30,-30)"
fill="#caf0f8" stroke="#48cae4" stroke-width="2"
d="M30 30c0-16.57-13.431-30-30-30v60c16.569 0 30-13.432 30-30z"></path>
</svg>
<svg>
<path transform="translate(420, 420)" fill="none" stroke="#48cae4" stroke-width="2"
d="M0 0h60v60h-60z"></path>
</svg>
<svg>
<path transform="translate(420, 480)" fill="none" stroke="#48cae4" stroke-width="2"
d="M0 0h60v60h-60z"></path>
<circle transform="translate(420, 480)" cx="30" cy="30" r="30" fill="none" stroke="#48cae4"
stroke-width="2"></circle>
</svg>
<svg>
<path transform="translate(420, 540) translate(30,30) rotate(0) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2" d="M0 0h60v60h-60z"></path>
<path transform="translate(420, 540) translate(30,30) rotate(0) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2"
d="M30 30c0 16.569 13.432 30 30 30v-60c-16.568 0-30 13.432-30 30z"></path>
<path transform="translate(420, 540) translate(30,30) rotate(0) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2"
d="M30 30c0-16.57-13.431-30-30-30v60c16.569 0 30-13.432 30-30z"></path>
</svg>
<svg>
<path transform="translate(480, 0) translate(30,30) rotate(90) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2" d="M0 0h60v60h-60z"></path>
<path transform="translate(480, 0) translate(30,30) rotate(90) translate(-30,-30)"
d="M0 30C0 48.05 15.3348 60 30 60V0C15.3348 0 0 14.9129 0 30Z" stroke="#48cae4"
stroke-width="2" fill="none"></path>
<path transform="translate(480, 0) translate(30,30) rotate(90) translate(-30,-30)"
d="M60 30C60 14.9129 48.4719 0 30 0L30 60C48.4719 60 60 48.05 60 30Z" stroke="#48cae4"
stroke-width="2" fill="none"></path>
</svg>
<svg>
<path transform="translate(480, 60)" fill="none" stroke="#48cae4" stroke-width="2"
d="M0 0h60v60h-60z"></path>
<circle transform="translate(480, 60)" cx="30" cy="30" r="30" fill="#03045e"
stroke="#48cae4" stroke-width="2"></circle>
</svg>
<svg>
<path transform="translate(480, 120) translate(30,30) rotate(0) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2" d="M0 0h60v60h-60z"></path>
<path transform="translate(480, 120) translate(30,30) rotate(0) translate(-30,-30)"
d="M0 30C0 48.05 15.3348 60 30 60V0C15.3348 0 0 14.9129 0 30Z" stroke="#48cae4"
stroke-width="2" fill="#0077b6"></path>
<path transform="translate(480, 120) translate(30,30) rotate(0) translate(-30,-30)"
d="M60 30C60 14.9129 48.4719 0 30 0L30 60C48.4719 60 60 48.05 60 30Z" stroke="#48cae4"
stroke-width="2" fill="none"></path>
</svg>
<svg>
<path transform="translate(480, 180) translate(30,30) rotate(270) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2" d="M0 0h60v60h-60z"></path>
<path transform="translate(480, 180) translate(30,30) rotate(270) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2"
d="M30 30c0 16.569 13.432 30 30 30v-60c-16.568 0-30 13.432-30 30z"></path>
<path transform="translate(480, 180) translate(30,30) rotate(270) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2"
d="M30 30c0-16.57-13.431-30-30-30v60c16.569 0 30-13.432 30-30z"></path>
</svg>
<svg>
<path transform="translate(480, 240) translate(30,30) rotate(90) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2" d="M0 0h60v60h-60z"></path>
<path transform="translate(480, 240) translate(30,30) rotate(90) translate(-30,-30)"
d="M0 30C0 48.05 15.3348 60 30 60V0C15.3348 0 0 14.9129 0 30Z" stroke="#48cae4"
stroke-width="2" fill="#0096c7"></path>
<path transform="translate(480, 240) translate(30,30) rotate(90) translate(-30,-30)"
d="M60 30C60 14.9129 48.4719 0 30 0L30 60C48.4719 60 60 48.05 60 30Z" stroke="#48cae4"
stroke-width="2" fill="none"></path>
</svg>
<svg>
<path transform="translate(480, 300)" fill="none" stroke="#48cae4" stroke-width="2"
d="M0 0h60v60h-60z"></path>
</svg>
<svg>
<path transform="translate(480, 360)" fill="none" stroke="#48cae4" stroke-width="2"
d="M0 0h60v60h-60z"></path>
<circle transform="translate(480, 360)" cx="30" cy="30" r="30" fill="#caf0f8"
stroke="#48cae4" stroke-width="2"></circle>
</svg>
<svg>
<path transform="translate(480, 420) translate(30,30) rotate(270) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2" d="M0 0h60v60h-60z"></path>
<path transform="translate(480, 420) translate(30,30) rotate(270) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2"
d="M30 30c0 16.569 13.432 30 30 30v-60c-16.568 0-30 13.432-30 30z"></path>
<path transform="translate(480, 420) translate(30,30) rotate(270) translate(-30,-30)"
fill="#03045e" stroke="#48cae4" stroke-width="2"
d="M30 30c0-16.57-13.431-30-30-30v60c16.569 0 30-13.432 30-30z"></path>
</svg>
<svg>
<path transform="translate(480, 480) translate(30,30) rotate(270) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2" d="M0 0h60v60h-60z"></path>
<path transform="translate(480, 480) translate(30,30) rotate(270) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2"
d="M30 30c0 16.569 13.432 30 30 30v-60c-16.568 0-30 13.432-30 30z"></path>
<path transform="translate(480, 480) translate(30,30) rotate(270) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2"
d="M30 30c0-16.57-13.431-30-30-30v60c16.569 0 30-13.432 30-30z"></path>
</svg>
<svg>
<path transform="translate(480, 540) translate(30,30) rotate(180) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2" d="M0 0h60v60h-60z"></path>
<path transform="translate(480, 540) translate(30,30) rotate(180) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2"
d="M30 30c0 16.569 13.432 30 30 30v-60c-16.568 0-30 13.432-30 30z"></path>
<path transform="translate(480, 540) translate(30,30) rotate(180) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2"
d="M30 30c0-16.57-13.431-30-30-30v60c16.569 0 30-13.432 30-30z"></path>
</svg>
<svg>
<path transform="translate(540, 0) translate(30,30) rotate(270) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2" d="M0 0h60v60h-60z"></path>
<path transform="translate(540, 0) translate(30,30) rotate(270) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2"
d="M30 30c0 16.569 13.432 30 30 30v-60c-16.568 0-30 13.432-30 30z"></path>
<path transform="translate(540, 0) translate(30,30) rotate(270) translate(-30,-30)"
fill="#0077b6" stroke="#48cae4" stroke-width="2"
d="M30 30c0-16.57-13.431-30-30-30v60c16.569 0 30-13.432 30-30z"></path>
</svg>
<svg>
<path transform="translate(540, 60) translate(30,30) rotate(0) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2" d="M0 0h60v60h-60z"></path>
<path transform="translate(540, 60) translate(30,30) rotate(0) translate(-30,-30)"
d="M0 30C0 48.05 15.3348 60 30 60V0C15.3348 0 0 14.9129 0 30Z" stroke="#48cae4"
stroke-width="2" fill="#0096c7"></path>
<path transform="translate(540, 60) translate(30,30) rotate(0) translate(-30,-30)"
d="M60 30C60 14.9129 48.4719 0 30 0L30 60C48.4719 60 60 48.05 60 30Z" stroke="#48cae4"
stroke-width="2" fill="none"></path>
</svg>
<svg>
<path transform="translate(540, 120) translate(30,30) rotate(90) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2" d="M0 0h60v60h-60z"></path>
<path transform="translate(540, 120) translate(30,30) rotate(90) translate(-30,-30)"
d="M0 30C0 48.05 15.3348 60 30 60V0C15.3348 0 0 14.9129 0 30Z" stroke="#48cae4"
stroke-width="2" fill="#0096c7"></path>
<path transform="translate(540, 120) translate(30,30) rotate(90) translate(-30,-30)"
d="M60 30C60 14.9129 48.4719 0 30 0L30 60C48.4719 60 60 48.05 60 30Z" stroke="#48cae4"
stroke-width="2" fill="none"></path>
</svg>
<svg>
<path transform="translate(540, 180) translate(30,30) rotate(0) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2" d="M0 0h60v60h-60z"></path>
<path transform="translate(540, 180) translate(30,30) rotate(0) translate(-30,-30)"
d="M0 30C0 48.05 15.3348 60 30 60V0C15.3348 0 0 14.9129 0 30Z" stroke="#48cae4"
stroke-width="2" fill="none"></path>
<path transform="translate(540, 180) translate(30,30) rotate(0) translate(-30,-30)"
d="M60 30C60 14.9129 48.4719 0 30 0L30 60C48.4719 60 60 48.05 60 30Z" stroke="#48cae4"
stroke-width="2" fill="none"></path>
</svg>
<svg>
<path transform="translate(540, 240) translate(30,30) rotate(270) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2" d="M0 0h60v60h-60z"></path>
<path transform="translate(540, 240) translate(30,30) rotate(270) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2"
d="M30 30c0 16.569 13.432 30 30 30v-60c-16.568 0-30 13.432-30 30z"></path>
<path transform="translate(540, 240) translate(30,30) rotate(270) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2"
d="M30 30c0-16.57-13.431-30-30-30v60c16.569 0 30-13.432 30-30z"></path>
</svg>
<svg>
<path transform="translate(540, 300) translate(30,30) rotate(270) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2" d="M0 0h60v60h-60z"></path>
<path transform="translate(540, 300) translate(30,30) rotate(270) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2"
d="M30 30c0 16.569 13.432 30 30 30v-60c-16.568 0-30 13.432-30 30z"></path>
<path transform="translate(540, 300) translate(30,30) rotate(270) translate(-30,-30)"
fill="#ade8f4" stroke="#48cae4" stroke-width="2"
d="M30 30c0-16.57-13.431-30-30-30v60c16.569 0 30-13.432 30-30z"></path>
</svg>
<svg>
<path transform="translate(540, 360) translate(30,30) rotate(270) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2" d="M0 0h60v60h-60z"></path>
<path transform="translate(540, 360) translate(30,30) rotate(270) translate(-30,-30)"
fill="#ade8f4" stroke="#48cae4" stroke-width="2"
d="M0 30c0 16.569 13.432 30 30 30v-60c-16.568 0-30 13.432-30 30z"></path>
</svg>
<svg>
<path transform="translate(540, 420) translate(30,30) rotate(180) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2" d="M0 0h60v60h-60z"></path>
<path transform="translate(540, 420) translate(30,30) rotate(180) translate(-30,-30)"
d="M0 30C0 48.05 15.3348 60 30 60V0C15.3348 0 0 14.9129 0 30Z" stroke="#48cae4"
stroke-width="2" fill="#0077b6"></path>
<path transform="translate(540, 420) translate(30,30) rotate(180) translate(-30,-30)"
d="M60 30C60 14.9129 48.4719 0 30 0L30 60C48.4719 60 60 48.05 60 30Z" stroke="#48cae4"
stroke-width="2" fill="none"></path>
</svg>
<svg>
<path transform="translate(540, 480)" fill="none" stroke="#48cae4" stroke-width="2"
d="M0 0h60v60h-60z"></path>
<circle transform="translate(540, 480)" cx="30" cy="30" r="30" fill="none" stroke="#48cae4"
stroke-width="2"></circle>
</svg>
<svg>
<path transform="translate(540, 540) translate(30,30) rotate(180) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2" d="M0 0h60v60h-60z"></path>
<path transform="translate(540, 540) translate(30,30) rotate(180) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2"
d="M30 30c0 16.569 13.432 30 30 30v-60c-16.568 0-30 13.432-30 30z"></path>
<path transform="translate(540, 540) translate(30,30) rotate(180) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2"
d="M30 30c0-16.57-13.431-30-30-30v60c16.569 0 30-13.432 30-30z"></path>
</svg>
</svg>

After

Width:  |  Height:  |  Size: 51 KiB

View file

@ -0,0 +1,374 @@
---
date: 2020-08-14
title: "Configurazione"
weight: 4
draft: false
description: "Tutte le configurazioni disponibili in Blowfish."
slug: "configurazioni"
tags: ["config", "docs"]
series: ["Documentazione"]
series_order: 4
---
Blowfish è un tema altamente personalizzabile e utilizza alcune delle più recenti funzionalità di Hugo per semplificarne la configurazione.
Il tema viene fornito con una configurazione predefinita che ti consente di essere operativo con un blog di base o un sito Web statico.
{{< alert "fire" >}}
We just launched a CLI tool to help you get started with Blowfish. It will help you with installation and configuration. Install the CLI tool globally using:
```bash
npx blowfish-tools
```
{{< /alert >}}
> I file di configurazione forniti con il tema sono forniti in formato TOML dato che questa è la sintassi predefinita di Hugo. Sentiti libero di convertire la tua configurazione in YAML o JSON se lo desideri.
La configurazione predefinita del tema è documentata in ogni file in modo da poter regolare liberamente le impostazioni per soddisfare le proprie esigenze.
{{< alert >}}
As outlined in the [installation instructions]({{< ref "/docs/installation#set-up-theme-configuration-files" >}}), you should adjust your theme configuration by modifying the files in the `config/_default/` folder of your Hugo project and delete the `config.toml` file in your project root.
{{< /alert >}}
## Configurazioni del sito
Standard Hugo configuration variables are respected throughout the theme, however there are some specific things that should be configured for the best experience.
La configurazione del sito viene gestita tramite il file `config/_default/config.toml`. La tabella seguente descrive tutte le impostazioni di cui si avvale Blowfish.
Tieni presente che i nomi delle variabili forniti in questa tabella utilizzano il punto per semplificare la struttura dei dati TOML (ad esempio, "outputs.home" si riferisce a "[outputs] home").
<!-- prettier-ignore-start -->
| Name | Default | Description |
| ------------------------ | ------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `theme` | `"blowfish"` | Quando si utilizzano i moduli Hugo, questo valore di configurazione deve essere rimosso. Per tutti gli altri tipi di installazione, questo deve essere impostato su "blowfish" affinché il tema funzioni. |
| `baseURL` | _Not set_ | The URL to the root of the website. |
| `defaultContentLanguage` | `"en"` | This value determines the default language of theme components and content. Refer to the [language and i18n](#language-and-i18n) section below for supported language codes. |
| `enableRobotsTXT` | `true` | Se abilitato, verrà creato un file "robots.txt" nella radice del sito che consentirà ai motori di ricerca di eseguire la scansione dell'intero sito. Se preferisci fornire il tuo file `robots.txt` predefinito, impostalo su `false` e posiziona il file nella directory `static`. Per un controllo completo, puoi fornire un [layout personalizzato]({{< ref "content-examples#custom-layouts" >}}) per generare questo file. |
| `pagination.pagerSize` | `10` | Il numero di articoli elencati in ciascuna pagina dell'elenco degli articoli. |
| `summaryLength` | `0` | Il numero di parole utilizzate per generare il riepilogo dell'articolo quando non ne viene fornita una nella [front matter]({{< ref "front-matter" >}}). Un valore pari a "0" utilizzerà la prima frase. Questo valore non ha effetto quando i riepiloghi sono nascosti. |
| `outputs.home` | `["HTML", "RSS", "JSON"]` | I formati di output generati per il sito. Blowfish richiede HTML, RSS e JSON affinché tutti i componenti del tema funzionino correttamente. |
| `permalinks` | _Not set_ | Fare riferimento alla [documentazione di Hugo](https://gohugo.io/content-management/urls/#permalinks) per la configurazione del permalink. |
| `taxonomies` | _Not set_ | Fare riferimento alla sezione [Organizzazione dei contenuti]({{< ref "getting-started#organising-content" >}}) per la configurazione della tassonomia. |
<!-- prettier-ignore-end -->
## Thumbnails
Blowfish è stato creato in modo che sia facile aggiungere supporto visivo ai tuoi articoli. Se hai familiarità con la struttura degli articoli di Hugo, devi solo inserire un file immagine (quasi tutti i formati sono supportati ma consigliamo `.png` o `.jpg`) che inizi con `feature*` all'interno della cartella dell'articolo. E questo è tutto, Blowfish sarà quindi in grado di utilizzare l'immagine sia come miniatura all'interno del tuo sito web sia per le schede <a target="_blank" href="https://oembed.com/">oEmbed</a> su piattaforme sociali.
[Qui]({{< ref "thumbnails" >}}) c'è anche una guida con maggiori informazioni e un [esempio]({{< ref "thumbnail_sample" >}}) se vuoi vedere come puoi farlo.
## Lingua e i18n
Blowfish è ottimizzato per siti Web multilingue completi e le risorse tematiche sono tradotte in diverse lingue immediatamente. La configurazione della lingua ti consente di generare più versioni dei tuoi contenuti per fornire un'esperienza personalizzata ai tuoi visitatori nella loro lingua madre.
Il tema attualmente supporta le seguenti lingue per impostazione predefinita:
| Language | Code |
| ---------------------------- | ------- |
| Arabic | `ar` |
| Bulgarian | `bg` |
| Bengali | `bn` |
| Catalan | `ca` |
| Czech | `cs` |
| German | `de` |
| English | `en` |
| Esperanto | `eo` |
| Spanish (Spain) | `es` |
| Finnish | `fi` |
| French | `fr` |
| Hebrew | `he` |
| Croatian | `hr` |
| Hungarian | `hu` |
| Indonesian | `id` |
| Italian | `it` |
| Japanese | `ja` |
| Korean | `ko` |
| Dutch | `nl` |
| Polish | `pl` |
| Portuguese (Brazil) | `pt-br` |
| Portuguese (Portugal) | `pt-pt` |
| Romanian | `ro` |
| Russian | `ru` |
| Turkish | `tr` |
| Vietnamese | `vi` |
| Ukrainian | `uk` |
| Simplified Chinese (China) | `zh-cn` |
| Traditional Chinese (Taiwan) | `zh-tw` |
Le traduzioni predefinite possono essere sovrascritte creando un file personalizzato in "i18n/[code].yaml" che contiene le stringhe di traduzione. Puoi anche utilizzare questo metodo per aggiungere nuove lingue. Se desideri condividere una nuova traduzione con la community, [apri una richiesta pull](https://github.com/nunocoracao/blowfish/pulls).
### Configurazione
Per essere il più flessibili possibile, è necessario creare un file di configurazione lingua per ciascuna lingua sul sito web. Per impostazione predefinita Blowfish include una configurazione della lingua inglese in `config/_default/linguals.en.toml`.
Il file predefinito può essere utilizzato come modello per creare lingue aggiuntive o rinominato se desideri creare il tuo sito web in una lingua diversa dall'inglese. Basta nominare il file utilizzando il formato "lingue.[language-code].toml".
{{< alert >}}
**Nota:** assicurati che il parametro `defaultContentLanguage` nella [configurazione del sito](#site-configuration) corrisponda al codice della lingua nel nome del file di configurazione della lingua.
{{< /alert >}}
#### Globale
<!-- prettier-ignore-start -->
| Name | Default | Description |
| -------------- | ------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `languageCode` | `"en"` | Il codice della lingua Hugo per questo file. Può essere una lingua di livello superiore (ad esempio "en") o una variante secondaria (ad esempio "en-au") e deve corrispondere al codice della lingua nel nome del file. Hugo si aspetta che questo valore sia sempre in minuscolo. Per una corretta conformità HTML, imposta il parametro "isoCode" che fa distinzione tra maiuscole e minuscole. |
| `languageName` | `"English"` | Il nome della lingua. |
| `weight` | `1` | Il peso determina l'ordine delle lingue durante la creazione di siti multilingue. |
| `title` | `"Blowfish"` | Il titolo del sito web. Questo verrà visualizzato nell'intestazione e nel piè di pagina del sito. |
<!-- prettier-ignore-end -->
#### Parametri
<!-- prettier-ignore-start -->
| Name | Default | Description |
| ---------------------- | ------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `params.displayName` | `"EN"` | Il nome utilizzato quando la lingua appare sul sito web. |
| `params.isoCode` | `"en"` | Il codice della lingua ISO per scopi di metadati HTML. Può essere una lingua di livello superiore (es. `en`) o una sottovariante (es. `en-AU`). |
| `params.rtl` | `false` | Se si tratta o meno di un linguaggio RTL. Imposta su "true" per ridisporre il contenuto da destra a sinistra. Blowfish supporta pienamente l'uso simultaneo dei linguaggi RTL e LTR e si adatterà dinamicamente ad entrambi. |
| `params.dateFormat` | `"2 January 2006"` | Come vengono formattate le date in questa lingua. Fare riferimento alla [documentazione di Hugo](https://gohugo.io/functions/format/#gos-layout-string) per i formati accettabili. |
| `params.logo` | _Not set_ | Il percorso relativo al file del logo del sito all'interno della cartella "assets/". Il file del logo deve essere fornito con una risoluzione 2x e supporta qualsiasi dimensione dell'immagine. |
| `params.secondaryLogo` | _Not set_ | The relative path to the secondary site logo file within the `assets/` folder. The logo file should be provided at 2x resolution and supports any image dimensions. This should have an inverted/contrasting colour scheme to `logo`. If set, this logo will be shown when users toggle from the `defaultAppearance` mode. |
| `params.description` | _Not set_ | The website description. This will be used in the site metadata. |
| `params.copyright` | _Not set_ | A Markdown string for the site footer copyright message can include the placeholder { year } to dynamically insert the current year. If none is provided, Blowfish will automatically generate a copyright string using the site `title`. |
<!-- prettier-ignore-end -->
#### Author
| Name | Default | Description |
| ----------------- | --------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `author.name` | _Not set_ | The author's name. This will be displayed in article footers, and on the homepage when the profile layout is used. |
| `author.image` | _Not set_ | Path to the image file of the author. The image should be a 1:1 aspect ratio. The image can be placed in the site's `assets/` folder or can be external url. |
| `author.headline` | _Not set_ | A Markdown string containing the author's headline. It will be displayed on the profile homepage under the author's name. |
| `author.bio` | _Not set_ | A Markdown string containing the author's bio. It will be displayed in article footers. |
| `author.links` | _Not set_ | The links to display alongside the author's details. The config file contains example links which can simply be uncommented to enable. The order that the links are displayed is determined by the order they appear in the array. Custom links can be added by providing corresponding SVG icon assets in `assets/icons/`. |
<!-- prettier-ignore-end -->
### Menus
Blowfish also supports language-specific menu configurations. Menu config files follow the same naming format as the languages file. Simply provide the language code in the file name to tell Hugo which language the file relates to.
Menu config files are named with the format `menus.[language-code].toml`. Always ensure that the language code used in the menus configuration matches the languages configuration.
The [Getting Started]({{< ref "getting-started#menus" >}}) section explains more about the structure of this file. You can also refer to the [Hugo menu docs](https://gohugo.io/content-management/menus/) for more configuration examples.
## Theme parameters
Blowfish provides a large number of configuration parameters that control how the theme functions. The table below outlines every available parameter in the `config/_default/params.toml` file.
Many of the article defaults here can be overridden on a per article basis by specifying it in the front matter. Refer to the [Front Matter]({{< ref "front-matter" >}}) section for further details.
<!-- prettier-ignore-start -->
### Global
| Name | Default | Description |
| ------------------------------- | ------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `colorScheme` | `"blowfish"` | The theme colour scheme to use. Valid values are `blowfish` (default), `avocado`, `fire`, `ocean`, `forest`, `princess`, `neon`, `bloody`, `terminal`, `marvel`, `noir`, `autumn`, `congo`, and`slate`. Refer to the [Colour Schemes]({{< ref "getting-started#colour-schemes" >}}) section for more details. |
| `defaultAppearance` | `"light"` | The default theme appearance, either `light` or `dark`. |
| `autoSwitchAppearance` | `true` | Whether the theme appearance automatically switches based upon the visitor's operating system preference. Set to `false` to force the site to always use the `defaultAppearance`. |
| `enableSearch` | `false` | Whether site search is enabled. Set to `true` to enable search functionality. Note that the search feature depends on the `outputs.home` setting in the [site configuration](#site-configuration) being set correctly. |
| `enableCodeCopy` | `false` | Whether copy-to-clipboard buttons are enabled for `<code>` blocks. The `highlight.noClasses` parameter must be set to `false` for code copy to function correctly. Read more about [other configuration files](#other-configuration-files) below. |
| `mainSections` | _Not set_ | The sections that should be displayed in the recent articles list. If not provided the section with the greatest number of articles is used. |
| `showViews` | _Not set_ | Whether or not articles and list views are displayed. This requires firebase integrations to be enabled, look below. |
| `showLikes` | _Not set_ | Whether or not articles and list likes are displayed. This requires firebase integrations to be enabled, look below. |
| `robots` | _Not set_ | String that indicates how robots should handle your site. If set, it will be output in the page head. Refer to [Google's docs](https://developers.google.com/search/docs/advanced/robots/robots_meta_tag#directives) for valid values. |
| `disableImageZoom` | `false` | Disables image zoom feature across all the images in the site. |
| `disableImageOptimization` | `false` | Disables image resize and optimization features across all the images in the site. |
| `disableTextInHeader` | `false` | Disables text in header, useful for logo based headers. |
| `defaultBackgroundImage` | _Not set_ | Default background image for both `background` homepage layout and `background` hero style |
| `defaultFeaturedImage` | _Not set_ | Default background image for all `featured` images across articles, will be overridden by a local `featured` image. |
| `highlightCurrentMenuArea` | _Not set_ | Marks menu entries in the main menu when selected |
| `smartTOC` | _Not set_ | Activate smart Table of Contents, items in view will be highlighted. |
| `smartTOCHideUnfocusedChildren` | _Not set_ | When smart Table of Contents is turned on, this will hide deeper levels of the table when they are not in focus. |
### Header
| Name | Default | Description |
| --------------- | --------- | ------------------------------------------------------------------------------------------------------------------- |
| `header.layout` | `"basic"` | Defines the header for the entire site, supported values are `basic`, `fixed`, `fixed-fill`, and `fixed-fill-blur`. |
### Footer
| Name | Default | Description |
| ------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `footer.showMenu` | `true` | Show/hide the footer menu, which can be configured in the `[[footer]]` section of the `config/_default/menus.en.toml` file. |
| `footer.showCopyright` | `true` | Whether or not to show the copyright string in the site footer. Note that the string itself can be customised using the `copyright` parameter in the [languages configuration](#language-and-i18n). |
| `footer.showThemeAttribution` | `true` | Whether or not to show the "powered by" theme attribution in the site footer. If you choose to disable this message, please consider attributing the theme somewhere else on your site (for example, on your about page). |
| `footer.showAppearanceSwitcher` | `false` | Whether or not to show the appearance switcher in the site footer. The browser's local storage is used to persist the visitor's preference. |
| `footer.showScrollToTop` | `true` | When set to `true` the scroll to top arrow is displayed. |
### Homepage
| Name | Default | Description |
| ------------------------------- | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `homepage.layout` | `"profile"` | The layout of the homepage. Valid values are `page`, `profile`, `hero`, `card`, `background`, or `custom`. When set to `custom`, you must provide your own layout by creating a `/layouts/partials/home/custom.html` file. Refer to the [Homepage Layout]({{< ref "homepage-layout" >}}) section for more details. |
| `homepage.homepageImage` | _Not set_ | Image to be used in `hero` and `card` layouts. Can be set as local image from asset directory or external image url. Refer to the [Homepage Layout]({{< ref "homepage-layout" >}}) section for more details. |
| `homepage.showRecent` | `false` | Whether or not to display the recent articles list on the homepage. |
| `homepage.showRecentItems` | 5 | How many articles to display if showRecent is true. If variable is set to 0 or if it isn't defined the system will default to 5 articles. |
| `homepage.showMoreLink` | `false` | Whether or not to display a show more link at the end of your posts that takes the user to a predefined place. |
| `homepage.showMoreLinkDest` | `/posts` | The destination of the show more button. |
| `homepage.cardView` | `false` | Display recent articles as a gallery of cards. |
| `homepage.cardViewScreenWidth` | `false` | Enhance the width of the recent articles card gallery to take the full width available. |
| `homepage.layoutBackgroundBlur` | `false` | Makes the background image in the homepage layout blur with the scroll |
### Article
| Name | Default | Description |
| ------------------------------------- | --------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `article.showDate` | `true` | Whether or not article dates are displayed. |
| `article.showViews` | `false` | Whether or not article views are displayed. This requires firebase integrations to be enabled, look below. |
| `article.showLikes` | `false` | Whether or not article likes are displayed. This requires firebase integrations to be enabled, look below. |
| `article.showDateOnlyInArticle` | `false` | Show date within article even if not displayed in article listings/cards. |
| `article.showDateUpdated` | `false` | Whether or not the dates articles were updated are displayed. |
| `article.showAuthor` | `true` | Whether or not the author box is displayed in the article footer. |
| `article.showAuthorBottom` | `false` | Author boxes are displayed at the bottom of each page instead of the top. |
| `article.showHero` | `false` | Whether the thumbnail image will be shown as a hero image within each article page. |
| `article.heroStyle` | _Not set_ | Style to display the hero image, valid options are: `basic`, `big`, `background`, `thumbAndBackground`. |
| `article.layoutBackgroundBlur` | `true` | Makes the background image in the background article heroStyle blur with the scroll |
| `article.layoutBackgroundHeaderSpace` | `true` | Add space between the header and the body. |
| `article.showBreadcrumbs` | `false` | Whether or not breadcrumbs are displayed in the article header. |
| `article.showDraftLabel` | `true` | Whether or not the draft indicator is shown next to articles when site is built with `--buildDrafts`. |
| `article.showEdit` | `false` | Whether or not the link to edit the article content should be displayed. |
| `article.editURL` | _Not set_ | When `article.showEdit` is active, the URL for the edit link. |
| `article.editAppendPath` | `true` | When `article.showEdit` is active, whether or not the path to the current article should be appended to the URL set at `article.editURL`. |
| `article.seriesOpened` | `false` | Whether or not the series module will be displayed open by default or not. |
| `article.showHeadingAnchors` | `true` | Whether or not heading anchor links are displayed alongside headings within articles. |
| `article.showPagination` | `true` | Whether or not the next/previous article links are displayed in the article footer. |
| `article.invertPagination` | `false` | Whether or not to flip the direction of the next/previous article links. |
| `article.showReadingTime` | `true` | Whether or not article reading times are displayed. |
| `article.showTableOfContents` | `false` | Whether or not the table of contents is displayed on articles. |
| `article.showRelatedContent` | `false` | Display related content for each post. Might required additional configuration to your `config.toml`. Please check the theme `config.toml` if you want to enable this feature and copy all the relevant _related_ entries. Also check [Hugo's docs](https://gohugo.io/content-management/related/) on related content. |
| `article.relatedContentLimit` | `3` | Limit of related articles to display if `showRelatedContent` is turned on. |
| `article.showTaxonomies` | `false` | Whether or not the taxonomies related to this article are displayed. |
| `article.showAuthorsBadges` | `false` | Whether the `authors` taxonomies are are displayed in the article or list header. This requires the setup of `multiple authors` and the `authors` taxonomy. Check [this page]({{< ref "multi-author" >}}) for more details on how to configure that feature. |
| `article.showWordCount` | `false` | Whether or not article word counts are displayed. |
| `article.showComments` | `false` | Whether or not the [comments partial]({{< ref "partials#comments" >}}) is included after the article footer. |
| `article.sharingLinks` | _Not set_ | Which sharing links to display at the end of each article. When not provided, or set to `false` no links will be displayed. Available values are: "linkedin", "bluesky", "mastodon", "twitter", "reddit", "pinterest", "facebook", "email", "whatsapp", and "telegram" |
| `article.showZenMode` | `false` | Flag to activate Zen Mode reading feature for articles. |
### List
| Name | Default | Description |
| ---------------------------------- | --------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `list.showHero` | `false` | Whether the thumbnail image will be shown as a hero image within each list page. |
| `list.heroStyle` | _Not set_ | Style to display the hero image, valid options are: `basic`, `big`, `background`, `thumbAndBackground`. |
| `list.showBreadcrumbs` | `false` | Whether or not breadcrumbs are displayed in the header on list pages. |
| `list.layoutBackgroundBlur` | `true` | Makes the background image in the background list heroStyle blur with the scroll |
| `list.layoutBackgroundHeaderSpace` | `true` | Add space between the header and the body. |
| `list.showTableOfContents` | `false` | Whether or not the table of contents is displayed on list pages. |
| `list.showSummary` | `false` | Whether or not article summaries are displayed on list pages. If a summary is not provided in the [front matter]({{< ref "front-matter" >}}), one will be auto generated using the `summaryLength` parameter in the [site configuration](#site-configuration). |
| `list.showViews` | `false` | Whether or not list views are displayed. This requires firebase integrations to be enabled, look below. |
| `list.showLikes` | `false` | Whether or not list likes are displayed. This requires firebase integrations to be enabled, look below. |
| `list.showCards` | `false` | Whether or not each article is displayed as a card or as simple inline text. |
| `list.orderByWeight` | `false` | Whether or not articles are sorted by [weights](https://gohugo.io/methods/page/weight/). |
| `list.groupByYear` | `true` | Whether or not articles are grouped by year on list pages. |
| `list.cardView` | `false` | Display lists as a gallery of cards. |
| `list.cardViewScreenWidth` | `false` | Enhance the width of card galleries in lists to take the full width available. |
| `list.constrainItemsWidth` | `false` | Limit item width to `prose` to increase readability. Useful when no feature images are available. |
| `list.showTableOfContents` | `false` | Whether or not the table of contents is displayed on articles. |
### Sitemap
| Name | Default | Description |
| ----------------------- | ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `sitemap.excludedKinds` | `["taxonomy", "term"]` | Kinds of content that should be excluded from the generated `/sitemap.xml` file. Refer to the [Hugo docs](https://gohugo.io/templates/section-templates/#page-kinds) for acceptable values. |
### Taxonomy
| Name | Default | Description |
| ------------------------------ | --------- | ---------------------------------------------------------------------------------------------------------- |
| `taxonomy.showTermCount` | `true` | Whether or not the number of articles within a taxonomy term is displayed on the taxonomy listing. |
| `taxonomy.showHero` | `false` | Whether the thumbnail image will be shown as a hero image within each taxonomy page. |
| `taxonomy.heroStyle` | _Not set_ | Style to display the hero image, valid options are: `basic`, `big`, `background`, `thumbAndBackground`. |
| `taxonomy.showBreadcrumbs` | `false` | Whether or not breadcrumbs are displayed in the taxonomy header. |
| `taxonomy.showViews` | `false` | Whether or not article views are displayed. This requires firebase integrations to be enabled, look below. |
| `taxonomy.showLikes` | `false` | Whether or not article likes are displayed. This requires firebase integrations to be enabled, look below. |
| `taxonomy.showTableOfContents` | `false` | Whether or not the table of contents is displayed on taxonomies. |
| `taxonomy.cardView` | `false` | Display lists as a gallery of cards. |
### Term
| Name | Default | Description |
| -------------------------- | --------- | ---------------------------------------------------------------------------------------------------------- |
| `term.showHero` | `false` | Whether the thumbnail image will be shown as a hero image within each term page. |
| `term.heroStyle` | _Not set_ | Style to display the hero image, valid options are: `basic`, `big`, `background`, `thumbAndBackground`. |
| `term.showBreadcrumbs` | `false` | Whether or not breadcrumbs are displayed in the term header. |
| `term.showViews` | `false` | Whether or not article views are displayed. This requires firebase integrations to be enabled, look below. |
| `term.showLikes` | `false` | Whether or not article likes are displayed. This requires firebase integrations to be enabled, look below. |
| `term.showTableOfContents` | `false` | Whether or not the table of contents is displayed on terms. |
| `term.groupByYear` | `false` | Whether or not articles are grouped by year on term pages. |
| `term.cardView` | `false` | Display lists as a gallery of cards. |
| `term.cardViewScreenWidth` | `false` | Enhance the width of card galleries in lists to take the full width available. |
### Firebase
| Name | Default | Description |
| ---------------------------- | --------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `firebase.apiKey` | _Not set_ | Firebase apiKey, required to integrate against Firebase. Check [this page]({{< ref "firebase-views" >}}) for a guide on how to integrate Firebase into Blowfish. |
| `firebase.authDomain` | _Not set_ | Firebase authDomain, required to integrate against Firebase. Check [this page]({{< ref "firebase-views" >}}) for a guide on how to integrate Firebase into Blowfish. |
| `firebase.projectId` | _Not set_ | Firebase projectId, required to integrate against Firebase. Check [this page]({{< ref "firebase-views" >}}) for a guide on how to integrate Firebase into Blowfish. |
| `firebase.storageBucket` | _Not set_ | Firebase storageBucket, required to integrate against Firebase. Check [this page]({{< ref "firebase-views" >}}) for a guide on how to integrate Firebase into Blowfish. |
| `firebase.messagingSenderId` | _Not set_ | Firebase messagingSenderId, required to integrate against Firebase. Check [this page]({{< ref "firebase-views" >}}) for a guide on how to integrate Firebase into Blowfish. |
| `firebase.appId` | _Not set_ | Firebase appId, required to integrate against Firebase. Check [this page]({{< ref "firebase-views" >}}) for a guide on how to integrate Firebase into Blowfish. |
| `firebase.measurementId` | _Not set_ | Firebase measurementId, required to integrate against Firebase. Check [this page]({{< ref "firebase-views" >}}) for a guide on how to integrate Firebase into Blowfish. |
### Fathom Analytics
| Name | Default | Description |
| ------------------------ | --------- | ---------------------------------------------------------------------------------------------------------------------------------------------- |
| `fathomAnalytics.site` | _Not set_ | The site code generated by Fathom Analytics for the website. Refer to the [Analytics docs]({{< ref "partials#analytics" >}}) for more details. |
| `fathomAnalytics.domain` | _Not set_ | If using a custom domain with Fathom Analytics, provide it here to serve `script.js` from the custom domain. |
### Umami Analytics
| Name | Default | Description |
| -------------------------- | --------- |----------------------------------------------------------------------------------------------------------------------------------------------------|
| `umamiAnalytics.websiteid` | _Not set_ | The site code generated by Umami Analytics for the website. Refer to the [Analytics docs]({{< ref "partials#analytics" >}}) for more details. |
| `umamiAnalytics.domain` | _Not set_ | If using a custom domain with Umami Analytics, provide it here to serve `script.js` from the custom domain. |
| `umamiAnalytics.dataDomains` | _Not set_ | If you want the tracker to only run on specific domains, provide it for your tracker script. This is a comma delimited list of domain names. Such as "yoursite.com,yoursite2.com". |
| `umamiAnalytics.scriptName` | script.js | The name of the `script.js` used for anti-ad-blocking is configured by the environment variable `TRACKER_SCRIPT_NAME` |
| `umamiAnalytics.enableTrackEvent` | true | When set to `true` track event will add automatically. If you do not want to add track event, set it to `false`. |
### Seline Analytics
| Name | Default | Description |
|-----------------------------------|-----------|-------------------------------------------------------------------------------------------------------------------------------------------|
| `selineAnalytics.token` | _Not set_ | The token generated by Seline Analytics for the website. Refer to the [Analytics docs]({{< ref "partials#analytics" >}}) for more details. |
| `selineAnalytics.enableTrackEvent` | true | When set to `true` track event will add automatically. If you do not want to add track event, set it to `false`. |
### BuyMeACoffee
| Name | Default | Description |
| ----------------------------------- | --------- | --------------------------------------------------------------------------- |
| `buymeacoffee.identifier` | _Not set_ | The identifier to the target buymeacoffee account. |
| `buymeacoffee.globalWidget` | _Not set_ | Activate the global buymeacoffee widget. |
| `buymeacoffee.globalWidgetMessage` | _Not set_ | Message what will be displayed the first time a new user lands on the site. |
| `buymeacoffee.globalWidgetColor` | _Not set_ | Widget color in hex format. |
| `buymeacoffee.globalWidgetPosition` | _Not set_ | Position of the widget, i.e. "Left" or "Right" |
### Verifications
| Name | Default | Description |
| ------------------------ | --------- | --------------------------------------------------------------------------------------- |
| `verification.google` | _Not set_ | The site verification string provided by Google to be included in the site metadata. |
| `verification.bing` | _Not set_ | The site verification string provided by Bing to be included in the site metadata. |
| `verification.pinterest` | _Not set_ | The site verification string provided by Pinterest to be included in the site metadata. |
| `verification.yandex` | _Not set_ | The site verification string provided by Yandex to be included in the site metadata. |
<!-- prettier-ignore-end -->
## RSSNext
| Name | Default | Description |
| ------------------------ | --------- |--------------------------------------------------------------------------------------------------------------------------------------|
| `rssnext.feedId` | _Not set_ | The rss `feedId` string provided by [RSSNext/Follow](https://follow.is/) to be included in the `rss.xml`, which can helps to claim rss feed as your own. |
| `rssnext.userId` | _Not set_ | The rss `userId` string provided by [RSSNext/Follow](https://follow.is/) to be included in the `rss.xml`, which can helps to claim rss feed as your own. |
## Other configuration files
The theme also includes a `markup.toml` configuration file. This file contains some important parameters that ensure that Hugo is correctly configured to generate sites built with Blowfish.
Always ensure this file is present in the config directory and that the required values are set. Failure to do so may cause certain features to function incorrectly and could result in unintended behaviour.

View file

@ -0,0 +1,374 @@
---
title: "設定"
weight: 4
draft: false
description: "Blowfish で使えるすべての設定変数"
slug: "configuration"
tags: ["config", "docs"]
series: ["Documentation"]
series_order: 4
---
Blowfish は高度にカスタマイズ可能なテーマであり、最新の Hugo 機能を使用して設定方法をシンプルにしています。
このテーマには、基本的なブログまたは静的サイトをすぐに立ち上げて実行できるデフォルト設定が付属しています。
{{< alert "fire" >}}
Blowfish を簡単に使い始められるように、新しい CLI ツールをリリースしました。インストールと設定に役立ちます。 グローバルに CLI ツールをインストールするには、以下を使用します。
```bash
npx blowfish-tools
```
{{< /alert >}}
> テーマにバンドルされている設定ファイルは、デフォルトの Hugo 構文である TOML 形式で提供されています。必要に応じて、設定を YAML または JSON に変換できます。
デフォルトのテーマ設定は各ファイルに記載されているため、必要に応じて設定を自由に調整できます。
{{< alert >}}
[インストール手順]({{< ref "/docs/installation#set-up-theme-configuration-files" >}})で概説されているように、Hugo プロジェクトの `config/_default/` フォルダ内のファイルを修正し、プロジェクトルートの `config.toml` ファイルを削除することで、テーマ設定を調整する必要があります。
{{< /alert >}}
## サイト設定
テーマ全体で標準の Hugo 設定変数が適用されますが、最適なエクスペリエンスを得るために設定する必要がある特定の事項があります。
サイト設定は `config/_default/config.toml` ファイルで管理されます。 下の表は、Blowfish が活用するすべての設定の概要を示しています。
この表で提供されている変数名は、TOML データ構造を簡素化するためにドット表記を使用していることに注意してください(つまり、 `outputs.home``[outputs] home` を指します)。
<!-- prettier-ignore-start -->
| 名前 | デフォルト | 説明 |
|---|---|---|
| `theme` | `"blowfish"` | Hugo Modules を使用している場合は、この設定値を削除する必要があります。 他のすべてのインストールタイプでは、テーマが機能するためにこれを `blowfish` に設定する必要があります。 |
| `baseURL` | _未設定_ | ウェブサイトのルートへの URL です。 |
| `defaultContentLanguage` | `"en"` | この値は、テーマコンポーネントとコンテンツのデフォルト言語を決定します。 サポートされている言語コードについては、以下の[言語と i18n](#言語と-i18n) セクションを参照してください。 |
| `enableRobotsTXT` | `true` | 有効にすると、検索エンジンがサイト全体をクロールできるようにする `robots.txt` ファイルがサイトルートに作成されます。 あらかじめ作成した独自の `robots.txt` を提供する場合は、`false` に設定し、ファイルを `static` ディレクトリに配置します。 完全に制御するには、このファイルを生成するための[カスタムレイアウト]({{< ref "content-examples#カスタムレイアウト" >}})を提供できます。 |
| `pagination.pagerSize` | `10` | 記事リストの各ページにリストされる記事の数です。 |
| `summaryLength` | `0` | [フロントマター]({{< ref "front-matter" >}})で提供されていない場合に、記事の概要を生成するために使用される単語の数です。 値 `0` は最初の文を使用します。 概要が非表示になっている場合、この値は効果がありません。 |
| `outputs.home` | `["HTML", "RSS", "JSON"]` | サイト用に生成される出力形式です。 Blowfish では、すべてのテーマコンポーネントが正しく機能するために HTML、RSS、JSON が必要です。 |
| `permalinks` | _未設定_ | パーマリンクの設定については、[Hugo ドキュメント](https://gohugo.io/content-management/urls/#permalinks)を参照してください。 |
| `taxonomies` | _未設定_ | 分類の設定については、[コンテンツの整理]({{< ref "getting-started#コンテンツの整理" >}})セクションを参照してください。 |
<!-- prettier-ignore-end -->
## サムネイル
Blowfish は、記事に視覚的なサポートを簡単に追加できるように構築されています。Hugo の記事構造に慣れている場合は、記事フォルダ内に `feature*` で始まる画像ファイル(ほとんどすべての形式がサポートされていますが、`.png` または `.jpg` をお勧めしますを配置するだけです。これで、Blowfish はサイト内でサムネイルとして画像を使用したり、ソーシャルプラットフォーム全体で <a target="_blank" href="https://oembed.com/">oEmbed</a> カードに使用したりできます。
[こちら]({{< ref "thumbnails" >}})には、より詳細な情報と、どのように設定できるかを確認したい場合の[サンプル]({{< ref "thumbnail_sample" >}})を含むガイドもあります。
## 言語と i18n
Blowfish は多言語ウェブサイト向けに最適化されており、テーマアセットはすぐに使えるように複数の言語に翻訳されています。 言語設定を使用すると、コンテンツの複数のバージョンを生成して、訪問者に母国語でカスタマイズされたエクスペリエンスを提供できます。
このテーマは現在、デフォルトで次の言語をサポートしています:
| 言語 | コード |
|---|---|
| アラビア語 | `ar` |
| ブルガリア語 | `bg` |
| ベンガル語 | `bn` |
| カタロニア語 | `ca` |
| チェコ語 | `cs` |
| ドイツ語 | `de` |
| 英語 | `en` |
| エスペラント語 | `eo` |
| スペイン語(スペイン) | `es` |
| フィンランド語 | `fi` |
| フランス語 | `fr` |
| ヘブライ語 | `he` |
| クロアチア語 | `hr` |
| ハンガリー語 | `hu` |
| インドネシア語 | `id` |
| イタリア語 | `it` |
| 日本語 | `ja` |
| 韓国語 | `ko` |
| オランダ語 | `nl` |
| ポーランド語 | `pl` |
| ポルトガル語(ブラジル) | `pt-br` |
| ポルトガル語(ポルトガル) | `pt-pt` |
| ルーマニア語 | `ro` |
| ロシア語 | `ru` |
| トルコ語 | `tr` |
| ベトナム語 | `vi` |
| 中国語(簡体字) | `zh-cn` |
| 中国語(繁体字) | `zh-tw` |
デフォルトの翻訳は、翻訳文字列を含むカスタムファイル `i18n/[言語コード].yaml` を作成することでオーバーライドできます。 この方法を使用して新しい言語を追加することもできます。 新しい翻訳をコミュニティと共有したい場合は、[プルリクエストを開いて](https://github.com/nunocoracao/blowfish/pulls)ください。
### 設定
可能な限り柔軟に対応するために、ウェブサイトの各言語の言語設定ファイルを作成する必要があります。デフォルトでは、Blowfish には `config/_default/languages.en.toml` に英語の言語設定が含まれています。
デフォルトのファイルは、追加の言語を作成するためのテンプレートとして使用することも、英語以外の言語でウェブサイトを作成する場合は名前を変更することもできます。`languages.[言語コード].toml` 形式を使用してファイルに名前を付けるだけです。
{{< alert >}}
**注:** [サイト設定](#サイト設定)の `defaultContentLanguage` パラメータが、言語設定ファイル名の言語コードと一致していることを確認してください。
{{< /alert >}}
#### グローバル
<!-- prettier-ignore-start -->
| 名前 | デフォルト | 説明 |
|---|---|---|
| `languageCode` | `"en"` | このファイルの Hugo 言語コードです。トップレベル言語(例: `en`)またはサブバリアント(例: `en-au`にすることができ、ファイル名の言語コードと一致する必要があります。Hugo はこの値が常に小文字であることを想定しています。適切な HTML 準拠のために、大文字と小文字を区別する `isoCode` パラメータを設定します。 |
| `languageName` | `"English"` | 言語の名前です。 |
| `weight` | `1` | 重みは、多言語サイトを構築するときの言語の順序を決定します。 |
| `title` | `"Blowfish"` | ウェブサイトのタイトルです。これは、サイトのヘッダーとフッターに表示されます。 |
<!-- prettier-ignore-end -->
#### パラメーター
<!-- prettier-ignore-start -->
| 名前 | デフォルト | 説明 |
|---|---|---|
| `params.displayName` | `"EN"` | ウェブサイトに言語が表示されるときに使用される名前です。 |
| `params.isoCode` | `"en"` | HTML メタデータ用の ISO 言語コードです。トップレベル言語(例: `en`)またはサブバリアント(例: `en-AU`)にすることができます。 |
| `params.rtl` | `false` | これが RTL 言語かどうかです。`true` に設定すると、コンテンツが右から左に並べ替えられます。 Blowfish は RTL 言語と LTR 言語の同時使用を完全にサポートしており、両方に動的に調整されます。 |
| `params.dateFormat` | `"2 January 2006"` | この言語での日付のフォーマット方法です。使用できる形式については、[Hugo ドキュメント](https://gohugo.io/functions/format/#gos-layout-string)を参照してください。 |
| `params.logo` | _未設定_ | `assets/` フォルダ内のサイトロゴファイルへの相対パスです。ロゴファイルは2倍の解像度で提供する必要があり、あらゆる画像サイズをサポートしています。 |
| `params.secondaryLogo` | _未設定_ | `assets/` フォルダ内のセカンダリサイトロゴファイルへの相対パスです。 ロゴファイルは2倍の解像度で提供する必要があり、あらゆる画像サイズをサポートしています。 これは、`logo` とは反転/対照的なカラースキームである必要があります。設定されている場合、このロゴは、ユーザーが `defaultAppearance` モードから切り替えたときに表示されます。 |
| `params.description` | _未設定_ | ウェブサイトの説明です。これはサイトのメタデータで使用されます。 |
| `params.copyright` | _未設定_ | サイトフッターの著作権メッセージの Markdown 文字列には、プレースホルダ { year } を含めて現在の年を動的に挿入できます。指定されていない場合、Blowfish はサイト `title` を使用して著作権文字列を自動的に生成します。 |
<!-- prettier-ignore-end -->
#### 著者(Author)
<!-- prettier-ignore-start -->
| 名前 | デフォルト    | 説明 |
|---|---|---|
| `author.name` | _未設定_ | 著者の名前です。これは、記事のフッターと、プロフィールレイアウトが使用されている場合はホームページに表示されます。 |
| `author.image` | _未設定_ | 著者の画像ファイルへのパスです。画像は縦横比 1:1 である必要があります。画像は、サイトの `assets/` フォルダに配置することも、外部 URL にすることもできます。 |
| `author.headline` | _未設定_ | 著者の見出しを含む Markdown 文字列です。プロフィールホームページの著者の名前に下に表示されます。 |
| `author.bio` | _未設定_ | 著者の略歴を含む Markdown 文字列です。記事のフッターに表示されます。 |
| `author.links` | _未設定_ | 著者の詳細と一緒に表示するリンクです。設定ファイルには、コメントを外すだけで有効になるリンクの例が含まれています。リンクが表示される順序は、配列に表示される順序によって決まります。`assets/icons/` に対応する SVG アイコンアセットを提供することで、カスタムリンクを追加できます。 |
<!-- prettier-ignore-end -->
### メニュー(Menus)
Blowfish は、言語固有のメニュー設定もサポートしています。メニュー設定ファイルは、言語ファイルと同じ命名形式に従います。ファイル名に言語コードを指定するだけで、Hugo はファイルがどの言語に関連しているかを認識します。
メニュー設定ファイルの名前は、 `menus.[language-code].toml` 形式です。メニュー設定で使用される言語コードが言語設定と一致していることを常に確認してください。
[はじめに]({{< ref "getting-started#menus" >}})セクションでは、このファイルの構造について詳しく説明しています。詳細な設定例については、[Hugo メニュー ドキュメント](https://gohugo.io/content-management/menus/)も参照できます。
## テーマパラメーター(Theme parameters)
Blowfish は、テーマの機能を制御する多数の設定パラメータを提供します。下の表は、`config/_default/params.toml` ファイルで使用可能なすべてのパラメータの概要を示しています。
ここにある記事のデフォルトの多くは、フロントマターで指定することで、記事ごとにオーバーライドできます。詳細については、[フロントマター]({{< ref "front-matter" >}})セクションを参照してください。
<!-- prettier-ignore-start -->
### グローバル
| 名前 | デフォルト | 説明 |
|---|---|---|
| `colorScheme` | `"blowfish"` | 使用するテーマのカラースキームです。有効な値は、`blowfish`(デフォルト)、`avocado``fire``ocean``forest``princess``neon``bloody``terminal``marvel``noir``autumn``congo``slate` です。詳細については、[カラースキーム]({{< ref "getting-started#カラースキーム" >}})セクションを参照してください。 |
| `defaultAppearance` | `"light"` | デフォルトのテーマの外観です。`light` または `dark` のいずれかです。 |
| `autoSwitchAppearance` | `true` | 訪問者のオペレーティングシステムの設定に基づいてテーマの外観を自動的に切り替えるかどうかです。`false` に設定すると、サイトは常に `defaultAppearance` を使用します。 |
| `enableSearch` | `false` | サイト内検索が有効かどうかです。`true` に設定すると、検索機能が有効になります。検索機能は、[サイト設定](#サイト設定)の `outputs.home` 設定が正しく設定されているかどうかに依存することに注意してください。 |
| `enableCodeCopy` | `false` | `<code>` ブロックのクリップボードへのコピーボタンを有効にするかどうかです。コードコピーが正しく機能するには、`highlight.noClasses` パラメータを `false` に設定する必要があります。以下の[その他の設定ファイル](#その他の設定ファイル)について読んでください。 |
| `mainSections` | _未設定_ | 最近の記事リストに表示するセクションです。指定しない場合は、記事数が最も多いセクションが使用されます。 |
| `showViews` | _未設定_ | 記事とリストの表示回数を表示するかどうかです。これには Firebase 統合を有効にする必要があります。以下をご覧ください。 |
| `showLikes` | _未設定_ | 記事とリストのいいねを表示するかどうかです。これには Firebase 統合を有効にする必要があります。以下をご覧ください。 |
| `robots` | _未設定_ | ロボットがサイトをどのように処理するかを示す文字列です。設定されている場合、ページヘッダーに出力されます。有効な値については、[Google のドキュメント](https://developers.google.com/search/docs/advanced/robots/robots_meta_tag#directives)を参照してください。 |
| `disableImageZoom` | `false` | サイト内のすべての画像の画像ズーム機能を無効にします。 |
| `disableImageOptimization` | `false` | サイト内のすべての画像の画像サイズ変更と最適化機能を無効にします。 |
| `disableTextInHeader` | `false` | ヘッダーのテキストを無効にします。ロゴベースのヘッダーに役立ちます。 |
| `defaultBackgroundImage` | _未設定_ | `background` ホームページレイアウトと `background` ヒーロースタイルの両方のデフォルトの背景画像です。 |
| `defaultFeaturedImage` | _未設定_ | 記事全体のすべての `featured` 画像のデフォルトの背景画像です。ローカルの `featured` 画像によってオーバーライドされます。 |
| `highlightCurrentMenuArea` | _未設定_ | メインメニューのメニュー項目が選択されているときにマークを付けます。 |
| `smartTOC` | _未設定_ | スマート目次をアクティブにします。表示されている項目が強調表示されます。 |
| `smartTOCHideUnfocusedChildren` | _未設定_ | スマート目次がオンになっている場合、フォーカスされていないときに、テーブルのより深いレベルが非表示になります。 |
### ヘッダー(Header)
| 名前 | デフォルト | 説明 |
|---|---|---|
| `header.layout` | `"basic"` | サイト全体のヘッダーを定義します。サポートされている値は、`basic``fixed``fixed-fill``fixed-fill-blur` です。 |
### フッター(Footer)
| 名前 | デフォルト    | 説明 |
|---|---|---|
| `footer.showMenu` | `true` | フッターメニューを表示/非表示にします。これは、`config/_default/menus.en.toml` ファイルの `[[footer]]` セクションで設定できます。 |
| `footer.showCopyright` | `true` | サイトのフッターに著作権文字列を表示するかどうかです。文字列自体は、[言語設定](#言語と-i18n) の `copyright` パラメータを使用してカスタマイズできることに注意してください。 |
| `footer.showThemeAttribution` | `true` | サイトのフッターに「powered by」というテーマの帰属を表示するかどうかです。このメッセージを無効にする場合は、サイトの他の場所たとえば、about ページ)でテーマの帰属を検討してください。 |
| `footer.showAppearanceSwitcher` | `false` | サイトのフッターに外観スイッチャーを表示するかどうかです。 ブラウザのローカルストレージを使用して、訪問者の設定が保持されます。 |
| `footer.showScrollToTop` | `true` | `true` に設定すると、トップへスクロールの矢印が表示されます。 |
### ホームページ(Homepage)
| 名前 | デフォルト | 説明 |
|---|---|---|
| `homepage.layout` | `"profile"` | ホームページのレイアウトです。有効な値は、`page``profile``hero``card``background``custom` です。`custom` に設定した場合、`/layouts/partials/home/custom.html` ファイルを作成して独自のレイアウトを提供する必要があります。詳細については、[ホームページレイアウト]({{< ref "homepage-layout" >}}) セクションを参照してください。 |
| `homepage.homepageImage` | _未設定_ | `hero` レイアウトと `card` レイアウトで使用される画像です。アセットディレクトリからのローカル画像または外部画像 URL として設定できます。詳細については、[ホームページレイアウト]({{< ref "homepage-layout" >}}) セクションを参照してください。 |
| `homepage.showRecent` | `false` | ホームページに最近の記事リストを表示するかどうかです。 |
| `homepage.showRecentItems` | 5 | showRecent が true の場合に表示する記事の数です。変数が0に設定されている場合、または定義されていない場合は、システムはデフォルトで5つの記事に設定されます。 |
| `homepage.showMoreLink` | `false` | ユーザーを事前に定義された場所に移動する「もっと見る」リンクを投稿の最後に表示するかどうかです。 |
| `homepage.showMoreLinkDest` | `/posts` | 「もっと見る」ボタンの移動先です。 |
| `homepage.cardView` | `false` | 最近の記事をカードのギャラリーとして表示します。 |
| `homepage.cardViewScreenWidth` | `false` | 最近の記事カードギャラリーの幅を拡張して、利用可能な幅全体を使用します。 |
| `homepage.layoutBackgroundBlur` | `false` | ホームページレイアウトの背景画像をスクロールに合わせてぼかします。 |
### 記事(Article)
| 名前 | デフォルト     | 説明 |
|---|---|---|
| `article.showDate` | `true` | 記事の日付を表示するかどうかです。 |
| `article.showViews` | `false` | 記事の表示回数を表示するかどうかです。これには Firebase 統合を有効にする必要があります。以下をご覧ください。 |
| `article.showLikes` | `false` | 記事のいいねを表示するかどうかです。これには Firebase 統合を有効にする必要があります。以下をご覧ください。 |
| `article.showDateOnlyInArticle` | `false` | 記事リスト/カードに表示されていない場合でも、記事内に日付を表示します。 |
| `article.showDateUpdated` | `false` | 記事が更新された日付を表示するかどうかです。 |
| `article.showAuthor` | `true` | 記事のフッターに著者ボックスを表示するかどうかです。 |
| `article.showAuthorBottom` | `false` | 著者ボックスは、各ページの上部ではなく下部に表示されます。 |
| `article.showHero` | `false` | サムネイル画像を各記事ページ内でヒーロー画像として表示するかどうかです。 |
| `article.heroStyle` | _未設定_ | ヒーロー画像を表示するスタイルです。有効なオプションは、`basic``big``background``thumbAndBackground` です。 |
| `article.layoutBackgroundBlur` | `true` | 背景記事 heroStyle の背景画像をスクロールに合わせてぼかします。 |
| `article.layoutBackgroundHeaderSpace` | `true` | ヘッダーと本文の間にスペースを追加します。 |
| `article.showBreadcrumbs` | `false` | 記事のヘッダーにパンくずリストを表示するかどうかです。 |
| `article.showDraftLabel` | `true` | サイトが `--buildDrafts` でビルドされたときに、記事の横にドラフトインジケータを表示するかどうかです。 |
| `article.showEdit` | `false` | 記事コンテンツを編集するためのリンクを表示するかどうかです。 |
| `article.editURL` | _未設定_ | `article.showEdit` がアクティブな場合、編集リンクの URL です。 |
| `article.editAppendPath` | `true` | `article.showEdit` がアクティブな場合、現在の記事へのパスを `article.editURL` で設定された URL に追加するかどうかです。 |
| `article.seriesOpened` | `false` | シリーズモジュールがデフォルトで開いた状態で表示されるかどうかです。 |
| `article.showHeadingAnchors` | `true` | 記事内の見出しの横にアンカーリンク見出しを表示するかどうかです。 |
| `article.showPagination` | `true` | 記事のフッターに次/前の記事リンクを表示するかどうかです。 |
| `article.invertPagination` | `false` | 次/前の記事リンクの方向を反転するかどうかです。 |
| `article.showReadingTime` | `true` | 記事の読了時間を表示するかどうかです。 |
| `article.showTableOfContents` | `false` | 記事に目次を表示するかどうかです。 |
| `article.showRelatedContent` | `false` | 各投稿の関連記事を表示します。`config.toml` に追加の設定が必要になる場合があります。この機能を有効にする場合は、テーマの `config.toml` を確認し、関連するすべての _related_ エントリをコピーしてください。また、関連記事については [Hugo のドキュメント](https://gohugo.io/content-management/related/) も確認してください。 |
| `article.relatedContentLimit` | `3` | `showRelatedContent` がオンになっている場合に表示する関連記事の上限です。 |
| `article.showTaxonomies` | `false` | この記事に関連するタクソノミーを表示するかどうかです。 |
| `article.showAuthorsBadges` | `false` | `authors` タクソノミーを記事またはリストのヘッダーに表示するかどうかです。これには、「複数の著者」と `authors` タクソノミーの設定が必要です。この機能の設定方法の詳細については、[このページ]({{< ref "multi-author" >}}) を確認してください。 |
| `article.showWordCount` | `false` | 記事の単語数を表示するかどうかです。 |
| `article.showComments` | `false` | 記事のフッターの後に [コメントパーシャル]({{< ref "partials#コメント" >}}) を含めるかどうかです。 |
| `article.sharingLinks` | _未設定_ | 各記事の最後に表示する共有リンクです。指定されていないか、`false` に設定されている場合、リンクは表示されません。使用可能な値は、<br>"linkedin"、"bluesky"、<br>"mastodon"、"twitter"、"reddit"、<br>"pinterest"、"facebook"、"email"、<br>"whatsapp"、"telegram" です。 |
| `article.showZenMode` | `false` | 記事のZenモードリーダー機能を有効にするフラグです。 |
### リスト(List)
| 名前 | デフォルト    | 説明 |
| ---------------------------------- | --------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `list.showHero` | `false` | 各リストページ内でサムネイル画像をヒーロー画像として表示するかどうか。 |
| `list.heroStyle` | _未設定_ | ヒーロー画像の表示スタイル。有効なオプションは `basic``big``background``thumbAndBackground` です。 |
| `list.showBreadcrumbs` | `false` | リストページのヘッダーにパンくずリストを表示するかどうか。 |
| `list.layoutBackgroundBlur` | `true` | `background` リストの heroStyle の背景画像をスクロールでぼかします。 |
| `list.layoutBackgroundHeaderSpace` | `true` | ヘッダーと本文の間にスペースを追加します。 |
| `list.showTableOfContents` | `false` | リストページに目次を表示するかどうか。 |
| `list.showSummary` | `false` | リストページに記事の要約を表示するかどうか。[フロントマター]({{< ref "front-matter" >}}) で要約が提供されていない場合、[サイト設定](#site-configuration) の `summaryLength` パラメータを使用して自動的に生成されます。 |
| `list.showViews` | `false` | リストの閲覧数を表示するかどうか。これを有効にするには、Firebase の統合を有効にする必要があります。以下をご覧ください。 |
| `list.showLikes` | `false` | リストのいいね数を表示するかどうか。これを有効にするには、Firebase の統合を有効にする必要があります。以下をご覧ください。 |
| `list.showCards` | `false` | 各記事をカードとして表示するか、シンプルなインラインテキストとして表示するかどうか。 |
| `list.orderByWeight` | `false` | 記事を[重み](https://gohugo.io/methods/page/weight/)で並べ替えるかどうか。 |
| `list.groupByYear` | `true` | リストページで記事を年別にグループ化するかどうか。 |
| `list.cardView` | `false` | リストをカードのギャラリーとして表示します。 |
| `list.cardViewScreenWidth` | `false` | リスト内のカードギャラリーの幅を、利用可能な全幅を使用するように拡張します。 |
| `list.constrainItemsWidth` | `false` | 読みやすくするために、アイテムの幅を `prose` に制限します。フィーチャー画像が利用できない場合に役立ちます。 |
| `list.showTableOfContents` | `false` | 記事に目次を表示するかどうか。 |
### サイトマップ(Sitemap)
| 名前 | デフォルト | 説明 |
| ----------------------- | ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `sitemap.excludedKinds` | `["taxonomy", "term"]` | 生成された `/sitemap.xml` ファイルから除外するコンテンツの種類。許容される値については、[Hugo のドキュメント](https://gohugo.io/templates/section-templates/#page-kinds)を参照してください。 |
### タクソノミー(Taxonomy)
| 名前 | デフォルト   | 説明 |
| ------------------------------ | --------- | ----------------------------------------------------------------------------------------------------------------- |
| `taxonomy.showTermCount` | `true` | タクソノミーリストにタクソノミー用語内の記事数を表示するかどうか。 |
| `taxonomy.showHero` | `false` | 各タクソノミーページ内でサムネイル画像をヒーロー画像として表示するかどうか。 |
| `taxonomy.heroStyle` | _未設定_ | ヒーロー画像の表示スタイル。有効なオプションは `basic``big``background``thumbAndBackground` です。 |
| `taxonomy.showBreadcrumbs` | `false` | タクソノミーのヘッダーにパンくずリストを表示するかどうか。 |
| `taxonomy.showViews` | `false` | 記事の閲覧数を表示するかどうか。これを有効にするには、Firebase の統合を有効にする必要があります。以下をご覧ください。 |
| `taxonomy.showLikes` | `false` | 記事のいいね数を表示するかどうか。これを有効にするには、Firebase の統合を有効にする必要があります。以下をご覧ください。 |
| `taxonomy.showTableOfContents` | `false` | タクソノミーに目次を表示するかどうか。 |
| `taxonomy.cardView` | `false` | リストをカードのギャラリーとして表示します。 |
### ターム(Term)
| 名前 | デフォルト   | 説明 |
| -------------------------- | --------- | ----------------------------------------------------------------------------------------------------------------- |
| `term.showHero` | `false` | 各タームページ内でサムネイル画像をヒーロー画像として表示するかどうか。 |
| `term.heroStyle` | _未設定_ | ヒーロー画像の表示スタイル。有効なオプションは `basic``big``background``thumbAndBackground` です。 |
| `term.showBreadcrumbs` | `false` | タームのヘッダーにパンくずリストを表示するかどうか。 |
| `term.showViews` | `false` | 記事の閲覧数を表示するかどうか。これを有効にするには、Firebase の統合を有効にする必要があります。以下をご覧ください。 |
| `term.showLikes` | `false` | 記事のいいね数を表示するかどうか。これを有効にするには、Firebase の統合を有効にする必要があります。以下をご覧ください。 |
| `term.showTableOfContents` | `false` | タームに目次を表示するかどうか。 |
| `term.groupByYear` | `false` | タームページで記事を年別にグループ化するかどうか。 |
| `term.cardView` | `false` | リストをカードのギャラリーとして表示します。 |
| `term.cardViewScreenWidth` | `false` | リスト内のカードギャラリーの幅を、利用可能な全幅を使用するように拡張します。 |
### Firebase
| 名前 | デフォルト    | 説明 |
| ---------------------------- | --------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `firebase.apiKey` | _未設定_ | Firebase との統合に必要な Firebase API キー。Firebase を Blowfish に統合する方法については、[このページ]({{< ref "firebase-views" >}})を参照してください。 |
| `firebase.authDomain` | _未設定_ | Firebase との統合に必要な Firebase 認証ドメイン。Firebase を Blowfish に統合する方法については、[このページ]({{< ref "firebase-views" >}})を参照してください。 |
| `firebase.projectId` | _未設定_ | Firebase との統合に必要な Firebase プロジェクト ID。Firebase を Blowfish に統合する方法については、[このページ]({{< ref "firebase-views" >}})を参照してください。 |
| `firebase.storageBucket` | _未設定_ | Firebase との統合に必要な Firebase ストレージバケット。Firebase を Blowfish に統合する方法については、[このページ]({{< ref "firebase-views" >}})を参照してください。 |
| `firebase.messagingSenderId` | _未設定_ | Firebase との統合に必要な Firebase メッセージング送信者 ID。Firebase を Blowfish に統合する方法については、[このページ]({{< ref "firebase-views" >}})を参照してください。 |
| `firebase.appId` | _未設定_ | Firebase との統合に必要な Firebase アプリ ID。Firebase を Blowfish に統合する方法については、[このページ]({{< ref "firebase-views" >}})を参照してください。 |
| `firebase.measurementId` | _未設定_ | Firebase との統合に必要な Firebase 測定 ID。Firebase を Blowfish に統合する方法については、[このページ]({{< ref "firebase-views" >}})を参照してください。 |
### Fathom Analytics
| 名前 | デフォルト    | 説明 |
| ------------------------ | --------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- |
| `fathomAnalytics.site` | _未設定_ | ウェブサイト用に Fathom Analytics によって生成されたサイトコード。詳細については、[Analytics のドキュメント]({{< ref "partials#アナリティクス" >}})を参照してください。 |
| `fathomAnalytics.domain` | _未設定_ | Fathom Analytics でカスタムドメインを使用している場合、ここに指定して、`script.js` をカスタムドメインから配信します。 |
### Umami Analytics
| 名前 | デフォルト    | 説明 |
|---|---|---|
| `umamiAnalytics.websiteid` | _未設定_ | ウェブサイト用に Umami Analytics によって生成されたサイトコード。詳細については、[Analytics のドキュメント]({{< ref "partials#アナリティクス" >}})を参照してください。 |
| `umamiAnalytics.domain` | _未設定_ | Umami Analytics でカスタムドメインを使用している場合、ここに指定して、`script.js` をカスタムドメインから配信します。 |
| `umamiAnalytics.dataDomains` | _未設定_ | トラッカーを特定のドメインでのみ実行したい場合は、トラッカースクリプトに指定します。これは、ドメイン名のカンマ区切りリストです。例えば "yoursite.com,yoursite2.com" のようになります。 |
| `umamiAnalytics.scriptName` | script.js | アンチ広告ブロックに使用される `script.js` の名前は、環境変数 `TRACKER_SCRIPT_NAME` で設定されます。 |
| `umamiAnalytics.enableTrackEvent` | `true` | `true` に設定すると、トラックイベントが自動的に追加されます。トラックイベントを追加したくない場合は、`false` に設定してください。 |
### Seline Analytics
| 名前 | デフォルト    | 説明 |
|-----------------------------------|-----------|-------------------------------------------------------------------------------------------------------------------------------------------|
| `selineAnalytics.token` | _未設定_ | ウェブサイト用に Seline Analytics によって生成されたトークン。詳細については、[Analytics のドキュメント]({{< ref "partials#アナリティクス" >}})を参照してください。 |
| `selineAnalytics.enableTrackEvent` | `true` | `true` に設定すると、トラックイベントが自動的に追加されます。トラックイベントを追加したくない場合は、`false` に設定してください。 |
### BuyMeACoffee
| 名前 | デフォルト   | 説明 |
| ----------------------------------- | --------- | -------------------------------------------------------------------------------------- |
| `buymeacoffee.identifier` | _未設定_ | ターゲットの buymeacoffee アカウントの識別子。 |
| `buymeacoffee.globalWidget` | _未設定_ | グローバル buymeacoffee ウィジェットを有効にします。 |
| `buymeacoffee.globalWidgetMessage` | _未設定_ | 新しいユーザーが初めてサイトにアクセスしたときに表示されるメッセージ。 |
| `buymeacoffee.globalWidgetColor` | _未設定_ | ウィジェットの色16進数形式。 |
| `buymeacoffee.globalWidgetPosition` | _未設定_ | ウィジェットの位置。例えば "Left" または "Right" |
### verification
| 名前 | デフォルト  | 説明 |
| ------------------------ | --------- | ------------------------------------------------------------------------------------------------------- |
| `verification.google` | _未設定_ | サイトメタデータに含まれる、Google が提供するサイト確認文字列。 |
| `verification.bing` | _未設定_ | サイトメタデータに含まれる、Bing が提供するサイト確認文字列。 |
| `verification.pinterest` | _未設定_ | サイトメタデータに含まれる、Pinterest が提供するサイト確認文字列。 |
| `verification.yandex` | _未設定_ | サイトメタデータに含まれる、Yandex が提供するサイト確認文字列。 |
<!-- prettier-ignore-end -->
## RSSNext
| 名前 | デフォルト    | 説明 |
| ------------------------ | --------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `rssnext.feedId` | _未設定_ | [RSSNext/Follow](https://follow.is/) によって提供される rss `feedId` 文字列。`rss.xml` に含まれ、rss フィードを自身のものとしてクレームするのに役立ちます。 |
| `rssnext.userId` | _未設定_ | [RSSNext/Follow](https://follow.is/) によって提供される rss `userId` 文字列。`rss.xml` に含まれ、rss フィードを自身のものとしてクレームするのに役立ちます。 |
## その他の設定ファイル
このテーマには `markup.toml` 設定ファイルも含まれています。このファイルには、Hugo が Blowfish で構築されたサイトを正しく生成するために重要なパラメータがいくつか含まれています。
このファイルが常に config ディレクトリに存在し、必要な値が設定されていることを確認してください。そうしないと、特定の機能が正しく機能せず、意図しない動作を引き起こす可能性があります。

View file

@ -0,0 +1,382 @@
---
title: "Configuration"
weight: 4
draft: false
description: "All the configuration variables available in Blowfish."
slug: "configuration"
tags: ["config", "docs"]
series: ["Documentation"]
series_order: 4
---
Blowfish is a highly customisable theme and uses some of the latest Hugo features to simplify how it is configured.
The theme ships with a default configuration that gets you up and running with a basic blog or static website.
{{< alert "fire" >}}
We just launched a CLI tool to help you get started with Blowfish. It will help you with installation and configuration. Install the CLI tool globally using:
```bash
npx blowfish-tools
```
{{< /alert >}}
> Configuration files bundled with the theme are provided in TOML format as this is the default Hugo syntax. Feel free to convert your config to YAML or JSON if you wish.
The default theme configuration is documented in each file so you can freely adjust the settings to meet your needs.
{{< alert >}}
As outlined in the [installation instructions]({{< ref "/docs/installation#set-up-theme-configuration-files" >}}), you should adjust your theme configuration by modifying the files in the `config/_default/` folder of your Hugo project and delete the `config.toml` file in your project root.
{{< /alert >}}
## Site configuration
Standard Hugo configuration variables are respected throughout the theme, however there are some specific things that should be configured for the best experience.
The site configuration is managed through the `config/_default/config.toml` file. The table below outlines all the settings that the Blowfish takes advantage of.
Note that the variable names provided in this table use dot notation to simplify the TOML data structure (ie. `outputs.home` refers to `[outputs] home`).
<!-- prettier-ignore-start -->
| Name | Default | Description |
| ------------------------ | ------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `theme` | `"blowfish"` | When using Hugo Modules this config value should be removed. For all other installation types, this must be set to `blowfish` for the theme to function. |
| `baseURL` | _Not set_ | The URL to the root of the website. |
| `defaultContentLanguage` | `"en"` | This value determines the default language of theme components and content. Refer to the [language and i18n](#language-and-i18n) section below for supported language codes. |
| `enableRobotsTXT` | `true` | When enabled, a `robots.txt` file will be created in the site root that allows search engines to crawl the entire site. If you prefer to provide your own pre-made `robots.txt`, set to `false` and place your file in the `static` directory. For complete control, you may provide a [custom layout]({{< ref "content-examples#custom-layouts" >}}) to generate this file. |
| `pagination.pagerSize` | `10` | The number of articles listed on each page of the article listing. |
| `summaryLength` | `0` | The number of words that are used to generate the article summary when one is not provided in the [front matter]({{< ref "front-matter" >}}). A value of `0` will use the first sentence. This value has no effect when summaries are hidden. |
| `outputs.home` | `["HTML", "RSS", "JSON"]` | The output formats that are generated for the site. Blowfish requires HTML, RSS and JSON for all theme components to work correctly. |
| `permalinks` | _Not set_ | Refer to the [Hugo docs](https://gohugo.io/content-management/urls/#permalinks) for permalink configuration. |
| `taxonomies` | _Not set_ | Refer to the [Organising content]({{< ref "getting-started#organising-content" >}}) section for taxonomy configuration. |
<!-- prettier-ignore-end -->
## Thumbnails
Blowfish was built so it would be easy to add visual support to your articles. If your familiar with Hugo article structure, you just need to place an image file (almost all formats are supported but we recommend `.png` or `.jpg`) that starts with `feature*` inside your article folder. And that's it, Blowfish will then able to both use the image as a thumbnail within your website as well as for <a target="_blank" href="https://oembed.com/">oEmbed</a> cards across social platforms.
[Here]({{< ref "thumbnails" >}}) is also a guide with more info and a [sample]({{< ref "thumbnail_sample" >}}) if you want to see how you can do it.
## Language and i18n
Blowfish is optimised for full multilingual websites and theme assets are translated into several languages out of the box. The language configuration allows you to generate multiple versions of your content to provide a customised experience to your visitors in their native language.
The theme currently supports the following languages by default:
| Language | Code |
| ---------------------------- | ------- |
| Arabic | `ar` |
| Bulgarian | `bg` |
| Bengali | `bn` |
| Catalan | `ca` |
| Czech | `cs` |
| German | `de` |
| English | `en` |
| Esperanto | `eo` |
| Spanish (Spain) | `es` |
| Finnish | `fi` |
| French | `fr` |
| Galician | `gl` |
| Hebrew | `he` |
| Croatian | `hr` |
| Hungarian | `hu` |
| Indonesian | `id` |
| Italian | `it` |
| Japanese | `ja` |
| Korean | `ko` |
| Dutch | `nl` |
| Persian | `fa` |
| Polish | `pl` |
| Portuguese (Brazil) | `pt-br` |
| Portuguese (Portugal) | `pt-pt` |
| Romanian | `ro` |
| Russian | `ru` |
| Turkish | `tr` |
| Vietnamese | `vi` |
| Simplified Chinese (China) | `zh-cn` |
| Traditional Chinese (Taiwan) | `zh-tw` |
The default translations can be overridden by creating a custom file in `i18n/[code].yaml` that contains the translation strings. You can also use this method to add new languages. If you'd like to share a new translation with the community, please [open a pull request](https://github.com/nunocoracao/blowfish/pulls).
### Configuration
In order to be as flexible as possible, a language configuration file needs to be created for each language on the website. By default Blowfish includes an English language configuration at `config/_default/languages.en.toml`.
The default file can be used as a template to create additional languages, or renamed if you wish to author your website in a language other than English. Simply name the file using the format `languages.[language-code].toml`.
{{< alert >}}
**Note:** Ensure the `defaultContentLanguage` parameter in the [site configuration](#site-configuration) matches the language code in your language config filename.
{{< /alert >}}
#### Global
<!-- prettier-ignore-start -->
| Name | Default | Description |
| -------------- | ------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `languageCode` | `"en"` | The Hugo language code for this file. It can be a top-level language (ie. `en`) or a sub-variant (ie. `en-au`) and should match the language code in the filename. Hugo expects this value to always be in lowercase. For proper HTML compliance, set the `isoCode` parameter which is case-sensitive. |
| `languageName` | `"English"` | The name of the language. |
| `weight` | `1` | The weight determines the order of languages when building multilingual sites. |
| `title` | `"Blowfish"` | The title of the website. This will be displayed in the site header and footer. |
<!-- prettier-ignore-end -->
#### Params
<!-- prettier-ignore-start -->
| Name | Default | Description |
| ---------------------- | ------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `params.displayName` | `"EN"` | The name used when the language appears on the website. |
| `params.isoCode` | `"en"` | The ISO language code for HTML metadata purposes. It can be a top-level language (ie. `en`) or a sub-variant (ie. `en-AU`). |
| `params.rtl` | `false` | Whether or not this is a RTL language. Set to `true` to reflow content from right-to-left. Blowfish fully supports using RTL and LTR languages at the same time and will dynamically adjust to both. |
| `params.dateFormat` | `"2 January 2006"` | How dates are formatted in this language. Refer to the [Hugo docs](https://gohugo.io/functions/format/#gos-layout-string) for acceptable formats. |
| `params.logo` | _Not set_ | The relative path to the site logo file within the `assets/` folder. The logo file should be provided at 2x resolution and supports any image dimensions. |
| `params.secondaryLogo` | _Not set_ | The relative path to the secondary site logo file within the `assets/` folder. The logo file should be provided at 2x resolution and supports any image dimensions. This should have an inverted/contrasting colour scheme to `logo`. If set, this logo will be shown when users toggle from the `defaultAppearance` mode. |
| `params.description` | _Not set_ | The website description. This will be used in the site metadata. |
| `params.copyright` | _Not set_ | A Markdown string for the site footer copyright message can include the placeholder { year } to dynamically insert the current year. If none is provided, Blowfish will automatically generate a copyright string using the site `title`. |
<!-- prettier-ignore-end -->
##### Author
| Name | Default | Description |
| ---------------------------- | --------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `params.author.name` | _Not set_ | The author's name. This will be displayed in article footers, and on the homepage when the profile layout is used. |
| `params.author.email` | _Not set_ | The author's email. This will be used if the reply-via-email functionality is enabled. |
| `params.author.image` | _Not set_ | Path to the image file of the author. The image should be a 1:1 aspect ratio. The image can be placed in the site's `assets/` folder or can be external url. |
| `params.author.imageQuality` | `96` | The author's image file will be treated as a "high quality" image to minimize artifacts on the front page. Value range 1-100. |
| `params.author.headline` | _Not set_ | A Markdown string containing the author's headline. It will be displayed on the profile homepage under the author's name. |
| `params.author.bio` | _Not set_ | A Markdown string containing the author's bio. It will be displayed in article footers. |
| `params.author.links` | _Not set_ | The links to display alongside the author's details. The config file contains example links which can simply be uncommented to enable. The order that the links are displayed is determined by the order they appear in the array. Custom links can be added by providing corresponding SVG icon assets in `assets/icons/`. |
<!-- prettier-ignore-end -->
### Menus
Blowfish also supports language-specific menu configurations. Menu config files follow the same naming format as the languages file. Simply provide the language code in the file name to tell Hugo which language the file relates to.
Menu config files are named with the format `menus.[language-code].toml`. Always ensure that the language code used in the menus configuration matches the languages configuration.
The [Getting Started]({{< ref "getting-started#menus" >}}) section explains more about the structure of this file. You can also refer to the [Hugo menu docs](https://gohugo.io/content-management/menus/) for more configuration examples.
## Theme parameters
Blowfish provides a large number of configuration parameters that control how the theme functions. The table below outlines every available parameter in the `config/_default/params.toml` file.
Many of the article defaults here can be overridden on a per article basis by specifying it in the front matter. Refer to the [Front Matter]({{< ref "front-matter" >}}) section for further details.
<!-- prettier-ignore-start -->
### Global
| Name | Default | Description |
| ------------------------------- | ------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `colorScheme` | `"blowfish"` | The theme colour scheme to use. Valid values are `blowfish` (default), `avocado`, `fire`, `ocean`, `forest`, `princess`, `neon`, `bloody`, `terminal`, `marvel`, `noir`, `autumn`, `congo`, and`slate`. Refer to the [Colour Schemes]({{< ref "getting-started#colour-schemes" >}}) section for more details. |
| `defaultAppearance` | `"light"` | The default theme appearance, either `light` or `dark`. |
| `autoSwitchAppearance` | `true` | Whether the theme appearance automatically switches based upon the visitor's operating system preference. Set to `false` to force the site to always use the `defaultAppearance`. |
| `enableSearch` | `false` | Whether site search is enabled. Set to `true` to enable search functionality. Note that the search feature depends on the `outputs.home` setting in the [site configuration](#site-configuration) being set correctly. |
| `enableCodeCopy` | `false` | Whether copy-to-clipboard buttons are enabled for `<code>` blocks. The `highlight.noClasses` parameter must be set to `false` for code copy to function correctly. Read more about [other configuration files](#other-configuration-files) below. |
| `replyByEmail` | `false` | Whether the reply-by-email link is enabled after post. The `author.email` parameter in `config/_default/languages.en.toml` must be set. |
| `forgejoDefaultServer` | _Not set_ | The default `server` parameter for the `forgejo` shortcode. |
| `giteaDefaultServer` | _Not set_ | The default `server` parameter for the `gitea` shortcode. |
| `mainSections` | _Not set_ | The sections that should be displayed in the recent articles list. If not provided the section with the greatest number of articles is used. |
| `showViews` | _Not set_ | Whether or not articles and list views are displayed. This requires firebase integrations to be enabled, look below. |
| `showLikes` | _Not set_ | Whether or not articles and list likes are displayed. This requires firebase integrations to be enabled, look below. |
| `robots` | _Not set_ | String that indicates how robots should handle your site. If set, it will be output in the page head. Refer to [Google's docs](https://developers.google.com/search/docs/advanced/robots/robots_meta_tag#directives) for valid values. |
| `disableImageZoom` | `false` | Disables image zoom feature across all the images in the site. |
| `disableImageOptimization` | `false` | Disables image resize and optimization features across all the images in the site. |
| `backgroundImageWidth` | `1200` | Width (in pixels) to scale background images to. |
| `disableTextInHeader` | `false` | Disables text in header, useful for logo based headers. |
| `defaultBackgroundImage` | _Not set_ | Default background image for both `background` homepage layout and `background` hero style |
| `defaultFeaturedImage` | _Not set_ | Default background image for all `featured` images across articles, will be overridden by a local `featured` image. |
| `highlightCurrentMenuArea` | _Not set_ | Marks menu entries in the main menu when selected |
| `smartTOC` | _Not set_ | Activate smart Table of Contents, items in view will be highlighted. |
| `smartTOCHideUnfocusedChildren` | _Not set_ | When smart Table of Contents is turned on, this will hide deeper levels of the table when they are not in focus. |
### Header
| Name | Default | Description |
| --------------- | --------- | ------------------------------------------------------------------------------------------------------------------- |
| `header.layout` | `"basic"` | Defines the header for the entire site, supported values are `basic`, `fixed`, `fixed-fill`, and `fixed-fill-blur`. |
### Footer
| Name | Default | Description |
| ------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `footer.showMenu` | `true` | Show/hide the footer menu, which can be configured in the `[[footer]]` section of the `config/_default/menus.en.toml` file. |
| `footer.showCopyright` | `true` | Whether or not to show the copyright string in the site footer. Note that the string itself can be customised using the `copyright` parameter in the [languages configuration](#language-and-i18n). |
| `footer.showThemeAttribution` | `true` | Whether or not to show the "powered by" theme attribution in the site footer. If you choose to disable this message, please consider attributing the theme somewhere else on your site (for example, on your about page). |
| `footer.showAppearanceSwitcher` | `false` | Whether or not to show the appearance switcher in the site footer. The browser's local storage is used to persist the visitor's preference. |
| `footer.showScrollToTop` | `true` | When set to `true` the scroll to top arrow is displayed. |
### Homepage
| Name | Default | Description |
| ------------------------------- | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `homepage.layout` | `"profile"` | The layout of the homepage. Valid values are `page`, `profile`, `hero`, `card`, `background`, or `custom`. When set to `custom`, you must provide your own layout by creating a `/layouts/partials/home/custom.html` file. Refer to the [Homepage Layout]({{< ref "homepage-layout" >}}) section for more details. |
| `homepage.homepageImage` | _Not set_ | Image to be used in `hero` and `card` layouts. Can be set as local image from asset directory or external image url. Refer to the [Homepage Layout]({{< ref "homepage-layout" >}}) section for more details. |
| `homepage.showRecent` | `false` | Whether or not to display the recent articles list on the homepage. |
| `homepage.showRecentItems` | 5 | How many articles to display if showRecent is true. If variable is set to 0 or if it isn't defined the system will default to 5 articles. |
| `homepage.showMoreLink` | `false` | Whether or not to display a show more link at the end of your posts that takes the user to a predefined place. |
| `homepage.showMoreLinkDest` | `/posts` | The destination of the show more button. |
| `homepage.cardView` | `false` | Display recent articles as a gallery of cards. |
| `homepage.cardViewScreenWidth` | `false` | Enhance the width of the recent articles card gallery to take the full width available. |
| `homepage.layoutBackgroundBlur` | `false` | Makes the background image in the homepage layout blur with the scroll |
### Article
| Name | Default | Description |
| ------------------------------------- | --------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `article.showDate` | `true` | Whether or not article dates are displayed. |
| `article.showViews` | `false` | Whether or not article views are displayed. This requires firebase integrations to be enabled, look below. |
| `article.showLikes` | `false` | Whether or not article likes are displayed. This requires firebase integrations to be enabled, look below. |
| `article.showDateOnlyInArticle` | `false` | Show date within article even if not displayed in article listings/cards. |
| `article.showDateUpdated` | `false` | Whether or not the dates articles were updated are displayed. |
| `article.showAuthor` | `true` | Whether or not the author box is displayed in the article footer. |
| `article.showAuthorBottom` | `false` | Author boxes are displayed at the bottom of each page instead of the top. |
| `article.showHero` | `false` | Whether the thumbnail image will be shown as a hero image within each article page. |
| `article.heroStyle` | _Not set_ | Style to display the hero image, valid options are: `basic`, `big`, `background`, `thumbAndBackground`. |
| `article.layoutBackgroundBlur` | `true` | Makes the background image in the background article heroStyle blur with the scroll |
| `article.layoutBackgroundHeaderSpace` | `true` | Add space between the header and the body. |
| `article.showBreadcrumbs` | `false` | Whether or not breadcrumbs are displayed in the article header. |
| `article.showDraftLabel` | `true` | Whether or not the draft indicator is shown next to articles when site is built with `--buildDrafts`. |
| `article.showEdit` | `false` | Whether or not the link to edit the article content should be displayed. |
| `article.editURL` | _Not set_ | When `article.showEdit` is active, the URL for the edit link. |
| `article.editAppendPath` | `true` | When `article.showEdit` is active, whether or not the path to the current article should be appended to the URL set at `article.editURL`. |
| `article.seriesOpened` | `false` | Whether or not the series module will be displayed open by default or not. |
| `article.showHeadingAnchors` | `true` | Whether or not heading anchor links are displayed alongside headings within articles. |
| `article.showPagination` | `true` | Whether or not the next/previous article links are displayed in the article footer. |
| `article.invertPagination` | `false` | Whether or not to flip the direction of the next/previous article links. |
| `article.showReadingTime` | `true` | Whether or not article reading times are displayed. |
| `article.showTableOfContents` | `false` | Whether or not the table of contents is displayed on articles. |
| `article.showRelatedContent` | `false` | Display related content for each post. Might required additional configuration to your `config.toml`. Please check the theme `config.toml` if you want to enable this feature and copy all the relevant _related_ entries. Also check [Hugo's docs](https://gohugo.io/content-management/related/) on related content. |
| `article.relatedContentLimit` | `3` | Limit of related articles to display if `showRelatedContent` is turned on. |
| `article.showTaxonomies` | `false` | Whether or not the taxonomies related to this article are displayed. |
| `article.showAuthorsBadges` | `false` | Whether the `authors` taxonomies are are displayed in the article or list header. This requires the setup of `multiple authors` and the `authors` taxonomy. Check [this page]({{< ref "multi-author" >}}) for more details on how to configure that feature. |
| `article.showWordCount` | `false` | Whether or not article word counts are displayed. |
| `article.showComments` | `false` | Whether or not the [comments partial]({{< ref "partials#comments" >}}) is included after the article footer. |
| `article.sharingLinks` | _Not set_ | Which sharing links to display at the end of each article. When not provided, or set to `false` no links will be displayed. Available values are: "linkedin", "bluesky", "mastodon", "twitter", "reddit", "pinterest", "facebook", "email", "whatsapp", and "telegram" |
| `article.showZenMode` | `false` | Flag to activate Zen Mode reading feature for articles. |
### List
| Name | Default | Description |
| ---------------------------------- | --------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `list.showHero` | `false` | Whether the thumbnail image will be shown as a hero image within each list page. |
| `list.heroStyle` | _Not set_ | Style to display the hero image, valid options are: `basic`, `big`, `background`, `thumbAndBackground`. |
| `list.showBreadcrumbs` | `false` | Whether or not breadcrumbs are displayed in the header on list pages. |
| `list.layoutBackgroundBlur` | `true` | Makes the background image in the background list heroStyle blur with the scroll |
| `list.layoutBackgroundHeaderSpace` | `true` | Add space between the header and the body. |
| `list.showTableOfContents` | `false` | Whether or not the table of contents is displayed on list pages. |
| `list.showSummary` | `false` | Whether or not article summaries are displayed on list pages. If a summary is not provided in the [front matter]({{< ref "front-matter" >}}), one will be auto generated using the `summaryLength` parameter in the [site configuration](#site-configuration). |
| `list.showViews` | `false` | Whether or not list views are displayed. This requires firebase integrations to be enabled, look below. |
| `list.showLikes` | `false` | Whether or not list likes are displayed. This requires firebase integrations to be enabled, look below. |
| `list.showCards` | `false` | Whether or not each article is displayed as a card or as simple inline text. |
| `list.orderByWeight` | `false` | Whether or not articles are sorted by [weights](https://gohugo.io/methods/page/weight/). |
| `list.groupByYear` | `true` | Whether or not articles are grouped by year on list pages. |
| `list.cardView` | `false` | Display lists as a gallery of cards. |
| `list.cardViewScreenWidth` | `false` | Enhance the width of card galleries in lists to take the full width available. |
| `list.constrainItemsWidth` | `false` | Limit item width to `prose` to increase readability. Useful when no feature images are available. |
| `list.showTableOfContents` | `false` | Whether or not the table of contents is displayed on articles. |
### Sitemap
| Name | Default | Description |
| ----------------------- | ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `sitemap.excludedKinds` | `["taxonomy", "term"]` | Kinds of content that should be excluded from the generated `/sitemap.xml` file. Refer to the [Hugo docs](https://gohugo.io/templates/section-templates/#page-kinds) for acceptable values. |
### Taxonomy
| Name | Default | Description |
| ------------------------------ | --------- | ---------------------------------------------------------------------------------------------------------- |
| `taxonomy.showTermCount` | `true` | Whether or not the number of articles within a taxonomy term is displayed on the taxonomy listing. |
| `taxonomy.showHero` | `false` | Whether the thumbnail image will be shown as a hero image within each taxonomy page. |
| `taxonomy.heroStyle` | _Not set_ | Style to display the hero image, valid options are: `basic`, `big`, `background`, `thumbAndBackground`. |
| `taxonomy.showBreadcrumbs` | `false` | Whether or not breadcrumbs are displayed in the taxonomy header. |
| `taxonomy.showViews` | `false` | Whether or not article views are displayed. This requires firebase integrations to be enabled, look below. |
| `taxonomy.showLikes` | `false` | Whether or not article likes are displayed. This requires firebase integrations to be enabled, look below. |
| `taxonomy.showTableOfContents` | `false` | Whether or not the table of contents is displayed on taxonomies. |
| `taxonomy.cardView` | `false` | Display lists as a gallery of cards. |
### Term
| Name | Default | Description |
| -------------------------- | --------- | ---------------------------------------------------------------------------------------------------------- |
| `term.showHero` | `false` | Whether the thumbnail image will be shown as a hero image within each term page. |
| `term.heroStyle` | _Not set_ | Style to display the hero image, valid options are: `basic`, `big`, `background`, `thumbAndBackground`. |
| `term.showBreadcrumbs` | `false` | Whether or not breadcrumbs are displayed in the term header. |
| `term.showViews` | `false` | Whether or not article views are displayed. This requires firebase integrations to be enabled, look below. |
| `term.showLikes` | `false` | Whether or not article likes are displayed. This requires firebase integrations to be enabled, look below. |
| `term.showTableOfContents` | `false` | Whether or not the table of contents is displayed on terms. |
| `term.groupByYear` | `false` | Whether or not articles are grouped by year on term pages. |
| `term.cardView` | `false` | Display lists as a gallery of cards. |
| `term.cardViewScreenWidth` | `false` | Enhance the width of card galleries in lists to take the full width available. |
### Firebase
| Name | Default | Description |
| ---------------------------- | --------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `firebase.apiKey` | _Not set_ | Firebase apiKey, required to integrate against Firebase. Check [this page]({{< ref "firebase-views" >}}) for a guide on how to integrate Firebase into Blowfish. |
| `firebase.authDomain` | _Not set_ | Firebase authDomain, required to integrate against Firebase. Check [this page]({{< ref "firebase-views" >}}) for a guide on how to integrate Firebase into Blowfish. |
| `firebase.projectId` | _Not set_ | Firebase projectId, required to integrate against Firebase. Check [this page]({{< ref "firebase-views" >}}) for a guide on how to integrate Firebase into Blowfish. |
| `firebase.storageBucket` | _Not set_ | Firebase storageBucket, required to integrate against Firebase. Check [this page]({{< ref "firebase-views" >}}) for a guide on how to integrate Firebase into Blowfish. |
| `firebase.messagingSenderId` | _Not set_ | Firebase messagingSenderId, required to integrate against Firebase. Check [this page]({{< ref "firebase-views" >}}) for a guide on how to integrate Firebase into Blowfish. |
| `firebase.appId` | _Not set_ | Firebase appId, required to integrate against Firebase. Check [this page]({{< ref "firebase-views" >}}) for a guide on how to integrate Firebase into Blowfish. |
| `firebase.measurementId` | _Not set_ | Firebase measurementId, required to integrate against Firebase. Check [this page]({{< ref "firebase-views" >}}) for a guide on how to integrate Firebase into Blowfish. |
### Fathom Analytics
| Name | Default | Description |
| ------------------------ | --------- | ---------------------------------------------------------------------------------------------------------------------------------------------- |
| `fathomAnalytics.site` | _Not set_ | The site code generated by Fathom Analytics for the website. Refer to the [Analytics docs]({{< ref "partials#analytics" >}}) for more details. |
| `fathomAnalytics.domain` | _Not set_ | If using a custom domain with Fathom Analytics, provide it here to serve `script.js` from the custom domain. |
### Umami Analytics
| Name | Default | Description |
| --------------------------------- | --------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `umamiAnalytics.websiteid` | _Not set_ | The site code generated by Umami Analytics for the website. Refer to the [Analytics docs]({{< ref "partials#analytics" >}}) for more details. |
| `umamiAnalytics.domain` | _Not set_ | If using a custom domain with Umami Analytics, provide it here to serve `script.js` from the custom domain. |
| `umamiAnalytics.dataDomains` | _Not set_ | If you want the tracker to only run on specific domains, provide it for your tracker script. This is a comma delimited list of domain names. Such as "yoursite.com,yoursite2.com". |
| `umamiAnalytics.scriptName` | script.js | The name of the `script.js` used for anti-ad-blocking is configured by the environment variable `TRACKER_SCRIPT_NAME` |
| `umamiAnalytics.enableTrackEvent` | true | When set to `true` track event will add automatically. If you do not want to add track event, set it to `false`. |
### Seline Analytics
| Name | Default | Description |
| ---------------------------------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------ |
| `selineAnalytics.token` | _Not set_ | The token generated by Seline Analytics for the website. Refer to the [Analytics docs]({{< ref "partials#analytics" >}}) for more details. |
| `selineAnalytics.enableTrackEvent` | true | When set to `true` track event will add automatically. If you do not want to add track event, set it to `false`. |
### BuyMeACoffee
| Name | Default | Description |
| ----------------------------------- | --------- | --------------------------------------------------------------------------- |
| `buymeacoffee.identifier` | _Not set_ | The identifier to the target buymeacoffee account. |
| `buymeacoffee.globalWidget` | _Not set_ | Activate the global buymeacoffee widget. |
| `buymeacoffee.globalWidgetMessage` | _Not set_ | Message what will be displayed the first time a new user lands on the site. |
| `buymeacoffee.globalWidgetColor` | _Not set_ | Widget color in hex format. |
| `buymeacoffee.globalWidgetPosition` | _Not set_ | Position of the widget, i.e. "Left" or "Right" |
### Verifications
| Name | Default | Description |
| ------------------------ | --------- | --------------------------------------------------------------------------------------------------------------------------------- |
| `verification.google` | _Not set_ | The site verification string provided by Google to be included in the site metadata. |
| `verification.bing` | _Not set_ | The site verification string provided by Bing to be included in the site metadata. |
| `verification.pinterest` | _Not set_ | The site verification string provided by Pinterest to be included in the site metadata. |
| `verification.yandex` | _Not set_ | The site verification string provided by Yandex to be included in the site metadata. |
| `verification.fediverse` | _Not set_ | The fediverse handle to include in the site metadata. Include the server domain in the username, e.g. `@you@instanceaddress.tld`. |
<!-- prettier-ignore-end -->
## RSSNext
| Name | Default | Description |
| ------------------------ | --------- |--------------------------------------------------------------------------------------------------------------------------------------|
| `rssnext.feedId` | _Not set_ | The rss `feedId` string provided by [RSSNext/Follow](https://follow.is/) to be included in the `rss.xml`, which can helps to claim rss feed as your own. |
| `rssnext.userId` | _Not set_ | The rss `userId` string provided by [RSSNext/Follow](https://follow.is/) to be included in the `rss.xml`, which can helps to claim rss feed as your own. |
## Other configuration files
The theme also includes a `markup.toml` configuration file. This file contains some important parameters that ensure that Hugo is correctly configured to generate sites built with Blowfish.
Always ensure this file is present in the config directory and that the required values are set. Failure to do so may cause certain features to function incorrectly and could result in unintended behaviour.

View file

@ -0,0 +1,371 @@
---
title: "配置"
weight: 4
draft: false
description: "介绍 Blowfish 中所有可用的的配置变量。"
slug: "configuration"
tags: ["配置", "文档"]
series: ["部署教程"]
series_order: 4
---
Blowfish 适宜个高度定制化的主题,使用到了一些 Hugo 中最新的特性来简化配置方式。
主题附带了默认配置,可以让你快速启动一个基本的博客或静态网站。
{{< alert "fire" >}}
我们刚刚推出了 CLI 工具,来帮助你快速上手 Blowfish。它将帮助你进行安装和配置。使用以下命令可以全局范围安装 CLI 工具:
```bash
npx blowfish-tools
```
{{< /alert >}}
> 配置文件是基于 TOML 格式的,这也是 Hugo 默认支持的语法。当然如果你愿意,也可以将配置转换成 YAML 或 JSON 格式。
默认情况下,在每个文件中都定义了主题中的可用参数,因此你可以自由调整设置来满足你的需求。
{{< alert >}}
正如[安装说明]({{< ref "/docs/installation#set-up-theme-configuration-files" >}})中的内容,如果你想调整主题配置,可以修改 Hugo 项目中 `config/_default/` 文件夹下的文件,并删除项目根目录中的 `config.toml` 文件。
{{< /alert >}}
## 网站配置
Blowfish 主题支持了 Hugo 框架中定义的所有标准配置变量。但如果希望有更好的体验,需要设置一些特定的配置。
网站配置是通过 `config/_default/config.toml` 文件管理的。下面的表格展示了 Blowfish 中的所有设置.
值得注意的是,表格中提供的变量名可以使用点表示法来简化 TOML 数据结构,例如 `outputs.home` 指的是 `[outputs] home`
<!-- prettier-ignore-start -->
| 名称 | 默认值 | 描述 |
| ------------------------ | ------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `theme` | `"blowfish"` | 当你使用 Hugo 模块安装时,应该移除这个配置项。但对 Git 子模块或本地文件复制的安装方式,必须将其设置为 blowfish 才能正常工作。 |
| `baseURL` | 无 | 网站 URL 根地址。 |
| `defaultContentLanguage` | `"en"` | 这个值决定了主题中组件和内容所使用的默认语言。 参考 [语言和 i18n](#language-and-i18n) 部分来了解 blowfish 支持的所有语言代码。 |
| `enableRobotsTXT` | `true` | 当开启这个值,`robots.txt` 文件将会被创建在站点根目录, 这将允许搜索引擎抓取整个网站。如果你想要自己提供 `robots.txt`,那么设置这个值为 `false` 并把你的文件放置到 `static` 目录下。 为了实现完全控制,你可以需要提供一个 [自定义布局]({{< ref "content-examples#custom-layouts" >}}) 来生成此文件。 |
| `pagination.pagerSize` | `10` | 定义文章列表中,每页展示的文章数量。 |
| `summaryLength` | `0` | 当[扉页参数]({{< ref "front-matter" >}}) 中没有提供文章摘要时,此参数定义了自动生成文章摘要的单词数量。如果值为`0`,则默认使用第一句话作为摘要。当摘要被隐藏,这个值没有任何效果。 |
| `outputs.home` | `["HTML", "RSS", "JSON"]` | 为站点自动生成输出格式。Blowfish 要求 HTML、RSS 和 JSON 都需要有,以保证主题组件可以正常运作。 |
| `permalinks` | 无 | 参考 [Hugo 文档](https://gohugo.io/content-management/urls/#permalinks) 中的自定义文章的固定链接配置。 |
| `taxonomies` | 无 | 参考 [整理内容]({{< ref "getting-started#organising-content" >}}) 中的分类器配置。 |
<!-- prettier-ignore-end -->
## 缩略图
Blowfish 的创立开端旨在便于为文章添加视觉效果。如果你熟悉 Hugo 的文章结构,只需要在你文章所在的文件夹中,放置一个以`feature*`开头的图像文件Blowfish支持所有格式的文件但更推荐使用 `.png``.jpg`。就这样Blowfish 就能够将图像文件作为文章的缩略图,而且能够在社交平台的 `<a target="_blank" href="https://oembed.com/">oEmbed</a>` 卡片中使用。
[这里]({{< ref "thumbnails" >}}) 可以看到更多内容,同时我们提供了一个[示例]({{< ref "thumbnail_sample" >}}),以便你具体看看如何操作。
## 语言和i18n
Blowfish 针对多语言网站进行了优化,主题的资源素材目前已经翻译成了多个语言版本。语言配置允许你生成多个版本的内容介绍,为网站的访问者提供他们母语的定制化体验。
Blowfish 主题目前默认支持了以下语言:
| 语言 | 代码 |
| ---------------------------- | ------- |
| Arabic | `ar` |
| Bulgarian | `bg` |
| Bengali | `bn` |
| Catalan | `ca` |
| Czech | `cs` |
| German | `de` |
| English | `en` |
| Esperanto | `eo` |
| Spanish (Spain) | `es` |
| Finnish | `fi` |
| French | `fr` |
| Hebrew | `he` |
| Croatian | `hr` |
| Hungarian | `hu` |
| Indonesian | `id` |
| Italian | `it` |
| Japanese | `ja` |
| Korean | `ko` |
| Dutch | `nl` |
| Polish | `pl` |
| Portuguese (Brazil) | `pt-br` |
| Portuguese (Portugal) | `pt-pt` |
| Romanian | `ro` |
| Russian | `ru` |
| Turkish | `tr` |
| Vietnamese | `vi` |
| Simplified Chinese (China) | `zh-cn` |
| Traditional Chinese (Taiwan) | `zh-tw` |
组件和静态资源的默认翻译在 `i18n/[code].yaml` 文件中,当然如果你想自定义,覆盖对应的文件即可。你也可以使用这种方法添加新的语言。如果你想与社区分享心得翻译,请[提交PR](https://github.com/nunocoracao/blowfish/pulls)。
### 配置
为了让 Blowfish 尽可能的灵活每个网站都至少语言创建一个语言配置文件。默认情况下Blowfish 提供了 `config/_default/languages.en.toml` 文件以默认支持英语。
默认的文件可以用来作为创建其他语言的一个模板,如果你希望用英语以外的语言撰写网站,也可以对其重命名。只需要格式遵循 `languages.[language-code].toml` 的命名即可。
{{< alert >}}
**注意:** 保证 [网站设置](#site-configuration) 中的 `defaultContentLanguage`参数和你提供的语言配置文件相匹配。
{{< /alert >}}
#### 全局
<!-- prettier-ignore-start -->
| 名称 | 默认值 | 描述 |
| -------------- | ------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `languageCode` | `"en"` | Hugo 中的默认语言代码。他可以是一个高层级语言(例如 `en`),也可以是一个变体子语言(例如 `en-au`),但一定需要和语言配置文件中的语言代码相匹配。为了符合 HTML 的规范并设置设置大小写敏感的 `isoCode`Hugo希望这个值最好是小写。 |
| `languageName` | `"English"` | 语言名称。 |
| `weight` | `1` | 权重决定了在构建多语言时的语言顺序。 |
| `title` | `"Blowfish"` | 网站的标题。它将在网站头部和底部进行展示。 |
<!-- prettier-ignore-end -->
#### 参数
<!-- prettier-ignore-start -->
| 名称 | 默认值 | 描述 |
| ---------------------- | ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `params.displayName` | `"EN"` | 语言在网站中的展示名。 |
| `params.isoCode` | `"en"` | 用于 HTML 元数据的 ISO 语言代码。他可以是一个高层级语言(例如 `en`),也可以是一个变体子语言(例如 `en-au`)。 |
| `params.rtl` | `false` | 用于指定是否是 RTL 语言。设置为 `true` 则网站会从右向左重拍内容。Blowfish 完全支持同时使用 RTL 和 LTR 语言,并将动态调整。 |
| `params.dateFormat` | `"2 January 2006"` | 用于指定如何日期格式化。参考 [Hugo 文档](https://gohugo.io/functions/format/#gos-layout-string) 了解可以支持的格式。 |
| `params.logo` | 无 | `assets/` 文件夹中站点 logo 的相对路径。该 logo 文件需要提供 2x 分辨率并支持任何图像尺寸。 |
| `params.secondaryLogo` | 无 | `assets/` 文件夹中站点次要 logo 的相对路径。该 logo 文件需要提供 2x 分辨率并支持任何图像尺寸。这个 logo 的颜色方案应该是和上面的是相反或对比的。如果设置了这个值,当用户从 `defaultAppearance` 模式切换时,将会显示这个 logo。 |
| `params.description` | 无 | 网站表述。此参数将会被用作站点元数据。 |
| `params.copyright` | 无 | 此参数是一个 Markdown用于网站页脚的版权声明。此参数可以包含占位符 { year } ,以此动态插入当前年份。 如果没有提供Blowfish 将会使用网站 `title` 自动生成版权信息。 |
<!-- prettier-ignore-end -->
#### 作者
| 名称 | 默认值 | 描述 |
| ----------------- | ------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `author.name` | 无 | 作者名。此参数将展示在文章页脚。并且如果主页使用了个人资料布局,也会展示此值。 |
| `author.image` | 无 | 作者头像的文件路径。图像应该是 1:1 的宽高比。可以放在网站的 `assets/` 文件夹中,也可以是外部 URL。 |
| `author.headline` | 无 | 包含作者头衔的 Markdown。它将展示在主页中作者姓名打分下方。 |
| `author.bio` | 无 | 包含作者简介的 Markdown。它将展示在文章页脚。 |
| `author.links` | 无 | 与作者详细信息一起显示的链接。配置文件中包含示例链接,取消注释即可启用。链接展示的顺序由他们在数组中定义的顺序决定。如果你想自定义链接,可以在 `assets/icons/` 中提供相应的SVG图片。 |
<!-- prettier-ignore-end -->
### 菜单
Blowfish 还支持针对特定语言的菜单配置。菜单配置文件的命名规则和语言配置文件的格式类似。只需要在文件名中提供语言代码Hugo 就可以知道这是针对哪种语言的菜单。
菜单配置文件的命名格式是 `menus.[language-code].toml`。请始终确保菜单配置项中使用的语言代码和语言配置相匹配。
[入门指南]({{< ref "getting-started#menus" >}})部分更详细地介绍了这个文件的结构。你还可以参考 [Hugo 菜单文档](https://gohugo.io/content-management/menus/),以获取更多配置示例。
## 主题参数
Blowfish 提供了大量控制主题功能的配置参数,下面的表格中列举了 `config/_default/params.toml` 文件中所有的可用参数。
下面列举的文章参数是全局默认值,都可以在每个文章中的前置元数据内容中进行覆盖。详细可以参考 [扉页参数]({{< ref "front-matter" >}})。
<!-- prettier-ignore-start -->
### 全局
| 名称 | 默认值 | 描述 |
| ------------------------------- | ------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `colorScheme` | `"blowfish"` | 主题使用的颜色方案。合法的值有: `blowfish` (默认)、`avocado``fire``ocean``forest``princess``neon``bloody``terminal``marvel``noir``autumn``congo``slate`。 具体参考[颜色方案]({{< ref "getting-started#colour-schemes" >}})以获取更多信息。 |
| `defaultAppearance` | `"light"` | 默认的主题外观,可以是 `light` 或者 `dark`。 |
| `autoSwitchAppearance` | `true` | 主题外观是否根据访问者操作系统的偏好自动切换。设置为 `false` 会强制网站始终使用 `defaultAppearance`。 |
| `enableSearch` | `false` | 是否开启网站的搜索功能,设为 `true` 即为启用。注意,搜索功能依赖于[站点设置](#site-configuration)中的 `outputs.home` 设置,请确保此值配置正确。 |
| `enableCodeCopy` | `false` | 是否可以将`<code>`代码块复制到剪贴板。想要使用代码复制功能,需要将 `highlight.noClasses` 参数设置为 `false`。 阅读 [其他配置文件](#other-configuration-files) 以获取更多信息。 |
| `mainSections` | 无 | 指定最近文章中应该展示的模块。 如果没有指定,则使用文章数量最多的板块。 |
| `showViews` | 无 | 是否显示文章和列表页面的阅读量。这需要集成 firebase ,具体可以看下面。 |
| `showLikes` | 无 | 是否显示文章和列表页面的点赞量。这需要集成 firebase ,具体可以看下面。 |
| `robots` | 无 | 用于支持搜索引擎爬虫如何处理你的网站。如果设置了该值,它将被输出在页面头部。具体的参数值请参考 [Google 文档](https://developers.google.com/search/docs/advanced/robots/robots_meta_tag#directives)。 |
| `disableImageZoom` | `false` | 禁用网站上所有图片缩放功能。 |
| `disableImageOptimization` | `false` | 禁用图片上所有图片的调整大小和优化功能。 |
| `disableTextInHeader` | `false` | 禁用文本类型的标题,对基于 logo 的标题很有用。 |
| `defaultBackgroundImage` | 无 | 设置默认背景图,用于 `background``hero` 布局下的主页。 |
| `defaultFeaturedImage` | 无 | 设置默认背景图片,用于所有文章的`featured`图片,可以通过文章目录中的 `featured` 图片替换。 |
| `highlightCurrentMenuArea` | 无 | 当菜单被选择时,标记主菜单中的菜单项。 |
| `smartTOC` | 无 | 开启智能目录,视图中的项目将会被高亮显示。 |
| `smartTOCHideUnfocusedChildren` | 无 | 当开启智能目录,如果目录级别不再被聚焦时,将会隐藏更深层次的目录。 |
### 页头
| 名称 | 默认值 | 描述 |
| --------------- | --------- | --------------------------------------------------------------------------------------------- |
| `header.layout` | `"basic"` | 定义整个站点的页头的布局,支持的参数有 `basic``fixed``fixed-fill`、and `fixed-fill-blur`. |
### 页脚
| 名称 | 默认值 | 描述 |
| ------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------- |
| `footer.showMenu` | `true` | 显示/隐藏页面底部菜单,该菜单可以在 `config/_default/menus.en.toml` 文件中的 `[[footer]]` 部分进行配置。 |
| `footer.showCopyright` | `true` | 是否在底部显示 copyright 版权信息。请注意,如果你想定制,可以在[语言配置](#language-and-i18n)中使用 `copyright` 参数。 |
| `footer.showThemeAttribution` | `true` | 是否在网站底部中显示"powered by" 的主题归属信息。如果禁用此参数,请考虑在你网站的其他位置设置主题归属信息,例如在关于页面。 |
| `footer.showAppearanceSwitcher` | `false` | 是否在也页面底部显示外观切换器。浏览器的本地存储会缓存访问者的偏好设置。 |
| `footer.showScrollToTop` | `true` | 当设置为 `true` 时,显示返回顶部的箭头按钮。 |
### 主页
| 名称 | 默认值 | 描述 |
| ------------------------------- | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `homepage.layout` | `"profile"` | 首页布局参数。合法的参数值有: `page``profile``hero``card``background``custom`。当你设置为 `custom` 时,你必须创建 `/layouts/partials/home/custom.html` 文件以定制自己的布局。参考[主页布局]({{< ref "homepage-layout" >}})来获取更多信息。 |
| `homepage.homepageImage` | 无 | 在 `hero``card` 布局中使用的图像。图片可以来自于本地的资源目录,也可以是外部图像 URL。参考 [主页布局]({{< ref "homepage-layout" >}}) 来获取更多信息。 |
| `homepage.showRecent` | `false` | 是否在主页展示最新文章列表。 |
| `homepage.showRecentItems` | 5 | 如果将 `showRecent` 设置为 `true`此参数用于显示多少篇文章。如果没有设置或者为0则默认显示5篇文章。 |
| `homepage.showMoreLink` | `false` | 是否在主页底部添加“显示更多”,该链接会降会用带到一个预定义位置。 |
| `homepage.showMoreLinkDest` | `/posts` | 更多按钮所指向的位置。 |
| `homepage.cardView` | `false` | 将列表展示为卡片容器。 |
| `homepage.cardViewScreenWidth` | `false` | 增强列表中卡片的宽度,使其可以占据可用的全部宽度。 |
| `homepage.layoutBackgroundBlur` | `false` | 向下滚动主页时,是否模糊背景图。 |
### 文章页
| 名称 | 默认值 | 描述 |
| ------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `article.showDate` | `true` | 是否显示日期。 |
| `article.showViews` | `false` | 是否显示文章阅读量。这需要集成 firebase ,具体可以看下面。 |
| `article.showLikes` | `false` | 是否显示文章点赞量。这需要集成 firebase ,具体可以看下面。 |
| `article.showDateOnlyInArticle` | `false` | 是否在文章内显示日期,不影响文章列表或卡片页面的日期显示。 |
| `article.showDateUpdated` | `false` | 是否展示文章的更新日期。 |
| `article.showAuthor` | `true` | 是否在文章底部显示作者框。 |
| `article.showAuthorBottom` | `false` | 作者框显示在每页的底部而不是顶部。 |
| `article.showHero` | `false` | 缩略图是否会在每个页面中作为 hero 图像显示。 |
| `article.heroStyle` | 无 | hero 图像的展示样式,可选的参数值有:`basic``big``background``thumbAndBackground`。 |
| `article.layoutBackgroundBlur` | `true` | 向下滚动文章页时,是否模糊背景图。 |
| `article.layoutBackgroundHeaderSpace` | `true` | 在标题和正文之间添加空白区域间隔。 |
| `article.showBreadcrumbs` | `false` | 是否在标题栏显示面包屑导航。 |
| `article.showDraftLabel` | `true` | 当使用 `--buildDrafts` 构建网站时,是否在文章旁边显示草稿。 |
| `article.showEdit` | `false` | 是否展示编辑文章的链接。 |
| `article.editURL` | 无 | 当激活 `article.showEdit` 参数,此参数用于设置文章的编辑链接。 |
| `article.editAppendPath` | `true` | 当激活 `article.showEdit` 参数,是否将文章的路径附加到 `article.editURL` 参数所设置的 URL 后面。 |
| `article.seriesOpened` | `false` | 是否默认显示打开系列模块、 |
| `article.showHeadingAnchors` | `true` | 是否在文章标题旁添加锚点。 |
| `article.showPagination` | `true` | 是否在文章末尾展示上一篇/下一篇的文章链接。 |
| `article.invertPagination` | `false` | 是否翻转下一篇/上一篇文章链接的方向。 |
| `article.showReadingTime` | `true` | 是否展示文章的阅读时间。如果你的语言包含 CJK 语言,需要在 `config.toml` 中开启 `hasCJKLanguage` 参数。 |
| `article.showTableOfContents` | `false` | 是否展示文章的目录。 |
| `article.showRelatedContent` | `false` | 为文章显示相关内容。如果你想要启用此功能,请检查 `config.toml` 文件并复制所有 *related* 相关的参数,如果你想自定义,也可以对 `config.toml` 添加额外配置。更多内容请参考 [Hugo 文档](https://gohugo.io/content-management/related/) 中关于 *related* 的内容。 |
| `article.relatedContentLimit` | `3` | 如果启用`showRelatedContent`,则限制显示相关文章的数量。 |
| `article.showTaxonomies` | `false` | 是否显示文章的分类或标签信息。 |
| `article.showAuthorsBadges` | `false` | 是否在文章或列表中显示 `authors` 分类。这需要开启多个作者 `multiple authors``authors` 分类法。 请阅读 [这个网页]({{< ref "multi-author" >}}) 来获取更多内容。 |
| `article.showWordCount` | `false` | 是否显示文章的字数。 如果你的语言属于 CJK 语言,需要在 `config.toml` 中开启 `hasCJKLanguage` 参数。 |
| `article.showComments` | `false` | 是否在文章末尾添加 [评论部分]({{< ref "partials#comments" >}})。 |
| `article.sharingLinks` | 无 | 在文章末尾显示的分享链接。如果没有提供或设置为 `false`,则不会显示任何分享链接。可用的值包括:"linkedin"、"bluesky"、"mastodon"、"twitter"、"reddit"、"pinterest"、"facebook"、"email"、"whatsapp" 和 "telegram" |
| `article.showZenMode` | `false` | 指定是否激活文章阅读的禅模式,即隐藏常规的界面元素。 |
### 列表页
| 名称 | 默认值 | 描述 |
| ---------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `list.showHero` | `false` | 缩略图是否会在每个页面中作为 hero 图像显示。 |
| `list.heroStyle` | 无 | hero 图像的展示样式,可选的参数值有:`basic``big``background``thumbAndBackground`。 |
| `list.showBreadcrumbs` | `false` | 是否在标题栏显示面包屑导航。 |
| `list.layoutBackgroundBlur` | `true` | 向下滚动列表页时,是否模糊背景图。 |
| `list.layoutBackgroundHeaderSpace` | `true` | 在标题和正文之间添加空白区域间隔。 |
| `list.showTableOfContents` | `false` | 是否展示目录。 |
| `list.showSummary` | `false` | 是否在列表页显示文章摘要。如果在[扉页参数]({{< ref "front-matter" >}})中没有提供摘要,那么将会使用[站点配置](#site-configuration) 中的 `summaryLength` 参数自动生成一个。 |
| `list.showViews` | `false` | 是否显示文章阅读量。这需要集成 firebase ,具体可以看下面。 |
| `list.showLikes` | `false` | 是否显示文章点赞量。这需要集成 firebase ,具体可以看下面。 |
| `list.showCards` | `false` | 是否将每个文章显示为卡片或简单的内联文本。 |
| `list.groupByYear` | `true` | 是否根据年做聚合。 |
| `list.cardView` | `false` | 将列表展示为卡片容器。 |
| `list.cardViewScreenWidth` | `false` | 增强列表中卡片的宽度,使其可以占据可用的全部宽度。 |
| `list.constrainItemsWidth` | `false` | 将项目宽度限制为 `prose` 以提高可读性。在没有 featurn 图片的时候非常有用。 |
### 网站地图
| 名称 | 默认值 | 描述 |
| ----------------------- | ---------------------- | ----------------------------------------------------------------------------------------------------------------------------------- |
| `sitemap.excludedKinds` | `["taxonomy", "term"]` | 从生成的 `/sitemap.xml` 文件中排除的内容。 具体的配置请参考[Hugo 文档](https://gohugo.io/templates/section-templates/#page-kinds)。 |
### 分类法
| 名称 | 默认值 | 描述 |
| ------------------------------ | ------- | ----------------------------------------------------------------------------------------- |
| `taxonomy.showTermCount` | `true` | 是否在分类列表总显示对应的数量。 |
| `taxonomy.showHero` | `false` | 缩略图是否会在每个页面中作为 hero 图像显示。 |
| `taxonomy.heroStyle` | 无 | hero 图像的展示样式,可选的参数值有:`basic``big``background``thumbAndBackground`。 |
| `taxonomy.showBreadcrumbs` | `false` | 是否在标题栏显示面包屑导航。 |
| `taxonomy.showViews` | `false` | 是否显示文章阅读量。这需要集成 firebase ,具体可以看下面。 |
| `taxonomy.showLikes` | `false` | 是否显示文章点赞量。这需要集成 firebase ,具体可以看下面。 |
| `taxonomy.showTableOfContents` | `false` | 是否显示目录。 |
| `taxonomy.cardView` | `false` | 将列表展示为卡片容器。 |
### 术语
| 名称 | 默认值 | 描述 |
| -------------------------- | ------- | ------------------------------------------------------------------------------------------ |
| `term.showHero` | `false` | 缩略图是否会在每个页面中作为 hero 图像显示。 |
| `term.heroStyle` | 无 | hero 图像的展示样式,可选的参数值有: `basic``big``background``thumbAndBackground`。 |
| `term.showBreadcrumbs` | `false` | 是否在标题栏显示面包屑导航。 |
| `term.showViews` | `false` | 是否显示文章阅读量。这需要集成 firebase ,具体可以看下面。 |
| `term.showLikes` | `false` | 是否显示文章点赞量。这需要集成 firebase ,具体可以看下面。 |
| `term.showTableOfContents` | `false` | 是否显示目录。 |
| `term.groupByYear` | `false` | 是否根据年做聚合。 |
| `term.cardView` | `false` | 将列表展示为卡片容器。 |
| `term.cardViewScreenWidth` | `false` | 增强列表中卡片的宽度,使其可以占据可用的全部宽度。 |
### Firebase(Firebase 平台)
| 名称 | 默认值 | 描述 |
| ---------------------------- | ------ | --------------------------------------------------------------------------------------------------------------------------------------------- |
| `firebase.apiKey` | 无 | Firebase apiKey 与 Firebase 集成的必填参数。了解如何将 Firebase 集成进 Blowfish 请参考 [这个页面]({{< ref "firebase-views" >}})。 |
| `firebase.authDomain` | 无 | Firebase authDomain与 Firebase 集成的必填参数。了解如何将 Firebase 集成进 Blowfish 请参考 [这个页面]({{< ref "firebase-views" >}})。 |
| `firebase.projectId` | 无 | Firebase projectId与 Firebase 集成的必填参数。了解如何将 Firebase 集成进 Blowfish 请参考 [这个页面]({{< ref "firebase-views" >}})。 |
| `firebase.storageBucket` | 无 | Firebase storageBucket与 Firebase 集成的必填参数。了解如何将 Firebase 集成进 Blowfish 请参考 [这个页面]({{< ref "firebase-views" >}})。 |
| `firebase.messagingSenderId` | 无 | Firebase messagingSenderId与 Firebase 集成的必填参数。了解如何将 Firebase 集成进 Blowfish 请参考 [这个页面]({{< ref "firebase-views" >}})。 |
| `firebase.appId` | 无 | Firebase appId与 Firebase 集成的必填参数。了解如何将 Firebase 集成进 Blowfish 请参考 [这个页面]({{< ref "firebase-views" >}})。 |
| `firebase.measurementId` | 无 | Firebase measurementId与 Firebase 集成的必填参数。了解如何将 Firebase 集成进 Blowfish 请参考 [这个页面]({{< ref "firebase-views" >}})。 |
### Fathom Analytics(一种网站分析工具)
| 名称 | 默认值 | 描述 |
| ------------------------ | ------ | ------------------------------------------------------------------------------------------- |
| `fathomAnalytics.site` | 无 | 支持 Fathom 站点分析平台。更多详细内容请参考 [分析文档]({{< ref "partials#analytics" >}})。 |
| `fathomAnalytics.domain` | 无 | 如果使用自定义域名的 Fathom Analytics请在此提供以便从自定义域名获取 `script.js`。 |
### Umami Analytics(一种网站分析工具)
| Name | Default | Description |
|------------------------------|-----------|-------------------------------------------------------------------------------------|
| `umamiAnalytics.websiteid` | 无 | 支持 Umami 站点分析平台。更多详细内容请参考 [分析文档]({{< ref "partials#analytics" >}})。 |
| `umamiAnalytics.domain` | 无 | 如果使用自定义域名的 Umami Analytics请在此提供以便从自定义域名获取 `script.js`。 |
| `umamiAnalytics.dataDomains` | 无 | 如果你只想在特别的数个域名中使用 tracker 功能那么你需要设置它。这个参数的值是逗号分隔的域名列表yoursite.com,yoursite2.com。 |
| `umamiAnalytics.scriptName` | script.js | 用于反广告屏蔽的 script.js 名称,由环境变量 `TRACKER_SCRIPT_NAME` 配置。 |
| `umamiAnalytics.enableTrackEvent` | true | 默认会自动添加 Umami Track Event。如果你不想添加 Event那学需要设置为 `false`。 |
### Seline Analytics
| Name | Default | Description |
|-----------------------------------|---------|--------------------------------------------------------------------------|
| `selineAnalytics.token` | 无 | Seline 站点分析平台的 token。更多详细内容请参考 [分析文档]({{< ref "partials#analytics" >}})。 |
| `selineAnalytics.enableTrackEvent` | true | 默认会自动添加 Umami Track Event。如果你不想添加 Event那学需要设置为 `false`。 |
### BuyMeACoffee(赞助平台)
| 名称 | 默认值 | 描述 |
| ----------------------------------- | ------ | ---------------------------------- |
| `buymeacoffee.identifier` | 无 | buymeacoffee 账号的用户名。 |
| `buymeacoffee.globalWidget` | 无 | 激活位于全局的 buymeacoffee 组件。 |
| `buymeacoffee.globalWidgetMessage` | 无 | 新用户首次访问网站时显示的消息。 |
| `buymeacoffee.globalWidgetColor` | 无 | 组件颜色,使用 HEX 格式。 |
| `buymeacoffee.globalWidgetPosition` | 无 | 组件位置,例如 "Left" 或 "Right"。 |
### 验证
| 名称 | 默认值 | 描述 |
| ------------------------ | ------ | -------------------------------------------------------- |
| `verification.google` | 无 | Google 提供的网站验证字符串,用于在网站元数据中包含。 |
| `verification.bing` | 无 | Bing 提供的网站验证字符串,用于在网站元数据中包含。 |
| `verification.pinterest` | 无 | Pinterest 提供的网站验证字符串,用于在网站元数据中包含。 |
| `verification.yandex` | 无 | Yandex 提供的网站验证字符串,用于在网站元数据中包含。 |
<!-- prettier-ignore-end -->
## RSSNext
| Name | Default | Description |
| ------------------------ | --------- |---------------------------------------------------------------------------------------------|
| `rssnext.feedId` | _Not set_ | [RSSNext/Follow](https://follow.is) 提供的 `feeId`,这将被自动添加在 `rss.xml` 中以便完成订阅源所有权验证,证明该源属于你自己。 |
| `rssnext.userId` | _Not set_ | [RSSNext/Follow](https://follow.is) 提供的 `userId`,这将被自动添加在 `rss.xml` 中以便完成订阅源所有权验证,证明该源属于你自己 |
## 别的配置文件
Blowfish 主题还包括 `markup.toml` 配置文件。这个文件包含了一些重要参数,来确保 Hugo 正确配置以生成使用 Blowfish 创建的网站。
需要确保次文件在 `config` 目录中,并设置所需要的值。否则某些功能可能无法正确启用,并可能导致意外行为。

View file

@ -0,0 +1,257 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="margin:auto;background:rgba(NaN, NaN, NaN, 0);display:block;z-index:1;position:relative" width="1084" height="322" preserveAspectRatio="xMidYMid" viewBox="0 0 1084 322">
<defs>
<pattern id="pid-0.2950529742247572" x="0" y="0" width="711.6800000000001" height="711.6800000000001" patternUnits="userSpaceOnUse">
<g transform="scale(2.7800000000000002)"><circle cx="180.39755796770348" cy="144.2104368598822" r="0" fill="none" stroke="#5e6fa3" stroke-width="8">
<animate attributeName="r" values="0;17.85434406280291" keyTimes="0;1" calcMode="spline" repeatCount="indefinite" keySplines="0 0.5 0.5 1" dur="12.5s" begin="-44.622752456562516s"></animate>
<animate attributeName="opacity" values="1;0" keyTimes="0;1" calcMode="spline" repeatCount="indefinite" keySplines="0 0.5 0.5 1" dur="12.5s" begin="-44.622752456562516s"></animate>
</circle><circle cx="16.825168708189995" cy="32.834595161139454" r="0" fill="none" stroke="#5e6fa3" stroke-width="8">
<animate attributeName="r" values="0;50.39487920677064" keyTimes="0;1" calcMode="spline" repeatCount="indefinite" keySplines="0 0.5 0.5 1" dur="12.5s" begin="-35.52246651250024s"></animate>
<animate attributeName="opacity" values="1;0" keyTimes="0;1" calcMode="spline" repeatCount="indefinite" keySplines="0 0.5 0.5 1" dur="12.5s" begin="-35.52246651250024s"></animate>
</circle><circle cx="272.82516870819" cy="32.834595161139454" r="0" fill="none" stroke="#5e6fa3" stroke-width="8">
<animate attributeName="r" values="0;50.39487920677064" keyTimes="0;1" calcMode="spline" repeatCount="indefinite" keySplines="0 0.5 0.5 1" dur="12.5s" begin="-35.52246651250024s"></animate>
<animate attributeName="opacity" values="1;0" keyTimes="0;1" calcMode="spline" repeatCount="indefinite" keySplines="0 0.5 0.5 1" dur="12.5s" begin="-35.52246651250024s"></animate>
</circle><circle cx="16.825168708189995" cy="288.8345951611395" r="0" fill="none" stroke="#5e6fa3" stroke-width="8">
<animate attributeName="r" values="0;50.39487920677064" keyTimes="0;1" calcMode="spline" repeatCount="indefinite" keySplines="0 0.5 0.5 1" dur="12.5s" begin="-35.52246651250024s"></animate>
<animate attributeName="opacity" values="1;0" keyTimes="0;1" calcMode="spline" repeatCount="indefinite" keySplines="0 0.5 0.5 1" dur="12.5s" begin="-35.52246651250024s"></animate>
</circle><circle cx="272.82516870819" cy="288.8345951611395" r="0" fill="none" stroke="#5e6fa3" stroke-width="8">
<animate attributeName="r" values="0;50.39487920677064" keyTimes="0;1" calcMode="spline" repeatCount="indefinite" keySplines="0 0.5 0.5 1" dur="12.5s" begin="-35.52246651250024s"></animate>
<animate attributeName="opacity" values="1;0" keyTimes="0;1" calcMode="spline" repeatCount="indefinite" keySplines="0 0.5 0.5 1" dur="12.5s" begin="-35.52246651250024s"></animate>
</circle><circle cx="133.7281341523537" cy="37.557212373233874" r="0" fill="none" stroke="#689cc5" stroke-width="8">
<animate attributeName="r" values="0;24.44944303845901" keyTimes="0;1" calcMode="spline" repeatCount="indefinite" keySplines="0 0.5 0.5 1" dur="16.666666666666668s" begin="-33.76558939460953s"></animate>
<animate attributeName="opacity" values="1;0" keyTimes="0;1" calcMode="spline" repeatCount="indefinite" keySplines="0 0.5 0.5 1" dur="16.666666666666668s" begin="-33.76558939460953s"></animate>
</circle><circle cx="9.311746119524932" cy="139.87259197506899" r="0" fill="none" stroke="#689cc5" stroke-width="8">
<animate attributeName="r" values="0;42.09217911991696" keyTimes="0;1" calcMode="spline" repeatCount="indefinite" keySplines="0 0.5 0.5 1" dur="25s" begin="-16.268240533907207s"></animate>
<animate attributeName="opacity" values="1;0" keyTimes="0;1" calcMode="spline" repeatCount="indefinite" keySplines="0 0.5 0.5 1" dur="25s" begin="-16.268240533907207s"></animate>
</circle><circle cx="265.3117461195249" cy="139.87259197506899" r="0" fill="none" stroke="#689cc5" stroke-width="8">
<animate attributeName="r" values="0;42.09217911991696" keyTimes="0;1" calcMode="spline" repeatCount="indefinite" keySplines="0 0.5 0.5 1" dur="25s" begin="-16.268240533907207s"></animate>
<animate attributeName="opacity" values="1;0" keyTimes="0;1" calcMode="spline" repeatCount="indefinite" keySplines="0 0.5 0.5 1" dur="25s" begin="-16.268240533907207s"></animate>
</circle><circle cx="228.8288862878399" cy="50.59785782429598" r="0" fill="none" stroke="#93dbe9" stroke-width="8">
<animate attributeName="r" values="0;19.868262625397918" keyTimes="0;1" calcMode="spline" repeatCount="indefinite" keySplines="0 0.5 0.5 1" dur="16.666666666666668s" begin="-23.68489264848651s"></animate>
<animate attributeName="opacity" values="1;0" keyTimes="0;1" calcMode="spline" repeatCount="indefinite" keySplines="0 0.5 0.5 1" dur="16.666666666666668s" begin="-23.68489264848651s"></animate>
</circle><circle cx="77.20196271561525" cy="31.611804700405518" r="0" fill="none" stroke="#689cc5" stroke-width="8">
<animate attributeName="r" values="0;45.28258812229561" keyTimes="0;1" calcMode="spline" repeatCount="indefinite" keySplines="0 0.5 0.5 1" dur="25s" begin="-28.661787725688292s"></animate>
<animate attributeName="opacity" values="1;0" keyTimes="0;1" calcMode="spline" repeatCount="indefinite" keySplines="0 0.5 0.5 1" dur="25s" begin="-28.661787725688292s"></animate>
</circle><circle cx="77.20196271561525" cy="287.6118047004055" r="0" fill="none" stroke="#689cc5" stroke-width="8">
<animate attributeName="r" values="0;45.28258812229561" keyTimes="0;1" calcMode="spline" repeatCount="indefinite" keySplines="0 0.5 0.5 1" dur="25s" begin="-28.661787725688292s"></animate>
<animate attributeName="opacity" values="1;0" keyTimes="0;1" calcMode="spline" repeatCount="indefinite" keySplines="0 0.5 0.5 1" dur="25s" begin="-28.661787725688292s"></animate>
</circle><circle cx="153.86297348533364" cy="53.13721410068965" r="0" fill="none" stroke="#5e6fa3" stroke-width="8">
<animate attributeName="r" values="0;56.59657006893606" keyTimes="0;1" calcMode="spline" repeatCount="indefinite" keySplines="0 0.5 0.5 1" dur="16.666666666666668s" begin="-26.846959941207736s"></animate>
<animate attributeName="opacity" values="1;0" keyTimes="0;1" calcMode="spline" repeatCount="indefinite" keySplines="0 0.5 0.5 1" dur="16.666666666666668s" begin="-26.846959941207736s"></animate>
</circle><circle cx="153.86297348533364" cy="309.1372141006897" r="0" fill="none" stroke="#5e6fa3" stroke-width="8">
<animate attributeName="r" values="0;56.59657006893606" keyTimes="0;1" calcMode="spline" repeatCount="indefinite" keySplines="0 0.5 0.5 1" dur="16.666666666666668s" begin="-26.846959941207736s"></animate>
<animate attributeName="opacity" values="1;0" keyTimes="0;1" calcMode="spline" repeatCount="indefinite" keySplines="0 0.5 0.5 1" dur="16.666666666666668s" begin="-26.846959941207736s"></animate>
</circle><circle cx="238.25141956589107" cy="242.3948925366868" r="0" fill="none" stroke="#689cc5" stroke-width="8">
<animate attributeName="r" values="0;7.110432319564012" keyTimes="0;1" calcMode="spline" repeatCount="indefinite" keySplines="0 0.5 0.5 1" dur="25s" begin="-22.8377648779141s"></animate>
<animate attributeName="opacity" values="1;0" keyTimes="0;1" calcMode="spline" repeatCount="indefinite" keySplines="0 0.5 0.5 1" dur="25s" begin="-22.8377648779141s"></animate>
</circle><circle cx="171.29587360943597" cy="93.62941553592991" r="0" fill="none" stroke="#93dbe9" stroke-width="8">
<animate attributeName="r" values="0;64.80517552507085" keyTimes="0;1" calcMode="spline" repeatCount="indefinite" keySplines="0 0.5 0.5 1" dur="12.5s" begin="-41.081630071778505s"></animate>
<animate attributeName="opacity" values="1;0" keyTimes="0;1" calcMode="spline" repeatCount="indefinite" keySplines="0 0.5 0.5 1" dur="12.5s" begin="-41.081630071778505s"></animate>
</circle><circle cx="33.7803997203791" cy="200.65918731382288" r="0" fill="none" stroke="#93dbe9" stroke-width="8">
<animate attributeName="r" values="0;23.874060138252702" keyTimes="0;1" calcMode="spline" repeatCount="indefinite" keySplines="0 0.5 0.5 1" dur="25s" begin="-29.74940953893833s"></animate>
<animate attributeName="opacity" values="1;0" keyTimes="0;1" calcMode="spline" repeatCount="indefinite" keySplines="0 0.5 0.5 1" dur="25s" begin="-29.74940953893833s"></animate>
</circle><circle cx="171.68455092137125" cy="208.29640936292603" r="0" fill="none" stroke="#689cc5" stroke-width="8">
<animate attributeName="r" values="0;10.804694032911527" keyTimes="0;1" calcMode="spline" repeatCount="indefinite" keySplines="0 0.5 0.5 1" dur="12.5s" begin="-46.827942545330814s"></animate>
<animate attributeName="opacity" values="1;0" keyTimes="0;1" calcMode="spline" repeatCount="indefinite" keySplines="0 0.5 0.5 1" dur="12.5s" begin="-46.827942545330814s"></animate>
</circle><circle cx="79.4759072969399" cy="14.760241106300118" r="0" fill="none" stroke="#5e6fa3" stroke-width="8">
<animate attributeName="r" values="0;63.07191175406126" keyTimes="0;1" calcMode="spline" repeatCount="indefinite" keySplines="0 0.5 0.5 1" dur="12.5s" begin="-38.31065839827809s"></animate>
<animate attributeName="opacity" values="1;0" keyTimes="0;1" calcMode="spline" repeatCount="indefinite" keySplines="0 0.5 0.5 1" dur="12.5s" begin="-38.31065839827809s"></animate>
</circle><circle cx="79.4759072969399" cy="270.7602411063001" r="0" fill="none" stroke="#5e6fa3" stroke-width="8">
<animate attributeName="r" values="0;63.07191175406126" keyTimes="0;1" calcMode="spline" repeatCount="indefinite" keySplines="0 0.5 0.5 1" dur="12.5s" begin="-38.31065839827809s"></animate>
<animate attributeName="opacity" values="1;0" keyTimes="0;1" calcMode="spline" repeatCount="indefinite" keySplines="0 0.5 0.5 1" dur="12.5s" begin="-38.31065839827809s"></animate>
</circle><circle cx="34.30718832814177" cy="60.207260607353895" r="0" fill="none" stroke="#5e6fa3" stroke-width="8">
<animate attributeName="r" values="0;36.85782580252244" keyTimes="0;1" calcMode="spline" repeatCount="indefinite" keySplines="0 0.5 0.5 1" dur="25s" begin="-33.9202714458405s"></animate>
<animate attributeName="opacity" values="1;0" keyTimes="0;1" calcMode="spline" repeatCount="indefinite" keySplines="0 0.5 0.5 1" dur="25s" begin="-33.9202714458405s"></animate>
</circle><circle cx="290.30718832814176" cy="60.207260607353895" r="0" fill="none" stroke="#5e6fa3" stroke-width="8">
<animate attributeName="r" values="0;36.85782580252244" keyTimes="0;1" calcMode="spline" repeatCount="indefinite" keySplines="0 0.5 0.5 1" dur="25s" begin="-33.9202714458405s"></animate>
<animate attributeName="opacity" values="1;0" keyTimes="0;1" calcMode="spline" repeatCount="indefinite" keySplines="0 0.5 0.5 1" dur="25s" begin="-33.9202714458405s"></animate>
</circle><circle cx="141.57461629003254" cy="187.07605677907222" r="0" fill="none" stroke="#5e6fa3" stroke-width="8">
<animate attributeName="r" values="0;51.82556427519147" keyTimes="0;1" calcMode="spline" repeatCount="indefinite" keySplines="0 0.5 0.5 1" dur="25s" begin="-39.3497070269789s"></animate>
<animate attributeName="opacity" values="1;0" keyTimes="0;1" calcMode="spline" repeatCount="indefinite" keySplines="0 0.5 0.5 1" dur="25s" begin="-39.3497070269789s"></animate>
</circle><circle cx="89.86556463252813" cy="191.98681310799674" r="0" fill="none" stroke="#5e6fa3" stroke-width="8">
<animate attributeName="r" values="0;42.52162149867297" keyTimes="0;1" calcMode="spline" repeatCount="indefinite" keySplines="0 0.5 0.5 1" dur="16.666666666666668s" begin="-17.730611990382005s"></animate>
<animate attributeName="opacity" values="1;0" keyTimes="0;1" calcMode="spline" repeatCount="indefinite" keySplines="0 0.5 0.5 1" dur="16.666666666666668s" begin="-17.730611990382005s"></animate>
</circle><circle cx="135.68751640285163" cy="79.13898775934953" r="0" fill="none" stroke="#93dbe9" stroke-width="8">
<animate attributeName="r" values="0;13.167119065627332" keyTimes="0;1" calcMode="spline" repeatCount="indefinite" keySplines="0 0.5 0.5 1" dur="12.5s" begin="-5.604152896601732s"></animate>
<animate attributeName="opacity" values="1;0" keyTimes="0;1" calcMode="spline" repeatCount="indefinite" keySplines="0 0.5 0.5 1" dur="12.5s" begin="-5.604152896601732s"></animate>
</circle><circle cx="222.37419164851048" cy="172.5138843825768" r="0" fill="none" stroke="#93dbe9" stroke-width="8">
<animate attributeName="r" values="0;30.712438068878654" keyTimes="0;1" calcMode="spline" repeatCount="indefinite" keySplines="0 0.5 0.5 1" dur="16.666666666666668s" begin="-11.730564332626214s"></animate>
<animate attributeName="opacity" values="1;0" keyTimes="0;1" calcMode="spline" repeatCount="indefinite" keySplines="0 0.5 0.5 1" dur="16.666666666666668s" begin="-11.730564332626214s"></animate>
</circle><circle cx="65.37962957434202" cy="71.08214856672792" r="0" fill="none" stroke="#689cc5" stroke-width="8">
<animate attributeName="r" values="0;51.390991126295845" keyTimes="0;1" calcMode="spline" repeatCount="indefinite" keySplines="0 0.5 0.5 1" dur="16.666666666666668s" begin="-38.53817444257383s"></animate>
<animate attributeName="opacity" values="1;0" keyTimes="0;1" calcMode="spline" repeatCount="indefinite" keySplines="0 0.5 0.5 1" dur="16.666666666666668s" begin="-38.53817444257383s"></animate>
</circle><circle cx="146.90696443169887" cy="160.58661584710634" r="0" fill="none" stroke="#5e6fa3" stroke-width="8">
<animate attributeName="r" values="0;30.874027084269912" keyTimes="0;1" calcMode="spline" repeatCount="indefinite" keySplines="0 0.5 0.5 1" dur="16.666666666666668s" begin="-48.61529961868726s"></animate>
<animate attributeName="opacity" values="1;0" keyTimes="0;1" calcMode="spline" repeatCount="indefinite" keySplines="0 0.5 0.5 1" dur="16.666666666666668s" begin="-48.61529961868726s"></animate>
</circle><circle cx="20.6640150520578" cy="116.652000839832" r="0" fill="none" stroke="#689cc5" stroke-width="8">
<animate attributeName="r" values="0;20.32462575632799" keyTimes="0;1" calcMode="spline" repeatCount="indefinite" keySplines="0 0.5 0.5 1" dur="16.666666666666668s" begin="-16.94818532763218s"></animate>
<animate attributeName="opacity" values="1;0" keyTimes="0;1" calcMode="spline" repeatCount="indefinite" keySplines="0 0.5 0.5 1" dur="16.666666666666668s" begin="-16.94818532763218s"></animate>
</circle><circle cx="14.794147949099273" cy="178.87974595952937" r="0" fill="none" stroke="#93dbe9" stroke-width="8">
<animate attributeName="r" values="0;62.66357119046049" keyTimes="0;1" calcMode="spline" repeatCount="indefinite" keySplines="0 0.5 0.5 1" dur="25s" begin="-22.398483724039195s"></animate>
<animate attributeName="opacity" values="1;0" keyTimes="0;1" calcMode="spline" repeatCount="indefinite" keySplines="0 0.5 0.5 1" dur="25s" begin="-22.398483724039195s"></animate>
</circle><circle cx="270.7941479490993" cy="178.87974595952937" r="0" fill="none" stroke="#93dbe9" stroke-width="8">
<animate attributeName="r" values="0;62.66357119046049" keyTimes="0;1" calcMode="spline" repeatCount="indefinite" keySplines="0 0.5 0.5 1" dur="25s" begin="-22.398483724039195s"></animate>
<animate attributeName="opacity" values="1;0" keyTimes="0;1" calcMode="spline" repeatCount="indefinite" keySplines="0 0.5 0.5 1" dur="25s" begin="-22.398483724039195s"></animate>
</circle><circle cx="31.287373376921607" cy="70.1833739363135" r="0" fill="none" stroke="#5e6fa3" stroke-width="8">
<animate attributeName="r" values="0;15.295461964288506" keyTimes="0;1" calcMode="spline" repeatCount="indefinite" keySplines="0 0.5 0.5 1" dur="12.5s" begin="-13.161686681828998s"></animate>
<animate attributeName="opacity" values="1;0" keyTimes="0;1" calcMode="spline" repeatCount="indefinite" keySplines="0 0.5 0.5 1" dur="12.5s" begin="-13.161686681828998s"></animate>
</circle><circle cx="178.84317419706238" cy="167.34091291757605" r="0" fill="none" stroke="#5e6fa3" stroke-width="8">
<animate attributeName="r" values="0;62.162205555011425" keyTimes="0;1" calcMode="spline" repeatCount="indefinite" keySplines="0 0.5 0.5 1" dur="25s" begin="-23.327170625044392s"></animate>
<animate attributeName="opacity" values="1;0" keyTimes="0;1" calcMode="spline" repeatCount="indefinite" keySplines="0 0.5 0.5 1" dur="25s" begin="-23.327170625044392s"></animate>
</circle><circle cx="154.05316621664582" cy="55.033341833431564" r="0" fill="none" stroke="#5e6fa3" stroke-width="8">
<animate attributeName="r" values="0;39.67588542484934" keyTimes="0;1" calcMode="spline" repeatCount="indefinite" keySplines="0 0.5 0.5 1" dur="25s" begin="-15.452897657374963s"></animate>
<animate attributeName="opacity" values="1;0" keyTimes="0;1" calcMode="spline" repeatCount="indefinite" keySplines="0 0.5 0.5 1" dur="25s" begin="-15.452897657374963s"></animate>
</circle><circle cx="72.19223514179198" cy="135.19246311905093" r="0" fill="none" stroke="#689cc5" stroke-width="8">
<animate attributeName="r" values="0;20.804220090813203" keyTimes="0;1" calcMode="spline" repeatCount="indefinite" keySplines="0 0.5 0.5 1" dur="16.666666666666668s" begin="-45.51768235650617s"></animate>
<animate attributeName="opacity" values="1;0" keyTimes="0;1" calcMode="spline" repeatCount="indefinite" keySplines="0 0.5 0.5 1" dur="16.666666666666668s" begin="-45.51768235650617s"></animate>
</circle><circle cx="150.9364802116815" cy="160.51205929354626" r="0" fill="none" stroke="#93dbe9" stroke-width="8">
<animate attributeName="r" values="0;36.57407641397833" keyTimes="0;1" calcMode="spline" repeatCount="indefinite" keySplines="0 0.5 0.5 1" dur="25s" begin="-28.280565367328037s"></animate>
<animate attributeName="opacity" values="1;0" keyTimes="0;1" calcMode="spline" repeatCount="indefinite" keySplines="0 0.5 0.5 1" dur="25s" begin="-28.280565367328037s"></animate>
</circle><circle cx="200.40953970115999" cy="54.21097279269783" r="0" fill="none" stroke="#689cc5" stroke-width="8">
<animate attributeName="r" values="0;18.303774190487488" keyTimes="0;1" calcMode="spline" repeatCount="indefinite" keySplines="0 0.5 0.5 1" dur="25s" begin="-16.214535605827784s"></animate>
<animate attributeName="opacity" values="1;0" keyTimes="0;1" calcMode="spline" repeatCount="indefinite" keySplines="0 0.5 0.5 1" dur="25s" begin="-16.214535605827784s"></animate>
</circle><circle cx="180.31885618742604" cy="242.78087924898603" r="0" fill="none" stroke="#5e6fa3" stroke-width="8">
<animate attributeName="r" values="0;11.71365962730546" keyTimes="0;1" calcMode="spline" repeatCount="indefinite" keySplines="0 0.5 0.5 1" dur="16.666666666666668s" begin="-33.612535536027956s"></animate>
<animate attributeName="opacity" values="1;0" keyTimes="0;1" calcMode="spline" repeatCount="indefinite" keySplines="0 0.5 0.5 1" dur="16.666666666666668s" begin="-33.612535536027956s"></animate>
</circle><circle cx="203.8062010106876" cy="232.68973192108191" r="0" fill="none" stroke="#5e6fa3" stroke-width="8">
<animate attributeName="r" values="0;5.455675580739268" keyTimes="0;1" calcMode="spline" repeatCount="indefinite" keySplines="0 0.5 0.5 1" dur="12.5s" begin="-11.86697370110249s"></animate>
<animate attributeName="opacity" values="1;0" keyTimes="0;1" calcMode="spline" repeatCount="indefinite" keySplines="0 0.5 0.5 1" dur="12.5s" begin="-11.86697370110249s"></animate>
</circle><circle cx="171.6066941076269" cy="48.04474014530398" r="0" fill="none" stroke="#5e6fa3" stroke-width="8">
<animate attributeName="r" values="0;38.59286259496349" keyTimes="0;1" calcMode="spline" repeatCount="indefinite" keySplines="0 0.5 0.5 1" dur="16.666666666666668s" begin="-29.250466319872224s"></animate>
<animate attributeName="opacity" values="1;0" keyTimes="0;1" calcMode="spline" repeatCount="indefinite" keySplines="0 0.5 0.5 1" dur="16.666666666666668s" begin="-29.250466319872224s"></animate>
</circle><circle cx="125.11525876384411" cy="149.77467373569812" r="0" fill="none" stroke="#5e6fa3" stroke-width="8">
<animate attributeName="r" values="0;46.62256816012656" keyTimes="0;1" calcMode="spline" repeatCount="indefinite" keySplines="0 0.5 0.5 1" dur="12.5s" begin="-10.699532836506153s"></animate>
<animate attributeName="opacity" values="1;0" keyTimes="0;1" calcMode="spline" repeatCount="indefinite" keySplines="0 0.5 0.5 1" dur="12.5s" begin="-10.699532836506153s"></animate>
</circle><circle cx="89.16772547042389" cy="100.43557995027065" r="0" fill="none" stroke="#5e6fa3" stroke-width="8">
<animate attributeName="r" values="0;50.90728701564909" keyTimes="0;1" calcMode="spline" repeatCount="indefinite" keySplines="0 0.5 0.5 1" dur="12.5s" begin="-20.057887262682318s"></animate>
<animate attributeName="opacity" values="1;0" keyTimes="0;1" calcMode="spline" repeatCount="indefinite" keySplines="0 0.5 0.5 1" dur="12.5s" begin="-20.057887262682318s"></animate>
</circle><circle cx="163.0802387343303" cy="125.70388388233474" r="0" fill="none" stroke="#5e6fa3" stroke-width="8">
<animate attributeName="r" values="0;60.89399699890593" keyTimes="0;1" calcMode="spline" repeatCount="indefinite" keySplines="0 0.5 0.5 1" dur="16.666666666666668s" begin="-29.04746538184899s"></animate>
<animate attributeName="opacity" values="1;0" keyTimes="0;1" calcMode="spline" repeatCount="indefinite" keySplines="0 0.5 0.5 1" dur="16.666666666666668s" begin="-29.04746538184899s"></animate>
</circle><circle cx="147.29969577601045" cy="40.152117547871356" r="0" fill="none" stroke="#5e6fa3" stroke-width="8">
<animate attributeName="r" values="0;50.17094951058618" keyTimes="0;1" calcMode="spline" repeatCount="indefinite" keySplines="0 0.5 0.5 1" dur="25s" begin="-8.699383046276775s"></animate>
<animate attributeName="opacity" values="1;0" keyTimes="0;1" calcMode="spline" repeatCount="indefinite" keySplines="0 0.5 0.5 1" dur="25s" begin="-8.699383046276775s"></animate>
</circle><circle cx="147.29969577601045" cy="296.15211754787134" r="0" fill="none" stroke="#5e6fa3" stroke-width="8">
<animate attributeName="r" values="0;50.17094951058618" keyTimes="0;1" calcMode="spline" repeatCount="indefinite" keySplines="0 0.5 0.5 1" dur="25s" begin="-8.699383046276775s"></animate>
<animate attributeName="opacity" values="1;0" keyTimes="0;1" calcMode="spline" repeatCount="indefinite" keySplines="0 0.5 0.5 1" dur="25s" begin="-8.699383046276775s"></animate>
</circle><circle cx="50.39439200506233" cy="147.3941729324677" r="0" fill="none" stroke="#689cc5" stroke-width="8">
<animate attributeName="r" values="0;50.69970142939741" keyTimes="0;1" calcMode="spline" repeatCount="indefinite" keySplines="0 0.5 0.5 1" dur="16.666666666666668s" begin="-17.544702694456348s"></animate>
<animate attributeName="opacity" values="1;0" keyTimes="0;1" calcMode="spline" repeatCount="indefinite" keySplines="0 0.5 0.5 1" dur="16.666666666666668s" begin="-17.544702694456348s"></animate>
</circle><circle cx="306.39439200506234" cy="147.3941729324677" r="0" fill="none" stroke="#689cc5" stroke-width="8">
<animate attributeName="r" values="0;50.69970142939741" keyTimes="0;1" calcMode="spline" repeatCount="indefinite" keySplines="0 0.5 0.5 1" dur="16.666666666666668s" begin="-17.544702694456348s"></animate>
<animate attributeName="opacity" values="1;0" keyTimes="0;1" calcMode="spline" repeatCount="indefinite" keySplines="0 0.5 0.5 1" dur="16.666666666666668s" begin="-17.544702694456348s"></animate>
</circle><circle cx="188.7139101584322" cy="210.7115210762685" r="0" fill="none" stroke="#689cc5" stroke-width="8">
<animate attributeName="r" values="0;29.504019948829963" keyTimes="0;1" calcMode="spline" repeatCount="indefinite" keySplines="0 0.5 0.5 1" dur="16.666666666666668s" begin="-32.532647237390165s"></animate>
<animate attributeName="opacity" values="1;0" keyTimes="0;1" calcMode="spline" repeatCount="indefinite" keySplines="0 0.5 0.5 1" dur="16.666666666666668s" begin="-32.532647237390165s"></animate>
</circle><circle cx="114.22207446357659" cy="124.76935492926279" r="0" fill="none" stroke="#5e6fa3" stroke-width="8">
<animate attributeName="r" values="0;11.986008541965333" keyTimes="0;1" calcMode="spline" repeatCount="indefinite" keySplines="0 0.5 0.5 1" dur="12.5s" begin="-16.917226446523447s"></animate>
<animate attributeName="opacity" values="1;0" keyTimes="0;1" calcMode="spline" repeatCount="indefinite" keySplines="0 0.5 0.5 1" dur="12.5s" begin="-16.917226446523447s"></animate>
</circle><circle cx="194.31954289149434" cy="166.65089356408262" r="0" fill="none" stroke="#5e6fa3" stroke-width="8">
<animate attributeName="r" values="0;20.194181381536055" keyTimes="0;1" calcMode="spline" repeatCount="indefinite" keySplines="0 0.5 0.5 1" dur="25s" begin="-30.020995894146097s"></animate>
<animate attributeName="opacity" values="1;0" keyTimes="0;1" calcMode="spline" repeatCount="indefinite" keySplines="0 0.5 0.5 1" dur="25s" begin="-30.020995894146097s"></animate>
</circle><circle cx="184.86541783077774" cy="44.886087590301756" r="0" fill="none" stroke="#93dbe9" stroke-width="8">
<animate attributeName="r" values="0;56.99589341531981" keyTimes="0;1" calcMode="spline" repeatCount="indefinite" keySplines="0 0.5 0.5 1" dur="25s" begin="-36.60809296354671s"></animate>
<animate attributeName="opacity" values="1;0" keyTimes="0;1" calcMode="spline" repeatCount="indefinite" keySplines="0 0.5 0.5 1" dur="25s" begin="-36.60809296354671s"></animate>
</circle><circle cx="184.86541783077774" cy="300.88608759030177" r="0" fill="none" stroke="#93dbe9" stroke-width="8">
<animate attributeName="r" values="0;56.99589341531981" keyTimes="0;1" calcMode="spline" repeatCount="indefinite" keySplines="0 0.5 0.5 1" dur="25s" begin="-36.60809296354671s"></animate>
<animate attributeName="opacity" values="1;0" keyTimes="0;1" calcMode="spline" repeatCount="indefinite" keySplines="0 0.5 0.5 1" dur="25s" begin="-36.60809296354671s"></animate>
</circle><circle cx="128.6294815429427" cy="20.412863761372066" r="0" fill="none" stroke="#5e6fa3" stroke-width="8">
<animate attributeName="r" values="0;58.14291539416182" keyTimes="0;1" calcMode="spline" repeatCount="indefinite" keySplines="0 0.5 0.5 1" dur="16.666666666666668s" begin="-38.6283523615141s"></animate>
<animate attributeName="opacity" values="1;0" keyTimes="0;1" calcMode="spline" repeatCount="indefinite" keySplines="0 0.5 0.5 1" dur="16.666666666666668s" begin="-38.6283523615141s"></animate>
</circle><circle cx="128.6294815429427" cy="276.4128637613721" r="0" fill="none" stroke="#5e6fa3" stroke-width="8">
<animate attributeName="r" values="0;58.14291539416182" keyTimes="0;1" calcMode="spline" repeatCount="indefinite" keySplines="0 0.5 0.5 1" dur="16.666666666666668s" begin="-38.6283523615141s"></animate>
<animate attributeName="opacity" values="1;0" keyTimes="0;1" calcMode="spline" repeatCount="indefinite" keySplines="0 0.5 0.5 1" dur="16.666666666666668s" begin="-38.6283523615141s"></animate>
</circle><circle cx="94.65360523910455" cy="237.65373752048882" r="0" fill="none" stroke="#689cc5" stroke-width="8">
<animate attributeName="r" values="0;10.872426017373087" keyTimes="0;1" calcMode="spline" repeatCount="indefinite" keySplines="0 0.5 0.5 1" dur="16.666666666666668s" begin="-17.286612875431295s"></animate>
<animate attributeName="opacity" values="1;0" keyTimes="0;1" calcMode="spline" repeatCount="indefinite" keySplines="0 0.5 0.5 1" dur="16.666666666666668s" begin="-17.286612875431295s"></animate>
</circle><circle cx="186.84577473379255" cy="4.291441103039755" r="0" fill="none" stroke="#5e6fa3" stroke-width="8">
<animate attributeName="r" values="0;50.03848537207753" keyTimes="0;1" calcMode="spline" repeatCount="indefinite" keySplines="0 0.5 0.5 1" dur="12.5s" begin="-30.97916037182813s"></animate>
<animate attributeName="opacity" values="1;0" keyTimes="0;1" calcMode="spline" repeatCount="indefinite" keySplines="0 0.5 0.5 1" dur="12.5s" begin="-30.97916037182813s"></animate>
</circle><circle cx="186.84577473379255" cy="260.29144110303974" r="0" fill="none" stroke="#5e6fa3" stroke-width="8">
<animate attributeName="r" values="0;50.03848537207753" keyTimes="0;1" calcMode="spline" repeatCount="indefinite" keySplines="0 0.5 0.5 1" dur="12.5s" begin="-30.97916037182813s"></animate>
<animate attributeName="opacity" values="1;0" keyTimes="0;1" calcMode="spline" repeatCount="indefinite" keySplines="0 0.5 0.5 1" dur="12.5s" begin="-30.97916037182813s"></animate>
</circle><circle cx="3.1171684515748126" cy="10.536170179400985" r="0" fill="none" stroke="#689cc5" stroke-width="8">
<animate attributeName="r" values="0;31.72037969636405" keyTimes="0;1" calcMode="spline" repeatCount="indefinite" keySplines="0 0.5 0.5 1" dur="25s" begin="-29.18270767825585s"></animate>
<animate attributeName="opacity" values="1;0" keyTimes="0;1" calcMode="spline" repeatCount="indefinite" keySplines="0 0.5 0.5 1" dur="25s" begin="-29.18270767825585s"></animate>
</circle><circle cx="259.1171684515748" cy="10.536170179400985" r="0" fill="none" stroke="#689cc5" stroke-width="8">
<animate attributeName="r" values="0;31.72037969636405" keyTimes="0;1" calcMode="spline" repeatCount="indefinite" keySplines="0 0.5 0.5 1" dur="25s" begin="-29.18270767825585s"></animate>
<animate attributeName="opacity" values="1;0" keyTimes="0;1" calcMode="spline" repeatCount="indefinite" keySplines="0 0.5 0.5 1" dur="25s" begin="-29.18270767825585s"></animate>
</circle><circle cx="3.1171684515748126" cy="266.536170179401" r="0" fill="none" stroke="#689cc5" stroke-width="8">
<animate attributeName="r" values="0;31.72037969636405" keyTimes="0;1" calcMode="spline" repeatCount="indefinite" keySplines="0 0.5 0.5 1" dur="25s" begin="-29.18270767825585s"></animate>
<animate attributeName="opacity" values="1;0" keyTimes="0;1" calcMode="spline" repeatCount="indefinite" keySplines="0 0.5 0.5 1" dur="25s" begin="-29.18270767825585s"></animate>
</circle><circle cx="259.1171684515748" cy="266.536170179401" r="0" fill="none" stroke="#689cc5" stroke-width="8">
<animate attributeName="r" values="0;31.72037969636405" keyTimes="0;1" calcMode="spline" repeatCount="indefinite" keySplines="0 0.5 0.5 1" dur="25s" begin="-29.18270767825585s"></animate>
<animate attributeName="opacity" values="1;0" keyTimes="0;1" calcMode="spline" repeatCount="indefinite" keySplines="0 0.5 0.5 1" dur="25s" begin="-29.18270767825585s"></animate>
</circle><circle cx="188.74527992387326" cy="21.78088381944502" r="0" fill="none" stroke="#93dbe9" stroke-width="8">
<animate attributeName="r" values="0;24.62604013195285" keyTimes="0;1" calcMode="spline" repeatCount="indefinite" keySplines="0 0.5 0.5 1" dur="12.5s" begin="-15.60412108402891s"></animate>
<animate attributeName="opacity" values="1;0" keyTimes="0;1" calcMode="spline" repeatCount="indefinite" keySplines="0 0.5 0.5 1" dur="12.5s" begin="-15.60412108402891s"></animate>
</circle><circle cx="188.74527992387326" cy="277.780883819445" r="0" fill="none" stroke="#93dbe9" stroke-width="8">
<animate attributeName="r" values="0;24.62604013195285" keyTimes="0;1" calcMode="spline" repeatCount="indefinite" keySplines="0 0.5 0.5 1" dur="12.5s" begin="-15.60412108402891s"></animate>
<animate attributeName="opacity" values="1;0" keyTimes="0;1" calcMode="spline" repeatCount="indefinite" keySplines="0 0.5 0.5 1" dur="12.5s" begin="-15.60412108402891s"></animate>
</circle><circle cx="25.856888539646313" cy="42.26884688505775" r="0" fill="none" stroke="#689cc5" stroke-width="8">
<animate attributeName="r" values="0;47.95560071224433" keyTimes="0;1" calcMode="spline" repeatCount="indefinite" keySplines="0 0.5 0.5 1" dur="12.5s" begin="-16.780876976602578s"></animate>
<animate attributeName="opacity" values="1;0" keyTimes="0;1" calcMode="spline" repeatCount="indefinite" keySplines="0 0.5 0.5 1" dur="12.5s" begin="-16.780876976602578s"></animate>
</circle><circle cx="281.8568885396463" cy="42.26884688505775" r="0" fill="none" stroke="#689cc5" stroke-width="8">
<animate attributeName="r" values="0;47.95560071224433" keyTimes="0;1" calcMode="spline" repeatCount="indefinite" keySplines="0 0.5 0.5 1" dur="12.5s" begin="-16.780876976602578s"></animate>
<animate attributeName="opacity" values="1;0" keyTimes="0;1" calcMode="spline" repeatCount="indefinite" keySplines="0 0.5 0.5 1" dur="12.5s" begin="-16.780876976602578s"></animate>
</circle><circle cx="25.856888539646313" cy="298.26884688505777" r="0" fill="none" stroke="#689cc5" stroke-width="8">
<animate attributeName="r" values="0;47.95560071224433" keyTimes="0;1" calcMode="spline" repeatCount="indefinite" keySplines="0 0.5 0.5 1" dur="12.5s" begin="-16.780876976602578s"></animate>
<animate attributeName="opacity" values="1;0" keyTimes="0;1" calcMode="spline" repeatCount="indefinite" keySplines="0 0.5 0.5 1" dur="12.5s" begin="-16.780876976602578s"></animate>
</circle><circle cx="281.8568885396463" cy="298.26884688505777" r="0" fill="none" stroke="#689cc5" stroke-width="8">
<animate attributeName="r" values="0;47.95560071224433" keyTimes="0;1" calcMode="spline" repeatCount="indefinite" keySplines="0 0.5 0.5 1" dur="12.5s" begin="-16.780876976602578s"></animate>
<animate attributeName="opacity" values="1;0" keyTimes="0;1" calcMode="spline" repeatCount="indefinite" keySplines="0 0.5 0.5 1" dur="12.5s" begin="-16.780876976602578s"></animate>
</circle><circle cx="80.07378641634132" cy="99.95189316646443" r="0" fill="none" stroke="#93dbe9" stroke-width="8">
<animate attributeName="r" values="0;31.25308753538168" keyTimes="0;1" calcMode="spline" repeatCount="indefinite" keySplines="0 0.5 0.5 1" dur="16.666666666666668s" begin="-44.38933261009856s"></animate>
<animate attributeName="opacity" values="1;0" keyTimes="0;1" calcMode="spline" repeatCount="indefinite" keySplines="0 0.5 0.5 1" dur="16.666666666666668s" begin="-44.38933261009856s"></animate>
</circle><circle cx="115.28452115370486" cy="183.50469529806404" r="0" fill="none" stroke="#93dbe9" stroke-width="8">
<animate attributeName="r" values="0;43.47190520350591" keyTimes="0;1" calcMode="spline" repeatCount="indefinite" keySplines="0 0.5 0.5 1" dur="12.5s" begin="-35.01262905715093s"></animate>
<animate attributeName="opacity" values="1;0" keyTimes="0;1" calcMode="spline" repeatCount="indefinite" keySplines="0 0.5 0.5 1" dur="12.5s" begin="-35.01262905715093s"></animate>
</circle><circle cx="178.06444021126137" cy="196.65069638203684" r="0" fill="none" stroke="#93dbe9" stroke-width="8">
<animate attributeName="r" values="0;55.28300103432255" keyTimes="0;1" calcMode="spline" repeatCount="indefinite" keySplines="0 0.5 0.5 1" dur="25s" begin="-31.907669721653242s"></animate>
<animate attributeName="opacity" values="1;0" keyTimes="0;1" calcMode="spline" repeatCount="indefinite" keySplines="0 0.5 0.5 1" dur="25s" begin="-31.907669721653242s"></animate>
</circle><circle cx="44.16845143857357" cy="102.58764890706274" r="0" fill="none" stroke="#93dbe9" stroke-width="8">
<animate attributeName="r" values="0;56.592641937222965" keyTimes="0;1" calcMode="spline" repeatCount="indefinite" keySplines="0 0.5 0.5 1" dur="16.666666666666668s" begin="-21.452416790316818s"></animate>
<animate attributeName="opacity" values="1;0" keyTimes="0;1" calcMode="spline" repeatCount="indefinite" keySplines="0 0.5 0.5 1" dur="16.666666666666668s" begin="-21.452416790316818s"></animate>
</circle><circle cx="300.1684514385736" cy="102.58764890706274" r="0" fill="none" stroke="#93dbe9" stroke-width="8">
<animate attributeName="r" values="0;56.592641937222965" keyTimes="0;1" calcMode="spline" repeatCount="indefinite" keySplines="0 0.5 0.5 1" dur="16.666666666666668s" begin="-21.452416790316818s"></animate>
<animate attributeName="opacity" values="1;0" keyTimes="0;1" calcMode="spline" repeatCount="indefinite" keySplines="0 0.5 0.5 1" dur="16.666666666666668s" begin="-21.452416790316818s"></animate>
</circle><circle cx="79.90917564776078" cy="58.24933597303385" r="0" fill="none" stroke="#5e6fa3" stroke-width="8">
<animate attributeName="r" values="0;17.76697933939279" keyTimes="0;1" calcMode="spline" repeatCount="indefinite" keySplines="0 0.5 0.5 1" dur="16.666666666666668s" begin="-6.018058267098058s"></animate>
<animate attributeName="opacity" values="1;0" keyTimes="0;1" calcMode="spline" repeatCount="indefinite" keySplines="0 0.5 0.5 1" dur="16.666666666666668s" begin="-6.018058267098058s"></animate>
</circle><circle cx="99.51047224071066" cy="68.21685313096823" r="0" fill="none" stroke="#93dbe9" stroke-width="8">
<animate attributeName="r" values="0;32.538025421938485" keyTimes="0;1" calcMode="spline" repeatCount="indefinite" keySplines="0 0.5 0.5 1" dur="16.666666666666668s" begin="-24.711449309412114s"></animate>
<animate attributeName="opacity" values="1;0" keyTimes="0;1" calcMode="spline" repeatCount="indefinite" keySplines="0 0.5 0.5 1" dur="16.666666666666668s" begin="-24.711449309412114s"></animate>
</circle><circle cx="170.23837150372032" cy="80.50555967618685" r="0" fill="none" stroke="#93dbe9" stroke-width="8">
<animate attributeName="r" values="0;49.47798543600463" keyTimes="0;1" calcMode="spline" repeatCount="indefinite" keySplines="0 0.5 0.5 1" dur="25s" begin="-27.302250080429058s"></animate>
<animate attributeName="opacity" values="1;0" keyTimes="0;1" calcMode="spline" repeatCount="indefinite" keySplines="0 0.5 0.5 1" dur="25s" begin="-27.302250080429058s"></animate>
</circle><circle cx="146.82045516936643" cy="81.4540879579799" r="0" fill="none" stroke="#93dbe9" stroke-width="8">
<animate attributeName="r" values="0;17.51784178229697" keyTimes="0;1" calcMode="spline" repeatCount="indefinite" keySplines="0 0.5 0.5 1" dur="12.5s" begin="-14.316475870551947s"></animate>
<animate attributeName="opacity" values="1;0" keyTimes="0;1" calcMode="spline" repeatCount="indefinite" keySplines="0 0.5 0.5 1" dur="12.5s" begin="-14.316475870551947s"></animate>
</circle><circle cx="85.89692843138472" cy="166.66227056758296" r="0" fill="none" stroke="#5e6fa3" stroke-width="8">
<animate attributeName="r" values="0;43.09830041436764" keyTimes="0;1" calcMode="spline" repeatCount="indefinite" keySplines="0 0.5 0.5 1" dur="12.5s" begin="-25.33233432848061s"></animate>
<animate attributeName="opacity" values="1;0" keyTimes="0;1" calcMode="spline" repeatCount="indefinite" keySplines="0 0.5 0.5 1" dur="12.5s" begin="-25.33233432848061s"></animate>
</circle><circle cx="177.2226960369944" cy="175.07899171519415" r="0" fill="none" stroke="#689cc5" stroke-width="8">
<animate attributeName="r" values="0;43.73555785023012" keyTimes="0;1" calcMode="spline" repeatCount="indefinite" keySplines="0 0.5 0.5 1" dur="16.666666666666668s" begin="-25.121497689569683s"></animate>
<animate attributeName="opacity" values="1;0" keyTimes="0;1" calcMode="spline" repeatCount="indefinite" keySplines="0 0.5 0.5 1" dur="16.666666666666668s" begin="-25.121497689569683s"></animate>
</circle><circle cx="216.86808064093213" cy="27.577527215605766" r="0" fill="none" stroke="#93dbe9" stroke-width="8">
<animate attributeName="r" values="0;4.737877261879547" keyTimes="0;1" calcMode="spline" repeatCount="indefinite" keySplines="0 0.5 0.5 1" dur="25s" begin="-15.904900634836528s"></animate>
<animate attributeName="opacity" values="1;0" keyTimes="0;1" calcMode="spline" repeatCount="indefinite" keySplines="0 0.5 0.5 1" dur="25s" begin="-15.904900634836528s"></animate>
</circle><circle cx="110.04710192749121" cy="180.18493319620214" r="0" fill="none" stroke="#93dbe9" stroke-width="8">
<animate attributeName="r" values="0;44.77556931875715" keyTimes="0;1" calcMode="spline" repeatCount="indefinite" keySplines="0 0.5 0.5 1" dur="25s" begin="-1.5780314591062772s"></animate>
<animate attributeName="opacity" values="1;0" keyTimes="0;1" calcMode="spline" repeatCount="indefinite" keySplines="0 0.5 0.5 1" dur="25s" begin="-1.5780314591062772s"></animate>
</circle><circle cx="64.71846547185336" cy="75.44443893159085" r="0" fill="none" stroke="#93dbe9" stroke-width="8">
<animate attributeName="r" values="0;9.889551183237941" keyTimes="0;1" calcMode="spline" repeatCount="indefinite" keySplines="0 0.5 0.5 1" dur="16.666666666666668s" begin="-36.2183301855013s"></animate>
<animate attributeName="opacity" values="1;0" keyTimes="0;1" calcMode="spline" repeatCount="indefinite" keySplines="0 0.5 0.5 1" dur="16.666666666666668s" begin="-36.2183301855013s"></animate>
</circle><circle cx="40.659167565439354" cy="80.92354614012416" r="0" fill="none" stroke="#689cc5" stroke-width="8">
<animate attributeName="r" values="0;47.03611543920749" keyTimes="0;1" calcMode="spline" repeatCount="indefinite" keySplines="0 0.5 0.5 1" dur="16.666666666666668s" begin="-40.52530054760075s"></animate>
<animate attributeName="opacity" values="1;0" keyTimes="0;1" calcMode="spline" repeatCount="indefinite" keySplines="0 0.5 0.5 1" dur="16.666666666666668s" begin="-40.52530054760075s"></animate>
</circle><circle cx="296.65916756543936" cy="80.92354614012416" r="0" fill="none" stroke="#689cc5" stroke-width="8">
<animate attributeName="r" values="0;47.03611543920749" keyTimes="0;1" calcMode="spline" repeatCount="indefinite" keySplines="0 0.5 0.5 1" dur="16.666666666666668s" begin="-40.52530054760075s"></animate>
<animate attributeName="opacity" values="1;0" keyTimes="0;1" calcMode="spline" repeatCount="indefinite" keySplines="0 0.5 0.5 1" dur="16.666666666666668s" begin="-40.52530054760075s"></animate>
</circle><circle cx="158.9398261520183" cy="96.5683673937937" r="0" fill="none" stroke="#689cc5" stroke-width="8">
<animate attributeName="r" values="0;9.89977495248037" keyTimes="0;1" calcMode="spline" repeatCount="indefinite" keySplines="0 0.5 0.5 1" dur="12.5s" begin="-2.5412705195820062s"></animate>
<animate attributeName="opacity" values="1;0" keyTimes="0;1" calcMode="spline" repeatCount="indefinite" keySplines="0 0.5 0.5 1" dur="12.5s" begin="-2.5412705195820062s"></animate>
</circle></g>
</pattern>
</defs>
<rect x="0" y="0" width="1084" height="322" fill="url(#pid-0.2950529742247572)"></rect>
</svg>

After

Width:  |  Height:  |  Size: 42 KiB

View file

@ -0,0 +1,574 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
style="margin:auto;background:rgba(NaN, NaN, NaN, 0);display:block;z-index:1;position:relative"
width="1084" height="322" preserveAspectRatio="xMidYMid" viewBox="0 0 1084 322">
<defs>
<pattern id="pid-0.7735807359934106" x="0" y="0" width="345.6" height="345.6"
patternUnits="userSpaceOnUse">
<g transform="scale(1.35)">
<g>
<line x1="237.6288884328494" x2="201.39714008747956" y1="119.05338354492488"
y2="155.28513189029474" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="237.6288884328494" x2="201.39714008747956" y1="-392.9466164550751"
y2="-356.71486810970526" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="493.6288884328494" x2="457.39714008747956" y1="-392.9466164550751"
y2="-356.71486810970526" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="749.6288884328494" x2="713.3971400874796" y1="-392.9466164550751"
y2="-356.71486810970526" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="237.6288884328494" x2="201.39714008747956" y1="-136.94661645507512"
y2="-100.71486810970526" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="493.6288884328494" x2="457.39714008747956" y1="-136.94661645507512"
y2="-100.71486810970526" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="749.6288884328494" x2="713.3971400874796" y1="-136.94661645507512"
y2="-100.71486810970526" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="237.6288884328494" x2="201.39714008747956" y1="119.05338354492488"
y2="155.28513189029474" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="493.6288884328494" x2="457.39714008747956" y1="119.05338354492488"
y2="155.28513189029474" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="749.6288884328494" x2="713.3971400874796" y1="119.05338354492488"
y2="155.28513189029474" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="244.43797352167968" x2="179.25167385613412" y1="196.21419032492787"
y2="261.40048999047343" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="244.43797352167968" x2="179.25167385613412" y1="-315.78580967507213"
y2="-250.59951000952657" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="500.4379735216797" x2="435.2516738561341" y1="-315.78580967507213"
y2="-250.59951000952657" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="756.4379735216796" x2="691.2516738561342" y1="-315.78580967507213"
y2="-250.59951000952657" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="244.43797352167968" x2="179.25167385613412" y1="-59.78580967507213"
y2="5.400489990473432" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="500.4379735216797" x2="435.2516738561341" y1="-59.78580967507213"
y2="5.400489990473432" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="756.4379735216796" x2="691.2516738561342" y1="-59.78580967507213"
y2="5.400489990473432" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="244.43797352167968" x2="179.25167385613412" y1="196.21419032492787"
y2="261.40048999047343" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="500.4379735216797" x2="435.2516738561341" y1="196.21419032492787"
y2="261.40048999047343" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="756.4379735216796" x2="691.2516738561342" y1="196.21419032492787"
y2="261.40048999047343" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="219.6724359102308" x2="209.2181431749452" y1="92.85808081141191"
y2="103.31237354669749" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="219.6724359102308" x2="209.2181431749452" y1="-419.1419191885881"
y2="-408.6876264533025" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="475.6724359102308" x2="465.2181431749452" y1="-419.1419191885881"
y2="-408.6876264533025" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="731.6724359102308" x2="721.2181431749452" y1="-419.1419191885881"
y2="-408.6876264533025" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="219.6724359102308" x2="209.2181431749452" y1="-163.14191918858808"
y2="-152.68762645330253" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="475.6724359102308" x2="465.2181431749452" y1="-163.14191918858808"
y2="-152.68762645330253" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="731.6724359102308" x2="721.2181431749452" y1="-163.14191918858808"
y2="-152.68762645330253" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="219.6724359102308" x2="209.2181431749452" y1="92.85808081141191"
y2="103.31237354669749" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="475.6724359102308" x2="465.2181431749452" y1="92.85808081141191"
y2="103.31237354669749" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="731.6724359102308" x2="721.2181431749452" y1="92.85808081141191"
y2="103.31237354669749" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="112.00565118011832" x2="71.15817744773324" y1="56.63419812919665"
y2="97.48167186158173" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="112.00565118011832" x2="71.15817744773324" y1="-455.36580187080335"
y2="-414.51832813841827" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="368.0056511801183" x2="327.15817744773324" y1="-455.36580187080335"
y2="-414.51832813841827" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="624.0056511801183" x2="583.1581774477332" y1="-455.36580187080335"
y2="-414.51832813841827" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="112.00565118011832" x2="71.15817744773324" y1="-199.36580187080335"
y2="-158.51832813841827" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="368.0056511801183" x2="327.15817744773324" y1="-199.36580187080335"
y2="-158.51832813841827" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="624.0056511801183" x2="583.1581774477332" y1="-199.36580187080335"
y2="-158.51832813841827" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="112.00565118011832" x2="71.15817744773324" y1="56.63419812919665"
y2="97.48167186158173" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="368.0056511801183" x2="327.15817744773324" y1="56.63419812919665"
y2="97.48167186158173" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="624.0056511801183" x2="583.1581774477332" y1="56.63419812919665"
y2="97.48167186158173" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="60.932966336476014" x2="49.388821076756514" y1="125.65681060957188"
y2="137.20095586929136" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="60.932966336476014" x2="49.388821076756514" y1="-386.3431893904281"
y2="-374.79904413070864" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="316.932966336476" x2="305.3888210767565" y1="-386.3431893904281"
y2="-374.79904413070864" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="572.932966336476" x2="561.3888210767565" y1="-386.3431893904281"
y2="-374.79904413070864" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="60.932966336476014" x2="49.388821076756514" y1="-130.3431893904281"
y2="-118.79904413070864" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="316.932966336476" x2="305.3888210767565" y1="-130.3431893904281"
y2="-118.79904413070864" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="572.932966336476" x2="561.3888210767565" y1="-130.3431893904281"
y2="-118.79904413070864" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="60.932966336476014" x2="49.388821076756514" y1="125.65681060957188"
y2="137.20095586929136" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="316.932966336476" x2="305.3888210767565" y1="125.65681060957188"
y2="137.20095586929136" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="572.932966336476" x2="561.3888210767565" y1="125.65681060957188"
y2="137.20095586929136" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="103.78310212459807" x2="35.08486945593138" y1="-2.328164446496814"
y2="66.37006822216988" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="103.78310212459807" x2="35.08486945593138" y1="-514.3281644464968"
y2="-445.6299317778301" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="359.7831021245981" x2="291.08486945593137" y1="-514.3281644464968"
y2="-445.6299317778301" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="615.783102124598" x2="547.0848694559314" y1="-514.3281644464968"
y2="-445.6299317778301" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="103.78310212459807" x2="35.08486945593138" y1="-258.3281644464968"
y2="-189.6299317778301" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="359.7831021245981" x2="291.08486945593137" y1="-258.3281644464968"
y2="-189.6299317778301" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="615.783102124598" x2="547.0848694559314" y1="-258.3281644464968"
y2="-189.6299317778301" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="103.78310212459807" x2="35.08486945593138" y1="-2.328164446496814"
y2="66.37006822216988" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="359.7831021245981" x2="291.08486945593137" y1="-2.328164446496814"
y2="66.37006822216988" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="615.783102124598" x2="547.0848694559314" y1="-2.328164446496814"
y2="66.37006822216988" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="103.78310212459807" x2="35.08486945593138" y1="253.67183555350317"
y2="322.3700682221699" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="211.69894364075495" x2="194.13528259328754" y1="166.21741462144607"
y2="183.78107566891347" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="211.69894364075495" x2="194.13528259328754" y1="-345.7825853785539"
y2="-328.21892433108655" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="467.6989436407549" x2="450.13528259328757" y1="-345.7825853785539"
y2="-328.21892433108655" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="723.6989436407549" x2="706.1352825932876" y1="-345.7825853785539"
y2="-328.21892433108655" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="211.69894364075495" x2="194.13528259328754" y1="-89.78258537855393"
y2="-72.21892433108653" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="467.6989436407549" x2="450.13528259328757" y1="-89.78258537855393"
y2="-72.21892433108653" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="723.6989436407549" x2="706.1352825932876" y1="-89.78258537855393"
y2="-72.21892433108653" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="211.69894364075495" x2="194.13528259328754" y1="166.21741462144607"
y2="183.78107566891347" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="467.6989436407549" x2="450.13528259328757" y1="166.21741462144607"
y2="183.78107566891347" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="723.6989436407549" x2="706.1352825932876" y1="166.21741462144607"
y2="183.78107566891347" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="44.012515207413756" x2="6.2920050630466875" y1="153.79537767995515"
y2="191.5158878243222" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="44.012515207413756" x2="6.2920050630466875" y1="-358.20462232004485"
y2="-320.4841121756778" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="300.01251520741374" x2="262.2920050630467" y1="-358.20462232004485"
y2="-320.4841121756778" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="556.0125152074138" x2="518.2920050630466" y1="-358.20462232004485"
y2="-320.4841121756778" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="44.012515207413756" x2="6.2920050630466875" y1="-102.20462232004485"
y2="-64.48411217567781" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="300.01251520741374" x2="262.2920050630467" y1="-102.20462232004485"
y2="-64.48411217567781" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="556.0125152074138" x2="518.2920050630466" y1="-102.20462232004485"
y2="-64.48411217567781" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="44.012515207413756" x2="6.2920050630466875" y1="153.79537767995515"
y2="191.5158878243222" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="300.01251520741374" x2="262.2920050630467" y1="153.79537767995515"
y2="191.5158878243222" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="556.0125152074138" x2="518.2920050630466" y1="153.79537767995515"
y2="191.5158878243222" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="105.49237048043514" x2="31.549625942354083" y1="123.41684480916788"
y2="197.35958934724894" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="105.49237048043514" x2="31.549625942354083" y1="-388.58315519083214"
y2="-314.64041065275103" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="361.49237048043517" x2="287.54962594235406" y1="-388.58315519083214"
y2="-314.64041065275103" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="617.4923704804352" x2="543.549625942354" y1="-388.58315519083214"
y2="-314.64041065275103" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="105.49237048043514" x2="31.549625942354083" y1="-132.58315519083212"
y2="-58.64041065275106" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="361.49237048043517" x2="287.54962594235406" y1="-132.58315519083212"
y2="-58.64041065275106" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="617.4923704804352" x2="543.549625942354" y1="-132.58315519083212"
y2="-58.64041065275106" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="105.49237048043514" x2="31.549625942354083" y1="123.41684480916788"
y2="197.35958934724894" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="361.49237048043517" x2="287.54962594235406" y1="123.41684480916788"
y2="197.35958934724894" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="617.4923704804352" x2="543.549625942354" y1="123.41684480916788"
y2="197.35958934724894" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<animateTransform attributeName="transform" type="translate" values="0 0;-256 256"
keyTimes="0;1" repeatCount="indefinite" dur="10s"></animateTransform>
</g>
<g>
<line x1="95.73622575770466" x2="50.085335235319484" y1="20.45659654328417"
y2="66.10748706566935" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="95.73622575770466" x2="50.085335235319484" y1="-491.54340345671585"
y2="-445.8925129343306" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="351.7362257577047" x2="306.08533523531946" y1="-491.54340345671585"
y2="-445.8925129343306" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="607.7362257577047" x2="562.0853352353195" y1="-491.54340345671585"
y2="-445.8925129343306" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="95.73622575770466" x2="50.085335235319484" y1="-235.54340345671582"
y2="-189.89251293433065" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="351.7362257577047" x2="306.08533523531946" y1="-235.54340345671582"
y2="-189.89251293433065" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="607.7362257577047" x2="562.0853352353195" y1="-235.54340345671582"
y2="-189.89251293433065" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="95.73622575770466" x2="50.085335235319484" y1="20.45659654328417"
y2="66.10748706566935" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="351.7362257577047" x2="306.08533523531946" y1="20.45659654328417"
y2="66.10748706566935" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="607.7362257577047" x2="562.0853352353195" y1="20.45659654328417"
y2="66.10748706566935" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="263.34308373797757" x2="226.59561736370148" y1="112.42933995479353"
y2="149.17680632906962" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="263.34308373797757" x2="226.59561736370148" y1="-399.57066004520647"
y2="-362.8231936709304" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="519.3430837379776" x2="482.5956173637015" y1="-399.57066004520647"
y2="-362.8231936709304" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="775.3430837379776" x2="738.5956173637014" y1="-399.57066004520647"
y2="-362.8231936709304" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="263.34308373797757" x2="226.59561736370148" y1="-143.57066004520647"
y2="-106.82319367093038" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="519.3430837379776" x2="482.5956173637015" y1="-143.57066004520647"
y2="-106.82319367093038" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="775.3430837379776" x2="738.5956173637014" y1="-143.57066004520647"
y2="-106.82319367093038" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="263.34308373797757" x2="226.59561736370148" y1="112.42933995479353"
y2="149.17680632906962" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="519.3430837379776" x2="482.5956173637015" y1="112.42933995479353"
y2="149.17680632906962" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="775.3430837379776" x2="738.5956173637014" y1="112.42933995479353"
y2="149.17680632906962" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="7.343083737977565" x2="-29.40438263629852" y1="112.42933995479353"
y2="149.17680632906962" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="29.5343611349199" x2="-26.261040392985034" y1="205.16777076655512"
y2="260.96317229446004" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="29.5343611349199" x2="-26.261040392985034" y1="-306.8322292334449"
y2="-251.03682770553996" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="285.5343611349199" x2="229.73895960701498" y1="-306.8322292334449"
y2="-251.03682770553996" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="541.5343611349199" x2="485.738959607015" y1="-306.8322292334449"
y2="-251.03682770553996" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="29.5343611349199" x2="-26.261040392985034" y1="-50.83222923344488"
y2="4.963172294460037" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="285.5343611349199" x2="229.73895960701498" y1="-50.83222923344488"
y2="4.963172294460037" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="541.5343611349199" x2="485.738959607015" y1="-50.83222923344488"
y2="4.963172294460037" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="29.5343611349199" x2="-26.261040392985034" y1="205.16777076655512"
y2="260.96317229446004" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="285.5343611349199" x2="229.73895960701498" y1="205.16777076655512"
y2="260.96317229446004" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="541.5343611349199" x2="485.738959607015" y1="205.16777076655512"
y2="260.96317229446004" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="235.025028503587" x2="173.48946106938683" y1="23.306929884424335"
y2="84.84249731862451" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="235.025028503587" x2="173.48946106938683" y1="-488.69307011557567"
y2="-427.1575026813755" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="491.025028503587" x2="429.48946106938683" y1="-488.69307011557567"
y2="-427.1575026813755" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="747.025028503587" x2="685.4894610693868" y1="-488.69307011557567"
y2="-427.1575026813755" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="235.025028503587" x2="173.48946106938683" y1="-232.69307011557567"
y2="-171.1575026813755" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="491.025028503587" x2="429.48946106938683" y1="-232.69307011557567"
y2="-171.1575026813755" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="747.025028503587" x2="685.4894610693868" y1="-232.69307011557567"
y2="-171.1575026813755" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="235.025028503587" x2="173.48946106938683" y1="23.306929884424335"
y2="84.84249731862451" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="491.025028503587" x2="429.48946106938683" y1="23.306929884424335"
y2="84.84249731862451" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="747.025028503587" x2="685.4894610693868" y1="23.306929884424335"
y2="84.84249731862451" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="225.00990918130768" x2="200.62370409686488" y1="210.1052181599721"
y2="234.4914232444149" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="225.00990918130768" x2="200.62370409686488" y1="-301.8947818400279"
y2="-277.50857675558507" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="481.00990918130765" x2="456.6237040968649" y1="-301.8947818400279"
y2="-277.50857675558507" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="737.0099091813076" x2="712.6237040968649" y1="-301.8947818400279"
y2="-277.50857675558507" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="225.00990918130768" x2="200.62370409686488" y1="-45.89478184002789"
y2="-21.508576755585096" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="481.00990918130765" x2="456.6237040968649" y1="-45.89478184002789"
y2="-21.508576755585096" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="737.0099091813076" x2="712.6237040968649" y1="-45.89478184002789"
y2="-21.508576755585096" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="225.00990918130768" x2="200.62370409686488" y1="210.1052181599721"
y2="234.4914232444149" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="481.00990918130765" x2="456.6237040968649" y1="210.1052181599721"
y2="234.4914232444149" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="737.0099091813076" x2="712.6237040968649" y1="210.1052181599721"
y2="234.4914232444149" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="171.55017713954658" x2="102.05334080042758" y1="78.55895711807653"
y2="148.05579345719553" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="171.55017713954658" x2="102.05334080042758" y1="-433.44104288192347"
y2="-363.94420654280447" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="427.5501771395466" x2="358.0533408004276" y1="-433.44104288192347"
y2="-363.94420654280447" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="683.5501771395466" x2="614.0533408004276" y1="-433.44104288192347"
y2="-363.94420654280447" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="171.55017713954658" x2="102.05334080042758" y1="-177.44104288192347"
y2="-107.94420654280447" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="427.5501771395466" x2="358.0533408004276" y1="-177.44104288192347"
y2="-107.94420654280447" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="683.5501771395466" x2="614.0533408004276" y1="-177.44104288192347"
y2="-107.94420654280447" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="171.55017713954658" x2="102.05334080042758" y1="78.55895711807653"
y2="148.05579345719553" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="427.5501771395466" x2="358.0533408004276" y1="78.55895711807653"
y2="148.05579345719553" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="683.5501771395466" x2="614.0533408004276" y1="78.55895711807653"
y2="148.05579345719553" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="258.4358284744095" x2="228.09906783279462" y1="10.646186924515469"
y2="40.98294756613034" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="258.4358284744095" x2="228.09906783279462" y1="-501.35381307548454"
y2="-471.01705243386965" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="514.4358284744095" x2="484.0990678327946" y1="-501.35381307548454"
y2="-471.01705243386965" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="770.4358284744095" x2="740.0990678327946" y1="-501.35381307548454"
y2="-471.01705243386965" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="258.4358284744095" x2="228.09906783279462" y1="-245.35381307548454"
y2="-215.01705243386965" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="514.4358284744095" x2="484.0990678327946" y1="-245.35381307548454"
y2="-215.01705243386965" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="770.4358284744095" x2="740.0990678327946" y1="-245.35381307548454"
y2="-215.01705243386965" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="258.4358284744095" x2="228.09906783279462" y1="10.646186924515469"
y2="40.98294756613034" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="514.4358284744095" x2="484.0990678327946" y1="10.646186924515469"
y2="40.98294756613034" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="770.4358284744095" x2="740.0990678327946" y1="10.646186924515469"
y2="40.98294756613034" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="2.4358284744095045" x2="-27.900932167205383" y1="10.646186924515469"
y2="40.98294756613034" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="35.41624886616098" x2="-5.966808810922494" y1="10.151780697595989"
y2="51.53483837467946" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="35.41624886616098" x2="-5.966808810922494" y1="-501.848219302404"
y2="-460.46516162532055" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="291.41624886616097" x2="250.0331911890775" y1="-501.848219302404"
y2="-460.46516162532055" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="547.416248866161" x2="506.0331911890775" y1="-501.848219302404"
y2="-460.46516162532055" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="35.41624886616098" x2="-5.966808810922494" y1="-245.848219302404"
y2="-204.46516162532055" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="291.41624886616097" x2="250.0331911890775" y1="-245.848219302404"
y2="-204.46516162532055" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="547.416248866161" x2="506.0331911890775" y1="-245.848219302404"
y2="-204.46516162532055" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="35.41624886616098" x2="-5.966808810922494" y1="10.151780697595989"
y2="51.53483837467946" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="291.41624886616097" x2="250.0331911890775" y1="10.151780697595989"
y2="51.53483837467946" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="547.416248866161" x2="506.0331911890775" y1="10.151780697595989"
y2="51.53483837467946" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="90.76285286976488" x2="72.92514980496989" y1="79.79001478147771"
y2="97.6277178462727" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="90.76285286976488" x2="72.92514980496989" y1="-432.2099852185223"
y2="-414.37228215372727" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="346.76285286976486" x2="328.9251498049699" y1="-432.2099852185223"
y2="-414.37228215372727" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="602.7628528697649" x2="584.9251498049699" y1="-432.2099852185223"
y2="-414.37228215372727" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="90.76285286976488" x2="72.92514980496989" y1="-176.2099852185223"
y2="-158.3722821537273" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="346.76285286976486" x2="328.9251498049699" y1="-176.2099852185223"
y2="-158.3722821537273" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="602.7628528697649" x2="584.9251498049699" y1="-176.2099852185223"
y2="-158.3722821537273" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="90.76285286976488" x2="72.92514980496989" y1="79.79001478147771"
y2="97.6277178462727" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="346.76285286976486" x2="328.9251498049699" y1="79.79001478147771"
y2="97.6277178462727" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="602.7628528697649" x2="584.9251498049699" y1="79.79001478147771"
y2="97.6277178462727" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<animateTransform attributeName="transform" type="translate" values="0 0;-256 256"
keyTimes="0;1" repeatCount="indefinite" dur="5s"></animateTransform>
</g>
<g>
<line x1="93.6896305353637" x2="75.71575147590588" y1="83.83758835275793"
y2="101.81146741221576" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="93.6896305353637" x2="75.71575147590588" y1="-428.16241164724204"
y2="-410.18853258778427" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="349.6896305353637" x2="331.7157514759059" y1="-428.16241164724204"
y2="-410.18853258778427" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="605.6896305353637" x2="587.7157514759059" y1="-428.16241164724204"
y2="-410.18853258778427" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="93.6896305353637" x2="75.71575147590588" y1="-172.16241164724207"
y2="-154.18853258778424" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="349.6896305353637" x2="331.7157514759059" y1="-172.16241164724207"
y2="-154.18853258778424" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="605.6896305353637" x2="587.7157514759059" y1="-172.16241164724207"
y2="-154.18853258778424" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="93.6896305353637" x2="75.71575147590588" y1="83.83758835275793"
y2="101.81146741221576" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="349.6896305353637" x2="331.7157514759059" y1="83.83758835275793"
y2="101.81146741221576" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="605.6896305353637" x2="587.7157514759059" y1="83.83758835275793"
y2="101.81146741221576" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="207.24941141296466" x2="167.48134532138562" y1="234.55973050121918"
y2="274.3277965927982" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="207.24941141296466" x2="167.48134532138562" y1="-277.4402694987808"
y2="-237.67220340720178" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="463.24941141296466" x2="423.4813453213856" y1="-277.4402694987808"
y2="-237.67220340720178" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="719.2494114129647" x2="679.4813453213856" y1="-277.4402694987808"
y2="-237.67220340720178" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="207.24941141296466" x2="167.48134532138562" y1="-21.440269498780822"
y2="18.327796592798222" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="463.24941141296466" x2="423.4813453213856" y1="-21.440269498780822"
y2="18.327796592798222" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="719.2494114129647" x2="679.4813453213856" y1="-21.440269498780822"
y2="18.327796592798222" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="207.24941141296466" x2="167.48134532138562" y1="234.55973050121918"
y2="274.3277965927982" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="463.24941141296466" x2="423.4813453213856" y1="234.55973050121918"
y2="274.3277965927982" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="719.2494114129647" x2="679.4813453213856" y1="234.55973050121918"
y2="274.3277965927982" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="69.19671201083756" x2="20.15599089926107" y1="61.52941038272999"
y2="110.57013149430648" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="69.19671201083756" x2="20.15599089926107" y1="-450.47058961727"
y2="-401.42986850569355" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="325.1967120108376" x2="276.15599089926104" y1="-450.47058961727"
y2="-401.42986850569355" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="581.1967120108376" x2="532.155990899261" y1="-450.47058961727"
y2="-401.42986850569355" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="69.19671201083756" x2="20.15599089926107" y1="-194.47058961727"
y2="-145.42986850569352" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="325.1967120108376" x2="276.15599089926104" y1="-194.47058961727"
y2="-145.42986850569352" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="581.1967120108376" x2="532.155990899261" y1="-194.47058961727"
y2="-145.42986850569352" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="69.19671201083756" x2="20.15599089926107" y1="61.52941038272999"
y2="110.57013149430648" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="325.1967120108376" x2="276.15599089926104" y1="61.52941038272999"
y2="110.57013149430648" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="581.1967120108376" x2="532.155990899261" y1="61.52941038272999"
y2="110.57013149430648" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="153.36870174443493" x2="103.52218176454608" y1="129.93915864820679"
y2="179.78567862809564" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="153.36870174443493" x2="103.52218176454608" y1="-382.0608413517932"
y2="-332.21432137190436" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="409.36870174443493" x2="359.5221817645461" y1="-382.0608413517932"
y2="-332.21432137190436" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="665.3687017444349" x2="615.5221817645461" y1="-382.0608413517932"
y2="-332.21432137190436" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="153.36870174443493" x2="103.52218176454608" y1="-126.06084135179321"
y2="-76.21432137190436" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="409.36870174443493" x2="359.5221817645461" y1="-126.06084135179321"
y2="-76.21432137190436" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="665.3687017444349" x2="615.5221817645461" y1="-126.06084135179321"
y2="-76.21432137190436" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="153.36870174443493" x2="103.52218176454608" y1="129.93915864820679"
y2="179.78567862809564" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="409.36870174443493" x2="359.5221817645461" y1="129.93915864820679"
y2="179.78567862809564" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="665.3687017444349" x2="615.5221817645461" y1="129.93915864820679"
y2="179.78567862809564" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="49.20494471467643" x2="2.7142059537850685" y1="141.75997600855746"
y2="188.25071476944882" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="49.20494471467643" x2="2.7142059537850685" y1="-370.2400239914425"
y2="-323.7492852305512" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="305.20494471467646" x2="258.71420595378504" y1="-370.2400239914425"
y2="-323.7492852305512" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="561.2049447146765" x2="514.714205953785" y1="-370.2400239914425"
y2="-323.7492852305512" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="49.20494471467643" x2="2.7142059537850685" y1="-114.24002399144254"
y2="-67.74928523055118" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="305.20494471467646" x2="258.71420595378504" y1="-114.24002399144254"
y2="-67.74928523055118" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="561.2049447146765" x2="514.714205953785" y1="-114.24002399144254"
y2="-67.74928523055118" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="49.20494471467643" x2="2.7142059537850685" y1="141.75997600855746"
y2="188.25071476944882" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="305.20494471467646" x2="258.71420595378504" y1="141.75997600855746"
y2="188.25071476944882" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="561.2049447146765" x2="514.714205953785" y1="141.75997600855746"
y2="188.25071476944882" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="84.6808460539986" x2="32.68305955000314" y1="-7.711036017440037"
y2="44.28675048655542" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="84.6808460539986" x2="32.68305955000314" y1="-519.71103601744"
y2="-467.71324951344457" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="340.6808460539986" x2="288.6830595500031" y1="-519.71103601744"
y2="-467.71324951344457" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="596.6808460539986" x2="544.6830595500031" y1="-519.71103601744"
y2="-467.71324951344457" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="84.6808460539986" x2="32.68305955000314" y1="-263.71103601744005"
y2="-211.71324951344457" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="340.6808460539986" x2="288.6830595500031" y1="-263.71103601744005"
y2="-211.71324951344457" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="596.6808460539986" x2="544.6830595500031" y1="-263.71103601744005"
y2="-211.71324951344457" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="84.6808460539986" x2="32.68305955000314" y1="-7.711036017440037"
y2="44.28675048655542" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="340.6808460539986" x2="288.6830595500031" y1="-7.711036017440037"
y2="44.28675048655542" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="596.6808460539986" x2="544.6830595500031" y1="-7.711036017440037"
y2="44.28675048655542" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="84.6808460539986" x2="32.68305955000314" y1="248.28896398255995"
y2="300.28675048655543" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="225.38342310559023" x2="185.66602314192056" y1="109.68961591653738"
y2="149.40701588020704" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="225.38342310559023" x2="185.66602314192056" y1="-402.3103840834626"
y2="-362.59298411979296" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="481.3834231055902" x2="441.66602314192056" y1="-402.3103840834626"
y2="-362.59298411979296" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="737.3834231055903" x2="697.6660231419205" y1="-402.3103840834626"
y2="-362.59298411979296" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="225.38342310559023" x2="185.66602314192056" y1="-146.31038408346262"
y2="-106.59298411979296" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="481.3834231055902" x2="441.66602314192056" y1="-146.31038408346262"
y2="-106.59298411979296" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="737.3834231055903" x2="697.6660231419205" y1="-146.31038408346262"
y2="-106.59298411979296" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="225.38342310559023" x2="185.66602314192056" y1="109.68961591653738"
y2="149.40701588020704" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="481.3834231055902" x2="441.66602314192056" y1="109.68961591653738"
y2="149.40701588020704" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="737.3834231055903" x2="697.6660231419205" y1="109.68961591653738"
y2="149.40701588020704" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="172.83662370669697" x2="103.52581079778793" y1="164.45975635392284"
y2="233.77056926283188" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="172.83662370669697" x2="103.52581079778793" y1="-347.54024364607716"
y2="-278.2294307371681" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="428.83662370669697" x2="359.5258107977879" y1="-347.54024364607716"
y2="-278.2294307371681" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="684.836623706697" x2="615.5258107977879" y1="-347.54024364607716"
y2="-278.2294307371681" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="172.83662370669697" x2="103.52581079778793" y1="-91.54024364607716"
y2="-22.229430737168116" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="428.83662370669697" x2="359.5258107977879" y1="-91.54024364607716"
y2="-22.229430737168116" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="684.836623706697" x2="615.5258107977879" y1="-91.54024364607716"
y2="-22.229430737168116" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="172.83662370669697" x2="103.52581079778793" y1="164.45975635392284"
y2="233.77056926283188" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="428.83662370669697" x2="359.5258107977879" y1="164.45975635392284"
y2="233.77056926283188" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="684.836623706697" x2="615.5258107977879" y1="164.45975635392284"
y2="233.77056926283188" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="254.85435949520382" x2="240.10841684705935" y1="-1.209429949430282"
y2="13.536512698714214" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="254.85435949520382" x2="240.10841684705935" y1="-513.2094299494303"
y2="-498.4634873012858" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="510.8543594952038" x2="496.10841684705935" y1="-513.2094299494303"
y2="-498.4634873012858" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="766.8543594952039" x2="752.1084168470593" y1="-513.2094299494303"
y2="-498.4634873012858" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="254.85435949520382" x2="240.10841684705935" y1="-257.2094299494303"
y2="-242.4634873012858" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="510.8543594952038" x2="496.10841684705935" y1="-257.2094299494303"
y2="-242.4634873012858" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="766.8543594952039" x2="752.1084168470593" y1="-257.2094299494303"
y2="-242.4634873012858" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="254.85435949520382" x2="240.10841684705935" y1="-1.209429949430282"
y2="13.536512698714214" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="510.8543594952038" x2="496.10841684705935" y1="-1.209429949430282"
y2="13.536512698714214" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="766.8543594952039" x2="752.1084168470593" y1="-1.209429949430282"
y2="13.536512698714214" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="254.85435949520382" x2="240.10841684705935" y1="254.79057005056973"
y2="269.5365126987142" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<animateTransform attributeName="transform" type="translate" values="0 0;-256 256"
keyTimes="0;1" repeatCount="indefinite" dur="10.3333333333333335s"></animateTransform>
</g>
</g>
</pattern>
</defs>
<rect x="0" y="0" width="1084" height="322" fill="url(#pid-0.7735807359934106)"></rect>
</svg>

File diff suppressed because it is too large Load diff

After

Width:  |  Height:  |  Size: 218 KiB

View file

@ -0,0 +1,318 @@
---
title: "Content Examples"
weight: 11
draft: false
description: "All the partials available in Blowfish."
slug: "content-examples"
tags: ["content", "example"]
series: ["Documentation"]
series_order: 12
---
If you've been reading the documentation in order, you should now know about all the features and configurations available in Blowfish. This page is designed to pull everything together and offer some worked examples that you might like to use in your Hugo project.
{{< alert >}}
**Tip:** If you're new to Hugo, be sure to check out the [official docs](https://gohugo.io/content-management/page-bundles/) to learn more about the concept of page bundles and resources.
{{< /alert >}}
The examples on this page can all be adapted to different scenarios but hopefully give you some ideas about how to approach formatting a particular content item for your individual project.
## Branch pages
Branch page bundles in Hugo cover items like the homepage, section listings, and taxonomy pages. The important thing to remember about branch bundles is that the filename for this content type is **`_index.md`**.
Blowfish will honour the front matter parameters specified in branch pages and these will override the default settings for that particular page. For example, setting the `title` parameter in a branch page will allow overriding the page title.
### Homepage
| | |
| ------------ | -------------------- |
| **Layout:** | `layouts/index.html` |
| **Content:** | `content/_index.md` |
The homepage in Blowfish is special in that it's overarching design is controlled by the homepage layout config parameter. You can learn more about this in the [Homepage Layout]({{< ref "homepage-layout" >}}) section.
If you want to add custom content to this page, you simply need to create a `content/_index.md` file. Anything in this file will then be included in your homepage.
**Example:**
```yaml
---
title: "Welcome to Blowfish!"
description: "This is a demo of adding content to the homepage."
---
Welcome to my website! I'm really happy you stopped by.
```
_This example sets a custom title and adds some additional text to the body of the page. Any Markdown formatted text is acceptable, including shortcodes, images and links._
### List pages
| | |
| ------------ | ---------------------------- |
| **Layout:** | `layouts/_default/list.html` |
| **Content:** | `content/../_index.md` |
List pages group all the pages within into a section and provide a way for visitors to reach each page. A blog or portfolio are examples of a list page as they group together posts or projects.
Creating a list page is as simple as making a sub-directory in the content folder. For example, to create a "Projects" section, you would create `content/projects/`. Then create a Markdown file for each of your projects.
A list page will be generated by default, however to customise the content, you should also create an `_index.md` page in this new directory.
```shell
.
└── content
└── projects
├── _index.md # /projects
├── first-project.md # /projects/first-project
└── another-project
├── index.md # /projects/another-project
└── project.jpg
```
Hugo will generate URLs for the pages in your projects folder accordingly.
Just like the homepage, content in the `_index.md` file will be output into the generated list index. Blowfish will then list any pages in this section below the content.
**Example:**
```yaml
---
title: "Projects"
description: "Learn about some of my projects."
cascade:
showReadingTime: false
---
This section contains all my current projects.
```
_In this example, the special `cascade` parameter is being used to hide the reading time on any sub-pages within this section. By doing this, any project pages will not have their reading time showing. This is a great way to override default theme parameters for an entire section without having to include them in every individual page._
The [samples section]({{< ref "samples" >}}) of this site is an example of a list page.
### Taxonomy pages
| | |
| ---------------- | -------------------------------- |
| **List layout:** | `layouts/_default/taxonomy.html` |
| **Term layout:** | `layouts/_default/term.html` |
| **Content:** | `content/../_index.md` |
Taxonomy pages come in two forms - taxonomy lists and taxonomy terms. Lists display a listing of each of the terms within a given taxonomy, while terms display a list of pages that are related to a given term.
The terminology can get a little confusing so let's explore an example using a taxonomy named `animals`.
Firstly, to use taxonomies in Hugo, they have to be configured. This is done by creating a config file at `config/_default/taxonomies.toml` and defining the taxonomy name.
```toml
# config/_default/taxonomies.toml
animal = "animals"
```
Hugo expects taxonomies to be listed using their singular and plural forms, so we add the singular `animal` equals the plural `animals` to create our example taxonomy.
Now that our `animals` taxonomy exists, it needs to be added to individual content items. It's as simple as inserting it into the front matter:
```yaml
---
title: "Into the Lion's Den"
description: "This week we're learning about lions."
animals: ["lion", "cat"]
---
```
This has now created two _terms_ within our `animals` taxonomy - `lion` and `cat`.
Although it's not obvious at this point, Hugo will now be generating list and term pages for this new taxonomy. By default the listing can be accessed at `/animals/` and the term pages can be found at `/animals/lion/` and `/animals/cat/`.
The list page will list all the terms contained within the taxonomy. In this example, navigating to `/animals/` will show a page that has links for "lion" and "cat" which take visitors to the individual term pages.
The term pages will list all the pages contained within that term. These term lists are essentially the same as normal [list pages](#list-pages) and behave in much the same way.
In order to add custom content to taxonomy pages, simply create `_index.md` files in the content folder using the taxonomy name as the sub-directory name.
```shell
.
└── content
└── animals
├── _index.md # /animals
└── lion
└── _index.md # /animals/lion
```
Anything in these content files will now be placed onto the generated taxonomy pages. As with other content, the front matter variables can be used to override defaults. In this way you could have a tag named `lion` but override the `title` to be "Lion".
To see how this looks in reality, check out the [tags taxonomy listing]({{< ref "tags" >}}) on this site.
## Leaf pages
| | |
| ------------------------- | ------------------------------- |
| **Layout:** | `layouts/_default/single.html` |
| **Content (standalone):** | `content/../page-name.md` |
| **Content (bundled):** | `content/../page-name/index.md` |
Leaf pages in Hugo are basically standard content pages. They are defined as pages that don't contain any sub-pages. These could be things like an about page, or an individual blog post that lives in the blog section of the website.
The most important thing to remember about leaf pages is that unlike branch pages, leaf pages should be named `index.md` _without_ an underscore. Leaf pages are also special in that they can be grouped together at the top level of the section and named with a unique name.
```shell
.
└── content
└── blog
├── first-post.md # /blog/first-post
├── second-post.md # /blog/second-post
└── third-post
├── index.md # /blog/third-post
└── image.jpg
```
When including assets in a page, like an image, a page bundle should be used. Page bundles are created using a sub-directory with an `index.md` file. Grouping the assets with the content in its own directory is important as many of the shortcodes and other theme logic assumes that resources are bundled alongside pages.
**Example:**
```yaml
---
title: "My First Blog Post"
date: 2022-01-25
description: "Welcome to my blog!"
summary: "Learn more about me and why I am starting this blog."
tags: ["welcome", "new", "about", "first"]
---
_This_ is the content of my blog post.
```
Leaf pages have a wide variety of [front matter]({{< ref "front-matter" >}}) parameters that can be used to customise how they are displayed.
### External links
Blowfish has a special feature that allows links to external pages to appear alongside articles in the article listings. This is useful if you have content on third party websites like Medium, or research papers that you'd like to link to, without replicating the content in your Hugo site.
In order to create an external link article, some special front matter needs to be set:
```yaml
---
title: "My Medium post"
date: 2022-01-25
externalUrl: "https://medium.com/"
summary: "I wrote a post on Medium."
showReadingTime: false
_build:
render: "false"
list: "local"
---
```
Along with the normal front matter parameters like `title` and `summary`, the `externalUrl` parameter is used to tell Blowfish that this is not an ordinary article. The URL provided here will be where visitors are directed when they select this article.
Additionally, we use a special Hugo front matter parameter `_build` to prevent a normal page for this content being generated - there's no point generating a page since we're linking to an external URL!
The theme includes an archetype to make generating these external link articles simple. Just specify `-k external` when making new content.
```shell
hugo new -k external posts/my-post.md
```
### Simple pages
| | |
| ----------------- | ------------------------------ |
| **Layout:** | `layouts/_default/simple.html` |
| **Front Matter:** | `layout: "simple"` |
Blowfish also includes a special layout for simple pages. The simple layout is a full-width template that just places Markdown content into the page without any special theme features.
The only features available in the simple layout are breadcrumbs and sharing links. However, the behaviour of these can still be controlled using the normal page [front matter]({{< ref "front-matter" >}}) variables.
To enable the simple layout on a particular page, add the `layout` front matter variable with a value of `"simple"`:
```yaml
---
title: "My landing page"
date: 2022-03-08
layout: "simple"
---
This page content is now full-width.
```
## Custom layouts
One of the benefits of Hugo is that it makes it easy to create custom layouts for the whole site, individual sections or pages.
Layouts follow all the normal Hugo templating rules and more information is available in the [official Hugo docs](https://gohugo.io/templates/introduction/).
### Overriding default layouts
Each of the content types discussed above lists the layout file that is used to generate each type of page. If this file is created in your local project it will override the theme template and thus can be used to customise the default style of the website.
For example, creating a `layouts/_default/single.html` file will allow the layout of leaf pages to be completely customised.
### Custom section layouts
It is also simple to create custom layouts for individual content sections. This is useful when you want to make a section that lists a certain type of content using a particular style.
Let's step through an example that creates a custom "Projects" page that lists projects using a special layout.
In order to do this, structure your content using the normal Hugo content rules and create a section for your projects. Additionally, create a new layout for the projects section by using the same directory name as the content and adding a `list.html` file.
```shell
.
└── content
│ └── projects
│ ├── _index.md
│ ├── first-project.md
│ └── second-project.md
└── layouts
└── projects
└── list.html
```
This `list.html` file will now override the default list template, but only for the `projects` section. Before we look at this file, lets first look at the individual project files.
```yaml
---
title: "Blowfish"
date: 2021-08-11
icon: "github"
description: "A theme for Hugo built with Tailwind CSS."
topics: ["Hugo", "Web", "Tailwind"]
externalUrl: "https://github.com/nunocoracao/blowfish/"
---
```
_In this example we are assigning some metadata for each project that we can then use in our list template. There's no page content, but there's nothing stopping you from including it. It's your own custom template after all!_
With the projects defined, now we can create a list template that outputs the details of each project.
```go
{{ define "main" }}
<section class="mt-8">
{{ range .Pages }}
<article class="pb-6">
<a class="flex" href="{{ .Params.externalUrl }}">
<div class="mr-3 text-3xl text-neutral-300">
<span class="relative inline-block align-text-bottom">
{{ partial "icon.html" .Params.icon }}
</span>
</div>
<div>
<h3 class="flex text-xl font-semibold">
{{ .Title }}
</h3>
<p class="text-sm text-neutral-400">
{{ .Description }}
</p>
</div>
</a>
</article>
{{ end }}
</section>
{{ end }}
```
Although this is quite a straightforward example, you can see that it steps through each of the pages in this section (ie. each project), and then outputs HTML links to each project alongside an icon. The metadata in the front matter for each project is used to determine which information is displayed.
Keep in mind that you'll need to ensure the relevant styles and classes are available, which may require the Tailwind CSS to be recompiled. This is discussed in more detail in the [Advanced Customisation]({{< ref "advanced-customisation" >}}) section.
When making custom templates like this one, it's always easiest to take a look at how the default Blowfish template works and then use that as a guide. Remember, the [Hugo docs](https://gohugo.io/templates/introduction/) are a great resource to learn more about creating templates too.

View file

@ -0,0 +1,318 @@
---
title: "コンテンツの例"
weight: 11
draft: false
description: "Blowfish で利用可能なすべてのパーシャル。"
slug: "content-examples"
tags: ["content", "example"]
series: ["Documentation"]
series_order: 12
---
ドキュメントを順に読んできた方なら、Blowfish で利用可能なすべての機能と設定について、すでにご存じでしょう。このページでは、これまで説明してきたすべてをまとめて、Hugo プロジェクトで使用できる実践的なサンプルを紹介します。
{{< alert >}}
**ヒント:** Hugo を初めて使用する場合は、[公式ドキュメント](https://gohugo.io/content-management/page-bundles/)でページバンドルとリソースの概念について、さらに詳しく学習することをお勧めします。
{{< /alert >}}
このページの例は、さまざまなシナリオに適応できます。あなたのプロジェクトで、特定のコンテンツをどのようにフォーマットするか、そのヒントになれば幸いです。
## ブランチページ
Hugo のブランチページバンドルは、ホームページ、セクションリスト、タクソノミーページなどを指します。ブランチバンドルで覚えておくべき重要なことは、このコンテンツタイプのファイル名が **`_index.md`** であることです。
Blowfish は、ブランチページで指定された Front Matter のパラメータを認識し、特定のページのデフォルト設定を上書きします。例えば、ブランチページで `title` パラメータを設定すると、そのページのタイトルを上書きできます。
### ホームページ
| | |
| ------------ | -------------------- |
| **レイアウト:** | `layouts/index.html` |
| **コンテンツ:** | `content/_index.md` |
Blowfish のホームページは、その全体デザインがホームページレイアウト設定パラメータによって制御される、特別なページです。詳細は[ホームページレイアウト]({{< ref "homepage-layout" >}})セクションをご覧ください。
ホームページに独自のコンテンツを追加するには、`content/_index.md` ファイルを作成するだけです。このファイルの内容が、ホームページに表示されます。
**例:**
```yaml
---
title: "Blowfish へようこそ!"
description: "ホームページにコンテンツを追加するデモです。"
---
私のウェブサイトへようこそ! お越しいただき、本当に嬉しいです。
```
_この例では、独自のタイトルを設定し、ページ本文にテキストを追加しています。ショートコード、画像、リンクなど、Markdown 形式のテキストはすべて使用できます。_
### リストページ
| | |
| ------------ | ---------------------------- |
| **レイアウト:** | `layouts/_default/list.html` |
| **コンテンツ:** | `content/../_index.md` |
リストページは、セクション内の全ページをまとめて、訪問者が各ページを閲覧できるようにします。ブログやポートフォリオは、投稿やプロジェクトをまとめるリストページの代表例です。
リストページは、コンテンツフォルダ内にサブディレクトリを作成するだけで簡単に作成できます。例えば、「プロジェクト」セクションを作成するには、`content/projects/` を作成します。そして、各プロジェクト用の Markdown ファイルを作成します。
リストページはデフォルトで生成されますが、コンテンツをカスタマイズするには、この新しいディレクトリ内に `_index.md` ファイルも作成する必要があります。
```shell
.
└── content
└── projects
├── _index.md # /projects
├── first-project.md # /projects/first-project
└── another-project
├── index.md # /projects/another-project
└── project.jpg
```
Hugo は、projects フォルダ内の各ページに対して、適切な URL を自動生成します。
ホームページと同様に、`_index.md` ファイルの内容は、生成されたリストのインデックスページに表示されます。そして、Blowfish は、そのセクション内のページをコンテンツの下に一覧表示します。
**例:**
```yaml
---
title: "プロジェクト"
description: "私のプロジェクトのいくつかをご紹介します。"
cascade:
showReadingTime: false
---
このセクションでは、私の現在進行中のプロジェクトを紹介しています。
```
_この例では、特別な `cascade` パラメータを使用して、このセクション内の各ページの閲覧時間を非表示にしています。これにより、各プロジェクトページでは閲覧時間が表示されなくなります。これは、個々のページにパラメータを記述することなく、セクション全体のデフォルトのテーマパラメータを上書きできる便利な方法です。_
このサイトの[サンプルセクション]({{< ref "samples" >}})は、リストページの活用例です。
### タクソノミーページ
| | |
| ---------------- | -------------------------------- |
| **リストレイアウト:** | `layouts/_default/taxonomy.html` |
| **タームレイアウト:** | `layouts/_default/term.html` |
| **コンテンツ:** | `content/../_index.md` |
タクソミーページには、「タクソミーリスト」と「タクソミーターム」の2種類があります。リストは特定のタクソミー内の各タームの一覧を表示し、タームは特定のタームに関連付けられたページ一覧を表示します。
少し複雑に感じるかもしれないので、`animals` というタクソノミーを例に説明します。
まず、Hugo でタクソノミーを使用するには、設定が必要です。`config/_default/taxonomies.toml` に設定ファイルを作成し、タクソノミー名を定義しましょう。
```toml
# config/_default/taxonomies.toml
animal = "animals"
```
Hugo ではタクソノミーを単数形と複数形で設定する必要があるため、ここでは `animal` (単数形) = `animals` (複数形) として、サンプルのタクソノミーを作成します。
`animals` タクソノミーが作成できたので、次はこれを個々のコンテンツに追加します。フロントマターに以下のように記述するだけです。
```yaml
---
title: "ライオンの巣窟へ"
description: "今週はライオンについて学びます。"
animals: ["lion", "cat"]
---
```
これで、`animals` タクソノミー内に `lion``cat` という2つの _ターム_ が作成されました。
この時点ではまだ分かりませんが、Hugo はこの新しいタクソノミーのために、リストページとタームページを自動生成します。デフォルトでは、リストページは `/animals/`、タームページは `/animals/lion/``/animals/cat/` でアクセスできます。
リストページには、タクソノミーに含まれるすべてのタームが一覧表示されます。この例では、`/animals/` にアクセスすると、「lion」と「cat」へのリンクが表示され、それぞれのタームページへ移動できます。
タームページには、そのタームに関連付けられたすべてのページが表示されます。タームリストは、基本的に通常の[リストページ](#リストページ)と同じで、ほぼ同様に機能します。
タクソノミーページに独自のコンテンツを追加するには、タクソノミー名をサブディレクトリ名として、`content` フォルダ内に `_index.md` ファイルを作成するだけです。
```shell
.
└── content
└── animals
├── _index.md # /animals
└── lion
└── _index.md # /animals/lion
```
これらのファイルに記述した内容はすべて、自動生成されたタクソノミーページに表示されます。他のコンテンツと同様に、フロントマターの変数を使用してデフォルト値を上書きできます。例えば、`lion` というタグ名を付けつつ、`title` を「Lion」と表示することも可能です。
実際の表示例は、このサイトの[タグタクソノミーリスト]({{< ref "tags" >}})をご覧ください。
## リーフページ
| | |
| ------------------------- | ------------------------------- |
| **レイアウト:** | `layouts/_default/single.html` |
| **コンテンツ (スタンドアロン):** | `content/../page-name.md` |
| **コンテンツ (バンドル):** | `content/../page-name/index.md` |
Hugo のリーフページは、基本的に標準的なコンテンツページです。サブページを含まないページとして定義されます。例えば、自己紹介ページや、ウェブサイトのブログセクションにある個別のブログ記事などが該当します。
リーフページで最も重要なのは、ブランチページとは異なり、ファイル名をアンダースコアを _付けずに_ `index.md` とすることです。また、リーフページはセクションのトップレベルでグループ化し、それぞれに固有の名前を付けられるという点でも特別です。
```shell
.
└── content
└── blog
├── first-post.md # /blog/first-post
├── second-post.md # /blog/second-post
└── third-post
├── index.md # /blog/third-post
└── image.jpg
```
画像などのアセットをページに含める場合は、ページバンドルを使用する必要があります。ページバンドルは、`index.md` ファイルを含むサブディレクトリを使用して作成します。多くのショートコードやその他のテーマロジックは、リソースがページと共にバンドルされていることを前提としているため、アセットとコンテンツを独自のディレクトリにまとめておくことが重要です。
**例:**
```yaml
---
title: "初めてのブログ記事"
date: 2022-01-25
description: "私のブログへようこそ!"
summary: "私自身と、このブログを始めた理由についてご紹介します。"
tags: ["welcome", "new", "about", "first"]
---
_これ_ が私のブログ記事の本文です。
```
リーフページでは、表示方法をカスタマイズするために、様々な[フロントマター]({{< ref "front-matter" >}})パラメータを使用できます。
### 外部リンク
Blowfish には、記事リストの記事と一緒に外部リンクを表示できる特別な機能があります。これは、Medium などのサードパーティのウェブサイトにコンテンツがある場合や、Hugo サイトにコンテンツを複製せずにリンクしたい研究論文がある場合に便利です。
外部リンク記事を作成するには、特別なフロントマターを設定する必要があります。
```yaml
---
title: "私の Medium 記事"
date: 2022-01-25
externalUrl: "https://medium.com/"
summary: "Medium に記事を投稿しました。"
showReadingTime: false
_build:
render: "false"
list: "local"
---
```
`title``summary` などの通常の Front Matter パラメータに加えて、`externalUrl` パラメータは、これが通常の記事ではないことを Blowfish に伝えるために使用されます。ここに指定された URL は、訪問者がこの記事を選択した際にリダイレクトされる場所です。
さらに、特別な Hugo フロントマターパラメータ `_build` を使用して、このコンテンツの通常のページが生成されないようにします。外部リンクにリダイレクトするため、ページを生成する必要はありません。
テーマには、外部リンク記事を簡単に作成するためのアーキタイプが含まれています。新しいコンテンツを作成する際に、`-k external` を指定するだけです。
```shell
hugo new -k external posts/my-post.md
```
### シンプルページ
| | |
| ----------------- | ------------------------------ |
| **レイアウト:** | `layouts/_default/simple.html` |
| **フロントマター:** | `layout: "simple"` |
Blowfish には、シンプルなページ用の特別なレイアウトも用意されています。シンプルレイアウトは、特別なテーマ機能を使用せずに、Markdown コンテンツのみを表示する全幅テンプレートです。
シンプルレイアウトで利用できる機能は、パンくずリストと共有リンクのみです。ただし、これらの動作は、通常のページの[フロントマター]({{< ref "front-matter" >}})変数を使用して制御できます。
特定のページでシンプルレイアウトを有効にするには、`layout` フロントマター変数に値 `"simple"` を設定します。
```yaml
---
title: "私のランディングページ"
date: 2022-03-08
layout: "simple"
---
このページのコンテンツは全幅で表示されます。
```
## カスタムレイアウト
Hugo の利点の 1 つは、サイト全体、個別のセクション、またはページごとに、簡単にカスタムレイアウトを作成できることです。
レイアウトは、通常の Hugo テンプレートルールに従います。詳細は[公式 Hugo ドキュメント](https://gohugo.io/templates/introduction/)をご覧ください。
### デフォルトレイアウトの上書き
上記の各コンテンツタイプには、それぞれのタイプのページを生成するために使用されるレイアウトファイルが記載されています。このファイルをローカルプロジェクトで作成すると、テーマのテンプレートが上書きされるため、ウェブサイトのデフォルトスタイルをカスタマイズできます。
例えば、`layouts/_default/single.html` ファイルを作成すると、リーフページのレイアウトを完全にカスタマイズできます。
### カスタムセクションレイアウト
個々のコンテンツセクション用に、カスタムレイアウトを作成することも簡単です。特定のスタイルを使用して、特定のタイプのコンテンツを一覧表示するセクションを作成したい場合に便利です。
特別なレイアウトを使用してプロジェクトを一覧表示する、カスタム「プロジェクト」ページを作成する例を見てみましょう。
まず、通常の Hugo コンテンツルールに従ってコンテンツを構成し、プロジェクト用のセクションを作成します。次に、コンテンツと同じディレクトリ名を使用し、`list.html` ファイルを追加して、プロジェクトセクション用の新しいレイアウトを作成します。
```shell
.
└── content
│ └── projects
│ ├── _index.md
│ ├── first-project.md
│ └── second-project.md
└── layouts
└── projects
└── list.html
```
この `list.html` ファイルは、デフォルトのリストテンプレートを上書きしますが、`projects` セクションに対してのみ有効です。このファイルの中身を見る前に、まず個々のプロジェクトファイルを見てみましょう。
```yaml
---
title: "Blowfish"
date: 2021-08-11
icon: "github"
description: "Tailwind CSS を使用して構築された Hugo テーマ。"
topics: ["Hugo", "Web", "Tailwind"]
externalUrl: "https://github.com/nunocoracao/blowfish/"
---
```
_ここでは、各プロジェクトのメタデータを設定しています。このメタデータは、後ほどリストテンプレートで使用できます。ページコンテンツはありませんが、必要に応じて追加することも可能です。あなた独自のカスタムテンプレートですから!_
プロジェクトが定義できたので、次は各プロジェクトの詳細を出力するリストテンプレートを作成しましょう。
```go
{{ define "main" }}
<section class="mt-8">
{{ range .Pages }}
<article class="pb-6">
<a class="flex" href="{{ .Params.externalUrl }}">
<div class="mr-3 text-3xl text-neutral-300">
<span class="relative inline-block align-text-bottom">
{{ partial "icon.html" .Params.icon }}
</span>
</div>
<div>
<h3 class="flex text-xl font-semibold">
{{ .Title }}
</h3>
<p class="text-sm text-neutral-400">
{{ .Description }}
</p>
</div>
</a>
</article>
{{ end }}
</section>
{{ end }}
```
これは非常にシンプルな例ですが、このセクションの各ページ (つまり、各プロジェクト) を順に処理し、アイコンと共に各プロジェクトへの HTML リンクを出力しています。各プロジェクトのフロントマターのメタデータは、表示される情報を決定するために使用されます。
関連するスタイルとクラスが利用可能であることを確認する必要があることに注意してください。場合によっては、Tailwind CSS の再コンパイルが必要になる場合があります。これについては、[高度なカスタマイズ]({{< ref "advanced-customisation" >}})セクションで詳しく説明しています。
このようなカスタムテンプレートを作成する際には、まずデフォルトの Blowfish テンプレートの動作を確認し、それを参考にすることをお勧めします。[Hugo ドキュメント](https://gohugo.io/templates/introduction/)も、テンプレート作成について学ぶための優れた情報源です。

View file

@ -0,0 +1,318 @@
---
title: "Content Examples"
weight: 11
draft: false
description: "All the partials available in Blowfish."
slug: "content-examples"
tags: ["content", "example"]
series: ["Documentation"]
series_order: 12
---
If you've been reading the documentation in order, you should now know about all the features and configurations available in Blowfish. This page is designed to pull everything together and offer some worked examples that you might like to use in your Hugo project.
{{< alert >}}
**Tip:** If you're new to Hugo, be sure to check out the [official docs](https://gohugo.io/content-management/page-bundles/) to learn more about the concept of page bundles and resources.
{{< /alert >}}
The examples on this page can all be adapted to different scenarios but hopefully give you some ideas about how to approach formatting a particular content item for your individual project.
## Branch pages
Branch page bundles in Hugo cover items like the homepage, section listings, and taxonomy pages. The important thing to remember about branch bundles is that the filename for this content type is **`_index.md`**.
Blowfish will honour the front matter parameters specified in branch pages and these will override the default settings for that particular page. For example, setting the `title` parameter in a branch page will allow overriding the page title.
### Homepage
| | |
| ------------ | -------------------- |
| **Layout:** | `layouts/index.html` |
| **Content:** | `content/_index.md` |
The homepage in Blowfish is special in that it's overarching design is controlled by the homepage layout config parameter. You can learn more about this in the [Homepage Layout]({{< ref "homepage-layout" >}}) section.
If you want to add custom content to this page, you simply need to create a `content/_index.md` file. Anything in this file will then be included in your homepage.
**Example:**
```yaml
---
title: "Welcome to Blowfish!"
description: "This is a demo of adding content to the homepage."
---
Welcome to my website! I'm really happy you stopped by.
```
_This example sets a custom title and adds some additional text to the body of the page. Any Markdown formatted text is acceptable, including shortcodes, images and links._
### List pages
| | |
| ------------ | ---------------------------- |
| **Layout:** | `layouts/_default/list.html` |
| **Content:** | `content/../_index.md` |
List pages group all the pages within into a section and provide a way for visitors to reach each page. A blog or portfolio are examples of a list page as they group together posts or projects.
Creating a list page is as simple as making a sub-directory in the content folder. For example, to create a "Projects" section, you would create `content/projects/`. Then create a Markdown file for each of your projects.
A list page will be generated by default, however to customise the content, you should also create an `_index.md` page in this new directory.
```shell
.
└── content
└── projects
├── _index.md # /projects
├── first-project.md # /projects/first-project
└── another-project
├── index.md # /projects/another-project
└── project.jpg
```
Hugo will generate URLs for the pages in your projects folder accordingly.
Just like the homepage, content in the `_index.md` file will be output into the generated list index. Blowfish will then list any pages in this section below the content.
**Example:**
```yaml
---
title: "Projects"
description: "Learn about some of my projects."
cascade:
showReadingTime: false
---
This section contains all my current projects.
```
_In this example, the special `cascade` parameter is being used to hide the reading time on any sub-pages within this section. By doing this, any project pages will not have their reading time showing. This is a great way to override default theme parameters for an entire section without having to include them in every individual page._
The [samples section]({{< ref "samples" >}}) of this site is an example of a list page.
### Taxonomy pages
| | |
| ---------------- | -------------------------------- |
| **List layout:** | `layouts/_default/taxonomy.html` |
| **Term layout:** | `layouts/_default/term.html` |
| **Content:** | `content/../_index.md` |
Taxonomy pages come in two forms - taxonomy lists and taxonomy terms. Lists display a listing of each of the terms within a given taxonomy, while terms display a list of pages that are related to a given term.
The terminology can get a little confusing so let's explore an example using a taxonomy named `animals`.
Firstly, to use taxonomies in Hugo, they have to be configured. This is done by creating a config file at `config/_default/taxonomies.toml` and defining the taxonomy name.
```toml
# config/_default/taxonomies.toml
animal = "animals"
```
Hugo expects taxonomies to be listed using their singular and plural forms, so we add the singular `animal` equals the plural `animals` to create our example taxonomy.
Now that our `animals` taxonomy exists, it needs to be added to individual content items. It's as simple as inserting it into the front matter:
```yaml
---
title: "Into the Lion's Den"
description: "This week we're learning about lions."
animals: ["lion", "cat"]
---
```
This has now created two _terms_ within our `animals` taxonomy - `lion` and `cat`.
Although it's not obvious at this point, Hugo will now be generating list and term pages for this new taxonomy. By default the listing can be accessed at `/animals/` and the term pages can be found at `/animals/lion/` and `/animals/cat/`.
The list page will list all the terms contained within the taxonomy. In this example, navigating to `/animals/` will show a page that has links for "lion" and "cat" which take visitors to the individual term pages.
The term pages will list all the pages contained within that term. These term lists are essentially the same as normal [list pages](#list-pages) and behave in much the same way.
In order to add custom content to taxonomy pages, simply create `_index.md` files in the content folder using the taxonomy name as the sub-directory name.
```shell
.
└── content
└── animals
├── _index.md # /animals
└── lion
└── _index.md # /animals/lion
```
Anything in these content files will now be placed onto the generated taxonomy pages. As with other content, the front matter variables can be used to override defaults. In this way you could have a tag named `lion` but override the `title` to be "Lion".
To see how this looks in reality, check out the [tags taxonomy listing]({{< ref "tags" >}}) on this site.
## Leaf pages
| | |
| ------------------------- | ------------------------------- |
| **Layout:** | `layouts/_default/single.html` |
| **Content (standalone):** | `content/../page-name.md` |
| **Content (bundled):** | `content/../page-name/index.md` |
Leaf pages in Hugo are basically standard content pages. They are defined as pages that don't contain any sub-pages. These could be things like an about page, or an individual blog post that lives in the blog section of the website.
The most important thing to remember about leaf pages is that unlike branch pages, leaf pages should be named `index.md` _without_ an underscore. Leaf pages are also special in that they can be grouped together at the top level of the section and named with a unique name.
```shell
.
└── content
└── blog
├── first-post.md # /blog/first-post
├── second-post.md # /blog/second-post
└── third-post
├── index.md # /blog/third-post
└── image.jpg
```
When including assets in a page, like an image, a page bundle should be used. Page bundles are created using a sub-directory with an `index.md` file. Grouping the assets with the content in its own directory is important as many of the shortcodes and other theme logic assumes that resources are bundled alongside pages.
**Example:**
```yaml
---
title: "My First Blog Post"
date: 2022-01-25
description: "Welcome to my blog!"
summary: "Learn more about me and why I am starting this blog."
tags: ["welcome", "new", "about", "first"]
---
_This_ is the content of my blog post.
```
Leaf pages have a wide variety of [front matter]({{< ref "front-matter" >}}) parameters that can be used to customise how they are displayed.
### External links
Blowfish has a special feature that allows links to external pages to appear alongside articles in the article listings. This is useful if you have content on third party websites like Medium, or research papers that you'd like to link to, without replicating the content in your Hugo site.
In order to create an external link article, some special front matter needs to be set:
```yaml
---
title: "My Medium post"
date: 2022-01-25
externalUrl: "https://medium.com/"
summary: "I wrote a post on Medium."
showReadingTime: false
_build:
render: "false"
list: "local"
---
```
Along with the normal front matter parameters like `title` and `summary`, the `externalUrl` parameter is used to tell Blowfish that this is not an ordinary article. The URL provided here will be where visitors are directed when they select this article.
Additionally, we use a special Hugo front matter parameter `_build` to prevent a normal page for this content being generated - there's no point generating a page since we're linking to an external URL!
The theme includes an archetype to make generating these external link articles simple. Just specify `-k external` when making new content.
```shell
hugo new -k external posts/my-post.md
```
### Simple pages
| | |
| ----------------- | ------------------------------ |
| **Layout:** | `layouts/_default/simple.html` |
| **Front Matter:** | `layout: "simple"` |
Blowfish also includes a special layout for simple pages. The simple layout is a full-width template that just places Markdown content into the page without any special theme features.
The only features available in the simple layout are breadcrumbs and sharing links. However, the behaviour of these can still be controlled using the normal page [front matter]({{< ref "front-matter" >}}) variables.
To enable the simple layout on a particular page, add the `layout` front matter variable with a value of `"simple"`:
```yaml
---
title: "My landing page"
date: 2022-03-08
layout: "simple"
---
This page content is now full-width.
```
## Custom layouts
One of the benefits of Hugo is that it makes it easy to create custom layouts for the whole site, individual sections or pages.
Layouts follow all the normal Hugo templating rules and more information is available in the [official Hugo docs](https://gohugo.io/templates/introduction/).
### Overriding default layouts
Each of the content types discussed above lists the layout file that is used to generate each type of page. If this file is created in your local project it will override the theme template and thus can be used to customise the default style of the website.
For example, creating a `layouts/_default/single.html` file will allow the layout of leaf pages to be completely customised.
### Custom section layouts
It is also simple to create custom layouts for individual content sections. This is useful when you want to make a section that lists a certain type of content using a particular style.
Let's step through an example that creates a custom "Projects" page that lists projects using a special layout.
In order to do this, structure your content using the normal Hugo content rules and create a section for your projects. Additionally, create a new layout for the projects section by using the same directory name as the content and adding a `list.html` file.
```shell
.
└── content
│ └── projects
│ ├── _index.md
│ ├── first-project.md
│ └── second-project.md
└── layouts
└── projects
└── list.html
```
This `list.html` file will now override the default list template, but only for the `projects` section. Before we look at this file, lets first look at the individual project files.
```yaml
---
title: "Blowfish"
date: 2021-08-11
icon: "github"
description: "A theme for Hugo built with Tailwind CSS."
topics: ["Hugo", "Web", "Tailwind"]
externalUrl: "https://github.com/nunocoracao/blowfish/"
---
```
_In this example we are assigning some metadata for each project that we can then use in our list template. There's no page content, but there's nothing stopping you from including it. It's your own custom template after all!_
With the projects defined, now we can create a list template that outputs the details of each project.
```go
{{ define "main" }}
<section class="mt-8">
{{ range .Pages }}
<article class="pb-6">
<a class="flex" href="{{ .Params.externalUrl }}">
<div class="mr-3 text-3xl text-neutral-300">
<span class="relative inline-block align-text-bottom">
{{ partial "icon.html" .Params.icon }}
</span>
</div>
<div>
<h3 class="flex text-xl font-semibold">
{{ .Title }}
</h3>
<p class="text-sm text-neutral-400">
{{ .Description }}
</p>
</div>
</a>
</article>
{{ end }}
</section>
{{ end }}
```
Although this is quite a straightforward example, you can see that it steps through each of the pages in this section (ie. each project), and then outputs HTML links to each project alongside an icon. The metadata in the front matter for each project is used to determine which information is displayed.
Keep in mind that you'll need to ensure the relevant styles and classes are available, which may require the Tailwind CSS to be recompiled. This is discussed in more detail in the [Advanced Customisation]({{< ref "advanced-customisation" >}}) section.
When making custom templates like this one, it's always easiest to take a look at how the default Blowfish template works and then use that as a guide. Remember, the [Hugo docs](https://gohugo.io/templates/introduction/) are a great resource to learn more about creating templates too.

View file

@ -0,0 +1,318 @@
---
title: "内容示例"
weight: 11
draft: false
description: "包含 Blowfish 中所有可用部分的示例、"
slug: "content-examples"
tags: ["内容", "示例"]
series: ["部署教程"]
series_order: 12
---
如果你已经按顺序阅读了文档,那么你现在应该已经了解了 Blowfish 中所有的功能和配置信息。这个页面旨在把所有内容整合在一起,并提供一些你会在 Hugo 项目中使用的示例。
{{< alert >}}
**提示:** 如果你是Hugo的新用户请务必阅读[官方文档](https://gohugo.io/content-management/page-bundles/),了解更多关于页面捆绑和资源的概念。
{{< /alert >}}
这个页面上的示例都可以根据不同的场景进行调整,期待你在做自己项目的同时,提出一些对特定内容格式化的想法。
## 分支页面
Hugo 中的分支页面包括主页、部分列表页面和分类页面等内容,请记住,这些分支页面的文件名都是 **`_index.md`**。
Blowfish 支持在分支页面中设置[扉页参数]({{< ref "front-matter" >}}),在扉页中设置的参数将会覆盖在配置文件中设置的参数默认值。例如,在分支页面中的 `title` 参数将会覆盖页面标题的默认值。
### 主页
| | |
| ------------ | -------------------- |
| **Layout:** | `layouts/index.html` |
| **Content:** | `content/_index.md` |
Blowfish 中的主页比较特殊,它的整体设计是由主页的布局参数控制的。你可以在 [主页布局]({{< ref "homepage-layout" >}}) 来获取更多内容。
如果你想自定义主页的内容,你仅需创建一个 `content/_index.md` 文件。该文件中的任何内容都会包含在你的主页中。
**示例:**
```yaml
---
title: "欢迎来到 Blowfish "
description: "这是往主页中添加内容的例子。"
---
欢迎来到我的网站!我很高兴你的来访。
```
_这个例子设置了一个自定义标题并在页面正文中添加了一些额外的内容。当然任何的 Markdown 都是可接受的包括短代码、图片和连接。_
### 列表页
| | |
| ------------ | ---------------------------- |
| **Layout:** | `layouts/_default/list.html` |
| **Content:** | `content/../_index.md` |
列表页将所有页面聚合到一个目录下,并为访问者提供了一种浏览页面的方式。博客或者作品集是一个典型案例,因为这两种类型的网站会将帖子或项目整合到一个列表页中。
创建一个列表页就如同创建子目录一样简单。例如,要创建一个 "Projects" 列表页,你可以创建`content/projects/`。然后为你的项目创建一个 Markdown 文件。
Creating a list page is as simple as making a sub-directory in the content folder. For example, to create a "Projects" section, you would create `content/projects/`. Then create a Markdown file for each of your projects.
列表页面默认会自动生成,如果你想在列表添加一些页自定义内容,还需要在此目录创建一个 `_index.md` 文件。
```shell
.
└── content
└── projects
├── _index.md # /projects
├── first-project.md # /projects/first-project
└── another-project
├── index.md # /projects/another-project
└── project.jpg
```
Hugo 将会自动为目录中对应的项目页面生成 URL。
类似于主页,列表页面也可以通过 `_index.md` 文件来添加自定义的内容。Blowfish将会在自定义内容的下方展示这个列表所包含的所有子页面。
**示例:**
```yaml
---
title: "项目"
description: "了解我的一些项目。"
cascade:
showReadingTime: false
---
本节包含了我所有的当前项目。
```
_在上面的示例中这里的 `cascade` 参数被用来隐藏该列表页下任何子页面的阅读时间。这样做是的任何子页面都不会显示阅读时间这是一种为整个部分添加默认参数的好方法。_
[样本部分]({{< ref "samples" >}})提供了列表页面的例子。
### 分类页面
| | |
| ---------------- | -------------------------------- |
| **List layout:** | `layouts/_default/taxonomy.html` |
| **Term layout:** | `layouts/_default/term.html` |
| **Content:** | `content/../_index.md` |
分类页面有两种形式:分类列表和分类术语。列表页面显示给定分类中每个属于的列表,术语页面显示与给定术语相关的页面列表。
术语这个词可能会有些令人困惑,所以这里让我们举个例子,假设将 `animals` 分类。
首先,想要在 Hugo 中使用分类,需要先进行配置。通过创建 `config/_default/taxonomies.toml` 文件并定义分类名称来完成创建。
```toml
# config/_default/taxonomies.toml
animal = "animals"
```
Hugo 期望分类定义式 单数 = “复数” 的形式,所以这里添加单数 `animal` 等于复数 `animals` 来创建我们的分类示例。
现在 `animals` 分类就有了,需要在内容中添加它。下面是一个简单的在扉页参数中添加分类的例子:
```yaml
---
title: "进入狮子的巢穴"
description: "这周我们学习狮子。"
animals: ["lion", "cat"]
---
```
现在我们已经在 `animals` 分类中添加了 `lion``cat` 两个术语。
目前看起来还不太明显,但是 Hugo 将会为这个分类自动生成分类列表页和两个术语页。默认情况下可以在 `/animals/` 地址访问列表页,在 `/animals/lion/``/animals/cat/` 访问术语页。
这个列表页会列举出所有包含在这个分类中的术语。在上面的例子中,`/animals/` 页面会包含 "lion" 和 "cat" 的链接,以此将访问者导向至具体的术语页。
术语页将会列举出包含这个术语的所有页面。这些术语页面本质上和[列表页面](#list-pages)相同,并且以类似的方式运作。
如果你想在分类页面中添加自定义的内容,只需要对应文件夹的目录中创建 `_index.md` 文件即可。
```shell
.
└── content
└── animals
├── _index.md # /animals
└── lion
└── _index.md # /animals/lion
```
这些 `_index.md` 中的内容都会放置在生成的分类页面上。与其他页面一样,[扉页参数]({{< ref "front-matter" >}})中设置的变量也可以用来覆盖默认值。比如你可以有一个标签名是`lion`,但是可以将其覆盖成 "Lion"。
想要查看实际效果,可以看[标签分类列表]({{< ref "tags" >}})。
## 叶子页面
| | |
| ------------------------- | ------------------------------- |
| **Layout:** | `layouts/_default/single.html` |
| **Content (standalone):** | `content/../page-name.md` |
| **Content (bundled):** | `content/../page-name/index.md` |
Hugo 中的页面叶子页面是一个标准的内容页面,它不包含子页面的页面。可以作为关于页面,或者位于个人博客网站中的文章。
最重要的是,与分支页面不同,叶子页面应该被命名为 `index.md`,而不是带下划线的`_index.md`。叶子页面比较特殊,它可以是一个在列表页面中的一个有唯一名称的文件,也可以是在一个有唯一名称的页面捆绑包。
```shell
.
└── content
└── blog
├── first-post.md # /blog/first-post
├── second-post.md # /blog/second-post
└── third-post
├── index.md # /blog/third-post
└── image.jpg
```
当页面中包含类似图片的资源,应该使用页面捆绑包,即子目录的方式。页面捆绑包时一个包含 `index.md` 文件的子目录。将资源和页面内容打包在同一个目录中是必要的,因为许多短代码和其他主题逻辑假设资源和页面捆绑在一起,
**示例:**
```yaml
---
title: "我的第一篇博客文章"
date: 2022-01-25
description: "欢迎来到我的博客"
summary: "了解更多关于我和我创建博客的初衷。"
tags: ["welcome", "new", "about", "first"]
---
_这_ 是博客的内容。
```
叶子页面有很多的[扉页参数]({{< ref "front-matter" >}}),来帮你你自定义展示它。
### 外部链接
Blowfish 允许外部页面链接和文章列表一起显示在列表页。如果你在第三方网站如Medium有文章或者你想连接到研究论文而不想在 Hugo 中复制内容,这将非常有用。
为了创建一个外部链接文章,需要设置一些特殊的扉页参数:
```yaml
---
title: "我的 Medium 文章"
date: 2022-01-25
externalUrl: "https://medium.com/"
summary: "我在Medium上写了一篇文章。"
showReadingTime: false
_build:
render: "false"
list: "local"
---
```
除了像 `title``summary` 这种普通的扉页参数外,需要设置 `externalUrl` 参数来告诉 Blowfish 这不是一篇普通的文章。访问者在访问后,会被重定向到这里提供的 URL。
此外,我们使用了 `_build` 参数来避免 Hugo 生成一个普通页面。因为我们是一个连接到外部的 URL生成页面是没有意义的。
Hugo 中可以通过命令来快速生成一个外部链接的文件,在创建新的外部链接是,只需要指定 `-k external` 即可。这让生成外部链接文章变得更简单。
```shell
hugo new -k external posts/my-post.md
```
### 简单页面
| | |
| ----------------- | ------------------------------ |
| **Layout:** | `layouts/_default/simple.html` |
| **Front Matter:** | `layout: "simple"` |
Blowfish 包含了一个用于简单页面的布局。简单布局是一个全宽的模板,并仅仅展示 Markdown 中的内容,不包含任何主题中的特性。
简单布局中唯一可用的特性是面包屑导航和分享链接。这个行为也是通过 [扉页参数]({{< ref "front-matter" >}}) 来控制。
如果想在特定页面上启用简单布局,添加 `layout` 扉页参数,并设置为 `"simple"`
```yaml
---
title: "我的着陆页"
date: 2022-03-08
layout: "simple"
---
这个页面的内容是全宽的。
```
## 自定义布局
Hugo 的其中一个好处就是它让整个站点、单独内容或页面创建自定义布局变得容易。
自定义布局遵循所有 Hugo 的模板规则,更多信息可以在 [Hugo 官方文档](https://gohugo.io/templates/introduction/) 中找到。
### 覆盖默认布局
上面讨论的每种内容类型都列出了其对应的布局文件。如果你在本地项目中创建了这个文件,它将覆盖主题的默认模板,由此可以来自定义网站的样式布局。
例如,创建一个 `layouts/_default/single.html` 文件,此文件将允许用户完全自定义叶子页面的布局。
### 自定义部分布局
如果你想为个别内容创建自定义布局也很简单。这在使用特定样式列出某种类型内容时会非常有效。
让我们简单看一个例子,来了解如何为"Projects"页面创建自定义的特殊布局。
为了做到这一点使用常规的Hugo规则来在 `content` 目录下组织你的内容。此外,在和 `layout` 目录中创建和内容部分相同的目录结构,并在此目录下添加一个 `list.html` 文件,此文件是 "projects" 内容的一个新的列表页布局。
```shell
.
└── content
│ └── projects
│ ├── _index.md
│ ├── first-project.md
│ └── second-project.md
└── layouts
└── projects
└── list.html
```
`list.html` 文件将会覆盖默认的模板,但只会作用在 `projects` 部分。我们先看看 `_index.md` 文件的内容。
```yaml
---
title: "Blowfish"
date: 2021-08-11
icon: "github"
description: "用Tailwind CSS构建的Hugo主题。"
topics: ["Hugo", "Web", "Tailwind"]
externalUrl: "https://github.com/nunocoracao/blowfish/"
---
```
_在这个例子中我们为每个项目添加了一些参数然后我们在列表模板中可以使用他们。虽然这个例子没有页面的内容但这并不组织你添加内容。这是自己的的自定义模板完全可以随心所欲_
定义了项目内容后,现在我们可以创建一个列表模板来输出项目中的信息。
```go
{{ define "main" }}
<section class="mt-8">
{{ range .Pages }}
<article class="pb-6">
<a class="flex" href="{{ .Params.externalUrl }}">
<div class="mr-3 text-3xl text-neutral-300">
<span class="relative inline-block align-text-bottom">
{{ partial "icon.html" .Params.icon }}
</span>
</div>
<div>
<h3 class="flex text-xl font-semibold">
{{ .Title }}
</h3>
<p class="text-sm text-neutral-400">
{{ .Description }}
</p>
</div>
</a>
</article>
{{ end }}
</section>
{{ end }}
```
尽管这是一个比较简单的例子,但你可以看到这里的 `list.html` 文件遍历了本节中的所有子页面,然后输出了每个页面的 HTML 链接 和图标。每个项目的扉页参数被用来确定显示哪些信息。
Although this is quite a straightforward example, you can see that it steps through each of the pages in this section (ie. each project), and then outputs HTML links to each project alongside an icon. The metadata in the front matter for each project is used to determine which information is displayed.
请记住,构建网站的时候需要重新编译 Tailwind CSS一定要确保相关的样式和类可用。这在[高级定制]({{< ref "advanced-customisation" >}})部分有更详细的说明。
当尝试使用自定义模板时,请务必先了解默认的 Blowfish 模板是如何工作的,然后将其作为指南或模板。补充一点,[Hugo 文档](https://gohugo.io/templates/introduction/) 也是学习创建自定义模板的宝贵资源。

View file

@ -0,0 +1,574 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
style="margin:auto;background:rgba(NaN, NaN, NaN, 0);display:block;z-index:1;position:relative"
width="1084" height="322" preserveAspectRatio="xMidYMid" viewBox="0 0 1084 322">
<defs>
<pattern id="pid-0.7735807359934106" x="0" y="0" width="345.6" height="345.6"
patternUnits="userSpaceOnUse">
<g transform="scale(1.35)">
<g>
<line x1="237.6288884328494" x2="201.39714008747956" y1="119.05338354492488"
y2="155.28513189029474" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="237.6288884328494" x2="201.39714008747956" y1="-392.9466164550751"
y2="-356.71486810970526" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="493.6288884328494" x2="457.39714008747956" y1="-392.9466164550751"
y2="-356.71486810970526" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="749.6288884328494" x2="713.3971400874796" y1="-392.9466164550751"
y2="-356.71486810970526" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="237.6288884328494" x2="201.39714008747956" y1="-136.94661645507512"
y2="-100.71486810970526" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="493.6288884328494" x2="457.39714008747956" y1="-136.94661645507512"
y2="-100.71486810970526" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="749.6288884328494" x2="713.3971400874796" y1="-136.94661645507512"
y2="-100.71486810970526" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="237.6288884328494" x2="201.39714008747956" y1="119.05338354492488"
y2="155.28513189029474" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="493.6288884328494" x2="457.39714008747956" y1="119.05338354492488"
y2="155.28513189029474" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="749.6288884328494" x2="713.3971400874796" y1="119.05338354492488"
y2="155.28513189029474" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="244.43797352167968" x2="179.25167385613412" y1="196.21419032492787"
y2="261.40048999047343" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="244.43797352167968" x2="179.25167385613412" y1="-315.78580967507213"
y2="-250.59951000952657" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="500.4379735216797" x2="435.2516738561341" y1="-315.78580967507213"
y2="-250.59951000952657" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="756.4379735216796" x2="691.2516738561342" y1="-315.78580967507213"
y2="-250.59951000952657" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="244.43797352167968" x2="179.25167385613412" y1="-59.78580967507213"
y2="5.400489990473432" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="500.4379735216797" x2="435.2516738561341" y1="-59.78580967507213"
y2="5.400489990473432" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="756.4379735216796" x2="691.2516738561342" y1="-59.78580967507213"
y2="5.400489990473432" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="244.43797352167968" x2="179.25167385613412" y1="196.21419032492787"
y2="261.40048999047343" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="500.4379735216797" x2="435.2516738561341" y1="196.21419032492787"
y2="261.40048999047343" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="756.4379735216796" x2="691.2516738561342" y1="196.21419032492787"
y2="261.40048999047343" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="219.6724359102308" x2="209.2181431749452" y1="92.85808081141191"
y2="103.31237354669749" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="219.6724359102308" x2="209.2181431749452" y1="-419.1419191885881"
y2="-408.6876264533025" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="475.6724359102308" x2="465.2181431749452" y1="-419.1419191885881"
y2="-408.6876264533025" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="731.6724359102308" x2="721.2181431749452" y1="-419.1419191885881"
y2="-408.6876264533025" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="219.6724359102308" x2="209.2181431749452" y1="-163.14191918858808"
y2="-152.68762645330253" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="475.6724359102308" x2="465.2181431749452" y1="-163.14191918858808"
y2="-152.68762645330253" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="731.6724359102308" x2="721.2181431749452" y1="-163.14191918858808"
y2="-152.68762645330253" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="219.6724359102308" x2="209.2181431749452" y1="92.85808081141191"
y2="103.31237354669749" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="475.6724359102308" x2="465.2181431749452" y1="92.85808081141191"
y2="103.31237354669749" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="731.6724359102308" x2="721.2181431749452" y1="92.85808081141191"
y2="103.31237354669749" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="112.00565118011832" x2="71.15817744773324" y1="56.63419812919665"
y2="97.48167186158173" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="112.00565118011832" x2="71.15817744773324" y1="-455.36580187080335"
y2="-414.51832813841827" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="368.0056511801183" x2="327.15817744773324" y1="-455.36580187080335"
y2="-414.51832813841827" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="624.0056511801183" x2="583.1581774477332" y1="-455.36580187080335"
y2="-414.51832813841827" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="112.00565118011832" x2="71.15817744773324" y1="-199.36580187080335"
y2="-158.51832813841827" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="368.0056511801183" x2="327.15817744773324" y1="-199.36580187080335"
y2="-158.51832813841827" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="624.0056511801183" x2="583.1581774477332" y1="-199.36580187080335"
y2="-158.51832813841827" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="112.00565118011832" x2="71.15817744773324" y1="56.63419812919665"
y2="97.48167186158173" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="368.0056511801183" x2="327.15817744773324" y1="56.63419812919665"
y2="97.48167186158173" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="624.0056511801183" x2="583.1581774477332" y1="56.63419812919665"
y2="97.48167186158173" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="60.932966336476014" x2="49.388821076756514" y1="125.65681060957188"
y2="137.20095586929136" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="60.932966336476014" x2="49.388821076756514" y1="-386.3431893904281"
y2="-374.79904413070864" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="316.932966336476" x2="305.3888210767565" y1="-386.3431893904281"
y2="-374.79904413070864" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="572.932966336476" x2="561.3888210767565" y1="-386.3431893904281"
y2="-374.79904413070864" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="60.932966336476014" x2="49.388821076756514" y1="-130.3431893904281"
y2="-118.79904413070864" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="316.932966336476" x2="305.3888210767565" y1="-130.3431893904281"
y2="-118.79904413070864" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="572.932966336476" x2="561.3888210767565" y1="-130.3431893904281"
y2="-118.79904413070864" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="60.932966336476014" x2="49.388821076756514" y1="125.65681060957188"
y2="137.20095586929136" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="316.932966336476" x2="305.3888210767565" y1="125.65681060957188"
y2="137.20095586929136" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="572.932966336476" x2="561.3888210767565" y1="125.65681060957188"
y2="137.20095586929136" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="103.78310212459807" x2="35.08486945593138" y1="-2.328164446496814"
y2="66.37006822216988" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="103.78310212459807" x2="35.08486945593138" y1="-514.3281644464968"
y2="-445.6299317778301" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="359.7831021245981" x2="291.08486945593137" y1="-514.3281644464968"
y2="-445.6299317778301" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="615.783102124598" x2="547.0848694559314" y1="-514.3281644464968"
y2="-445.6299317778301" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="103.78310212459807" x2="35.08486945593138" y1="-258.3281644464968"
y2="-189.6299317778301" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="359.7831021245981" x2="291.08486945593137" y1="-258.3281644464968"
y2="-189.6299317778301" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="615.783102124598" x2="547.0848694559314" y1="-258.3281644464968"
y2="-189.6299317778301" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="103.78310212459807" x2="35.08486945593138" y1="-2.328164446496814"
y2="66.37006822216988" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="359.7831021245981" x2="291.08486945593137" y1="-2.328164446496814"
y2="66.37006822216988" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="615.783102124598" x2="547.0848694559314" y1="-2.328164446496814"
y2="66.37006822216988" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="103.78310212459807" x2="35.08486945593138" y1="253.67183555350317"
y2="322.3700682221699" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="211.69894364075495" x2="194.13528259328754" y1="166.21741462144607"
y2="183.78107566891347" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="211.69894364075495" x2="194.13528259328754" y1="-345.7825853785539"
y2="-328.21892433108655" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="467.6989436407549" x2="450.13528259328757" y1="-345.7825853785539"
y2="-328.21892433108655" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="723.6989436407549" x2="706.1352825932876" y1="-345.7825853785539"
y2="-328.21892433108655" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="211.69894364075495" x2="194.13528259328754" y1="-89.78258537855393"
y2="-72.21892433108653" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="467.6989436407549" x2="450.13528259328757" y1="-89.78258537855393"
y2="-72.21892433108653" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="723.6989436407549" x2="706.1352825932876" y1="-89.78258537855393"
y2="-72.21892433108653" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="211.69894364075495" x2="194.13528259328754" y1="166.21741462144607"
y2="183.78107566891347" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="467.6989436407549" x2="450.13528259328757" y1="166.21741462144607"
y2="183.78107566891347" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="723.6989436407549" x2="706.1352825932876" y1="166.21741462144607"
y2="183.78107566891347" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="44.012515207413756" x2="6.2920050630466875" y1="153.79537767995515"
y2="191.5158878243222" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="44.012515207413756" x2="6.2920050630466875" y1="-358.20462232004485"
y2="-320.4841121756778" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="300.01251520741374" x2="262.2920050630467" y1="-358.20462232004485"
y2="-320.4841121756778" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="556.0125152074138" x2="518.2920050630466" y1="-358.20462232004485"
y2="-320.4841121756778" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="44.012515207413756" x2="6.2920050630466875" y1="-102.20462232004485"
y2="-64.48411217567781" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="300.01251520741374" x2="262.2920050630467" y1="-102.20462232004485"
y2="-64.48411217567781" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="556.0125152074138" x2="518.2920050630466" y1="-102.20462232004485"
y2="-64.48411217567781" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="44.012515207413756" x2="6.2920050630466875" y1="153.79537767995515"
y2="191.5158878243222" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="300.01251520741374" x2="262.2920050630467" y1="153.79537767995515"
y2="191.5158878243222" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="556.0125152074138" x2="518.2920050630466" y1="153.79537767995515"
y2="191.5158878243222" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="105.49237048043514" x2="31.549625942354083" y1="123.41684480916788"
y2="197.35958934724894" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="105.49237048043514" x2="31.549625942354083" y1="-388.58315519083214"
y2="-314.64041065275103" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="361.49237048043517" x2="287.54962594235406" y1="-388.58315519083214"
y2="-314.64041065275103" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="617.4923704804352" x2="543.549625942354" y1="-388.58315519083214"
y2="-314.64041065275103" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="105.49237048043514" x2="31.549625942354083" y1="-132.58315519083212"
y2="-58.64041065275106" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="361.49237048043517" x2="287.54962594235406" y1="-132.58315519083212"
y2="-58.64041065275106" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="617.4923704804352" x2="543.549625942354" y1="-132.58315519083212"
y2="-58.64041065275106" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="105.49237048043514" x2="31.549625942354083" y1="123.41684480916788"
y2="197.35958934724894" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="361.49237048043517" x2="287.54962594235406" y1="123.41684480916788"
y2="197.35958934724894" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="617.4923704804352" x2="543.549625942354" y1="123.41684480916788"
y2="197.35958934724894" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<animateTransform attributeName="transform" type="translate" values="0 0;-256 256"
keyTimes="0;1" repeatCount="indefinite" dur="10s"></animateTransform>
</g>
<g>
<line x1="95.73622575770466" x2="50.085335235319484" y1="20.45659654328417"
y2="66.10748706566935" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="95.73622575770466" x2="50.085335235319484" y1="-491.54340345671585"
y2="-445.8925129343306" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="351.7362257577047" x2="306.08533523531946" y1="-491.54340345671585"
y2="-445.8925129343306" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="607.7362257577047" x2="562.0853352353195" y1="-491.54340345671585"
y2="-445.8925129343306" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="95.73622575770466" x2="50.085335235319484" y1="-235.54340345671582"
y2="-189.89251293433065" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="351.7362257577047" x2="306.08533523531946" y1="-235.54340345671582"
y2="-189.89251293433065" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="607.7362257577047" x2="562.0853352353195" y1="-235.54340345671582"
y2="-189.89251293433065" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="95.73622575770466" x2="50.085335235319484" y1="20.45659654328417"
y2="66.10748706566935" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="351.7362257577047" x2="306.08533523531946" y1="20.45659654328417"
y2="66.10748706566935" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="607.7362257577047" x2="562.0853352353195" y1="20.45659654328417"
y2="66.10748706566935" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="263.34308373797757" x2="226.59561736370148" y1="112.42933995479353"
y2="149.17680632906962" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="263.34308373797757" x2="226.59561736370148" y1="-399.57066004520647"
y2="-362.8231936709304" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="519.3430837379776" x2="482.5956173637015" y1="-399.57066004520647"
y2="-362.8231936709304" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="775.3430837379776" x2="738.5956173637014" y1="-399.57066004520647"
y2="-362.8231936709304" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="263.34308373797757" x2="226.59561736370148" y1="-143.57066004520647"
y2="-106.82319367093038" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="519.3430837379776" x2="482.5956173637015" y1="-143.57066004520647"
y2="-106.82319367093038" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="775.3430837379776" x2="738.5956173637014" y1="-143.57066004520647"
y2="-106.82319367093038" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="263.34308373797757" x2="226.59561736370148" y1="112.42933995479353"
y2="149.17680632906962" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="519.3430837379776" x2="482.5956173637015" y1="112.42933995479353"
y2="149.17680632906962" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="775.3430837379776" x2="738.5956173637014" y1="112.42933995479353"
y2="149.17680632906962" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="7.343083737977565" x2="-29.40438263629852" y1="112.42933995479353"
y2="149.17680632906962" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="29.5343611349199" x2="-26.261040392985034" y1="205.16777076655512"
y2="260.96317229446004" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="29.5343611349199" x2="-26.261040392985034" y1="-306.8322292334449"
y2="-251.03682770553996" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="285.5343611349199" x2="229.73895960701498" y1="-306.8322292334449"
y2="-251.03682770553996" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="541.5343611349199" x2="485.738959607015" y1="-306.8322292334449"
y2="-251.03682770553996" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="29.5343611349199" x2="-26.261040392985034" y1="-50.83222923344488"
y2="4.963172294460037" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="285.5343611349199" x2="229.73895960701498" y1="-50.83222923344488"
y2="4.963172294460037" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="541.5343611349199" x2="485.738959607015" y1="-50.83222923344488"
y2="4.963172294460037" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="29.5343611349199" x2="-26.261040392985034" y1="205.16777076655512"
y2="260.96317229446004" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="285.5343611349199" x2="229.73895960701498" y1="205.16777076655512"
y2="260.96317229446004" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="541.5343611349199" x2="485.738959607015" y1="205.16777076655512"
y2="260.96317229446004" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="235.025028503587" x2="173.48946106938683" y1="23.306929884424335"
y2="84.84249731862451" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="235.025028503587" x2="173.48946106938683" y1="-488.69307011557567"
y2="-427.1575026813755" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="491.025028503587" x2="429.48946106938683" y1="-488.69307011557567"
y2="-427.1575026813755" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="747.025028503587" x2="685.4894610693868" y1="-488.69307011557567"
y2="-427.1575026813755" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="235.025028503587" x2="173.48946106938683" y1="-232.69307011557567"
y2="-171.1575026813755" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="491.025028503587" x2="429.48946106938683" y1="-232.69307011557567"
y2="-171.1575026813755" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="747.025028503587" x2="685.4894610693868" y1="-232.69307011557567"
y2="-171.1575026813755" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="235.025028503587" x2="173.48946106938683" y1="23.306929884424335"
y2="84.84249731862451" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="491.025028503587" x2="429.48946106938683" y1="23.306929884424335"
y2="84.84249731862451" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="747.025028503587" x2="685.4894610693868" y1="23.306929884424335"
y2="84.84249731862451" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="225.00990918130768" x2="200.62370409686488" y1="210.1052181599721"
y2="234.4914232444149" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="225.00990918130768" x2="200.62370409686488" y1="-301.8947818400279"
y2="-277.50857675558507" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="481.00990918130765" x2="456.6237040968649" y1="-301.8947818400279"
y2="-277.50857675558507" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="737.0099091813076" x2="712.6237040968649" y1="-301.8947818400279"
y2="-277.50857675558507" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="225.00990918130768" x2="200.62370409686488" y1="-45.89478184002789"
y2="-21.508576755585096" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="481.00990918130765" x2="456.6237040968649" y1="-45.89478184002789"
y2="-21.508576755585096" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="737.0099091813076" x2="712.6237040968649" y1="-45.89478184002789"
y2="-21.508576755585096" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="225.00990918130768" x2="200.62370409686488" y1="210.1052181599721"
y2="234.4914232444149" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="481.00990918130765" x2="456.6237040968649" y1="210.1052181599721"
y2="234.4914232444149" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="737.0099091813076" x2="712.6237040968649" y1="210.1052181599721"
y2="234.4914232444149" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="171.55017713954658" x2="102.05334080042758" y1="78.55895711807653"
y2="148.05579345719553" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="171.55017713954658" x2="102.05334080042758" y1="-433.44104288192347"
y2="-363.94420654280447" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="427.5501771395466" x2="358.0533408004276" y1="-433.44104288192347"
y2="-363.94420654280447" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="683.5501771395466" x2="614.0533408004276" y1="-433.44104288192347"
y2="-363.94420654280447" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="171.55017713954658" x2="102.05334080042758" y1="-177.44104288192347"
y2="-107.94420654280447" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="427.5501771395466" x2="358.0533408004276" y1="-177.44104288192347"
y2="-107.94420654280447" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="683.5501771395466" x2="614.0533408004276" y1="-177.44104288192347"
y2="-107.94420654280447" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="171.55017713954658" x2="102.05334080042758" y1="78.55895711807653"
y2="148.05579345719553" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="427.5501771395466" x2="358.0533408004276" y1="78.55895711807653"
y2="148.05579345719553" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="683.5501771395466" x2="614.0533408004276" y1="78.55895711807653"
y2="148.05579345719553" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="258.4358284744095" x2="228.09906783279462" y1="10.646186924515469"
y2="40.98294756613034" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="258.4358284744095" x2="228.09906783279462" y1="-501.35381307548454"
y2="-471.01705243386965" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="514.4358284744095" x2="484.0990678327946" y1="-501.35381307548454"
y2="-471.01705243386965" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="770.4358284744095" x2="740.0990678327946" y1="-501.35381307548454"
y2="-471.01705243386965" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="258.4358284744095" x2="228.09906783279462" y1="-245.35381307548454"
y2="-215.01705243386965" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="514.4358284744095" x2="484.0990678327946" y1="-245.35381307548454"
y2="-215.01705243386965" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="770.4358284744095" x2="740.0990678327946" y1="-245.35381307548454"
y2="-215.01705243386965" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="258.4358284744095" x2="228.09906783279462" y1="10.646186924515469"
y2="40.98294756613034" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="514.4358284744095" x2="484.0990678327946" y1="10.646186924515469"
y2="40.98294756613034" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="770.4358284744095" x2="740.0990678327946" y1="10.646186924515469"
y2="40.98294756613034" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="2.4358284744095045" x2="-27.900932167205383" y1="10.646186924515469"
y2="40.98294756613034" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="35.41624886616098" x2="-5.966808810922494" y1="10.151780697595989"
y2="51.53483837467946" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="35.41624886616098" x2="-5.966808810922494" y1="-501.848219302404"
y2="-460.46516162532055" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="291.41624886616097" x2="250.0331911890775" y1="-501.848219302404"
y2="-460.46516162532055" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="547.416248866161" x2="506.0331911890775" y1="-501.848219302404"
y2="-460.46516162532055" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="35.41624886616098" x2="-5.966808810922494" y1="-245.848219302404"
y2="-204.46516162532055" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="291.41624886616097" x2="250.0331911890775" y1="-245.848219302404"
y2="-204.46516162532055" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="547.416248866161" x2="506.0331911890775" y1="-245.848219302404"
y2="-204.46516162532055" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="35.41624886616098" x2="-5.966808810922494" y1="10.151780697595989"
y2="51.53483837467946" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="291.41624886616097" x2="250.0331911890775" y1="10.151780697595989"
y2="51.53483837467946" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="547.416248866161" x2="506.0331911890775" y1="10.151780697595989"
y2="51.53483837467946" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="90.76285286976488" x2="72.92514980496989" y1="79.79001478147771"
y2="97.6277178462727" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="90.76285286976488" x2="72.92514980496989" y1="-432.2099852185223"
y2="-414.37228215372727" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="346.76285286976486" x2="328.9251498049699" y1="-432.2099852185223"
y2="-414.37228215372727" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="602.7628528697649" x2="584.9251498049699" y1="-432.2099852185223"
y2="-414.37228215372727" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="90.76285286976488" x2="72.92514980496989" y1="-176.2099852185223"
y2="-158.3722821537273" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="346.76285286976486" x2="328.9251498049699" y1="-176.2099852185223"
y2="-158.3722821537273" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="602.7628528697649" x2="584.9251498049699" y1="-176.2099852185223"
y2="-158.3722821537273" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="90.76285286976488" x2="72.92514980496989" y1="79.79001478147771"
y2="97.6277178462727" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="346.76285286976486" x2="328.9251498049699" y1="79.79001478147771"
y2="97.6277178462727" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="602.7628528697649" x2="584.9251498049699" y1="79.79001478147771"
y2="97.6277178462727" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<animateTransform attributeName="transform" type="translate" values="0 0;-256 256"
keyTimes="0;1" repeatCount="indefinite" dur="5s"></animateTransform>
</g>
<g>
<line x1="93.6896305353637" x2="75.71575147590588" y1="83.83758835275793"
y2="101.81146741221576" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="93.6896305353637" x2="75.71575147590588" y1="-428.16241164724204"
y2="-410.18853258778427" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="349.6896305353637" x2="331.7157514759059" y1="-428.16241164724204"
y2="-410.18853258778427" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="605.6896305353637" x2="587.7157514759059" y1="-428.16241164724204"
y2="-410.18853258778427" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="93.6896305353637" x2="75.71575147590588" y1="-172.16241164724207"
y2="-154.18853258778424" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="349.6896305353637" x2="331.7157514759059" y1="-172.16241164724207"
y2="-154.18853258778424" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="605.6896305353637" x2="587.7157514759059" y1="-172.16241164724207"
y2="-154.18853258778424" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="93.6896305353637" x2="75.71575147590588" y1="83.83758835275793"
y2="101.81146741221576" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="349.6896305353637" x2="331.7157514759059" y1="83.83758835275793"
y2="101.81146741221576" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="605.6896305353637" x2="587.7157514759059" y1="83.83758835275793"
y2="101.81146741221576" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="207.24941141296466" x2="167.48134532138562" y1="234.55973050121918"
y2="274.3277965927982" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="207.24941141296466" x2="167.48134532138562" y1="-277.4402694987808"
y2="-237.67220340720178" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="463.24941141296466" x2="423.4813453213856" y1="-277.4402694987808"
y2="-237.67220340720178" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="719.2494114129647" x2="679.4813453213856" y1="-277.4402694987808"
y2="-237.67220340720178" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="207.24941141296466" x2="167.48134532138562" y1="-21.440269498780822"
y2="18.327796592798222" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="463.24941141296466" x2="423.4813453213856" y1="-21.440269498780822"
y2="18.327796592798222" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="719.2494114129647" x2="679.4813453213856" y1="-21.440269498780822"
y2="18.327796592798222" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="207.24941141296466" x2="167.48134532138562" y1="234.55973050121918"
y2="274.3277965927982" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="463.24941141296466" x2="423.4813453213856" y1="234.55973050121918"
y2="274.3277965927982" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="719.2494114129647" x2="679.4813453213856" y1="234.55973050121918"
y2="274.3277965927982" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="69.19671201083756" x2="20.15599089926107" y1="61.52941038272999"
y2="110.57013149430648" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="69.19671201083756" x2="20.15599089926107" y1="-450.47058961727"
y2="-401.42986850569355" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="325.1967120108376" x2="276.15599089926104" y1="-450.47058961727"
y2="-401.42986850569355" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="581.1967120108376" x2="532.155990899261" y1="-450.47058961727"
y2="-401.42986850569355" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="69.19671201083756" x2="20.15599089926107" y1="-194.47058961727"
y2="-145.42986850569352" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="325.1967120108376" x2="276.15599089926104" y1="-194.47058961727"
y2="-145.42986850569352" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="581.1967120108376" x2="532.155990899261" y1="-194.47058961727"
y2="-145.42986850569352" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="69.19671201083756" x2="20.15599089926107" y1="61.52941038272999"
y2="110.57013149430648" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="325.1967120108376" x2="276.15599089926104" y1="61.52941038272999"
y2="110.57013149430648" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="581.1967120108376" x2="532.155990899261" y1="61.52941038272999"
y2="110.57013149430648" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="153.36870174443493" x2="103.52218176454608" y1="129.93915864820679"
y2="179.78567862809564" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="153.36870174443493" x2="103.52218176454608" y1="-382.0608413517932"
y2="-332.21432137190436" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="409.36870174443493" x2="359.5221817645461" y1="-382.0608413517932"
y2="-332.21432137190436" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="665.3687017444349" x2="615.5221817645461" y1="-382.0608413517932"
y2="-332.21432137190436" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="153.36870174443493" x2="103.52218176454608" y1="-126.06084135179321"
y2="-76.21432137190436" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="409.36870174443493" x2="359.5221817645461" y1="-126.06084135179321"
y2="-76.21432137190436" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="665.3687017444349" x2="615.5221817645461" y1="-126.06084135179321"
y2="-76.21432137190436" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="153.36870174443493" x2="103.52218176454608" y1="129.93915864820679"
y2="179.78567862809564" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="409.36870174443493" x2="359.5221817645461" y1="129.93915864820679"
y2="179.78567862809564" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="665.3687017444349" x2="615.5221817645461" y1="129.93915864820679"
y2="179.78567862809564" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="49.20494471467643" x2="2.7142059537850685" y1="141.75997600855746"
y2="188.25071476944882" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="49.20494471467643" x2="2.7142059537850685" y1="-370.2400239914425"
y2="-323.7492852305512" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="305.20494471467646" x2="258.71420595378504" y1="-370.2400239914425"
y2="-323.7492852305512" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="561.2049447146765" x2="514.714205953785" y1="-370.2400239914425"
y2="-323.7492852305512" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="49.20494471467643" x2="2.7142059537850685" y1="-114.24002399144254"
y2="-67.74928523055118" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="305.20494471467646" x2="258.71420595378504" y1="-114.24002399144254"
y2="-67.74928523055118" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="561.2049447146765" x2="514.714205953785" y1="-114.24002399144254"
y2="-67.74928523055118" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="49.20494471467643" x2="2.7142059537850685" y1="141.75997600855746"
y2="188.25071476944882" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="305.20494471467646" x2="258.71420595378504" y1="141.75997600855746"
y2="188.25071476944882" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="561.2049447146765" x2="514.714205953785" y1="141.75997600855746"
y2="188.25071476944882" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="84.6808460539986" x2="32.68305955000314" y1="-7.711036017440037"
y2="44.28675048655542" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="84.6808460539986" x2="32.68305955000314" y1="-519.71103601744"
y2="-467.71324951344457" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="340.6808460539986" x2="288.6830595500031" y1="-519.71103601744"
y2="-467.71324951344457" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="596.6808460539986" x2="544.6830595500031" y1="-519.71103601744"
y2="-467.71324951344457" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="84.6808460539986" x2="32.68305955000314" y1="-263.71103601744005"
y2="-211.71324951344457" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="340.6808460539986" x2="288.6830595500031" y1="-263.71103601744005"
y2="-211.71324951344457" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="596.6808460539986" x2="544.6830595500031" y1="-263.71103601744005"
y2="-211.71324951344457" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="84.6808460539986" x2="32.68305955000314" y1="-7.711036017440037"
y2="44.28675048655542" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="340.6808460539986" x2="288.6830595500031" y1="-7.711036017440037"
y2="44.28675048655542" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="596.6808460539986" x2="544.6830595500031" y1="-7.711036017440037"
y2="44.28675048655542" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="84.6808460539986" x2="32.68305955000314" y1="248.28896398255995"
y2="300.28675048655543" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="225.38342310559023" x2="185.66602314192056" y1="109.68961591653738"
y2="149.40701588020704" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="225.38342310559023" x2="185.66602314192056" y1="-402.3103840834626"
y2="-362.59298411979296" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="481.3834231055902" x2="441.66602314192056" y1="-402.3103840834626"
y2="-362.59298411979296" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="737.3834231055903" x2="697.6660231419205" y1="-402.3103840834626"
y2="-362.59298411979296" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="225.38342310559023" x2="185.66602314192056" y1="-146.31038408346262"
y2="-106.59298411979296" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="481.3834231055902" x2="441.66602314192056" y1="-146.31038408346262"
y2="-106.59298411979296" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="737.3834231055903" x2="697.6660231419205" y1="-146.31038408346262"
y2="-106.59298411979296" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="225.38342310559023" x2="185.66602314192056" y1="109.68961591653738"
y2="149.40701588020704" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="481.3834231055902" x2="441.66602314192056" y1="109.68961591653738"
y2="149.40701588020704" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="737.3834231055903" x2="697.6660231419205" y1="109.68961591653738"
y2="149.40701588020704" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="172.83662370669697" x2="103.52581079778793" y1="164.45975635392284"
y2="233.77056926283188" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="172.83662370669697" x2="103.52581079778793" y1="-347.54024364607716"
y2="-278.2294307371681" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="428.83662370669697" x2="359.5258107977879" y1="-347.54024364607716"
y2="-278.2294307371681" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="684.836623706697" x2="615.5258107977879" y1="-347.54024364607716"
y2="-278.2294307371681" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="172.83662370669697" x2="103.52581079778793" y1="-91.54024364607716"
y2="-22.229430737168116" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="428.83662370669697" x2="359.5258107977879" y1="-91.54024364607716"
y2="-22.229430737168116" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="684.836623706697" x2="615.5258107977879" y1="-91.54024364607716"
y2="-22.229430737168116" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="172.83662370669697" x2="103.52581079778793" y1="164.45975635392284"
y2="233.77056926283188" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="428.83662370669697" x2="359.5258107977879" y1="164.45975635392284"
y2="233.77056926283188" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="684.836623706697" x2="615.5258107977879" y1="164.45975635392284"
y2="233.77056926283188" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="254.85435949520382" x2="240.10841684705935" y1="-1.209429949430282"
y2="13.536512698714214" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="254.85435949520382" x2="240.10841684705935" y1="-513.2094299494303"
y2="-498.4634873012858" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="510.8543594952038" x2="496.10841684705935" y1="-513.2094299494303"
y2="-498.4634873012858" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="766.8543594952039" x2="752.1084168470593" y1="-513.2094299494303"
y2="-498.4634873012858" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="254.85435949520382" x2="240.10841684705935" y1="-257.2094299494303"
y2="-242.4634873012858" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="510.8543594952038" x2="496.10841684705935" y1="-257.2094299494303"
y2="-242.4634873012858" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="766.8543594952039" x2="752.1084168470593" y1="-257.2094299494303"
y2="-242.4634873012858" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="254.85435949520382" x2="240.10841684705935" y1="-1.209429949430282"
y2="13.536512698714214" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="510.8543594952038" x2="496.10841684705935" y1="-1.209429949430282"
y2="13.536512698714214" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="766.8543594952039" x2="752.1084168470593" y1="-1.209429949430282"
y2="13.536512698714214" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="254.85435949520382" x2="240.10841684705935" y1="254.79057005056973"
y2="269.5365126987142" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<animateTransform attributeName="transform" type="translate" values="0 0;-256 256"
keyTimes="0;1" repeatCount="indefinite" dur="10.3333333333333335s"></animateTransform>
</g>
</g>
</pattern>
</defs>
<rect x="0" y="0" width="1084" height="322" fill="url(#pid-0.7735807359934106)"></rect>
</svg>

File diff suppressed because it is too large Load diff

After

Width:  |  Height:  |  Size: 102 KiB

View file

@ -0,0 +1,55 @@
---
title: "Firebase: Views & Likes"
weight: 15
draft: false
description: "Learn how to integrate Firebase and get dynamic data for views and likes."
slug: "firebase-views"
tags: ["firebase", "views", likes]
series: ["Documentation"]
series_order: 15
---
In order to be able to support dynamic data across your website we've added the support to integrate Firebase. This will allow you to use the views feature across lists and posts.
1. Go to <a target="_blank" href="https://firebase.com">Firebase website</a> and create an account for free
2. Create a new project
3. Select analytics location
4. Setup firebase in Blowfish by getting the variables for your project and setting them inside `params.toml` file. More details can be found in <a target="_blank" href="{{< ref "configuration/#theme-parameters" >}}">this page</a>. You can find an example of the file Firebase will provide below, notice the parameters within the FirebaseConfig object.
```
// Import the functions you need from the SDKs you need
import { initializeApp } from "firebase/app";
import { getAnalytics } from "firebase/analytics";
// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries
// Your web app's Firebase configuration
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
const firebaseConfig = {
apiKey: "AIzaSyB5tqlqDky77Vb4Tc4apiHV4hRZI18KGiY",
authDomain: "blowfish-21fff.firebaseapp.com",
projectId: "blowfish-21fff",
storageBucket: "blowfish-21fff.appspot.com",
messagingSenderId: "60108104191",
appId: "1:60108104191:web:039842ebe1370698b487ca",
measurementId: "G-PEDMYR1V0K"
};
// Initialize Firebase
const app = initializeApp(firebaseConfig);
const analytics = getAnalytics(app);
```
5. Setup Firestore - Select Build and open Firestore. Create a new database and choose to start in production mode. Select server location and wait. Once that is started you need to configure the rules. Just copy and paste the file below and press publish.
```
rules_version = '2';
service cloud.firestore {
match /databases/{database}/documents {
match /{document=**} {
allow read, write: if request.auth != null;
}
}
}
```
6. Enable anonymous authorization - Select Build and open Authentication. Select get started, click Anonymous and turn it on, save.
7. Enjoy - you can now activate views and likes on Blowfish for all (or specific) articles.

View file

@ -0,0 +1,55 @@
---
title: "Firebase: 閲覧数といいね"
weight: 15
draft: false
description: "Firebase を統合して、閲覧数といいねの動的データを取得する方法を学びます。"
slug: "firebase-views"
tags: ["firebase", "views", "likes"]
series: ["Documentation"]
series_order: 15
---
ウェブサイト全体で動的データをサポートできるようにするために、Firebase を統合するサポートを追加しました。これにより、リストや投稿全体で閲覧数機能を使用できるようになります。
1. <a target="_blank" href="https://firebase.com">Firebase のウェブサイト</a>にアクセスして、無料のアカウントを作成します
2. 新規プロジェクトを作成します
3. 分析ロケーションを選択します
4. プロジェクトの変数を取得し、`params.toml` ファイル内で設定して、Blowfish で Firebase を設定します。詳細は、<a target="_blank" href="{{< ref "configuration/#テーマパラメーターtheme-parameters" >}}">このページ</a>をご覧ください。Firebase が提供するファイルの例を以下に示します。FirebaseConfig オブジェクト内のパラメータに注意してください。
```
// 必要な SDK から必要な関数をインポートします
import { initializeApp } from "firebase/app";
import { getAnalytics } from "firebase/analytics";
// TODO: 使用する Firebase 製品の SDK を追加します
// https://firebase.google.com/docs/web/setup#available-libraries
// ウェブアプリの Firebase 設定
// Firebase JS SDK v7.20.0 以降では、measurementId はオプションです
const firebaseConfig = {
apiKey: "AIzaSyB5tqlqDky77Vb4Tc4apiHV4hRZI18KGiY",
authDomain: "blowfish-21fff.firebaseapp.com",
projectId: "blowfish-21fff",
storageBucket: "blowfish-21fff.appspot.com",
messagingSenderId: "60108104191",
appId: "1:60108104191:web:039842ebe1370698b487ca",
measurementId: "G-PEDMYR1V0K"
};
// Firebase を初期化する
const app = initializeApp(firebaseConfig);
const analytics = getAnalytics(app);
```
5. Firestore を設定する - 「ビルド」を選択して Firestore を開きます。新しいデータベースを作成し、本番モードで開始することを選択します。サーバーの場所を選択して待ちます。開始したら、ルールを設定する必要があります。以下のファイルをコピーして貼り付け、「公開」をクリックします。
```
rules_version = '2';
service cloud.firestore {
match /databases/{database}/documents {
match /{document=**} {
allow read, write: if request.auth != null;
}
}
}
```
6. 匿名認証を有効にする - 「ビルド」を選択して「認証」を開きます。「開始する」を選択し、「匿名」をクリックしてオンにし、保存します。
7. お楽しみください - すべて (または特定の) 記事に対して、Blowfish で閲覧数といいねを有効にできるようになりました。

View file

@ -0,0 +1,55 @@
---
title: "Firebase: Views & Likes"
weight: 15
draft: false
description: "Learn how to integrate Firebase and get dynamic data for views and likes."
slug: "firebase-views"
tags: ["firebase", "views", likes]
series: ["Documentation"]
series_order: 15
---
In order to be able to support dynamic data across your website we've added the support to integrate Firebase. This will allow you to use the views feature across lists and posts.
1. Go to <a target="_blank" href="https://firebase.com">Firebase website</a> and create an account for free
2. Create a new project
3. Select analytics location
4. Setup firebase in Blowfish by getting the variables for your project and setting them inside `params.toml` file. More details can be found in <a target="_blank" href="{{< ref "configuration/#theme-parameters" >}}">this page</a>. You can find an example of the file Firebase will provide below, notice the parameters within the FirebaseConfig object.
```
// Import the functions you need from the SDKs you need
import { initializeApp } from "firebase/app";
import { getAnalytics } from "firebase/analytics";
// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries
// Your web app's Firebase configuration
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
const firebaseConfig = {
apiKey: "AIzaSyB5tqlqDky77Vb4Tc4apiHV4hRZI18KGiY",
authDomain: "blowfish-21fff.firebaseapp.com",
projectId: "blowfish-21fff",
storageBucket: "blowfish-21fff.appspot.com",
messagingSenderId: "60108104191",
appId: "1:60108104191:web:039842ebe1370698b487ca",
measurementId: "G-PEDMYR1V0K"
};
// Initialize Firebase
const app = initializeApp(firebaseConfig);
const analytics = getAnalytics(app);
```
5. Setup Firestore - Select Build and open Firestore. Create a new database and choose to start in production mode. Select server location and wait. Once that is started you need to configure the rules. Just copy and paste the file below and press publish.
```
rules_version = '2';
service cloud.firestore {
match /databases/{database}/documents {
match /{document=**} {
allow read, write: if request.auth != null;
}
}
}
```
6. Enable anonymous authorization - Select Build and open Authentication. Select get started, click Anonymous and turn it on, save.
7. Enjoy - you can now activate views and likes on Blowfish for all (or specific) articles.

View file

@ -0,0 +1,55 @@
---
title: "Firebase: 阅读量 & 点赞量"
weight: 15
draft: false
description: "了解 Blowfish 如何集成 Firebase并动态显示阅读量和点赞量。"
slug: "firebase-views"
tags: ["firebase", "阅读量", "点赞量"]
series: ["部署教程"]
series_order: 15
---
为了能够在网站中获取动态数据,我们支持了对 Firebase 的集成。这将允许你在列表和文章中使用阅读量功能。
1. 访问 <a target="_blank" href="https://firebase.com">Firebase</a> 并创建一个账户
2. 创建一个新项目
3. 选择分析位置
4. Blowfish 是通过 `params.toml` 配置文件中的 firebase 相关参数,来和 firebase 集成的,更多的细节内容可以参考 <a target="_blank" href="{{< ref "configuration/#theme-parameters" >}}">这个页面</a>。你可以在下面找到集成 firebase 的文件示例,请注意 FirebaseConfig 对象内的参数。
```
// 从你需要的 SDK 中导入所需的函数
import { initializeApp } from "firebase/app";
import { getAnalytics } from "firebase/analytics";
// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries
// 你 Web 应用的 Firebase 配置
// 对于 Firebase JS SDK v7.20.0 以及更高版本measurementId 参数是可选的
const firebaseConfig = {
apiKey: "AIzaSyB5tqlqDky77Vb4Tc4apiHV4hRZI18KGiY",
authDomain: "blowfish-21fff.firebaseapp.com",
projectId: "blowfish-21fff",
storageBucket: "blowfish-21fff.appspot.com",
messagingSenderId: "60108104191",
appId: "1:60108104191:web:039842ebe1370698b487ca",
measurementId: "G-PEDMYR1V0K"
};
// 初始化 Firebase
const app = initializeApp(firebaseConfig);
const analytics = getAnalytics(app);
```
5. 设置 Firestore - 选择 Build 并打开 Firestore. 创建一个数据库,并在生产环境中启动。选择服务器位置然后等待其部署完成。启动之后你需要配置规则。只需要复制并粘贴下面的内容,然后点击发布即可。
```
rules_version = '2';
service cloud.firestore {
match /databases/{database}/documents {
match /{document=**} {
allow read, write: if request.auth != null;
}
}
}
```
6. 开启匿名授权 - 选择 Build 并打开 Authentication。选择开始点击 Anonymous 并开启,保存。
7. 享受 - 现在可以激活 Blowfish 中文章阅读量和点赞量的功能。

View file

@ -0,0 +1,574 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
style="margin:auto;background:rgba(NaN, NaN, NaN, 0);display:block;z-index:1;position:relative"
width="1084" height="322" preserveAspectRatio="xMidYMid" viewBox="0 0 1084 322">
<defs>
<pattern id="pid-0.7735807359934106" x="0" y="0" width="345.6" height="345.6"
patternUnits="userSpaceOnUse">
<g transform="scale(1.35)">
<g>
<line x1="237.6288884328494" x2="201.39714008747956" y1="119.05338354492488"
y2="155.28513189029474" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="237.6288884328494" x2="201.39714008747956" y1="-392.9466164550751"
y2="-356.71486810970526" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="493.6288884328494" x2="457.39714008747956" y1="-392.9466164550751"
y2="-356.71486810970526" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="749.6288884328494" x2="713.3971400874796" y1="-392.9466164550751"
y2="-356.71486810970526" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="237.6288884328494" x2="201.39714008747956" y1="-136.94661645507512"
y2="-100.71486810970526" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="493.6288884328494" x2="457.39714008747956" y1="-136.94661645507512"
y2="-100.71486810970526" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="749.6288884328494" x2="713.3971400874796" y1="-136.94661645507512"
y2="-100.71486810970526" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="237.6288884328494" x2="201.39714008747956" y1="119.05338354492488"
y2="155.28513189029474" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="493.6288884328494" x2="457.39714008747956" y1="119.05338354492488"
y2="155.28513189029474" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="749.6288884328494" x2="713.3971400874796" y1="119.05338354492488"
y2="155.28513189029474" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="244.43797352167968" x2="179.25167385613412" y1="196.21419032492787"
y2="261.40048999047343" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="244.43797352167968" x2="179.25167385613412" y1="-315.78580967507213"
y2="-250.59951000952657" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="500.4379735216797" x2="435.2516738561341" y1="-315.78580967507213"
y2="-250.59951000952657" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="756.4379735216796" x2="691.2516738561342" y1="-315.78580967507213"
y2="-250.59951000952657" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="244.43797352167968" x2="179.25167385613412" y1="-59.78580967507213"
y2="5.400489990473432" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="500.4379735216797" x2="435.2516738561341" y1="-59.78580967507213"
y2="5.400489990473432" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="756.4379735216796" x2="691.2516738561342" y1="-59.78580967507213"
y2="5.400489990473432" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="244.43797352167968" x2="179.25167385613412" y1="196.21419032492787"
y2="261.40048999047343" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="500.4379735216797" x2="435.2516738561341" y1="196.21419032492787"
y2="261.40048999047343" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="756.4379735216796" x2="691.2516738561342" y1="196.21419032492787"
y2="261.40048999047343" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="219.6724359102308" x2="209.2181431749452" y1="92.85808081141191"
y2="103.31237354669749" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="219.6724359102308" x2="209.2181431749452" y1="-419.1419191885881"
y2="-408.6876264533025" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="475.6724359102308" x2="465.2181431749452" y1="-419.1419191885881"
y2="-408.6876264533025" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="731.6724359102308" x2="721.2181431749452" y1="-419.1419191885881"
y2="-408.6876264533025" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="219.6724359102308" x2="209.2181431749452" y1="-163.14191918858808"
y2="-152.68762645330253" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="475.6724359102308" x2="465.2181431749452" y1="-163.14191918858808"
y2="-152.68762645330253" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="731.6724359102308" x2="721.2181431749452" y1="-163.14191918858808"
y2="-152.68762645330253" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="219.6724359102308" x2="209.2181431749452" y1="92.85808081141191"
y2="103.31237354669749" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="475.6724359102308" x2="465.2181431749452" y1="92.85808081141191"
y2="103.31237354669749" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="731.6724359102308" x2="721.2181431749452" y1="92.85808081141191"
y2="103.31237354669749" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="112.00565118011832" x2="71.15817744773324" y1="56.63419812919665"
y2="97.48167186158173" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="112.00565118011832" x2="71.15817744773324" y1="-455.36580187080335"
y2="-414.51832813841827" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="368.0056511801183" x2="327.15817744773324" y1="-455.36580187080335"
y2="-414.51832813841827" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="624.0056511801183" x2="583.1581774477332" y1="-455.36580187080335"
y2="-414.51832813841827" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="112.00565118011832" x2="71.15817744773324" y1="-199.36580187080335"
y2="-158.51832813841827" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="368.0056511801183" x2="327.15817744773324" y1="-199.36580187080335"
y2="-158.51832813841827" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="624.0056511801183" x2="583.1581774477332" y1="-199.36580187080335"
y2="-158.51832813841827" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="112.00565118011832" x2="71.15817744773324" y1="56.63419812919665"
y2="97.48167186158173" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="368.0056511801183" x2="327.15817744773324" y1="56.63419812919665"
y2="97.48167186158173" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="624.0056511801183" x2="583.1581774477332" y1="56.63419812919665"
y2="97.48167186158173" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="60.932966336476014" x2="49.388821076756514" y1="125.65681060957188"
y2="137.20095586929136" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="60.932966336476014" x2="49.388821076756514" y1="-386.3431893904281"
y2="-374.79904413070864" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="316.932966336476" x2="305.3888210767565" y1="-386.3431893904281"
y2="-374.79904413070864" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="572.932966336476" x2="561.3888210767565" y1="-386.3431893904281"
y2="-374.79904413070864" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="60.932966336476014" x2="49.388821076756514" y1="-130.3431893904281"
y2="-118.79904413070864" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="316.932966336476" x2="305.3888210767565" y1="-130.3431893904281"
y2="-118.79904413070864" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="572.932966336476" x2="561.3888210767565" y1="-130.3431893904281"
y2="-118.79904413070864" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="60.932966336476014" x2="49.388821076756514" y1="125.65681060957188"
y2="137.20095586929136" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="316.932966336476" x2="305.3888210767565" y1="125.65681060957188"
y2="137.20095586929136" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="572.932966336476" x2="561.3888210767565" y1="125.65681060957188"
y2="137.20095586929136" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="103.78310212459807" x2="35.08486945593138" y1="-2.328164446496814"
y2="66.37006822216988" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="103.78310212459807" x2="35.08486945593138" y1="-514.3281644464968"
y2="-445.6299317778301" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="359.7831021245981" x2="291.08486945593137" y1="-514.3281644464968"
y2="-445.6299317778301" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="615.783102124598" x2="547.0848694559314" y1="-514.3281644464968"
y2="-445.6299317778301" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="103.78310212459807" x2="35.08486945593138" y1="-258.3281644464968"
y2="-189.6299317778301" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="359.7831021245981" x2="291.08486945593137" y1="-258.3281644464968"
y2="-189.6299317778301" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="615.783102124598" x2="547.0848694559314" y1="-258.3281644464968"
y2="-189.6299317778301" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="103.78310212459807" x2="35.08486945593138" y1="-2.328164446496814"
y2="66.37006822216988" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="359.7831021245981" x2="291.08486945593137" y1="-2.328164446496814"
y2="66.37006822216988" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="615.783102124598" x2="547.0848694559314" y1="-2.328164446496814"
y2="66.37006822216988" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="103.78310212459807" x2="35.08486945593138" y1="253.67183555350317"
y2="322.3700682221699" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="211.69894364075495" x2="194.13528259328754" y1="166.21741462144607"
y2="183.78107566891347" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="211.69894364075495" x2="194.13528259328754" y1="-345.7825853785539"
y2="-328.21892433108655" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="467.6989436407549" x2="450.13528259328757" y1="-345.7825853785539"
y2="-328.21892433108655" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="723.6989436407549" x2="706.1352825932876" y1="-345.7825853785539"
y2="-328.21892433108655" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="211.69894364075495" x2="194.13528259328754" y1="-89.78258537855393"
y2="-72.21892433108653" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="467.6989436407549" x2="450.13528259328757" y1="-89.78258537855393"
y2="-72.21892433108653" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="723.6989436407549" x2="706.1352825932876" y1="-89.78258537855393"
y2="-72.21892433108653" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="211.69894364075495" x2="194.13528259328754" y1="166.21741462144607"
y2="183.78107566891347" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="467.6989436407549" x2="450.13528259328757" y1="166.21741462144607"
y2="183.78107566891347" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="723.6989436407549" x2="706.1352825932876" y1="166.21741462144607"
y2="183.78107566891347" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="44.012515207413756" x2="6.2920050630466875" y1="153.79537767995515"
y2="191.5158878243222" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="44.012515207413756" x2="6.2920050630466875" y1="-358.20462232004485"
y2="-320.4841121756778" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="300.01251520741374" x2="262.2920050630467" y1="-358.20462232004485"
y2="-320.4841121756778" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="556.0125152074138" x2="518.2920050630466" y1="-358.20462232004485"
y2="-320.4841121756778" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="44.012515207413756" x2="6.2920050630466875" y1="-102.20462232004485"
y2="-64.48411217567781" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="300.01251520741374" x2="262.2920050630467" y1="-102.20462232004485"
y2="-64.48411217567781" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="556.0125152074138" x2="518.2920050630466" y1="-102.20462232004485"
y2="-64.48411217567781" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="44.012515207413756" x2="6.2920050630466875" y1="153.79537767995515"
y2="191.5158878243222" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="300.01251520741374" x2="262.2920050630467" y1="153.79537767995515"
y2="191.5158878243222" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="556.0125152074138" x2="518.2920050630466" y1="153.79537767995515"
y2="191.5158878243222" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="105.49237048043514" x2="31.549625942354083" y1="123.41684480916788"
y2="197.35958934724894" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="105.49237048043514" x2="31.549625942354083" y1="-388.58315519083214"
y2="-314.64041065275103" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="361.49237048043517" x2="287.54962594235406" y1="-388.58315519083214"
y2="-314.64041065275103" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="617.4923704804352" x2="543.549625942354" y1="-388.58315519083214"
y2="-314.64041065275103" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="105.49237048043514" x2="31.549625942354083" y1="-132.58315519083212"
y2="-58.64041065275106" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="361.49237048043517" x2="287.54962594235406" y1="-132.58315519083212"
y2="-58.64041065275106" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="617.4923704804352" x2="543.549625942354" y1="-132.58315519083212"
y2="-58.64041065275106" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="105.49237048043514" x2="31.549625942354083" y1="123.41684480916788"
y2="197.35958934724894" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="361.49237048043517" x2="287.54962594235406" y1="123.41684480916788"
y2="197.35958934724894" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="617.4923704804352" x2="543.549625942354" y1="123.41684480916788"
y2="197.35958934724894" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<animateTransform attributeName="transform" type="translate" values="0 0;-256 256"
keyTimes="0;1" repeatCount="indefinite" dur="10s"></animateTransform>
</g>
<g>
<line x1="95.73622575770466" x2="50.085335235319484" y1="20.45659654328417"
y2="66.10748706566935" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="95.73622575770466" x2="50.085335235319484" y1="-491.54340345671585"
y2="-445.8925129343306" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="351.7362257577047" x2="306.08533523531946" y1="-491.54340345671585"
y2="-445.8925129343306" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="607.7362257577047" x2="562.0853352353195" y1="-491.54340345671585"
y2="-445.8925129343306" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="95.73622575770466" x2="50.085335235319484" y1="-235.54340345671582"
y2="-189.89251293433065" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="351.7362257577047" x2="306.08533523531946" y1="-235.54340345671582"
y2="-189.89251293433065" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="607.7362257577047" x2="562.0853352353195" y1="-235.54340345671582"
y2="-189.89251293433065" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="95.73622575770466" x2="50.085335235319484" y1="20.45659654328417"
y2="66.10748706566935" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="351.7362257577047" x2="306.08533523531946" y1="20.45659654328417"
y2="66.10748706566935" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="607.7362257577047" x2="562.0853352353195" y1="20.45659654328417"
y2="66.10748706566935" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="263.34308373797757" x2="226.59561736370148" y1="112.42933995479353"
y2="149.17680632906962" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="263.34308373797757" x2="226.59561736370148" y1="-399.57066004520647"
y2="-362.8231936709304" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="519.3430837379776" x2="482.5956173637015" y1="-399.57066004520647"
y2="-362.8231936709304" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="775.3430837379776" x2="738.5956173637014" y1="-399.57066004520647"
y2="-362.8231936709304" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="263.34308373797757" x2="226.59561736370148" y1="-143.57066004520647"
y2="-106.82319367093038" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="519.3430837379776" x2="482.5956173637015" y1="-143.57066004520647"
y2="-106.82319367093038" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="775.3430837379776" x2="738.5956173637014" y1="-143.57066004520647"
y2="-106.82319367093038" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="263.34308373797757" x2="226.59561736370148" y1="112.42933995479353"
y2="149.17680632906962" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="519.3430837379776" x2="482.5956173637015" y1="112.42933995479353"
y2="149.17680632906962" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="775.3430837379776" x2="738.5956173637014" y1="112.42933995479353"
y2="149.17680632906962" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="7.343083737977565" x2="-29.40438263629852" y1="112.42933995479353"
y2="149.17680632906962" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="29.5343611349199" x2="-26.261040392985034" y1="205.16777076655512"
y2="260.96317229446004" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="29.5343611349199" x2="-26.261040392985034" y1="-306.8322292334449"
y2="-251.03682770553996" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="285.5343611349199" x2="229.73895960701498" y1="-306.8322292334449"
y2="-251.03682770553996" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="541.5343611349199" x2="485.738959607015" y1="-306.8322292334449"
y2="-251.03682770553996" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="29.5343611349199" x2="-26.261040392985034" y1="-50.83222923344488"
y2="4.963172294460037" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="285.5343611349199" x2="229.73895960701498" y1="-50.83222923344488"
y2="4.963172294460037" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="541.5343611349199" x2="485.738959607015" y1="-50.83222923344488"
y2="4.963172294460037" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="29.5343611349199" x2="-26.261040392985034" y1="205.16777076655512"
y2="260.96317229446004" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="285.5343611349199" x2="229.73895960701498" y1="205.16777076655512"
y2="260.96317229446004" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="541.5343611349199" x2="485.738959607015" y1="205.16777076655512"
y2="260.96317229446004" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="235.025028503587" x2="173.48946106938683" y1="23.306929884424335"
y2="84.84249731862451" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="235.025028503587" x2="173.48946106938683" y1="-488.69307011557567"
y2="-427.1575026813755" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="491.025028503587" x2="429.48946106938683" y1="-488.69307011557567"
y2="-427.1575026813755" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="747.025028503587" x2="685.4894610693868" y1="-488.69307011557567"
y2="-427.1575026813755" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="235.025028503587" x2="173.48946106938683" y1="-232.69307011557567"
y2="-171.1575026813755" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="491.025028503587" x2="429.48946106938683" y1="-232.69307011557567"
y2="-171.1575026813755" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="747.025028503587" x2="685.4894610693868" y1="-232.69307011557567"
y2="-171.1575026813755" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="235.025028503587" x2="173.48946106938683" y1="23.306929884424335"
y2="84.84249731862451" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="491.025028503587" x2="429.48946106938683" y1="23.306929884424335"
y2="84.84249731862451" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="747.025028503587" x2="685.4894610693868" y1="23.306929884424335"
y2="84.84249731862451" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="225.00990918130768" x2="200.62370409686488" y1="210.1052181599721"
y2="234.4914232444149" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="225.00990918130768" x2="200.62370409686488" y1="-301.8947818400279"
y2="-277.50857675558507" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="481.00990918130765" x2="456.6237040968649" y1="-301.8947818400279"
y2="-277.50857675558507" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="737.0099091813076" x2="712.6237040968649" y1="-301.8947818400279"
y2="-277.50857675558507" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="225.00990918130768" x2="200.62370409686488" y1="-45.89478184002789"
y2="-21.508576755585096" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="481.00990918130765" x2="456.6237040968649" y1="-45.89478184002789"
y2="-21.508576755585096" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="737.0099091813076" x2="712.6237040968649" y1="-45.89478184002789"
y2="-21.508576755585096" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="225.00990918130768" x2="200.62370409686488" y1="210.1052181599721"
y2="234.4914232444149" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="481.00990918130765" x2="456.6237040968649" y1="210.1052181599721"
y2="234.4914232444149" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="737.0099091813076" x2="712.6237040968649" y1="210.1052181599721"
y2="234.4914232444149" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="171.55017713954658" x2="102.05334080042758" y1="78.55895711807653"
y2="148.05579345719553" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="171.55017713954658" x2="102.05334080042758" y1="-433.44104288192347"
y2="-363.94420654280447" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="427.5501771395466" x2="358.0533408004276" y1="-433.44104288192347"
y2="-363.94420654280447" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="683.5501771395466" x2="614.0533408004276" y1="-433.44104288192347"
y2="-363.94420654280447" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="171.55017713954658" x2="102.05334080042758" y1="-177.44104288192347"
y2="-107.94420654280447" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="427.5501771395466" x2="358.0533408004276" y1="-177.44104288192347"
y2="-107.94420654280447" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="683.5501771395466" x2="614.0533408004276" y1="-177.44104288192347"
y2="-107.94420654280447" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="171.55017713954658" x2="102.05334080042758" y1="78.55895711807653"
y2="148.05579345719553" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="427.5501771395466" x2="358.0533408004276" y1="78.55895711807653"
y2="148.05579345719553" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="683.5501771395466" x2="614.0533408004276" y1="78.55895711807653"
y2="148.05579345719553" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="258.4358284744095" x2="228.09906783279462" y1="10.646186924515469"
y2="40.98294756613034" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="258.4358284744095" x2="228.09906783279462" y1="-501.35381307548454"
y2="-471.01705243386965" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="514.4358284744095" x2="484.0990678327946" y1="-501.35381307548454"
y2="-471.01705243386965" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="770.4358284744095" x2="740.0990678327946" y1="-501.35381307548454"
y2="-471.01705243386965" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="258.4358284744095" x2="228.09906783279462" y1="-245.35381307548454"
y2="-215.01705243386965" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="514.4358284744095" x2="484.0990678327946" y1="-245.35381307548454"
y2="-215.01705243386965" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="770.4358284744095" x2="740.0990678327946" y1="-245.35381307548454"
y2="-215.01705243386965" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="258.4358284744095" x2="228.09906783279462" y1="10.646186924515469"
y2="40.98294756613034" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="514.4358284744095" x2="484.0990678327946" y1="10.646186924515469"
y2="40.98294756613034" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="770.4358284744095" x2="740.0990678327946" y1="10.646186924515469"
y2="40.98294756613034" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="2.4358284744095045" x2="-27.900932167205383" y1="10.646186924515469"
y2="40.98294756613034" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="35.41624886616098" x2="-5.966808810922494" y1="10.151780697595989"
y2="51.53483837467946" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="35.41624886616098" x2="-5.966808810922494" y1="-501.848219302404"
y2="-460.46516162532055" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="291.41624886616097" x2="250.0331911890775" y1="-501.848219302404"
y2="-460.46516162532055" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="547.416248866161" x2="506.0331911890775" y1="-501.848219302404"
y2="-460.46516162532055" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="35.41624886616098" x2="-5.966808810922494" y1="-245.848219302404"
y2="-204.46516162532055" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="291.41624886616097" x2="250.0331911890775" y1="-245.848219302404"
y2="-204.46516162532055" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="547.416248866161" x2="506.0331911890775" y1="-245.848219302404"
y2="-204.46516162532055" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="35.41624886616098" x2="-5.966808810922494" y1="10.151780697595989"
y2="51.53483837467946" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="291.41624886616097" x2="250.0331911890775" y1="10.151780697595989"
y2="51.53483837467946" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="547.416248866161" x2="506.0331911890775" y1="10.151780697595989"
y2="51.53483837467946" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="90.76285286976488" x2="72.92514980496989" y1="79.79001478147771"
y2="97.6277178462727" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="90.76285286976488" x2="72.92514980496989" y1="-432.2099852185223"
y2="-414.37228215372727" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="346.76285286976486" x2="328.9251498049699" y1="-432.2099852185223"
y2="-414.37228215372727" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="602.7628528697649" x2="584.9251498049699" y1="-432.2099852185223"
y2="-414.37228215372727" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="90.76285286976488" x2="72.92514980496989" y1="-176.2099852185223"
y2="-158.3722821537273" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="346.76285286976486" x2="328.9251498049699" y1="-176.2099852185223"
y2="-158.3722821537273" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="602.7628528697649" x2="584.9251498049699" y1="-176.2099852185223"
y2="-158.3722821537273" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="90.76285286976488" x2="72.92514980496989" y1="79.79001478147771"
y2="97.6277178462727" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="346.76285286976486" x2="328.9251498049699" y1="79.79001478147771"
y2="97.6277178462727" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="602.7628528697649" x2="584.9251498049699" y1="79.79001478147771"
y2="97.6277178462727" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<animateTransform attributeName="transform" type="translate" values="0 0;-256 256"
keyTimes="0;1" repeatCount="indefinite" dur="5s"></animateTransform>
</g>
<g>
<line x1="93.6896305353637" x2="75.71575147590588" y1="83.83758835275793"
y2="101.81146741221576" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="93.6896305353637" x2="75.71575147590588" y1="-428.16241164724204"
y2="-410.18853258778427" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="349.6896305353637" x2="331.7157514759059" y1="-428.16241164724204"
y2="-410.18853258778427" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="605.6896305353637" x2="587.7157514759059" y1="-428.16241164724204"
y2="-410.18853258778427" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="93.6896305353637" x2="75.71575147590588" y1="-172.16241164724207"
y2="-154.18853258778424" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="349.6896305353637" x2="331.7157514759059" y1="-172.16241164724207"
y2="-154.18853258778424" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="605.6896305353637" x2="587.7157514759059" y1="-172.16241164724207"
y2="-154.18853258778424" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="93.6896305353637" x2="75.71575147590588" y1="83.83758835275793"
y2="101.81146741221576" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="349.6896305353637" x2="331.7157514759059" y1="83.83758835275793"
y2="101.81146741221576" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="605.6896305353637" x2="587.7157514759059" y1="83.83758835275793"
y2="101.81146741221576" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="207.24941141296466" x2="167.48134532138562" y1="234.55973050121918"
y2="274.3277965927982" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="207.24941141296466" x2="167.48134532138562" y1="-277.4402694987808"
y2="-237.67220340720178" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="463.24941141296466" x2="423.4813453213856" y1="-277.4402694987808"
y2="-237.67220340720178" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="719.2494114129647" x2="679.4813453213856" y1="-277.4402694987808"
y2="-237.67220340720178" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="207.24941141296466" x2="167.48134532138562" y1="-21.440269498780822"
y2="18.327796592798222" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="463.24941141296466" x2="423.4813453213856" y1="-21.440269498780822"
y2="18.327796592798222" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="719.2494114129647" x2="679.4813453213856" y1="-21.440269498780822"
y2="18.327796592798222" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="207.24941141296466" x2="167.48134532138562" y1="234.55973050121918"
y2="274.3277965927982" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="463.24941141296466" x2="423.4813453213856" y1="234.55973050121918"
y2="274.3277965927982" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="719.2494114129647" x2="679.4813453213856" y1="234.55973050121918"
y2="274.3277965927982" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="69.19671201083756" x2="20.15599089926107" y1="61.52941038272999"
y2="110.57013149430648" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="69.19671201083756" x2="20.15599089926107" y1="-450.47058961727"
y2="-401.42986850569355" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="325.1967120108376" x2="276.15599089926104" y1="-450.47058961727"
y2="-401.42986850569355" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="581.1967120108376" x2="532.155990899261" y1="-450.47058961727"
y2="-401.42986850569355" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="69.19671201083756" x2="20.15599089926107" y1="-194.47058961727"
y2="-145.42986850569352" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="325.1967120108376" x2="276.15599089926104" y1="-194.47058961727"
y2="-145.42986850569352" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="581.1967120108376" x2="532.155990899261" y1="-194.47058961727"
y2="-145.42986850569352" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="69.19671201083756" x2="20.15599089926107" y1="61.52941038272999"
y2="110.57013149430648" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="325.1967120108376" x2="276.15599089926104" y1="61.52941038272999"
y2="110.57013149430648" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="581.1967120108376" x2="532.155990899261" y1="61.52941038272999"
y2="110.57013149430648" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="153.36870174443493" x2="103.52218176454608" y1="129.93915864820679"
y2="179.78567862809564" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="153.36870174443493" x2="103.52218176454608" y1="-382.0608413517932"
y2="-332.21432137190436" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="409.36870174443493" x2="359.5221817645461" y1="-382.0608413517932"
y2="-332.21432137190436" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="665.3687017444349" x2="615.5221817645461" y1="-382.0608413517932"
y2="-332.21432137190436" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="153.36870174443493" x2="103.52218176454608" y1="-126.06084135179321"
y2="-76.21432137190436" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="409.36870174443493" x2="359.5221817645461" y1="-126.06084135179321"
y2="-76.21432137190436" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="665.3687017444349" x2="615.5221817645461" y1="-126.06084135179321"
y2="-76.21432137190436" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="153.36870174443493" x2="103.52218176454608" y1="129.93915864820679"
y2="179.78567862809564" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="409.36870174443493" x2="359.5221817645461" y1="129.93915864820679"
y2="179.78567862809564" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="665.3687017444349" x2="615.5221817645461" y1="129.93915864820679"
y2="179.78567862809564" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="49.20494471467643" x2="2.7142059537850685" y1="141.75997600855746"
y2="188.25071476944882" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="49.20494471467643" x2="2.7142059537850685" y1="-370.2400239914425"
y2="-323.7492852305512" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="305.20494471467646" x2="258.71420595378504" y1="-370.2400239914425"
y2="-323.7492852305512" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="561.2049447146765" x2="514.714205953785" y1="-370.2400239914425"
y2="-323.7492852305512" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="49.20494471467643" x2="2.7142059537850685" y1="-114.24002399144254"
y2="-67.74928523055118" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="305.20494471467646" x2="258.71420595378504" y1="-114.24002399144254"
y2="-67.74928523055118" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="561.2049447146765" x2="514.714205953785" y1="-114.24002399144254"
y2="-67.74928523055118" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="49.20494471467643" x2="2.7142059537850685" y1="141.75997600855746"
y2="188.25071476944882" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="305.20494471467646" x2="258.71420595378504" y1="141.75997600855746"
y2="188.25071476944882" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="561.2049447146765" x2="514.714205953785" y1="141.75997600855746"
y2="188.25071476944882" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="84.6808460539986" x2="32.68305955000314" y1="-7.711036017440037"
y2="44.28675048655542" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="84.6808460539986" x2="32.68305955000314" y1="-519.71103601744"
y2="-467.71324951344457" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="340.6808460539986" x2="288.6830595500031" y1="-519.71103601744"
y2="-467.71324951344457" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="596.6808460539986" x2="544.6830595500031" y1="-519.71103601744"
y2="-467.71324951344457" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="84.6808460539986" x2="32.68305955000314" y1="-263.71103601744005"
y2="-211.71324951344457" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="340.6808460539986" x2="288.6830595500031" y1="-263.71103601744005"
y2="-211.71324951344457" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="596.6808460539986" x2="544.6830595500031" y1="-263.71103601744005"
y2="-211.71324951344457" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="84.6808460539986" x2="32.68305955000314" y1="-7.711036017440037"
y2="44.28675048655542" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="340.6808460539986" x2="288.6830595500031" y1="-7.711036017440037"
y2="44.28675048655542" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="596.6808460539986" x2="544.6830595500031" y1="-7.711036017440037"
y2="44.28675048655542" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="84.6808460539986" x2="32.68305955000314" y1="248.28896398255995"
y2="300.28675048655543" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="225.38342310559023" x2="185.66602314192056" y1="109.68961591653738"
y2="149.40701588020704" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="225.38342310559023" x2="185.66602314192056" y1="-402.3103840834626"
y2="-362.59298411979296" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="481.3834231055902" x2="441.66602314192056" y1="-402.3103840834626"
y2="-362.59298411979296" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="737.3834231055903" x2="697.6660231419205" y1="-402.3103840834626"
y2="-362.59298411979296" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="225.38342310559023" x2="185.66602314192056" y1="-146.31038408346262"
y2="-106.59298411979296" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="481.3834231055902" x2="441.66602314192056" y1="-146.31038408346262"
y2="-106.59298411979296" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="737.3834231055903" x2="697.6660231419205" y1="-146.31038408346262"
y2="-106.59298411979296" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="225.38342310559023" x2="185.66602314192056" y1="109.68961591653738"
y2="149.40701588020704" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="481.3834231055902" x2="441.66602314192056" y1="109.68961591653738"
y2="149.40701588020704" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="737.3834231055903" x2="697.6660231419205" y1="109.68961591653738"
y2="149.40701588020704" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="172.83662370669697" x2="103.52581079778793" y1="164.45975635392284"
y2="233.77056926283188" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="172.83662370669697" x2="103.52581079778793" y1="-347.54024364607716"
y2="-278.2294307371681" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="428.83662370669697" x2="359.5258107977879" y1="-347.54024364607716"
y2="-278.2294307371681" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="684.836623706697" x2="615.5258107977879" y1="-347.54024364607716"
y2="-278.2294307371681" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="172.83662370669697" x2="103.52581079778793" y1="-91.54024364607716"
y2="-22.229430737168116" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="428.83662370669697" x2="359.5258107977879" y1="-91.54024364607716"
y2="-22.229430737168116" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="684.836623706697" x2="615.5258107977879" y1="-91.54024364607716"
y2="-22.229430737168116" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="172.83662370669697" x2="103.52581079778793" y1="164.45975635392284"
y2="233.77056926283188" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="428.83662370669697" x2="359.5258107977879" y1="164.45975635392284"
y2="233.77056926283188" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="684.836623706697" x2="615.5258107977879" y1="164.45975635392284"
y2="233.77056926283188" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="254.85435949520382" x2="240.10841684705935" y1="-1.209429949430282"
y2="13.536512698714214" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="254.85435949520382" x2="240.10841684705935" y1="-513.2094299494303"
y2="-498.4634873012858" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="510.8543594952038" x2="496.10841684705935" y1="-513.2094299494303"
y2="-498.4634873012858" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="766.8543594952039" x2="752.1084168470593" y1="-513.2094299494303"
y2="-498.4634873012858" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="254.85435949520382" x2="240.10841684705935" y1="-257.2094299494303"
y2="-242.4634873012858" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="510.8543594952038" x2="496.10841684705935" y1="-257.2094299494303"
y2="-242.4634873012858" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="766.8543594952039" x2="752.1084168470593" y1="-257.2094299494303"
y2="-242.4634873012858" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="254.85435949520382" x2="240.10841684705935" y1="-1.209429949430282"
y2="13.536512698714214" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="510.8543594952038" x2="496.10841684705935" y1="-1.209429949430282"
y2="13.536512698714214" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="766.8543594952039" x2="752.1084168470593" y1="-1.209429949430282"
y2="13.536512698714214" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="254.85435949520382" x2="240.10841684705935" y1="254.79057005056973"
y2="269.5365126987142" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<animateTransform attributeName="transform" type="translate" values="0 0;-256 256"
keyTimes="0;1" repeatCount="indefinite" dur="10.3333333333333335s"></animateTransform>
</g>
</g>
</pattern>
</defs>
<rect x="0" y="0" width="1084" height="322" fill="url(#pid-0.7735807359934106)"></rect>
</svg>

File diff suppressed because it is too large Load diff

After

Width:  |  Height:  |  Size: 85 KiB

View file

@ -0,0 +1,97 @@
---
title: "Front Matter"
weight: 7
draft: false
description: "Tutte le variabili in primo piano disponibili in Blowfish."
slug: "front-matter"
tags: ["front matter", "config", "docs"]
series: ["Documentazione"]
series_order: 7
---
Oltre ai [parametri predefiniti della parte frontale di Hugo](https://gohugo.io/content-management/front-matter/#front-matter-variables), Blowfish aggiunge una serie di opzioni aggiuntive per personalizzare la presentazione dei singoli articoli . Tutti i parametri disponibili per la parte frontale del tema sono elencati di seguito.
I valori predefiniti dei parametri del front metter vengono ereditati dalla [configurazione di base]({{< ref "configuration" >}}) del tema, quindi devi specificare questi parametri nella parte iniziale solo quando desideri sovrascrivere quelli predefiniti.
<!-- prettier-ignore-start -->
| Name | Default | Description |
| ----------------------------- | --------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `title` | _Not set_ | Il nome dell'articolo. |
| `description` | _Not set_ | La descrizione testuale dell'articolo. Viene utilizzato nei metadati HTML. |
| `externalUrl` | _Not set_ | Se questo articolo è pubblicato su un sito Web di terze parti, l'URL di questo articolo. Fornire un URL impedirà la generazione di una pagina di contenuto e qualsiasi riferimento a questo articolo si collegherà direttamente al sito Web di terze parti. |
| `editURL` | `article.editURL` | Quando "showEdit" è attivo, l'URL per il collegamento di modifica. |
| `editAppendPath` | `article.editAppendPath` | Quando "showEdit" è attivo, indica se il percorso dell'articolo corrente deve essere aggiunto o meno all'URL impostato in "editURL". |
| `groupByYear` | `list.groupByYear` | Se gli articoli sono raggruppati o meno per anno nelle pagine di elenco. |
| `menu` | _Not set_ | Quando viene fornito un valore, nei menu denominati verrà visualizzato un collegamento a questo articolo. I valori validi sono "main" o "footer". |
| `robots` | _Not set_ | Stringa che indica come i robots dovrebbero gestire questo articolo. Se impostato, verrà visualizzato nell'intestazione della pagina. Fare riferimento ai [documenti di Google](https://developers.google.com/search/docs/advanced/robots/robots_meta_tag#directives) per i valori validi. |
| `sharingLinks` | `article.sharingLinks` | Quali link di condivisione visualizzare alla fine di questo articolo. Se non fornito o impostato su "false", non verrà visualizzato alcun collegamento. |
| `showAuthor` | `article.showAuthor` | Se la casella dell'autore predefinito viene visualizzata o meno nel piè di pagina dell'articolo. |
| `authors` | _Not set_ | Matrice di valori per gli autori, se impostata sovrascrive le impostazioni di "showAuthor" per la pagina o il sito. Utilizzato nella funzionalità per più autori, controlla [questa pagina]({{< ref "multi-author" >}}) per maggiori dettagli su come configurare tale funzionalità. |
| `showAuthorsBadges` | `article.showAuthorsBadges` | Se le tassonomie degli "autori" vengono visualizzate nell'articolo o nell'intestazione dell'elenco. Ciò richiede l'impostazione di "autori multipli" e la tassonomia degli "autori". Controlla [questa pagina]({{< ref "multi-author" >}}) per maggiori dettagli su come configurare questa funzione. |
| `featureimage` | _Not set_ | URL esterno per l'immagine in primo piano
| `featureimagecaption` | _Not set_ | Didascalia per l'immagine in primo piano. Visualizzato solo in heroStyle "big".
| `showHero` | `article.showHero` | Se l'immagine in miniatura verrà mostrata come immagine hero all'interno della pagina dell'articolo. |
| `heroStyle` | `article.heroStyle` | Stile per visualizzare l'immagine hero, le opzioni valide sono: `basic`, `big`, ` background`, `thumbAndBackground`. |
| `showBreadcrumbs` | `article.showBreadcrumbs` or `list.showBreadcrumbs` | Se i breadcrumb vengono visualizzati nell'articolo o nell'intestazione dell'elenco. |
| `showDate` | `article.showDate` | Se viene visualizzata o meno la data dell'articolo. La data viene impostata utilizzando il parametro "data". |
| `showDateUpdated` | `article.showDateUpdated` | Se viene visualizzata o meno la data di aggiornamento dell'articolo. La data viene impostata utilizzando il parametro "lastmod". |
| `showEdit` | `article.showEdit` |Se deve essere visualizzato o meno il collegamento per modificare il contenuto dell'articolo. |
| `showHeadingAnchors` | `article.showHeadingAnchors` | Se i collegamenti di ancoraggio dei titoli vengono visualizzati o meno insieme ai titoli all'interno di questo articolo. |
| `showPagination` | `article.showPagination` | Se i collegamenti all'articolo successivo/precedente vengono visualizzati o meno nel piè di pagina dell'articolo. |
| `invertPagination` | `article.invertPagination` | Se invertire o meno la direzione dei collegamenti all'articolo successivo/precedente. |
| `showReadingTime` | `article.showReadingTime` | Se viene visualizzato o meno il tempo di lettura dell'articolo. |
| `showTaxonomies` | `article.showTaxonomies` | Se vengono visualizzate o meno le tassonomie correlate a questo articolo. |
| `showTableOfContents` | `article.showTableOfContents` | Se il sommario viene visualizzato o meno in questo articolo. |
| `showWordCount` | `article.showWordCount` | Se viene visualizzato o meno il conteggio delle parole dell'articolo. |
| `showComments` | `article.showComments` | Se il [commenti parziali]({{< ref "partials#comments" >}}) è incluso o meno dopo il piè di pagina dell'articolo. |
| `showSummary` | `list.showSummary` | Se il riepilogo dell'articolo deve essere visualizzato o meno nelle pagine di elenco. |
| `showViews` | `article.showViews` | Se le visualizzazioni degli articoli devono essere visualizzate o meno negli elenchi e nella visualizzazione dettagliata. Ciò richiede un'integrazione Firebase. Controlla [questa pagina]({{< ref "firebase-views" >}}) per una guida su come integrare Firebase in Blowfish |
| `showLikes` | `article.showLikes` | Se l'articolo piace o meno deve essere visualizzato negli elenchi e nella vista dettagliata. Ciò richiede un'integrazione Firebase. Controlla [questa pagina]({{< ref "firebase-views" >}}) per una guida su come integrare Firebase in Blowfish |
| `seriesOpened` | `article.seriesOpened` | Se il modulo della serie verrà visualizzato aperto per impostazione predefinita o meno. |
| `series` | _Not set_ | Matrice di serie a cui appartiene l'articolo, si consiglia di utilizzare una sola serie per articolo. |
| `series_order` | _Not set_ | Numero dell'articolo all'interno della serie. |
| `summary` | Auto generated using `summaryLength` (see [site configuration]({{< ref "configuration#site-configuration" >}})) | Quando "showSummary" è abilitato, questa è la stringa Markdown da utilizzare come riepilogo per questo articolo. |
| `xml` | `true` unless excluded by `sitemap.excludedKinds` | Se questo articolo è incluso o meno nel file `/sitemap.xml` generato. |
| `layoutBackgroundBlur` | `true` | Rende l'immagine di sfondo sullo sfondo heroStyle sfocata con lo scorrimento. |
| `layoutBackgroundHeaderSpace` | `true` | Aggiungi spazio tra l'intestazione e il body. |
| `title` | _Not set_ | The name of the article. |
| `description` | _Not set_ | The text description for the article. It is used in the HTML metadata. |
| `externalUrl` | _Not set_ | If this article is published on a third-party website, the URL to this article. Providing a URL will prevent a content page being generated and any references to this article will link directly to the third-party website. |
| `editURL` | `article.editURL` | When `showEdit` is active, the URL for the edit link. |
| `editAppendPath` | `article.editAppendPath` | When `showEdit` is active, whether or not the path to the current article should be appended to the URL set at `editURL`. |
| `groupByYear` | `list.groupByYear` | Whether or not articles are grouped by year on list pages. |
| `menu` | _Not set_ | When a value is provided, a link to this article will appear in the named menus. Valid values are `main` or `footer`. |
| `robots` | _Not set_ | String that indicates how robots should handle this article. If set, it will be output in the page head. Refer to [Google's docs](https://developers.google.com/search/docs/advanced/robots/robots_meta_tag#directives) for valid values. |
| `sharingLinks` | `article.sharingLinks` | Which sharing links to display at the end of this article. When not provided, or set to `false` no links will be displayed. |
| `showAuthor` | `article.showAuthor` | Whether or not the author box for the default author is displayed in the article footer. |
| `showAuthorBottom` | `article.showAuthorBottom` | Author boxes are displayed at the bottom of each page instead of the top. |
| `authors` | _Not set_ | Array of values for authors, if set it overrides `showAuthor` settings for page or site. Used on the multiple authors feature, check [this page]({{< ref "multi-author" >}}) for more details on how to configure that feature. |
| `showAuthorsBadges` | `article.showAuthorsBadges` | Whether the `authors` taxonomies are are displayed in the article or list header. This requires the setup of `multiple authors` and the `authors` taxonomy. Check [this page]({{< ref "multi-author" >}}) for more details on how to configure that feature. |
| `featureimage` | _Not set_ | External URL for feature image |
| `featureimagecaption` | _Not set_ | Caption for feature image. Only displayed in heroStyle `big` |
| `showHero` | `article.showHero` | Whether the thumbnail image will be shown as a hero image within the article page. |
| `heroStyle` | `article.heroStyle` | Style to display the hero image, valid options are: `basic`, `big`, `background`, `thumbAndBackground`. |
| `showBreadcrumbs` | `article.showBreadcrumbs` or `list.showBreadcrumbs` | Whether the breadcrumbs are displayed in the article or list header. |
| `showDate` | `article.showDate` | Whether or not the article date is displayed. The date is set using the `date` parameter. |
| `showDateUpdated` | `article.showDateUpdated` | Whether or not the date the article was updated is displayed. The date is set using the `lastmod` parameter. |
| `showEdit` | `article.showEdit` | Whether or not the link to edit the article content should be displayed. |
| `showHeadingAnchors` | `article.showHeadingAnchors` | Whether or not heading anchor links are displayed alongside headings within this article. |
| `showPagination` | `article.showPagination` | Whether or not the next/previous article links are displayed in the article footer. |
| `invertPagination` | `article.invertPagination` | Whether or not to flip the direction of the next/previous article links. |
| `showReadingTime` | `article.showReadingTime` | Whether or not the article reading time is displayed. |
| `showTaxonomies` | `article.showTaxonomies` | Whether or not the taxonomies that relate to this article are displayed. |
| `showTableOfContents` | `article.showTableOfContents` | Whether or not the table of contents is displayed on this article. |
| `showWordCount` | `article.showWordCount` | Whether or not the article word count is displayed. |
| `showComments` | `article.showComments` | Whether or not the [comments partial]({{< ref "partials#comments" >}}) is included after the article footer. |
| `showSummary` | `list.showSummary` | Whether or not the article summary should be displayed on list pages. |
| `showViews` | `article.showViews` | Whether or not the article views should be displayed in lists and detailed view. This requires a firebase integration. Check [this page]({{< ref "firebase-views" >}}) for a guide on how to integrate Firebase into Blowfish |
| `showLikes` | `article.showLikes` | Whether or not the article likes should be displayed in lists and detailed view. This requires a firebase integration. Check [this page]({{< ref "firebase-views" >}}) for a guide on how to integrate Firebase into Blowfish |
| `seriesOpened` | `article.seriesOpened` | Whether or not the series module will be displayed open by default or not. |
| `series` | _Not set_ | Array of series the article belongs to, we recommend using only one series per article. |
| `series_order` | _Not set_ | Number of the article within the series. |
| `summary` | Auto generated using `summaryLength` (see [site configuration]({{< ref "configuration#site-configuration" >}})) | When `showSummary` is enabled, this is the Markdown string to be used as the summary for this article. |
| `xml` | `true` unless excluded by `sitemap.excludedKinds` | Whether or not this article is included in the generated `/sitemap.xml` file. |
| `layoutBackgroundBlur` | `true` | Makes the background image in the background heroStyle blur with the scroll |
| `layoutBackgroundHeaderSpace` | `true` | Add space between the header and the body. |
<!-- prettier-ignore-end -->

View file

@ -0,0 +1,58 @@
---
title: "フロントマター"
weight: 7
draft: false
description: "Blowfish で利用可能なすべてのフロントマター変数。"
slug: "front-matter"
tags: ["front matter", "config", "docs"]
series: ["Documentation"]
series_order: 7
---
[デフォルトの Hugo フロントマターパラメータ](https://gohugo.io/content-management/front-matter/#front-matter-variables)に加えて、Blowfish は個々の記事の表示をカスタマイズするための追加オプションを多数用意しています。利用可能なテーマのフロントマターパラメータをすべて以下に示します。
フロントマターパラメータのデフォルト値は、テーマの[基本設定]({{< ref "configuration" >}})から継承されるため、デフォルトを上書きしたい場合にのみ、フロントマターでこれらのパラメータを指定する必要があります。
<!-- prettier-ignore-start -->
| 名前 | デフォルト | 説明 |
| ----------------------------- | --------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `title` | _未設定_ | 記事の名前。 |
| `description` | _未設定_ | 記事のテキスト説明。HTML メタデータで使用されます。 |
| `externalUrl` | _未設定_ | この記事がサードパーティのウェブサイトで公開されている場合、この記事への URL。URL を指定すると、コンテンツページの生成が妨げられ、この記事への参照はすべてサードパーティのウェブサイトに直接リンクされます。 |
| `editURL` | `article.editURL` | `showEdit` がアクティブな場合の、編集リンクの URL。 |
| `editAppendPath` | `article.editAppendPath` | `showEdit` がアクティブな場合、現在の記事へのパスを `editURL` で設定された URL に追加するかどうか。 |
| `groupByYear` | `list.groupByYear` | リストページで記事を年別にグループ化するかどうか。 |
| `menu` | _未設定_ | 値を指定すると、この記事へのリンクが名前付きメニューに表示されます。有効な値は `main` または `footer` です。 |
| `robots` | _未設定_ | ロボットがこの記事をどのように処理するかを示す文字列。設定されている場合、ページヘッドに出力されます。有効な値については、[Google のドキュメント](https://developers.google.com/search/docs/advanced/robots/robots_meta_tag#directives)を参照してください。 |
| `sharingLinks` | `article.sharingLinks` | この記事の最後に表示する共有リンク。指定されていない場合、または `false` に設定されている場合、リンクは表示されません。 |
| `showAuthor` | `article.showAuthor` | 記事のフッターにデフォルトの著者の著者ボックスを表示するかどうか。 |
| `showAuthorBottom` | `article.showAuthorBottom` | 著者ボックスは、各ページの上部ではなく下部に表示されます。 |
| `authors` | _未設定_ | 著者の値の配列。設定されている場合、ページまたはサイトの `showAuthor` 設定を上書きします。複数人の著者機能で使用されます。この機能の設定方法の詳細については、[このページ]({{< ref "multi-author" >}})をご覧ください。 |
| `showAuthorsBadges` | `article.showAuthorsBadges` | 記事またはリストヘッダーに `authors` タクソノミーを表示するかどうか。これには、`複数人の著者``authors` タクソノミーの設定が必要です。この機能の設定方法の詳細については、[このページ]({{< ref "multi-author" >}})をご覧ください。 |
| `featureimage` | _未設定_ | フィーチャー画像の外部 URL。 |
| `featureimagecaption` | _未設定_ | フィーチャー画像のキャプション。heroStyle `big` でのみ表示されます。 |
| `showHero` | `article.showHero` | 記事ページ内でサムネイル画像をヒーロー画像として表示するかどうか。 |
| `heroStyle` | `article.heroStyle` | ヒーロー画像の表示スタイル。有効なオプションは、`basic``big``background``thumbAndBackground` です。 |
| `showBreadcrumbs` | `article.showBreadcrumbs` <br/>または `list.showBreadcrumbs` | 記事またはリストヘッダーにパンくずリストを表示するかどうか。 |
| `showDate` | `article.showDate` | 記事の日付を表示するかどうか。日付は `date` パラメータを使用して設定されます。 |
| `showDateUpdated` | `article.showDateUpdated` | 記事が更新された日付を表示するかどうか。日付は `lastmod` パラメータを使用して設定されます。 |
| `showEdit` | `article.showEdit` | 記事コンテンツを編集するためのリンクを表示するかどうか。 |
| `showHeadingAnchors` | `article.showHeadingAnchors` | この記事の見出しの横に見出しアンカーリンクを表示するかどうか。 |
| `showPagination` | `article.showPagination` | 記事のフッターに次/前の記事へのリンクを表示するかどうか。 |
| `invertPagination` | `article.invertPagination` | 次/前の記事へのリンクの方向を反転するかどうか。 |
| `showReadingTime` | `article.showReadingTime` | 記事の閲覧時間を表示するかどうか。 |
| `showTaxonomies` | `article.showTaxonomies` | この記事に関連するタクソノミーを表示するかどうか。 |
| `showTableOfContents` | `article.showTableOfContents` | この記事に目次を表示するかどうか。 |
| `showWordCount` | `article.showWordCount` | 記事の単語数を表示するかどうか。 |
| `showComments` | `article.showComments` | 記事のフッターの後に[コメントパーシャル]({{< ref "partials#comments" >}})を含めるかどうか。 |
| `showSummary` | `list.showSummary` | リストページに記事の要約を表示するかどうか。 |
| `showViews` | `article.showViews` | リストと詳細ビューに記事の閲覧数を表示するかどうか。これには Firebase の統合が必要です。Firebase を Blowfish に統合する方法については、[このページ]({{< ref "firebase-views" >}})をご覧ください。 |
| `showLikes` | `article.showLikes` | リストと詳細ビューに記事のいいねを表示するかどうか。これには Firebase の統合が必要です。Firebase を Blowfish に統合する方法については、[このページ]({{< ref "firebase-views" >}})をご覧ください。 |
| `seriesOpened` | `article.seriesOpened` | シリーズモジュールをデフォルトで開いて表示するかどうか。 |
| `series` | _未設定_ | 記事が属するシリーズの配列。記事ごとに 1 つのシリーズのみを使用することをお勧めします。 |
| `series_order` | _未設定_ | シリーズ内の記事の番号。 |
| `summary` | `summaryLength` を使用して自動生成されます ([サイト設定]({{< ref "configuration#site-configuration" >}})を参照) | `showSummary` が有効な場合、この記事の要約として使用される Markdown 文字列。 |
| `xml` | `sitemap.excludedKinds` によって除外されない限り `true` | この記事が生成された `/sitemap.xml` ファイルに含まれるかどうか。 |
| `layoutBackgroundBlur` | `true` | background heroStyle の背景画像をスクロールでぼかします |
| `layoutBackgroundHeaderSpace` | `true` | ヘッダーと本文の間にスペースを追加します |
<!-- prettier-ignore-end -->

View file

@ -0,0 +1,58 @@
---
title: "Front Matter"
weight: 7
draft: false
description: "All the front matter variables available in Blowfish."
slug: "front-matter"
tags: ["front matter", "config", "docs"]
series: ["Documentation"]
series_order: 7
---
In addition to the [default Hugo front matter parameters](https://gohugo.io/content-management/front-matter/#front-matter-variables), Blowfish adds a number of additional options to customise the presentation of individual articles. All the available theme front matter parameters are listed below.
Front matter parameter default values are inherited from the theme's [base configuration]({{< ref "configuration" >}}), so you only need to specify these parameters in your front matter when you want to override the default.
<!-- prettier-ignore-start -->
| Name | Default | Description |
| ----------------------------- | --------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `title` | _Not set_ | The name of the article. |
| `description` | _Not set_ | The text description for the article. It is used in the HTML metadata. |
| `externalUrl` | _Not set_ | If this article is published on a third-party website, the URL to this article. Providing a URL will prevent a content page being generated and any references to this article will link directly to the third-party website. |
| `editURL` | `article.editURL` | When `showEdit` is active, the URL for the edit link. |
| `editAppendPath` | `article.editAppendPath` | When `showEdit` is active, whether or not the path to the current article should be appended to the URL set at `editURL`. |
| `groupByYear` | `list.groupByYear` | Whether or not articles are grouped by year on list pages. |
| `menu` | _Not set_ | When a value is provided, a link to this article will appear in the named menus. Valid values are `main` or `footer`. |
| `robots` | _Not set_ | String that indicates how robots should handle this article. If set, it will be output in the page head. Refer to [Google's docs](https://developers.google.com/search/docs/advanced/robots/robots_meta_tag#directives) for valid values. |
| `sharingLinks` | `article.sharingLinks` | Which sharing links to display at the end of this article. When not provided, or set to `false` no links will be displayed. |
| `showAuthor` | `article.showAuthor` | Whether or not the author box for the default author is displayed in the article footer. |
| `showAuthorBottom` | `article.showAuthorBottom` | Author boxes are displayed at the bottom of each page instead of the top. |
| `authors` | _Not set_ | Array of values for authors, if set it overrides `showAuthor` settings for page or site. Used on the multiple authors feature, check [this page]({{< ref "multi-author" >}}) for more details on how to configure that feature. |
| `showAuthorsBadges` | `article.showAuthorsBadges` | Whether the `authors` taxonomies are are displayed in the article or list header. This requires the setup of `multiple authors` and the `authors` taxonomy. Check [this page]({{< ref "multi-author" >}}) for more details on how to configure that feature. |
| `featureimage` | _Not set_ | External URL for feature image |
| `featureimagecaption` | _Not set_ | Caption for feature image. Only displayed in heroStyle `big` |
| `showHero` | `article.showHero` | Whether the thumbnail image will be shown as a hero image within the article page. |
| `heroStyle` | `article.heroStyle` | Style to display the hero image, valid options are: `basic`, `big`, `background`, `thumbAndBackground`. |
| `showBreadcrumbs` | `article.showBreadcrumbs` or `list.showBreadcrumbs` | Whether the breadcrumbs are displayed in the article or list header. |
| `showDate` | `article.showDate` | Whether or not the article date is displayed. The date is set using the `date` parameter. |
| `showDateUpdated` | `article.showDateUpdated` | Whether or not the date the article was updated is displayed. The date is set using the `lastmod` parameter. |
| `showEdit` | `article.showEdit` | Whether or not the link to edit the article content should be displayed. |
| `showHeadingAnchors` | `article.showHeadingAnchors` | Whether or not heading anchor links are displayed alongside headings within this article. |
| `showPagination` | `article.showPagination` | Whether or not the next/previous article links are displayed in the article footer. |
| `invertPagination` | `article.invertPagination` | Whether or not to flip the direction of the next/previous article links. |
| `showReadingTime` | `article.showReadingTime` | Whether or not the article reading time is displayed. |
| `showTaxonomies` | `article.showTaxonomies` | Whether or not the taxonomies that relate to this article are displayed. |
| `showTableOfContents` | `article.showTableOfContents` | Whether or not the table of contents is displayed on this article. |
| `showWordCount` | `article.showWordCount` | Whether or not the article word count is displayed. |
| `showComments` | `article.showComments` | Whether or not the [comments partial]({{< ref "partials#comments" >}}) is included after the article footer. |
| `showSummary` | `list.showSummary` | Whether or not the article summary should be displayed on list pages. |
| `showViews` | `article.showViews` | Whether or not the article views should be displayed in lists and detailed view. This requires a firebase integration. Check [this page]({{< ref "firebase-views" >}}) for a guide on how to integrate Firebase into Blowfish |
| `showLikes` | `article.showLikes` | Whether or not the article likes should be displayed in lists and detailed view. This requires a firebase integration. Check [this page]({{< ref "firebase-views" >}}) for a guide on how to integrate Firebase into Blowfish |
| `seriesOpened` | `article.seriesOpened` | Whether or not the series module will be displayed open by default or not. |
| `series` | _Not set_ | Array of series the article belongs to, we recommend using only one series per article. |
| `series_order` | _Not set_ | Number of the article within the series. |
| `summary` | Auto generated using `summaryLength` (see [site configuration]({{< ref "configuration#site-configuration" >}})) | When `showSummary` is enabled, this is the Markdown string to be used as the summary for this article. |
| `xml` | `true` unless excluded by `sitemap.excludedKinds` | Whether or not this article is included in the generated `/sitemap.xml` file. |
| `layoutBackgroundBlur` | `true` | Makes the background image in the background heroStyle blur with the scroll |
| `layoutBackgroundHeaderSpace` | `true` | Add space between the header and the body. |
<!-- prettier-ignore-end -->

View file

@ -0,0 +1,58 @@
---
title: "Front Matter(文件头信息)"
weight: 7
draft: false
description: "文本主要介绍 Blowfish 中页面中可以添加的所有的 Front Matter 参数。"
slug: "front-matter"
tags: ["front matter", "配置", "文档"]
series: ["部署教程"]
series_order: 7
---
除了 [Hugo 中默认的 front matter](https://gohugo.io/content-management/front-matter/#front-matter-variables)Blowfish 主题中还添加了大量的参数选项来自定义单个页面的展示方式。所有可用的扉页参数如下。
front matter 参数中的默认值是从[基础配置]({{< ref "configuration" >}})中继承的,所有只有当你想要覆盖默认值时,才需要在当前页面指定这些参数。
<!-- prettier-ignore-start -->
| 名称 | 默认值 | 描述 |
| ----------------------------- | --------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `title` | 无 | 文章名称。 |
| `description` | 无 | 文章的描述信息,它会被添加在 HTML 的 `<meta>` 元数据中。 |
| `externalUrl` | 无 | 如果文章发布在第三方网站上,这里提供只想对应文章的 URL 地址。提供 URL 将会组织生成内容页面,对这篇文章的任何引用都会直接跳转到第三方网站的 URL 上面。 |
| `editURL` | `article.editURL` | 当激活 `showEdit` 参数时,此参数用来设置编辑文章的 URL。 |
| `editAppendPath` | `article.editAppendPath` | 当激活 `showEdit` 参数时,该参数指定是否将当前文章路径添加到 `editURL` 设置的 URL 后面。 |
| `groupByYear` | `list.groupByYear` | 是否在列表页面按年份对文章进行分组。 |
| `menu` | 无 | 当设置此值,这篇内容的链接将会出现在菜单中。有效值是 `main``footer`。 |
| `robots` | 无 | 支持搜索引擎的爬虫如何处理这篇文章。如果设置了此值,它将在页面头部输出。更多内容请参考 [Google 文档](https://developers.google.com/search/docs/advanced/robots/robots_meta_tag#directives)。 |
| `sharingLinks` | `article.sharingLinks` | 指定文章结尾显示哪些分享链接。如果没有设置或设置为 `false` ,则没有分享链接。 |
| `showAuthor` | `article.showAuthor` | 是否在页脚处显示作者框。 |
| `showAuthorBottom` | `article.showAuthorBottom` | 作者框显示在每页的底部而不是顶部。 |
| `authors` | 无 | 用于展示多创作者的数组,如果设置了将会覆盖 `showAuthor` 设置。这里使用了多作者的特性,查看[这个页面]({{< ref "multi-author" >}})来获取更多信息。 |
| `showAuthorsBadges` | `article.showAuthorsBadges` | 是否在文章和列表页展示`authors`作者分类。想是它生效需要开启`multiple authors`多创作者和 `authors` 作者分类。 查看[这个页面]({{< ref "multi-author" >}})来获取更多信息。 |
| `featureimage` | 无 | 基于外部 URL 的特征图片链接。 |
| `featureimagecaption` | 无 | 特征图片的说明,仅在 hero 样式的 `big` 风格下展示。 |
| `showHero` | `article.showHero` | 是否在文章页面将所裸土作为文章页面内的 hero 图片显示。 |
| `heroStyle` | `article.heroStyle` | hero 图片的风格,合法的值有: `basic``big``background``thumbAndBackground`。 |
| `showBreadcrumbs` | `article.showBreadcrumbs` or `list.showBreadcrumbs` | 是否在文章或列表页面显示面包屑导航。 |
| `showDate` | `article.showDate` | 是否显示文章的日期。具体日期使用 `date` 参数设置。 |
| `showDateUpdated` | `article.showDateUpdated` | 是否显示文章的更新日期。具体日期使用 `lastmod` 参数设置。 |
| `showEdit` | `article.showEdit` | 是否显示编辑文章内容的链接。 |
| `showHeadingAnchors` | `article.showHeadingAnchors` | 是否在文章的标题旁显示锚点链接。 |
| `showPagination` | `article.showPagination` | 是否在文章页脚显示下一篇/上一篇链接。 |
| `invertPagination` | `article.invertPagination` | 是否翻转下一篇/上一篇的链接方向。 |
| `showReadingTime` | `article.showReadingTime` | 是否显示文章的预估阅读时间。 |
| `showTaxonomies` | `article.showTaxonomies` | 是否显示文章关联的分类/标签。 |
| `showTableOfContents` | `article.showTableOfContents` | 是否显示文章目录。 |
| `showWordCount` | `article.showWordCount` | 是否显示文章字数统计。如果你的语言属于 CJK 语言,需要在 `config.toml` 中开启 `hasCJKLanguage` 参数。 |
| `showComments` | `article.showComments` | 是否在文章页脚显示 [评论部分]({{< ref "partials#comments" >}})。 |
| `showSummary` | `list.showSummary` | 是否在文章或列表页显示摘要。 |
| `showViews` | `article.showViews` | 是否显示文章和列表页面的阅读量。这需要集成 firebase ,具体可以看[这个页面]({{< ref "firebase-views" >}})来了解如何在 Blowfish 中集成firebase。 |
| `showLikes` | `article.showLikes` | 是否显示文章和列表页面的点赞量。这需要集成 firebase ,具体可以看[这个页面]({{< ref "firebase-views" >}})来了解如何在 Blowfish 中集成firebase。 |
| `seriesOpened` | `article.seriesOpened` | 是否打开系列模块。 |
| `series` | 无 | 文章所属的系列数组,我们建议每篇文章只属于一个系列。 |
| `series_order` | 无 | 文章在系列中的编号。 |
| `summary` | Auto generated using `summaryLength` (see [site configuration]({{< ref "configuration#site-configuration" >}})) | 当启用 `showSummary`这是作为这篇文章摘要的Markdown字符串。 |
| `xml` | `true` unless excluded by `sitemap.excludedKinds` | 是否将这篇文章包含在生成的 `/sitemap.xml` 文件中。 |
| `layoutBackgroundBlur` | `true` | 向下滚动主页时,是否模糊背景图。 |
| `layoutBackgroundHeaderSpace` | `true` | 在标题和正文之间添加空白区域间隔。 |
<!-- prettier-ignore-end -->

View file

@ -0,0 +1,574 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
style="margin:auto;background:rgba(NaN, NaN, NaN, 0);display:block;z-index:1;position:relative"
width="1084" height="322" preserveAspectRatio="xMidYMid" viewBox="0 0 1084 322">
<defs>
<pattern id="pid-0.7735807359934106" x="0" y="0" width="345.6" height="345.6"
patternUnits="userSpaceOnUse">
<g transform="scale(1.35)">
<g>
<line x1="237.6288884328494" x2="201.39714008747956" y1="119.05338354492488"
y2="155.28513189029474" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="237.6288884328494" x2="201.39714008747956" y1="-392.9466164550751"
y2="-356.71486810970526" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="493.6288884328494" x2="457.39714008747956" y1="-392.9466164550751"
y2="-356.71486810970526" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="749.6288884328494" x2="713.3971400874796" y1="-392.9466164550751"
y2="-356.71486810970526" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="237.6288884328494" x2="201.39714008747956" y1="-136.94661645507512"
y2="-100.71486810970526" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="493.6288884328494" x2="457.39714008747956" y1="-136.94661645507512"
y2="-100.71486810970526" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="749.6288884328494" x2="713.3971400874796" y1="-136.94661645507512"
y2="-100.71486810970526" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="237.6288884328494" x2="201.39714008747956" y1="119.05338354492488"
y2="155.28513189029474" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="493.6288884328494" x2="457.39714008747956" y1="119.05338354492488"
y2="155.28513189029474" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="749.6288884328494" x2="713.3971400874796" y1="119.05338354492488"
y2="155.28513189029474" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="244.43797352167968" x2="179.25167385613412" y1="196.21419032492787"
y2="261.40048999047343" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="244.43797352167968" x2="179.25167385613412" y1="-315.78580967507213"
y2="-250.59951000952657" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="500.4379735216797" x2="435.2516738561341" y1="-315.78580967507213"
y2="-250.59951000952657" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="756.4379735216796" x2="691.2516738561342" y1="-315.78580967507213"
y2="-250.59951000952657" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="244.43797352167968" x2="179.25167385613412" y1="-59.78580967507213"
y2="5.400489990473432" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="500.4379735216797" x2="435.2516738561341" y1="-59.78580967507213"
y2="5.400489990473432" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="756.4379735216796" x2="691.2516738561342" y1="-59.78580967507213"
y2="5.400489990473432" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="244.43797352167968" x2="179.25167385613412" y1="196.21419032492787"
y2="261.40048999047343" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="500.4379735216797" x2="435.2516738561341" y1="196.21419032492787"
y2="261.40048999047343" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="756.4379735216796" x2="691.2516738561342" y1="196.21419032492787"
y2="261.40048999047343" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="219.6724359102308" x2="209.2181431749452" y1="92.85808081141191"
y2="103.31237354669749" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="219.6724359102308" x2="209.2181431749452" y1="-419.1419191885881"
y2="-408.6876264533025" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="475.6724359102308" x2="465.2181431749452" y1="-419.1419191885881"
y2="-408.6876264533025" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="731.6724359102308" x2="721.2181431749452" y1="-419.1419191885881"
y2="-408.6876264533025" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="219.6724359102308" x2="209.2181431749452" y1="-163.14191918858808"
y2="-152.68762645330253" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="475.6724359102308" x2="465.2181431749452" y1="-163.14191918858808"
y2="-152.68762645330253" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="731.6724359102308" x2="721.2181431749452" y1="-163.14191918858808"
y2="-152.68762645330253" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="219.6724359102308" x2="209.2181431749452" y1="92.85808081141191"
y2="103.31237354669749" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="475.6724359102308" x2="465.2181431749452" y1="92.85808081141191"
y2="103.31237354669749" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="731.6724359102308" x2="721.2181431749452" y1="92.85808081141191"
y2="103.31237354669749" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="112.00565118011832" x2="71.15817744773324" y1="56.63419812919665"
y2="97.48167186158173" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="112.00565118011832" x2="71.15817744773324" y1="-455.36580187080335"
y2="-414.51832813841827" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="368.0056511801183" x2="327.15817744773324" y1="-455.36580187080335"
y2="-414.51832813841827" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="624.0056511801183" x2="583.1581774477332" y1="-455.36580187080335"
y2="-414.51832813841827" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="112.00565118011832" x2="71.15817744773324" y1="-199.36580187080335"
y2="-158.51832813841827" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="368.0056511801183" x2="327.15817744773324" y1="-199.36580187080335"
y2="-158.51832813841827" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="624.0056511801183" x2="583.1581774477332" y1="-199.36580187080335"
y2="-158.51832813841827" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="112.00565118011832" x2="71.15817744773324" y1="56.63419812919665"
y2="97.48167186158173" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="368.0056511801183" x2="327.15817744773324" y1="56.63419812919665"
y2="97.48167186158173" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="624.0056511801183" x2="583.1581774477332" y1="56.63419812919665"
y2="97.48167186158173" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="60.932966336476014" x2="49.388821076756514" y1="125.65681060957188"
y2="137.20095586929136" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="60.932966336476014" x2="49.388821076756514" y1="-386.3431893904281"
y2="-374.79904413070864" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="316.932966336476" x2="305.3888210767565" y1="-386.3431893904281"
y2="-374.79904413070864" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="572.932966336476" x2="561.3888210767565" y1="-386.3431893904281"
y2="-374.79904413070864" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="60.932966336476014" x2="49.388821076756514" y1="-130.3431893904281"
y2="-118.79904413070864" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="316.932966336476" x2="305.3888210767565" y1="-130.3431893904281"
y2="-118.79904413070864" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="572.932966336476" x2="561.3888210767565" y1="-130.3431893904281"
y2="-118.79904413070864" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="60.932966336476014" x2="49.388821076756514" y1="125.65681060957188"
y2="137.20095586929136" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="316.932966336476" x2="305.3888210767565" y1="125.65681060957188"
y2="137.20095586929136" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="572.932966336476" x2="561.3888210767565" y1="125.65681060957188"
y2="137.20095586929136" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="103.78310212459807" x2="35.08486945593138" y1="-2.328164446496814"
y2="66.37006822216988" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="103.78310212459807" x2="35.08486945593138" y1="-514.3281644464968"
y2="-445.6299317778301" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="359.7831021245981" x2="291.08486945593137" y1="-514.3281644464968"
y2="-445.6299317778301" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="615.783102124598" x2="547.0848694559314" y1="-514.3281644464968"
y2="-445.6299317778301" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="103.78310212459807" x2="35.08486945593138" y1="-258.3281644464968"
y2="-189.6299317778301" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="359.7831021245981" x2="291.08486945593137" y1="-258.3281644464968"
y2="-189.6299317778301" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="615.783102124598" x2="547.0848694559314" y1="-258.3281644464968"
y2="-189.6299317778301" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="103.78310212459807" x2="35.08486945593138" y1="-2.328164446496814"
y2="66.37006822216988" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="359.7831021245981" x2="291.08486945593137" y1="-2.328164446496814"
y2="66.37006822216988" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="615.783102124598" x2="547.0848694559314" y1="-2.328164446496814"
y2="66.37006822216988" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="103.78310212459807" x2="35.08486945593138" y1="253.67183555350317"
y2="322.3700682221699" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="211.69894364075495" x2="194.13528259328754" y1="166.21741462144607"
y2="183.78107566891347" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="211.69894364075495" x2="194.13528259328754" y1="-345.7825853785539"
y2="-328.21892433108655" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="467.6989436407549" x2="450.13528259328757" y1="-345.7825853785539"
y2="-328.21892433108655" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="723.6989436407549" x2="706.1352825932876" y1="-345.7825853785539"
y2="-328.21892433108655" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="211.69894364075495" x2="194.13528259328754" y1="-89.78258537855393"
y2="-72.21892433108653" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="467.6989436407549" x2="450.13528259328757" y1="-89.78258537855393"
y2="-72.21892433108653" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="723.6989436407549" x2="706.1352825932876" y1="-89.78258537855393"
y2="-72.21892433108653" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="211.69894364075495" x2="194.13528259328754" y1="166.21741462144607"
y2="183.78107566891347" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="467.6989436407549" x2="450.13528259328757" y1="166.21741462144607"
y2="183.78107566891347" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="723.6989436407549" x2="706.1352825932876" y1="166.21741462144607"
y2="183.78107566891347" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="44.012515207413756" x2="6.2920050630466875" y1="153.79537767995515"
y2="191.5158878243222" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="44.012515207413756" x2="6.2920050630466875" y1="-358.20462232004485"
y2="-320.4841121756778" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="300.01251520741374" x2="262.2920050630467" y1="-358.20462232004485"
y2="-320.4841121756778" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="556.0125152074138" x2="518.2920050630466" y1="-358.20462232004485"
y2="-320.4841121756778" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="44.012515207413756" x2="6.2920050630466875" y1="-102.20462232004485"
y2="-64.48411217567781" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="300.01251520741374" x2="262.2920050630467" y1="-102.20462232004485"
y2="-64.48411217567781" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="556.0125152074138" x2="518.2920050630466" y1="-102.20462232004485"
y2="-64.48411217567781" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="44.012515207413756" x2="6.2920050630466875" y1="153.79537767995515"
y2="191.5158878243222" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="300.01251520741374" x2="262.2920050630467" y1="153.79537767995515"
y2="191.5158878243222" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="556.0125152074138" x2="518.2920050630466" y1="153.79537767995515"
y2="191.5158878243222" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="105.49237048043514" x2="31.549625942354083" y1="123.41684480916788"
y2="197.35958934724894" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="105.49237048043514" x2="31.549625942354083" y1="-388.58315519083214"
y2="-314.64041065275103" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="361.49237048043517" x2="287.54962594235406" y1="-388.58315519083214"
y2="-314.64041065275103" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="617.4923704804352" x2="543.549625942354" y1="-388.58315519083214"
y2="-314.64041065275103" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="105.49237048043514" x2="31.549625942354083" y1="-132.58315519083212"
y2="-58.64041065275106" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="361.49237048043517" x2="287.54962594235406" y1="-132.58315519083212"
y2="-58.64041065275106" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="617.4923704804352" x2="543.549625942354" y1="-132.58315519083212"
y2="-58.64041065275106" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="105.49237048043514" x2="31.549625942354083" y1="123.41684480916788"
y2="197.35958934724894" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="361.49237048043517" x2="287.54962594235406" y1="123.41684480916788"
y2="197.35958934724894" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="617.4923704804352" x2="543.549625942354" y1="123.41684480916788"
y2="197.35958934724894" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<animateTransform attributeName="transform" type="translate" values="0 0;-256 256"
keyTimes="0;1" repeatCount="indefinite" dur="10s"></animateTransform>
</g>
<g>
<line x1="95.73622575770466" x2="50.085335235319484" y1="20.45659654328417"
y2="66.10748706566935" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="95.73622575770466" x2="50.085335235319484" y1="-491.54340345671585"
y2="-445.8925129343306" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="351.7362257577047" x2="306.08533523531946" y1="-491.54340345671585"
y2="-445.8925129343306" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="607.7362257577047" x2="562.0853352353195" y1="-491.54340345671585"
y2="-445.8925129343306" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="95.73622575770466" x2="50.085335235319484" y1="-235.54340345671582"
y2="-189.89251293433065" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="351.7362257577047" x2="306.08533523531946" y1="-235.54340345671582"
y2="-189.89251293433065" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="607.7362257577047" x2="562.0853352353195" y1="-235.54340345671582"
y2="-189.89251293433065" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="95.73622575770466" x2="50.085335235319484" y1="20.45659654328417"
y2="66.10748706566935" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="351.7362257577047" x2="306.08533523531946" y1="20.45659654328417"
y2="66.10748706566935" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="607.7362257577047" x2="562.0853352353195" y1="20.45659654328417"
y2="66.10748706566935" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="263.34308373797757" x2="226.59561736370148" y1="112.42933995479353"
y2="149.17680632906962" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="263.34308373797757" x2="226.59561736370148" y1="-399.57066004520647"
y2="-362.8231936709304" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="519.3430837379776" x2="482.5956173637015" y1="-399.57066004520647"
y2="-362.8231936709304" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="775.3430837379776" x2="738.5956173637014" y1="-399.57066004520647"
y2="-362.8231936709304" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="263.34308373797757" x2="226.59561736370148" y1="-143.57066004520647"
y2="-106.82319367093038" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="519.3430837379776" x2="482.5956173637015" y1="-143.57066004520647"
y2="-106.82319367093038" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="775.3430837379776" x2="738.5956173637014" y1="-143.57066004520647"
y2="-106.82319367093038" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="263.34308373797757" x2="226.59561736370148" y1="112.42933995479353"
y2="149.17680632906962" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="519.3430837379776" x2="482.5956173637015" y1="112.42933995479353"
y2="149.17680632906962" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="775.3430837379776" x2="738.5956173637014" y1="112.42933995479353"
y2="149.17680632906962" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="7.343083737977565" x2="-29.40438263629852" y1="112.42933995479353"
y2="149.17680632906962" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="29.5343611349199" x2="-26.261040392985034" y1="205.16777076655512"
y2="260.96317229446004" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="29.5343611349199" x2="-26.261040392985034" y1="-306.8322292334449"
y2="-251.03682770553996" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="285.5343611349199" x2="229.73895960701498" y1="-306.8322292334449"
y2="-251.03682770553996" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="541.5343611349199" x2="485.738959607015" y1="-306.8322292334449"
y2="-251.03682770553996" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="29.5343611349199" x2="-26.261040392985034" y1="-50.83222923344488"
y2="4.963172294460037" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="285.5343611349199" x2="229.73895960701498" y1="-50.83222923344488"
y2="4.963172294460037" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="541.5343611349199" x2="485.738959607015" y1="-50.83222923344488"
y2="4.963172294460037" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="29.5343611349199" x2="-26.261040392985034" y1="205.16777076655512"
y2="260.96317229446004" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="285.5343611349199" x2="229.73895960701498" y1="205.16777076655512"
y2="260.96317229446004" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="541.5343611349199" x2="485.738959607015" y1="205.16777076655512"
y2="260.96317229446004" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="235.025028503587" x2="173.48946106938683" y1="23.306929884424335"
y2="84.84249731862451" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="235.025028503587" x2="173.48946106938683" y1="-488.69307011557567"
y2="-427.1575026813755" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="491.025028503587" x2="429.48946106938683" y1="-488.69307011557567"
y2="-427.1575026813755" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="747.025028503587" x2="685.4894610693868" y1="-488.69307011557567"
y2="-427.1575026813755" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="235.025028503587" x2="173.48946106938683" y1="-232.69307011557567"
y2="-171.1575026813755" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="491.025028503587" x2="429.48946106938683" y1="-232.69307011557567"
y2="-171.1575026813755" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="747.025028503587" x2="685.4894610693868" y1="-232.69307011557567"
y2="-171.1575026813755" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="235.025028503587" x2="173.48946106938683" y1="23.306929884424335"
y2="84.84249731862451" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="491.025028503587" x2="429.48946106938683" y1="23.306929884424335"
y2="84.84249731862451" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="747.025028503587" x2="685.4894610693868" y1="23.306929884424335"
y2="84.84249731862451" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="225.00990918130768" x2="200.62370409686488" y1="210.1052181599721"
y2="234.4914232444149" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="225.00990918130768" x2="200.62370409686488" y1="-301.8947818400279"
y2="-277.50857675558507" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="481.00990918130765" x2="456.6237040968649" y1="-301.8947818400279"
y2="-277.50857675558507" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="737.0099091813076" x2="712.6237040968649" y1="-301.8947818400279"
y2="-277.50857675558507" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="225.00990918130768" x2="200.62370409686488" y1="-45.89478184002789"
y2="-21.508576755585096" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="481.00990918130765" x2="456.6237040968649" y1="-45.89478184002789"
y2="-21.508576755585096" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="737.0099091813076" x2="712.6237040968649" y1="-45.89478184002789"
y2="-21.508576755585096" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="225.00990918130768" x2="200.62370409686488" y1="210.1052181599721"
y2="234.4914232444149" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="481.00990918130765" x2="456.6237040968649" y1="210.1052181599721"
y2="234.4914232444149" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="737.0099091813076" x2="712.6237040968649" y1="210.1052181599721"
y2="234.4914232444149" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="171.55017713954658" x2="102.05334080042758" y1="78.55895711807653"
y2="148.05579345719553" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="171.55017713954658" x2="102.05334080042758" y1="-433.44104288192347"
y2="-363.94420654280447" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="427.5501771395466" x2="358.0533408004276" y1="-433.44104288192347"
y2="-363.94420654280447" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="683.5501771395466" x2="614.0533408004276" y1="-433.44104288192347"
y2="-363.94420654280447" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="171.55017713954658" x2="102.05334080042758" y1="-177.44104288192347"
y2="-107.94420654280447" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="427.5501771395466" x2="358.0533408004276" y1="-177.44104288192347"
y2="-107.94420654280447" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="683.5501771395466" x2="614.0533408004276" y1="-177.44104288192347"
y2="-107.94420654280447" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="171.55017713954658" x2="102.05334080042758" y1="78.55895711807653"
y2="148.05579345719553" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="427.5501771395466" x2="358.0533408004276" y1="78.55895711807653"
y2="148.05579345719553" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="683.5501771395466" x2="614.0533408004276" y1="78.55895711807653"
y2="148.05579345719553" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="258.4358284744095" x2="228.09906783279462" y1="10.646186924515469"
y2="40.98294756613034" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="258.4358284744095" x2="228.09906783279462" y1="-501.35381307548454"
y2="-471.01705243386965" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="514.4358284744095" x2="484.0990678327946" y1="-501.35381307548454"
y2="-471.01705243386965" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="770.4358284744095" x2="740.0990678327946" y1="-501.35381307548454"
y2="-471.01705243386965" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="258.4358284744095" x2="228.09906783279462" y1="-245.35381307548454"
y2="-215.01705243386965" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="514.4358284744095" x2="484.0990678327946" y1="-245.35381307548454"
y2="-215.01705243386965" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="770.4358284744095" x2="740.0990678327946" y1="-245.35381307548454"
y2="-215.01705243386965" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="258.4358284744095" x2="228.09906783279462" y1="10.646186924515469"
y2="40.98294756613034" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="514.4358284744095" x2="484.0990678327946" y1="10.646186924515469"
y2="40.98294756613034" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="770.4358284744095" x2="740.0990678327946" y1="10.646186924515469"
y2="40.98294756613034" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="2.4358284744095045" x2="-27.900932167205383" y1="10.646186924515469"
y2="40.98294756613034" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="35.41624886616098" x2="-5.966808810922494" y1="10.151780697595989"
y2="51.53483837467946" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="35.41624886616098" x2="-5.966808810922494" y1="-501.848219302404"
y2="-460.46516162532055" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="291.41624886616097" x2="250.0331911890775" y1="-501.848219302404"
y2="-460.46516162532055" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="547.416248866161" x2="506.0331911890775" y1="-501.848219302404"
y2="-460.46516162532055" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="35.41624886616098" x2="-5.966808810922494" y1="-245.848219302404"
y2="-204.46516162532055" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="291.41624886616097" x2="250.0331911890775" y1="-245.848219302404"
y2="-204.46516162532055" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="547.416248866161" x2="506.0331911890775" y1="-245.848219302404"
y2="-204.46516162532055" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="35.41624886616098" x2="-5.966808810922494" y1="10.151780697595989"
y2="51.53483837467946" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="291.41624886616097" x2="250.0331911890775" y1="10.151780697595989"
y2="51.53483837467946" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="547.416248866161" x2="506.0331911890775" y1="10.151780697595989"
y2="51.53483837467946" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="90.76285286976488" x2="72.92514980496989" y1="79.79001478147771"
y2="97.6277178462727" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="90.76285286976488" x2="72.92514980496989" y1="-432.2099852185223"
y2="-414.37228215372727" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="346.76285286976486" x2="328.9251498049699" y1="-432.2099852185223"
y2="-414.37228215372727" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="602.7628528697649" x2="584.9251498049699" y1="-432.2099852185223"
y2="-414.37228215372727" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="90.76285286976488" x2="72.92514980496989" y1="-176.2099852185223"
y2="-158.3722821537273" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="346.76285286976486" x2="328.9251498049699" y1="-176.2099852185223"
y2="-158.3722821537273" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="602.7628528697649" x2="584.9251498049699" y1="-176.2099852185223"
y2="-158.3722821537273" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="90.76285286976488" x2="72.92514980496989" y1="79.79001478147771"
y2="97.6277178462727" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="346.76285286976486" x2="328.9251498049699" y1="79.79001478147771"
y2="97.6277178462727" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="602.7628528697649" x2="584.9251498049699" y1="79.79001478147771"
y2="97.6277178462727" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<animateTransform attributeName="transform" type="translate" values="0 0;-256 256"
keyTimes="0;1" repeatCount="indefinite" dur="5s"></animateTransform>
</g>
<g>
<line x1="93.6896305353637" x2="75.71575147590588" y1="83.83758835275793"
y2="101.81146741221576" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="93.6896305353637" x2="75.71575147590588" y1="-428.16241164724204"
y2="-410.18853258778427" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="349.6896305353637" x2="331.7157514759059" y1="-428.16241164724204"
y2="-410.18853258778427" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="605.6896305353637" x2="587.7157514759059" y1="-428.16241164724204"
y2="-410.18853258778427" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="93.6896305353637" x2="75.71575147590588" y1="-172.16241164724207"
y2="-154.18853258778424" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="349.6896305353637" x2="331.7157514759059" y1="-172.16241164724207"
y2="-154.18853258778424" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="605.6896305353637" x2="587.7157514759059" y1="-172.16241164724207"
y2="-154.18853258778424" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="93.6896305353637" x2="75.71575147590588" y1="83.83758835275793"
y2="101.81146741221576" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="349.6896305353637" x2="331.7157514759059" y1="83.83758835275793"
y2="101.81146741221576" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="605.6896305353637" x2="587.7157514759059" y1="83.83758835275793"
y2="101.81146741221576" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="207.24941141296466" x2="167.48134532138562" y1="234.55973050121918"
y2="274.3277965927982" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="207.24941141296466" x2="167.48134532138562" y1="-277.4402694987808"
y2="-237.67220340720178" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="463.24941141296466" x2="423.4813453213856" y1="-277.4402694987808"
y2="-237.67220340720178" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="719.2494114129647" x2="679.4813453213856" y1="-277.4402694987808"
y2="-237.67220340720178" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="207.24941141296466" x2="167.48134532138562" y1="-21.440269498780822"
y2="18.327796592798222" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="463.24941141296466" x2="423.4813453213856" y1="-21.440269498780822"
y2="18.327796592798222" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="719.2494114129647" x2="679.4813453213856" y1="-21.440269498780822"
y2="18.327796592798222" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="207.24941141296466" x2="167.48134532138562" y1="234.55973050121918"
y2="274.3277965927982" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="463.24941141296466" x2="423.4813453213856" y1="234.55973050121918"
y2="274.3277965927982" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="719.2494114129647" x2="679.4813453213856" y1="234.55973050121918"
y2="274.3277965927982" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="69.19671201083756" x2="20.15599089926107" y1="61.52941038272999"
y2="110.57013149430648" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="69.19671201083756" x2="20.15599089926107" y1="-450.47058961727"
y2="-401.42986850569355" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="325.1967120108376" x2="276.15599089926104" y1="-450.47058961727"
y2="-401.42986850569355" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="581.1967120108376" x2="532.155990899261" y1="-450.47058961727"
y2="-401.42986850569355" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="69.19671201083756" x2="20.15599089926107" y1="-194.47058961727"
y2="-145.42986850569352" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="325.1967120108376" x2="276.15599089926104" y1="-194.47058961727"
y2="-145.42986850569352" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="581.1967120108376" x2="532.155990899261" y1="-194.47058961727"
y2="-145.42986850569352" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="69.19671201083756" x2="20.15599089926107" y1="61.52941038272999"
y2="110.57013149430648" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="325.1967120108376" x2="276.15599089926104" y1="61.52941038272999"
y2="110.57013149430648" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="581.1967120108376" x2="532.155990899261" y1="61.52941038272999"
y2="110.57013149430648" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="153.36870174443493" x2="103.52218176454608" y1="129.93915864820679"
y2="179.78567862809564" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="153.36870174443493" x2="103.52218176454608" y1="-382.0608413517932"
y2="-332.21432137190436" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="409.36870174443493" x2="359.5221817645461" y1="-382.0608413517932"
y2="-332.21432137190436" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="665.3687017444349" x2="615.5221817645461" y1="-382.0608413517932"
y2="-332.21432137190436" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="153.36870174443493" x2="103.52218176454608" y1="-126.06084135179321"
y2="-76.21432137190436" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="409.36870174443493" x2="359.5221817645461" y1="-126.06084135179321"
y2="-76.21432137190436" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="665.3687017444349" x2="615.5221817645461" y1="-126.06084135179321"
y2="-76.21432137190436" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="153.36870174443493" x2="103.52218176454608" y1="129.93915864820679"
y2="179.78567862809564" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="409.36870174443493" x2="359.5221817645461" y1="129.93915864820679"
y2="179.78567862809564" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="665.3687017444349" x2="615.5221817645461" y1="129.93915864820679"
y2="179.78567862809564" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="49.20494471467643" x2="2.7142059537850685" y1="141.75997600855746"
y2="188.25071476944882" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="49.20494471467643" x2="2.7142059537850685" y1="-370.2400239914425"
y2="-323.7492852305512" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="305.20494471467646" x2="258.71420595378504" y1="-370.2400239914425"
y2="-323.7492852305512" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="561.2049447146765" x2="514.714205953785" y1="-370.2400239914425"
y2="-323.7492852305512" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="49.20494471467643" x2="2.7142059537850685" y1="-114.24002399144254"
y2="-67.74928523055118" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="305.20494471467646" x2="258.71420595378504" y1="-114.24002399144254"
y2="-67.74928523055118" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="561.2049447146765" x2="514.714205953785" y1="-114.24002399144254"
y2="-67.74928523055118" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="49.20494471467643" x2="2.7142059537850685" y1="141.75997600855746"
y2="188.25071476944882" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="305.20494471467646" x2="258.71420595378504" y1="141.75997600855746"
y2="188.25071476944882" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="561.2049447146765" x2="514.714205953785" y1="141.75997600855746"
y2="188.25071476944882" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="84.6808460539986" x2="32.68305955000314" y1="-7.711036017440037"
y2="44.28675048655542" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="84.6808460539986" x2="32.68305955000314" y1="-519.71103601744"
y2="-467.71324951344457" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="340.6808460539986" x2="288.6830595500031" y1="-519.71103601744"
y2="-467.71324951344457" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="596.6808460539986" x2="544.6830595500031" y1="-519.71103601744"
y2="-467.71324951344457" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="84.6808460539986" x2="32.68305955000314" y1="-263.71103601744005"
y2="-211.71324951344457" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="340.6808460539986" x2="288.6830595500031" y1="-263.71103601744005"
y2="-211.71324951344457" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="596.6808460539986" x2="544.6830595500031" y1="-263.71103601744005"
y2="-211.71324951344457" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="84.6808460539986" x2="32.68305955000314" y1="-7.711036017440037"
y2="44.28675048655542" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="340.6808460539986" x2="288.6830595500031" y1="-7.711036017440037"
y2="44.28675048655542" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="596.6808460539986" x2="544.6830595500031" y1="-7.711036017440037"
y2="44.28675048655542" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="84.6808460539986" x2="32.68305955000314" y1="248.28896398255995"
y2="300.28675048655543" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="225.38342310559023" x2="185.66602314192056" y1="109.68961591653738"
y2="149.40701588020704" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="225.38342310559023" x2="185.66602314192056" y1="-402.3103840834626"
y2="-362.59298411979296" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="481.3834231055902" x2="441.66602314192056" y1="-402.3103840834626"
y2="-362.59298411979296" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="737.3834231055903" x2="697.6660231419205" y1="-402.3103840834626"
y2="-362.59298411979296" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="225.38342310559023" x2="185.66602314192056" y1="-146.31038408346262"
y2="-106.59298411979296" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="481.3834231055902" x2="441.66602314192056" y1="-146.31038408346262"
y2="-106.59298411979296" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="737.3834231055903" x2="697.6660231419205" y1="-146.31038408346262"
y2="-106.59298411979296" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="225.38342310559023" x2="185.66602314192056" y1="109.68961591653738"
y2="149.40701588020704" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="481.3834231055902" x2="441.66602314192056" y1="109.68961591653738"
y2="149.40701588020704" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="737.3834231055903" x2="697.6660231419205" y1="109.68961591653738"
y2="149.40701588020704" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="172.83662370669697" x2="103.52581079778793" y1="164.45975635392284"
y2="233.77056926283188" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="172.83662370669697" x2="103.52581079778793" y1="-347.54024364607716"
y2="-278.2294307371681" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="428.83662370669697" x2="359.5258107977879" y1="-347.54024364607716"
y2="-278.2294307371681" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="684.836623706697" x2="615.5258107977879" y1="-347.54024364607716"
y2="-278.2294307371681" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="172.83662370669697" x2="103.52581079778793" y1="-91.54024364607716"
y2="-22.229430737168116" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="428.83662370669697" x2="359.5258107977879" y1="-91.54024364607716"
y2="-22.229430737168116" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="684.836623706697" x2="615.5258107977879" y1="-91.54024364607716"
y2="-22.229430737168116" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="172.83662370669697" x2="103.52581079778793" y1="164.45975635392284"
y2="233.77056926283188" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="428.83662370669697" x2="359.5258107977879" y1="164.45975635392284"
y2="233.77056926283188" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="684.836623706697" x2="615.5258107977879" y1="164.45975635392284"
y2="233.77056926283188" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="254.85435949520382" x2="240.10841684705935" y1="-1.209429949430282"
y2="13.536512698714214" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="254.85435949520382" x2="240.10841684705935" y1="-513.2094299494303"
y2="-498.4634873012858" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="510.8543594952038" x2="496.10841684705935" y1="-513.2094299494303"
y2="-498.4634873012858" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="766.8543594952039" x2="752.1084168470593" y1="-513.2094299494303"
y2="-498.4634873012858" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="254.85435949520382" x2="240.10841684705935" y1="-257.2094299494303"
y2="-242.4634873012858" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="510.8543594952038" x2="496.10841684705935" y1="-257.2094299494303"
y2="-242.4634873012858" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="766.8543594952039" x2="752.1084168470593" y1="-257.2094299494303"
y2="-242.4634873012858" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="254.85435949520382" x2="240.10841684705935" y1="-1.209429949430282"
y2="13.536512698714214" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="510.8543594952038" x2="496.10841684705935" y1="-1.209429949430282"
y2="13.536512698714214" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="766.8543594952039" x2="752.1084168470593" y1="-1.209429949430282"
y2="13.536512698714214" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="254.85435949520382" x2="240.10841684705935" y1="254.79057005056973"
y2="269.5365126987142" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<animateTransform attributeName="transform" type="translate" values="0 0;-256 256"
keyTimes="0;1" repeatCount="indefinite" dur="10.3333333333333335s"></animateTransform>
</g>
</g>
</pattern>
</defs>
<rect x="0" y="0" width="1084" height="322" fill="url(#pid-0.7735807359934106)"></rect>
</svg>

View file

@ -0,0 +1,516 @@
<svg height="100%" xmlns="http://www.w3.org/2000/svg" version="1.1"
xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.dev/svgjs"
viewBox="0 0 600 600">
<rect width="600" height="600" fill="transparent"></rect>
<mask id="mask" mask-type="alpha" maskUnits="userSpaceOnUse">
<rect transform="translate(0, 0)" width="600" height="600" fill="white"></rect>
</mask>
<svg>
<rect transform="translate(0, 0)" fill="#ade8f4" width="60" height="60"></rect>
<rect transform="translate(0, 0)" fill="#90e0ef" x="15" y="15" width="30" height="30"></rect>
</svg>
<svg>
<rect transform="translate(0, 60)" fill="#90e0ef" width="60" height="60"></rect>
<path transform="translate(0, 60) translate(30,30) rotate(180) translate(-30,-30)"
fill="#00b4d8" d="M60 0H0v60L60 0z"></path>
</svg>
<svg>
<rect transform="translate(0, 120)" fill="#00b4d8" width="60" height="60"></rect>
<rect transform="translate(0, 120)" fill="#48cae4" x="15" y="15" width="30" height="30"></rect>
</svg>
<svg>
<rect transform="translate(0, 180)" fill="#ade8f4" width="60" height="60"></rect>
<path transform="translate(0, 180) translate(30,30) rotate(0) translate(-30,-30)"
fill="#0096c7" d="M60 0H0v60L60 0z"></path>
<rect transform="translate(0, 180)" fill="#03045e" x="15" y="15" width="30" height="30"></rect>
</svg>
<svg>
<rect transform="translate(0, 240)" fill="#0077b6" width="60" height="60"></rect>
<path transform="translate(0, 240) translate(30,30) rotate(270) translate(-30,-30)"
fill="#90e0ef" d="M60 0H0v60L60 0z"></path>
<rect transform="translate(0, 240)" fill="#ade8f4" x="15" y="15" width="30" height="30"></rect>
</svg>
<svg>
<rect transform="translate(0, 300)" fill="#ade8f4" width="60" height="60"></rect>
<path transform="translate(0, 300) translate(30,30) rotate(270) translate(-30,-30)"
fill="#0096c7" d="M60 0H0v60L60 0z"></path>
</svg>
<svg>
<rect transform="translate(0, 360)" fill="#0096c7" width="60" height="60"></rect>
<path transform="translate(0, 360) translate(30,30) rotate(270) translate(-30,-30)"
fill="#ade8f4" d="M60 0H0v60L60 0z"></path>
<rect transform="translate(0, 360)" fill="#023e8a" x="15" y="15" width="30" height="30"></rect>
</svg>
<svg>
<rect transform="translate(0, 420)" fill="#0077b6" width="60" height="60"></rect>
<path transform="translate(0, 420) translate(30,30) rotate(90) translate(-30,-30)"
fill="#00b4d8" d="M60 0H0v60L60 0z"></path>
<rect transform="translate(0, 420)" fill="#48cae4" x="15" y="15" width="30" height="30"></rect>
</svg>
<svg>
<rect transform="translate(0, 480)" fill="#ade8f4" width="60" height="60"></rect>
<rect transform="translate(0, 480)" fill="#00b4d8" x="15" y="15" width="30" height="30"></rect>
</svg>
<svg>
<rect transform="translate(0, 540)" fill="#00b4d8" width="60" height="60"></rect>
<path transform="translate(0, 540) translate(30,30) rotate(90) translate(-30,-30)"
fill="#ade8f4" d="M60 0H0v60L60 0z"></path>
<rect transform="translate(0, 540)" fill="#48cae4" x="15" y="15" width="30" height="30"></rect>
</svg>
<svg>
<rect transform="translate(60, 0)" fill="#0096c7" width="60" height="60"></rect>
<path transform="translate(60, 0) translate(30,30) rotate(0) translate(-30,-30)"
fill="#023e8a" d="M60 0H0v60L60 0z"></path>
</svg>
<svg>
<rect transform="translate(60, 60)" fill="#48cae4" width="60" height="60"></rect>
<path transform="translate(60, 60) translate(30,30) rotate(0) translate(-30,-30)"
fill="#ade8f4" d="M60 0H0v60L60 0z"></path>
<rect transform="translate(60, 60)" fill="#caf0f8" x="15" y="15" width="30" height="30"></rect>
</svg>
<svg>
<rect transform="translate(60, 120)" fill="#ade8f4" width="60" height="60"></rect>
<path transform="translate(60, 120) translate(30,30) rotate(90) translate(-30,-30)"
fill="#90e0ef" d="M60 0H0v60L60 0z"></path>
</svg>
<svg>
<rect transform="translate(60, 180)" fill="#023e8a" width="60" height="60"></rect>
<path transform="translate(60, 180) translate(30,30) rotate(90) translate(-30,-30)"
fill="#00b4d8" d="M60 0H0v60L60 0z"></path>
</svg>
<svg>
<rect transform="translate(60, 240)" fill="#023e8a" width="60" height="60"></rect>
<path transform="translate(60, 240) translate(30,30) rotate(90) translate(-30,-30)"
fill="#0077b6" d="M60 0H0v60L60 0z"></path>
</svg>
<svg>
<rect transform="translate(60, 300)" fill="#0077b6" width="60" height="60"></rect>
<rect transform="translate(60, 300)" fill="#90e0ef" x="15" y="15" width="30" height="30"></rect>
</svg>
<svg>
<rect transform="translate(60, 360)" fill="#48cae4" width="60" height="60"></rect>
<path transform="translate(60, 360) translate(30,30) rotate(0) translate(-30,-30)"
fill="#ade8f4" d="M60 0H0v60L60 0z"></path>
<rect transform="translate(60, 360)" fill="#90e0ef" x="15" y="15" width="30" height="30"></rect>
</svg>
<svg>
<rect transform="translate(60, 420)" fill="#caf0f8" width="60" height="60"></rect>
<path transform="translate(60, 420) translate(30,30) rotate(90) translate(-30,-30)"
fill="#03045e" d="M60 0H0v60L60 0z"></path>
</svg>
<svg>
<rect transform="translate(60, 480)" fill="#48cae4" width="60" height="60"></rect>
<path transform="translate(60, 480) translate(30,30) rotate(90) translate(-30,-30)"
fill="#023e8a" d="M60 0H0v60L60 0z"></path>
<rect transform="translate(60, 480)" fill="#0077b6" x="15" y="15" width="30" height="30"></rect>
</svg>
<svg>
<rect transform="translate(60, 540)" fill="#48cae4" width="60" height="60"></rect>
<path transform="translate(60, 540) translate(30,30) rotate(0) translate(-30,-30)"
fill="#0077b6" d="M60 0H0v60L60 0z"></path>
<rect transform="translate(60, 540)" fill="#ade8f4" x="15" y="15" width="30" height="30"></rect>
</svg>
<svg>
<rect transform="translate(120, 0)" fill="#0077b6" width="60" height="60"></rect>
<path transform="translate(120, 0) translate(30,30) rotate(0) translate(-30,-30)"
fill="#00b4d8" d="M60 0H0v60L60 0z"></path>
</svg>
<svg>
<rect transform="translate(120, 60)" fill="#90e0ef" width="60" height="60"></rect>
<rect transform="translate(120, 60)" fill="#023e8a" x="15" y="15" width="30" height="30"></rect>
</svg>
<svg>
<rect transform="translate(120, 120)" fill="#0077b6" width="60" height="60"></rect>
<path transform="translate(120, 120) translate(30,30) rotate(180) translate(-30,-30)"
fill="#00b4d8" d="M60 0H0v60L60 0z"></path>
</svg>
<svg>
<rect transform="translate(120, 180)" fill="#90e0ef" width="60" height="60"></rect>
<path transform="translate(120, 180) translate(30,30) rotate(180) translate(-30,-30)"
fill="#03045e" d="M60 0H0v60L60 0z"></path>
</svg>
<svg>
<rect transform="translate(120, 240)" fill="#0096c7" width="60" height="60"></rect>
<path transform="translate(120, 240) translate(30,30) rotate(90) translate(-30,-30)"
fill="#ade8f4" d="M60 0H0v60L60 0z"></path>
</svg>
<svg>
<rect transform="translate(120, 300)" fill="#00b4d8" width="60" height="60"></rect>
<rect transform="translate(120, 300)" fill="#023e8a" x="15" y="15" width="30" height="30"></rect>
</svg>
<svg>
<rect transform="translate(120, 360)" fill="#00b4d8" width="60" height="60"></rect>
<path transform="translate(120, 360) translate(30,30) rotate(0) translate(-30,-30)"
fill="#03045e" d="M60 0H0v60L60 0z"></path>
</svg>
<svg>
<rect transform="translate(120, 420)" fill="#0096c7" width="60" height="60"></rect>
<path transform="translate(120, 420) translate(30,30) rotate(180) translate(-30,-30)"
fill="#00b4d8" d="M60 0H0v60L60 0z"></path>
</svg>
<svg>
<rect transform="translate(120, 480)" fill="#023e8a" width="60" height="60"></rect>
<path transform="translate(120, 480) translate(30,30) rotate(90) translate(-30,-30)"
fill="#48cae4" d="M60 0H0v60L60 0z"></path>
</svg>
<svg>
<rect transform="translate(120, 540)" fill="#03045e" width="60" height="60"></rect>
<path transform="translate(120, 540) translate(30,30) rotate(0) translate(-30,-30)"
fill="#90e0ef" d="M60 0H0v60L60 0z"></path>
</svg>
<svg>
<rect transform="translate(180, 0)" fill="#90e0ef" width="60" height="60"></rect>
<path transform="translate(180, 0) translate(30,30) rotate(270) translate(-30,-30)"
fill="#023e8a" d="M60 0H0v60L60 0z"></path>
<rect transform="translate(180, 0)" fill="#48cae4" x="15" y="15" width="30" height="30"></rect>
</svg>
<svg>
<rect transform="translate(180, 60)" fill="#03045e" width="60" height="60"></rect>
<rect transform="translate(180, 60)" fill="#00b4d8" x="15" y="15" width="30" height="30"></rect>
</svg>
<svg>
<rect transform="translate(180, 120)" fill="#0077b6" width="60" height="60"></rect>
<rect transform="translate(180, 120)" fill="#90e0ef" x="15" y="15" width="30" height="30"></rect>
</svg>
<svg>
<rect transform="translate(180, 180)" fill="#0096c7" width="60" height="60"></rect>
<path transform="translate(180, 180) translate(30,30) rotate(180) translate(-30,-30)"
fill="#0077b6" d="M60 0H0v60L60 0z"></path>
<rect transform="translate(180, 180)" fill="#90e0ef" x="15" y="15" width="30" height="30"></rect>
</svg>
<svg>
<rect transform="translate(180, 240)" fill="#ade8f4" width="60" height="60"></rect>
<path transform="translate(180, 240) translate(30,30) rotate(270) translate(-30,-30)"
fill="#0077b6" d="M60 0H0v60L60 0z"></path>
</svg>
<svg>
<rect transform="translate(180, 300)" fill="#023e8a" width="60" height="60"></rect>
<rect transform="translate(180, 300)" fill="#00b4d8" x="15" y="15" width="30" height="30"></rect>
</svg>
<svg>
<rect transform="translate(180, 360)" fill="#00b4d8" width="60" height="60"></rect>
<path transform="translate(180, 360) translate(30,30) rotate(180) translate(-30,-30)"
fill="#0077b6" d="M60 0H0v60L60 0z"></path>
<rect transform="translate(180, 360)" fill="#0096c7" x="15" y="15" width="30" height="30"></rect>
</svg>
<svg>
<rect transform="translate(180, 420)" fill="#023e8a" width="60" height="60"></rect>
<path transform="translate(180, 420) translate(30,30) rotate(270) translate(-30,-30)"
fill="#48cae4" d="M60 0H0v60L60 0z"></path>
</svg>
<svg>
<rect transform="translate(180, 480)" fill="#48cae4" width="60" height="60"></rect>
<path transform="translate(180, 480) translate(30,30) rotate(270) translate(-30,-30)"
fill="#ade8f4" d="M60 0H0v60L60 0z"></path>
<rect transform="translate(180, 480)" fill="#00b4d8" x="15" y="15" width="30" height="30"></rect>
</svg>
<svg>
<rect transform="translate(180, 540)" fill="#0077b6" width="60" height="60"></rect>
<path transform="translate(180, 540) translate(30,30) rotate(90) translate(-30,-30)"
fill="#00b4d8" d="M60 0H0v60L60 0z"></path>
</svg>
<svg>
<rect transform="translate(240, 0)" fill="#ade8f4" width="60" height="60"></rect>
<path transform="translate(240, 0) translate(30,30) rotate(270) translate(-30,-30)"
fill="#caf0f8" d="M60 0H0v60L60 0z"></path>
</svg>
<svg>
<rect transform="translate(240, 60)" fill="#48cae4" width="60" height="60"></rect>
<path transform="translate(240, 60) translate(30,30) rotate(180) translate(-30,-30)"
fill="#03045e" d="M60 0H0v60L60 0z"></path>
</svg>
<svg>
<rect transform="translate(240, 120)" fill="#caf0f8" width="60" height="60"></rect>
<path transform="translate(240, 120) translate(30,30) rotate(270) translate(-30,-30)"
fill="#90e0ef" d="M60 0H0v60L60 0z"></path>
<rect transform="translate(240, 120)" fill="#48cae4" x="15" y="15" width="30" height="30"></rect>
</svg>
<svg>
<rect transform="translate(240, 180)" fill="#48cae4" width="60" height="60"></rect>
<path transform="translate(240, 180) translate(30,30) rotate(0) translate(-30,-30)"
fill="#03045e" d="M60 0H0v60L60 0z"></path>
<rect transform="translate(240, 180)" fill="#00b4d8" x="15" y="15" width="30" height="30"></rect>
</svg>
<svg>
<rect transform="translate(240, 240)" fill="#48cae4" width="60" height="60"></rect>
<rect transform="translate(240, 240)" fill="#00b4d8" x="15" y="15" width="30" height="30"></rect>
</svg>
<svg>
<rect transform="translate(240, 300)" fill="#023e8a" width="60" height="60"></rect>
<path transform="translate(240, 300) translate(30,30) rotate(90) translate(-30,-30)"
fill="#90e0ef" d="M60 0H0v60L60 0z"></path>
<rect transform="translate(240, 300)" fill="#0077b6" x="15" y="15" width="30" height="30"></rect>
</svg>
<svg>
<rect transform="translate(240, 360)" fill="#48cae4" width="60" height="60"></rect>
<path transform="translate(240, 360) translate(30,30) rotate(270) translate(-30,-30)"
fill="#caf0f8" d="M60 0H0v60L60 0z"></path>
</svg>
<svg>
<rect transform="translate(240, 420)" fill="#90e0ef" width="60" height="60"></rect>
<path transform="translate(240, 420) translate(30,30) rotate(90) translate(-30,-30)"
fill="#ade8f4" d="M60 0H0v60L60 0z"></path>
<rect transform="translate(240, 420)" fill="#00b4d8" x="15" y="15" width="30" height="30"></rect>
</svg>
<svg>
<rect transform="translate(240, 480)" fill="#03045e" width="60" height="60"></rect>
<rect transform="translate(240, 480)" fill="#0096c7" x="15" y="15" width="30" height="30"></rect>
</svg>
<svg>
<rect transform="translate(240, 540)" fill="#ade8f4" width="60" height="60"></rect>
<rect transform="translate(240, 540)" fill="#90e0ef" x="15" y="15" width="30" height="30"></rect>
</svg>
<svg>
<rect transform="translate(300, 0)" fill="#0096c7" width="60" height="60"></rect>
<rect transform="translate(300, 0)" fill="#00b4d8" x="15" y="15" width="30" height="30"></rect>
</svg>
<svg>
<rect transform="translate(300, 60)" fill="#023e8a" width="60" height="60"></rect>
<path transform="translate(300, 60) translate(30,30) rotate(270) translate(-30,-30)"
fill="#03045e" d="M60 0H0v60L60 0z"></path>
<rect transform="translate(300, 60)" fill="#00b4d8" x="15" y="15" width="30" height="30"></rect>
</svg>
<svg>
<rect transform="translate(300, 120)" fill="#0096c7" width="60" height="60"></rect>
<path transform="translate(300, 120) translate(30,30) rotate(0) translate(-30,-30)"
fill="#00b4d8" d="M60 0H0v60L60 0z"></path>
</svg>
<svg>
<rect transform="translate(300, 180)" fill="#03045e" width="60" height="60"></rect>
<path transform="translate(300, 180) translate(30,30) rotate(90) translate(-30,-30)"
fill="#0096c7" d="M60 0H0v60L60 0z"></path>
<rect transform="translate(300, 180)" fill="#90e0ef" x="15" y="15" width="30" height="30"></rect>
</svg>
<svg>
<rect transform="translate(300, 240)" fill="#ade8f4" width="60" height="60"></rect>
<path transform="translate(300, 240) translate(30,30) rotate(270) translate(-30,-30)"
fill="#023e8a" d="M60 0H0v60L60 0z"></path>
</svg>
<svg>
<rect transform="translate(300, 300)" fill="#03045e" width="60" height="60"></rect>
<path transform="translate(300, 300) translate(30,30) rotate(0) translate(-30,-30)"
fill="#00b4d8" d="M60 0H0v60L60 0z"></path>
<rect transform="translate(300, 300)" fill="#0096c7" x="15" y="15" width="30" height="30"></rect>
</svg>
<svg>
<rect transform="translate(300, 360)" fill="#caf0f8" width="60" height="60"></rect>
<path transform="translate(300, 360) translate(30,30) rotate(180) translate(-30,-30)"
fill="#023e8a" d="M60 0H0v60L60 0z"></path>
<rect transform="translate(300, 360)" fill="#ade8f4" x="15" y="15" width="30" height="30"></rect>
</svg>
<svg>
<rect transform="translate(300, 420)" fill="#0096c7" width="60" height="60"></rect>
<path transform="translate(300, 420) translate(30,30) rotate(0) translate(-30,-30)"
fill="#ade8f4" d="M60 0H0v60L60 0z"></path>
</svg>
<svg>
<rect transform="translate(300, 480)" fill="#00b4d8" width="60" height="60"></rect>
<rect transform="translate(300, 480)" fill="#48cae4" x="15" y="15" width="30" height="30"></rect>
</svg>
<svg>
<rect transform="translate(300, 540)" fill="#48cae4" width="60" height="60"></rect>
<path transform="translate(300, 540) translate(30,30) rotate(0) translate(-30,-30)"
fill="#ade8f4" d="M60 0H0v60L60 0z"></path>
</svg>
<svg>
<rect transform="translate(360, 0)" fill="#03045e" width="60" height="60"></rect>
<path transform="translate(360, 0) translate(30,30) rotate(180) translate(-30,-30)"
fill="#023e8a" d="M60 0H0v60L60 0z"></path>
<rect transform="translate(360, 0)" fill="#90e0ef" x="15" y="15" width="30" height="30"></rect>
</svg>
<svg>
<rect transform="translate(360, 60)" fill="#0096c7" width="60" height="60"></rect>
<path transform="translate(360, 60) translate(30,30) rotate(90) translate(-30,-30)"
fill="#00b4d8" d="M60 0H0v60L60 0z"></path>
</svg>
<svg>
<rect transform="translate(360, 120)" fill="#0077b6" width="60" height="60"></rect>
<path transform="translate(360, 120) translate(30,30) rotate(180) translate(-30,-30)"
fill="#00b4d8" d="M60 0H0v60L60 0z"></path>
</svg>
<svg>
<rect transform="translate(360, 180)" fill="#00b4d8" width="60" height="60"></rect>
<path transform="translate(360, 180) translate(30,30) rotate(0) translate(-30,-30)"
fill="#48cae4" d="M60 0H0v60L60 0z"></path>
<rect transform="translate(360, 180)" fill="#ade8f4" x="15" y="15" width="30" height="30"></rect>
</svg>
<svg>
<rect transform="translate(360, 240)" fill="#90e0ef" width="60" height="60"></rect>
<path transform="translate(360, 240) translate(30,30) rotate(270) translate(-30,-30)"
fill="#0077b6" d="M60 0H0v60L60 0z"></path>
</svg>
<svg>
<rect transform="translate(360, 300)" fill="#0077b6" width="60" height="60"></rect>
<path transform="translate(360, 300) translate(30,30) rotate(90) translate(-30,-30)"
fill="#03045e" d="M60 0H0v60L60 0z"></path>
<rect transform="translate(360, 300)" fill="#00b4d8" x="15" y="15" width="30" height="30"></rect>
</svg>
<svg>
<rect transform="translate(360, 360)" fill="#0096c7" width="60" height="60"></rect>
<path transform="translate(360, 360) translate(30,30) rotate(0) translate(-30,-30)"
fill="#90e0ef" d="M60 0H0v60L60 0z"></path>
</svg>
<svg>
<rect transform="translate(360, 420)" fill="#0096c7" width="60" height="60"></rect>
<path transform="translate(360, 420) translate(30,30) rotate(270) translate(-30,-30)"
fill="#90e0ef" d="M60 0H0v60L60 0z"></path>
</svg>
<svg>
<rect transform="translate(360, 480)" fill="#0077b6" width="60" height="60"></rect>
<rect transform="translate(360, 480)" fill="#023e8a" x="15" y="15" width="30" height="30"></rect>
</svg>
<svg>
<rect transform="translate(360, 540)" fill="#ade8f4" width="60" height="60"></rect>
<path transform="translate(360, 540) translate(30,30) rotate(90) translate(-30,-30)"
fill="#90e0ef" d="M60 0H0v60L60 0z"></path>
</svg>
<svg>
<rect transform="translate(420, 0)" fill="#00b4d8" width="60" height="60"></rect>
<path transform="translate(420, 0) translate(30,30) rotate(0) translate(-30,-30)"
fill="#48cae4" d="M60 0H0v60L60 0z"></path>
</svg>
<svg>
<rect transform="translate(420, 60)" fill="#ade8f4" width="60" height="60"></rect>
<path transform="translate(420, 60) translate(30,30) rotate(270) translate(-30,-30)"
fill="#0096c7" d="M60 0H0v60L60 0z"></path>
</svg>
<svg>
<rect transform="translate(420, 120)" fill="#0096c7" width="60" height="60"></rect>
<path transform="translate(420, 120) translate(30,30) rotate(180) translate(-30,-30)"
fill="#48cae4" d="M60 0H0v60L60 0z"></path>
<rect transform="translate(420, 120)" fill="#00b4d8" x="15" y="15" width="30" height="30"></rect>
</svg>
<svg>
<rect transform="translate(420, 180)" fill="#00b4d8" width="60" height="60"></rect>
<rect transform="translate(420, 180)" fill="#ade8f4" x="15" y="15" width="30" height="30"></rect>
</svg>
<svg>
<rect transform="translate(420, 240)" fill="#0096c7" width="60" height="60"></rect>
<path transform="translate(420, 240) translate(30,30) rotate(90) translate(-30,-30)"
fill="#90e0ef" d="M60 0H0v60L60 0z"></path>
</svg>
<svg>
<rect transform="translate(420, 300)" fill="#caf0f8" width="60" height="60"></rect>
<path transform="translate(420, 300) translate(30,30) rotate(90) translate(-30,-30)"
fill="#90e0ef" d="M60 0H0v60L60 0z"></path>
<rect transform="translate(420, 300)" fill="#023e8a" x="15" y="15" width="30" height="30"></rect>
</svg>
<svg>
<rect transform="translate(420, 360)" fill="#48cae4" width="60" height="60"></rect>
<path transform="translate(420, 360) translate(30,30) rotate(90) translate(-30,-30)"
fill="#03045e" d="M60 0H0v60L60 0z"></path>
</svg>
<svg>
<rect transform="translate(420, 420)" fill="#023e8a" width="60" height="60"></rect>
<path transform="translate(420, 420) translate(30,30) rotate(0) translate(-30,-30)"
fill="#ade8f4" d="M60 0H0v60L60 0z"></path>
</svg>
<svg>
<rect transform="translate(420, 480)" fill="#00b4d8" width="60" height="60"></rect>
<path transform="translate(420, 480) translate(30,30) rotate(0) translate(-30,-30)"
fill="#caf0f8" d="M60 0H0v60L60 0z"></path>
<rect transform="translate(420, 480)" fill="#023e8a" x="15" y="15" width="30" height="30"></rect>
</svg>
<svg>
<rect transform="translate(420, 540)" fill="#48cae4" width="60" height="60"></rect>
<path transform="translate(420, 540) translate(30,30) rotate(180) translate(-30,-30)"
fill="#caf0f8" d="M60 0H0v60L60 0z"></path>
<rect transform="translate(420, 540)" fill="#0096c7" x="15" y="15" width="30" height="30"></rect>
</svg>
<svg>
<rect transform="translate(480, 0)" fill="#caf0f8" width="60" height="60"></rect>
<path transform="translate(480, 0) translate(30,30) rotate(0) translate(-30,-30)"
fill="#ade8f4" d="M60 0H0v60L60 0z"></path>
<rect transform="translate(480, 0)" fill="#0096c7" x="15" y="15" width="30" height="30"></rect>
</svg>
<svg>
<rect transform="translate(480, 60)" fill="#ade8f4" width="60" height="60"></rect>
<path transform="translate(480, 60) translate(30,30) rotate(90) translate(-30,-30)"
fill="#90e0ef" d="M60 0H0v60L60 0z"></path>
</svg>
<svg>
<rect transform="translate(480, 120)" fill="#0096c7" width="60" height="60"></rect>
<path transform="translate(480, 120) translate(30,30) rotate(90) translate(-30,-30)"
fill="#023e8a" d="M60 0H0v60L60 0z"></path>
<rect transform="translate(480, 120)" fill="#48cae4" x="15" y="15" width="30" height="30"></rect>
</svg>
<svg>
<rect transform="translate(480, 180)" fill="#023e8a" width="60" height="60"></rect>
<rect transform="translate(480, 180)" fill="#90e0ef" x="15" y="15" width="30" height="30"></rect>
</svg>
<svg>
<rect transform="translate(480, 240)" fill="#00b4d8" width="60" height="60"></rect>
<path transform="translate(480, 240) translate(30,30) rotate(270) translate(-30,-30)"
fill="#caf0f8" d="M60 0H0v60L60 0z"></path>
</svg>
<svg>
<rect transform="translate(480, 300)" fill="#90e0ef" width="60" height="60"></rect>
<path transform="translate(480, 300) translate(30,30) rotate(0) translate(-30,-30)"
fill="#023e8a" d="M60 0H0v60L60 0z"></path>
</svg>
<svg>
<rect transform="translate(480, 360)" fill="#48cae4" width="60" height="60"></rect>
<rect transform="translate(480, 360)" fill="#0096c7" x="15" y="15" width="30" height="30"></rect>
</svg>
<svg>
<rect transform="translate(480, 420)" fill="#caf0f8" width="60" height="60"></rect>
<path transform="translate(480, 420) translate(30,30) rotate(0) translate(-30,-30)"
fill="#90e0ef" d="M60 0H0v60L60 0z"></path>
<rect transform="translate(480, 420)" fill="#023e8a" x="15" y="15" width="30" height="30"></rect>
</svg>
<svg>
<rect transform="translate(480, 480)" fill="#0096c7" width="60" height="60"></rect>
<rect transform="translate(480, 480)" fill="#ade8f4" x="15" y="15" width="30" height="30"></rect>
</svg>
<svg>
<rect transform="translate(480, 540)" fill="#0077b6" width="60" height="60"></rect>
<rect transform="translate(480, 540)" fill="#00b4d8" x="15" y="15" width="30" height="30"></rect>
</svg>
<svg>
<rect transform="translate(540, 0)" fill="#0096c7" width="60" height="60"></rect>
<path transform="translate(540, 0) translate(30,30) rotate(270) translate(-30,-30)"
fill="#ade8f4" d="M60 0H0v60L60 0z"></path>
</svg>
<svg>
<rect transform="translate(540, 60)" fill="#03045e" width="60" height="60"></rect>
<path transform="translate(540, 60) translate(30,30) rotate(180) translate(-30,-30)"
fill="#ade8f4" d="M60 0H0v60L60 0z"></path>
<rect transform="translate(540, 60)" fill="#0077b6" x="15" y="15" width="30" height="30"></rect>
</svg>
<svg>
<rect transform="translate(540, 120)" fill="#90e0ef" width="60" height="60"></rect>
<rect transform="translate(540, 120)" fill="#48cae4" x="15" y="15" width="30" height="30"></rect>
</svg>
<svg>
<rect transform="translate(540, 180)" fill="#ade8f4" width="60" height="60"></rect>
<rect transform="translate(540, 180)" fill="#0096c7" x="15" y="15" width="30" height="30"></rect>
</svg>
<svg>
<rect transform="translate(540, 240)" fill="#03045e" width="60" height="60"></rect>
<path transform="translate(540, 240) translate(30,30) rotate(270) translate(-30,-30)"
fill="#0096c7" d="M60 0H0v60L60 0z"></path>
</svg>
<svg>
<rect transform="translate(540, 300)" fill="#00b4d8" width="60" height="60"></rect>
<rect transform="translate(540, 300)" fill="#0077b6" x="15" y="15" width="30" height="30"></rect>
</svg>
<svg>
<rect transform="translate(540, 360)" fill="#03045e" width="60" height="60"></rect>
<path transform="translate(540, 360) translate(30,30) rotate(90) translate(-30,-30)"
fill="#caf0f8" d="M60 0H0v60L60 0z"></path>
<rect transform="translate(540, 360)" fill="#90e0ef" x="15" y="15" width="30" height="30"></rect>
</svg>
<svg>
<rect transform="translate(540, 420)" fill="#ade8f4" width="60" height="60"></rect>
<path transform="translate(540, 420) translate(30,30) rotate(180) translate(-30,-30)"
fill="#0096c7" d="M60 0H0v60L60 0z"></path>
</svg>
<svg>
<rect transform="translate(540, 480)" fill="#0077b6" width="60" height="60"></rect>
<rect transform="translate(540, 480)" fill="#ade8f4" x="15" y="15" width="30" height="30"></rect>
</svg>
<svg>
<rect transform="translate(540, 540)" fill="#48cae4" width="60" height="60"></rect>
<rect transform="translate(540, 540)" fill="#0077b6" x="15" y="15" width="30" height="30"></rect>
</svg>
</svg>

After

Width:  |  Height:  |  Size: 28 KiB

View file

@ -0,0 +1,276 @@
---
title: "Per iniziare"
weight: 3
draft: false
description: "Tutte le variabili del front matter sono disponibili in Blowfish."
slug: "per-iniziare"
tags: ["installazione", "documenti"]
series: ["Documentazione"]
series_order: 3
---
{{< alert >}}
Questa sezione presuppone che tu abbia già [installato il tema Blowfish]({{< ref "docs/installation" >}}).
{{< /alert >}}
</br>
{{< alert "fire" >}}
Abbiamo appena lanciato uno strumento CLI per aiutarvi a iniziare con Blowfish. Vi aiuterà con l'installazione e la configurazione. Installate lo strumento CLI a livello globale utilizzando:
```bash
npx blowfish-tools
```
{{< /alert >}}
I file di configurazione forniti con Blowfish contengono tutte le possibili impostazioni riconosciute dal tema. Per impostazione predefinita, molti di questi sono commentati ma puoi semplicemente decommentarli per attivare o modificare una funzionalità specifica.
## Configurazione di base
Prima di creare qualsiasi contenuto, è necessario impostare alcune cose per una nuova installazione. Iniziando dal file `config.toml`, imposta i parametri `baseURL` e `lingualCode`. Il `lingualCode` dovrebbe essere impostato sulla lingua principale che utilizzerai per creare i tuoi contenuti.
=======
```toml
# config/_default/hugo.toml
baseURL = "https://your_domain.com/"
languageCode = "en"
```
Il passo successivo è configurare le impostazioni della lingua. Sebbene Blowfish supporti le configurazioni multilingue, per ora basta configurare la lingua principale.
Individua il file "languages.en.toml" nella cartella di configurazione. Se la tua lingua principale è l'inglese puoi utilizzare questo file così com'è. Altrimenti, rinominalo in modo che includa il codice della lingua corretto nel nome del file. Ad esempio, per il francese, rinominare il file in "languages.fr.toml".
{{< alert >}}
Tieni presente che il codice della lingua nel nome del file di configurazione della lingua deve corrispondere all'impostazione "languageCode" in "config.toml".
{{< /alert >}}
```toml
# config/_default/languages.en.toml
title = "My awesome website"
[params.author]
name = "My name"
image = "img/author.jpg"
headline = "A generally awesome human"
bio = "A little bit about me"
links = [
{ twitter = "https://twitter.com/username" }
]
```
La configurazione `[params.author]` determina il modo in cui le informazioni sull'autore vengono visualizzate sul sito web. L'immagine deve essere posizionata nella cartella `assets/`. I link verranno visualizzati nell'ordine in cui sono elencati.
Se hai bisogno di ulteriori dettagli, ulteriori informazioni su ciascuna di queste opzioni di configurazione sono trattate nella sezione [Configurazione]({{< ref "configuration" >}}).
## Schemi di colori
Blowfish viene fornito con una serie di schemi di colori già pronti. Per cambiare lo schema, è sufficiente impostare il parametro del tema `colorScheme`. Le opzioni valide sono `blowfish` (default), `avocado`, `fire`, `ocean`, `forest`, `princess`, `neon`, `bloody`, `terminal`, `marvel`, `noir`, `autumn`, `congo`, and`slate`.
```toml
# config/_default/params.toml
colorScheme = "blowfish"
```
Blowfish definisce una palette di tre colori che viene utilizzata in tutto il tema. Ogni colore principale contiene dieci sfumature basate sui colori inclusi in [Tailwind](https://tailwindcss.com/docs/customizing-colors#color-palette-reference). I tre colori principali sono utilizzati per l'intestazione, il piè di pagina e i colori d'accento. Ecco i colori per ogni schema:
#### Blowfish (default)
{{< swatches "#64748b" "#3b82f6" "#06b6d4" >}}
#### Avocado
{{< swatches "#78716c" "#84cc16" "#10b981" >}}
#### Fire
{{< swatches "#78716c" "#f97316" "#f43f5e" >}}
#### Ocean
{{< swatches "#64748b" "#3b82f6" "#06b6d4" >}}
#### Forest
{{< swatches "#658c86" "#3bf5df" "#06d45c" >}}
#### Princess
{{< swatches "#8c658c" "#f53bf2" "#7706d4" >}}
#### Neon
{{< swatches "#8338ec" "#ff006e" "#3a86ff" >}}
#### Bloody
{{< swatches "#d90429" "#8d99ae" "#457b9d" >}}
#### Terminal
{{< swatches "#004b23" "#38b000" "#1a759f" >}}
#### Marvel
{{< swatches "#2541b2" "#d81159" "#ffbc42" >}}
#### Noir
{{< swatches "#5c6b73" "#9db4c0" "#00a5cf" >}}
#### Autumn
{{< swatches "#0a9396" "#ee9b00" "#bb3e03" >}}
#### Congo
{{< swatches "#71717a" "#8b5cf6" "#d946ef" >}}
#### Slate
{{< swatches "#6B7280" "#64748b" "#6B7280" >}}
Sebbene questi siano gli schemi predefiniti, è possibile crearne di propri. Per maggiori informazioni, consultare la sezione [Personalizzazione avanzata]({{< ref "advanced-customisation#colour-schemes" >}}).
## Organizzazione dei contenuti
Per impostazione predefinita, Blowfish non obbliga a utilizzare un particolare tipo di contenuto. In questo modo si è liberi di definire il contenuto come si desidera. Potreste preferire _pages_ per un sito statico, _posts_ per un blog o _projects_ per un portfolio.
Ecco una rapida panoramica di un progetto base di Blowfish. Tutti i contenuti sono inseriti nella cartella `content`:
```shell
.
├── assets
│ └── img
│ └── author.jpg
├── config
│ └── _default
├── content
│ ├── _index.md
│ ├── about.md
│ └── posts
│ ├── _index.md
│ ├── first-post.md
│ └── another-post
│ ├── aardvark.jpg
│ └── index.md
└── themes
└── blowfish
```
È importante avere una conoscenza approfondita di come Hugo si aspetta che il contenuto sia organizzato, poiché il tema è progettato per sfruttare appieno i pacchetti di pagine di Hugo. Si consiglia di leggere i [documentazione ufficiale di Hugo](https://gohugo.io/content-management/organization/) per maggiori informazioni.
Blowfish è flessibile anche per quanto riguarda le tassonomie. Alcuni preferiscono usare _tags_ e _categories_ per raggruppare i loro contenuti, altri preferiscono usare _topics_.
Hugo usa di default post, tag e categorie e questo funziona bene se è quello che vuoi. Tuttavia, se desideri personalizzare questo aspetto, è possibile farlo creando un file di configurazione `taxonomies.toml`:
```toml
# config/_default/taxonomies.toml
topic = "topics"
```
Sostituirà i predefiniti _tags_ e _categorie_ con _topics_. Fare riferimento a [Hugo Taxonomy docs](https://gohugo.io/content-management/taxonomies/) per ulteriori informazioni sulla denominazione delle tassonomie.
Quando crei una nuova tassonomia, è necessario sistemare i collegamenti di navigazione sul sito web per puntare alle sezioni corrette, come spiegato di seguito.
## Menu
Blowfish dispone di due menu che possono essere personalizzati per adattarsi al contenuto e al layout del sito. Il menu `main` appare nell'intestazione del sito e il menu `footer` appare in fondo alla pagina, appena sopra la nota di copyright.
Entrambi i menu sono configurati nel file `menus.en.toml`. Simile al file di configurazione delle lingue, se desideri utilizzare un'altra lingua, rinomina questo file e sostituisci `en` con il codice della lingua che si vuole utilizzare.
```toml
# config/_default/menus.toml
[[main]]
name = "Blog"
pageRef = "posts"
weight = 10
[[main]]
name = "Topics"
pageRef = "topics"
weight = 20
[[main]]
pre = "github"
name = "GitHub"
url = "https://github.com/nunocoracao/blowfish"
weight = 30
[[main]]
identifier = "github2"
pre = "github"
url = "https://github.com/nunocoracao/blowfish"
weight = 40
[[footer]]
name = "Privacy"
url = "https://external-link"
```
Il parametro `name` specifica il testo utilizzato nel collegamento al menu. Si può anche fornire facoltativamente un `title` che riempie l'attributo HTML title per il collegamento.
Il parametro `pageRef` consente di fare facilmente riferimento alle pagine di contenuto e alle tassonomie di Hugo. È il modo più rapido per configurare il menu, in quanto è sufficiente fare riferimento a qualsiasi elemento di contenuto di Hugo per creare automaticamente il collegamento corretto. Per collegarsi a URL esterni, si può usare il parametro `url`.
Il parametro `pre` consente di inserire un'icona dal [Set di icone di Blowfish] ({{< ref "samples/icons" >}}) nella voce di menu. Questo parametro può essere usato con il parametro `name` o da solo. Se si vogliono usare più voci di menu con le sole icone, imposta il parametro `identifier`, altrimenti Hugo sceglierà come id il tag di denominazione e probabilmente non visualizzerà tutte le voci di menu.
I collegamenti al menu saranno ordinati dal più basso al più alto `peso`, e poi in ordine alfabetico per `name`.
Entrambi i menu sono completamente opzionali e possono essere commentati se non sono necessari. Utilizzare il modello fornito nel file come guida.
### Nested Menu
Il tema supporta anche i menu nidificati. Per usarli devi solo definire una voce genitore in `menu.toml` e i suoi sottomenu utilizzando il parametro `parent` per fare riferimento al genitore. Tutte le proprietà possono essere utilizzate per i sottomenu. `pageRef` e `url` possono essere utilizzati anche nella voce principale. I menu nidificati sono disponibili solo nel menu principale e non nel footer.
```toml
# config/_default/menus.toml
[[main]]
name = "Parent"
weight = 20
[[main]]
name = "sub-menu 1"
parent = "Parent"
pageRef = "samples"
weight = 20
[[main]]
name = "sub-menu 2"
parent = "Parent"
pageRef = "samples"
weight = 20
[[main]]
name = "sub-menu 3"
parent = "Parent"
pre = "github"
pageRef = "samples"
weight = 20
```
### Menu di navigazione secondario
Inoltre, è possibile configurare un menu di sotto-navigazione. Basta definire nuove voci di menu come `subnavigation` in `menus.toml`.
Questo renderà una seconda riga con le sottocategorie sotto il menu principale dell'intestazione.
```toml
# config/_default/menus.toml
[[subnavigation]]
name = "An interesting topic"
pageRef = "tags/interesting-topic"
weight = 10
[[subnavigation]]
name = "My Awesome Category"
pageRef = "categories/awesome"
weight = 20
```
Il `name` predefinito è il titolo di `pageRef`, con le caselle.
## Thumbnails & Backgrounds
Blowfish è stato creato in modo che sia facile aggiungere supporto visivo ai tuoi articoli. Se hai familiarità con la struttura degli articoli di Hugo, devi solo inserire un file immagine (quasi tutti i formati sono supportati ma consigliamo `.png` o `.jpg`) che inizi con `feature*` all'interno della cartella dell'articolo. E questo è tutto, Blowfish sarà quindi in grado di utilizzare l'immagine sia come miniatura all'interno del tuo sito web sia per le schede <a target="_blank" href="https://oembed.com/">oEmbed</a> attraverso le piattaforme social.
[Qui]({{< ref "thumbnails" >}}) è anche una guida con maggiori informazioni e un [esempio]({{< ref "thumbnail_sample" >}}) se vuoi vedere come puoi farlo.
Additionally, Blowfish also supports background hero images in articles and lists. In order to use a different image than the featured one, add an image file in which the name starts with `background*`.
Inoltre, Blowfish supporta anche una background hero image in articoli ed elenchi. Per utilizzare un'immagine diversa da quella in primo piano, aggiungi un file immagine il cui nome inizia con `background*`.
## Dettagli di configurazione
I passaggi precedenti rappresentano la configurazione minima. Se ora esegui `hugo server` ti verrà presentato un sito web Blowfish vuoto. La configurazione dettagliata è trattata nella sezione [Configurazione]({{< ref "configuration" >}}).

View file

@ -0,0 +1,270 @@
---
title: "始める"
weight: 3
draft: false
description: "Blowfish で利用可能なすべてのフロントマター変数。"
slug: "getting-started"
tags: ["installation", "docs"]
series: ["Documentation"]
series_order: 3
---
{{< alert >}}
このセクションでは、[Blowfish テーマをすでにインストールしている]({{< ref "docs/installation" >}})ことを前提としています。
{{< /alert >}}
</br>
{{< alert "fire" >}}
Blowfish の使用開始を支援する CLI ツールをリリースしました。インストールと設定に役立ちます。次のコマンドで CLI ツールをグローバルにインストールします。
```bash
npx blowfish-tools
```
{{< /alert >}}
Blowfish に同梱されている設定ファイルには、テーマが認識できるすべての設定が含まれています。デフォルトでは、これらの多くはコメントアウトされていますが、コメントを解除するだけで特定の機能を有効化または変更できます。
## 基本設定
コンテンツを作成する前に、新しいインストール用に設定する必要があるものがいくつかあります。まず、`hugo.toml` ファイルで、`baseURL``languageCode` パラメータを設定します。`languageCode` は、コンテンツの作成に使用する主要言語に設定する必要があります。
```toml
# config/_default/hugo.toml
baseURL = "https://your_domain.com/"
languageCode = "ja"
```
次のステップは、言語設定です。Blowfish は多言語設定をサポートしていますが、ここではまず主要言語を設定します。
設定フォルダで `languages.en.toml` ファイルを見つけます。主要言語が英語の場合は、このファイルをそのまま使用できます。それ以外の場合は、ファイル名に正しい言語コードが含まれるように名前を変更します。例えば日本語の場合は、`languages.ja.toml`にファイル名を変更します。
{{< alert >}}
言語設定ファイル名の言語コードは、`hugo.toml``languageCode` 設定と一致する必要があることに注意してください。
{{< /alert >}}
```toml
# config/_default/languages.ja.toml
title = "私の素晴らしいウェブサイト"
[params.author]
name = "私の名前"
image = "img/author.jpg"
headline = "一般的に素晴らしい人間"
bio = "私について少し"
links = [
{ twitter = "https://twitter.com/username" }
]
```
`[params.author]` 設定は、ウェブサイトに著者情報をどのように表示するかを決定します。画像はサイトの `assets/` フォルダに配置する必要があります。リンクはリストされている順序で表示されます。
これらの設定オプションの詳細については、[設定]({{< ref "configuration" >}})セクションで説明しています。
## カラースキーム
Blowfish には、すぐに使用できる多くのカラースキームが付属しています。スキームを変更するには、`colorScheme` テーマパラメータを設定するだけです。有効なオプションは、`blowfish` (デフォルト)、`avocado``fire``ocean``forest``princess``neon``bloody``terminal``marvel``noir``autumn``congo``slate` です。
```toml
# config/_default/params.toml
colorScheme = "blowfish"
```
Blowfish は、テーマ全体で使用される3色のパレットを定義しています。各メインカラーには、[Tailwind](https://tailwindcss.com/docs/customizing-colors#color-palette-reference) に含まれる色に基づいた10の色合いが含まれています。3つのメインカラーは、ヘッダー、フッター、およびアクセントカラーに使用されます。各スキームの色は次のとおりです。
#### Blowfish (デフォルト)
{{< swatches "#64748b" "#3b82f6" "#06b6d4" >}}
#### Avocado
{{< swatches "#78716c" "#84cc16" "#10b981" >}}
#### Fire
{{< swatches "#78716c" "#f97316" "#f43f5e" >}}
#### Ocean
{{< swatches "#64748b" "#3b82f6" "#06b6d4" >}}
#### Forest
{{< swatches "#658c86" "#3bf5df" "#06d45c" >}}
#### Princess
{{< swatches "#8c658c" "#f53bf2" "#7706d4" >}}
#### Neon
{{< swatches "#8338ec" "#ff006e" "#3a86ff" >}}
#### Bloody
{{< swatches "#d90429" "#8d99ae" "#457b9d" >}}
#### Terminal
{{< swatches "#004b23" "#38b000" "#1a759f" >}}
#### Marvel
{{< swatches "#2541b2" "#d81159" "#ffbc42" >}}
#### Noir
{{< swatches "#5c6b73" "#9db4c0" "#00a5cf" >}}
#### Autumn
{{< swatches "#0a9396" "#ee9b00" "#bb3e03" >}}
#### Congo
{{< swatches "#71717a" "#8b5cf6" "#d946ef" >}}
#### Slate
{{< swatches "#6B7280" "#64748b" "#6B7280" >}}
これらはデフォルトのスキームですが、独自のスキームを作成することもできます。詳細については、[高度なカスタマイズ]({{< ref "advanced-customisation#colour-schemes" >}})セクションを参照してください。
## コンテンツの整理
デフォルトでは、Blowfish は特定のコンテンツタイプを使用することを強制しません。そのため、コンテンツを自由に定義できます。静的サイトの場合は _pages_、ブログの場合は _posts_、ポートフォリオの場合は _projects_ を使用することをお勧めします。
基本的な Blowfish プロジェクトの概要を簡単に説明します。すべてのコンテンツは `content` フォルダ内に配置されます。
```shell
.
├── assets
│ └── img
│ └── author.jpg
├── config
│ └── _default
├── content
│ ├── _index.md
│ ├── about.md
│ └── posts
│ ├── _index.md
│ ├── first-post.md
│ └── another-post
│ ├── aardvark.jpg
│ └── index.md
└── themes
└── blowfish
```
このテーマは Hugo のページバンドルを最大限に活用するように設計されているため、Hugo がどのようにコンテンツを整理することを想定しているかをしっかりと把握することが重要です。詳細については、[Hugo 公式ドキュメント](https://gohugo.io/content-management/organization/)を参照してください。
Blowfish はタクソミーに関しても柔軟です。_tags_ と _categories_ を使用してコンテンツをグループ化することを好む人もいれば、_topics_ を使用することを好む人もいます。
Hugo はデフォルトで posts、tags、categories を使用するように設定されており、これを希望する場合は問題なく動作します。ただし、これをカスタマイズしたい場合は、`taxonomies.toml` 設定ファイルを作成することでカスタマイズできます。
```toml
# config/_default/taxonomies.toml
topic = "topics"
```
これにより、デフォルトの _tags__categories__topic_ に置き換えられます。タクソノミーの命名の詳細については、[Hugo タクソノミードキュメント](https://gohugo.io/content-management/taxonomies/)を参照してください。
新しいタクソノミーを作成する場合は、ウェブサイトのナビゲーションリンクを調整して、正しいセクションを指すようにする必要があります。これについては以下で説明します。
## メニュー
Blowfish には、サイトのコンテンツとレイアウトに合わせてカスタマイズできる2つのメニューがあります。`main` メニューはサイトヘッダーに表示され、`footer` メニューはページの下部、著作権表示のすぐ上に表示されます。
どちらのメニューも `menus.ja.toml` ファイルで設定できます。言語設定ファイルと同様に、別の言語を使用したい場合は、このファイルの名前を変更して、`en` を使用したい言語コードに置き換えます。
```toml
# config/_default/menus.ja.toml
[[main]]
name = "ブログ"
pageRef = "posts"
weight = 10
[[main]]
name = "トピック"
pageRef = "topics"
weight = 20
[[main]]
pre = "github"
name = "GitHub"
url = "https://github.com/nunocoracao/blowfish"
weight = 30
[[main]]
identifier = "github2"
pre = "github"
url = "https://github.com/nunocoracao/blowfish"
weight = 40
[[footer]]
name = "プライバシー"
url = "https://external-link"
```
`name` パラメータは、メニューリンクで使用されるテキストを指定します。オプションで、リンクの HTML タイトル属性を設定する `title` を指定することもできます。
`pageRef` パラメータを使用すると、Hugo コンテンツページとタクソミーを簡単に参照できます。これは、Hugo コンテンツアイテムを参照するだけで正しいリンクが自動的に作成されるため、メニューを設定する最も簡単な方法です。外部 URL にリンクするには、`url` パラメータを使用できます。
`pre` パラメータを使用すると、[Blowfish のアイコンセット]({{< ref "samples/icons" >}})からメニューエントリにアイコンを配置できます。このパラメータは、`name` パラメータと組み合わせて使用することも、単独で使用することもできます。アイコンのみを使用して複数のメニューエントリを使用する場合は、`identifier` パラメータを設定してください。そうしないと、Hugo はデフォルトで命名タグを ID として使用し、おそらくすべてのメニューエントリを表示しません。
メニューリンクは、`weight` が低い順に並べ替えられ、次に `name` でアルファベット順に並べ替えられます。
どちらのメニューも完全にオプションであり、不要な場合はコメントアウトできます。ファイルに記載されているテンプレートをガイドとして使用してください。
### ネストされたメニュー
テーマはネストされたメニューもサポートしています。これらを使用するには、`menu.toml` で親エントリを定義し、`parent` パラメータを使用し親を参照してサブメニューを定義するだけです。すべてのプロパティは、サブメニューに使用できます。`pageRef``url` は、親エントリでも使用できます。ネストされたメニューは、メインメニューでのみ使用でき、フッターでは使用できません。
```toml
# config/_default/menus.ja.toml
[[main]]
name = "親"
weight = 20
[[main]]
name = "サブメニュー 1"
parent = "親"
pageRef = "samples"
weight = 20
[[main]]
name = "サブメニュー 2"
parent = "親"
pageRef = "samples"
weight = 20
[[main]]
name = "サブメニュー 3"
parent = "親"
pre = "github"
pageRef = "samples"
weight = 20
```
### サブナビゲーションメニュー
さらに、サブナビゲーションメニューを設定することもできます。`menus.toml` で新しいメニューエントリを `subnavigation` として定義するだけです。
これにより、メインヘッダーメニューの下に、サブカテゴリを含む2行目が表示されます。
```toml
# config/_default/menus.ja.toml
[[subnavigation]]
name = "興味深いトピック"
pageRef = "tags/interesting-topic"
weight = 10
[[subnavigation]]
name = "私の素晴らしいカテゴリ"
pageRef = "categories/awesome"
weight = 20
```
デフォルトの `name` は、`pageRef` のタイトルになります。
## サムネイルと背景
Blowfish は、記事に視覚的なサポートを簡単に追加できるように構築されました。Hugo の記事構造に慣れている場合は、記事フォルダ内に `feature*` で始まる画像ファイル (ほとんどすべての形式がサポートされていますが、`.png` または `.jpg` を推奨) を配置するだけです。それだけで、Blowfish はその画像をウェブサイト内のサムネイルとして使用したり、ソーシャルプラットフォーム全体の <a target="_blank" href="https://oembed.com/">oEmbed</a> カードに使用したりできるようになります。
詳細な情報と、設定方法を確認するための[サンプル]({{< ref "thumbnail_sample" >}})を含むガイドも[こちら]({{< ref "thumbnails" >}})にあります。
さらに、Blowfish は記事やリストの背景ヒーロー画像もサポートしています。フィーチャー画像とは異なる画像を使用するには、名前が `background*` で始まる画像ファイルを(記事フォルダに)追加します。
## 詳細設定
上記の手順は、最低限の設定です。`hugo server` を実行すると、空の Blowfish ウェブサイトが表示されます。詳細な設定については、[設定]({{< ref "configuration" >}})セクションで説明しています。

View file

@ -0,0 +1,272 @@
---
title: "Getting Started"
weight: 3
draft: false
description: "All the front matter variables available in Blowfish."
slug: "getting-started"
tags: ["installation", "docs"]
series: ["Documentation"]
series_order: 3
---
{{< alert >}}
This section assumes you have already [installed the Blowfish theme]({{< ref "docs/installation" >}}).
{{< /alert >}}
</br>
{{< alert "fire" >}}
We just launched a CLI tool to help you get started with Blowfish. It will help you with installation and configuration. Install the CLI tool globally using:
```bash
npx blowfish-tools
```
{{< /alert >}}
The config files that ship with Blowfish contain all of the possible settings that the theme recognises. By default, many of these are commented out but you can simply uncomment them to activate or change a specific feature.
## Basic configuration
Before creating any content, there are a few things you should set for a new installation. Starting in the `hugo.toml` file, set the `baseURL` and `languageCode` parameters. The `languageCode` should be set to the main language that you will be using to author your content.
```toml
# config/_default/hugo.toml
baseURL = "https://your_domain.com/"
languageCode = "en"
```
The next step is to configure the language settings. Although Blowfish supports multilingual setups, for now, just configure the main language.
Locate the `languages.en.toml` file in the config folder. If your main language is English you can use this file as is. Otherwise, rename it so that it includes the correct language code in the filename. For example, for French, rename the file to `languages.fr.toml`.
{{< alert >}}
Note that the language code in the language config filename should match the `languageCode` setting in `hugo.toml`.
{{< /alert >}}
```toml
# config/_default/languages.en.toml
title = "My awesome website"
[params.author]
name = "My name"
image = "img/author.jpg"
headline = "A generally awesome human"
bio = "A little bit about me"
links = [
{ twitter = "https://twitter.com/username" }
]
```
The `[params.author]` configuration determines how the author information is displayed on the website. The image should be placed in the site's `assets/` folder. Links will be displayed in the order they are listed.
If you need extra detail, further information about each of these configuration options, is covered in the [Configuration]({{< ref "configuration" >}}) section.
## Colour schemes
Blowfish ships with a number of colour schemes out of the box. To change the scheme, simply set the `colorScheme` theme parameter. Valid options are `blowfish` (default), `avocado`, `fire`, `ocean`, `forest`, `princess`, `neon`, `bloody`, `terminal`, `marvel`, `noir`, `autumn`, `congo`, and`slate`.
```toml
# config/_default/params.toml
colorScheme = "blowfish"
```
Blowfish defines a three-colour palette that is used throughout the theme. Each main colour contains ten shades which are based upon the colours that are included in [Tailwind](https://tailwindcss.com/docs/customizing-colors#color-palette-reference). The three main colours are used for the header, footer, and accent colours. Here are the colors for each scheme:
#### Blowfish (default)
{{< swatches "#64748b" "#3b82f6" "#06b6d4" >}}
#### Avocado
{{< swatches "#78716c" "#84cc16" "#10b981" >}}
#### Fire
{{< swatches "#78716c" "#f97316" "#f43f5e" >}}
#### Ocean
{{< swatches "#64748b" "#3b82f6" "#06b6d4" >}}
#### Forest
{{< swatches "#658c86" "#3bf5df" "#06d45c" >}}
#### Princess
{{< swatches "#8c658c" "#f53bf2" "#7706d4" >}}
#### Neon
{{< swatches "#8338ec" "#ff006e" "#3a86ff" >}}
#### Bloody
{{< swatches "#d90429" "#8d99ae" "#457b9d" >}}
#### Terminal
{{< swatches "#004b23" "#38b000" "#1a759f" >}}
#### Marvel
{{< swatches "#2541b2" "#d81159" "#ffbc42" >}}
#### Noir
{{< swatches "#5c6b73" "#9db4c0" "#00a5cf" >}}
#### Autumn
{{< swatches "#0a9396" "#ee9b00" "#bb3e03" >}}
#### Congo
{{< swatches "#71717a" "#8b5cf6" "#d946ef" >}}
#### Slate
{{< swatches "#6B7280" "#64748b" "#6B7280" >}}
Although these are the default schemes, you can also create your own. Refer to the [Advanced Customisation]({{< ref "advanced-customisation#colour-schemes" >}}) section for details.
## Organising content
By default, Blowfish doesn't force you to use a particular content type. In doing so you are free to define your content as you wish. You might prefer _pages_ for a static site, _posts_ for a blog, or _projects_ for a portfolio.
Here's a quick overview of a basic Blowfish project. All content is placed within the `content` folder:
```shell
.
├── assets
│ └── img
│ └── author.jpg
├── config
│ └── _default
├── content
│ ├── _index.md
│ ├── about.md
│ └── posts
│ ├── _index.md
│ ├── first-post.md
│ └── another-post
│ ├── aardvark.jpg
│ └── index.md
└── themes
└── blowfish
```
It's important to have a firm grasp of how Hugo expects content to be organised as the theme is designed to take full advantage of Hugo page bundles. Be sure to read the [official Hugo docs](https://gohugo.io/content-management/organization/) for more information.
Blowfish is also flexible when it comes to taxonomies. Some people prefer to use _tags_ and _categories_ to group their content, others prefer to use _topics_.
Hugo defaults to using posts, tags and categories out of the box and this will work fine if that's what you want. If you wish to customise this, however, you can do so by creating a `taxonomies.toml` configuration file:
```toml
# config/_default/taxonomies.toml
topic = "topics"
```
This will replace the default _tags_ and _categories_ with _topics_. Refer to the [Hugo Taxonomy docs](https://gohugo.io/content-management/taxonomies/) for more information on naming taxonomies.
When you create a new taxonomy, you will need to adjust the navigation links on the website to point to the correct sections, which is covered below.
## Menus
Blowfish has two menus that can be customised to suit the content and layout of your site. The `main` menu appears in the site header and the `footer` menu appears at the bottom of the page just above the copyright notice.
Both menus are configured in the `menus.en.toml` file. Similarly to the languages config file, if you wish to use another language, rename this file and replace `en` with the language code you wish to use.
```toml
# config/_default/menus.toml
[[main]]
name = "Blog"
pageRef = "posts"
weight = 10
[[main]]
name = "Topics"
pageRef = "topics"
weight = 20
[[main]]
pre = "github"
name = "GitHub"
url = "https://github.com/nunocoracao/blowfish"
weight = 30
[[main]]
identifier = "github2"
pre = "github"
url = "https://github.com/nunocoracao/blowfish"
weight = 40
[[footer]]
name = "Privacy"
url = "https://external-link"
```
The `name` parameter specifies the text that is used in the menu link. You can also optionally provide a `title` which fills the HTML title attribute for the link.
The `pageRef` parameter allows you to easily reference Hugo content pages and taxonomies. It is the quickest way to configure the menu as you can simply refer to any Hugo content item and it will automatically build the correct link. To link to external URLs, the `url` parameter can be used.
The `pre` parameter allows you to place an icon from [Blowfish's icon set]({{< ref "samples/icons" >}}) on the menu entry. This parameter can be used with `name` parameter or by itself. If you want to use multiple menu entries with just icons please set the `identifier`parameter otherwise Hugo will default to the naming tag as the id and probably not display all the menu entries.
Menu links will be sorted from lowest to highest `weight`, and then alphabetically by `name`.
Both menus are completely optional and can be commented out if not required. Use the template provided in the file as a guide.
### Nested menus
The theme also supports nested menus. In order to use them you just need to define a parent entry in `menu.toml` and its sub-menus using the `parent` parameter to reference the parent. All properties can be used for sub-menus. `pageRef` and `url` can also be used in the parent entry. Nested menus are only available in the main menu not for the footer.
```toml
# config/_default/menus.toml
[[main]]
name = "Parent"
weight = 20
[[main]]
name = "sub-menu 1"
parent = "Parent"
pageRef = "samples"
weight = 20
[[main]]
name = "sub-menu 2"
parent = "Parent"
pageRef = "samples"
weight = 20
[[main]]
name = "sub-menu 3"
parent = "Parent"
pre = "github"
pageRef = "samples"
weight = 20
```
### Sub-Navigation menu
Additionally, you can also configure a sub-navigation menu. Just define new menu entries as `subnavigation` in `menus.toml`.
This will render a second line with sub-categories below the main header menu.
```toml
# config/_default/menus.toml
[[subnavigation]]
name = "An interesting topic"
pageRef = "tags/interesting-topic"
weight = 10
[[subnavigation]]
name = "My Awesome Category"
pageRef = "categories/awesome"
weight = 20
```
The default `name` is the `pageRef` title cased.
## Thumbnails & Backgrounds
Blowfish was built so it would be easy to add visual support to your articles. If your familiar with Hugo article structure, you just need to place an image file (almost all formats are supported but we recommend `.png` or `.jpg`) that starts with `feature*` inside your article folder. And that's it, Blowfish will then be able to both use the image as a thumbnail within your website as well as for <a target="_blank" href="https://oembed.com/">oEmbed</a> cards across social platforms.
[Here]({{< ref "thumbnails" >}}) is also a guide with more info and a [sample]({{< ref "thumbnail_sample" >}}) if you want to see how you can do it.
Additionally, Blowfish also supports background hero images in articles and lists. In order to use a different image than the featured one, add an image file in which the name starts with `background*`.
## Detailed configuration
The steps above are the bare minimum configuration. If you now run `hugo server` you will be presented with a blank Blowfish website. Detailed configuration is covered in the [Configuration]({{< ref "configuration" >}}) section.

View file

@ -0,0 +1,272 @@
---
title: "入门指南"
weight: 3
draft: false
description: "所有在你要使用 Blowfish 主题搭建网站之前的准备工作"
slug: "getting-started"
tags: ["安装", "文档"]
series: ["部署教程"]
series_order: 3
---
{{< alert >}}
本节内容需要已经阅读了 [安装 Blowfish 主题]({{< ref "docs/installation" >}})。
{{< /alert >}}
</br>
{{< alert "fire" >}}
我们刚刚推出了一个 CLI 工具,用来帮助你快速开始 Blowfish。 它将帮助你安装和配置 Blowfish 主题。 可以使用以下命令全局安装 CLI 工具:
```bash
npx blowfish-tools
```
{{< /alert >}}
Blowfish 中的配置文件中包含了主题需要的所有可能的设置选项。但默认情况下大多数设置都是被注释的,你只需要取消注释就可以激活或者修改设定选项。
## 基础设置
在刚刚安装完成,创建内容之前,有几个设置需要关注。从 `hugo.toml` 开始,设置 `baseURL``languageCode` 参数。`languageCode`参数是用来指定你创作内容的主要语言。
```toml
# config/_default/hugo.toml
baseURL = "https://your_domain.com/"
languageCode = "en"
```
下一步是设置语言。尽管 Blowfish 支持多语言,但是 `hugo.toml` 只能配置一个主语言。
`config/_default` 文件夹中找到 `languages.en.toml`。如果你的主语言是英语,你可以直接使用此文件。否则需要重命名为主语言对应的文件名。例如,如果主语言是法语,那么需要将文件命名为 `languages.fr.toml`
{{< alert >}}
注意:语言配置文件名中的语言代码需要与 `hugo.toml``languageCode` 相匹配。
{{< /alert >}}
```toml
# config/_default/languages.en.toml
title = "My awesome website"
[params.author]
name = "My name"
image = "img/author.jpg"
headline = "A generally awesome human"
bio = "A little bit about me"
links = [
{ twitter = "https://twitter.com/username" }
]
```
`[params.author]` 属性决定了作者信息的展示方式。 作者的图片信息应该放在 `assets/` 文件夹中。作者相关的链接将会按照排列顺序依次展示。
如果你还需要额外属性,在配置部分会有详细说明。
## 颜色方案
Blowfish 主题中包含了数个颜色方案,这些方案可以快速使用。如果需要修改方案,只需要简单的设置 `colorScheme` 参数即可。`colorScheme` 可选的值有`blowfish` (默认)、`avocado``fire``ocean``forest``princess``neon``bloody``terminal``marvel``noir``autumn``congo``slate`
```toml
# config/_default/params.toml
colorScheme = "blowfish"
```
Blowfish 定义了一种由三种主色调构成的配色方案每种主色调包含了10种子色调10个色调是借鉴 [Tailwind](https://tailwindcss.com/docs/customizing-colors#color-palette-reference) 中的定义。Blowfish 中定义了多个预置的三色主题,以便在整个主题中使用。
#### Blowfish默认
{{< swatches "#64748b" "#3b82f6" "#06b6d4" >}}
#### Avocado
{{< swatches "#78716c" "#84cc16" "#10b981" >}}
#### Fire
{{< swatches "#78716c" "#f97316" "#f43f5e" >}}
#### Ocean
{{< swatches "#64748b" "#3b82f6" "#06b6d4" >}}
#### Forest
{{< swatches "#658c86" "#3bf5df" "#06d45c" >}}
#### Princess
{{< swatches "#8c658c" "#f53bf2" "#7706d4" >}}
#### Neon
{{< swatches "#8338ec" "#ff006e" "#3a86ff" >}}
#### Bloody
{{< swatches "#d90429" "#8d99ae" "#457b9d" >}}
#### Terminal
{{< swatches "#004b23" "#38b000" "#1a759f" >}}
#### Marvel
{{< swatches "#2541b2" "#d81159" "#ffbc42" >}}
#### Noir
{{< swatches "#5c6b73" "#9db4c0" "#00a5cf" >}}
#### Autumn
{{< swatches "#0a9396" "#ee9b00" "#bb3e03" >}}
#### Congo
{{< swatches "#71717a" "#8b5cf6" "#d946ef" >}}
#### Slate
{{< swatches "#6B7280" "#64748b" "#6B7280" >}}
这些是内置的配色方案,你也可以去自定义这一部分,请参阅 [高级自定义]({{< ref "advanced-customisation#colour-schemes" >}}) 。
## 整理内容
默认情况下, Blowfish 不强制你使用特定类型的内容。这样你可以随意自定义你想要的内容。你可能喜欢用作静态网站页面、博客帖子,或作为作品集中的某个项目。
这是基本 Blowfish 项目的快速概览。所有内容都放在 `content` 文件夹中:
```shell
.
├── assets
│ └── img
│ └── author.jpg
├── config
│ └── _default
├── content
│ ├── _index.md
│ ├── about.md
│ └── posts
│ ├── _index.md
│ ├── first-post.md
│ └── another-post
│ ├── aardvark.jpg
│ └── index.md
└── themes
└── blowfish
```
一定要熟练掌握在 Hugo 中组织你想要的内容,此主题也旨在充分利用 Hugo 中页面页面捆绑的逻辑。请阅读 [Hugo 官方文档](https://gohugo.io/content-management/organization/) 以获取更多内容。
Blowfish 在分类方法上面也非常灵活。有的人喜欢使用标签_tags_和类别_categories_来分组内容而有的人喜欢用话题_topics_
Hugo 默认是使用帖子、标签和类别,这三种可以开箱即用的。但如果你希望自定义,那么可以创建 `taxonomies.toml` 配置文件来实现:
```toml
# config/_default/taxonomies.toml
topic = "topics"
```
这将把默认的标签和分类替换成话题。有关 Hugo 中命名分类法的更多内容,可以参考 [Hugo 分类方法](https://gohugo.io/content-management/taxonomies/)。
当你创建了一个新的分类法时,需要调整网站上的导航链接,以确保新分类可以指向正确的内容,下面会详细介绍。
## 菜单
Blowfish 有两个可以定制的菜单,以此来适配网站中的内容和布局。`main`菜单出现在网站头部,`footer`菜单出现在页面底部和版权声明上方。
这两个菜单都是配置在 `menus.en.toml` 文件中。与语言配置文件类似,如果你希望使用另一种语言,请重命名这个文件并将 `en` 替换为你所希望的语言代码。
```toml
# config/_default/menus.toml
[[main]]
name = "Blog"
pageRef = "posts"
weight = 10
[[main]]
name = "Topics"
pageRef = "topics"
weight = 20
[[main]]
pre = "github"
name = "GitHub"
url = "https://github.com/nunocoracao/blowfish"
weight = 30
[[main]]
identifier = "github2"
pre = "github"
url = "https://github.com/nunocoracao/blowfish"
weight = 40
[[footer]]
name = "Privacy"
url = "https://external-link"
```
`name` 参数用于指定菜单中的文本。你还可以选择性的提供一个 `title` 标题,它将会被填充到链接的 HTML 代码的 `title` 属性中。
`pageRef` 参数用于引用 Hugo 的分类。这是配置菜单最简单的方法,你无需引用任何 Hugo 内容项,它会自动构建正确的链接。如果你需要链接到外部 URL那么可以使用 `url` 参数。
`pre` 参数用于设置菜单条目上的图标,这个图标需要是 [Blowfish 图标集]({{< ref "samples/icons" >}})中的一个。这个参与可以和 `name` 一起使用,也可以单独使用。如果你指向展示图标,请设置 `identifier` 参数,否则 Hugo 将默认使用 `name` 作为 id可能不会显示所有菜单项。
菜单中的多个链接将会根据 `weight` 权重参数进行从低到高排序,如果权重值一样那么会按照 `name` 字母顺序排序。
这两个菜单都是完全可选的,如果不需要也可以注释掉。你可以使用文件中提供的模板作为示例。
### 嵌套菜单
Blowfish 还支持嵌套菜单。你需要在`menu.toml` 中定义一个父级菜单项及其子菜单,使用 `parent` 可以指定子菜单项的父级。在上面菜单部分提到的所有参数一样适用于子菜单项,同样地,`pageRef``url` 也可以在父菜单项中使用。还需要注意一点,嵌套菜单只能在 `main` 菜单中可用,即网站头部的菜单。
```toml
# config/_default/menus.toml
[[main]]
name = "Parent"
weight = 20
[[main]]
name = "sub-menu 1"
parent = "Parent"
pageRef = "samples"
weight = 20
[[main]]
name = "sub-menu 2"
parent = "Parent"
pageRef = "samples"
weight = 20
[[main]]
name = "sub-menu 3"
parent = "Parent"
pre = "github"
pageRef = "samples"
weight = 20
```
### 子导航菜单
此外,你可以设置一个子导航菜单。只需要在 `menus.toml` 中将新的菜单项定义为 `subnavigation` 即可。
这将在主菜单下面展示第二行,其中包含子类别项。
```toml
# config/_default/menus.toml
[[subnavigation]]
name = "An interesting topic"
pageRef = "tags/interesting-topic"
weight = 10
[[subnavigation]]
name = "My Awesome Category"
pageRef = "categories/awesome"
weight = 20
```
默认的 `name``pageRef` 的首字母大写。
## 缩略图 & 背景
Blowfish 的创立开端旨在便于为文章添加视觉效果。如果你熟悉 Hugo 的文章结构,只需要在你文章所在的文件夹中,放置一个以`feature*`开头的图像文件Blowfish支持所有格式的文件但更推荐使用 `.png``.jpg`。就这样Blowfish 就能够将图像文件作为文章的缩略图,而且能够在社交平台的 `<a target="_blank" href="https://oembed.com/">oEmbed</a>` 卡片中使用。
[这里]({{< ref "thumbnails" >}}) 有一个指南,提供了个人更多的内容和[示例]({{< ref "thumbnail_sample" >}})。如果你想看看具体如何操作可以看这里。
Blowfish 还支持在文章和列表中使用背景图。为了使与缩略图不同,可以添加一个名为 `background*` 开头的图像文件。当然如果你没有设置背景图片Blowfish 会默认使用缩略图作为背景图。
## 详细配置
上面的步骤介绍了最基本的配置。如果你现在运行 `hugo server`,你将会看到一个空白的 Blowfish 网站。更加详细的内容在[配置]({{< ref "configuration" >}})中介绍。

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 85 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 198 KiB

View file

@ -0,0 +1,574 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
style="margin:auto;background:rgba(NaN, NaN, NaN, 0);display:block;z-index:1;position:relative"
width="1084" height="322" preserveAspectRatio="xMidYMid" viewBox="0 0 1084 322">
<defs>
<pattern id="pid-0.7735807359934106" x="0" y="0" width="345.6" height="345.6"
patternUnits="userSpaceOnUse">
<g transform="scale(1.35)">
<g>
<line x1="237.6288884328494" x2="201.39714008747956" y1="119.05338354492488"
y2="155.28513189029474" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="237.6288884328494" x2="201.39714008747956" y1="-392.9466164550751"
y2="-356.71486810970526" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="493.6288884328494" x2="457.39714008747956" y1="-392.9466164550751"
y2="-356.71486810970526" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="749.6288884328494" x2="713.3971400874796" y1="-392.9466164550751"
y2="-356.71486810970526" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="237.6288884328494" x2="201.39714008747956" y1="-136.94661645507512"
y2="-100.71486810970526" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="493.6288884328494" x2="457.39714008747956" y1="-136.94661645507512"
y2="-100.71486810970526" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="749.6288884328494" x2="713.3971400874796" y1="-136.94661645507512"
y2="-100.71486810970526" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="237.6288884328494" x2="201.39714008747956" y1="119.05338354492488"
y2="155.28513189029474" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="493.6288884328494" x2="457.39714008747956" y1="119.05338354492488"
y2="155.28513189029474" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="749.6288884328494" x2="713.3971400874796" y1="119.05338354492488"
y2="155.28513189029474" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="244.43797352167968" x2="179.25167385613412" y1="196.21419032492787"
y2="261.40048999047343" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="244.43797352167968" x2="179.25167385613412" y1="-315.78580967507213"
y2="-250.59951000952657" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="500.4379735216797" x2="435.2516738561341" y1="-315.78580967507213"
y2="-250.59951000952657" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="756.4379735216796" x2="691.2516738561342" y1="-315.78580967507213"
y2="-250.59951000952657" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="244.43797352167968" x2="179.25167385613412" y1="-59.78580967507213"
y2="5.400489990473432" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="500.4379735216797" x2="435.2516738561341" y1="-59.78580967507213"
y2="5.400489990473432" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="756.4379735216796" x2="691.2516738561342" y1="-59.78580967507213"
y2="5.400489990473432" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="244.43797352167968" x2="179.25167385613412" y1="196.21419032492787"
y2="261.40048999047343" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="500.4379735216797" x2="435.2516738561341" y1="196.21419032492787"
y2="261.40048999047343" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="756.4379735216796" x2="691.2516738561342" y1="196.21419032492787"
y2="261.40048999047343" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="219.6724359102308" x2="209.2181431749452" y1="92.85808081141191"
y2="103.31237354669749" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="219.6724359102308" x2="209.2181431749452" y1="-419.1419191885881"
y2="-408.6876264533025" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="475.6724359102308" x2="465.2181431749452" y1="-419.1419191885881"
y2="-408.6876264533025" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="731.6724359102308" x2="721.2181431749452" y1="-419.1419191885881"
y2="-408.6876264533025" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="219.6724359102308" x2="209.2181431749452" y1="-163.14191918858808"
y2="-152.68762645330253" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="475.6724359102308" x2="465.2181431749452" y1="-163.14191918858808"
y2="-152.68762645330253" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="731.6724359102308" x2="721.2181431749452" y1="-163.14191918858808"
y2="-152.68762645330253" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="219.6724359102308" x2="209.2181431749452" y1="92.85808081141191"
y2="103.31237354669749" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="475.6724359102308" x2="465.2181431749452" y1="92.85808081141191"
y2="103.31237354669749" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="731.6724359102308" x2="721.2181431749452" y1="92.85808081141191"
y2="103.31237354669749" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="112.00565118011832" x2="71.15817744773324" y1="56.63419812919665"
y2="97.48167186158173" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="112.00565118011832" x2="71.15817744773324" y1="-455.36580187080335"
y2="-414.51832813841827" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="368.0056511801183" x2="327.15817744773324" y1="-455.36580187080335"
y2="-414.51832813841827" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="624.0056511801183" x2="583.1581774477332" y1="-455.36580187080335"
y2="-414.51832813841827" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="112.00565118011832" x2="71.15817744773324" y1="-199.36580187080335"
y2="-158.51832813841827" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="368.0056511801183" x2="327.15817744773324" y1="-199.36580187080335"
y2="-158.51832813841827" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="624.0056511801183" x2="583.1581774477332" y1="-199.36580187080335"
y2="-158.51832813841827" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="112.00565118011832" x2="71.15817744773324" y1="56.63419812919665"
y2="97.48167186158173" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="368.0056511801183" x2="327.15817744773324" y1="56.63419812919665"
y2="97.48167186158173" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="624.0056511801183" x2="583.1581774477332" y1="56.63419812919665"
y2="97.48167186158173" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="60.932966336476014" x2="49.388821076756514" y1="125.65681060957188"
y2="137.20095586929136" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="60.932966336476014" x2="49.388821076756514" y1="-386.3431893904281"
y2="-374.79904413070864" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="316.932966336476" x2="305.3888210767565" y1="-386.3431893904281"
y2="-374.79904413070864" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="572.932966336476" x2="561.3888210767565" y1="-386.3431893904281"
y2="-374.79904413070864" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="60.932966336476014" x2="49.388821076756514" y1="-130.3431893904281"
y2="-118.79904413070864" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="316.932966336476" x2="305.3888210767565" y1="-130.3431893904281"
y2="-118.79904413070864" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="572.932966336476" x2="561.3888210767565" y1="-130.3431893904281"
y2="-118.79904413070864" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="60.932966336476014" x2="49.388821076756514" y1="125.65681060957188"
y2="137.20095586929136" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="316.932966336476" x2="305.3888210767565" y1="125.65681060957188"
y2="137.20095586929136" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="572.932966336476" x2="561.3888210767565" y1="125.65681060957188"
y2="137.20095586929136" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="103.78310212459807" x2="35.08486945593138" y1="-2.328164446496814"
y2="66.37006822216988" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="103.78310212459807" x2="35.08486945593138" y1="-514.3281644464968"
y2="-445.6299317778301" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="359.7831021245981" x2="291.08486945593137" y1="-514.3281644464968"
y2="-445.6299317778301" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="615.783102124598" x2="547.0848694559314" y1="-514.3281644464968"
y2="-445.6299317778301" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="103.78310212459807" x2="35.08486945593138" y1="-258.3281644464968"
y2="-189.6299317778301" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="359.7831021245981" x2="291.08486945593137" y1="-258.3281644464968"
y2="-189.6299317778301" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="615.783102124598" x2="547.0848694559314" y1="-258.3281644464968"
y2="-189.6299317778301" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="103.78310212459807" x2="35.08486945593138" y1="-2.328164446496814"
y2="66.37006822216988" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="359.7831021245981" x2="291.08486945593137" y1="-2.328164446496814"
y2="66.37006822216988" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="615.783102124598" x2="547.0848694559314" y1="-2.328164446496814"
y2="66.37006822216988" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="103.78310212459807" x2="35.08486945593138" y1="253.67183555350317"
y2="322.3700682221699" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="211.69894364075495" x2="194.13528259328754" y1="166.21741462144607"
y2="183.78107566891347" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="211.69894364075495" x2="194.13528259328754" y1="-345.7825853785539"
y2="-328.21892433108655" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="467.6989436407549" x2="450.13528259328757" y1="-345.7825853785539"
y2="-328.21892433108655" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="723.6989436407549" x2="706.1352825932876" y1="-345.7825853785539"
y2="-328.21892433108655" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="211.69894364075495" x2="194.13528259328754" y1="-89.78258537855393"
y2="-72.21892433108653" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="467.6989436407549" x2="450.13528259328757" y1="-89.78258537855393"
y2="-72.21892433108653" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="723.6989436407549" x2="706.1352825932876" y1="-89.78258537855393"
y2="-72.21892433108653" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="211.69894364075495" x2="194.13528259328754" y1="166.21741462144607"
y2="183.78107566891347" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="467.6989436407549" x2="450.13528259328757" y1="166.21741462144607"
y2="183.78107566891347" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="723.6989436407549" x2="706.1352825932876" y1="166.21741462144607"
y2="183.78107566891347" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="44.012515207413756" x2="6.2920050630466875" y1="153.79537767995515"
y2="191.5158878243222" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="44.012515207413756" x2="6.2920050630466875" y1="-358.20462232004485"
y2="-320.4841121756778" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="300.01251520741374" x2="262.2920050630467" y1="-358.20462232004485"
y2="-320.4841121756778" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="556.0125152074138" x2="518.2920050630466" y1="-358.20462232004485"
y2="-320.4841121756778" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="44.012515207413756" x2="6.2920050630466875" y1="-102.20462232004485"
y2="-64.48411217567781" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="300.01251520741374" x2="262.2920050630467" y1="-102.20462232004485"
y2="-64.48411217567781" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="556.0125152074138" x2="518.2920050630466" y1="-102.20462232004485"
y2="-64.48411217567781" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="44.012515207413756" x2="6.2920050630466875" y1="153.79537767995515"
y2="191.5158878243222" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="300.01251520741374" x2="262.2920050630467" y1="153.79537767995515"
y2="191.5158878243222" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="556.0125152074138" x2="518.2920050630466" y1="153.79537767995515"
y2="191.5158878243222" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="105.49237048043514" x2="31.549625942354083" y1="123.41684480916788"
y2="197.35958934724894" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="105.49237048043514" x2="31.549625942354083" y1="-388.58315519083214"
y2="-314.64041065275103" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="361.49237048043517" x2="287.54962594235406" y1="-388.58315519083214"
y2="-314.64041065275103" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="617.4923704804352" x2="543.549625942354" y1="-388.58315519083214"
y2="-314.64041065275103" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="105.49237048043514" x2="31.549625942354083" y1="-132.58315519083212"
y2="-58.64041065275106" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="361.49237048043517" x2="287.54962594235406" y1="-132.58315519083212"
y2="-58.64041065275106" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="617.4923704804352" x2="543.549625942354" y1="-132.58315519083212"
y2="-58.64041065275106" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="105.49237048043514" x2="31.549625942354083" y1="123.41684480916788"
y2="197.35958934724894" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="361.49237048043517" x2="287.54962594235406" y1="123.41684480916788"
y2="197.35958934724894" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="617.4923704804352" x2="543.549625942354" y1="123.41684480916788"
y2="197.35958934724894" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<animateTransform attributeName="transform" type="translate" values="0 0;-256 256"
keyTimes="0;1" repeatCount="indefinite" dur="10s"></animateTransform>
</g>
<g>
<line x1="95.73622575770466" x2="50.085335235319484" y1="20.45659654328417"
y2="66.10748706566935" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="95.73622575770466" x2="50.085335235319484" y1="-491.54340345671585"
y2="-445.8925129343306" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="351.7362257577047" x2="306.08533523531946" y1="-491.54340345671585"
y2="-445.8925129343306" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="607.7362257577047" x2="562.0853352353195" y1="-491.54340345671585"
y2="-445.8925129343306" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="95.73622575770466" x2="50.085335235319484" y1="-235.54340345671582"
y2="-189.89251293433065" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="351.7362257577047" x2="306.08533523531946" y1="-235.54340345671582"
y2="-189.89251293433065" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="607.7362257577047" x2="562.0853352353195" y1="-235.54340345671582"
y2="-189.89251293433065" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="95.73622575770466" x2="50.085335235319484" y1="20.45659654328417"
y2="66.10748706566935" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="351.7362257577047" x2="306.08533523531946" y1="20.45659654328417"
y2="66.10748706566935" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="607.7362257577047" x2="562.0853352353195" y1="20.45659654328417"
y2="66.10748706566935" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="263.34308373797757" x2="226.59561736370148" y1="112.42933995479353"
y2="149.17680632906962" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="263.34308373797757" x2="226.59561736370148" y1="-399.57066004520647"
y2="-362.8231936709304" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="519.3430837379776" x2="482.5956173637015" y1="-399.57066004520647"
y2="-362.8231936709304" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="775.3430837379776" x2="738.5956173637014" y1="-399.57066004520647"
y2="-362.8231936709304" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="263.34308373797757" x2="226.59561736370148" y1="-143.57066004520647"
y2="-106.82319367093038" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="519.3430837379776" x2="482.5956173637015" y1="-143.57066004520647"
y2="-106.82319367093038" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="775.3430837379776" x2="738.5956173637014" y1="-143.57066004520647"
y2="-106.82319367093038" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="263.34308373797757" x2="226.59561736370148" y1="112.42933995479353"
y2="149.17680632906962" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="519.3430837379776" x2="482.5956173637015" y1="112.42933995479353"
y2="149.17680632906962" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="775.3430837379776" x2="738.5956173637014" y1="112.42933995479353"
y2="149.17680632906962" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="7.343083737977565" x2="-29.40438263629852" y1="112.42933995479353"
y2="149.17680632906962" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="29.5343611349199" x2="-26.261040392985034" y1="205.16777076655512"
y2="260.96317229446004" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="29.5343611349199" x2="-26.261040392985034" y1="-306.8322292334449"
y2="-251.03682770553996" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="285.5343611349199" x2="229.73895960701498" y1="-306.8322292334449"
y2="-251.03682770553996" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="541.5343611349199" x2="485.738959607015" y1="-306.8322292334449"
y2="-251.03682770553996" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="29.5343611349199" x2="-26.261040392985034" y1="-50.83222923344488"
y2="4.963172294460037" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="285.5343611349199" x2="229.73895960701498" y1="-50.83222923344488"
y2="4.963172294460037" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="541.5343611349199" x2="485.738959607015" y1="-50.83222923344488"
y2="4.963172294460037" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="29.5343611349199" x2="-26.261040392985034" y1="205.16777076655512"
y2="260.96317229446004" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="285.5343611349199" x2="229.73895960701498" y1="205.16777076655512"
y2="260.96317229446004" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="541.5343611349199" x2="485.738959607015" y1="205.16777076655512"
y2="260.96317229446004" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="235.025028503587" x2="173.48946106938683" y1="23.306929884424335"
y2="84.84249731862451" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="235.025028503587" x2="173.48946106938683" y1="-488.69307011557567"
y2="-427.1575026813755" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="491.025028503587" x2="429.48946106938683" y1="-488.69307011557567"
y2="-427.1575026813755" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="747.025028503587" x2="685.4894610693868" y1="-488.69307011557567"
y2="-427.1575026813755" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="235.025028503587" x2="173.48946106938683" y1="-232.69307011557567"
y2="-171.1575026813755" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="491.025028503587" x2="429.48946106938683" y1="-232.69307011557567"
y2="-171.1575026813755" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="747.025028503587" x2="685.4894610693868" y1="-232.69307011557567"
y2="-171.1575026813755" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="235.025028503587" x2="173.48946106938683" y1="23.306929884424335"
y2="84.84249731862451" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="491.025028503587" x2="429.48946106938683" y1="23.306929884424335"
y2="84.84249731862451" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="747.025028503587" x2="685.4894610693868" y1="23.306929884424335"
y2="84.84249731862451" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="225.00990918130768" x2="200.62370409686488" y1="210.1052181599721"
y2="234.4914232444149" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="225.00990918130768" x2="200.62370409686488" y1="-301.8947818400279"
y2="-277.50857675558507" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="481.00990918130765" x2="456.6237040968649" y1="-301.8947818400279"
y2="-277.50857675558507" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="737.0099091813076" x2="712.6237040968649" y1="-301.8947818400279"
y2="-277.50857675558507" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="225.00990918130768" x2="200.62370409686488" y1="-45.89478184002789"
y2="-21.508576755585096" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="481.00990918130765" x2="456.6237040968649" y1="-45.89478184002789"
y2="-21.508576755585096" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="737.0099091813076" x2="712.6237040968649" y1="-45.89478184002789"
y2="-21.508576755585096" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="225.00990918130768" x2="200.62370409686488" y1="210.1052181599721"
y2="234.4914232444149" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="481.00990918130765" x2="456.6237040968649" y1="210.1052181599721"
y2="234.4914232444149" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="737.0099091813076" x2="712.6237040968649" y1="210.1052181599721"
y2="234.4914232444149" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="171.55017713954658" x2="102.05334080042758" y1="78.55895711807653"
y2="148.05579345719553" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="171.55017713954658" x2="102.05334080042758" y1="-433.44104288192347"
y2="-363.94420654280447" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="427.5501771395466" x2="358.0533408004276" y1="-433.44104288192347"
y2="-363.94420654280447" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="683.5501771395466" x2="614.0533408004276" y1="-433.44104288192347"
y2="-363.94420654280447" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="171.55017713954658" x2="102.05334080042758" y1="-177.44104288192347"
y2="-107.94420654280447" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="427.5501771395466" x2="358.0533408004276" y1="-177.44104288192347"
y2="-107.94420654280447" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="683.5501771395466" x2="614.0533408004276" y1="-177.44104288192347"
y2="-107.94420654280447" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="171.55017713954658" x2="102.05334080042758" y1="78.55895711807653"
y2="148.05579345719553" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="427.5501771395466" x2="358.0533408004276" y1="78.55895711807653"
y2="148.05579345719553" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="683.5501771395466" x2="614.0533408004276" y1="78.55895711807653"
y2="148.05579345719553" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="258.4358284744095" x2="228.09906783279462" y1="10.646186924515469"
y2="40.98294756613034" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="258.4358284744095" x2="228.09906783279462" y1="-501.35381307548454"
y2="-471.01705243386965" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="514.4358284744095" x2="484.0990678327946" y1="-501.35381307548454"
y2="-471.01705243386965" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="770.4358284744095" x2="740.0990678327946" y1="-501.35381307548454"
y2="-471.01705243386965" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="258.4358284744095" x2="228.09906783279462" y1="-245.35381307548454"
y2="-215.01705243386965" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="514.4358284744095" x2="484.0990678327946" y1="-245.35381307548454"
y2="-215.01705243386965" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="770.4358284744095" x2="740.0990678327946" y1="-245.35381307548454"
y2="-215.01705243386965" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="258.4358284744095" x2="228.09906783279462" y1="10.646186924515469"
y2="40.98294756613034" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="514.4358284744095" x2="484.0990678327946" y1="10.646186924515469"
y2="40.98294756613034" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="770.4358284744095" x2="740.0990678327946" y1="10.646186924515469"
y2="40.98294756613034" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="2.4358284744095045" x2="-27.900932167205383" y1="10.646186924515469"
y2="40.98294756613034" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="35.41624886616098" x2="-5.966808810922494" y1="10.151780697595989"
y2="51.53483837467946" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="35.41624886616098" x2="-5.966808810922494" y1="-501.848219302404"
y2="-460.46516162532055" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="291.41624886616097" x2="250.0331911890775" y1="-501.848219302404"
y2="-460.46516162532055" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="547.416248866161" x2="506.0331911890775" y1="-501.848219302404"
y2="-460.46516162532055" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="35.41624886616098" x2="-5.966808810922494" y1="-245.848219302404"
y2="-204.46516162532055" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="291.41624886616097" x2="250.0331911890775" y1="-245.848219302404"
y2="-204.46516162532055" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="547.416248866161" x2="506.0331911890775" y1="-245.848219302404"
y2="-204.46516162532055" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="35.41624886616098" x2="-5.966808810922494" y1="10.151780697595989"
y2="51.53483837467946" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="291.41624886616097" x2="250.0331911890775" y1="10.151780697595989"
y2="51.53483837467946" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="547.416248866161" x2="506.0331911890775" y1="10.151780697595989"
y2="51.53483837467946" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="90.76285286976488" x2="72.92514980496989" y1="79.79001478147771"
y2="97.6277178462727" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="90.76285286976488" x2="72.92514980496989" y1="-432.2099852185223"
y2="-414.37228215372727" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="346.76285286976486" x2="328.9251498049699" y1="-432.2099852185223"
y2="-414.37228215372727" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="602.7628528697649" x2="584.9251498049699" y1="-432.2099852185223"
y2="-414.37228215372727" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="90.76285286976488" x2="72.92514980496989" y1="-176.2099852185223"
y2="-158.3722821537273" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="346.76285286976486" x2="328.9251498049699" y1="-176.2099852185223"
y2="-158.3722821537273" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="602.7628528697649" x2="584.9251498049699" y1="-176.2099852185223"
y2="-158.3722821537273" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="90.76285286976488" x2="72.92514980496989" y1="79.79001478147771"
y2="97.6277178462727" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="346.76285286976486" x2="328.9251498049699" y1="79.79001478147771"
y2="97.6277178462727" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="602.7628528697649" x2="584.9251498049699" y1="79.79001478147771"
y2="97.6277178462727" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<animateTransform attributeName="transform" type="translate" values="0 0;-256 256"
keyTimes="0;1" repeatCount="indefinite" dur="5s"></animateTransform>
</g>
<g>
<line x1="93.6896305353637" x2="75.71575147590588" y1="83.83758835275793"
y2="101.81146741221576" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="93.6896305353637" x2="75.71575147590588" y1="-428.16241164724204"
y2="-410.18853258778427" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="349.6896305353637" x2="331.7157514759059" y1="-428.16241164724204"
y2="-410.18853258778427" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="605.6896305353637" x2="587.7157514759059" y1="-428.16241164724204"
y2="-410.18853258778427" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="93.6896305353637" x2="75.71575147590588" y1="-172.16241164724207"
y2="-154.18853258778424" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="349.6896305353637" x2="331.7157514759059" y1="-172.16241164724207"
y2="-154.18853258778424" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="605.6896305353637" x2="587.7157514759059" y1="-172.16241164724207"
y2="-154.18853258778424" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="93.6896305353637" x2="75.71575147590588" y1="83.83758835275793"
y2="101.81146741221576" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="349.6896305353637" x2="331.7157514759059" y1="83.83758835275793"
y2="101.81146741221576" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="605.6896305353637" x2="587.7157514759059" y1="83.83758835275793"
y2="101.81146741221576" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="207.24941141296466" x2="167.48134532138562" y1="234.55973050121918"
y2="274.3277965927982" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="207.24941141296466" x2="167.48134532138562" y1="-277.4402694987808"
y2="-237.67220340720178" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="463.24941141296466" x2="423.4813453213856" y1="-277.4402694987808"
y2="-237.67220340720178" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="719.2494114129647" x2="679.4813453213856" y1="-277.4402694987808"
y2="-237.67220340720178" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="207.24941141296466" x2="167.48134532138562" y1="-21.440269498780822"
y2="18.327796592798222" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="463.24941141296466" x2="423.4813453213856" y1="-21.440269498780822"
y2="18.327796592798222" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="719.2494114129647" x2="679.4813453213856" y1="-21.440269498780822"
y2="18.327796592798222" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="207.24941141296466" x2="167.48134532138562" y1="234.55973050121918"
y2="274.3277965927982" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="463.24941141296466" x2="423.4813453213856" y1="234.55973050121918"
y2="274.3277965927982" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="719.2494114129647" x2="679.4813453213856" y1="234.55973050121918"
y2="274.3277965927982" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="69.19671201083756" x2="20.15599089926107" y1="61.52941038272999"
y2="110.57013149430648" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="69.19671201083756" x2="20.15599089926107" y1="-450.47058961727"
y2="-401.42986850569355" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="325.1967120108376" x2="276.15599089926104" y1="-450.47058961727"
y2="-401.42986850569355" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="581.1967120108376" x2="532.155990899261" y1="-450.47058961727"
y2="-401.42986850569355" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="69.19671201083756" x2="20.15599089926107" y1="-194.47058961727"
y2="-145.42986850569352" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="325.1967120108376" x2="276.15599089926104" y1="-194.47058961727"
y2="-145.42986850569352" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="581.1967120108376" x2="532.155990899261" y1="-194.47058961727"
y2="-145.42986850569352" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="69.19671201083756" x2="20.15599089926107" y1="61.52941038272999"
y2="110.57013149430648" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="325.1967120108376" x2="276.15599089926104" y1="61.52941038272999"
y2="110.57013149430648" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="581.1967120108376" x2="532.155990899261" y1="61.52941038272999"
y2="110.57013149430648" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="153.36870174443493" x2="103.52218176454608" y1="129.93915864820679"
y2="179.78567862809564" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="153.36870174443493" x2="103.52218176454608" y1="-382.0608413517932"
y2="-332.21432137190436" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="409.36870174443493" x2="359.5221817645461" y1="-382.0608413517932"
y2="-332.21432137190436" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="665.3687017444349" x2="615.5221817645461" y1="-382.0608413517932"
y2="-332.21432137190436" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="153.36870174443493" x2="103.52218176454608" y1="-126.06084135179321"
y2="-76.21432137190436" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="409.36870174443493" x2="359.5221817645461" y1="-126.06084135179321"
y2="-76.21432137190436" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="665.3687017444349" x2="615.5221817645461" y1="-126.06084135179321"
y2="-76.21432137190436" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="153.36870174443493" x2="103.52218176454608" y1="129.93915864820679"
y2="179.78567862809564" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="409.36870174443493" x2="359.5221817645461" y1="129.93915864820679"
y2="179.78567862809564" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="665.3687017444349" x2="615.5221817645461" y1="129.93915864820679"
y2="179.78567862809564" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="49.20494471467643" x2="2.7142059537850685" y1="141.75997600855746"
y2="188.25071476944882" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="49.20494471467643" x2="2.7142059537850685" y1="-370.2400239914425"
y2="-323.7492852305512" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="305.20494471467646" x2="258.71420595378504" y1="-370.2400239914425"
y2="-323.7492852305512" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="561.2049447146765" x2="514.714205953785" y1="-370.2400239914425"
y2="-323.7492852305512" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="49.20494471467643" x2="2.7142059537850685" y1="-114.24002399144254"
y2="-67.74928523055118" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="305.20494471467646" x2="258.71420595378504" y1="-114.24002399144254"
y2="-67.74928523055118" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="561.2049447146765" x2="514.714205953785" y1="-114.24002399144254"
y2="-67.74928523055118" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="49.20494471467643" x2="2.7142059537850685" y1="141.75997600855746"
y2="188.25071476944882" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="305.20494471467646" x2="258.71420595378504" y1="141.75997600855746"
y2="188.25071476944882" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="561.2049447146765" x2="514.714205953785" y1="141.75997600855746"
y2="188.25071476944882" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="84.6808460539986" x2="32.68305955000314" y1="-7.711036017440037"
y2="44.28675048655542" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="84.6808460539986" x2="32.68305955000314" y1="-519.71103601744"
y2="-467.71324951344457" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="340.6808460539986" x2="288.6830595500031" y1="-519.71103601744"
y2="-467.71324951344457" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="596.6808460539986" x2="544.6830595500031" y1="-519.71103601744"
y2="-467.71324951344457" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="84.6808460539986" x2="32.68305955000314" y1="-263.71103601744005"
y2="-211.71324951344457" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="340.6808460539986" x2="288.6830595500031" y1="-263.71103601744005"
y2="-211.71324951344457" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="596.6808460539986" x2="544.6830595500031" y1="-263.71103601744005"
y2="-211.71324951344457" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="84.6808460539986" x2="32.68305955000314" y1="-7.711036017440037"
y2="44.28675048655542" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="340.6808460539986" x2="288.6830595500031" y1="-7.711036017440037"
y2="44.28675048655542" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="596.6808460539986" x2="544.6830595500031" y1="-7.711036017440037"
y2="44.28675048655542" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="84.6808460539986" x2="32.68305955000314" y1="248.28896398255995"
y2="300.28675048655543" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="225.38342310559023" x2="185.66602314192056" y1="109.68961591653738"
y2="149.40701588020704" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="225.38342310559023" x2="185.66602314192056" y1="-402.3103840834626"
y2="-362.59298411979296" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="481.3834231055902" x2="441.66602314192056" y1="-402.3103840834626"
y2="-362.59298411979296" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="737.3834231055903" x2="697.6660231419205" y1="-402.3103840834626"
y2="-362.59298411979296" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="225.38342310559023" x2="185.66602314192056" y1="-146.31038408346262"
y2="-106.59298411979296" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="481.3834231055902" x2="441.66602314192056" y1="-146.31038408346262"
y2="-106.59298411979296" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="737.3834231055903" x2="697.6660231419205" y1="-146.31038408346262"
y2="-106.59298411979296" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="225.38342310559023" x2="185.66602314192056" y1="109.68961591653738"
y2="149.40701588020704" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="481.3834231055902" x2="441.66602314192056" y1="109.68961591653738"
y2="149.40701588020704" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="737.3834231055903" x2="697.6660231419205" y1="109.68961591653738"
y2="149.40701588020704" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="172.83662370669697" x2="103.52581079778793" y1="164.45975635392284"
y2="233.77056926283188" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="172.83662370669697" x2="103.52581079778793" y1="-347.54024364607716"
y2="-278.2294307371681" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="428.83662370669697" x2="359.5258107977879" y1="-347.54024364607716"
y2="-278.2294307371681" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="684.836623706697" x2="615.5258107977879" y1="-347.54024364607716"
y2="-278.2294307371681" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="172.83662370669697" x2="103.52581079778793" y1="-91.54024364607716"
y2="-22.229430737168116" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="428.83662370669697" x2="359.5258107977879" y1="-91.54024364607716"
y2="-22.229430737168116" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="684.836623706697" x2="615.5258107977879" y1="-91.54024364607716"
y2="-22.229430737168116" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="172.83662370669697" x2="103.52581079778793" y1="164.45975635392284"
y2="233.77056926283188" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="428.83662370669697" x2="359.5258107977879" y1="164.45975635392284"
y2="233.77056926283188" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="684.836623706697" x2="615.5258107977879" y1="164.45975635392284"
y2="233.77056926283188" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="254.85435949520382" x2="240.10841684705935" y1="-1.209429949430282"
y2="13.536512698714214" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="254.85435949520382" x2="240.10841684705935" y1="-513.2094299494303"
y2="-498.4634873012858" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="510.8543594952038" x2="496.10841684705935" y1="-513.2094299494303"
y2="-498.4634873012858" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="766.8543594952039" x2="752.1084168470593" y1="-513.2094299494303"
y2="-498.4634873012858" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="254.85435949520382" x2="240.10841684705935" y1="-257.2094299494303"
y2="-242.4634873012858" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="510.8543594952038" x2="496.10841684705935" y1="-257.2094299494303"
y2="-242.4634873012858" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="766.8543594952039" x2="752.1084168470593" y1="-257.2094299494303"
y2="-242.4634873012858" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="254.85435949520382" x2="240.10841684705935" y1="-1.209429949430282"
y2="13.536512698714214" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="510.8543594952038" x2="496.10841684705935" y1="-1.209429949430282"
y2="13.536512698714214" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="766.8543594952039" x2="752.1084168470593" y1="-1.209429949430282"
y2="13.536512698714214" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="254.85435949520382" x2="240.10841684705935" y1="254.79057005056973"
y2="269.5365126987142" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<animateTransform attributeName="transform" type="translate" values="0 0;-256 256"
keyTimes="0;1" repeatCount="indefinite" dur="10.3333333333333335s"></animateTransform>
</g>
</g>
</pattern>
</defs>
<rect x="0" y="0" width="1084" height="322" fill="url(#pid-0.7735807359934106)"></rect>
</svg>

View file

@ -0,0 +1,146 @@
<svg id="canvas" height="100%" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.dev/svgjs" viewBox="0 0 600 600"><rect width="600" height="600" fill="transparent"></rect><mask id="mask" mask-type="alpha" maskUnits="userSpaceOnUse"><rect transform="translate(0, 0)" width="600" height="600" fill="white"></rect></mask><svg><path transform="translate(0, 0 translate(30,30) rotate(180) translate(-30,-30)" d="M0 60C33.1371 60 60 33.1371 60 5.24537e-06L5.24537e-06 0L0 60Z" fill="#03045e"></path></svg><svg><path transform="translate(0, 3600 translate(30,30) rotate(270) translate(-30,-30)" d="M0 60C33.1371 60 60 33.1371 60 5.24537e-06L5.24537e-06 0L0 60Z" fill="#90e0ef"></path></svg><svg><path transform="
translate(0, 120)
" d="M0 0h60v60H0z" fill="
#90e0ef"></path></svg><svg><path transform="translate(0, 10800 translate(30,30) rotate(270) translate(-30,-30)" d="M0 60C33.1371 60 60 33.1371 60 5.24537e-06L5.24537e-06 0L0 60Z" fill="#00b4d8"></path></svg><svg><path transform="translate(0,240) translate(30,30) rotate(270) translate(-30,-30)" fill="#ade8f4" d="M60 0v60H0V0z"></path><path transform="translate(0,240) translate(30,30) rotate(270) translate(-30,-30)" fill="#03045e" d="M60 0v60H0C0 26.863 26.863 0 60 0z"></path></svg><svg><path transform="translate(0, 300) translate(30,30) rotate(180) translate(-30,-30)" fill="#023e8a" d="M0 0h60v60H0z"></path><circle cx="30" cy="30" r="30" transform="translate(0, 300) translate(30,30) rotate(180) translate(-30,-30)" fill="#caf0f8"></circle></svg><svg><path transform="translate(0,360) translate(30,30) rotate(90) translate(-30,-30)" fill="#0096c7" d="M60 0v60H0V0z"></path><path transform="translate(0,360) translate(30,30) rotate(90) translate(-30,-30)" fill="#caf0f8" d="M60 0v60H0C0 26.863 26.863 0 60 0z"></path></svg><svg><path transform="translate(0, 25200 translate(30,30) rotate(270) translate(-30,-30)" d="M0 60C33.1371 60 60 33.1371 60 5.24537e-06L5.24537e-06 0L0 60Z" fill="#00b4d8"></path></svg><svg><circle cx="30" cy="30" r="30" transform="
translate(0, 480)
" fill="
#0077b6
"></circle></svg><svg><circle cx="30" cy="30" r="30" transform="
translate(0, 540)
" fill="
#90e0ef
"></circle></svg><svg><path transform="translate(3600, 0 translate(30,30) rotate(0) translate(-30,-30)" d="M0 60C33.1371 60 60 33.1371 60 5.24537e-06L5.24537e-06 0L0 60Z" fill="#ade8f4"></path></svg><svg><path transform="
translate(60, 60)
" d="M0 0h60v60H0z" fill="
#48cae4"></path></svg><svg><path transform="
translate(60, 120)
" d="M0 0h60v60H0z" fill="
#90e0ef"></path></svg><svg><path transform="translate(3600, 10800 translate(30,30) rotate(0) translate(-30,-30)" d="M0 60C33.1371 60 60 33.1371 60 5.24537e-06L5.24537e-06 0L0 60Z" fill="#023e8a"></path></svg><svg><path transform="translate(3600, 14400 translate(30,30) rotate(180) translate(-30,-30)" d="M0 60C33.1371 60 60 33.1371 60 5.24537e-06L5.24537e-06 0L0 60Z" fill="#03045e"></path></svg><svg><path transform="
translate(60, 300)
" d="M0 0h60v60H0z" fill="
#00b4d8"></path></svg><svg><circle cx="30" cy="30" r="30" transform="
translate(60, 360)
" fill="
#03045e
"></circle></svg><svg><path transform="translate(60,420) translate(30,30) rotate(90) translate(-30,-30)" fill="#90e0ef" d="M60 0v60H0V0z"></path><path transform="translate(60,420) translate(30,30) rotate(90) translate(-30,-30)" fill="#00b4d8" d="M60 0v60H0C0 26.863 26.863 0 60 0z"></path></svg><svg><path transform="translate(60,480) translate(30,30) rotate(90) translate(-30,-30)" fill="#0096c7" d="M60 0v60H0V0z"></path><path transform="translate(60,480) translate(30,30) rotate(90) translate(-30,-30)" fill="#0096c7" d="M60 0v60H0C0 26.863 26.863 0 60 0z"></path></svg><svg><path transform="translate(3600, 32400 translate(30,30) rotate(180) translate(-30,-30)" d="M0 60C33.1371 60 60 33.1371 60 5.24537e-06L5.24537e-06 0L0 60Z" fill="#03045e"></path></svg><svg><circle cx="30" cy="30" r="30" transform="
translate(120, 0)
" fill="
#00b4d8
"></circle></svg><svg><path transform="translate(120,60) translate(30,30) rotate(180) translate(-30,-30)" fill="#caf0f8" d="M60 0v60H0V0z"></path><path transform="translate(120,60) translate(30,30) rotate(180) translate(-30,-30)" fill="#90e0ef" d="M60 0v60H0C0 26.863 26.863 0 60 0z"></path></svg><svg><circle cx="30" cy="30" r="30" transform="
translate(120, 120)
" fill="
#00b4d8
"></circle></svg><svg><path transform="translate(120, 180) translate(30,30) rotate(180) translate(-30,-30)" fill="#48cae4" d="M0 0h60v60H0z"></path><circle cx="30" cy="30" r="30" transform="translate(120, 180) translate(30,30) rotate(180) translate(-30,-30)" fill="#023e8a"></circle></svg><svg><path transform="translate(120, 240) translate(30,30) rotate(180) translate(-30,-30)" fill="#03045e" d="M0 0h60v60H0z"></path><circle cx="30" cy="30" r="30" transform="translate(120, 240) translate(30,30) rotate(180) translate(-30,-30)" fill="#00b4d8"></circle></svg><svg><path transform="translate(7200, 18000 translate(30,30) rotate(270) translate(-30,-30)" d="M0 60C33.1371 60 60 33.1371 60 5.24537e-06L5.24537e-06 0L0 60Z" fill="#90e0ef"></path></svg><svg><path transform="translate(7200, 21600 translate(30,30) rotate(90) translate(-30,-30)" d="M0 60C33.1371 60 60 33.1371 60 5.24537e-06L5.24537e-06 0L0 60Z" fill="#023e8a"></path></svg><svg><circle cx="30" cy="30" r="30" transform="
translate(120, 420)
" fill="
#023e8a
"></circle></svg><svg><path transform="
translate(120, 480)
" d="M0 0h60v60H0z" fill="
#48cae4"></path></svg><svg><circle cx="30" cy="30" r="30" transform="
translate(120, 540)
" fill="
#00b4d8
"></circle></svg><svg><path transform="translate(10800, 0 translate(30,30) rotate(0) translate(-30,-30)" d="M0 60C33.1371 60 60 33.1371 60 5.24537e-06L5.24537e-06 0L0 60Z" fill="#00b4d8"></path></svg><svg><path transform="
translate(180, 60)
" d="M0 0h60v60H0z" fill="
#023e8a"></path></svg><svg><path transform="translate(180,120) translate(30,30) rotate(90) translate(-30,-30)" fill="#ade8f4" d="M60 0v60H0V0z"></path><path transform="translate(180,120) translate(30,30) rotate(90) translate(-30,-30)" fill="#00b4d8" d="M60 0v60H0C0 26.863 26.863 0 60 0z"></path></svg><svg><path transform="
translate(180, 180)
" d="M0 0h60v60H0z" fill="
#0096c7"></path></svg><svg><circle cx="30" cy="30" r="30" transform="
translate(180, 240)
" fill="
#90e0ef
"></circle></svg><svg><path transform="translate(180,300) translate(30,30) rotate(0) translate(-30,-30)" fill="#0096c7" d="M60 0v60H0V0z"></path><path transform="translate(180,300) translate(30,30) rotate(0) translate(-30,-30)" fill="#023e8a" d="M60 0v60H0C0 26.863 26.863 0 60 0z"></path></svg><svg><path transform="
translate(180, 360)
" d="M0 0h60v60H0z" fill="
#00b4d8"></path></svg><svg><path transform="
translate(180, 420)
" d="M0 0h60v60H0z" fill="
#90e0ef"></path></svg><svg><path transform="
translate(180, 480)
" d="M0 0h60v60H0z" fill="
#0077b6"></path></svg><svg><path transform="translate(10800, 32400 translate(30,30) rotate(0) translate(-30,-30)" d="M0 60C33.1371 60 60 33.1371 60 5.24537e-06L5.24537e-06 0L0 60Z" fill="#ade8f4"></path></svg><svg><path transform="translate(14400, 0 translate(30,30) rotate(180) translate(-30,-30)" d="M0 60C33.1371 60 60 33.1371 60 5.24537e-06L5.24537e-06 0L0 60Z" fill="#0077b6"></path></svg><svg><path transform="translate(240, 60) translate(30,30) rotate(180) translate(-30,-30)" fill="#0096c7" d="M0 0h60v60H0z"></path><circle cx="30" cy="30" r="30" transform="translate(240, 60) translate(30,30) rotate(180) translate(-30,-30)" fill="#023e8a"></circle></svg><svg><path transform="
translate(240, 120)
" d="M0 0h60v60H0z" fill="
#0096c7"></path></svg><svg><path transform="
translate(240, 180)
" d="M0 0h60v60H0z" fill="
#00b4d8"></path></svg><svg><path transform="translate(14400, 14400 translate(30,30) rotate(0) translate(-30,-30)" d="M0 60C33.1371 60 60 33.1371 60 5.24537e-06L5.24537e-06 0L0 60Z" fill="#caf0f8"></path></svg><svg><path transform="
translate(240, 300)
" d="M0 0h60v60H0z" fill="
#0096c7"></path></svg><svg><path transform="translate(240, 360) translate(30,30) rotate(270) translate(-30,-30)" fill="#0077b6" d="M0 0h60v60H0z"></path><circle cx="30" cy="30" r="30" transform="translate(240, 360) translate(30,30) rotate(270) translate(-30,-30)" fill="#ade8f4"></circle></svg><svg><path transform="translate(240,420) translate(30,30) rotate(270) translate(-30,-30)" fill="#023e8a" d="M60 0v60H0V0z"></path><path transform="translate(240,420) translate(30,30) rotate(270) translate(-30,-30)" fill="#00b4d8" d="M60 0v60H0C0 26.863 26.863 0 60 0z"></path></svg><svg><path transform="translate(240,480) translate(30,30) rotate(180) translate(-30,-30)" fill="#48cae4" d="M60 0v60H0V0z"></path><path transform="translate(240,480) translate(30,30) rotate(180) translate(-30,-30)" fill="#0096c7" d="M60 0v60H0C0 26.863 26.863 0 60 0z"></path></svg><svg><circle cx="30" cy="30" r="30" transform="
translate(240, 540)
" fill="
#90e0ef
"></circle></svg><svg><path transform="translate(18000, 0 translate(30,30) rotate(270) translate(-30,-30)" d="M0 60C33.1371 60 60 33.1371 60 5.24537e-06L5.24537e-06 0L0 60Z" fill="#0077b6"></path></svg><svg><path transform="
translate(300, 60)
" d="M0 0h60v60H0z" fill="
#023e8a"></path></svg><svg><path transform="translate(18000, 7200 translate(30,30) rotate(90) translate(-30,-30)" d="M0 60C33.1371 60 60 33.1371 60 5.24537e-06L5.24537e-06 0L0 60Z" fill="#ade8f4"></path></svg><svg><path transform="
translate(300, 180)
" d="M0 0h60v60H0z" fill="
#caf0f8"></path></svg><svg><path transform="translate(300,240) translate(30,30) rotate(270) translate(-30,-30)" fill="#0096c7" d="M60 0v60H0V0z"></path><path transform="translate(300,240) translate(30,30) rotate(270) translate(-30,-30)" fill="#0096c7" d="M60 0v60H0C0 26.863 26.863 0 60 0z"></path></svg><svg><path transform="
translate(300, 300)
" d="M0 0h60v60H0z" fill="
#03045e"></path></svg><svg><path transform="translate(18000, 21600 translate(30,30) rotate(0) translate(-30,-30)" d="M0 60C33.1371 60 60 33.1371 60 5.24537e-06L5.24537e-06 0L0 60Z" fill="#48cae4"></path></svg><svg><path transform="
translate(300, 420)
" d="M0 0h60v60H0z" fill="
#90e0ef"></path></svg><svg><path transform="translate(18000, 28800 translate(30,30) rotate(90) translate(-30,-30)" d="M0 60C33.1371 60 60 33.1371 60 5.24537e-06L5.24537e-06 0L0 60Z" fill="#023e8a"></path></svg><svg><path transform="translate(300,540) translate(30,30) rotate(0) translate(-30,-30)" fill="#48cae4" d="M60 0v60H0V0z"></path><path transform="translate(300,540) translate(30,30) rotate(0) translate(-30,-30)" fill="#90e0ef" d="M60 0v60H0C0 26.863 26.863 0 60 0z"></path></svg><svg><path transform="translate(360,0) translate(30,30) rotate(270) translate(-30,-30)" fill="#0077b6" d="M60 0v60H0V0z"></path><path transform="translate(360,0) translate(30,30) rotate(270) translate(-30,-30)" fill="#90e0ef" d="M60 0v60H0C0 26.863 26.863 0 60 0z"></path></svg><svg><circle cx="30" cy="30" r="30" transform="
translate(360, 60)
" fill="
#caf0f8
"></circle></svg><svg><path transform="translate(360,120) translate(30,30) rotate(180) translate(-30,-30)" fill="#caf0f8" d="M60 0v60H0V0z"></path><path transform="translate(360,120) translate(30,30) rotate(180) translate(-30,-30)" fill="#0096c7" d="M60 0v60H0C0 26.863 26.863 0 60 0z"></path></svg><svg><path transform="
translate(360, 180)
" d="M0 0h60v60H0z" fill="
#0077b6"></path></svg><svg><path transform="translate(360,240) translate(30,30) rotate(270) translate(-30,-30)" fill="#00b4d8" d="M60 0v60H0V0z"></path><path transform="translate(360,240) translate(30,30) rotate(270) translate(-30,-30)" fill="#00b4d8" d="M60 0v60H0C0 26.863 26.863 0 60 0z"></path></svg><svg><path transform="translate(360, 300) translate(30,30) rotate(180) translate(-30,-30)" fill="#0096c7" d="M0 0h60v60H0z"></path><circle cx="30" cy="30" r="30" transform="translate(360, 300) translate(30,30) rotate(180) translate(-30,-30)" fill="#023e8a"></circle></svg><svg><path transform="
translate(360, 360)
" d="M0 0h60v60H0z" fill="
#ade8f4"></path></svg><svg><path transform="translate(360,420) translate(30,30) rotate(90) translate(-30,-30)" fill="#0096c7" d="M60 0v60H0V0z"></path><path transform="translate(360,420) translate(30,30) rotate(90) translate(-30,-30)" fill="#0096c7" d="M60 0v60H0C0 26.863 26.863 0 60 0z"></path></svg><svg><circle cx="30" cy="30" r="30" transform="
translate(360, 480)
" fill="
#ade8f4
"></circle></svg><svg><circle cx="30" cy="30" r="30" transform="
translate(360, 540)
" fill="
#ade8f4
"></circle></svg><svg><path transform="translate(420,0) translate(30,30) rotate(270) translate(-30,-30)" fill="#023e8a" d="M60 0v60H0V0z"></path><path transform="translate(420,0) translate(30,30) rotate(270) translate(-30,-30)" fill="#0096c7" d="M60 0v60H0C0 26.863 26.863 0 60 0z"></path></svg><svg><path transform="translate(25200, 3600 translate(30,30) rotate(0) translate(-30,-30)" d="M0 60C33.1371 60 60 33.1371 60 5.24537e-06L5.24537e-06 0L0 60Z" fill="#0096c7"></path></svg><svg><path transform="
translate(420, 120)
" d="M0 0h60v60H0z" fill="
#48cae4"></path></svg><svg><path transform="translate(420,180) translate(30,30) rotate(90) translate(-30,-30)" fill="#0077b6" d="M60 0v60H0V0z"></path><path transform="translate(420,180) translate(30,30) rotate(90) translate(-30,-30)" fill="#023e8a" d="M60 0v60H0C0 26.863 26.863 0 60 0z"></path></svg><svg><path transform="translate(25200, 14400 translate(30,30) rotate(270) translate(-30,-30)" d="M0 60C33.1371 60 60 33.1371 60 5.24537e-06L5.24537e-06 0L0 60Z" fill="#48cae4"></path></svg><svg><path transform="translate(420,300) translate(30,30) rotate(180) translate(-30,-30)" fill="#00b4d8" d="M60 0v60H0V0z"></path><path transform="translate(420,300) translate(30,30) rotate(180) translate(-30,-30)" fill="#48cae4" d="M60 0v60H0C0 26.863 26.863 0 60 0z"></path></svg><svg><path transform="translate(25200, 21600 translate(30,30) rotate(180) translate(-30,-30)" d="M0 60C33.1371 60 60 33.1371 60 5.24537e-06L5.24537e-06 0L0 60Z" fill="#023e8a"></path></svg><svg><circle cx="30" cy="30" r="30" transform="
translate(420, 420)
" fill="
#023e8a
"></circle></svg><svg><path transform="translate(420,480) translate(30,30) rotate(90) translate(-30,-30)" fill="#ade8f4" d="M60 0v60H0V0z"></path><path transform="translate(420,480) translate(30,30) rotate(90) translate(-30,-30)" fill="#caf0f8" d="M60 0v60H0C0 26.863 26.863 0 60 0z"></path></svg><svg><path transform="
translate(420, 540)
" d="M0 0h60v60H0z" fill="
#ade8f4"></path></svg><svg><circle cx="30" cy="30" r="30" transform="
translate(480, 0)
" fill="
#03045e
"></circle></svg><svg><path transform="
translate(480, 60)
" d="M0 0h60v60H0z" fill="
#023e8a"></path></svg><svg><path transform="translate(28800, 7200 translate(30,30) rotate(270) translate(-30,-30)" d="M0 60C33.1371 60 60 33.1371 60 5.24537e-06L5.24537e-06 0L0 60Z" fill="#00b4d8"></path></svg><svg><path transform="translate(480,180) translate(30,30) rotate(90) translate(-30,-30)" fill="#48cae4" d="M60 0v60H0V0z"></path><path transform="translate(480,180) translate(30,30) rotate(90) translate(-30,-30)" fill="#ade8f4" d="M60 0v60H0C0 26.863 26.863 0 60 0z"></path></svg><svg><path transform="
translate(480, 240)
" d="M0 0h60v60H0z" fill="
#48cae4"></path></svg><svg><path transform="
translate(480, 300)
" d="M0 0h60v60H0z" fill="
#90e0ef"></path></svg><svg><path transform="translate(480, 360) translate(30,30) rotate(270) translate(-30,-30)" fill="#ade8f4" d="M0 0h60v60H0z"></path><circle cx="30" cy="30" r="30" transform="translate(480, 360) translate(30,30) rotate(270) translate(-30,-30)" fill="#03045e"></circle></svg><svg><path transform="translate(480,420) translate(30,30) rotate(180) translate(-30,-30)" fill="#90e0ef" d="M60 0v60H0V0z"></path><path transform="translate(480,420) translate(30,30) rotate(180) translate(-30,-30)" fill="#caf0f8" d="M60 0v60H0C0 26.863 26.863 0 60 0z"></path></svg><svg><circle cx="30" cy="30" r="30" transform="
translate(480, 480)
" fill="
#03045e
"></circle></svg><svg><path transform="translate(28800, 32400 translate(30,30) rotate(90) translate(-30,-30)" d="M0 60C33.1371 60 60 33.1371 60 5.24537e-06L5.24537e-06 0L0 60Z" fill="#00b4d8"></path></svg><svg><path transform="translate(540,0) translate(30,30) rotate(270) translate(-30,-30)" fill="#90e0ef" d="M60 0v60H0V0z"></path><path transform="translate(540,0) translate(30,30) rotate(270) translate(-30,-30)" fill="#023e8a" d="M60 0v60H0C0 26.863 26.863 0 60 0z"></path></svg><svg><path transform="translate(540, 60) translate(30,30) rotate(270) translate(-30,-30)" fill="#0077b6" d="M0 0h60v60H0z"></path><circle cx="30" cy="30" r="30" transform="translate(540, 60) translate(30,30) rotate(270) translate(-30,-30)" fill="#0077b6"></circle></svg><svg><path transform="translate(540, 120) translate(30,30) rotate(90) translate(-30,-30)" fill="#90e0ef" d="M0 0h60v60H0z"></path><circle cx="30" cy="30" r="30" transform="translate(540, 120) translate(30,30) rotate(90) translate(-30,-30)" fill="#0096c7"></circle></svg><svg><path transform="translate(32400, 10800 translate(30,30) rotate(0) translate(-30,-30)" d="M0 60C33.1371 60 60 33.1371 60 5.24537e-06L5.24537e-06 0L0 60Z" fill="#90e0ef"></path></svg><svg><path transform="translate(540, 240) translate(30,30) rotate(90) translate(-30,-30)" fill="#0096c7" d="M0 0h60v60H0z"></path><circle cx="30" cy="30" r="30" transform="translate(540, 240) translate(30,30) rotate(90) translate(-30,-30)" fill="#0077b6"></circle></svg><svg><path transform="
translate(540, 300)
" d="M0 0h60v60H0z" fill="
#023e8a"></path></svg><svg><path transform="translate(540, 360) translate(30,30) rotate(0) translate(-30,-30)" fill="#00b4d8" d="M0 0h60v60H0z"></path><circle cx="30" cy="30" r="30" transform="translate(540, 360) translate(30,30) rotate(0) translate(-30,-30)" fill="#00b4d8"></circle></svg><svg><path transform="
translate(540, 420)
" d="M0 0h60v60H0z" fill="
#0077b6"></path></svg><svg><path transform="
translate(540, 480)
" d="M0 0h60v60H0z" fill="
#48cae4"></path></svg><svg><circle cx="30" cy="30" r="30" transform="
translate(540, 540)
" fill="
#0096c7
"></circle></svg></svg>

After

Width:  |  Height:  |  Size: 18 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 737 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 811 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 892 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 499 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 509 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 504 KiB

View file

@ -0,0 +1,88 @@
---
title: "Homepage Layout"
weight: 5
draft: false
description: "Configurazione del layout della home page nel tema Blowfish."
slug: "homepage-layout"
tags: ["homepage", "layouts", "docs"]
series: ["Documentazione"]
series_order: 5
---
Blowfish fornisce un layout della home page completamente flessibile. Sono disponibili due modelli principali tra cui scegliere con impostazioni aggiuntive per adattare il design. In alternativa, puoi anche fornire il tuo modello e avere il controllo completo sul contenuto della home page.
Il layout della home page è controllato dall'impostazione `homepage.layout` nel file di configurazione `params.toml`. Inoltre, tutti i layout hanno la possibilità di includere un elenco di [articoli recenti](#recent-articles).
## Profile layout
Il layout predefinito è quello del profilo, ideale per i siti web e i blog personali. Mette i dettagli dell'autore in primo piano, fornendo un'immagine e i link ai profili sociali.
<img class="thumbnailshadow" src="img/home-profile.png"/>
Le informazioni sull'autore sono fornite nel file di configurazione delle lingue. Fare riferimento alle sezioni [Guida introduttiva]({{< ref "getting-started" >}}) e [Configurazione della lingua]({{< ref "configuration##language-and-i18n" >}}) per i dettagli sui parametri.
Inoltre, qualsiasi contenuto Markdown fornito nel contenuto della homepage sarà collocato sotto il profilo dell'autore. Ciò consente una maggiore flessibilità per la visualizzazione di una biografia o di altri contenuti personalizzati utilizzando gli shortcode.
Per abilitare il layout del profilo, impostare `homepage.layout = “profile”` nel file di configurazione `params.toml`.
## Page layout
Il layout di pagina è semplicemente una normale pagina di contenuto che visualizza il contenuto Markdown. È ottimo per i siti web statici e offre una grande flessibilità.
<img class="thumbnailshadow" src="img/home-page.png"/>
Per abilitare il layout di pagina, impostare `homepage.layout = “page”` nel file di configurazione `params.toml`.
## Hero layout
Il layout hero riunisce le idee dei layout profilo e scheda. Questo non solo mostra le informazioni sull'autore del sito, ma carica anche il markdown sotto di esso.
<img class="thumbnailshadow" src="img/home-hero.png"/>
Per abilitare il layout Hero, impostare `homepage.layout = “hero”` e `homepage.homepageImage` nel file di configurazione `params.toml`.
## Background layout
Il layout di sfondo è una versione più fluida del layout Hero. Come nel layout Hero, anche in questo caso vengono visualizzate le informazioni sull'autore del sito e viene caricato il markdown sotto di esso.
<img class="thumbnailshadow" src="img/home-background.png"/>
Per abilitare il layout di sfondo, impostare `homepage.layout = “background”` e `homepage.homepageImage` nel file di configurazione `params.toml`.
## Card layout
Il layout delle schede è un'estensione del layout di pagina. Offre lo stesso livello di flessibilità, visualizzando anche i contenuti markdown e aggiungendo un'immagine per visualizzare i contenuti visivi.
<img class="thumbnailshadow" src="img/home-card.png"/>
Per abilitare il layout a scheda, impostare `homepage.layout = “card”` e `homepage.homepageImage` nel file di configurazione `params.toml`.
## Custom layout
Se i layout integrati della homepage non sono sufficienti per le vostre esigenze, avete la possibilità di creare un layout personalizzato. Questo permette di avere un controllo totale sul contenuto della pagina e fornisce essenzialmente una lavagna vuota con cui lavorare.
Per abilitare il layout personalizzato, impostare `homepage.layout = “custom”` nel file di configurazione `params.toml`.
Con il valore di configurazione impostato, creare un nuovo file `custom.html` e collocarlo in `layouts/partials/home/custom.html`. Ora tutto ciò che è contenuto nel file `custom.html` sarà collocato nell'area dei contenuti della homepage del sito. È possibile utilizzare qualsiasi funzione HTML, Tailwind o Hugo per definire il layout.
Per includere [articoli recenti](#recent-articles) nel layout personalizzato, utilizzare il partial `recent-articles/main.html`.
Ad esempio, la [homepage]({{< ref "/" >}}) di questo sito utilizza il layout personalizzato per consentire di passare dal layout del profilo a quello della pagina. Visitare il [repo GitHub](https://github.com/nunocoracao/blowfish/blob/main/exampleSite/layouts/partials/home/custom.html) per vedere come funziona.
## Articoli recenti
Tutti i layout delle homepage hanno la possibilità di visualizzare gli articoli recenti sotto il contenuto della pagina principale. Per attivarla, è sufficiente impostare l'opzione `homepage.showRecent` a `true` nel file di configurazione `params.toml`.
<img class="thumbnailshadow" src="img/home-list.png"/>
Gli articoli elencati in questa sezione sono derivati dall'impostazione `mainSections`, che consente di utilizzare i tipi di contenuto del sito web. Per esempio, se si hanno sezioni di contenuto per _post_ e _progetti_, si può impostare questa impostazione su `[“post”, “progetti”]` e tutti gli articoli di queste due sezioni saranno utilizzati per popolare l'elenco dei recenti. Il tema si aspetta che questa impostazione sia un array, quindi se si utilizza una sola sezione per tutti i contenuti, è necessario impostarla di conseguenza: `[“blog”]`.
## Thumbnails
Blowfish è stato creato in modo che sia facile aggiungere supporto visivo ai tuoi articoli. Se hai familiarità con la struttura dell'articolo di Hugo, devi solo inserire un file immagine (quasi tutti i formati sono supportati ma consigliamo `.png` o `.jpg`) che inizi con `feature*` all'interno della cartella dell'articolo. E questo è tutto, Blowfish sarà quindi in grado di utilizzare l'immagine sia come miniatura all'interno del tuo sito web sia per le schede <a target="_blank" href="https://oembed.com/">oEmbed</a> su piattaforme sociali.
[Qui]({{< ref "thumbnails" >}}) si trova una guida con maggiori informazioni e un [sample]({{< ref "thumbnail_sample" >}}) se si vuole vedere un esempio.
## Card Gallery
Blowfish supporta anche la visualizzazione degli elenchi standard di articoli come gallerie di schede. È possibile configurare questo sia per la sezione recente nella homepage che per gli elenchi di articoli nel sito web. Per la homepage si può usare `homepage.cardView` e `homepage.cardViewScreenWidth`; per gli elenchi si può usare `list.cardView` e `list.cardViewScreenWidth`. Per maggiori dettagli, consultare i [docs di configurazione] ({{< ref "configuration" >}}) e la homepage per una dimostrazione dal vivo.

View file

@ -0,0 +1,88 @@
---
title: "ホームページレイアウト"
weight: 5
draft: false
description: "Blowfish テーマのホームページレイアウト設定"
slug: "homepage-layout"
tags: ["homepage", "layouts", "docs"]
series: ["Documentation"]
series_order: 5
---
Blowfish は完全に柔軟なホームページレイアウトを提供します。2つのメインテンプレートから選択でき、追加設定でデザインを調整できます。または、独自のテンプレートを提供して、ホームページのコンテンツを完全に制御することもできます。
ホームページのレイアウトは、`params.toml` 設定ファイルの `homepage.layout` 設定によって制御されます。さらに、すべてのレイアウトには、[最新記事](#最新記事)のリストを含めるオプションがあります。
## プロフィールレイアウト (profile)
デフォルトのレイアウトはプロフィールレイアウトで、個人ウェブサイトやブログに最適です。画像とソーシャルプロファイルへのリンクを提供することで、著者の詳細を前面に押し出します。
<img class="thumbnailshadow" src="img/home-profile.png"/>
著者情報は、言語設定ファイルで提供されます。パラメータの詳細については、[始める]({{< ref "getting-started" >}})と[言語設定]({{< ref "configuration#言語と-i18n" >}})セクションを参照してください。
さらに、ホームページのコンテンツで提供される Markdown コンテンツはすべて、著者プロファイルの下に配置されます。これにより、ショートコードを使用して経歴やその他のカスタムコンテンツを表示するための柔軟性が向上します。
プロフィールレイアウトを有効にするには、`params.toml` 設定ファイルで `homepage.layout = "profile"` と設定します。
## ページレイアウト (page)
ページレイアウトは、Markdown コンテンツを表示する通常のコンテンツページです。静的ウェブサイトに最適で、高い柔軟性を提供します。
<img class="thumbnailshadow" src="img/home-page.png"/>
ページレイアウトを有効にするには、`params.toml` 設定ファイルで `homepage.layout = "page"` を設定します。
## ヒーローレイアウト (hero)
ヒーローレイアウトは、プロフィールレイアウトとカードレイアウトのアイデアを組み合わせたものです。これは、サイトの著者に関する情報を表示するだけでなく、その下に Markdown をロードします。
<img class="thumbnailshadow" src="img/home-hero.png"/>
ヒーローレイアウトを有効にするには、`params.toml` 設定ファイルで `homepage.layout = "hero"``homepage.homepageImage` を設定します。
## 背景レイアウト (background)
背景レイアウトは、ヒーローレイアウトをより滑らかにしたバージョンです。ヒーローレイアウトと同様に、サイトの著者に関する情報を表示し、その下に Markdown をロードします。
<img class="thumbnailshadow" src="img/home-background.png"/>
背景レイアウトを有効にするには、`params.toml` 設定ファイルで `homepage.layout = "background"``homepage.homepageImage` を設定します。
## カードレイアウト (card)
カードレイアウトは、ページレイアウトの拡張版です。Markdown コンテンツも表示することで同じレベルの柔軟性を提供し、ビジュアルコンテンツを表示するためのカード画像も追加します。
<img class="thumbnailshadow" src="img/home-card.png"/>
カードレイアウトを有効にするには、`params.toml` 設定ファイルで `homepage.layout = "card"``homepage.homepageImage` を設定します。
## カスタムレイアウト
組み込みのホームページレイアウトがニーズに合わない場合は、独自のカスタムレイアウトを提供するオプションがあります。これにより、ページコンテンツを完全に制御でき、基本的に作業するための白紙の状態が得られます。
カスタムレイアウトを有効にするには、`params.toml` 設定ファイルで `homepage.layout = "custom"` を設定します。
設定値を設定したら、新しい `custom.html` ファイルを作成し、`layouts/partials/home/custom.html` に配置します。これで、`custom.html` ファイルの内容がサイトのホームページのコンテンツ領域に配置されます。レイアウトを定義するために、HTML、Tailwind、または Hugo テンプレート関数を自由に使用できます。
カスタムレイアウトに[最新記事](#最新記事)を含めるには、`recent-articles/main.html` パーシャルを使用します。
例として、このサイトの[ホームページ]({{< ref "/" >}})では、カスタムレイアウトを使用して、プロフィールレイアウトとページレイアウトを切り替えています。動作を確認するには、[GitHub リポジトリ](https://github.com/nunocoracao/blowfish/blob/main/exampleSite/layouts/partials/home/custom.html)にアクセスしてください。
## 最新記事
すべてのホームページレイアウトには、メインページコンテンツの下に最新記事を表示するオプションがあります。これを有効にするには、`params.toml` 設定ファイルで `homepage.showRecent` 設定を `true` に設定するだけです。
<img class="thumbnailshadow" src="img/home-list.png"/>
このセクションにリストされている記事は、`mainSections` 設定から派生したもので、ウェブサイトで使用しているコンテンツタイプを指定できます。たとえば、_posts_ と _projects_ のコンテンツセクションがある場合、この設定を `["posts", "projects"]` に設定すると、これら2つのセクションのすべての記事が最新リストに表示されます。テーマはこの設定を配列として想定しているため、すべてのコンテンツに1つのセクションのみを使用する場合は、それに応じて設定する必要があります: `["blog"]`
## サムネイル
Blowfish は、記事にビジュアルサポートを簡単に追加できるように構築されています。Hugo の記事構造に慣れている場合は、記事フォルダ内に `feature*` で始まる画像ファイル (ほとんどすべての形式がサポートされていますが、`.png` または `.jpg` を推奨) を配置するだけです。それだけで、Blowfish はその画像をサイト内のサムネイルとして使用したり、ソーシャルプラットフォーム全体の <a target="_blank" href="https://oembed.com/">oEmbed</a> カードに使用したりできるようになります。
詳細情報と例を確認したい場合は、[こちら]({{< ref "thumbnails" >}})にガイドがあります。
## カードギャラリー
Blowfish は、記事の標準リストをカードギャラリーとして表示することもサポートしています。これは、ホームページの最新セクションとサイト全体の記事リストの両方で設定できます。ホームページの場合は `homepage.cardView``homepage.cardViewScreenWidth` を使用し、リストの場合は `list.cardView``list.cardViewScreenWidth` を使用します。詳細については、[設定ドキュメント]({{< ref "configuration" >}})を確認し、ライブデモについてはホームページを確認してください。

View file

@ -0,0 +1,89 @@
---
title: "Homepage Layout"
weight: 5
draft: false
description: "Configuring the homepage layout in the Blowfish theme."
slug: "homepage-layout"
tags: ["homepage", "layouts", "docs"]
series: ["Documentation"]
series_order: 5
---
Blowfish provides a fully flexible homepage layout. There are two main templates to choose from with additional settings to adjust the design. Alternatively, you can also provide your own template and have complete control over the homepage content.
The layout of the homepage is controlled by the `homepage.layout` setting in the `params.toml` configuration file. Additionally, all layouts have the option to include a listing of [recent articles](#recent-articles).
## Profile layout
The default layout is the profile layout, which is great for personal websites and blogs. It puts the author's details front and centre by providing an image and links to social profiles.
<img class="thumbnailshadow" src="img/home-profile.png"/>
The author information is provided in the languages configuration file. Refer to the [Getting Started]({{< ref "getting-started" >}}) and [Language Configuration]({{< ref "configuration##language-and-i18n" >}}) sections for parameter details.
Additionally, any Markdown content that is provided in the homepage content will be placed below the author profile. This allows extra flexibility for displaying a bio or other custom content using shortcodes.
To enable the Profile layout, set `homepage.layout = "profile"` in the `params.toml` configuration file.
## Page layout
The page layout is simply a normal content page that displays your Markdown content. It's great for static websites and provides a lot of flexibility.
<img class="thumbnailshadow" src="img/home-page.png"/>
To enable the Page layout, set `homepage.layout = "page"` in the `params.toml` configuration file.
## Hero layout
The hero layout brings together ideas from the profile and card layouts. This one not only displays information on the author of the site but it also loads your markdown beneath it.
<img class="thumbnailshadow" src="img/home-hero.png"/>
To enable the Hero layout, set `homepage.layout = "hero"` and `homepage.homepageImage` in the `params.toml` configuration file.
## Background layout
The background layout is a more smooth version of the hero layout. As in the Hero layout, this one also displays both information on the author of the site and loads your markdown beneath it.
<img class="thumbnailshadow" src="img/home-background.png"/>
To enable the Background layout, set `homepage.layout = "background"` and `homepage.homepageImage` in the `params.toml` configuration file.
## Card layout
The card layout is an extension of the page layout. It provides the same level of flexibility by also displaying your markdown content and adds a card image to display visual content.
<img class="thumbnailshadow" src="img/home-card.png"/>
To enable the Card layout, set `homepage.layout = "card"` and `homepage.homepageImage` in the `params.toml` configuration file.
## Custom layout
If the built-in homepage layouts aren't sufficient for your needs, you have the option to provide your own custom layout. This allows you to have total control over the page content and essentially gives you a blank slate to work with.
To enable the Custom layout, set `homepage.layout = "custom"` in the `params.toml` configuration file.
With the configuration value set, create a new `custom.html` file and place it in `layouts/partials/home/custom.html`. Now whatever is in the `custom.html` file will be placed in the content area of the site homepage. You may use whatever HTML, Tailwind, or Hugo templating functions you wish to define your layout.
To include [recent articles](#recent-articles) on the custom layout, use the `recent-articles/main.html` partial.
As an example, the [homepage]({{< ref "/" >}}) on this site uses the custom layout to allow toggling between the profile and page layouts. Visit the [GitHub repo](https://github.com/nunocoracao/blowfish/blob/main/exampleSite/layouts/partials/home/custom.html) to see how it works.
## Recent articles
All homepage layouts have the option of displaying recent articles below the main page content. To enable this, simply set the `homepage.showRecent` setting to `true` in the `params.toml` configuration file.
<img class="thumbnailshadow" src="img/home-list.png"/>
The articles listed in this section are derived from the `mainSections` setting which allows for whatever content types you are using on your website. For instance, if you had content sections for _posts_ and _projects_ you could set this setting to `["posts", "projects"]` and all the articles in these two sections would be used to populate the recent list. The theme expects this setting to be an array so if you only use one section for all your content, you should set this accordingly: `["blog"]`.
## Thumbnails
Blowfish was built so it would be easy to add visual support to your articles. If your familiar with Hugo article structure, you just need to place an image file (almost all formats are supported bue we recommend `.png` or `.jpg`) that starts with `feature*` inside your article folder. And that's it, Blowfish will then able to both use the image as a thumbnail within your website as well as for <a target="_blank" href="https://oembed.com/">oEmbed</a> cards across social platforms.
[Here]({{< ref "thumbnails" >}}) is a guide with more info and a [sample]({{< ref "thumbnail_sample" >}}) if you want to see an example.
## Card Gallery
Blowfish also supports displaying the standard lists of articles as card galleries. You can config this both for the recent section in the homepage and for lists of articles across your website. For homepage you can use `homepage.cardView` and `homepage.cardViewScreenWidth`; and for lists use `list.cardView` and `list.cardViewScreenWidth`. Check the [Configuration docs]({{< ref "configuration" >}}) for more details, and the homepage for a live demo.

View file

@ -0,0 +1,91 @@
---
title: "主页布局"
weight: 5
draft: false
description: "在 Blowfish 主题中设置主页布局。"
slug: "homepage-layout"
tags: ["主页", "布局", "文档"]
series: ["部署教程"]
series_order: 5
---
Blowfish 提供了一个完全灵活的主页布局。你可以选择两种主要模板,并提供了额外的参数来帮助调整设计。当然,你也可以提供自己的模板,完全控制主页的内容。
主页布局由 `params.toml` 配置文件中的 `homepage.layout` 参数来控制的。此外所有布局都默认包括 [最近文章](#recent-articles)。
## 个人资料布局 (profile)
默认的布局是 profile 布局,这非常适合个人网站和博客。它将作者的详细信息置于中心位置,并附带了头像和社交平台的链接。
<img class="thumbnailshadow" src="img/home-profile.png"/>
作者信息是在语言配置文件中提供的。具体的参数详情,请参考[快速入门]({{< ref "getting-started" >}})和[语言配置]({{< ref "configuration##language-and-i18n" >}})的内容。
此外,主页内容中提供的任何 Markdown 都会显示在作者资料的下方。这对使用短代码显示简介或其他主页的自定义内容提供了更多的灵活性。
如果想要启用 profile 布局,请在 `params.toml` 配置文件中设置 `homepage.layout = "profile"`
## 页面布局page
页面布局只会简单的显示你的 Markdown 内容,这种方式非常适合静态网站,并提供了很多灵活性。
<img class="thumbnailshadow" src="img/home-page.png"/>
如果想要启用 page 布局,请在 `params.toml` 配置文件中设置 `homepage.layout = "page"`
## 英雄布局hero
英雄布局hero组合了个人资料布局profile和卡片布局card。它不仅显示了网站作者的个人信息还在个人资料下方加载了你的 markdown 内容。
<img class="thumbnailshadow" src="img/home-hero.png"/>
如果想要启用 hero 布局,请在 `params.toml` 配置文件中设置 `homepage.layout = "hero"`
## 背景布局background
背景布局background相对于英雄布局hero更叫平滑。和英雄布局hero类似它也显示了网站作者的信息并在其下方加载 markdown 内容。
<img class="thumbnailshadow" src="img/home-background.png"/>
如果想要启用 background 布局,请在 `params.toml` 配置文件中设置 `homepage.layout = "background"``homepage.homepageImage`
## 卡片布局card
卡片模板card是在页面布局上的扩展它同样提供了灵活性。在显示了你的 markdown 内容的同时,展示了一个卡片组件中的图像。
<img class="thumbnailshadow" src="img/home-card.png"/>
如果想要启用 card 布局,请在 `params.toml` 配置文件中设置 `homepage.layout = "card"``homepage.homepageImage`
## 自定义布局custom
如果以上几个布局还没有满足你的需求,你还可以自己创建自定义布局。这样你可以基于一个空白的画布,来完全控制页面上的内容。
如果想要启用 custom 布局,请在 `params.toml` 配置文件中设置 `homepage.layout = "custom"`
配置好参数后,在 `layouts/partials/home` 目录下创建一个 `custom.html` 文件。 `custom.html` 文件中定义的任何内容都会被放置在网站主页的内容区域。你可以使用 HTML、Tailwind 或 Hugo 模板函数来定义你的布局。
如果你想在自定义布局上添加 [最近文章](#recent-articles),请使用 `recent-articles/main.html` 中的内容。
如果你想在网站[主页]({{< ref "/" >}})使用自定义布局来实现在个人资料和页面布局之间的切换。这里的[GitHub 仓库](https://github.com/nunocoracao/blowfish/blob/main/exampleSite/layouts/partials/home/custom.html)有一个例子可以参考。
## 最近文章
所有的主页布局都可以在主要内容下方显示最近文章。如果想要启用此功能,只需要在 `params.toml` 配置文件中将 `homepage.showRecent` 参数设置为 `true` 即可。
<img class="thumbnailshadow" src="img/home-list.png"/>
这部分会列举出你在 `mainSections` 参数中设置的文章列表,此参数允许你使用网站上的任何内容类型。例如,如果你想在最新文章中展示 _posts__projects_ 内容中的文章,你可以将此值设置为 `["posts", "projects"]`这两个部分中的所有文章都会填充到最近文章列表中。Blowfish 主题期望这个参数是一个数组,如果你只想设置一个部分的所有文章,你可以设置为 `["blog"]` 即可。
## 缩略图
Blowfish 为你的文章提供了视觉支持。如果你熟悉 Hugo 的文章结构,只需要在你的文章对应的文件夹中防止一个以`feature*`开头的图像文件即可,图像类型几乎支持所有格式,更推荐使用`.png` 或者 `.jpg`。这样一来Blowfish 将会在你的网站内使用该图片作为缩略图,并用在社交媒体平台上的 <a target="_blank" href="https://oembed.com/">oEmbed</a> 卡片中。
[这是]({{< ref "thumbnails" >}})有更多详细内容,并且有一个便于理解的[示例]({{< ref "thumbnail_sample" >}})。
## 卡片画廊
Blowfish 支持将标准的文章列表显示为卡片画廊,你可以在主页的最近文章和网站上的文章列表中配置这个选项。
- 对于主页可以使用 `homepage.cardView``homepage.cardViewScreenWidth` 参数
- 对于列表页可以使用 `list.cardView``list.cardViewScreenWidth` 参数
请查看 [配置文件]({{< ref "configuration" >}}) 以获取更多信息。

View file

@ -0,0 +1,24 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="margin:auto;background:rgba(NaN, NaN, NaN, 0);display:block;z-index:1;position:relative" width="1084" height="322" preserveAspectRatio="xMidYMid" viewBox="0 0 1084 322">
<defs>
<pattern id="pid-0.1520523902861448" x="0" y="0" width="665.6" height="665.6" patternUnits="userSpaceOnUse">
<g transform="scale(2.6)"><path d="M -256 9.314285714285713 C -192 9.314285714285713 -192 2 -128 2 C -64 2 -64 9.314285714285713 2 9.314285714285713 C 64 9.314285714285713 64 2 128 2 C 192 2 192 9.314285714285713 256 9.314285714285713 L 384 384 L -384 384 L -384 9.314285714285713 Z" fill="none" stroke="#93dbe9" stroke-width="10" transform="translate(0 -36.57142857142857)">
<animateTransform attributeName="transform" type="translate" values="256 -36.57142857142857;0 -36.57142857142857;256 -36.57142857142857" keyTimes="0;0.5;1" dur="20s" repeatCount="indefinite" calcMode="spline" begin="0s" keySplines="0.5 0 0.5 1;0.5 0 0.5 1"></animateTransform>
</path><path d="M -256 9.314285714285713 C -192 9.314285714285713 -192 2 -128 2 C -64 2 -64 9.314285714285713 2 9.314285714285713 C 64 9.314285714285713 64 2 128 2 C 192 2 192 9.314285714285713 256 9.314285714285713 L 384 384 L -384 384 L -384 9.314285714285713 Z" fill="none" stroke="#689cc5" stroke-width="10" transform="translate(0 0)">
<animateTransform attributeName="transform" type="translate" values="0 0;256 0;0 0" keyTimes="0;0.5;1" dur="20s" repeatCount="indefinite" calcMode="spline" begin="-1.4285714285714284s" keySplines="0.5 0 0.5 1;0.5 0 0.5 1"></animateTransform>
</path><path d="M -256 9.314285714285713 C -192 9.314285714285713 -192 2 -128 2 C -64 2 -64 9.314285714285713 2 9.314285714285713 C 64 9.314285714285713 64 2 128 2 C 192 2 192 9.314285714285713 256 9.314285714285713 L 384 384 L -384 384 L -384 9.314285714285713 Z" fill="none" stroke="#5e6fa3" stroke-width="10" transform="translate(0 36.57142857142857)">
<animateTransform attributeName="transform" type="translate" values="256 36.57142857142857;0 36.57142857142857;256 36.57142857142857" keyTimes="0;0.5;1" dur="20s" repeatCount="indefinite" calcMode="spline" begin="-2.8571428571428568s" keySplines="0.5 0 0.5 1;0.5 0 0.5 1"></animateTransform>
</path><path d="M -256 9.314285714285713 C -192 9.314285714285713 -192 2 -128 2 C -64 2 -64 9.314285714285713 2 9.314285714285713 C 64 9.314285714285713 64 2 128 2 C 192 2 192 9.314285714285713 256 9.314285714285713 L 384 384 L -384 384 L -384 9.314285714285713 Z" fill="none" stroke="#3b4368" stroke-width="10" transform="translate(0 73.14285714285714)">
<animateTransform attributeName="transform" type="translate" values="0 73.14285714285714;256 73.14285714285714;0 73.14285714285714" keyTimes="0;0.5;1" dur="20s" repeatCount="indefinite" calcMode="spline" begin="-4.285714285714286s" keySplines="0.5 0 0.5 1;0.5 0 0.5 1"></animateTransform>
</path><path d="M -256 9.314285714285713 C -192 9.314285714285713 -192 2 -128 2 C -64 2 -64 9.314285714285713 2 9.314285714285713 C 64 9.314285714285713 64 2 128 2 C 192 2 192 9.314285714285713 256 9.314285714285713 L 384 384 L -384 384 L -384 9.314285714285713 Z" fill="none" stroke="#191d3a" stroke-width="10" transform="translate(0 109.71428571428571)">
<animateTransform attributeName="transform" type="translate" values="256 109.71428571428571;0 109.71428571428571;256 109.71428571428571" keyTimes="0;0.5;1" dur="20s" repeatCount="indefinite" calcMode="spline" begin="-5.7142857142857135s" keySplines="0.5 0 0.5 1;0.5 0 0.5 1"></animateTransform>
</path><path d="M -256 9.314285714285713 C -192 9.314285714285713 -192 2 -128 2 C -64 2 -64 9.314285714285713 2 9.314285714285713 C 64 9.314285714285713 64 2 128 2 C 192 2 192 9.314285714285713 256 9.314285714285713 L 384 384 L -384 384 L -384 9.314285714285713 Z" fill="none" stroke="#d9dbee" stroke-width="10" transform="translate(0 146.28571428571428)">
<animateTransform attributeName="transform" type="translate" values="0 146.28571428571428;256 146.28571428571428;0 146.28571428571428" keyTimes="0;0.5;1" dur="20s" repeatCount="indefinite" calcMode="spline" begin="-7.142857142857142s" keySplines="0.5 0 0.5 1;0.5 0 0.5 1"></animateTransform>
</path><path d="M -256 9.314285714285713 C -192 9.314285714285713 -192 2 -128 2 C -64 2 -64 9.314285714285713 2 9.314285714285713 C 64 9.314285714285713 64 2 128 2 C 192 2 192 9.314285714285713 256 9.314285714285713 L 384 384 L -384 384 L -384 9.314285714285713 Z" fill="none" stroke="#b3b7e2" stroke-width="10" transform="translate(0 182.85714285714286)">
<animateTransform attributeName="transform" type="translate" values="256 182.85714285714286;0 182.85714285714286;256 182.85714285714286" keyTimes="0;0.5;1" dur="20s" repeatCount="indefinite" calcMode="spline" begin="-8.571428571428571s" keySplines="0.5 0 0.5 1;0.5 0 0.5 1"></animateTransform>
</path><path d="M -256 9.314285714285713 C -192 9.314285714285713 -192 2 -128 2 C -64 2 -64 9.314285714285713 2 9.314285714285713 C 64 9.314285714285713 64 2 128 2 C 192 2 192 9.314285714285713 256 9.314285714285713 L 384 384 L -384 384 L -384 9.314285714285713 Z" fill="none" stroke="#93dbe9" stroke-width="10" transform="translate(0 219.42857142857142)">
<animateTransform attributeName="transform" type="translate" values="0 219.42857142857142;256 219.42857142857142;0 219.42857142857142" keyTimes="0;0.5;1" dur="20s" repeatCount="indefinite" calcMode="spline" begin="0s" keySplines="0.5 0 0.5 1;0.5 0 0.5 1"></animateTransform>
</path></g>
</pattern>
</defs>
<rect x="0" y="0" width="1084" height="322" fill="url(#pid-0.1520523902861448)"></rect>
</svg>

After

Width:  |  Height:  |  Size: 5.6 KiB

View file

@ -0,0 +1,574 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
style="margin:auto;background:rgba(NaN, NaN, NaN, 0);display:block;z-index:1;position:relative"
width="1084" height="322" preserveAspectRatio="xMidYMid" viewBox="0 0 1084 322">
<defs>
<pattern id="pid-0.7735807359934106" x="0" y="0" width="345.6" height="345.6"
patternUnits="userSpaceOnUse">
<g transform="scale(1.35)">
<g>
<line x1="237.6288884328494" x2="201.39714008747956" y1="119.05338354492488"
y2="155.28513189029474" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="237.6288884328494" x2="201.39714008747956" y1="-392.9466164550751"
y2="-356.71486810970526" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="493.6288884328494" x2="457.39714008747956" y1="-392.9466164550751"
y2="-356.71486810970526" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="749.6288884328494" x2="713.3971400874796" y1="-392.9466164550751"
y2="-356.71486810970526" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="237.6288884328494" x2="201.39714008747956" y1="-136.94661645507512"
y2="-100.71486810970526" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="493.6288884328494" x2="457.39714008747956" y1="-136.94661645507512"
y2="-100.71486810970526" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="749.6288884328494" x2="713.3971400874796" y1="-136.94661645507512"
y2="-100.71486810970526" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="237.6288884328494" x2="201.39714008747956" y1="119.05338354492488"
y2="155.28513189029474" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="493.6288884328494" x2="457.39714008747956" y1="119.05338354492488"
y2="155.28513189029474" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="749.6288884328494" x2="713.3971400874796" y1="119.05338354492488"
y2="155.28513189029474" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="244.43797352167968" x2="179.25167385613412" y1="196.21419032492787"
y2="261.40048999047343" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="244.43797352167968" x2="179.25167385613412" y1="-315.78580967507213"
y2="-250.59951000952657" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="500.4379735216797" x2="435.2516738561341" y1="-315.78580967507213"
y2="-250.59951000952657" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="756.4379735216796" x2="691.2516738561342" y1="-315.78580967507213"
y2="-250.59951000952657" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="244.43797352167968" x2="179.25167385613412" y1="-59.78580967507213"
y2="5.400489990473432" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="500.4379735216797" x2="435.2516738561341" y1="-59.78580967507213"
y2="5.400489990473432" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="756.4379735216796" x2="691.2516738561342" y1="-59.78580967507213"
y2="5.400489990473432" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="244.43797352167968" x2="179.25167385613412" y1="196.21419032492787"
y2="261.40048999047343" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="500.4379735216797" x2="435.2516738561341" y1="196.21419032492787"
y2="261.40048999047343" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="756.4379735216796" x2="691.2516738561342" y1="196.21419032492787"
y2="261.40048999047343" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="219.6724359102308" x2="209.2181431749452" y1="92.85808081141191"
y2="103.31237354669749" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="219.6724359102308" x2="209.2181431749452" y1="-419.1419191885881"
y2="-408.6876264533025" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="475.6724359102308" x2="465.2181431749452" y1="-419.1419191885881"
y2="-408.6876264533025" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="731.6724359102308" x2="721.2181431749452" y1="-419.1419191885881"
y2="-408.6876264533025" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="219.6724359102308" x2="209.2181431749452" y1="-163.14191918858808"
y2="-152.68762645330253" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="475.6724359102308" x2="465.2181431749452" y1="-163.14191918858808"
y2="-152.68762645330253" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="731.6724359102308" x2="721.2181431749452" y1="-163.14191918858808"
y2="-152.68762645330253" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="219.6724359102308" x2="209.2181431749452" y1="92.85808081141191"
y2="103.31237354669749" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="475.6724359102308" x2="465.2181431749452" y1="92.85808081141191"
y2="103.31237354669749" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="731.6724359102308" x2="721.2181431749452" y1="92.85808081141191"
y2="103.31237354669749" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="112.00565118011832" x2="71.15817744773324" y1="56.63419812919665"
y2="97.48167186158173" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="112.00565118011832" x2="71.15817744773324" y1="-455.36580187080335"
y2="-414.51832813841827" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="368.0056511801183" x2="327.15817744773324" y1="-455.36580187080335"
y2="-414.51832813841827" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="624.0056511801183" x2="583.1581774477332" y1="-455.36580187080335"
y2="-414.51832813841827" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="112.00565118011832" x2="71.15817744773324" y1="-199.36580187080335"
y2="-158.51832813841827" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="368.0056511801183" x2="327.15817744773324" y1="-199.36580187080335"
y2="-158.51832813841827" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="624.0056511801183" x2="583.1581774477332" y1="-199.36580187080335"
y2="-158.51832813841827" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="112.00565118011832" x2="71.15817744773324" y1="56.63419812919665"
y2="97.48167186158173" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="368.0056511801183" x2="327.15817744773324" y1="56.63419812919665"
y2="97.48167186158173" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="624.0056511801183" x2="583.1581774477332" y1="56.63419812919665"
y2="97.48167186158173" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="60.932966336476014" x2="49.388821076756514" y1="125.65681060957188"
y2="137.20095586929136" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="60.932966336476014" x2="49.388821076756514" y1="-386.3431893904281"
y2="-374.79904413070864" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="316.932966336476" x2="305.3888210767565" y1="-386.3431893904281"
y2="-374.79904413070864" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="572.932966336476" x2="561.3888210767565" y1="-386.3431893904281"
y2="-374.79904413070864" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="60.932966336476014" x2="49.388821076756514" y1="-130.3431893904281"
y2="-118.79904413070864" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="316.932966336476" x2="305.3888210767565" y1="-130.3431893904281"
y2="-118.79904413070864" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="572.932966336476" x2="561.3888210767565" y1="-130.3431893904281"
y2="-118.79904413070864" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="60.932966336476014" x2="49.388821076756514" y1="125.65681060957188"
y2="137.20095586929136" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="316.932966336476" x2="305.3888210767565" y1="125.65681060957188"
y2="137.20095586929136" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="572.932966336476" x2="561.3888210767565" y1="125.65681060957188"
y2="137.20095586929136" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="103.78310212459807" x2="35.08486945593138" y1="-2.328164446496814"
y2="66.37006822216988" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="103.78310212459807" x2="35.08486945593138" y1="-514.3281644464968"
y2="-445.6299317778301" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="359.7831021245981" x2="291.08486945593137" y1="-514.3281644464968"
y2="-445.6299317778301" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="615.783102124598" x2="547.0848694559314" y1="-514.3281644464968"
y2="-445.6299317778301" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="103.78310212459807" x2="35.08486945593138" y1="-258.3281644464968"
y2="-189.6299317778301" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="359.7831021245981" x2="291.08486945593137" y1="-258.3281644464968"
y2="-189.6299317778301" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="615.783102124598" x2="547.0848694559314" y1="-258.3281644464968"
y2="-189.6299317778301" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="103.78310212459807" x2="35.08486945593138" y1="-2.328164446496814"
y2="66.37006822216988" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="359.7831021245981" x2="291.08486945593137" y1="-2.328164446496814"
y2="66.37006822216988" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="615.783102124598" x2="547.0848694559314" y1="-2.328164446496814"
y2="66.37006822216988" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="103.78310212459807" x2="35.08486945593138" y1="253.67183555350317"
y2="322.3700682221699" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="211.69894364075495" x2="194.13528259328754" y1="166.21741462144607"
y2="183.78107566891347" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="211.69894364075495" x2="194.13528259328754" y1="-345.7825853785539"
y2="-328.21892433108655" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="467.6989436407549" x2="450.13528259328757" y1="-345.7825853785539"
y2="-328.21892433108655" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="723.6989436407549" x2="706.1352825932876" y1="-345.7825853785539"
y2="-328.21892433108655" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="211.69894364075495" x2="194.13528259328754" y1="-89.78258537855393"
y2="-72.21892433108653" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="467.6989436407549" x2="450.13528259328757" y1="-89.78258537855393"
y2="-72.21892433108653" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="723.6989436407549" x2="706.1352825932876" y1="-89.78258537855393"
y2="-72.21892433108653" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="211.69894364075495" x2="194.13528259328754" y1="166.21741462144607"
y2="183.78107566891347" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="467.6989436407549" x2="450.13528259328757" y1="166.21741462144607"
y2="183.78107566891347" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="723.6989436407549" x2="706.1352825932876" y1="166.21741462144607"
y2="183.78107566891347" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="44.012515207413756" x2="6.2920050630466875" y1="153.79537767995515"
y2="191.5158878243222" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="44.012515207413756" x2="6.2920050630466875" y1="-358.20462232004485"
y2="-320.4841121756778" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="300.01251520741374" x2="262.2920050630467" y1="-358.20462232004485"
y2="-320.4841121756778" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="556.0125152074138" x2="518.2920050630466" y1="-358.20462232004485"
y2="-320.4841121756778" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="44.012515207413756" x2="6.2920050630466875" y1="-102.20462232004485"
y2="-64.48411217567781" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="300.01251520741374" x2="262.2920050630467" y1="-102.20462232004485"
y2="-64.48411217567781" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="556.0125152074138" x2="518.2920050630466" y1="-102.20462232004485"
y2="-64.48411217567781" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="44.012515207413756" x2="6.2920050630466875" y1="153.79537767995515"
y2="191.5158878243222" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="300.01251520741374" x2="262.2920050630467" y1="153.79537767995515"
y2="191.5158878243222" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="556.0125152074138" x2="518.2920050630466" y1="153.79537767995515"
y2="191.5158878243222" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="105.49237048043514" x2="31.549625942354083" y1="123.41684480916788"
y2="197.35958934724894" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="105.49237048043514" x2="31.549625942354083" y1="-388.58315519083214"
y2="-314.64041065275103" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="361.49237048043517" x2="287.54962594235406" y1="-388.58315519083214"
y2="-314.64041065275103" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="617.4923704804352" x2="543.549625942354" y1="-388.58315519083214"
y2="-314.64041065275103" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="105.49237048043514" x2="31.549625942354083" y1="-132.58315519083212"
y2="-58.64041065275106" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="361.49237048043517" x2="287.54962594235406" y1="-132.58315519083212"
y2="-58.64041065275106" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="617.4923704804352" x2="543.549625942354" y1="-132.58315519083212"
y2="-58.64041065275106" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="105.49237048043514" x2="31.549625942354083" y1="123.41684480916788"
y2="197.35958934724894" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="361.49237048043517" x2="287.54962594235406" y1="123.41684480916788"
y2="197.35958934724894" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="617.4923704804352" x2="543.549625942354" y1="123.41684480916788"
y2="197.35958934724894" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<animateTransform attributeName="transform" type="translate" values="0 0;-256 256"
keyTimes="0;1" repeatCount="indefinite" dur="10s"></animateTransform>
</g>
<g>
<line x1="95.73622575770466" x2="50.085335235319484" y1="20.45659654328417"
y2="66.10748706566935" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="95.73622575770466" x2="50.085335235319484" y1="-491.54340345671585"
y2="-445.8925129343306" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="351.7362257577047" x2="306.08533523531946" y1="-491.54340345671585"
y2="-445.8925129343306" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="607.7362257577047" x2="562.0853352353195" y1="-491.54340345671585"
y2="-445.8925129343306" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="95.73622575770466" x2="50.085335235319484" y1="-235.54340345671582"
y2="-189.89251293433065" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="351.7362257577047" x2="306.08533523531946" y1="-235.54340345671582"
y2="-189.89251293433065" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="607.7362257577047" x2="562.0853352353195" y1="-235.54340345671582"
y2="-189.89251293433065" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="95.73622575770466" x2="50.085335235319484" y1="20.45659654328417"
y2="66.10748706566935" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="351.7362257577047" x2="306.08533523531946" y1="20.45659654328417"
y2="66.10748706566935" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="607.7362257577047" x2="562.0853352353195" y1="20.45659654328417"
y2="66.10748706566935" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="263.34308373797757" x2="226.59561736370148" y1="112.42933995479353"
y2="149.17680632906962" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="263.34308373797757" x2="226.59561736370148" y1="-399.57066004520647"
y2="-362.8231936709304" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="519.3430837379776" x2="482.5956173637015" y1="-399.57066004520647"
y2="-362.8231936709304" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="775.3430837379776" x2="738.5956173637014" y1="-399.57066004520647"
y2="-362.8231936709304" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="263.34308373797757" x2="226.59561736370148" y1="-143.57066004520647"
y2="-106.82319367093038" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="519.3430837379776" x2="482.5956173637015" y1="-143.57066004520647"
y2="-106.82319367093038" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="775.3430837379776" x2="738.5956173637014" y1="-143.57066004520647"
y2="-106.82319367093038" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="263.34308373797757" x2="226.59561736370148" y1="112.42933995479353"
y2="149.17680632906962" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="519.3430837379776" x2="482.5956173637015" y1="112.42933995479353"
y2="149.17680632906962" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="775.3430837379776" x2="738.5956173637014" y1="112.42933995479353"
y2="149.17680632906962" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="7.343083737977565" x2="-29.40438263629852" y1="112.42933995479353"
y2="149.17680632906962" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="29.5343611349199" x2="-26.261040392985034" y1="205.16777076655512"
y2="260.96317229446004" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="29.5343611349199" x2="-26.261040392985034" y1="-306.8322292334449"
y2="-251.03682770553996" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="285.5343611349199" x2="229.73895960701498" y1="-306.8322292334449"
y2="-251.03682770553996" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="541.5343611349199" x2="485.738959607015" y1="-306.8322292334449"
y2="-251.03682770553996" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="29.5343611349199" x2="-26.261040392985034" y1="-50.83222923344488"
y2="4.963172294460037" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="285.5343611349199" x2="229.73895960701498" y1="-50.83222923344488"
y2="4.963172294460037" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="541.5343611349199" x2="485.738959607015" y1="-50.83222923344488"
y2="4.963172294460037" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="29.5343611349199" x2="-26.261040392985034" y1="205.16777076655512"
y2="260.96317229446004" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="285.5343611349199" x2="229.73895960701498" y1="205.16777076655512"
y2="260.96317229446004" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="541.5343611349199" x2="485.738959607015" y1="205.16777076655512"
y2="260.96317229446004" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="235.025028503587" x2="173.48946106938683" y1="23.306929884424335"
y2="84.84249731862451" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="235.025028503587" x2="173.48946106938683" y1="-488.69307011557567"
y2="-427.1575026813755" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="491.025028503587" x2="429.48946106938683" y1="-488.69307011557567"
y2="-427.1575026813755" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="747.025028503587" x2="685.4894610693868" y1="-488.69307011557567"
y2="-427.1575026813755" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="235.025028503587" x2="173.48946106938683" y1="-232.69307011557567"
y2="-171.1575026813755" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="491.025028503587" x2="429.48946106938683" y1="-232.69307011557567"
y2="-171.1575026813755" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="747.025028503587" x2="685.4894610693868" y1="-232.69307011557567"
y2="-171.1575026813755" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="235.025028503587" x2="173.48946106938683" y1="23.306929884424335"
y2="84.84249731862451" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="491.025028503587" x2="429.48946106938683" y1="23.306929884424335"
y2="84.84249731862451" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="747.025028503587" x2="685.4894610693868" y1="23.306929884424335"
y2="84.84249731862451" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="225.00990918130768" x2="200.62370409686488" y1="210.1052181599721"
y2="234.4914232444149" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="225.00990918130768" x2="200.62370409686488" y1="-301.8947818400279"
y2="-277.50857675558507" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="481.00990918130765" x2="456.6237040968649" y1="-301.8947818400279"
y2="-277.50857675558507" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="737.0099091813076" x2="712.6237040968649" y1="-301.8947818400279"
y2="-277.50857675558507" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="225.00990918130768" x2="200.62370409686488" y1="-45.89478184002789"
y2="-21.508576755585096" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="481.00990918130765" x2="456.6237040968649" y1="-45.89478184002789"
y2="-21.508576755585096" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="737.0099091813076" x2="712.6237040968649" y1="-45.89478184002789"
y2="-21.508576755585096" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="225.00990918130768" x2="200.62370409686488" y1="210.1052181599721"
y2="234.4914232444149" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="481.00990918130765" x2="456.6237040968649" y1="210.1052181599721"
y2="234.4914232444149" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="737.0099091813076" x2="712.6237040968649" y1="210.1052181599721"
y2="234.4914232444149" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="171.55017713954658" x2="102.05334080042758" y1="78.55895711807653"
y2="148.05579345719553" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="171.55017713954658" x2="102.05334080042758" y1="-433.44104288192347"
y2="-363.94420654280447" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="427.5501771395466" x2="358.0533408004276" y1="-433.44104288192347"
y2="-363.94420654280447" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="683.5501771395466" x2="614.0533408004276" y1="-433.44104288192347"
y2="-363.94420654280447" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="171.55017713954658" x2="102.05334080042758" y1="-177.44104288192347"
y2="-107.94420654280447" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="427.5501771395466" x2="358.0533408004276" y1="-177.44104288192347"
y2="-107.94420654280447" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="683.5501771395466" x2="614.0533408004276" y1="-177.44104288192347"
y2="-107.94420654280447" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="171.55017713954658" x2="102.05334080042758" y1="78.55895711807653"
y2="148.05579345719553" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="427.5501771395466" x2="358.0533408004276" y1="78.55895711807653"
y2="148.05579345719553" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="683.5501771395466" x2="614.0533408004276" y1="78.55895711807653"
y2="148.05579345719553" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="258.4358284744095" x2="228.09906783279462" y1="10.646186924515469"
y2="40.98294756613034" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="258.4358284744095" x2="228.09906783279462" y1="-501.35381307548454"
y2="-471.01705243386965" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="514.4358284744095" x2="484.0990678327946" y1="-501.35381307548454"
y2="-471.01705243386965" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="770.4358284744095" x2="740.0990678327946" y1="-501.35381307548454"
y2="-471.01705243386965" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="258.4358284744095" x2="228.09906783279462" y1="-245.35381307548454"
y2="-215.01705243386965" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="514.4358284744095" x2="484.0990678327946" y1="-245.35381307548454"
y2="-215.01705243386965" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="770.4358284744095" x2="740.0990678327946" y1="-245.35381307548454"
y2="-215.01705243386965" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="258.4358284744095" x2="228.09906783279462" y1="10.646186924515469"
y2="40.98294756613034" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="514.4358284744095" x2="484.0990678327946" y1="10.646186924515469"
y2="40.98294756613034" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="770.4358284744095" x2="740.0990678327946" y1="10.646186924515469"
y2="40.98294756613034" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="2.4358284744095045" x2="-27.900932167205383" y1="10.646186924515469"
y2="40.98294756613034" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="35.41624886616098" x2="-5.966808810922494" y1="10.151780697595989"
y2="51.53483837467946" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="35.41624886616098" x2="-5.966808810922494" y1="-501.848219302404"
y2="-460.46516162532055" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="291.41624886616097" x2="250.0331911890775" y1="-501.848219302404"
y2="-460.46516162532055" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="547.416248866161" x2="506.0331911890775" y1="-501.848219302404"
y2="-460.46516162532055" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="35.41624886616098" x2="-5.966808810922494" y1="-245.848219302404"
y2="-204.46516162532055" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="291.41624886616097" x2="250.0331911890775" y1="-245.848219302404"
y2="-204.46516162532055" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="547.416248866161" x2="506.0331911890775" y1="-245.848219302404"
y2="-204.46516162532055" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="35.41624886616098" x2="-5.966808810922494" y1="10.151780697595989"
y2="51.53483837467946" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="291.41624886616097" x2="250.0331911890775" y1="10.151780697595989"
y2="51.53483837467946" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="547.416248866161" x2="506.0331911890775" y1="10.151780697595989"
y2="51.53483837467946" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="90.76285286976488" x2="72.92514980496989" y1="79.79001478147771"
y2="97.6277178462727" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="90.76285286976488" x2="72.92514980496989" y1="-432.2099852185223"
y2="-414.37228215372727" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="346.76285286976486" x2="328.9251498049699" y1="-432.2099852185223"
y2="-414.37228215372727" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="602.7628528697649" x2="584.9251498049699" y1="-432.2099852185223"
y2="-414.37228215372727" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="90.76285286976488" x2="72.92514980496989" y1="-176.2099852185223"
y2="-158.3722821537273" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="346.76285286976486" x2="328.9251498049699" y1="-176.2099852185223"
y2="-158.3722821537273" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="602.7628528697649" x2="584.9251498049699" y1="-176.2099852185223"
y2="-158.3722821537273" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="90.76285286976488" x2="72.92514980496989" y1="79.79001478147771"
y2="97.6277178462727" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="346.76285286976486" x2="328.9251498049699" y1="79.79001478147771"
y2="97.6277178462727" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="602.7628528697649" x2="584.9251498049699" y1="79.79001478147771"
y2="97.6277178462727" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<animateTransform attributeName="transform" type="translate" values="0 0;-256 256"
keyTimes="0;1" repeatCount="indefinite" dur="5s"></animateTransform>
</g>
<g>
<line x1="93.6896305353637" x2="75.71575147590588" y1="83.83758835275793"
y2="101.81146741221576" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="93.6896305353637" x2="75.71575147590588" y1="-428.16241164724204"
y2="-410.18853258778427" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="349.6896305353637" x2="331.7157514759059" y1="-428.16241164724204"
y2="-410.18853258778427" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="605.6896305353637" x2="587.7157514759059" y1="-428.16241164724204"
y2="-410.18853258778427" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="93.6896305353637" x2="75.71575147590588" y1="-172.16241164724207"
y2="-154.18853258778424" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="349.6896305353637" x2="331.7157514759059" y1="-172.16241164724207"
y2="-154.18853258778424" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="605.6896305353637" x2="587.7157514759059" y1="-172.16241164724207"
y2="-154.18853258778424" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="93.6896305353637" x2="75.71575147590588" y1="83.83758835275793"
y2="101.81146741221576" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="349.6896305353637" x2="331.7157514759059" y1="83.83758835275793"
y2="101.81146741221576" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="605.6896305353637" x2="587.7157514759059" y1="83.83758835275793"
y2="101.81146741221576" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="207.24941141296466" x2="167.48134532138562" y1="234.55973050121918"
y2="274.3277965927982" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="207.24941141296466" x2="167.48134532138562" y1="-277.4402694987808"
y2="-237.67220340720178" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="463.24941141296466" x2="423.4813453213856" y1="-277.4402694987808"
y2="-237.67220340720178" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="719.2494114129647" x2="679.4813453213856" y1="-277.4402694987808"
y2="-237.67220340720178" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="207.24941141296466" x2="167.48134532138562" y1="-21.440269498780822"
y2="18.327796592798222" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="463.24941141296466" x2="423.4813453213856" y1="-21.440269498780822"
y2="18.327796592798222" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="719.2494114129647" x2="679.4813453213856" y1="-21.440269498780822"
y2="18.327796592798222" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="207.24941141296466" x2="167.48134532138562" y1="234.55973050121918"
y2="274.3277965927982" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="463.24941141296466" x2="423.4813453213856" y1="234.55973050121918"
y2="274.3277965927982" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="719.2494114129647" x2="679.4813453213856" y1="234.55973050121918"
y2="274.3277965927982" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="69.19671201083756" x2="20.15599089926107" y1="61.52941038272999"
y2="110.57013149430648" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="69.19671201083756" x2="20.15599089926107" y1="-450.47058961727"
y2="-401.42986850569355" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="325.1967120108376" x2="276.15599089926104" y1="-450.47058961727"
y2="-401.42986850569355" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="581.1967120108376" x2="532.155990899261" y1="-450.47058961727"
y2="-401.42986850569355" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="69.19671201083756" x2="20.15599089926107" y1="-194.47058961727"
y2="-145.42986850569352" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="325.1967120108376" x2="276.15599089926104" y1="-194.47058961727"
y2="-145.42986850569352" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="581.1967120108376" x2="532.155990899261" y1="-194.47058961727"
y2="-145.42986850569352" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="69.19671201083756" x2="20.15599089926107" y1="61.52941038272999"
y2="110.57013149430648" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="325.1967120108376" x2="276.15599089926104" y1="61.52941038272999"
y2="110.57013149430648" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="581.1967120108376" x2="532.155990899261" y1="61.52941038272999"
y2="110.57013149430648" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="153.36870174443493" x2="103.52218176454608" y1="129.93915864820679"
y2="179.78567862809564" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="153.36870174443493" x2="103.52218176454608" y1="-382.0608413517932"
y2="-332.21432137190436" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="409.36870174443493" x2="359.5221817645461" y1="-382.0608413517932"
y2="-332.21432137190436" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="665.3687017444349" x2="615.5221817645461" y1="-382.0608413517932"
y2="-332.21432137190436" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="153.36870174443493" x2="103.52218176454608" y1="-126.06084135179321"
y2="-76.21432137190436" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="409.36870174443493" x2="359.5221817645461" y1="-126.06084135179321"
y2="-76.21432137190436" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="665.3687017444349" x2="615.5221817645461" y1="-126.06084135179321"
y2="-76.21432137190436" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="153.36870174443493" x2="103.52218176454608" y1="129.93915864820679"
y2="179.78567862809564" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="409.36870174443493" x2="359.5221817645461" y1="129.93915864820679"
y2="179.78567862809564" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="665.3687017444349" x2="615.5221817645461" y1="129.93915864820679"
y2="179.78567862809564" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="49.20494471467643" x2="2.7142059537850685" y1="141.75997600855746"
y2="188.25071476944882" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="49.20494471467643" x2="2.7142059537850685" y1="-370.2400239914425"
y2="-323.7492852305512" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="305.20494471467646" x2="258.71420595378504" y1="-370.2400239914425"
y2="-323.7492852305512" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="561.2049447146765" x2="514.714205953785" y1="-370.2400239914425"
y2="-323.7492852305512" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="49.20494471467643" x2="2.7142059537850685" y1="-114.24002399144254"
y2="-67.74928523055118" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="305.20494471467646" x2="258.71420595378504" y1="-114.24002399144254"
y2="-67.74928523055118" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="561.2049447146765" x2="514.714205953785" y1="-114.24002399144254"
y2="-67.74928523055118" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="49.20494471467643" x2="2.7142059537850685" y1="141.75997600855746"
y2="188.25071476944882" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="305.20494471467646" x2="258.71420595378504" y1="141.75997600855746"
y2="188.25071476944882" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="561.2049447146765" x2="514.714205953785" y1="141.75997600855746"
y2="188.25071476944882" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="84.6808460539986" x2="32.68305955000314" y1="-7.711036017440037"
y2="44.28675048655542" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="84.6808460539986" x2="32.68305955000314" y1="-519.71103601744"
y2="-467.71324951344457" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="340.6808460539986" x2="288.6830595500031" y1="-519.71103601744"
y2="-467.71324951344457" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="596.6808460539986" x2="544.6830595500031" y1="-519.71103601744"
y2="-467.71324951344457" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="84.6808460539986" x2="32.68305955000314" y1="-263.71103601744005"
y2="-211.71324951344457" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="340.6808460539986" x2="288.6830595500031" y1="-263.71103601744005"
y2="-211.71324951344457" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="596.6808460539986" x2="544.6830595500031" y1="-263.71103601744005"
y2="-211.71324951344457" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="84.6808460539986" x2="32.68305955000314" y1="-7.711036017440037"
y2="44.28675048655542" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="340.6808460539986" x2="288.6830595500031" y1="-7.711036017440037"
y2="44.28675048655542" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="596.6808460539986" x2="544.6830595500031" y1="-7.711036017440037"
y2="44.28675048655542" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="84.6808460539986" x2="32.68305955000314" y1="248.28896398255995"
y2="300.28675048655543" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="225.38342310559023" x2="185.66602314192056" y1="109.68961591653738"
y2="149.40701588020704" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="225.38342310559023" x2="185.66602314192056" y1="-402.3103840834626"
y2="-362.59298411979296" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="481.3834231055902" x2="441.66602314192056" y1="-402.3103840834626"
y2="-362.59298411979296" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="737.3834231055903" x2="697.6660231419205" y1="-402.3103840834626"
y2="-362.59298411979296" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="225.38342310559023" x2="185.66602314192056" y1="-146.31038408346262"
y2="-106.59298411979296" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="481.3834231055902" x2="441.66602314192056" y1="-146.31038408346262"
y2="-106.59298411979296" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="737.3834231055903" x2="697.6660231419205" y1="-146.31038408346262"
y2="-106.59298411979296" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="225.38342310559023" x2="185.66602314192056" y1="109.68961591653738"
y2="149.40701588020704" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="481.3834231055902" x2="441.66602314192056" y1="109.68961591653738"
y2="149.40701588020704" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="737.3834231055903" x2="697.6660231419205" y1="109.68961591653738"
y2="149.40701588020704" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="172.83662370669697" x2="103.52581079778793" y1="164.45975635392284"
y2="233.77056926283188" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="172.83662370669697" x2="103.52581079778793" y1="-347.54024364607716"
y2="-278.2294307371681" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="428.83662370669697" x2="359.5258107977879" y1="-347.54024364607716"
y2="-278.2294307371681" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="684.836623706697" x2="615.5258107977879" y1="-347.54024364607716"
y2="-278.2294307371681" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="172.83662370669697" x2="103.52581079778793" y1="-91.54024364607716"
y2="-22.229430737168116" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="428.83662370669697" x2="359.5258107977879" y1="-91.54024364607716"
y2="-22.229430737168116" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="684.836623706697" x2="615.5258107977879" y1="-91.54024364607716"
y2="-22.229430737168116" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="172.83662370669697" x2="103.52581079778793" y1="164.45975635392284"
y2="233.77056926283188" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="428.83662370669697" x2="359.5258107977879" y1="164.45975635392284"
y2="233.77056926283188" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="684.836623706697" x2="615.5258107977879" y1="164.45975635392284"
y2="233.77056926283188" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="254.85435949520382" x2="240.10841684705935" y1="-1.209429949430282"
y2="13.536512698714214" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="254.85435949520382" x2="240.10841684705935" y1="-513.2094299494303"
y2="-498.4634873012858" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="510.8543594952038" x2="496.10841684705935" y1="-513.2094299494303"
y2="-498.4634873012858" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="766.8543594952039" x2="752.1084168470593" y1="-513.2094299494303"
y2="-498.4634873012858" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="254.85435949520382" x2="240.10841684705935" y1="-257.2094299494303"
y2="-242.4634873012858" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="510.8543594952038" x2="496.10841684705935" y1="-257.2094299494303"
y2="-242.4634873012858" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="766.8543594952039" x2="752.1084168470593" y1="-257.2094299494303"
y2="-242.4634873012858" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="254.85435949520382" x2="240.10841684705935" y1="-1.209429949430282"
y2="13.536512698714214" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="510.8543594952038" x2="496.10841684705935" y1="-1.209429949430282"
y2="13.536512698714214" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="766.8543594952039" x2="752.1084168470593" y1="-1.209429949430282"
y2="13.536512698714214" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="254.85435949520382" x2="240.10841684705935" y1="254.79057005056973"
y2="269.5365126987142" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<animateTransform attributeName="transform" type="translate" values="0 0;-256 256"
keyTimes="0;1" repeatCount="indefinite" dur="10.3333333333333335s"></animateTransform>
</g>
</g>
</pattern>
</defs>
<rect x="0" y="0" width="1084" height="322" fill="url(#pid-0.7735807359934106)"></rect>
</svg>

View file

@ -0,0 +1,827 @@
<svg id="canvas" height="100%" xmlns="http://www.w3.org/2000/svg" version="1.1"
xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.dev/svgjs"
viewBox="0 0 600 600">
<rect width="600" height="600" fill="transparent"></rect>
<mask id="mask" mask-type="alpha" maskUnits="userSpaceOnUse">
<rect transform="translate(0, 0)" width="600" height="600" fill="white"></rect>
</mask>
<svg>
<path transform="translate(0, 0) translate(30,30) rotate(270) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2" d="M0 0h60v60h-60z"></path>
<path transform="translate(0, 0) translate(30,30) rotate(270) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2"
d="M30 30c0 16.569 13.432 30 30 30v-60c-16.568 0-30 13.432-30 30z"></path>
<path transform="translate(0, 0) translate(30,30) rotate(270) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2"
d="M30 30c0-16.57-13.431-30-30-30v60c16.569 0 30-13.432 30-30z"></path>
</svg>
<svg>
<path transform="translate(0, 60) translate(30,30) rotate(270) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2" d="M0 0h60v60h-60z"></path>
<path transform="translate(0, 60) translate(30,30) rotate(270) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2"
d="M30 30c0 16.569 13.432 30 30 30v-60c-16.568 0-30 13.432-30 30z"></path>
<path transform="translate(0, 60) translate(30,30) rotate(270) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2"
d="M30 30c0-16.57-13.431-30-30-30v60c16.569 0 30-13.432 30-30z"></path>
</svg>
<svg>
<path transform="translate(0, 120)" fill="none" stroke="#48cae4" stroke-width="2"
d="M0 0h60v60h-60z"></path>
<circle transform="translate(0, 120)" cx="30" cy="30" r="30" fill="none" stroke="#48cae4"
stroke-width="2"></circle>
</svg>
<svg>
<path transform="translate(0, 180) translate(30,30) rotate(0) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2" d="M0 0h60v60h-60z"></path>
<path transform="translate(0, 180) translate(30,30) rotate(0) translate(-30,-30)"
fill="#90e0ef" stroke="#48cae4" stroke-width="2"
d="M0 30c0 16.569 13.432 30 30 30v-60c-16.568 0-30 13.432-30 30z"></path>
</svg>
<svg>
<path transform="translate(0, 240) translate(30,30) rotate(90) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2" d="M0 0h60v60h-60z"></path>
<path transform="translate(0, 240) translate(30,30) rotate(90) translate(-30,-30)"
fill="#0096c7" stroke="#48cae4" stroke-width="2"
d="M0 30c0 16.569 13.432 30 30 30v-60c-16.568 0-30 13.432-30 30z"></path>
</svg>
<svg>
<path transform="translate(0, 300) translate(30,30) rotate(270) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2" d="M0 0h60v60h-60z"></path>
<path transform="translate(0, 300) translate(30,30) rotate(270) translate(-30,-30)"
d="M0 30C0 48.05 15.3348 60 30 60V0C15.3348 0 0 14.9129 0 30Z" stroke="#48cae4"
stroke-width="2" fill="#023e8a"></path>
<path transform="translate(0, 300) translate(30,30) rotate(270) translate(-30,-30)"
d="M60 30C60 14.9129 48.4719 0 30 0L30 60C48.4719 60 60 48.05 60 30Z" stroke="#48cae4"
stroke-width="2" fill="none"></path>
</svg>
<svg>
<path transform="translate(0, 360) translate(30,30) rotate(270) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2" d="M0 0h60v60h-60z"></path>
<path transform="translate(0, 360) translate(30,30) rotate(270) translate(-30,-30)"
fill="#0096c7" stroke="#48cae4" stroke-width="2"
d="M0 30c0 16.569 13.432 30 30 30v-60c-16.568 0-30 13.432-30 30z"></path>
</svg>
<svg>
<path transform="translate(0, 420) translate(30,30) rotate(180) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2" d="M0 0h60v60h-60z"></path>
<path transform="translate(0, 420) translate(30,30) rotate(180) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2"
d="M30 30c0 16.569 13.432 30 30 30v-60c-16.568 0-30 13.432-30 30z"></path>
<path transform="translate(0, 420) translate(30,30) rotate(180) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2"
d="M30 30c0-16.57-13.431-30-30-30v60c16.569 0 30-13.432 30-30z"></path>
</svg>
<svg>
<path transform="translate(0, 480)" fill="none" stroke="#48cae4" stroke-width="2"
d="M0 0h60v60h-60z"></path>
<circle transform="translate(0, 480)" cx="30" cy="30" r="30" fill="none" stroke="#48cae4"
stroke-width="2"></circle>
</svg>
<svg>
<path transform="translate(0, 540)" fill="none" stroke="#48cae4" stroke-width="2"
d="M0 0h60v60h-60z"></path>
</svg>
<svg>
<path transform="translate(60, 0) translate(30,30) rotate(270) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2" d="M0 0h60v60h-60z"></path>
<path transform="translate(60, 0) translate(30,30) rotate(270) translate(-30,-30)"
d="M0 30C0 48.05 15.3348 60 30 60V0C15.3348 0 0 14.9129 0 30Z" stroke="#48cae4"
stroke-width="2" fill="#00b4d8"></path>
<path transform="translate(60, 0) translate(30,30) rotate(270) translate(-30,-30)"
d="M60 30C60 14.9129 48.4719 0 30 0L30 60C48.4719 60 60 48.05 60 30Z" stroke="#48cae4"
stroke-width="2" fill="none"></path>
</svg>
<svg>
<path transform="translate(60, 60)" fill="none" stroke="#48cae4" stroke-width="2"
d="M0 0h60v60h-60z"></path>
</svg>
<svg>
<rect transform="translate(60, 120) translate(30,30) rotate(90) translate(-30,-30)"
fill="none" x="0" y="0" width="60" height="60" stroke="#48cae4" stroke-width="2"></rect>
<path transform="translate(60, 120) translate(30,30) rotate(90) translate(-30,-30)"
fill="none" d="M0 0L60 60" stroke="#48cae4" stroke-width="2"></path>
</svg>
<svg>
<path transform="translate(60, 180) translate(30,30) rotate(0) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2" d="M0 0h60v60h-60z"></path>
<path transform="translate(60, 180) translate(30,30) rotate(0) translate(-30,-30)"
fill="#90e0ef" stroke="#48cae4" stroke-width="2"
d="M0 30c0 16.569 13.432 30 30 30v-60c-16.568 0-30 13.432-30 30z"></path>
</svg>
<svg>
<path transform="translate(60, 240)" fill="none" stroke="#48cae4" stroke-width="2"
d="M0 0h60v60h-60z"></path>
</svg>
<svg>
<path transform="translate(60, 300)" fill="none" stroke="#48cae4" stroke-width="2"
d="M0 0h60v60h-60z"></path>
<circle transform="translate(60, 300)" cx="30" cy="30" r="30" fill="#48cae4"
stroke="#48cae4" stroke-width="2"></circle>
</svg>
<svg>
<path transform="translate(60, 360)" fill="none" stroke="#48cae4" stroke-width="2"
d="M0 0h60v60h-60z"></path>
</svg>
<svg>
<path transform="translate(60, 420)" fill="none" stroke="#48cae4" stroke-width="2"
d="M0 0h60v60h-60z"></path>
<circle transform="translate(60, 420)" cx="30" cy="30" r="30" fill="#48cae4"
stroke="#48cae4" stroke-width="2"></circle>
</svg>
<svg>
<path transform="translate(60, 480)" fill="none" stroke="#48cae4" stroke-width="2"
d="M0 0h60v60h-60z"></path>
<circle transform="translate(60, 480)" cx="30" cy="30" r="30" fill="none" stroke="#48cae4"
stroke-width="2"></circle>
</svg>
<svg>
<path transform="translate(60, 540)" fill="none" stroke="#48cae4" stroke-width="2"
d="M0 0h60v60h-60z"></path>
<circle transform="translate(60, 540)" cx="30" cy="30" r="30" fill="#48cae4"
stroke="#48cae4" stroke-width="2"></circle>
</svg>
<svg>
<path transform="translate(120, 0)" fill="none" stroke="#48cae4" stroke-width="2"
d="M0 0h60v60h-60z"></path>
<circle transform="translate(120, 0)" cx="30" cy="30" r="30" fill="#023e8a" stroke="#48cae4"
stroke-width="2"></circle>
</svg>
<svg>
<path transform="translate(120, 60) translate(30,30) rotate(180) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2" d="M0 0h60v60h-60z"></path>
<path transform="translate(120, 60) translate(30,30) rotate(180) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2"
d="M30 30c0 16.569 13.432 30 30 30v-60c-16.568 0-30 13.432-30 30z"></path>
<path transform="translate(120, 60) translate(30,30) rotate(180) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2"
d="M30 30c0-16.57-13.431-30-30-30v60c16.569 0 30-13.432 30-30z"></path>
</svg>
<svg>
<rect transform="translate(120, 120) translate(30,30) rotate(90) translate(-30,-30)"
fill="none" x="0" y="0" width="60" height="60" stroke="#48cae4" stroke-width="2"></rect>
<path transform="translate(120, 120) translate(30,30) rotate(90) translate(-30,-30)"
fill="none" d="M0 0L60 60" stroke="#48cae4" stroke-width="2"></path>
</svg>
<svg>
<path transform="translate(120, 180) translate(30,30) rotate(90) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2" d="M0 0h60v60h-60z"></path>
<path transform="translate(120, 180) translate(30,30) rotate(90) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2"
d="M30 30c0 16.569 13.432 30 30 30v-60c-16.568 0-30 13.432-30 30z"></path>
<path transform="translate(120, 180) translate(30,30) rotate(90) translate(-30,-30)"
fill="#90e0ef" stroke="#48cae4" stroke-width="2"
d="M30 30c0-16.57-13.431-30-30-30v60c16.569 0 30-13.432 30-30z"></path>
</svg>
<svg>
<path transform="translate(120, 240) translate(30,30) rotate(180) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2" d="M0 0h60v60h-60z"></path>
<path transform="translate(120, 240) translate(30,30) rotate(180) translate(-30,-30)"
d="M0 30C0 48.05 15.3348 60 30 60V0C15.3348 0 0 14.9129 0 30Z" stroke="#48cae4"
stroke-width="2" fill="#ade8f4"></path>
<path transform="translate(120, 240) translate(30,30) rotate(180) translate(-30,-30)"
d="M60 30C60 14.9129 48.4719 0 30 0L30 60C48.4719 60 60 48.05 60 30Z" stroke="#48cae4"
stroke-width="2" fill="none"></path>
</svg>
<svg>
<path transform="translate(120, 300) translate(30,30) rotate(270) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2" d="M0 0h60v60h-60z"></path>
<path transform="translate(120, 300) translate(30,30) rotate(270) translate(-30,-30)"
d="M0 30C0 48.05 15.3348 60 30 60V0C15.3348 0 0 14.9129 0 30Z" stroke="#48cae4"
stroke-width="2" fill="none"></path>
<path transform="translate(120, 300) translate(30,30) rotate(270) translate(-30,-30)"
d="M60 30C60 14.9129 48.4719 0 30 0L30 60C48.4719 60 60 48.05 60 30Z" stroke="#48cae4"
stroke-width="2" fill="none"></path>
</svg>
<svg>
<path transform="translate(120, 360) translate(30,30) rotate(90) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2" d="M0 0h60v60h-60z"></path>
<path transform="translate(120, 360) translate(30,30) rotate(90) translate(-30,-30)"
fill="#48cae4" stroke="#48cae4" stroke-width="2" d="M30 0h30v60h-30z"></path>
<path transform="translate(120, 360) translate(30,30) rotate(90) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2"
d="M0 30c0 16.569 13.432 30 30 30v-60c-16.568 0-30 13.432-30 30z"></path>
</svg>
<svg>
<path transform="translate(120, 420)" fill="none" stroke="#48cae4" stroke-width="2"
d="M0 0h60v60h-60z"></path>
<circle transform="translate(120, 420)" cx="30" cy="30" r="30" fill="#90e0ef"
stroke="#48cae4" stroke-width="2"></circle>
</svg>
<svg>
<path transform="translate(120, 480) translate(30,30) rotate(180) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2" d="M0 0h60v60h-60z"></path>
<path transform="translate(120, 480) translate(30,30) rotate(180) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2"
d="M30 30c0 16.569 13.432 30 30 30v-60c-16.568 0-30 13.432-30 30z"></path>
<path transform="translate(120, 480) translate(30,30) rotate(180) translate(-30,-30)"
fill="#ade8f4" stroke="#48cae4" stroke-width="2"
d="M30 30c0-16.57-13.431-30-30-30v60c16.569 0 30-13.432 30-30z"></path>
</svg>
<svg>
<path transform="translate(120, 540) translate(30,30) rotate(0) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2" d="M0 0h60v60h-60z"></path>
<path transform="translate(120, 540) translate(30,30) rotate(0) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2"
d="M30 30c0 16.569 13.432 30 30 30v-60c-16.568 0-30 13.432-30 30z"></path>
<path transform="translate(120, 540) translate(30,30) rotate(0) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2"
d="M30 30c0-16.57-13.431-30-30-30v60c16.569 0 30-13.432 30-30z"></path>
</svg>
<svg>
<path transform="translate(180, 0) translate(30,30) rotate(180) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2" d="M0 0h60v60h-60z"></path>
<path transform="translate(180, 0) translate(30,30) rotate(180) translate(-30,-30)"
fill="#caf0f8" stroke="#48cae4" stroke-width="2"
d="M0 30c0 16.569 13.432 30 30 30v-60c-16.568 0-30 13.432-30 30z"></path>
</svg>
<svg>
<path transform="translate(180, 60) translate(30,30) rotate(0) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2" d="M0 0h60v60h-60z"></path>
<path transform="translate(180, 60) translate(30,30) rotate(0) translate(-30,-30)"
fill="#023e8a" stroke="#48cae4" stroke-width="2"
d="M0 30c0 16.569 13.432 30 30 30v-60c-16.568 0-30 13.432-30 30z"></path>
</svg>
<svg>
<path transform="translate(180, 120) translate(30,30) rotate(270) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2" d="M0 0h60v60h-60z"></path>
<path transform="translate(180, 120) translate(30,30) rotate(270) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2"
d="M30 30c0 16.569 13.432 30 30 30v-60c-16.568 0-30 13.432-30 30z"></path>
<path transform="translate(180, 120) translate(30,30) rotate(270) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2"
d="M30 30c0-16.57-13.431-30-30-30v60c16.569 0 30-13.432 30-30z"></path>
</svg>
<svg>
<path transform="translate(180, 180) translate(30,30) rotate(90) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2" d="M0 0h60v60h-60z"></path>
<path transform="translate(180, 180) translate(30,30) rotate(90) translate(-30,-30)"
fill="#ade8f4" stroke="#48cae4" stroke-width="2" d="M30 0h30v60h-30z"></path>
<path transform="translate(180, 180) translate(30,30) rotate(90) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2"
d="M0 30c0 16.569 13.432 30 30 30v-60c-16.568 0-30 13.432-30 30z"></path>
</svg>
<svg>
<path transform="translate(180, 240) translate(30,30) rotate(90) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2" d="M0 0h60v60h-60z"></path>
<path transform="translate(180, 240) translate(30,30) rotate(90) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2"
d="M30 30c0 16.569 13.432 30 30 30v-60c-16.568 0-30 13.432-30 30z"></path>
<path transform="translate(180, 240) translate(30,30) rotate(90) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2"
d="M30 30c0-16.57-13.431-30-30-30v60c16.569 0 30-13.432 30-30z"></path>
</svg>
<svg>
<path transform="translate(180, 300) translate(30,30) rotate(0) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2" d="M0 0h60v60h-60z"></path>
<path transform="translate(180, 300) translate(30,30) rotate(0) translate(-30,-30)"
d="M0 30C0 48.05 15.3348 60 30 60V0C15.3348 0 0 14.9129 0 30Z" stroke="#48cae4"
stroke-width="2" fill="none"></path>
<path transform="translate(180, 300) translate(30,30) rotate(0) translate(-30,-30)"
d="M60 30C60 14.9129 48.4719 0 30 0L30 60C48.4719 60 60 48.05 60 30Z" stroke="#48cae4"
stroke-width="2" fill="none"></path>
</svg>
<svg>
<path transform="translate(180, 360)" fill="none" stroke="#48cae4" stroke-width="2"
d="M0 0h60v60h-60z"></path>
</svg>
<svg>
<rect transform="translate(180, 420) translate(30,30) rotate(90) translate(-30,-30)"
fill="none" x="0" y="0" width="60" height="60" stroke="#48cae4" stroke-width="2"></rect>
<path transform="translate(180, 420) translate(30,30) rotate(90) translate(-30,-30)"
fill="none" d="M0 0L60 60" stroke="#48cae4" stroke-width="2"></path>
</svg>
<svg>
<path transform="translate(180, 480)" fill="none" stroke="#48cae4" stroke-width="2"
d="M0 0h60v60h-60z"></path>
</svg>
<svg>
<path transform="translate(180, 540) translate(30,30) rotate(180) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2" d="M0 0h60v60h-60z"></path>
<path transform="translate(180, 540) translate(30,30) rotate(180) translate(-30,-30)"
d="M0 30C0 48.05 15.3348 60 30 60V0C15.3348 0 0 14.9129 0 30Z" stroke="#48cae4"
stroke-width="2" fill="#0077b6"></path>
<path transform="translate(180, 540) translate(30,30) rotate(180) translate(-30,-30)"
d="M60 30C60 14.9129 48.4719 0 30 0L30 60C48.4719 60 60 48.05 60 30Z" stroke="#48cae4"
stroke-width="2" fill="none"></path>
</svg>
<svg>
<rect transform="translate(240, 0) translate(30,30) rotate(90) translate(-30,-30)"
fill="none" x="0" y="0" width="60" height="60" stroke="#48cae4" stroke-width="2"></rect>
<path transform="translate(240, 0) translate(30,30) rotate(90) translate(-30,-30)"
fill="none" d="M0 0L60 60" stroke="#48cae4" stroke-width="2"></path>
</svg>
<svg>
<path transform="translate(240, 60)" fill="none" stroke="#48cae4" stroke-width="2"
d="M0 0h60v60h-60z"></path>
<circle transform="translate(240, 60)" cx="30" cy="30" r="30" fill="#0096c7"
stroke="#48cae4" stroke-width="2"></circle>
</svg>
<svg>
<path transform="translate(240, 120) translate(30,30) rotate(90) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2" d="M0 0h60v60h-60z"></path>
<path transform="translate(240, 120) translate(30,30) rotate(90) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2"
d="M30 30c0 16.569 13.432 30 30 30v-60c-16.568 0-30 13.432-30 30z"></path>
<path transform="translate(240, 120) translate(30,30) rotate(90) translate(-30,-30)"
fill="#90e0ef" stroke="#48cae4" stroke-width="2"
d="M30 30c0-16.57-13.431-30-30-30v60c16.569 0 30-13.432 30-30z"></path>
</svg>
<svg>
<path transform="translate(240, 180) translate(30,30) rotate(270) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2" d="M0 0h60v60h-60z"></path>
<path transform="translate(240, 180) translate(30,30) rotate(270) translate(-30,-30)"
d="M0 30C0 48.05 15.3348 60 30 60V0C15.3348 0 0 14.9129 0 30Z" stroke="#48cae4"
stroke-width="2" fill="#48cae4"></path>
<path transform="translate(240, 180) translate(30,30) rotate(270) translate(-30,-30)"
d="M60 30C60 14.9129 48.4719 0 30 0L30 60C48.4719 60 60 48.05 60 30Z" stroke="#48cae4"
stroke-width="2" fill="none"></path>
</svg>
<svg>
<path transform="translate(240, 240) translate(30,30) rotate(90) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2" d="M0 0h60v60h-60z"></path>
<path transform="translate(240, 240) translate(30,30) rotate(90) translate(-30,-30)"
fill="#03045e" stroke="#48cae4" stroke-width="2" d="M30 0h30v60h-30z"></path>
<path transform="translate(240, 240) translate(30,30) rotate(90) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2"
d="M0 30c0 16.569 13.432 30 30 30v-60c-16.568 0-30 13.432-30 30z"></path>
</svg>
<svg>
<path transform="translate(240, 300) translate(30,30) rotate(90) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2" d="M0 0h60v60h-60z"></path>
<path transform="translate(240, 300) translate(30,30) rotate(90) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2"
d="M30 30c0 16.569 13.432 30 30 30v-60c-16.568 0-30 13.432-30 30z"></path>
<path transform="translate(240, 300) translate(30,30) rotate(90) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2"
d="M30 30c0-16.57-13.431-30-30-30v60c16.569 0 30-13.432 30-30z"></path>
</svg>
<svg>
<path transform="translate(240, 360) translate(30,30) rotate(180) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2" d="M0 0h60v60h-60z"></path>
<path transform="translate(240, 360) translate(30,30) rotate(180) translate(-30,-30)"
d="M0 30C0 48.05 15.3348 60 30 60V0C15.3348 0 0 14.9129 0 30Z" stroke="#48cae4"
stroke-width="2" fill="#00b4d8"></path>
<path transform="translate(240, 360) translate(30,30) rotate(180) translate(-30,-30)"
d="M60 30C60 14.9129 48.4719 0 30 0L30 60C48.4719 60 60 48.05 60 30Z" stroke="#48cae4"
stroke-width="2" fill="none"></path>
</svg>
<svg>
<path transform="translate(240, 420) translate(30,30) rotate(270) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2" d="M0 0h60v60h-60z"></path>
<path transform="translate(240, 420) translate(30,30) rotate(270) translate(-30,-30)"
fill="#90e0ef" stroke="#48cae4" stroke-width="2" d="M30 0h30v60h-30z"></path>
<path transform="translate(240, 420) translate(30,30) rotate(270) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2"
d="M0 30c0 16.569 13.432 30 30 30v-60c-16.568 0-30 13.432-30 30z"></path>
</svg>
<svg>
<path transform="translate(240, 480)" fill="none" stroke="#48cae4" stroke-width="2"
d="M0 0h60v60h-60z"></path>
<circle transform="translate(240, 480)" cx="30" cy="30" r="30" fill="#48cae4"
stroke="#48cae4" stroke-width="2"></circle>
</svg>
<svg>
<path transform="translate(240, 540) translate(30,30) rotate(180) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2" d="M0 0h60v60h-60z"></path>
<path transform="translate(240, 540) translate(30,30) rotate(180) translate(-30,-30)"
d="M0 30C0 48.05 15.3348 60 30 60V0C15.3348 0 0 14.9129 0 30Z" stroke="#48cae4"
stroke-width="2" fill="#00b4d8"></path>
<path transform="translate(240, 540) translate(30,30) rotate(180) translate(-30,-30)"
d="M60 30C60 14.9129 48.4719 0 30 0L30 60C48.4719 60 60 48.05 60 30Z" stroke="#48cae4"
stroke-width="2" fill="none"></path>
</svg>
<svg>
<path transform="translate(300, 0) translate(30,30) rotate(0) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2" d="M0 0h60v60h-60z"></path>
<path transform="translate(300, 0) translate(30,30) rotate(0) translate(-30,-30)"
d="M0 30C0 48.05 15.3348 60 30 60V0C15.3348 0 0 14.9129 0 30Z" stroke="#48cae4"
stroke-width="2" fill="#00b4d8"></path>
<path transform="translate(300, 0) translate(30,30) rotate(0) translate(-30,-30)"
d="M60 30C60 14.9129 48.4719 0 30 0L30 60C48.4719 60 60 48.05 60 30Z" stroke="#48cae4"
stroke-width="2" fill="none"></path>
</svg>
<svg>
<path transform="translate(300, 60)" fill="none" stroke="#48cae4" stroke-width="2"
d="M0 0h60v60h-60z"></path>
<circle transform="translate(300, 60)" cx="30" cy="30" r="30" fill="none" stroke="#48cae4"
stroke-width="2"></circle>
</svg>
<svg>
<path transform="translate(300, 120) translate(30,30) rotate(90) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2" d="M0 0h60v60h-60z"></path>
<path transform="translate(300, 120) translate(30,30) rotate(90) translate(-30,-30)"
d="M0 30C0 48.05 15.3348 60 30 60V0C15.3348 0 0 14.9129 0 30Z" stroke="#48cae4"
stroke-width="2" fill="#023e8a"></path>
<path transform="translate(300, 120) translate(30,30) rotate(90) translate(-30,-30)"
d="M60 30C60 14.9129 48.4719 0 30 0L30 60C48.4719 60 60 48.05 60 30Z" stroke="#48cae4"
stroke-width="2" fill="none"></path>
</svg>
<svg>
<path transform="translate(300, 180) translate(30,30) rotate(90) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2" d="M0 0h60v60h-60z"></path>
<path transform="translate(300, 180) translate(30,30) rotate(90) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2"
d="M30 30c0 16.569 13.432 30 30 30v-60c-16.568 0-30 13.432-30 30z"></path>
<path transform="translate(300, 180) translate(30,30) rotate(90) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2"
d="M30 30c0-16.57-13.431-30-30-30v60c16.569 0 30-13.432 30-30z"></path>
</svg>
<svg>
<path transform="translate(300, 240) translate(30,30) rotate(270) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2" d="M0 0h60v60h-60z"></path>
<path transform="translate(300, 240) translate(30,30) rotate(270) translate(-30,-30)"
d="M0 30C0 48.05 15.3348 60 30 60V0C15.3348 0 0 14.9129 0 30Z" stroke="#48cae4"
stroke-width="2" fill="#0077b6"></path>
<path transform="translate(300, 240) translate(30,30) rotate(270) translate(-30,-30)"
d="M60 30C60 14.9129 48.4719 0 30 0L30 60C48.4719 60 60 48.05 60 30Z" stroke="#48cae4"
stroke-width="2" fill="none"></path>
</svg>
<svg>
<path transform="translate(300, 300) translate(30,30) rotate(90) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2" d="M0 0h60v60h-60z"></path>
<path transform="translate(300, 300) translate(30,30) rotate(90) translate(-30,-30)"
d="M0 30C0 48.05 15.3348 60 30 60V0C15.3348 0 0 14.9129 0 30Z" stroke="#48cae4"
stroke-width="2" fill="#48cae4"></path>
<path transform="translate(300, 300) translate(30,30) rotate(90) translate(-30,-30)"
d="M60 30C60 14.9129 48.4719 0 30 0L30 60C48.4719 60 60 48.05 60 30Z" stroke="#48cae4"
stroke-width="2" fill="none"></path>
</svg>
<svg>
<path transform="translate(300, 360) translate(30,30) rotate(270) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2" d="M0 0h60v60h-60z"></path>
<path transform="translate(300, 360) translate(30,30) rotate(270) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2"
d="M30 30c0 16.569 13.432 30 30 30v-60c-16.568 0-30 13.432-30 30z"></path>
<path transform="translate(300, 360) translate(30,30) rotate(270) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2"
d="M30 30c0-16.57-13.431-30-30-30v60c16.569 0 30-13.432 30-30z"></path>
</svg>
<svg>
<path transform="translate(300, 420) translate(30,30) rotate(270) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2" d="M0 0h60v60h-60z"></path>
<path transform="translate(300, 420) translate(30,30) rotate(270) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2"
d="M30 30c0 16.569 13.432 30 30 30v-60c-16.568 0-30 13.432-30 30z"></path>
<path transform="translate(300, 420) translate(30,30) rotate(270) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2"
d="M30 30c0-16.57-13.431-30-30-30v60c16.569 0 30-13.432 30-30z"></path>
</svg>
<svg>
<path transform="translate(300, 480) translate(30,30) rotate(90) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2" d="M0 0h60v60h-60z"></path>
<path transform="translate(300, 480) translate(30,30) rotate(90) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2"
d="M30 30c0 16.569 13.432 30 30 30v-60c-16.568 0-30 13.432-30 30z"></path>
<path transform="translate(300, 480) translate(30,30) rotate(90) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2"
d="M30 30c0-16.57-13.431-30-30-30v60c16.569 0 30-13.432 30-30z"></path>
</svg>
<svg>
<path transform="translate(300, 540) translate(30,30) rotate(0) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2" d="M0 0h60v60h-60z"></path>
<path transform="translate(300, 540) translate(30,30) rotate(0) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2"
d="M30 30c0 16.569 13.432 30 30 30v-60c-16.568 0-30 13.432-30 30z"></path>
<path transform="translate(300, 540) translate(30,30) rotate(0) translate(-30,-30)"
fill="#0096c7" stroke="#48cae4" stroke-width="2"
d="M30 30c0-16.57-13.431-30-30-30v60c16.569 0 30-13.432 30-30z"></path>
</svg>
<svg>
<path transform="translate(360, 0) translate(30,30) rotate(270) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2" d="M0 0h60v60h-60z"></path>
<path transform="translate(360, 0) translate(30,30) rotate(270) translate(-30,-30)"
fill="#03045e" stroke="#48cae4" stroke-width="2" d="M30 0h30v60h-30z"></path>
<path transform="translate(360, 0) translate(30,30) rotate(270) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2"
d="M0 30c0 16.569 13.432 30 30 30v-60c-16.568 0-30 13.432-30 30z"></path>
</svg>
<svg>
<path transform="translate(360, 60) translate(30,30) rotate(0) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2" d="M0 0h60v60h-60z"></path>
<path transform="translate(360, 60) translate(30,30) rotate(0) translate(-30,-30)"
fill="#48cae4" stroke="#48cae4" stroke-width="2"
d="M0 30c0 16.569 13.432 30 30 30v-60c-16.568 0-30 13.432-30 30z"></path>
</svg>
<svg>
<path transform="translate(360, 120)" fill="none" stroke="#48cae4" stroke-width="2"
d="M0 0h60v60h-60z"></path>
<circle transform="translate(360, 120)" cx="30" cy="30" r="30" fill="none" stroke="#48cae4"
stroke-width="2"></circle>
</svg>
<svg>
<path transform="translate(360, 180) translate(30,30) rotate(180) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2" d="M0 0h60v60h-60z"></path>
<path transform="translate(360, 180) translate(30,30) rotate(180) translate(-30,-30)"
fill="#caf0f8" stroke="#48cae4" stroke-width="2" d="M30 0h30v60h-30z"></path>
<path transform="translate(360, 180) translate(30,30) rotate(180) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2"
d="M0 30c0 16.569 13.432 30 30 30v-60c-16.568 0-30 13.432-30 30z"></path>
</svg>
<svg>
<path transform="translate(360, 240) translate(30,30) rotate(90) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2" d="M0 0h60v60h-60z"></path>
<path transform="translate(360, 240) translate(30,30) rotate(90) translate(-30,-30)"
fill="#ade8f4" stroke="#48cae4" stroke-width="2"
d="M0 30c0 16.569 13.432 30 30 30v-60c-16.568 0-30 13.432-30 30z"></path>
</svg>
<svg>
<path transform="translate(360, 300) translate(30,30) rotate(0) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2" d="M0 0h60v60h-60z"></path>
<path transform="translate(360, 300) translate(30,30) rotate(0) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2"
d="M30 30c0 16.569 13.432 30 30 30v-60c-16.568 0-30 13.432-30 30z"></path>
<path transform="translate(360, 300) translate(30,30) rotate(0) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2"
d="M30 30c0-16.57-13.431-30-30-30v60c16.569 0 30-13.432 30-30z"></path>
</svg>
<svg>
<path transform="translate(360, 360) translate(30,30) rotate(180) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2" d="M0 0h60v60h-60z"></path>
<path transform="translate(360, 360) translate(30,30) rotate(180) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2"
d="M30 30c0 16.569 13.432 30 30 30v-60c-16.568 0-30 13.432-30 30z"></path>
<path transform="translate(360, 360) translate(30,30) rotate(180) translate(-30,-30)"
fill="#0096c7" stroke="#48cae4" stroke-width="2"
d="M30 30c0-16.57-13.431-30-30-30v60c16.569 0 30-13.432 30-30z"></path>
</svg>
<svg>
<path transform="translate(360, 420)" fill="none" stroke="#48cae4" stroke-width="2"
d="M0 0h60v60h-60z"></path>
<circle transform="translate(360, 420)" cx="30" cy="30" r="30" fill="none" stroke="#48cae4"
stroke-width="2"></circle>
</svg>
<svg>
<path transform="translate(360, 480) translate(30,30) rotate(90) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2" d="M0 0h60v60h-60z"></path>
<path transform="translate(360, 480) translate(30,30) rotate(90) translate(-30,-30)"
fill="#0096c7" stroke="#48cae4" stroke-width="2"
d="M0 30c0 16.569 13.432 30 30 30v-60c-16.568 0-30 13.432-30 30z"></path>
</svg>
<svg>
<path transform="translate(360, 540) translate(30,30) rotate(180) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2" d="M0 0h60v60h-60z"></path>
<path transform="translate(360, 540) translate(30,30) rotate(180) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2"
d="M30 30c0 16.569 13.432 30 30 30v-60c-16.568 0-30 13.432-30 30z"></path>
<path transform="translate(360, 540) translate(30,30) rotate(180) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2"
d="M30 30c0-16.57-13.431-30-30-30v60c16.569 0 30-13.432 30-30z"></path>
</svg>
<svg>
<path transform="translate(420, 0) translate(30,30) rotate(0) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2" d="M0 0h60v60h-60z"></path>
<path transform="translate(420, 0) translate(30,30) rotate(0) translate(-30,-30)"
d="M0 30C0 48.05 15.3348 60 30 60V0C15.3348 0 0 14.9129 0 30Z" stroke="#48cae4"
stroke-width="2" fill="#00b4d8"></path>
<path transform="translate(420, 0) translate(30,30) rotate(0) translate(-30,-30)"
d="M60 30C60 14.9129 48.4719 0 30 0L30 60C48.4719 60 60 48.05 60 30Z" stroke="#48cae4"
stroke-width="2" fill="none"></path>
</svg>
<svg>
<path transform="translate(420, 60) translate(30,30) rotate(180) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2" d="M0 0h60v60h-60z"></path>
<path transform="translate(420, 60) translate(30,30) rotate(180) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2"
d="M30 30c0 16.569 13.432 30 30 30v-60c-16.568 0-30 13.432-30 30z"></path>
<path transform="translate(420, 60) translate(30,30) rotate(180) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2"
d="M30 30c0-16.57-13.431-30-30-30v60c16.569 0 30-13.432 30-30z"></path>
</svg>
<svg>
<path transform="translate(420, 120)" fill="none" stroke="#48cae4" stroke-width="2"
d="M0 0h60v60h-60z"></path>
<circle transform="translate(420, 120)" cx="30" cy="30" r="30" fill="none" stroke="#48cae4"
stroke-width="2"></circle>
</svg>
<svg>
<path transform="translate(420, 180) translate(30,30) rotate(90) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2" d="M0 0h60v60h-60z"></path>
<path transform="translate(420, 180) translate(30,30) rotate(90) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2"
d="M30 30c0 16.569 13.432 30 30 30v-60c-16.568 0-30 13.432-30 30z"></path>
<path transform="translate(420, 180) translate(30,30) rotate(90) translate(-30,-30)"
fill="#90e0ef" stroke="#48cae4" stroke-width="2"
d="M30 30c0-16.57-13.431-30-30-30v60c16.569 0 30-13.432 30-30z"></path>
</svg>
<svg>
<path transform="translate(420, 240) translate(30,30) rotate(270) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2" d="M0 0h60v60h-60z"></path>
<path transform="translate(420, 240) translate(30,30) rotate(270) translate(-30,-30)"
fill="#ade8f4" stroke="#48cae4" stroke-width="2"
d="M0 30c0 16.569 13.432 30 30 30v-60c-16.568 0-30 13.432-30 30z"></path>
</svg>
<svg>
<path transform="translate(420, 300)" fill="none" stroke="#48cae4" stroke-width="2"
d="M0 0h60v60h-60z"></path>
</svg>
<svg>
<path transform="translate(420, 360) translate(30,30) rotate(90) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2" d="M0 0h60v60h-60z"></path>
<path transform="translate(420, 360) translate(30,30) rotate(90) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2"
d="M30 30c0 16.569 13.432 30 30 30v-60c-16.568 0-30 13.432-30 30z"></path>
<path transform="translate(420, 360) translate(30,30) rotate(90) translate(-30,-30)"
fill="#caf0f8" stroke="#48cae4" stroke-width="2"
d="M30 30c0-16.57-13.431-30-30-30v60c16.569 0 30-13.432 30-30z"></path>
</svg>
<svg>
<path transform="translate(420, 420)" fill="none" stroke="#48cae4" stroke-width="2"
d="M0 0h60v60h-60z"></path>
</svg>
<svg>
<path transform="translate(420, 480)" fill="none" stroke="#48cae4" stroke-width="2"
d="M0 0h60v60h-60z"></path>
<circle transform="translate(420, 480)" cx="30" cy="30" r="30" fill="none" stroke="#48cae4"
stroke-width="2"></circle>
</svg>
<svg>
<path transform="translate(420, 540) translate(30,30) rotate(0) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2" d="M0 0h60v60h-60z"></path>
<path transform="translate(420, 540) translate(30,30) rotate(0) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2"
d="M30 30c0 16.569 13.432 30 30 30v-60c-16.568 0-30 13.432-30 30z"></path>
<path transform="translate(420, 540) translate(30,30) rotate(0) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2"
d="M30 30c0-16.57-13.431-30-30-30v60c16.569 0 30-13.432 30-30z"></path>
</svg>
<svg>
<path transform="translate(480, 0) translate(30,30) rotate(90) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2" d="M0 0h60v60h-60z"></path>
<path transform="translate(480, 0) translate(30,30) rotate(90) translate(-30,-30)"
d="M0 30C0 48.05 15.3348 60 30 60V0C15.3348 0 0 14.9129 0 30Z" stroke="#48cae4"
stroke-width="2" fill="none"></path>
<path transform="translate(480, 0) translate(30,30) rotate(90) translate(-30,-30)"
d="M60 30C60 14.9129 48.4719 0 30 0L30 60C48.4719 60 60 48.05 60 30Z" stroke="#48cae4"
stroke-width="2" fill="none"></path>
</svg>
<svg>
<path transform="translate(480, 60)" fill="none" stroke="#48cae4" stroke-width="2"
d="M0 0h60v60h-60z"></path>
<circle transform="translate(480, 60)" cx="30" cy="30" r="30" fill="#03045e"
stroke="#48cae4" stroke-width="2"></circle>
</svg>
<svg>
<path transform="translate(480, 120) translate(30,30) rotate(0) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2" d="M0 0h60v60h-60z"></path>
<path transform="translate(480, 120) translate(30,30) rotate(0) translate(-30,-30)"
d="M0 30C0 48.05 15.3348 60 30 60V0C15.3348 0 0 14.9129 0 30Z" stroke="#48cae4"
stroke-width="2" fill="#0077b6"></path>
<path transform="translate(480, 120) translate(30,30) rotate(0) translate(-30,-30)"
d="M60 30C60 14.9129 48.4719 0 30 0L30 60C48.4719 60 60 48.05 60 30Z" stroke="#48cae4"
stroke-width="2" fill="none"></path>
</svg>
<svg>
<path transform="translate(480, 180) translate(30,30) rotate(270) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2" d="M0 0h60v60h-60z"></path>
<path transform="translate(480, 180) translate(30,30) rotate(270) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2"
d="M30 30c0 16.569 13.432 30 30 30v-60c-16.568 0-30 13.432-30 30z"></path>
<path transform="translate(480, 180) translate(30,30) rotate(270) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2"
d="M30 30c0-16.57-13.431-30-30-30v60c16.569 0 30-13.432 30-30z"></path>
</svg>
<svg>
<path transform="translate(480, 240) translate(30,30) rotate(90) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2" d="M0 0h60v60h-60z"></path>
<path transform="translate(480, 240) translate(30,30) rotate(90) translate(-30,-30)"
d="M0 30C0 48.05 15.3348 60 30 60V0C15.3348 0 0 14.9129 0 30Z" stroke="#48cae4"
stroke-width="2" fill="#0096c7"></path>
<path transform="translate(480, 240) translate(30,30) rotate(90) translate(-30,-30)"
d="M60 30C60 14.9129 48.4719 0 30 0L30 60C48.4719 60 60 48.05 60 30Z" stroke="#48cae4"
stroke-width="2" fill="none"></path>
</svg>
<svg>
<path transform="translate(480, 300)" fill="none" stroke="#48cae4" stroke-width="2"
d="M0 0h60v60h-60z"></path>
</svg>
<svg>
<path transform="translate(480, 360)" fill="none" stroke="#48cae4" stroke-width="2"
d="M0 0h60v60h-60z"></path>
<circle transform="translate(480, 360)" cx="30" cy="30" r="30" fill="#caf0f8"
stroke="#48cae4" stroke-width="2"></circle>
</svg>
<svg>
<path transform="translate(480, 420) translate(30,30) rotate(270) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2" d="M0 0h60v60h-60z"></path>
<path transform="translate(480, 420) translate(30,30) rotate(270) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2"
d="M30 30c0 16.569 13.432 30 30 30v-60c-16.568 0-30 13.432-30 30z"></path>
<path transform="translate(480, 420) translate(30,30) rotate(270) translate(-30,-30)"
fill="#03045e" stroke="#48cae4" stroke-width="2"
d="M30 30c0-16.57-13.431-30-30-30v60c16.569 0 30-13.432 30-30z"></path>
</svg>
<svg>
<path transform="translate(480, 480) translate(30,30) rotate(270) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2" d="M0 0h60v60h-60z"></path>
<path transform="translate(480, 480) translate(30,30) rotate(270) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2"
d="M30 30c0 16.569 13.432 30 30 30v-60c-16.568 0-30 13.432-30 30z"></path>
<path transform="translate(480, 480) translate(30,30) rotate(270) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2"
d="M30 30c0-16.57-13.431-30-30-30v60c16.569 0 30-13.432 30-30z"></path>
</svg>
<svg>
<path transform="translate(480, 540) translate(30,30) rotate(180) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2" d="M0 0h60v60h-60z"></path>
<path transform="translate(480, 540) translate(30,30) rotate(180) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2"
d="M30 30c0 16.569 13.432 30 30 30v-60c-16.568 0-30 13.432-30 30z"></path>
<path transform="translate(480, 540) translate(30,30) rotate(180) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2"
d="M30 30c0-16.57-13.431-30-30-30v60c16.569 0 30-13.432 30-30z"></path>
</svg>
<svg>
<path transform="translate(540, 0) translate(30,30) rotate(270) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2" d="M0 0h60v60h-60z"></path>
<path transform="translate(540, 0) translate(30,30) rotate(270) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2"
d="M30 30c0 16.569 13.432 30 30 30v-60c-16.568 0-30 13.432-30 30z"></path>
<path transform="translate(540, 0) translate(30,30) rotate(270) translate(-30,-30)"
fill="#0077b6" stroke="#48cae4" stroke-width="2"
d="M30 30c0-16.57-13.431-30-30-30v60c16.569 0 30-13.432 30-30z"></path>
</svg>
<svg>
<path transform="translate(540, 60) translate(30,30) rotate(0) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2" d="M0 0h60v60h-60z"></path>
<path transform="translate(540, 60) translate(30,30) rotate(0) translate(-30,-30)"
d="M0 30C0 48.05 15.3348 60 30 60V0C15.3348 0 0 14.9129 0 30Z" stroke="#48cae4"
stroke-width="2" fill="#0096c7"></path>
<path transform="translate(540, 60) translate(30,30) rotate(0) translate(-30,-30)"
d="M60 30C60 14.9129 48.4719 0 30 0L30 60C48.4719 60 60 48.05 60 30Z" stroke="#48cae4"
stroke-width="2" fill="none"></path>
</svg>
<svg>
<path transform="translate(540, 120) translate(30,30) rotate(90) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2" d="M0 0h60v60h-60z"></path>
<path transform="translate(540, 120) translate(30,30) rotate(90) translate(-30,-30)"
d="M0 30C0 48.05 15.3348 60 30 60V0C15.3348 0 0 14.9129 0 30Z" stroke="#48cae4"
stroke-width="2" fill="#0096c7"></path>
<path transform="translate(540, 120) translate(30,30) rotate(90) translate(-30,-30)"
d="M60 30C60 14.9129 48.4719 0 30 0L30 60C48.4719 60 60 48.05 60 30Z" stroke="#48cae4"
stroke-width="2" fill="none"></path>
</svg>
<svg>
<path transform="translate(540, 180) translate(30,30) rotate(0) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2" d="M0 0h60v60h-60z"></path>
<path transform="translate(540, 180) translate(30,30) rotate(0) translate(-30,-30)"
d="M0 30C0 48.05 15.3348 60 30 60V0C15.3348 0 0 14.9129 0 30Z" stroke="#48cae4"
stroke-width="2" fill="none"></path>
<path transform="translate(540, 180) translate(30,30) rotate(0) translate(-30,-30)"
d="M60 30C60 14.9129 48.4719 0 30 0L30 60C48.4719 60 60 48.05 60 30Z" stroke="#48cae4"
stroke-width="2" fill="none"></path>
</svg>
<svg>
<path transform="translate(540, 240) translate(30,30) rotate(270) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2" d="M0 0h60v60h-60z"></path>
<path transform="translate(540, 240) translate(30,30) rotate(270) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2"
d="M30 30c0 16.569 13.432 30 30 30v-60c-16.568 0-30 13.432-30 30z"></path>
<path transform="translate(540, 240) translate(30,30) rotate(270) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2"
d="M30 30c0-16.57-13.431-30-30-30v60c16.569 0 30-13.432 30-30z"></path>
</svg>
<svg>
<path transform="translate(540, 300) translate(30,30) rotate(270) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2" d="M0 0h60v60h-60z"></path>
<path transform="translate(540, 300) translate(30,30) rotate(270) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2"
d="M30 30c0 16.569 13.432 30 30 30v-60c-16.568 0-30 13.432-30 30z"></path>
<path transform="translate(540, 300) translate(30,30) rotate(270) translate(-30,-30)"
fill="#ade8f4" stroke="#48cae4" stroke-width="2"
d="M30 30c0-16.57-13.431-30-30-30v60c16.569 0 30-13.432 30-30z"></path>
</svg>
<svg>
<path transform="translate(540, 360) translate(30,30) rotate(270) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2" d="M0 0h60v60h-60z"></path>
<path transform="translate(540, 360) translate(30,30) rotate(270) translate(-30,-30)"
fill="#ade8f4" stroke="#48cae4" stroke-width="2"
d="M0 30c0 16.569 13.432 30 30 30v-60c-16.568 0-30 13.432-30 30z"></path>
</svg>
<svg>
<path transform="translate(540, 420) translate(30,30) rotate(180) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2" d="M0 0h60v60h-60z"></path>
<path transform="translate(540, 420) translate(30,30) rotate(180) translate(-30,-30)"
d="M0 30C0 48.05 15.3348 60 30 60V0C15.3348 0 0 14.9129 0 30Z" stroke="#48cae4"
stroke-width="2" fill="#0077b6"></path>
<path transform="translate(540, 420) translate(30,30) rotate(180) translate(-30,-30)"
d="M60 30C60 14.9129 48.4719 0 30 0L30 60C48.4719 60 60 48.05 60 30Z" stroke="#48cae4"
stroke-width="2" fill="none"></path>
</svg>
<svg>
<path transform="translate(540, 480)" fill="none" stroke="#48cae4" stroke-width="2"
d="M0 0h60v60h-60z"></path>
<circle transform="translate(540, 480)" cx="30" cy="30" r="30" fill="none" stroke="#48cae4"
stroke-width="2"></circle>
</svg>
<svg>
<path transform="translate(540, 540) translate(30,30) rotate(180) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2" d="M0 0h60v60h-60z"></path>
<path transform="translate(540, 540) translate(30,30) rotate(180) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2"
d="M30 30c0 16.569 13.432 30 30 30v-60c-16.568 0-30 13.432-30 30z"></path>
<path transform="translate(540, 540) translate(30,30) rotate(180) translate(-30,-30)"
fill="none" stroke="#48cae4" stroke-width="2"
d="M30 30c0-16.57-13.431-30-30-30v60c16.569 0 30-13.432 30-30z"></path>
</svg>
</svg>

After

Width:  |  Height:  |  Size: 51 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 18 KiB

View file

@ -0,0 +1,148 @@
---
title: "Hosting & Deployment"
weight: 14
draft: false
description: "Learn how to deploy a Blowfish site."
slug: "hosting-deployment"
tags: ["docs", "hosting", "deployment", "github", "netlify", "render"]
series: ["Documentation"]
series_order: 14
---
There are many ways to deploy your Hugo website built with Blowfish. The theme is designed to be flexible in almost any deployment scenario.
Blowfish is built using relative URLs throughout the theme. This enables sites to easily be deployed to sub-folders and hosts like GitHub Pages. There's usually no special configuration required for this to work as long as the `baseURL` parameter has been configured in the `config.toml` file.
The official Hugo [Hosting and Deployment](https://gohugo.io/hosting-and-deployment/) docs are the best place to learn how to deploy your site. The sections below contain some specific theme configuration details that can help you deploy smoothly with certain providers.
**Choose your provider:**
- [GitHub Pages](#github-pages)
- [Netlify](#netlify)
- [Render](#render)
- [Cloudflare Pages](#cloudflare-pages)
- [Shared hosting, VPS or private web server](#shared-hosting-vps-or-private-web-server)
---
## GitHub Pages
GitHub allows hosting on [GitHub Pages](https://docs.github.com/en/pages/getting-started-with-github-pages/about-github-pages) using Actions. To enable this functionality, enable Pages on your repo and create a new Actions workflow to build and deploy your site.
The file needs to be in YAML format, placed within the `.github/workflows/` directory of your GitHub repository and named with a `.yml` extension.
{{< alert >}}
**Important:** Ensure you set the correct branch name under `branches` and in the deploy step `if` parameter to the source branch used in your project.
{{< /alert >}}
```yaml
# .github/workflows/gh-pages.yml
name: GitHub Pages
on:
push:
branches:
- main
jobs:
build-deploy:
runs-on: ubuntu-20.04
concurrency:
group: ${{ github.workflow }}-${{ github.ref }}
steps:
- name: Checkout
uses: actions/checkout@v3
with:
submodules: true
fetch-depth: 0
- name: Setup Hugo
uses: peaceiris/actions-hugo@v2
with:
hugo-version: "latest"
- name: Build
run: hugo --minify
- name: Deploy
uses: peaceiris/actions-gh-pages@v3
if: ${{ github.ref == 'refs/heads/main' }}
with:
github_token: ${{ secrets.GITHUB_TOKEN }}
publish_branch: gh-pages
publish_dir: ./public
```
Push the config file to GitHub and the action should automatically run. It may fail the first time and you'll need to visit the **Settings > Pages** section of your GitHub repo to check the source is correct. It should be set to use the `gh-pages` branch.
{{< screenshot src="github-pages-source.jpg" alt="Screen capture of GitHub Pages source" >}}
Once the settings are configured, re-run the action and the site should build and deploy correctly. You can consult the actions log to check everything deployed successfully.
## Netlify
To deploy to [Netlify](https://www.netlify.com), create a new continuous deployment site and link it to your source code. The build settings can be left blank in the Netlify UI. You will only need to configure the domain you'll be using.
{{< screenshot src="netlify-build-settings.jpg" alt="Screen capture of Netlify build settings" >}}
Then in the root of your site repository, create a `netlify.toml` file:
```toml
# netlify.toml
[build]
command = "hugo mod get -u && hugo --gc --minify -b $URL"
publish = "public"
[build.environment]
NODE_ENV = "production"
GO_VERSION = "1.16"
TZ = "UTC" # Set to preferred timezone
[context.production.environment]
HUGO_VERSION = "0.104.1"
HUGO_ENV = "production"
[context.deploy-preview.environment]
HUGO_VERSION = "0.104.1"
```
This configuration assumes you are deploying Blowfish as a Hugo module. If you have installed the theme using another method, change the build command to simply `hugo --gc --minify -b $URL`.
When you push the config file to your repo, Netlify should automatically deploy your site. You can check the deploy logs in the Netlify UI to check for any errors.
## Render
Deploying to [Render](https://render.com) is very straightforward and all configuration is via the Render UI.
Create a new **Static Site** and link it to your project's code repository. Then simply configure the build command to be `hugo --gc --minify` and publish directory to be `public`.
{{< screenshot src="render-settings.jpg" alt="Screen capture of Render settings" >}}
The site will automatically build and deploy whenever you push a change to your repo.
## Cloudflare Pages
Cloudflare offers the [Pages](https://pages.cloudflare.com/) service that can host Hugo blogs. It builds the site from a git repository and then hosts it on Cloudflare's CDN. Follow their [Hugo deployment guide](https://developers.cloudflare.com/pages/framework-guides/deploy-a-hugo-site) to get started.
The Rocket Loader™ feature offered by Cloudflare tries to speed up rendering of web pages with JavaScript, but it breaks the appearance switcher in the theme. It can also cause an annoying light/dark screen flash when browsing your site due to scripts loading in the wrong order.
This problem can be fixed by disabling it:
- Go to the [Cloudflare dashboard](https://dash.cloudflare.com)
- Click on your domain name in the list
- Click _Optimization_ in the _Speed_ section
- Scroll down to _Rocket Loader™_ and disable it
Hugo sites built with Blowfish still load very quickly, even with this feature disabled.
## Shared hosting, VPS or private web server
Using traditional web hosting, or deploying to your own web server, is as simple as building your Hugo site and transferring the files to your host.
Make sure that the `baseURL` parameter in `config.toml` is set to the full URL to the root of your website (including any sub domains or sub-folders).
Then build your site using `hugo` and copy the contents of the output directory to the root of your web server and you will be ready to go. By default, the output directory is named `public`.
_If you need a hosting provider, check out [Vultr](https://www.vultr.com/?ref=8957394-8H) or [DigitalOcean](https://m.do.co/c/36841235e565). Signing up using these affiliate links will give you up to $100 in free credit so you can try the service._

View file

@ -0,0 +1,148 @@
---
title: "ホスティングとデプロイ"
weight: 14
draft: false
description: "Blowfish サイトのデプロイ方法について説明します。"
slug: "hosting-deployment"
tags: ["docs", "hosting", "deployment", "github", "netlify", "render"]
series: ["Documentation"]
series_order: 14
---
Blowfish で構築された Hugo ウェブサイトをデプロイする方法はたくさんあります。このテーマは、ほとんどすべてのデプロイシナリオで柔軟に対応できるように設計されています。
Blowfish は、テーマ全体で相対的な URL を使用して構築されています。これにより、サイトをサブフォルダや GitHub Pages などのホストに簡単にデプロイできます。`baseURL` パラメータが `config.toml` ファイルで設定されていれば、通常、これが機能するために特別な設定は必要ありません。
Hugo の公式[ホスティングとデプロイ](https://gohugo.io/hosting-and-deployment/)ドキュメントは、サイトのデプロイ方法を学ぶのに最適な場所です。以下のセクションには、特定のプロバイダーでスムーズにデプロイするのに役立つ、テーマ固有の設定の詳細が記載されています。
**プロバイダーを選択してください:**
- [GitHub Pages](#github-pages)
- [Netlify](#netlify)
- [Render](#render)
- [Cloudflare Pages](#cloudflare-pages)
- [共有ホスティング、VPS、またはプライベート Web サーバー](#共有ホスティングvpsまたはプライベート-web-サーバー)
---
## GitHub Pages
GitHub では、[GitHub Pages](https://docs.github.com/en/pages/getting-started-with-github-pages/about-github-pages) でのアクションを使用したホスティングが可能です。この機能を有効にするには、リポジトリで Pages を有効にし、サイトをビルドしてデプロイするための新しいアクションワークフローを作成します。
ファイルは YAML 形式で、GitHub リポジトリの `.github/workflows/` ディレクトリ内に配置し、`.yml` 拡張子を付けて名前を付ける必要があります。
{{< alert >}}
**重要:** `branches` の下とデプロイステップの `if` パラメータに、プロジェクトで使用されているソースブランチの正しいブランチ名を設定してください。
{{< /alert >}}
```yaml
# .github/workflows/gh-pages.yml
name: GitHub Pages
on:
push:
branches:
- main
jobs:
build-deploy:
runs-on: ubuntu-20.04
concurrency:
group: ${{ github.workflow }}-${{ github.ref }}
steps:
- name: Checkout
uses: actions/checkout@v3
with:
submodules: true
fetch-depth: 0
- name: Setup Hugo
uses: peaceiris/actions-hugo@v2
with:
hugo-version: "latest"
- name: Build
run: hugo --minify
- name: Deploy
uses: peaceiris/actions-gh-pages@v3
if: ${{ github.ref == 'refs/heads/main' }}
with:
github_token: ${{ secrets.GITHUB_TOKEN }}
publish_branch: gh-pages
publish_dir: ./public
```
設定ファイルを GitHub にプッシュすると、アクションが自動的に実行されます。最初は失敗する可能性があり、GitHub リポジトリの **Settings > Pages** セクションにアクセスして、ソースが正しいことを確認する必要があります。`gh-pages` ブランチを使用するように設定する必要があります。
{{< screenshot src="github-pages-source.jpg" alt="GitHub Pages ソースのスクリーンキャプチャ" >}}
設定が完了したら、アクションを再実行すると、サイトが正しくビルドおよびデプロイされます。すべてが正常にデプロイされたことを確認するには、アクションログを参照してください。
## Netlify
[Netlify](https://www.netlify.com) にデプロイするには、新しい継続的デプロイサイトを作成し、それをソースコードにリンクします。Netlify UI では、ビルド設定を空白のままにすることができます。使用するドメインを設定するだけで済みます。
{{< screenshot src="netlify-build-settings.jpg" alt="Netlify ビルド設定のスクリーンキャプチャ" >}}
次に、サイトリポジトリのルートに `netlify.toml` ファイルを作成します。
```toml
# netlify.toml
[build]
command = "hugo mod get -u && hugo --gc --minify -b $URL"
publish = "public"
[build.environment]
NODE_ENV = "production"
GO_VERSION = "1.16"
TZ = "UTC" # 希望のタイムゾーンに設定
[context.production.environment]
HUGO_VERSION = "0.104.1"
HUGO_ENV = "production"
[context.deploy-preview.environment]
HUGO_VERSION = "0.104.1"
```
この設定では、Blowfish を Hugo モジュールとしてデプロイすることを想定しています。別の方法でテーマをインストールした場合は、ビルドコマンドを単に `hugo --gc --minify -b $URL` に変更します。
設定ファイルをリポジトリにプッシュすると、Netlify は自動的にサイトをデプロイします。エラーがないか確認するには、Netlify UI のデプロイログを確認してください。
## Render
[Render](https://render.com) へのデプロイは非常に簡単で、すべての設定は Render UI を介して行います。
新しい **静的サイト** を作成し、それをプロジェクトのコードリポジトリにリンクします。次に、ビルドコマンドを `hugo --gc --minify` に、公開ディレクトリを `public` に設定するだけです。
{{< screenshot src="render-settings.jpg" alt="Render 設定のスクリーンキャプチャ" >}}
リポジトリに変更をプッシュするたびに、サイトが自動的にビルドおよびデプロイされます。
## Cloudflare Pages
Cloudflare は、Hugo ブログをホストできる [Pages](https://pages.cloudflare.com/) サービスを提供しています。これは、git リポジトリからサイトをビルドし、Cloudflare の CDN でホストします。[Hugo デプロイメントガイド](https://developers.cloudflare.com/pages/framework-guides/deploy-a-hugo-site)に従って始めてください。
Cloudflare が提供する Rocket Loader™ 機能は、JavaScript を使用した Web ページのレンダリングを高速化しようとしますが、テーマの外観スイッチャーが壊れます。また、スクリプトが間違った順序で読み込まれるため、サイトの閲覧時に迷惑な明暗の画面のちらつきが発生する可能性があります。
この問題は、次のように無効にすることで修正できます。
- [Cloudflare ダッシュボード](https://dash.cloudflare.com)に移動します
- リストでドメイン名をクリックします
- _Speed_ セクションで _Optimization_ をクリックします
- _Rocket Loader™_ までスクロールして無効にします
Blowfish でビルドされた Hugo サイトは、この機能を無効にしても非常に高速に読み込まれます。
## 共有ホスティング、VPS、またはプライベート Web サーバー
従来の Web ホスティングを使用したり、独自の Web サーバーにデプロイしたりするのは、Hugo サイトをビルドしてファイルをホストに転送するのと同じくらい簡単です。
`config.toml``baseURL` パラメータが、ウェブサイトのルートへの完全な URL (サブドメインやサブフォルダを含む) に設定されていることを確認してください。
次に、`hugo` を使用してサイトをビルドし、出力ディレクトリの内容を Web サーバーのルートにコピーすると、準備完了です。デフォルトでは、出力ディレクトリの名前は `public` です。
_ホスティングプロバイダーが必要な場合は、[Vultr](https://www.vultr.com/?ref=8957394-8H) または [DigitalOcean](https://m.do.co/c/36841235e565) を確認してください。これらのアフィリエイトリンクを使用してサインアップすると、最大 $100 の無料クレジットが付与されるため、サービスを試すことができます。_

View file

@ -0,0 +1,148 @@
---
title: "Hosting & Deployment"
weight: 14
draft: false
description: "Learn how to deploy a Blowfish site."
slug: "hosting-deployment"
tags: ["docs", "hosting", "deployment", "github", "netlify", "render"]
series: ["Documentation"]
series_order: 14
---
There are many ways to deploy your Hugo website built with Blowfish. The theme is designed to be flexible in almost any deployment scenario.
Blowfish is built using relative URLs throughout the theme. This enables sites to easily be deployed to sub-folders and hosts like GitHub Pages. There's usually no special configuration required for this to work as long as the `baseURL` parameter has been configured in the `config.toml` file.
The official Hugo [Hosting and Deployment](https://gohugo.io/hosting-and-deployment/) docs are the best place to learn how to deploy your site. The sections below contain some specific theme configuration details that can help you deploy smoothly with certain providers.
**Choose your provider:**
- [GitHub Pages](#github-pages)
- [Netlify](#netlify)
- [Render](#render)
- [Cloudflare Pages](#cloudflare-pages)
- [Shared hosting, VPS or private web server](#shared-hosting-vps-or-private-web-server)
---
## GitHub Pages
GitHub allows hosting on [GitHub Pages](https://docs.github.com/en/pages/getting-started-with-github-pages/about-github-pages) using Actions. To enable this functionality, enable Pages on your repo and create a new Actions workflow to build and deploy your site.
The file needs to be in YAML format, placed within the `.github/workflows/` directory of your GitHub repository and named with a `.yml` extension.
{{< alert >}}
**Important:** Ensure you set the correct branch name under `branches` and in the deploy step `if` parameter to the source branch used in your project.
{{< /alert >}}
```yaml
# .github/workflows/gh-pages.yml
name: GitHub Pages
on:
push:
branches:
- main
jobs:
build-deploy:
runs-on: ubuntu-20.04
concurrency:
group: ${{ github.workflow }}-${{ github.ref }}
steps:
- name: Checkout
uses: actions/checkout@v3
with:
submodules: true
fetch-depth: 0
- name: Setup Hugo
uses: peaceiris/actions-hugo@v2
with:
hugo-version: "latest"
- name: Build
run: hugo --minify
- name: Deploy
uses: peaceiris/actions-gh-pages@v3
if: ${{ github.ref == 'refs/heads/main' }}
with:
github_token: ${{ secrets.GITHUB_TOKEN }}
publish_branch: gh-pages
publish_dir: ./public
```
Push the config file to GitHub and the action should automatically run. It may fail the first time and you'll need to visit the **Settings > Pages** section of your GitHub repo to check the source is correct. It should be set to use the `gh-pages` branch.
{{< screenshot src="github-pages-source.jpg" alt="Screen capture of GitHub Pages source" >}}
Once the settings are configured, re-run the action and the site should build and deploy correctly. You can consult the actions log to check everything deployed successfully.
## Netlify
To deploy to [Netlify](https://www.netlify.com), create a new continuous deployment site and link it to your source code. The build settings can be left blank in the Netlify UI. You will only need to configure the domain you'll be using.
{{< screenshot src="netlify-build-settings.jpg" alt="Screen capture of Netlify build settings" >}}
Then in the root of your site repository, create a `netlify.toml` file:
```toml
# netlify.toml
[build]
command = "hugo mod get -u && hugo --gc --minify -b $URL"
publish = "public"
[build.environment]
NODE_ENV = "production"
GO_VERSION = "1.16"
TZ = "UTC" # Set to preferred timezone
[context.production.environment]
HUGO_VERSION = "0.104.1"
HUGO_ENV = "production"
[context.deploy-preview.environment]
HUGO_VERSION = "0.104.1"
```
This configuration assumes you are deploying Blowfish as a Hugo module. If you have installed the theme using another method, change the build command to simply `hugo --gc --minify -b $URL`.
When you push the config file to your repo, Netlify should automatically deploy your site. You can check the deploy logs in the Netlify UI to check for any errors.
## Render
Deploying to [Render](https://render.com) is very straightforward and all configuration is via the Render UI.
Create a new **Static Site** and link it to your project's code repository. Then simply configure the build command to be `hugo --gc --minify` and publish directory to be `public`.
{{< screenshot src="render-settings.jpg" alt="Screen capture of Render settings" >}}
The site will automatically build and deploy whenever you push a change to your repo.
## Cloudflare Pages
Cloudflare offers the [Pages](https://pages.cloudflare.com/) service that can host Hugo blogs. It builds the site from a git repository and then hosts it on Cloudflare's CDN. Follow their [Hugo deployment guide](https://developers.cloudflare.com/pages/framework-guides/deploy-a-hugo-site) to get started.
The Rocket Loader™ feature offered by Cloudflare tries to speed up rendering of web pages with JavaScript, but it breaks the appearance switcher in the theme. It can also cause an annoying light/dark screen flash when browsing your site due to scripts loading in the wrong order.
This problem can be fixed by disabling it:
- Go to the [Cloudflare dashboard](https://dash.cloudflare.com)
- Click on your domain name in the list
- Click _Optimization_ in the _Speed_ section
- Scroll down to _Rocket Loader™_ and disable it
Hugo sites built with Blowfish still load very quickly, even with this feature disabled.
## Shared hosting, VPS or private web server
Using traditional web hosting, or deploying to your own web server, is as simple as building your Hugo site and transferring the files to your host.
Make sure that the `baseURL` parameter in `config.toml` is set to the full URL to the root of your website (including any sub domains or sub-folders).
Then build your site using `hugo` and copy the contents of the output directory to the root of your web server and you will be ready to go. By default, the output directory is named `public`.
_If you need a hosting provider, check out [Vultr](https://www.vultr.com/?ref=8957394-8H) or [DigitalOcean](https://m.do.co/c/36841235e565). Signing up using these affiliate links will give you up to $100 in free credit so you can try the service._

View file

@ -0,0 +1,148 @@
---
title: "托管和部署"
weight: 14
draft: false
description: "了解如何部署 Blowfish 网页。"
slug: "hosting-deployment"
tags: ["文档", "托管", "部署", "github", "netlify", "渲染器"]
series: ["部署教程"]
series_order: 14
---
有许多方法可以部署基于 Blowfish 主题的 Hugo 网站。这个主题几乎在任何部署场景中都很灵活。
Blowfish 主题是通过将目录转换成相对 URL 路径来构建的。这让网站可以轻松地将子文件夹部署到类似 GitHub Pages 的托管服务中。只要在 `config.toml` 文件中配置了 `baseURL` 参数即可,通常不需要其他特殊的配置就能正常工作。
Hugo 官方[托管与部署](https://gohugo.io/hosting-and-deployment/)文档是了解如何部署网站的最佳方案。下面会介绍详细介绍一些方案,希望能帮助你在以下平台顺利部署。
**选择你喜欢的服务商:**
- [GitHub Pages](#github-pages)
- [Netlify](#netlify)
- [Render](#render)
- [Cloudflare Pages](#cloudflare-pages)
- [共享主机VPS 或者 私有服务器](#共享主机vps-或者-私有服务器)
---
## GitHub Pages
GitHub 允许你使用 Actions 在 [GitHub Pages](https://docs.github.com/en/pages/getting-started-with-github-pages/about-github-pages) 上托管静态网站。如果想要启用此功能,需要你在代码库中启用 Pages 并创建一个新的 Actions 工作流,以此来构建和部署你的网站。
工作流文件需要是 YAML 格式,放置在 GitHub 仓库的 `.github/workflows/` 目录下,并以 `.yml` 后缀命名即可。
{{< alert >}}
**重要:** 确保你需要部署的分支 `branches` 分支下和 YAML 的部署步骤中 `if` 参数一致,保证部署正确的分支。
{{< /alert >}}
```yaml
# .github/workflows/gh-pages.yml
name: GitHub Pages
on:
push:
branches:
- main
jobs:
build-deploy:
runs-on: ubuntu-20.04
concurrency:
group: ${{ github.workflow }}-${{ github.ref }}
steps:
- name: Checkout
uses: actions/checkout@v3
with:
submodules: true
fetch-depth: 0
- name: Setup Hugo
uses: peaceiris/actions-hugo@v2
with:
hugo-version: "latest"
- name: Build
run: hugo --minify
- name: Deploy
uses: peaceiris/actions-gh-pages@v3
if: ${{ github.ref == 'refs/heads/main' }}
with:
github_token: ${{ secrets.GITHUB_TOKEN }}
publish_branch: gh-pages
publish_dir: ./public
```
将配置文件推动到 GithubGithub 会自动运行工作流。你需要访问 Github 代码库的 **Settings > Pages** 部分,检查 YAML 配置是否正确。它应该被设置为使用 `gh-pages` 分支。
{{< screenshot src="github-pages-source.jpg" alt="Screen capture of GitHub Pages source" >}}
一旦配置完成后,重新运行 Actions 工作流,网站会正确构建和部署,你就可以查看 Actions 的日志来检查是否部署成功。
## Netlify
想要部署 [Netlify](https://www.netlify.com),需要创建一个新的 CI 并关联到你的源码。在 Netlify UI 中,构建的设置可以置空,你只需要配置你要绑定的域名。
{{< screenshot src="netlify-build-settings.jpg" alt="Screen capture of Netlify build settings" >}}
然后在你的代码库根目录下创建一个 `netlify.toml` 文件,具体内容如下:
```toml
# netlify.toml
[build]
command = "hugo mod get -u && hugo --gc --minify -b $URL"
publish = "public"
[build.environment]
NODE_ENV = "production"
GO_VERSION = "1.16"
TZ = "UTC" # Set to preferred timezone
[context.production.environment]
HUGO_VERSION = "0.104.1"
HUGO_ENV = "production"
[context.deploy-preview.environment]
HUGO_VERSION = "0.104.1"
```
这个配置默认使用的是 Hugo module 的安装方式来加载 Blowfish 主题的。如果你是通过别的方式加载 Blowfish请将构建命令改为 `hugo --gc --minify -b $URL`
当你将配置文件推动到你的代码库时Netlify 会自动触发并部署你的网站。你可以在 Netlify UI 中查看日志,以检查是否报错。
## Render
部署到 [Render](https://render.com) 非常地简单易懂,所有的配置都可以通过 Render UI 来完成。
创建一个 **静态网站** 并关联到你的代码库。然后只需要配置你的构建命令为 `hugo --gc --minify` 和发布目录为 `public` 即可。
{{< screenshot src="render-settings.jpg" alt="Screen capture of Render settings" >}}
当你更新你的代码库时,[Render](https://render.com) 总会自动构建并重新部署。
## Cloudflare Pages
Cloudflare 提供了 [Pages](https://pages.cloudflare.com/) 服务来托管 Hugo 站点。只需要从 Git 仓库构建并托管到 Cloudflare 的 CDN 即可。这部分可以参考 [Hugo 部署指南](https://developers.cloudflare.com/pages/framework-guides/deploy-a-hugo-site)。
Cloudflare 提供的 Rocket Loader™ 可以通过 JavaScript 来加速网页渲染,但是会破坏 Blowfish 主题中的外观切换器,甚至还有可能因为错误的加载顺序导致网站出现或亮或暗的屏幕闪烁。
可以通过禁用它来解决:
- 点击 [Cloudflare 控制台](https://dash.cloudflare.com)
- 点击你的域名
- 点击 _Speed_ 中的 _Optimization_ 选项
- 滚动到 _Rocket Loader™_ 并禁用它
即使不需要这个功能,基于 Blowfish 主题的 Hugo 站点本身加载就比较快。
## 共享主机VPS 或者 私有服务器
不论你是使用传统的网站托管,或是部署到你自己的服务器中,这和构建 Hugo 网站并传输文件到你的服务一样简单。
确保 `config.toml` 文件中的 `baseURL` 参数是你的网站根目录的完整 URL包括任何子域名或子文件夹
然后使用 `hugo` 构建你的网站,并将输出目录复制到你的服务器根目录,至此你已经部署完毕了。需要注意的是,默认情况下构建好的网站目录是 `public`
_如果你需要一个托管提供商你可以尝试 [Vultr](https://www.vultr.com/?ref=8957394-8H) 或者 [DigitalOcean](https://m.do.co/c/36841235e565)。注册这些产品默认会给你100美元的免费额度以便你托管服务。_

Binary file not shown.

After

Width:  |  Height:  |  Size: 37 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 28 KiB

View file

@ -0,0 +1,574 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
style="margin:auto;background:rgba(NaN, NaN, NaN, 0);display:block;z-index:1;position:relative"
width="1084" height="322" preserveAspectRatio="xMidYMid" viewBox="0 0 1084 322">
<defs>
<pattern id="pid-0.7735807359934106" x="0" y="0" width="345.6" height="345.6"
patternUnits="userSpaceOnUse">
<g transform="scale(1.35)">
<g>
<line x1="237.6288884328494" x2="201.39714008747956" y1="119.05338354492488"
y2="155.28513189029474" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="237.6288884328494" x2="201.39714008747956" y1="-392.9466164550751"
y2="-356.71486810970526" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="493.6288884328494" x2="457.39714008747956" y1="-392.9466164550751"
y2="-356.71486810970526" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="749.6288884328494" x2="713.3971400874796" y1="-392.9466164550751"
y2="-356.71486810970526" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="237.6288884328494" x2="201.39714008747956" y1="-136.94661645507512"
y2="-100.71486810970526" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="493.6288884328494" x2="457.39714008747956" y1="-136.94661645507512"
y2="-100.71486810970526" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="749.6288884328494" x2="713.3971400874796" y1="-136.94661645507512"
y2="-100.71486810970526" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="237.6288884328494" x2="201.39714008747956" y1="119.05338354492488"
y2="155.28513189029474" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="493.6288884328494" x2="457.39714008747956" y1="119.05338354492488"
y2="155.28513189029474" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="749.6288884328494" x2="713.3971400874796" y1="119.05338354492488"
y2="155.28513189029474" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="244.43797352167968" x2="179.25167385613412" y1="196.21419032492787"
y2="261.40048999047343" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="244.43797352167968" x2="179.25167385613412" y1="-315.78580967507213"
y2="-250.59951000952657" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="500.4379735216797" x2="435.2516738561341" y1="-315.78580967507213"
y2="-250.59951000952657" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="756.4379735216796" x2="691.2516738561342" y1="-315.78580967507213"
y2="-250.59951000952657" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="244.43797352167968" x2="179.25167385613412" y1="-59.78580967507213"
y2="5.400489990473432" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="500.4379735216797" x2="435.2516738561341" y1="-59.78580967507213"
y2="5.400489990473432" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="756.4379735216796" x2="691.2516738561342" y1="-59.78580967507213"
y2="5.400489990473432" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="244.43797352167968" x2="179.25167385613412" y1="196.21419032492787"
y2="261.40048999047343" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="500.4379735216797" x2="435.2516738561341" y1="196.21419032492787"
y2="261.40048999047343" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="756.4379735216796" x2="691.2516738561342" y1="196.21419032492787"
y2="261.40048999047343" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="219.6724359102308" x2="209.2181431749452" y1="92.85808081141191"
y2="103.31237354669749" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="219.6724359102308" x2="209.2181431749452" y1="-419.1419191885881"
y2="-408.6876264533025" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="475.6724359102308" x2="465.2181431749452" y1="-419.1419191885881"
y2="-408.6876264533025" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="731.6724359102308" x2="721.2181431749452" y1="-419.1419191885881"
y2="-408.6876264533025" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="219.6724359102308" x2="209.2181431749452" y1="-163.14191918858808"
y2="-152.68762645330253" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="475.6724359102308" x2="465.2181431749452" y1="-163.14191918858808"
y2="-152.68762645330253" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="731.6724359102308" x2="721.2181431749452" y1="-163.14191918858808"
y2="-152.68762645330253" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="219.6724359102308" x2="209.2181431749452" y1="92.85808081141191"
y2="103.31237354669749" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="475.6724359102308" x2="465.2181431749452" y1="92.85808081141191"
y2="103.31237354669749" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="731.6724359102308" x2="721.2181431749452" y1="92.85808081141191"
y2="103.31237354669749" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="112.00565118011832" x2="71.15817744773324" y1="56.63419812919665"
y2="97.48167186158173" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="112.00565118011832" x2="71.15817744773324" y1="-455.36580187080335"
y2="-414.51832813841827" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="368.0056511801183" x2="327.15817744773324" y1="-455.36580187080335"
y2="-414.51832813841827" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="624.0056511801183" x2="583.1581774477332" y1="-455.36580187080335"
y2="-414.51832813841827" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="112.00565118011832" x2="71.15817744773324" y1="-199.36580187080335"
y2="-158.51832813841827" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="368.0056511801183" x2="327.15817744773324" y1="-199.36580187080335"
y2="-158.51832813841827" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="624.0056511801183" x2="583.1581774477332" y1="-199.36580187080335"
y2="-158.51832813841827" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="112.00565118011832" x2="71.15817744773324" y1="56.63419812919665"
y2="97.48167186158173" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="368.0056511801183" x2="327.15817744773324" y1="56.63419812919665"
y2="97.48167186158173" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="624.0056511801183" x2="583.1581774477332" y1="56.63419812919665"
y2="97.48167186158173" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="60.932966336476014" x2="49.388821076756514" y1="125.65681060957188"
y2="137.20095586929136" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="60.932966336476014" x2="49.388821076756514" y1="-386.3431893904281"
y2="-374.79904413070864" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="316.932966336476" x2="305.3888210767565" y1="-386.3431893904281"
y2="-374.79904413070864" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="572.932966336476" x2="561.3888210767565" y1="-386.3431893904281"
y2="-374.79904413070864" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="60.932966336476014" x2="49.388821076756514" y1="-130.3431893904281"
y2="-118.79904413070864" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="316.932966336476" x2="305.3888210767565" y1="-130.3431893904281"
y2="-118.79904413070864" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="572.932966336476" x2="561.3888210767565" y1="-130.3431893904281"
y2="-118.79904413070864" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="60.932966336476014" x2="49.388821076756514" y1="125.65681060957188"
y2="137.20095586929136" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="316.932966336476" x2="305.3888210767565" y1="125.65681060957188"
y2="137.20095586929136" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="572.932966336476" x2="561.3888210767565" y1="125.65681060957188"
y2="137.20095586929136" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="103.78310212459807" x2="35.08486945593138" y1="-2.328164446496814"
y2="66.37006822216988" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="103.78310212459807" x2="35.08486945593138" y1="-514.3281644464968"
y2="-445.6299317778301" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="359.7831021245981" x2="291.08486945593137" y1="-514.3281644464968"
y2="-445.6299317778301" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="615.783102124598" x2="547.0848694559314" y1="-514.3281644464968"
y2="-445.6299317778301" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="103.78310212459807" x2="35.08486945593138" y1="-258.3281644464968"
y2="-189.6299317778301" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="359.7831021245981" x2="291.08486945593137" y1="-258.3281644464968"
y2="-189.6299317778301" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="615.783102124598" x2="547.0848694559314" y1="-258.3281644464968"
y2="-189.6299317778301" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="103.78310212459807" x2="35.08486945593138" y1="-2.328164446496814"
y2="66.37006822216988" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="359.7831021245981" x2="291.08486945593137" y1="-2.328164446496814"
y2="66.37006822216988" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="615.783102124598" x2="547.0848694559314" y1="-2.328164446496814"
y2="66.37006822216988" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="103.78310212459807" x2="35.08486945593138" y1="253.67183555350317"
y2="322.3700682221699" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="211.69894364075495" x2="194.13528259328754" y1="166.21741462144607"
y2="183.78107566891347" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="211.69894364075495" x2="194.13528259328754" y1="-345.7825853785539"
y2="-328.21892433108655" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="467.6989436407549" x2="450.13528259328757" y1="-345.7825853785539"
y2="-328.21892433108655" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="723.6989436407549" x2="706.1352825932876" y1="-345.7825853785539"
y2="-328.21892433108655" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="211.69894364075495" x2="194.13528259328754" y1="-89.78258537855393"
y2="-72.21892433108653" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="467.6989436407549" x2="450.13528259328757" y1="-89.78258537855393"
y2="-72.21892433108653" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="723.6989436407549" x2="706.1352825932876" y1="-89.78258537855393"
y2="-72.21892433108653" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="211.69894364075495" x2="194.13528259328754" y1="166.21741462144607"
y2="183.78107566891347" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="467.6989436407549" x2="450.13528259328757" y1="166.21741462144607"
y2="183.78107566891347" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="723.6989436407549" x2="706.1352825932876" y1="166.21741462144607"
y2="183.78107566891347" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="44.012515207413756" x2="6.2920050630466875" y1="153.79537767995515"
y2="191.5158878243222" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="44.012515207413756" x2="6.2920050630466875" y1="-358.20462232004485"
y2="-320.4841121756778" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="300.01251520741374" x2="262.2920050630467" y1="-358.20462232004485"
y2="-320.4841121756778" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="556.0125152074138" x2="518.2920050630466" y1="-358.20462232004485"
y2="-320.4841121756778" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="44.012515207413756" x2="6.2920050630466875" y1="-102.20462232004485"
y2="-64.48411217567781" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="300.01251520741374" x2="262.2920050630467" y1="-102.20462232004485"
y2="-64.48411217567781" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="556.0125152074138" x2="518.2920050630466" y1="-102.20462232004485"
y2="-64.48411217567781" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="44.012515207413756" x2="6.2920050630466875" y1="153.79537767995515"
y2="191.5158878243222" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="300.01251520741374" x2="262.2920050630467" y1="153.79537767995515"
y2="191.5158878243222" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="556.0125152074138" x2="518.2920050630466" y1="153.79537767995515"
y2="191.5158878243222" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="105.49237048043514" x2="31.549625942354083" y1="123.41684480916788"
y2="197.35958934724894" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="105.49237048043514" x2="31.549625942354083" y1="-388.58315519083214"
y2="-314.64041065275103" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="361.49237048043517" x2="287.54962594235406" y1="-388.58315519083214"
y2="-314.64041065275103" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="617.4923704804352" x2="543.549625942354" y1="-388.58315519083214"
y2="-314.64041065275103" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="105.49237048043514" x2="31.549625942354083" y1="-132.58315519083212"
y2="-58.64041065275106" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="361.49237048043517" x2="287.54962594235406" y1="-132.58315519083212"
y2="-58.64041065275106" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="617.4923704804352" x2="543.549625942354" y1="-132.58315519083212"
y2="-58.64041065275106" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="105.49237048043514" x2="31.549625942354083" y1="123.41684480916788"
y2="197.35958934724894" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="361.49237048043517" x2="287.54962594235406" y1="123.41684480916788"
y2="197.35958934724894" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="617.4923704804352" x2="543.549625942354" y1="123.41684480916788"
y2="197.35958934724894" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<animateTransform attributeName="transform" type="translate" values="0 0;-256 256"
keyTimes="0;1" repeatCount="indefinite" dur="10s"></animateTransform>
</g>
<g>
<line x1="95.73622575770466" x2="50.085335235319484" y1="20.45659654328417"
y2="66.10748706566935" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="95.73622575770466" x2="50.085335235319484" y1="-491.54340345671585"
y2="-445.8925129343306" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="351.7362257577047" x2="306.08533523531946" y1="-491.54340345671585"
y2="-445.8925129343306" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="607.7362257577047" x2="562.0853352353195" y1="-491.54340345671585"
y2="-445.8925129343306" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="95.73622575770466" x2="50.085335235319484" y1="-235.54340345671582"
y2="-189.89251293433065" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="351.7362257577047" x2="306.08533523531946" y1="-235.54340345671582"
y2="-189.89251293433065" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="607.7362257577047" x2="562.0853352353195" y1="-235.54340345671582"
y2="-189.89251293433065" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="95.73622575770466" x2="50.085335235319484" y1="20.45659654328417"
y2="66.10748706566935" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="351.7362257577047" x2="306.08533523531946" y1="20.45659654328417"
y2="66.10748706566935" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="607.7362257577047" x2="562.0853352353195" y1="20.45659654328417"
y2="66.10748706566935" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="263.34308373797757" x2="226.59561736370148" y1="112.42933995479353"
y2="149.17680632906962" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="263.34308373797757" x2="226.59561736370148" y1="-399.57066004520647"
y2="-362.8231936709304" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="519.3430837379776" x2="482.5956173637015" y1="-399.57066004520647"
y2="-362.8231936709304" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="775.3430837379776" x2="738.5956173637014" y1="-399.57066004520647"
y2="-362.8231936709304" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="263.34308373797757" x2="226.59561736370148" y1="-143.57066004520647"
y2="-106.82319367093038" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="519.3430837379776" x2="482.5956173637015" y1="-143.57066004520647"
y2="-106.82319367093038" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="775.3430837379776" x2="738.5956173637014" y1="-143.57066004520647"
y2="-106.82319367093038" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="263.34308373797757" x2="226.59561736370148" y1="112.42933995479353"
y2="149.17680632906962" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="519.3430837379776" x2="482.5956173637015" y1="112.42933995479353"
y2="149.17680632906962" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="775.3430837379776" x2="738.5956173637014" y1="112.42933995479353"
y2="149.17680632906962" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="7.343083737977565" x2="-29.40438263629852" y1="112.42933995479353"
y2="149.17680632906962" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="29.5343611349199" x2="-26.261040392985034" y1="205.16777076655512"
y2="260.96317229446004" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="29.5343611349199" x2="-26.261040392985034" y1="-306.8322292334449"
y2="-251.03682770553996" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="285.5343611349199" x2="229.73895960701498" y1="-306.8322292334449"
y2="-251.03682770553996" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="541.5343611349199" x2="485.738959607015" y1="-306.8322292334449"
y2="-251.03682770553996" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="29.5343611349199" x2="-26.261040392985034" y1="-50.83222923344488"
y2="4.963172294460037" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="285.5343611349199" x2="229.73895960701498" y1="-50.83222923344488"
y2="4.963172294460037" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="541.5343611349199" x2="485.738959607015" y1="-50.83222923344488"
y2="4.963172294460037" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="29.5343611349199" x2="-26.261040392985034" y1="205.16777076655512"
y2="260.96317229446004" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="285.5343611349199" x2="229.73895960701498" y1="205.16777076655512"
y2="260.96317229446004" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="541.5343611349199" x2="485.738959607015" y1="205.16777076655512"
y2="260.96317229446004" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="235.025028503587" x2="173.48946106938683" y1="23.306929884424335"
y2="84.84249731862451" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="235.025028503587" x2="173.48946106938683" y1="-488.69307011557567"
y2="-427.1575026813755" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="491.025028503587" x2="429.48946106938683" y1="-488.69307011557567"
y2="-427.1575026813755" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="747.025028503587" x2="685.4894610693868" y1="-488.69307011557567"
y2="-427.1575026813755" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="235.025028503587" x2="173.48946106938683" y1="-232.69307011557567"
y2="-171.1575026813755" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="491.025028503587" x2="429.48946106938683" y1="-232.69307011557567"
y2="-171.1575026813755" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="747.025028503587" x2="685.4894610693868" y1="-232.69307011557567"
y2="-171.1575026813755" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="235.025028503587" x2="173.48946106938683" y1="23.306929884424335"
y2="84.84249731862451" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="491.025028503587" x2="429.48946106938683" y1="23.306929884424335"
y2="84.84249731862451" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="747.025028503587" x2="685.4894610693868" y1="23.306929884424335"
y2="84.84249731862451" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="225.00990918130768" x2="200.62370409686488" y1="210.1052181599721"
y2="234.4914232444149" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="225.00990918130768" x2="200.62370409686488" y1="-301.8947818400279"
y2="-277.50857675558507" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="481.00990918130765" x2="456.6237040968649" y1="-301.8947818400279"
y2="-277.50857675558507" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="737.0099091813076" x2="712.6237040968649" y1="-301.8947818400279"
y2="-277.50857675558507" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="225.00990918130768" x2="200.62370409686488" y1="-45.89478184002789"
y2="-21.508576755585096" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="481.00990918130765" x2="456.6237040968649" y1="-45.89478184002789"
y2="-21.508576755585096" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="737.0099091813076" x2="712.6237040968649" y1="-45.89478184002789"
y2="-21.508576755585096" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="225.00990918130768" x2="200.62370409686488" y1="210.1052181599721"
y2="234.4914232444149" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="481.00990918130765" x2="456.6237040968649" y1="210.1052181599721"
y2="234.4914232444149" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="737.0099091813076" x2="712.6237040968649" y1="210.1052181599721"
y2="234.4914232444149" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="171.55017713954658" x2="102.05334080042758" y1="78.55895711807653"
y2="148.05579345719553" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="171.55017713954658" x2="102.05334080042758" y1="-433.44104288192347"
y2="-363.94420654280447" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="427.5501771395466" x2="358.0533408004276" y1="-433.44104288192347"
y2="-363.94420654280447" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="683.5501771395466" x2="614.0533408004276" y1="-433.44104288192347"
y2="-363.94420654280447" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="171.55017713954658" x2="102.05334080042758" y1="-177.44104288192347"
y2="-107.94420654280447" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="427.5501771395466" x2="358.0533408004276" y1="-177.44104288192347"
y2="-107.94420654280447" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="683.5501771395466" x2="614.0533408004276" y1="-177.44104288192347"
y2="-107.94420654280447" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="171.55017713954658" x2="102.05334080042758" y1="78.55895711807653"
y2="148.05579345719553" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="427.5501771395466" x2="358.0533408004276" y1="78.55895711807653"
y2="148.05579345719553" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="683.5501771395466" x2="614.0533408004276" y1="78.55895711807653"
y2="148.05579345719553" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="258.4358284744095" x2="228.09906783279462" y1="10.646186924515469"
y2="40.98294756613034" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="258.4358284744095" x2="228.09906783279462" y1="-501.35381307548454"
y2="-471.01705243386965" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="514.4358284744095" x2="484.0990678327946" y1="-501.35381307548454"
y2="-471.01705243386965" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="770.4358284744095" x2="740.0990678327946" y1="-501.35381307548454"
y2="-471.01705243386965" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="258.4358284744095" x2="228.09906783279462" y1="-245.35381307548454"
y2="-215.01705243386965" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="514.4358284744095" x2="484.0990678327946" y1="-245.35381307548454"
y2="-215.01705243386965" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="770.4358284744095" x2="740.0990678327946" y1="-245.35381307548454"
y2="-215.01705243386965" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="258.4358284744095" x2="228.09906783279462" y1="10.646186924515469"
y2="40.98294756613034" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="514.4358284744095" x2="484.0990678327946" y1="10.646186924515469"
y2="40.98294756613034" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="770.4358284744095" x2="740.0990678327946" y1="10.646186924515469"
y2="40.98294756613034" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="2.4358284744095045" x2="-27.900932167205383" y1="10.646186924515469"
y2="40.98294756613034" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="35.41624886616098" x2="-5.966808810922494" y1="10.151780697595989"
y2="51.53483837467946" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="35.41624886616098" x2="-5.966808810922494" y1="-501.848219302404"
y2="-460.46516162532055" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="291.41624886616097" x2="250.0331911890775" y1="-501.848219302404"
y2="-460.46516162532055" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="547.416248866161" x2="506.0331911890775" y1="-501.848219302404"
y2="-460.46516162532055" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="35.41624886616098" x2="-5.966808810922494" y1="-245.848219302404"
y2="-204.46516162532055" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="291.41624886616097" x2="250.0331911890775" y1="-245.848219302404"
y2="-204.46516162532055" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="547.416248866161" x2="506.0331911890775" y1="-245.848219302404"
y2="-204.46516162532055" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="35.41624886616098" x2="-5.966808810922494" y1="10.151780697595989"
y2="51.53483837467946" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="291.41624886616097" x2="250.0331911890775" y1="10.151780697595989"
y2="51.53483837467946" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="547.416248866161" x2="506.0331911890775" y1="10.151780697595989"
y2="51.53483837467946" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="90.76285286976488" x2="72.92514980496989" y1="79.79001478147771"
y2="97.6277178462727" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="90.76285286976488" x2="72.92514980496989" y1="-432.2099852185223"
y2="-414.37228215372727" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="346.76285286976486" x2="328.9251498049699" y1="-432.2099852185223"
y2="-414.37228215372727" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="602.7628528697649" x2="584.9251498049699" y1="-432.2099852185223"
y2="-414.37228215372727" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="90.76285286976488" x2="72.92514980496989" y1="-176.2099852185223"
y2="-158.3722821537273" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="346.76285286976486" x2="328.9251498049699" y1="-176.2099852185223"
y2="-158.3722821537273" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="602.7628528697649" x2="584.9251498049699" y1="-176.2099852185223"
y2="-158.3722821537273" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="90.76285286976488" x2="72.92514980496989" y1="79.79001478147771"
y2="97.6277178462727" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="346.76285286976486" x2="328.9251498049699" y1="79.79001478147771"
y2="97.6277178462727" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="602.7628528697649" x2="584.9251498049699" y1="79.79001478147771"
y2="97.6277178462727" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<animateTransform attributeName="transform" type="translate" values="0 0;-256 256"
keyTimes="0;1" repeatCount="indefinite" dur="5s"></animateTransform>
</g>
<g>
<line x1="93.6896305353637" x2="75.71575147590588" y1="83.83758835275793"
y2="101.81146741221576" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="93.6896305353637" x2="75.71575147590588" y1="-428.16241164724204"
y2="-410.18853258778427" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="349.6896305353637" x2="331.7157514759059" y1="-428.16241164724204"
y2="-410.18853258778427" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="605.6896305353637" x2="587.7157514759059" y1="-428.16241164724204"
y2="-410.18853258778427" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="93.6896305353637" x2="75.71575147590588" y1="-172.16241164724207"
y2="-154.18853258778424" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="349.6896305353637" x2="331.7157514759059" y1="-172.16241164724207"
y2="-154.18853258778424" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="605.6896305353637" x2="587.7157514759059" y1="-172.16241164724207"
y2="-154.18853258778424" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="93.6896305353637" x2="75.71575147590588" y1="83.83758835275793"
y2="101.81146741221576" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="349.6896305353637" x2="331.7157514759059" y1="83.83758835275793"
y2="101.81146741221576" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="605.6896305353637" x2="587.7157514759059" y1="83.83758835275793"
y2="101.81146741221576" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="207.24941141296466" x2="167.48134532138562" y1="234.55973050121918"
y2="274.3277965927982" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="207.24941141296466" x2="167.48134532138562" y1="-277.4402694987808"
y2="-237.67220340720178" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="463.24941141296466" x2="423.4813453213856" y1="-277.4402694987808"
y2="-237.67220340720178" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="719.2494114129647" x2="679.4813453213856" y1="-277.4402694987808"
y2="-237.67220340720178" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="207.24941141296466" x2="167.48134532138562" y1="-21.440269498780822"
y2="18.327796592798222" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="463.24941141296466" x2="423.4813453213856" y1="-21.440269498780822"
y2="18.327796592798222" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="719.2494114129647" x2="679.4813453213856" y1="-21.440269498780822"
y2="18.327796592798222" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="207.24941141296466" x2="167.48134532138562" y1="234.55973050121918"
y2="274.3277965927982" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="463.24941141296466" x2="423.4813453213856" y1="234.55973050121918"
y2="274.3277965927982" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="719.2494114129647" x2="679.4813453213856" y1="234.55973050121918"
y2="274.3277965927982" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="69.19671201083756" x2="20.15599089926107" y1="61.52941038272999"
y2="110.57013149430648" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="69.19671201083756" x2="20.15599089926107" y1="-450.47058961727"
y2="-401.42986850569355" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="325.1967120108376" x2="276.15599089926104" y1="-450.47058961727"
y2="-401.42986850569355" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="581.1967120108376" x2="532.155990899261" y1="-450.47058961727"
y2="-401.42986850569355" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="69.19671201083756" x2="20.15599089926107" y1="-194.47058961727"
y2="-145.42986850569352" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="325.1967120108376" x2="276.15599089926104" y1="-194.47058961727"
y2="-145.42986850569352" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="581.1967120108376" x2="532.155990899261" y1="-194.47058961727"
y2="-145.42986850569352" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="69.19671201083756" x2="20.15599089926107" y1="61.52941038272999"
y2="110.57013149430648" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="325.1967120108376" x2="276.15599089926104" y1="61.52941038272999"
y2="110.57013149430648" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="581.1967120108376" x2="532.155990899261" y1="61.52941038272999"
y2="110.57013149430648" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="153.36870174443493" x2="103.52218176454608" y1="129.93915864820679"
y2="179.78567862809564" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="153.36870174443493" x2="103.52218176454608" y1="-382.0608413517932"
y2="-332.21432137190436" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="409.36870174443493" x2="359.5221817645461" y1="-382.0608413517932"
y2="-332.21432137190436" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="665.3687017444349" x2="615.5221817645461" y1="-382.0608413517932"
y2="-332.21432137190436" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="153.36870174443493" x2="103.52218176454608" y1="-126.06084135179321"
y2="-76.21432137190436" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="409.36870174443493" x2="359.5221817645461" y1="-126.06084135179321"
y2="-76.21432137190436" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="665.3687017444349" x2="615.5221817645461" y1="-126.06084135179321"
y2="-76.21432137190436" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="153.36870174443493" x2="103.52218176454608" y1="129.93915864820679"
y2="179.78567862809564" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="409.36870174443493" x2="359.5221817645461" y1="129.93915864820679"
y2="179.78567862809564" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="665.3687017444349" x2="615.5221817645461" y1="129.93915864820679"
y2="179.78567862809564" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="49.20494471467643" x2="2.7142059537850685" y1="141.75997600855746"
y2="188.25071476944882" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="49.20494471467643" x2="2.7142059537850685" y1="-370.2400239914425"
y2="-323.7492852305512" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="305.20494471467646" x2="258.71420595378504" y1="-370.2400239914425"
y2="-323.7492852305512" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="561.2049447146765" x2="514.714205953785" y1="-370.2400239914425"
y2="-323.7492852305512" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="49.20494471467643" x2="2.7142059537850685" y1="-114.24002399144254"
y2="-67.74928523055118" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="305.20494471467646" x2="258.71420595378504" y1="-114.24002399144254"
y2="-67.74928523055118" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="561.2049447146765" x2="514.714205953785" y1="-114.24002399144254"
y2="-67.74928523055118" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="49.20494471467643" x2="2.7142059537850685" y1="141.75997600855746"
y2="188.25071476944882" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="305.20494471467646" x2="258.71420595378504" y1="141.75997600855746"
y2="188.25071476944882" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="561.2049447146765" x2="514.714205953785" y1="141.75997600855746"
y2="188.25071476944882" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="84.6808460539986" x2="32.68305955000314" y1="-7.711036017440037"
y2="44.28675048655542" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="84.6808460539986" x2="32.68305955000314" y1="-519.71103601744"
y2="-467.71324951344457" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="340.6808460539986" x2="288.6830595500031" y1="-519.71103601744"
y2="-467.71324951344457" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="596.6808460539986" x2="544.6830595500031" y1="-519.71103601744"
y2="-467.71324951344457" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="84.6808460539986" x2="32.68305955000314" y1="-263.71103601744005"
y2="-211.71324951344457" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="340.6808460539986" x2="288.6830595500031" y1="-263.71103601744005"
y2="-211.71324951344457" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="596.6808460539986" x2="544.6830595500031" y1="-263.71103601744005"
y2="-211.71324951344457" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="84.6808460539986" x2="32.68305955000314" y1="-7.711036017440037"
y2="44.28675048655542" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="340.6808460539986" x2="288.6830595500031" y1="-7.711036017440037"
y2="44.28675048655542" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="596.6808460539986" x2="544.6830595500031" y1="-7.711036017440037"
y2="44.28675048655542" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="84.6808460539986" x2="32.68305955000314" y1="248.28896398255995"
y2="300.28675048655543" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="225.38342310559023" x2="185.66602314192056" y1="109.68961591653738"
y2="149.40701588020704" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="225.38342310559023" x2="185.66602314192056" y1="-402.3103840834626"
y2="-362.59298411979296" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="481.3834231055902" x2="441.66602314192056" y1="-402.3103840834626"
y2="-362.59298411979296" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="737.3834231055903" x2="697.6660231419205" y1="-402.3103840834626"
y2="-362.59298411979296" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="225.38342310559023" x2="185.66602314192056" y1="-146.31038408346262"
y2="-106.59298411979296" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="481.3834231055902" x2="441.66602314192056" y1="-146.31038408346262"
y2="-106.59298411979296" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="737.3834231055903" x2="697.6660231419205" y1="-146.31038408346262"
y2="-106.59298411979296" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="225.38342310559023" x2="185.66602314192056" y1="109.68961591653738"
y2="149.40701588020704" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="481.3834231055902" x2="441.66602314192056" y1="109.68961591653738"
y2="149.40701588020704" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="737.3834231055903" x2="697.6660231419205" y1="109.68961591653738"
y2="149.40701588020704" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="172.83662370669697" x2="103.52581079778793" y1="164.45975635392284"
y2="233.77056926283188" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="172.83662370669697" x2="103.52581079778793" y1="-347.54024364607716"
y2="-278.2294307371681" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="428.83662370669697" x2="359.5258107977879" y1="-347.54024364607716"
y2="-278.2294307371681" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="684.836623706697" x2="615.5258107977879" y1="-347.54024364607716"
y2="-278.2294307371681" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="172.83662370669697" x2="103.52581079778793" y1="-91.54024364607716"
y2="-22.229430737168116" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="428.83662370669697" x2="359.5258107977879" y1="-91.54024364607716"
y2="-22.229430737168116" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="684.836623706697" x2="615.5258107977879" y1="-91.54024364607716"
y2="-22.229430737168116" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="172.83662370669697" x2="103.52581079778793" y1="164.45975635392284"
y2="233.77056926283188" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="428.83662370669697" x2="359.5258107977879" y1="164.45975635392284"
y2="233.77056926283188" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="684.836623706697" x2="615.5258107977879" y1="164.45975635392284"
y2="233.77056926283188" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="254.85435949520382" x2="240.10841684705935" y1="-1.209429949430282"
y2="13.536512698714214" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="254.85435949520382" x2="240.10841684705935" y1="-513.2094299494303"
y2="-498.4634873012858" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="510.8543594952038" x2="496.10841684705935" y1="-513.2094299494303"
y2="-498.4634873012858" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="766.8543594952039" x2="752.1084168470593" y1="-513.2094299494303"
y2="-498.4634873012858" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="254.85435949520382" x2="240.10841684705935" y1="-257.2094299494303"
y2="-242.4634873012858" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="510.8543594952038" x2="496.10841684705935" y1="-257.2094299494303"
y2="-242.4634873012858" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="766.8543594952039" x2="752.1084168470593" y1="-257.2094299494303"
y2="-242.4634873012858" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="254.85435949520382" x2="240.10841684705935" y1="-1.209429949430282"
y2="13.536512698714214" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="510.8543594952038" x2="496.10841684705935" y1="-1.209429949430282"
y2="13.536512698714214" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="766.8543594952039" x2="752.1084168470593" y1="-1.209429949430282"
y2="13.536512698714214" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="254.85435949520382" x2="240.10841684705935" y1="254.79057005056973"
y2="269.5365126987142" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<animateTransform attributeName="transform" type="translate" values="0 0;-256 256"
keyTimes="0;1" repeatCount="indefinite" dur="10.3333333333333335s"></animateTransform>
</g>
</g>
</pattern>
</defs>
<rect x="0" y="0" width="1084" height="322" fill="url(#pid-0.7735807359934106)"></rect>
</svg>

File diff suppressed because it is too large Load diff

After

Width:  |  Height:  |  Size: 85 KiB

View file

@ -0,0 +1,210 @@
---
title: "Installazione"
weight: 2
draft: false
description: "Come installare il tema Blowfish."
slug: "installation"
tags: ["installazione", "documenti"]
series: ["Documentazione"]
series_order: 2
---
Segui semplicemente la procedura standard [Avvio Rapido](https://gohugo.io/getting-started/quick-start/) di Hugo per iniziare subito.
Sono riportate le istruzioni dettagliate per l'installazione. Sono disponibili anche le istruzioni per [aggiornare il tema](#installazione-aggiornamenti).
## Installazione
Queste istruzioni ti consentiranno di iniziare a utilizzare Hugo e Blowfish partendo da uno stato completamente vuoto. La maggior parte delle dipendenze menzionate in questa guida possono essere installate utilizzando il gestore pacchetti corretti per la tua piattaforma.
### Installare Hugo
Se non hai mai utilizzato Hugo prima, dovrai [installarlo nella tua local machine] (https://gohugo.io/getting-started/installing).
Puoi verificare se hai già installato Hugo utilizzando il comando `hugo version`.
{{< alert >}}
Assicurati di usare la **versione 0.87.0 di Hugo** o successiva, poiché il tema sfrutta alcune delle ultime caratteristiche di Hugo.
{{< /alert >}}
Puoi trovare le istruzioni dettagliate sull'installazione per la propria piattaforma in [Documenti Hugo](https://gohugo.io/getting-started/installing).
### Strumenti Blowfish (raccomandato)
Abbiamo appena lanciato un nuovo strumento CLI per aiutarti a iniziare con Blowfish. Questo ti permette di creare un nuovo progetto Hugo, di installare il tema e di impostare i file di configurazione del tema per te. È ancora in fase beta, quindi per favore [segnala qualsiasi problema che riscontri] (https://github.com/nunocoracao/blowfish-tools).
Installa globalmente lo strumento CLI usando npm (o altri gestori di pacchetti):
```shell
npx blowfish-tools
```
oppure
```shell
npm i -g blowfish-tools
```
Poi esegui il comando `blowfish-tools` per avviare un'esecuzione interattiva che ti guiderà attraverso la creazione e la configurazione dei casi d'uso.
```shell
blowfish-tools
```
È anche possibile eseguire il comando `blowfish-tools new` per creare un nuovo progetto Hugo e installare il tema in una sola volta. Per ulteriori informazioni, consulta la guida del CLI.
```shell
blowfish-tools new mynewsite
```
Ecco un rapido video che ti mostra quanto sia veloce iniziare a utilizzare Blowfish con lo strumento CLI:
<iframe width="100%" height="350" src="https://www.youtube.com/embed/SgXhGb-7QbU?si=ce44baicuQ6zMeXz" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
### Installazione senza CLI
#### Crea un novo sito
Esegui il comando `hugo new site mywebsite` per creare un nuovo sito di Hugo in una cartella chiamata `mywebsite`.
La cartella del progetto può essere chiamata come si vuole, ma le istruzioni che seguono presuppongono che si chiami `mywebsite`. Se si usa un nome diverso, sostituiscilo di conseguenza.
#### Scaricare il tema Blowfish
Esistono diversi modi per installare il tema Blowfish nel proprio sito web Hugo. Dal più facile al più difficile da installare e mantenere, sono:
- [Git submodule](#install-using-git) (recommended)
- [Hugo module](#install-using-hugo)
- [Copia manuale dei file](#install-manually)
Se non sei sicuro, scegli il metodo Git submodule.
#### Installazione usando Git
Questo è il metodo piu facile e veloce per mantere il tema aggiornato. Oltre **Hugo** e **Go**, dovrai assicurarti di avere **Git** installato nel tuo local machine.
cambia la directory del tuo sito web Hugo (che hai creato sopra), inizializza un nuovo repository `git` e aggiungi Blowfish come sottomodulo.
```bash
cd mywebsite
git init
git submodule add -b main https://github.com/nunocoracao/blowfish.git themes/blowfish
```
poi continua a [impostare i file di configurazione del tema](#set-up-theme-configuration-files).
#### Installazione usando Hugo
Per questo metodo utilizzerai Hugo per gestire i tuoi temi. Hugo utilizza **Go** per inizializzare e gestire i moduli, quindi assicurati di aver installato `go` prima di procedere.
1. [Scarica](https://golang.org/dl/) e installa Go. Puoi verificare se l'hai già installato utilizzando il comando `go version`.
{{< alert >}}
Assicurati di usare la **versione Go 1.12** o successive poiché Hugo lo richiede affinché i moduli funzionino correttamente.
{{< /alert >}}
2. Dalla directory del tuo progetto Hugo (che hai creato sopra), inizializza i moduli per il tuo sito web:
```shell
# Se gestisci il tuo progetto su GitHub
Hugo mod init github.com/<nomeutente>/<nome-repo>
# Se gestisci il tuo progetto localmente
Hugo mod init my-project
```
3. Aggiungi il tema alla tua configurazione creando un nuovo file `config/_default/module.toml` e aggiungendo quanto segue:
```toml
[[imports]]
disable = false
path = "github.com/nunocoracao/blowfish/v2"
```
4. Avvia il tuo server utilizzando `hugo server` e il tema verrà scaricato automaticamente.
5. Continua con [impostare i file di configurazione del tema](#set-up-theme-configuration-files).
#### Installazione manuale
1. Scarica l'ultima versione del codice sorgente del tema.
{{< button href="https://github.com/nunocoracao/blowfish/releases/latest" target="_blank" >}}Scarica da Github{{< /button >}}
"blowfish" e "themes/"
2. Estrai l'archivio, rinomina la cartella in `blowfish` spostala nella directory `themes/` all'interno della cartella principale del tuo progetto Hugo.
3. Continua con [impostare i file di configurazione del tema](#set-up-theme-configuration-files).
#### Imposta i file di configurazione del tema
Nella cartella principale del tuo sito web, elimina il file `hugo.toml` generato da Hugo. Copia i file di configurazione `*.toml` dal tema nella tua cartella `config/_default/`. Ciò ti garantirà di avere tutte le impostazioni corrette del tema e ti consentirà di personalizzare facilmente il tema in base alle tue esigenze.
{{< alert >}}
**Note:** Non dovresti sovrascrivere il file `module.toml` se ne esiste già uno nel tuo progetto!
{{< /alert >}}
A seconda di come hai installato il tema, troverai i file di configurazione del tema in posti diversi:
- **Hugo modules:** Nella directory della cache di Hugo o [scarica una copia](https://github.com/nunocoracao/blowfish/releases/latest/download/config-default.zip tree/main/config/_default) da GitHub
- **Git submodule o installazione manuale:** `themes/blowfish/config/_default`
Una volta che hai copiato i file, la tua cartella delle configurazioni dovrebbe essere cosi:
```shell
config/_default/
├─ hugo.toml
├─ languages.en.toml
├─ markup.toml
├─ menus.en.toml
├─ module.toml # se hai usato Hugo modules come installazione
└─ params.toml
```
{{< alert >}}
**Importante:** Se non hai utilizzato Hugo Modules per installare Blowfish, devi aggiungere la riga `theme = "blowfish"` all'inizio del tuo file `hugo.toml`.
{{< /alert >}}
### Passo successivo
L'installazione di base di Blowfish è ora completa. Continua alla sezione [Per iniziare]({{< ref "getting-started" >}}) per ulteriori informazioni sulla configurazione del tema.
---
## Installazione degli aggiornamenti
Di tanto in tanto verranno pubblicate [nuove versioni](https://github.com/nunocoracao/blowfish/releases) che applicano correzioni e aggiungono nuove funzionalità al tema. Per sfruttare questi cambiamenti, dovrai aggiornare i file del tema sul tuo sito web.
Il modo in cui procedere dipenderà dal metodo di installazione scelto al momento dell'installazione originale del tema. Le istruzioni per ciascun metodo sono disponibili di seguito.
- [Git submodule](#update-using-git)
- [Hugo module](#update-using-hugo)
- [Copia manuale del file](#aggiornamento-manuale)
### Aggiornamento utilizzando Git
I sottomoduli Git possono essere aggiornati utilizzando il comando `git`. Esegui semplicemente il comando seguente e l'ultima versione del tema verrà scaricata nel tuo repository locale:
```shell
git submodule update --remote --merge
```
Una volta aggiornato il sottomodulo, riavvia il tuo sito e verifica che tutto funzioni come previsto.
### Aggiornamento utilizzando Hugo
Hugo rende l'aggiornamento dei moduli estremamente semplice. Basta passare alla directory del progetto ed eseguire il seguente comando:
```shell
hugo mod get -u
```
Hugo aggiornerà automaticamente tutti i moduli richiesti per il tuo progetto. Lo fa controllando i file `module.toml` e `go.mod`. In caso di problemi con l'aggiornamento, assicurati che questi file siano ancora configurati correttamente.
Quindi riavvia semplicemente il tuo sito e verifica che tutto funzioni come previsto.
### Aggiornamenti manuali
L'aggiornamento manuale di Blowfish richiede il download dell'ultima copia del tema e la sostituzione della vecchia versione nel progetto.
{{< alert >}}
Tieni presente che ogni personalizzazione locale apportata ai file del tema andranno perse durante questo processo.
{{< /alert >}}
1. Scarica l'ultima versione del codice sorgente del tema.
{{< button href="https://github.com/nunocoracao/blowfish/releases/latest" target="_blank" >}}Scarica da Github{{< /button >}}
2. Estrai l'archivio, rinomina la cartella in "blowfish" e spostala nella directory "themes/" all'interno della cartella principale del tuo progetto Hugo. Dovrai sovrascrivere la directory esistente per sostituire tutti i file del tema.
3. Riavvia il tuo sito e verifica che tutto funzioni come previsto.

View file

@ -0,0 +1,211 @@
---
title: "インストール"
weight: 2
draft: false
description: "Blowfish テーマのインストール方法"
slug: "installation"
tags: ["installation", "docs"]
series: ["Documentation"]
series_order: 2
---
Hugo の[クイックスタートガイド](https://gohugo.io/getting-started/quick-start/)に従うだけで、簡単に使い始めることができます。
詳細なインストール手順は以下に記載されています。[テーマのアップデート方法](#テーマのアップデート方法)についても説明しています。
## インストール
以下の手順では、全くの新規状態から Hugo と Blowfish を使用してウェブサイトを立ち上げる方法を説明します。このガイドで紹介するツールのほとんどは、お使いのプラットフォームに対応したパッケージマネージャーからインストール可能です。
### Hugo のインストール
Hugo を初めて使用する場合は、[公式サイトの手順](https://gohugo.io/getting-started/installing)に従って、ローカルマシンにインストールしてください。すでにインストールされているかどうかは、コマンド `hugo version` を実行して確認できます。
{{< alert >}}
テーマは最新の Hugo の機能を活用しているため、**Hugo バージョン 0.87.0 以降**を使用していることを確認してください。
{{< /alert >}}
お使いのプラットフォームに合わせた詳細なインストール手順は、[Hugo の公式ドキュメント](https://gohugo.io/getting-started/installing)に記載されています。
### Blowfish Tools (推奨)
Blowfish を簡単に使い始められるよう、新しく CLI ツールをリリースしました。このツールは、新しい Hugo プロジェクトの作成、テーマのインストール、そしてテーマ設定ファイルのセットアップを自動的に行います。まだベータ版ですので、[問題を発見した場合は報告にご協力ください](https://github.com/nunocoracao/blowfish-tools)。
npm (または他のパッケージマネージャー) を使用して、CLI ツールをグローバルにインストールします。
```shell
npx blowfish-tools
```
または
```shell
npm i -g blowfish-tools
```
次に、コマンド `blowfish-tools` を実行すると、対話形式でプロジェクトの作成と設定をガイドしてくれます。
```shell
blowfish-tools
```
また、コマンド `blowfish-tools new` を実行すれば、新しい Hugo プロジェクトの作成とテーマのインストールを一度に行うこともできます。詳細は、CLI のヘルプを参照してください。
```shell
blowfish-tools new mynewsite
```
CLI ツールを使って Blowfish を迅速に使い始める方法を、以下の動画でご覧いただけます。
<iframe width="100%" height="350" src="https://www.youtube.com/embed/SgXhGb-7QbU?si=ce44baicuQ6zMeXz" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
### CLI を使用しないインストール
#### 新しいサイトの作成
コマンド `hugo new site mywebsite` を実行して、`mywebsite` という名前のディレクトリに新しい Hugo サイトを作成します。
プロジェクトディレクトリには任意の名前を付けることができますが、以降の手順では `mywebsite` という名前を想定して説明します。別の名前を使用する場合は、適宜読み替えてください。
#### Blowfish テーマのダウンロード
Hugo ウェブサイトに Blowfish テーマをインストールするには、いくつかの方法があります。インストールとメンテナンスが簡単な方法から難しい方法まで、以下の通りです。
- [Git サブモジュールを使用する](#git-を使用してインストールする) (推奨)
- [Hugo モジュールを使用する](#hugo-を使用してインストールする)
- [手動でファイルをコピーする](#手動でインストールする)
どの方法を選べば良いか分からない場合は、Git サブモジュール方式を選択することをお勧めします。
#### Git を使用してインストールする
この方法は、テーマを最新の状態に保つための最も迅速で簡単な方法です。**Hugo** と **Go** に加えて、ローカルマシンに **Git** がインストールされていることも確認してください。
(上記で作成した) Hugo ウェブサイトのディレクトリに移動し、新しい `git` リポジトリを初期化して、Blowfish をサブモジュールとして追加します。
```bash
cd mywebsite
git init
git submodule add -b main https://github.com/nunocoracao/blowfish.git themes/blowfish
```
次に、[テーマ設定ファイルを作成する](#テーマ設定ファイルを作成する)に進みます。
#### Hugo を使用してインストールする
この方法では、Hugo を使用してテーマを管理します。Hugo は **Go** を使用してモジュールを初期化および管理するため、続行する前に `go` がインストールされていることを確認する必要があります。
1. Go を[ダウンロード](https://golang.org/dl/)してインストールします。コマンド `go version` を使用して、すでにインストールされているかどうかを確認できます。
{{< alert >}}
Hugo ではモジュールが正しく動作するために **Go バージョン 1.12 以降** が必要です。必ず対応バージョンを使用してください。
{{< /alert >}}
2. (上記で作成した) Hugo プロジェクトディレクトリから、ウェブサイトのモジュールを初期化します。
```shell
# プロジェクトを GitHub で管理している場合
hugo mod init github.com/<ユーザー名>/<リポジトリ名>
# プロジェクトをローカルで管理している場合
hugo mod init my-project
```
3. 新しいファイル `config/_default/module.toml` を作成し、以下を記述して、テーマを設定に追加します。
```toml
[[imports]]
disable = false
path = "github.com/nunocoracao/blowfish/v2"
```
4. `hugo server` を実行してサーバーを起動すると、テーマが自動的にダウンロードされます。
5. [テーマ設定ファイルを作成する](#テーマ設定ファイルを作成する)に進みます。
#### 手動でインストールする
1. テーマソースコードの最新リリースをダウンロードします。
{{< button href="https://github.com/nunocoracao/blowfish/releases/latest" target="_blank" >}}GitHub からダウンロード{{< /button >}}
2. アーカイブを解凍し、フォルダ名を `blowfish` に変更して、Hugo プロジェクトのルートフォルダ内の `themes/` ディレクトリに移動します。
3. [テーマ設定ファイルを作成する](#テーマ設定ファイルを作成する)に進みます。
#### テーマ設定ファイルを作成する
ウェブサイトのルートフォルダで、Hugo によって自動生成された `hugo.toml` ファイルを削除します。`*.toml` 設定ファイルをテーマから `config/_default/` フォルダにコピーします。これにより、必要なテーマ設定がすべて適用され、テーマを簡単にカスタマイズできるようになります。
{{< alert >}}
**注意:** プロジェクトに `module.toml` ファイルがすでに存在する場合は、上書きしないでください。
{{< /alert >}}
テーマのインストール方法によって、テーマ設定ファイルの場所は異なります。
- **Hugo モジュール:** Hugo キャッシュディレクトリ、または GitHub から [設定ファイルのコピーをダウンロード](https://github.com/nunocoracao/blowfish/releases/latest/download/config-default.zip) します
- **Git サブモジュールまたは手動インストール:** `themes/blowfish/config/_default`
ファイルをコピーしたら、設定フォルダは次のようになります。
```shell
config/_default/
├─ hugo.toml
├─ languages.en.toml
├─ markup.toml
├─ menus.en.toml
├─ module.toml # Hugo モジュールを使用してインストールした場合
└─ params.toml
```
{{< alert >}}
**重要:** Hugo モジュールを使用せずに Blowfish をインストールした場合は、`hugo.toml` ファイルの先頭に `theme = "blowfish"` という行を追加する必要があります。
{{< /alert >}}
### 次のステップ
これで Blowfish の基本的なインストールは完了です。[始める]({{< ref "getting-started" >}})セクションに進んで、テーマの設定についてさらに詳しく学びましょう。
---
## テーマのアップデート方法
不具合の修正や新機能の追加を含む[新しいリリース](https://github.com/nunocoracao/blowfish/releases)が随時公開されます。これらの変更を反映するには、ウェブサイトのテーマファイルをアップデートする必要があります。
アップデート方法は、最初にテーマをインストールした方法によって異なります。各方法の手順は以下に記載されています。
- [Git サブモジュール](#git-を使用してアップデートする)
- [Hugo モジュール](#hugo-を使用してアップデートする)
- [手動でファイルをコピー](#手動でアップデートする)
### Git を使用してアップデートする
Git サブモジュールは、`git` コマンドを使用してアップデートできます。次のコマンドを実行するだけで、テーマの最新バージョンがローカルリポジトリにダウンロードされます。
```shell
git submodule update --remote --merge
```
サブモジュールがアップデートされたら、サイトを再びビルドし、すべてが期待通りに動作することを確認してください。
### Hugo を使用してアップデートする
Hugo を使用すると、モジュールのアップデートが非常に簡単になります。プロジェクトディレクトリに移動して、次のコマンドを実行するだけです。
```shell
hugo mod get -u
```
Hugo は、プロジェクトに必要なモジュールを自動的にアップデートします。これは、`module.toml` ファイルと `go.mod` ファイルを調べることで行われます。アップデートに問題がある場合は、これらのファイルが正しく設定されていることを確認してください。
その後、サイトを再びビルドし、すべてが期待通りに動作することを確認してください。
### 手動でアップデートする
Blowfish を手動でアップデートするには、テーマの最新コピーをダウンロードして、プロジェクトの古いバージョンを置き換える必要があります。
{{< alert >}}
この処理を行うと、テーマファイルに加えたローカルの変更はすべて失われるので注意してください。
{{< /alert >}}
1. テーマソースコードの最新リリースをダウンロードします。
{{< button href="https://github.com/nunocoracao/blowfish/releases/latest" target="_blank" >}}GitHub からダウンロード{{< /button >}}
2. アーカイブを解凍し、フォルダ名を `blowfish` に変更して、Hugo プロジェクトのルートフォルダ内の `themes/` ディレクトリに移動します。すべてのテーマファイルを置き換えるには、既存のディレクトリを上書きする必要があります。
3. サイトを再びビルドし、すべてが期待通りに動作することを確認してください。

View file

@ -0,0 +1,211 @@
---
title: "Installation"
weight: 2
draft: false
description: "How to install the Blowfish theme."
slug: "installation"
tags: ["installation", "docs"]
series: ["Documentation"]
series_order: 2
---
Simply follow the standard Hugo [Quick Start](https://gohugo.io/getting-started/quick-start/) procedure to get up and running quickly.
Detailed installation instructions can be found below. Instructions for [updating the theme](#installing-updates) are also available.
## Installation
These instructions will get you up and running using Hugo and Blowfish from a completely blank state. Most of the dependencies mentioned in this guide can be installed using the package manager of choice for your platform.
### Install Hugo
If you haven't used Hugo before, you will need to [install it onto your local machine](https://gohugo.io/getting-started/installing). You can check if it's already installed by running the command `hugo version`.
{{< alert >}}
Make sure you are using **Hugo version 0.87.0** or later as the theme takes advantage of some of the latest Hugo features.
{{< /alert >}}
You can find detailed installation instructions for your platform in the [Hugo docs](https://gohugo.io/getting-started/installing).
### Blowfish Tools (recommended)
We just launched a new CLI tool to help you get started with Blowfish. It will create a new Hugo project, install the theme and set up the theme configuration files for you. It's still in beta so please [report any issues you find](https://github.com/nunocoracao/blowfish-tools).
Install the CLI tool globally using npm (or other package manager):
```shell
npx blowfish-tools
```
or
```shell
npm i -g blowfish-tools
```
Then run the command `blowfish-tools` to start an interactive run which will guide you through creation and configuration use-cases.
```shell
blowfish-tools
```
You can also run the command `blowfish-tools new` to create a new Hugo project and install the theme in one go. Check the CLI help for more information.
```shell
blowfish-tools new mynewsite
```
Here's a quick video of how fast it is to get started with Blowfish using the CLI tool:
<iframe width="100%" height="350" src="https://www.youtube.com/embed/SgXhGb-7QbU?si=ce44baicuQ6zMeXz" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
### Install without CLI
#### Create a new site
Run the command `hugo new site mywebsite` to create a new Hugo site in a directory named `mywebsite`.
Note that you can name the project directory whatever you choose, but the instructions below will assume it's named `mywebsite`. If you use a different name, be sure to substitute it accordingly.
#### Download the Blowfish theme
There several different ways to install the Blowfish theme into your Hugo website. From easiest to most difficult to install and maintain, they are:
- [Git submodule](#install-using-git) (recommended)
- [Hugo module](#install-using-hugo)
- [Manual file copy](#install-manually)
If you're unsure, choose the Git submodule method.
#### Install using git
This method is the quickest and easiest for keeping the theme up-to-date. Besides **Hugo** and **Go**, you'll also need to ensure you have **Git** installed on your local machine.
Change into the directory for your Hugo website (that you created above), initialise a new `git` repository and add Blowfish as a submodule.
```bash
cd mywebsite
git init
git submodule add -b main https://github.com/nunocoracao/blowfish.git themes/blowfish
```
Then continue to [set up the theme configuration files](#set-up-theme-configuration-files).
#### Install using Hugo
For this method you'll use Hugo to manage your themes. Hugo uses **Go** to initialise and manage modules so you need to ensure you have `go` installed before proceeding.
1. [Download](https://golang.org/dl/) and install Go. You can check if it's already installed by using the command `go version`.
{{< alert >}}
Make sure you are using **Go version 1.12** or later as Hugo requires this for modules to work correctly.
{{< /alert >}}
2. From your Hugo project directory (that you created above), initialise modules for your website:
```shell
# If you're managing your project on GitHub
hugo mod init github.com/<username>/<repo-name>
# If you're managing your project locally
hugo mod init my-project
```
3. Add the theme to your configuration by creating a new file `config/_default/module.toml` and adding the following:
```toml
[[imports]]
disable = false
path = "github.com/nunocoracao/blowfish/v2"
```
4. Start your server using `hugo server` and the theme will be downloaded automatically.
5. Continue to [set up the theme configuration files](#set-up-theme-configuration-files).
#### Install manually
1. Download the latest release of the theme source code.
{{< button href="https://github.com/nunocoracao/blowfish/releases/latest" target="_blank" >}}Download from Github{{< /button >}}
2. Extract the archive, rename the folder to `blowfish` and move it to the `themes/` directory inside your Hugo project's root folder.
3. Continue to [set up the theme configuration files](#set-up-theme-configuration-files).
#### Set up theme configuration files
In the root folder of your website, delete the `hugo.toml` file that was generated by Hugo. Copy the `*.toml` config files from the theme into your `config/_default/` folder. This will ensure you have all the correct theme settings and will enable you to easily customise the theme to your needs.
{{< alert >}}
**Note:** You should not overwrite the `module.toml` file if one already exists in your project!
{{< /alert >}}
Depending on how you installed the theme you will find the theme config files in different places:
- **Hugo Modules:** In the Hugo cache directory, or [download a copy](https://github.com/nunocoracao/blowfish/releases/latest/download/config-default.zip) from GitHub
- **Git submodule or Manual install:** `themes/blowfish/config/_default`
Once you've copied the files, your config folder should look like this:
```shell
config/_default/
├─ hugo.toml
├─ languages.en.toml
├─ markup.toml
├─ menus.en.toml
├─ module.toml # if you installed using Hugo Modules
└─ params.toml
```
{{< alert >}}
**Important:** If you didn't use Hugo Modules to install Blowfish, you must add the line `theme = "blowfish"` to the top of your `hugo.toml` file.
{{< /alert >}}
### Next steps
The basic Blowfish installation is now complete. Continue to the [Getting Started]({{< ref "getting-started" >}}) section to learn more about configuring the theme.
---
## Installing updates
From time to time there will be [new releases](https://github.com/nunocoracao/blowfish/releases) posted that apply fixes and add new functionality to the theme. In order to take advantage of these changes, you will need to update the theme files on your website.
How you go about this will depend on the installation method you chose when the theme was originally installed. Instructions for each method can be found below.
- [Git submodule](#update-using-git)
- [Hugo module](#update-using-hugo)
- [Manual file copy](#update-manually)
### Update using git
Git submodules can be updated using the `git` command. Simply execute the following command and the latest version of the theme will be downloaded into your local repository:
```shell
git submodule update --remote --merge
```
Once the submodule has been updated, rebuild your site and check everything works as expected.
### Update using Hugo
Hugo makes updating modules super easy. Simply change into your project directory and execute the following command:
```shell
hugo mod get -u
```
Hugo will automatically update any modules that are required for your project. It does this by inspecting your `module.toml` and `go.mod` files. If you have any issues with the update, check to ensure these files are still configured correctly.
Then simply rebuild your site and check everything works as expected.
### Update manually
Updating Blowfish manually requires you to download the latest copy of the theme and replace the old version in your project.
{{< alert >}}
Note that any local customisations you have made to the theme files will be lost during this process.
{{< /alert >}}
1. Download the latest release of the theme source code.
{{< button href="https://github.com/nunocoracao/blowfish/releases/latest" target="_blank" >}}Download from Github{{< /button >}}
2. Extract the archive, rename the folder to `blowfish` and move it to the `themes/` directory inside your Hugo project's root folder. You will need to overwrite the existing directory to replace all the theme files.
3. Rebuild your site and check everything works as expected.

View file

@ -0,0 +1,210 @@
---
title: "安装和配置"
weight: 2
draft: false
description: "如何安装 Blowfish 主题。"
slug: "installation"
tags: ["安装", "文档"]
series: ["部署教程"]
series_order: 2
---
如果想快速上手,可以按照标准的 Hugo [快速启动](https://gohugo.io/getting-started/quick-start/) 文档。
更详细的安装如下,[更新主题](#installing-updates)的教程也可以看此文档。
## 前言
本文将一步一步指导你学会使用 Hugo 和 Blowfish。本文中提到的大多数依赖项都可以在任意你想使用的平台中使用和安装。
### 安装 Hugo
如果你之前没有使用过 Hugo你首先需要了解[在本地机器安装 Hugo](https://gohugo.io/getting-started/installing)。你可以通过运行命令 `hugo version` 来检查是否安装完成。
{{< alert >}}
确保你使用 **Hugo 0.87.0** 或更高的版本Blowfish 主题中使用了最新的 Hugo 特性。
{{< /alert >}}
你可以在 [Hugo 文档](https://gohugo.io/getting-started/installing) 中找到不同平台更加详细的安装指南。
### 使用 Blowfish-Tools 工具安装 (推荐)
我们刚刚推出了一个 CLI 工具,帮助你首次使用 Blowfish。该工具将会为你创建一个新的 Hugo 项目、安装 Blowfish 主题并设置配置文件。但目前该工具仍处于测试阶段,如果遇到任何问题,请随时[提交 issues](https://github.com/nunocoracao/blowfish-tools)。
使用 `npm` 包或其他的包管理器,在全局环境中安装 CLI
```shell
npx blowfish-tools
```
或者
```shell
npm i -g blowfish-tools
```
然后运行 `blowfish-tools` 命令,它将引导你完成创建和配置用例。
```shell
blowfish-tools
```
你也可以运行 `blowfish-tools new` 命令来创建一个新的 Hugo 项目,并且一次性地安装主题。查看 CLI 帮助以获取更多信息。
```shell
blowfish-tools new mynewsite
```
下面是一个简短的视频,介绍了如何使用 CLI 工具快速构建 Blowfish
<iframe width="100%" height="350" src="https://www.youtube.com/embed/SgXhGb-7QbU?si=ce44baicuQ6zMeXz" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
### 无需 CLI 的安装
#### 创建新站点
运行 `hugo new site mywebsite` 命令,可以在`mywebsite`目录下创建一个新的 Hugo 站点。
下面会以 `mywebsite` 为例展开说明。当然你完全可以使用任何你喜欢的目录名称,但在阅读下面的内容时,请记得将`mywebsite`替换为此。
#### 下载 Blowfish 主题
有多种方法可以将 Blowfish 主题安装在 Hugo 站点中。下面我们由易到难逐一介绍:
- [使用 Git 子模块安装](#install-using-git) (推荐)
- [使用 Hugo 模块安装](#install-using-hugo)
- [手动文件复制](#install-manually)
如果你不确定用哪一个,请直接选择 Git 子模块的方式。
#### 使用 Git 子模块安装
这个方法可以保证主题简单且快速地安装和更新。除了 **Hugo****Go**,你还需要确保本地机器安装了 **Git**
进入你刚才创建的网站目录 `mywebsite`,初始化一个新的 `git` 仓库并将 Blowfish 添加为子模块。
```bash
cd mywebsite
git init
git submodule add -b main https://github.com/nunocoracao/blowfish.git themes/blowfish
```
然后 [设置主题的配置文件](#set-up-theme-configuration-files)。
#### 使用 Hugo 模板安装
这种方法是使用 Hugo 来管理你的主题Hugo 使用 **Go** 来初始化和管理模块,所以首先需要确保已经安装了`go`
1. [下载](https://golang.org/dl/) 并安装 Go。你可以使用 `go version` 命令来检查是否安装。
{{< alert >}}
确保你使用 **Go 1.12** 或 更高的版本Hugo 需要这个版本才能加载模块。
{{< /alert >}}
2. 在你刚才创建的网站目录 `mywebsite`下,为你的网站初始化模块:
```shell
# 如果你在 Github 上管理你的项目
hugo mod init github.com/<username>/<repo-name>
# 如果你在本地管理你的项目
hugo mod init my-project
```
3. 创建一个新文件 `config/_default/module.toml`,并添加下面的内容来配置主题:
```toml
[[imports]]
disable = false
path = "github.com/nunocoracao/blowfish/v2"
```
4. 使用`hugo server` 命令后,主题将会自动下载。
5. 然后 [设置主题的配置文件](#set-up-theme-configuration-files).
#### 手动复制文件
1. 下载最新的主题源码。
{{< button href="https://github.com/nunocoracao/blowfish/releases/latest" target="_blank" >}}从 Github 下载{{< /button >}}
2. 解压缩, 并将文件夹重命名为 `blowfish`,将其移动到你的 Hugo 项目根目录下的 `themes/` 目录中。
3. 然后 [设置主题的配置文件](#set-up-theme-configuration-files).
#### 设置主题的配置文件
在你的网站根目录中,删除 Hugo 自动生成的 `hugo.toml` 文件。从主题中复制 `*.toml` 文件,粘贴到 `config/_default/` 目录中。这将确保你的主题设置准确无误,在此基础上你能够轻松地自定义主题。
{{< alert >}}
**注意:** 如果项目中已经存在 `module.toml` 文件,请不要覆盖它!
{{< /alert >}}
根据你安装主题的不同方式,你可以在以下地方找到主题的配置文件:
- **Hugo 模块:** 在 Hugo 的缓存目录, 或者从 Github [下载副本](https://github.com/nunocoracao/blowfish/releases/latest/download/config-default.zip) from GitHub
- **Git 子模块 或 本地复制文件:** `themes/blowfish/config/_default`
一旦你复制了这些文件,你的 config 目录看起来应该是这样:
```shell
config/_default/
├─ hugo.toml
├─ languages.en.toml
├─ markup.toml
├─ menus.en.toml
├─ module.toml # 通过 Hugo 模块安装
└─ params.toml
```
{{< alert >}}
**重要:** 如果你没有使用 Hugo 模块安装 Blowfish那么你必须在 `hugo.toml` 文件中添加 `theme = "blowfish"`
{{< /alert >}}
### 下一步
基本的 Blowfish 安装已经完成。继续阅读 [入门指南]({{< ref "getting-started" >}}),了解更多关于主题配置的内容。
---
## 更新主题
经常会有 [新版本](https://github.com/nunocoracao/blowfish/releases) 的主题发布,这些版本主要是修复 bug 和添加新功能。如果想要用到新版本的功能,那么你需要更新网站的主题。
如何更新主题取决于最初安装主题时选择的安装方式,具体如下:
- [使用 Git 子模块安装](#update-using-git)
- [使用 Hugo 模块安装](#update-using-hugo)
- [手动文件复制](#update-manually)
### 利用 git 更新
Git 子模块的方式,可以使用 `git` 命令更新。只需执行以下命令,最新版的主题将会下载到你的本地仓库中:
```shell
git submodule update --remote --merge
```
一旦子模块更新完毕,请检查你的确实是否一切正常。
### 使用 Hugo 更新
Hugo 更新也十分容易。只需要进入网站根目录,并执行以下命令即可:
```shell
hugo mod get -u
```
Hugo 将自动更新项目中所需的任何模块。它通过检查 `module.toml``go.mod` 来实现的。如果你在更新过程中遇到任何问题,请确保这两个文件是正常配置的。
重建完毕后,请检查网站是否一切正常。
### 手动更新
手动更新 Blowfish 需要下载主题的最新副本,并替换项目中的旧版本。
{{< alert >}}
注意:在手动替换过程中,你对主题文件中所做的任何修改都会丢失。
{{< /alert >}}
1. 下载主题最新版本的源码。
{{< button href="https://github.com/nunocoracao/blowfish/releases/latest" target="_blank" >}}从 Github 下载{{< /button >}}
2. 解压缩, 将文件夹重命名为 `blowfish`,并移动到根目录 `themes/` 目录下。你需要覆盖旧版以替换所有的主题文件。
3. 重建站点,并检查网站是否一切正常。

View file

@ -0,0 +1,10 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="margin:auto;background:rgba(NaN, NaN, NaN, 0);display:block;z-index:1;position:relative" width="1084" height="322" preserveAspectRatio="xMidYMid" viewBox="0 0 1084 322">
<defs>
<pattern id="pid-0.932876709489723" x="0" y="0" width="307.20000000000005" height="307.20000000000005" patternUnits="userSpaceOnUse">
<g transform="scale(1.2000000000000002)"><defs><g id="pat-0.13086180692764704"><polyline fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#93dbe9" stroke-width="10" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points=" -3,-2 16.5,15.5 31.5,0.5 63.5,32.5 48.5,47.5 31.5,32.5 -0.5,64.5 16.5,79.5 31.5,64.5 47.5,79.5 95.5,32.5 80.5,15.5 95.5,0.5 127.5,32.5 48.5,111.5 31.5,96.5 -0.5,128.5 16.5,143.5 31.5,127.5 63.5,160.5 80.5,143.5 63.5,128.5 159.5,32.5 144.5,15.5 159.5,0.5 175.5,16.5 192,0 208,16 224,0 256,32 240,48 224,32 207.501,48.501 223.5,64.5 207.5,80.5 176.5,47.5 144.5,80.5 159.5,96.5 175.5,80.5 191.5,96.5 159.5,128.5 127.5,96.5 95.5,127.5 111.5,143.5 127.5,127.5 175.5,176.5 159.5,192.5 127.5,160.5 111.5,176.5 95.5,160.5 63.5,192.5 31.5,160.5 16.5,175.5 31.999,191.483 0,224 16,240 32,225 64,256 80,240 64,224 79.667,208.333 95.5,192.5 111.5,207.5 95.5,224.5 111.5,239.5 127.5,256.5 143.5,240.5 127.5,224.5 143.5,208.5 175.5,240.5 191.5,224.5 175.5,208.5 207.5,176.5 224,160 208,144 191.998,160.998 175.5,144.5 207.5,112.5 240,80 256,96 223.5,128.5 256,160 239.5,176.5 256,192 240,208 224,192 207.5,208.5 223.5,224.5 207.5,240.5 223.5,256.5 240,240 259,259" stroke-dasharray="169.36095947265625 20.93225341796875 169.36095947265625 20.93225341796875 169.36095947265625 20.93225341796875 169.36095947265625 20.93225341796875 169.36095947265625 20.93225341796875 169.36095947265625 20.93225341796875 169.36095947265625 20.93225341796875 169.36095947265625 20.93225341796875 169.36095947265625 20.93225341796875 169.36095947265625 20.93225341796875 169.36095947265625 20.93225341796875 169.36095947265625 20.93225341796875 169.36095947265625 20.93225341796875 169.36095947265625 20.93225341796875 169.36095947265625 20.93225341796875">
<animate attributeName="stroke-dashoffset" keyTimes="0;1" values="0;190.293212890625" repeatCount="indefinite" dur="7.142857142857142s"></animate>
</polyline></g></defs><use xlink:href="#pat-0.13086180692764704" x="0" y="0"></use><use xlink:href="#pat-0.13086180692764704" x="-256" y="0"></use><use xlink:href="#pat-0.13086180692764704" x="256" y="0"></use><use xlink:href="#pat-0.13086180692764704" x="0" y="-256"></use><use xlink:href="#pat-0.13086180692764704" x="0" y="256"></use></g>
</pattern>
</defs>
<rect x="0" y="0" width="1084" height="322" fill="url(#pid-0.932876709489723)"></rect>
</svg>

After

Width:  |  Height:  |  Size: 2.7 KiB

View file

@ -0,0 +1,574 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
style="margin:auto;background:rgba(NaN, NaN, NaN, 0);display:block;z-index:1;position:relative"
width="1084" height="322" preserveAspectRatio="xMidYMid" viewBox="0 0 1084 322">
<defs>
<pattern id="pid-0.7735807359934106" x="0" y="0" width="345.6" height="345.6"
patternUnits="userSpaceOnUse">
<g transform="scale(1.35)">
<g>
<line x1="237.6288884328494" x2="201.39714008747956" y1="119.05338354492488"
y2="155.28513189029474" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="237.6288884328494" x2="201.39714008747956" y1="-392.9466164550751"
y2="-356.71486810970526" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="493.6288884328494" x2="457.39714008747956" y1="-392.9466164550751"
y2="-356.71486810970526" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="749.6288884328494" x2="713.3971400874796" y1="-392.9466164550751"
y2="-356.71486810970526" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="237.6288884328494" x2="201.39714008747956" y1="-136.94661645507512"
y2="-100.71486810970526" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="493.6288884328494" x2="457.39714008747956" y1="-136.94661645507512"
y2="-100.71486810970526" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="749.6288884328494" x2="713.3971400874796" y1="-136.94661645507512"
y2="-100.71486810970526" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="237.6288884328494" x2="201.39714008747956" y1="119.05338354492488"
y2="155.28513189029474" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="493.6288884328494" x2="457.39714008747956" y1="119.05338354492488"
y2="155.28513189029474" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="749.6288884328494" x2="713.3971400874796" y1="119.05338354492488"
y2="155.28513189029474" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="244.43797352167968" x2="179.25167385613412" y1="196.21419032492787"
y2="261.40048999047343" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="244.43797352167968" x2="179.25167385613412" y1="-315.78580967507213"
y2="-250.59951000952657" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="500.4379735216797" x2="435.2516738561341" y1="-315.78580967507213"
y2="-250.59951000952657" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="756.4379735216796" x2="691.2516738561342" y1="-315.78580967507213"
y2="-250.59951000952657" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="244.43797352167968" x2="179.25167385613412" y1="-59.78580967507213"
y2="5.400489990473432" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="500.4379735216797" x2="435.2516738561341" y1="-59.78580967507213"
y2="5.400489990473432" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="756.4379735216796" x2="691.2516738561342" y1="-59.78580967507213"
y2="5.400489990473432" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="244.43797352167968" x2="179.25167385613412" y1="196.21419032492787"
y2="261.40048999047343" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="500.4379735216797" x2="435.2516738561341" y1="196.21419032492787"
y2="261.40048999047343" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="756.4379735216796" x2="691.2516738561342" y1="196.21419032492787"
y2="261.40048999047343" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="219.6724359102308" x2="209.2181431749452" y1="92.85808081141191"
y2="103.31237354669749" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="219.6724359102308" x2="209.2181431749452" y1="-419.1419191885881"
y2="-408.6876264533025" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="475.6724359102308" x2="465.2181431749452" y1="-419.1419191885881"
y2="-408.6876264533025" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="731.6724359102308" x2="721.2181431749452" y1="-419.1419191885881"
y2="-408.6876264533025" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="219.6724359102308" x2="209.2181431749452" y1="-163.14191918858808"
y2="-152.68762645330253" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="475.6724359102308" x2="465.2181431749452" y1="-163.14191918858808"
y2="-152.68762645330253" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="731.6724359102308" x2="721.2181431749452" y1="-163.14191918858808"
y2="-152.68762645330253" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="219.6724359102308" x2="209.2181431749452" y1="92.85808081141191"
y2="103.31237354669749" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="475.6724359102308" x2="465.2181431749452" y1="92.85808081141191"
y2="103.31237354669749" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="731.6724359102308" x2="721.2181431749452" y1="92.85808081141191"
y2="103.31237354669749" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="112.00565118011832" x2="71.15817744773324" y1="56.63419812919665"
y2="97.48167186158173" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="112.00565118011832" x2="71.15817744773324" y1="-455.36580187080335"
y2="-414.51832813841827" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="368.0056511801183" x2="327.15817744773324" y1="-455.36580187080335"
y2="-414.51832813841827" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="624.0056511801183" x2="583.1581774477332" y1="-455.36580187080335"
y2="-414.51832813841827" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="112.00565118011832" x2="71.15817744773324" y1="-199.36580187080335"
y2="-158.51832813841827" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="368.0056511801183" x2="327.15817744773324" y1="-199.36580187080335"
y2="-158.51832813841827" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="624.0056511801183" x2="583.1581774477332" y1="-199.36580187080335"
y2="-158.51832813841827" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="112.00565118011832" x2="71.15817744773324" y1="56.63419812919665"
y2="97.48167186158173" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="368.0056511801183" x2="327.15817744773324" y1="56.63419812919665"
y2="97.48167186158173" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="624.0056511801183" x2="583.1581774477332" y1="56.63419812919665"
y2="97.48167186158173" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="60.932966336476014" x2="49.388821076756514" y1="125.65681060957188"
y2="137.20095586929136" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="60.932966336476014" x2="49.388821076756514" y1="-386.3431893904281"
y2="-374.79904413070864" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="316.932966336476" x2="305.3888210767565" y1="-386.3431893904281"
y2="-374.79904413070864" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="572.932966336476" x2="561.3888210767565" y1="-386.3431893904281"
y2="-374.79904413070864" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="60.932966336476014" x2="49.388821076756514" y1="-130.3431893904281"
y2="-118.79904413070864" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="316.932966336476" x2="305.3888210767565" y1="-130.3431893904281"
y2="-118.79904413070864" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="572.932966336476" x2="561.3888210767565" y1="-130.3431893904281"
y2="-118.79904413070864" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="60.932966336476014" x2="49.388821076756514" y1="125.65681060957188"
y2="137.20095586929136" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="316.932966336476" x2="305.3888210767565" y1="125.65681060957188"
y2="137.20095586929136" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="572.932966336476" x2="561.3888210767565" y1="125.65681060957188"
y2="137.20095586929136" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="103.78310212459807" x2="35.08486945593138" y1="-2.328164446496814"
y2="66.37006822216988" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="103.78310212459807" x2="35.08486945593138" y1="-514.3281644464968"
y2="-445.6299317778301" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="359.7831021245981" x2="291.08486945593137" y1="-514.3281644464968"
y2="-445.6299317778301" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="615.783102124598" x2="547.0848694559314" y1="-514.3281644464968"
y2="-445.6299317778301" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="103.78310212459807" x2="35.08486945593138" y1="-258.3281644464968"
y2="-189.6299317778301" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="359.7831021245981" x2="291.08486945593137" y1="-258.3281644464968"
y2="-189.6299317778301" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="615.783102124598" x2="547.0848694559314" y1="-258.3281644464968"
y2="-189.6299317778301" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="103.78310212459807" x2="35.08486945593138" y1="-2.328164446496814"
y2="66.37006822216988" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="359.7831021245981" x2="291.08486945593137" y1="-2.328164446496814"
y2="66.37006822216988" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="615.783102124598" x2="547.0848694559314" y1="-2.328164446496814"
y2="66.37006822216988" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="103.78310212459807" x2="35.08486945593138" y1="253.67183555350317"
y2="322.3700682221699" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="211.69894364075495" x2="194.13528259328754" y1="166.21741462144607"
y2="183.78107566891347" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="211.69894364075495" x2="194.13528259328754" y1="-345.7825853785539"
y2="-328.21892433108655" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="467.6989436407549" x2="450.13528259328757" y1="-345.7825853785539"
y2="-328.21892433108655" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="723.6989436407549" x2="706.1352825932876" y1="-345.7825853785539"
y2="-328.21892433108655" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="211.69894364075495" x2="194.13528259328754" y1="-89.78258537855393"
y2="-72.21892433108653" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="467.6989436407549" x2="450.13528259328757" y1="-89.78258537855393"
y2="-72.21892433108653" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="723.6989436407549" x2="706.1352825932876" y1="-89.78258537855393"
y2="-72.21892433108653" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="211.69894364075495" x2="194.13528259328754" y1="166.21741462144607"
y2="183.78107566891347" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="467.6989436407549" x2="450.13528259328757" y1="166.21741462144607"
y2="183.78107566891347" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="723.6989436407549" x2="706.1352825932876" y1="166.21741462144607"
y2="183.78107566891347" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="44.012515207413756" x2="6.2920050630466875" y1="153.79537767995515"
y2="191.5158878243222" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="44.012515207413756" x2="6.2920050630466875" y1="-358.20462232004485"
y2="-320.4841121756778" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="300.01251520741374" x2="262.2920050630467" y1="-358.20462232004485"
y2="-320.4841121756778" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="556.0125152074138" x2="518.2920050630466" y1="-358.20462232004485"
y2="-320.4841121756778" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="44.012515207413756" x2="6.2920050630466875" y1="-102.20462232004485"
y2="-64.48411217567781" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="300.01251520741374" x2="262.2920050630467" y1="-102.20462232004485"
y2="-64.48411217567781" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="556.0125152074138" x2="518.2920050630466" y1="-102.20462232004485"
y2="-64.48411217567781" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="44.012515207413756" x2="6.2920050630466875" y1="153.79537767995515"
y2="191.5158878243222" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="300.01251520741374" x2="262.2920050630467" y1="153.79537767995515"
y2="191.5158878243222" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="556.0125152074138" x2="518.2920050630466" y1="153.79537767995515"
y2="191.5158878243222" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="105.49237048043514" x2="31.549625942354083" y1="123.41684480916788"
y2="197.35958934724894" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="105.49237048043514" x2="31.549625942354083" y1="-388.58315519083214"
y2="-314.64041065275103" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="361.49237048043517" x2="287.54962594235406" y1="-388.58315519083214"
y2="-314.64041065275103" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="617.4923704804352" x2="543.549625942354" y1="-388.58315519083214"
y2="-314.64041065275103" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="105.49237048043514" x2="31.549625942354083" y1="-132.58315519083212"
y2="-58.64041065275106" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="361.49237048043517" x2="287.54962594235406" y1="-132.58315519083212"
y2="-58.64041065275106" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="617.4923704804352" x2="543.549625942354" y1="-132.58315519083212"
y2="-58.64041065275106" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="105.49237048043514" x2="31.549625942354083" y1="123.41684480916788"
y2="197.35958934724894" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="361.49237048043517" x2="287.54962594235406" y1="123.41684480916788"
y2="197.35958934724894" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="617.4923704804352" x2="543.549625942354" y1="123.41684480916788"
y2="197.35958934724894" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<animateTransform attributeName="transform" type="translate" values="0 0;-256 256"
keyTimes="0;1" repeatCount="indefinite" dur="10s"></animateTransform>
</g>
<g>
<line x1="95.73622575770466" x2="50.085335235319484" y1="20.45659654328417"
y2="66.10748706566935" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="95.73622575770466" x2="50.085335235319484" y1="-491.54340345671585"
y2="-445.8925129343306" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="351.7362257577047" x2="306.08533523531946" y1="-491.54340345671585"
y2="-445.8925129343306" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="607.7362257577047" x2="562.0853352353195" y1="-491.54340345671585"
y2="-445.8925129343306" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="95.73622575770466" x2="50.085335235319484" y1="-235.54340345671582"
y2="-189.89251293433065" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="351.7362257577047" x2="306.08533523531946" y1="-235.54340345671582"
y2="-189.89251293433065" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="607.7362257577047" x2="562.0853352353195" y1="-235.54340345671582"
y2="-189.89251293433065" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="95.73622575770466" x2="50.085335235319484" y1="20.45659654328417"
y2="66.10748706566935" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="351.7362257577047" x2="306.08533523531946" y1="20.45659654328417"
y2="66.10748706566935" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="607.7362257577047" x2="562.0853352353195" y1="20.45659654328417"
y2="66.10748706566935" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="263.34308373797757" x2="226.59561736370148" y1="112.42933995479353"
y2="149.17680632906962" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="263.34308373797757" x2="226.59561736370148" y1="-399.57066004520647"
y2="-362.8231936709304" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="519.3430837379776" x2="482.5956173637015" y1="-399.57066004520647"
y2="-362.8231936709304" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="775.3430837379776" x2="738.5956173637014" y1="-399.57066004520647"
y2="-362.8231936709304" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="263.34308373797757" x2="226.59561736370148" y1="-143.57066004520647"
y2="-106.82319367093038" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="519.3430837379776" x2="482.5956173637015" y1="-143.57066004520647"
y2="-106.82319367093038" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="775.3430837379776" x2="738.5956173637014" y1="-143.57066004520647"
y2="-106.82319367093038" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="263.34308373797757" x2="226.59561736370148" y1="112.42933995479353"
y2="149.17680632906962" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="519.3430837379776" x2="482.5956173637015" y1="112.42933995479353"
y2="149.17680632906962" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="775.3430837379776" x2="738.5956173637014" y1="112.42933995479353"
y2="149.17680632906962" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="7.343083737977565" x2="-29.40438263629852" y1="112.42933995479353"
y2="149.17680632906962" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="29.5343611349199" x2="-26.261040392985034" y1="205.16777076655512"
y2="260.96317229446004" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="29.5343611349199" x2="-26.261040392985034" y1="-306.8322292334449"
y2="-251.03682770553996" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="285.5343611349199" x2="229.73895960701498" y1="-306.8322292334449"
y2="-251.03682770553996" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="541.5343611349199" x2="485.738959607015" y1="-306.8322292334449"
y2="-251.03682770553996" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="29.5343611349199" x2="-26.261040392985034" y1="-50.83222923344488"
y2="4.963172294460037" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="285.5343611349199" x2="229.73895960701498" y1="-50.83222923344488"
y2="4.963172294460037" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="541.5343611349199" x2="485.738959607015" y1="-50.83222923344488"
y2="4.963172294460037" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="29.5343611349199" x2="-26.261040392985034" y1="205.16777076655512"
y2="260.96317229446004" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="285.5343611349199" x2="229.73895960701498" y1="205.16777076655512"
y2="260.96317229446004" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="541.5343611349199" x2="485.738959607015" y1="205.16777076655512"
y2="260.96317229446004" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="235.025028503587" x2="173.48946106938683" y1="23.306929884424335"
y2="84.84249731862451" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="235.025028503587" x2="173.48946106938683" y1="-488.69307011557567"
y2="-427.1575026813755" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="491.025028503587" x2="429.48946106938683" y1="-488.69307011557567"
y2="-427.1575026813755" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="747.025028503587" x2="685.4894610693868" y1="-488.69307011557567"
y2="-427.1575026813755" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="235.025028503587" x2="173.48946106938683" y1="-232.69307011557567"
y2="-171.1575026813755" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="491.025028503587" x2="429.48946106938683" y1="-232.69307011557567"
y2="-171.1575026813755" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="747.025028503587" x2="685.4894610693868" y1="-232.69307011557567"
y2="-171.1575026813755" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="235.025028503587" x2="173.48946106938683" y1="23.306929884424335"
y2="84.84249731862451" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="491.025028503587" x2="429.48946106938683" y1="23.306929884424335"
y2="84.84249731862451" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="747.025028503587" x2="685.4894610693868" y1="23.306929884424335"
y2="84.84249731862451" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="225.00990918130768" x2="200.62370409686488" y1="210.1052181599721"
y2="234.4914232444149" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="225.00990918130768" x2="200.62370409686488" y1="-301.8947818400279"
y2="-277.50857675558507" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="481.00990918130765" x2="456.6237040968649" y1="-301.8947818400279"
y2="-277.50857675558507" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="737.0099091813076" x2="712.6237040968649" y1="-301.8947818400279"
y2="-277.50857675558507" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="225.00990918130768" x2="200.62370409686488" y1="-45.89478184002789"
y2="-21.508576755585096" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="481.00990918130765" x2="456.6237040968649" y1="-45.89478184002789"
y2="-21.508576755585096" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="737.0099091813076" x2="712.6237040968649" y1="-45.89478184002789"
y2="-21.508576755585096" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="225.00990918130768" x2="200.62370409686488" y1="210.1052181599721"
y2="234.4914232444149" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="481.00990918130765" x2="456.6237040968649" y1="210.1052181599721"
y2="234.4914232444149" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="737.0099091813076" x2="712.6237040968649" y1="210.1052181599721"
y2="234.4914232444149" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="171.55017713954658" x2="102.05334080042758" y1="78.55895711807653"
y2="148.05579345719553" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="171.55017713954658" x2="102.05334080042758" y1="-433.44104288192347"
y2="-363.94420654280447" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="427.5501771395466" x2="358.0533408004276" y1="-433.44104288192347"
y2="-363.94420654280447" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="683.5501771395466" x2="614.0533408004276" y1="-433.44104288192347"
y2="-363.94420654280447" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="171.55017713954658" x2="102.05334080042758" y1="-177.44104288192347"
y2="-107.94420654280447" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="427.5501771395466" x2="358.0533408004276" y1="-177.44104288192347"
y2="-107.94420654280447" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="683.5501771395466" x2="614.0533408004276" y1="-177.44104288192347"
y2="-107.94420654280447" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="171.55017713954658" x2="102.05334080042758" y1="78.55895711807653"
y2="148.05579345719553" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="427.5501771395466" x2="358.0533408004276" y1="78.55895711807653"
y2="148.05579345719553" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="683.5501771395466" x2="614.0533408004276" y1="78.55895711807653"
y2="148.05579345719553" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="258.4358284744095" x2="228.09906783279462" y1="10.646186924515469"
y2="40.98294756613034" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="258.4358284744095" x2="228.09906783279462" y1="-501.35381307548454"
y2="-471.01705243386965" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="514.4358284744095" x2="484.0990678327946" y1="-501.35381307548454"
y2="-471.01705243386965" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="770.4358284744095" x2="740.0990678327946" y1="-501.35381307548454"
y2="-471.01705243386965" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="258.4358284744095" x2="228.09906783279462" y1="-245.35381307548454"
y2="-215.01705243386965" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="514.4358284744095" x2="484.0990678327946" y1="-245.35381307548454"
y2="-215.01705243386965" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="770.4358284744095" x2="740.0990678327946" y1="-245.35381307548454"
y2="-215.01705243386965" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="258.4358284744095" x2="228.09906783279462" y1="10.646186924515469"
y2="40.98294756613034" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="514.4358284744095" x2="484.0990678327946" y1="10.646186924515469"
y2="40.98294756613034" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="770.4358284744095" x2="740.0990678327946" y1="10.646186924515469"
y2="40.98294756613034" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="2.4358284744095045" x2="-27.900932167205383" y1="10.646186924515469"
y2="40.98294756613034" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="35.41624886616098" x2="-5.966808810922494" y1="10.151780697595989"
y2="51.53483837467946" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="35.41624886616098" x2="-5.966808810922494" y1="-501.848219302404"
y2="-460.46516162532055" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="291.41624886616097" x2="250.0331911890775" y1="-501.848219302404"
y2="-460.46516162532055" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="547.416248866161" x2="506.0331911890775" y1="-501.848219302404"
y2="-460.46516162532055" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="35.41624886616098" x2="-5.966808810922494" y1="-245.848219302404"
y2="-204.46516162532055" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="291.41624886616097" x2="250.0331911890775" y1="-245.848219302404"
y2="-204.46516162532055" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="547.416248866161" x2="506.0331911890775" y1="-245.848219302404"
y2="-204.46516162532055" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="35.41624886616098" x2="-5.966808810922494" y1="10.151780697595989"
y2="51.53483837467946" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="291.41624886616097" x2="250.0331911890775" y1="10.151780697595989"
y2="51.53483837467946" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="547.416248866161" x2="506.0331911890775" y1="10.151780697595989"
y2="51.53483837467946" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="90.76285286976488" x2="72.92514980496989" y1="79.79001478147771"
y2="97.6277178462727" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="90.76285286976488" x2="72.92514980496989" y1="-432.2099852185223"
y2="-414.37228215372727" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="346.76285286976486" x2="328.9251498049699" y1="-432.2099852185223"
y2="-414.37228215372727" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="602.7628528697649" x2="584.9251498049699" y1="-432.2099852185223"
y2="-414.37228215372727" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="90.76285286976488" x2="72.92514980496989" y1="-176.2099852185223"
y2="-158.3722821537273" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="346.76285286976486" x2="328.9251498049699" y1="-176.2099852185223"
y2="-158.3722821537273" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="602.7628528697649" x2="584.9251498049699" y1="-176.2099852185223"
y2="-158.3722821537273" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="90.76285286976488" x2="72.92514980496989" y1="79.79001478147771"
y2="97.6277178462727" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="346.76285286976486" x2="328.9251498049699" y1="79.79001478147771"
y2="97.6277178462727" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="602.7628528697649" x2="584.9251498049699" y1="79.79001478147771"
y2="97.6277178462727" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<animateTransform attributeName="transform" type="translate" values="0 0;-256 256"
keyTimes="0;1" repeatCount="indefinite" dur="5s"></animateTransform>
</g>
<g>
<line x1="93.6896305353637" x2="75.71575147590588" y1="83.83758835275793"
y2="101.81146741221576" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="93.6896305353637" x2="75.71575147590588" y1="-428.16241164724204"
y2="-410.18853258778427" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="349.6896305353637" x2="331.7157514759059" y1="-428.16241164724204"
y2="-410.18853258778427" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="605.6896305353637" x2="587.7157514759059" y1="-428.16241164724204"
y2="-410.18853258778427" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="93.6896305353637" x2="75.71575147590588" y1="-172.16241164724207"
y2="-154.18853258778424" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="349.6896305353637" x2="331.7157514759059" y1="-172.16241164724207"
y2="-154.18853258778424" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="605.6896305353637" x2="587.7157514759059" y1="-172.16241164724207"
y2="-154.18853258778424" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="93.6896305353637" x2="75.71575147590588" y1="83.83758835275793"
y2="101.81146741221576" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="349.6896305353637" x2="331.7157514759059" y1="83.83758835275793"
y2="101.81146741221576" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="605.6896305353637" x2="587.7157514759059" y1="83.83758835275793"
y2="101.81146741221576" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="207.24941141296466" x2="167.48134532138562" y1="234.55973050121918"
y2="274.3277965927982" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="207.24941141296466" x2="167.48134532138562" y1="-277.4402694987808"
y2="-237.67220340720178" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="463.24941141296466" x2="423.4813453213856" y1="-277.4402694987808"
y2="-237.67220340720178" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="719.2494114129647" x2="679.4813453213856" y1="-277.4402694987808"
y2="-237.67220340720178" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="207.24941141296466" x2="167.48134532138562" y1="-21.440269498780822"
y2="18.327796592798222" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="463.24941141296466" x2="423.4813453213856" y1="-21.440269498780822"
y2="18.327796592798222" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="719.2494114129647" x2="679.4813453213856" y1="-21.440269498780822"
y2="18.327796592798222" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="207.24941141296466" x2="167.48134532138562" y1="234.55973050121918"
y2="274.3277965927982" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="463.24941141296466" x2="423.4813453213856" y1="234.55973050121918"
y2="274.3277965927982" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="719.2494114129647" x2="679.4813453213856" y1="234.55973050121918"
y2="274.3277965927982" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="69.19671201083756" x2="20.15599089926107" y1="61.52941038272999"
y2="110.57013149430648" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="69.19671201083756" x2="20.15599089926107" y1="-450.47058961727"
y2="-401.42986850569355" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="325.1967120108376" x2="276.15599089926104" y1="-450.47058961727"
y2="-401.42986850569355" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="581.1967120108376" x2="532.155990899261" y1="-450.47058961727"
y2="-401.42986850569355" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="69.19671201083756" x2="20.15599089926107" y1="-194.47058961727"
y2="-145.42986850569352" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="325.1967120108376" x2="276.15599089926104" y1="-194.47058961727"
y2="-145.42986850569352" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="581.1967120108376" x2="532.155990899261" y1="-194.47058961727"
y2="-145.42986850569352" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="69.19671201083756" x2="20.15599089926107" y1="61.52941038272999"
y2="110.57013149430648" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="325.1967120108376" x2="276.15599089926104" y1="61.52941038272999"
y2="110.57013149430648" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="581.1967120108376" x2="532.155990899261" y1="61.52941038272999"
y2="110.57013149430648" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="153.36870174443493" x2="103.52218176454608" y1="129.93915864820679"
y2="179.78567862809564" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="153.36870174443493" x2="103.52218176454608" y1="-382.0608413517932"
y2="-332.21432137190436" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="409.36870174443493" x2="359.5221817645461" y1="-382.0608413517932"
y2="-332.21432137190436" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="665.3687017444349" x2="615.5221817645461" y1="-382.0608413517932"
y2="-332.21432137190436" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="153.36870174443493" x2="103.52218176454608" y1="-126.06084135179321"
y2="-76.21432137190436" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="409.36870174443493" x2="359.5221817645461" y1="-126.06084135179321"
y2="-76.21432137190436" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="665.3687017444349" x2="615.5221817645461" y1="-126.06084135179321"
y2="-76.21432137190436" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="153.36870174443493" x2="103.52218176454608" y1="129.93915864820679"
y2="179.78567862809564" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="409.36870174443493" x2="359.5221817645461" y1="129.93915864820679"
y2="179.78567862809564" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="665.3687017444349" x2="615.5221817645461" y1="129.93915864820679"
y2="179.78567862809564" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="49.20494471467643" x2="2.7142059537850685" y1="141.75997600855746"
y2="188.25071476944882" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="49.20494471467643" x2="2.7142059537850685" y1="-370.2400239914425"
y2="-323.7492852305512" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="305.20494471467646" x2="258.71420595378504" y1="-370.2400239914425"
y2="-323.7492852305512" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="561.2049447146765" x2="514.714205953785" y1="-370.2400239914425"
y2="-323.7492852305512" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="49.20494471467643" x2="2.7142059537850685" y1="-114.24002399144254"
y2="-67.74928523055118" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="305.20494471467646" x2="258.71420595378504" y1="-114.24002399144254"
y2="-67.74928523055118" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="561.2049447146765" x2="514.714205953785" y1="-114.24002399144254"
y2="-67.74928523055118" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="49.20494471467643" x2="2.7142059537850685" y1="141.75997600855746"
y2="188.25071476944882" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="305.20494471467646" x2="258.71420595378504" y1="141.75997600855746"
y2="188.25071476944882" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="561.2049447146765" x2="514.714205953785" y1="141.75997600855746"
y2="188.25071476944882" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="84.6808460539986" x2="32.68305955000314" y1="-7.711036017440037"
y2="44.28675048655542" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="84.6808460539986" x2="32.68305955000314" y1="-519.71103601744"
y2="-467.71324951344457" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="340.6808460539986" x2="288.6830595500031" y1="-519.71103601744"
y2="-467.71324951344457" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="596.6808460539986" x2="544.6830595500031" y1="-519.71103601744"
y2="-467.71324951344457" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="84.6808460539986" x2="32.68305955000314" y1="-263.71103601744005"
y2="-211.71324951344457" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="340.6808460539986" x2="288.6830595500031" y1="-263.71103601744005"
y2="-211.71324951344457" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="596.6808460539986" x2="544.6830595500031" y1="-263.71103601744005"
y2="-211.71324951344457" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="84.6808460539986" x2="32.68305955000314" y1="-7.711036017440037"
y2="44.28675048655542" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="340.6808460539986" x2="288.6830595500031" y1="-7.711036017440037"
y2="44.28675048655542" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="596.6808460539986" x2="544.6830595500031" y1="-7.711036017440037"
y2="44.28675048655542" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="84.6808460539986" x2="32.68305955000314" y1="248.28896398255995"
y2="300.28675048655543" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="225.38342310559023" x2="185.66602314192056" y1="109.68961591653738"
y2="149.40701588020704" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="225.38342310559023" x2="185.66602314192056" y1="-402.3103840834626"
y2="-362.59298411979296" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="481.3834231055902" x2="441.66602314192056" y1="-402.3103840834626"
y2="-362.59298411979296" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="737.3834231055903" x2="697.6660231419205" y1="-402.3103840834626"
y2="-362.59298411979296" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="225.38342310559023" x2="185.66602314192056" y1="-146.31038408346262"
y2="-106.59298411979296" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="481.3834231055902" x2="441.66602314192056" y1="-146.31038408346262"
y2="-106.59298411979296" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="737.3834231055903" x2="697.6660231419205" y1="-146.31038408346262"
y2="-106.59298411979296" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="225.38342310559023" x2="185.66602314192056" y1="109.68961591653738"
y2="149.40701588020704" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="481.3834231055902" x2="441.66602314192056" y1="109.68961591653738"
y2="149.40701588020704" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="737.3834231055903" x2="697.6660231419205" y1="109.68961591653738"
y2="149.40701588020704" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="172.83662370669697" x2="103.52581079778793" y1="164.45975635392284"
y2="233.77056926283188" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="172.83662370669697" x2="103.52581079778793" y1="-347.54024364607716"
y2="-278.2294307371681" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="428.83662370669697" x2="359.5258107977879" y1="-347.54024364607716"
y2="-278.2294307371681" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="684.836623706697" x2="615.5258107977879" y1="-347.54024364607716"
y2="-278.2294307371681" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="172.83662370669697" x2="103.52581079778793" y1="-91.54024364607716"
y2="-22.229430737168116" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="428.83662370669697" x2="359.5258107977879" y1="-91.54024364607716"
y2="-22.229430737168116" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="684.836623706697" x2="615.5258107977879" y1="-91.54024364607716"
y2="-22.229430737168116" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="172.83662370669697" x2="103.52581079778793" y1="164.45975635392284"
y2="233.77056926283188" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="428.83662370669697" x2="359.5258107977879" y1="164.45975635392284"
y2="233.77056926283188" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="684.836623706697" x2="615.5258107977879" y1="164.45975635392284"
y2="233.77056926283188" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="254.85435949520382" x2="240.10841684705935" y1="-1.209429949430282"
y2="13.536512698714214" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="254.85435949520382" x2="240.10841684705935" y1="-513.2094299494303"
y2="-498.4634873012858" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="510.8543594952038" x2="496.10841684705935" y1="-513.2094299494303"
y2="-498.4634873012858" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="766.8543594952039" x2="752.1084168470593" y1="-513.2094299494303"
y2="-498.4634873012858" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="254.85435949520382" x2="240.10841684705935" y1="-257.2094299494303"
y2="-242.4634873012858" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="510.8543594952038" x2="496.10841684705935" y1="-257.2094299494303"
y2="-242.4634873012858" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="766.8543594952039" x2="752.1084168470593" y1="-257.2094299494303"
y2="-242.4634873012858" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="254.85435949520382" x2="240.10841684705935" y1="-1.209429949430282"
y2="13.536512698714214" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="510.8543594952038" x2="496.10841684705935" y1="-1.209429949430282"
y2="13.536512698714214" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="766.8543594952039" x2="752.1084168470593" y1="-1.209429949430282"
y2="13.536512698714214" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="254.85435949520382" x2="240.10841684705935" y1="254.79057005056973"
y2="269.5365126987142" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<animateTransform attributeName="transform" type="translate" values="0 0;-256 256"
keyTimes="0;1" repeatCount="indefinite" dur="10.3333333333333335s"></animateTransform>
</g>
</g>
</pattern>
</defs>
<rect x="0" y="0" width="1084" height="322" fill="url(#pid-0.7735807359934106)"></rect>
</svg>

View file

@ -0,0 +1,516 @@
<svg height="100%" xmlns="http://www.w3.org/2000/svg" version="1.1"
xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.dev/svgjs"
viewBox="0 0 600 600">
<rect width="600" height="600" fill="transparent"></rect>
<mask id="mask" mask-type="alpha" maskUnits="userSpaceOnUse">
<rect transform="translate(0, 0)" width="600" height="600" fill="white"></rect>
</mask>
<svg>
<rect transform="translate(0, 0)" fill="#ade8f4" width="60" height="60"></rect>
<rect transform="translate(0, 0)" fill="#90e0ef" x="15" y="15" width="30" height="30"></rect>
</svg>
<svg>
<rect transform="translate(0, 60)" fill="#90e0ef" width="60" height="60"></rect>
<path transform="translate(0, 60) translate(30,30) rotate(180) translate(-30,-30)"
fill="#00b4d8" d="M60 0H0v60L60 0z"></path>
</svg>
<svg>
<rect transform="translate(0, 120)" fill="#00b4d8" width="60" height="60"></rect>
<rect transform="translate(0, 120)" fill="#48cae4" x="15" y="15" width="30" height="30"></rect>
</svg>
<svg>
<rect transform="translate(0, 180)" fill="#ade8f4" width="60" height="60"></rect>
<path transform="translate(0, 180) translate(30,30) rotate(0) translate(-30,-30)"
fill="#0096c7" d="M60 0H0v60L60 0z"></path>
<rect transform="translate(0, 180)" fill="#03045e" x="15" y="15" width="30" height="30"></rect>
</svg>
<svg>
<rect transform="translate(0, 240)" fill="#0077b6" width="60" height="60"></rect>
<path transform="translate(0, 240) translate(30,30) rotate(270) translate(-30,-30)"
fill="#90e0ef" d="M60 0H0v60L60 0z"></path>
<rect transform="translate(0, 240)" fill="#ade8f4" x="15" y="15" width="30" height="30"></rect>
</svg>
<svg>
<rect transform="translate(0, 300)" fill="#ade8f4" width="60" height="60"></rect>
<path transform="translate(0, 300) translate(30,30) rotate(270) translate(-30,-30)"
fill="#0096c7" d="M60 0H0v60L60 0z"></path>
</svg>
<svg>
<rect transform="translate(0, 360)" fill="#0096c7" width="60" height="60"></rect>
<path transform="translate(0, 360) translate(30,30) rotate(270) translate(-30,-30)"
fill="#ade8f4" d="M60 0H0v60L60 0z"></path>
<rect transform="translate(0, 360)" fill="#023e8a" x="15" y="15" width="30" height="30"></rect>
</svg>
<svg>
<rect transform="translate(0, 420)" fill="#0077b6" width="60" height="60"></rect>
<path transform="translate(0, 420) translate(30,30) rotate(90) translate(-30,-30)"
fill="#00b4d8" d="M60 0H0v60L60 0z"></path>
<rect transform="translate(0, 420)" fill="#48cae4" x="15" y="15" width="30" height="30"></rect>
</svg>
<svg>
<rect transform="translate(0, 480)" fill="#ade8f4" width="60" height="60"></rect>
<rect transform="translate(0, 480)" fill="#00b4d8" x="15" y="15" width="30" height="30"></rect>
</svg>
<svg>
<rect transform="translate(0, 540)" fill="#00b4d8" width="60" height="60"></rect>
<path transform="translate(0, 540) translate(30,30) rotate(90) translate(-30,-30)"
fill="#ade8f4" d="M60 0H0v60L60 0z"></path>
<rect transform="translate(0, 540)" fill="#48cae4" x="15" y="15" width="30" height="30"></rect>
</svg>
<svg>
<rect transform="translate(60, 0)" fill="#0096c7" width="60" height="60"></rect>
<path transform="translate(60, 0) translate(30,30) rotate(0) translate(-30,-30)"
fill="#023e8a" d="M60 0H0v60L60 0z"></path>
</svg>
<svg>
<rect transform="translate(60, 60)" fill="#48cae4" width="60" height="60"></rect>
<path transform="translate(60, 60) translate(30,30) rotate(0) translate(-30,-30)"
fill="#ade8f4" d="M60 0H0v60L60 0z"></path>
<rect transform="translate(60, 60)" fill="#caf0f8" x="15" y="15" width="30" height="30"></rect>
</svg>
<svg>
<rect transform="translate(60, 120)" fill="#ade8f4" width="60" height="60"></rect>
<path transform="translate(60, 120) translate(30,30) rotate(90) translate(-30,-30)"
fill="#90e0ef" d="M60 0H0v60L60 0z"></path>
</svg>
<svg>
<rect transform="translate(60, 180)" fill="#023e8a" width="60" height="60"></rect>
<path transform="translate(60, 180) translate(30,30) rotate(90) translate(-30,-30)"
fill="#00b4d8" d="M60 0H0v60L60 0z"></path>
</svg>
<svg>
<rect transform="translate(60, 240)" fill="#023e8a" width="60" height="60"></rect>
<path transform="translate(60, 240) translate(30,30) rotate(90) translate(-30,-30)"
fill="#0077b6" d="M60 0H0v60L60 0z"></path>
</svg>
<svg>
<rect transform="translate(60, 300)" fill="#0077b6" width="60" height="60"></rect>
<rect transform="translate(60, 300)" fill="#90e0ef" x="15" y="15" width="30" height="30"></rect>
</svg>
<svg>
<rect transform="translate(60, 360)" fill="#48cae4" width="60" height="60"></rect>
<path transform="translate(60, 360) translate(30,30) rotate(0) translate(-30,-30)"
fill="#ade8f4" d="M60 0H0v60L60 0z"></path>
<rect transform="translate(60, 360)" fill="#90e0ef" x="15" y="15" width="30" height="30"></rect>
</svg>
<svg>
<rect transform="translate(60, 420)" fill="#caf0f8" width="60" height="60"></rect>
<path transform="translate(60, 420) translate(30,30) rotate(90) translate(-30,-30)"
fill="#03045e" d="M60 0H0v60L60 0z"></path>
</svg>
<svg>
<rect transform="translate(60, 480)" fill="#48cae4" width="60" height="60"></rect>
<path transform="translate(60, 480) translate(30,30) rotate(90) translate(-30,-30)"
fill="#023e8a" d="M60 0H0v60L60 0z"></path>
<rect transform="translate(60, 480)" fill="#0077b6" x="15" y="15" width="30" height="30"></rect>
</svg>
<svg>
<rect transform="translate(60, 540)" fill="#48cae4" width="60" height="60"></rect>
<path transform="translate(60, 540) translate(30,30) rotate(0) translate(-30,-30)"
fill="#0077b6" d="M60 0H0v60L60 0z"></path>
<rect transform="translate(60, 540)" fill="#ade8f4" x="15" y="15" width="30" height="30"></rect>
</svg>
<svg>
<rect transform="translate(120, 0)" fill="#0077b6" width="60" height="60"></rect>
<path transform="translate(120, 0) translate(30,30) rotate(0) translate(-30,-30)"
fill="#00b4d8" d="M60 0H0v60L60 0z"></path>
</svg>
<svg>
<rect transform="translate(120, 60)" fill="#90e0ef" width="60" height="60"></rect>
<rect transform="translate(120, 60)" fill="#023e8a" x="15" y="15" width="30" height="30"></rect>
</svg>
<svg>
<rect transform="translate(120, 120)" fill="#0077b6" width="60" height="60"></rect>
<path transform="translate(120, 120) translate(30,30) rotate(180) translate(-30,-30)"
fill="#00b4d8" d="M60 0H0v60L60 0z"></path>
</svg>
<svg>
<rect transform="translate(120, 180)" fill="#90e0ef" width="60" height="60"></rect>
<path transform="translate(120, 180) translate(30,30) rotate(180) translate(-30,-30)"
fill="#03045e" d="M60 0H0v60L60 0z"></path>
</svg>
<svg>
<rect transform="translate(120, 240)" fill="#0096c7" width="60" height="60"></rect>
<path transform="translate(120, 240) translate(30,30) rotate(90) translate(-30,-30)"
fill="#ade8f4" d="M60 0H0v60L60 0z"></path>
</svg>
<svg>
<rect transform="translate(120, 300)" fill="#00b4d8" width="60" height="60"></rect>
<rect transform="translate(120, 300)" fill="#023e8a" x="15" y="15" width="30" height="30"></rect>
</svg>
<svg>
<rect transform="translate(120, 360)" fill="#00b4d8" width="60" height="60"></rect>
<path transform="translate(120, 360) translate(30,30) rotate(0) translate(-30,-30)"
fill="#03045e" d="M60 0H0v60L60 0z"></path>
</svg>
<svg>
<rect transform="translate(120, 420)" fill="#0096c7" width="60" height="60"></rect>
<path transform="translate(120, 420) translate(30,30) rotate(180) translate(-30,-30)"
fill="#00b4d8" d="M60 0H0v60L60 0z"></path>
</svg>
<svg>
<rect transform="translate(120, 480)" fill="#023e8a" width="60" height="60"></rect>
<path transform="translate(120, 480) translate(30,30) rotate(90) translate(-30,-30)"
fill="#48cae4" d="M60 0H0v60L60 0z"></path>
</svg>
<svg>
<rect transform="translate(120, 540)" fill="#03045e" width="60" height="60"></rect>
<path transform="translate(120, 540) translate(30,30) rotate(0) translate(-30,-30)"
fill="#90e0ef" d="M60 0H0v60L60 0z"></path>
</svg>
<svg>
<rect transform="translate(180, 0)" fill="#90e0ef" width="60" height="60"></rect>
<path transform="translate(180, 0) translate(30,30) rotate(270) translate(-30,-30)"
fill="#023e8a" d="M60 0H0v60L60 0z"></path>
<rect transform="translate(180, 0)" fill="#48cae4" x="15" y="15" width="30" height="30"></rect>
</svg>
<svg>
<rect transform="translate(180, 60)" fill="#03045e" width="60" height="60"></rect>
<rect transform="translate(180, 60)" fill="#00b4d8" x="15" y="15" width="30" height="30"></rect>
</svg>
<svg>
<rect transform="translate(180, 120)" fill="#0077b6" width="60" height="60"></rect>
<rect transform="translate(180, 120)" fill="#90e0ef" x="15" y="15" width="30" height="30"></rect>
</svg>
<svg>
<rect transform="translate(180, 180)" fill="#0096c7" width="60" height="60"></rect>
<path transform="translate(180, 180) translate(30,30) rotate(180) translate(-30,-30)"
fill="#0077b6" d="M60 0H0v60L60 0z"></path>
<rect transform="translate(180, 180)" fill="#90e0ef" x="15" y="15" width="30" height="30"></rect>
</svg>
<svg>
<rect transform="translate(180, 240)" fill="#ade8f4" width="60" height="60"></rect>
<path transform="translate(180, 240) translate(30,30) rotate(270) translate(-30,-30)"
fill="#0077b6" d="M60 0H0v60L60 0z"></path>
</svg>
<svg>
<rect transform="translate(180, 300)" fill="#023e8a" width="60" height="60"></rect>
<rect transform="translate(180, 300)" fill="#00b4d8" x="15" y="15" width="30" height="30"></rect>
</svg>
<svg>
<rect transform="translate(180, 360)" fill="#00b4d8" width="60" height="60"></rect>
<path transform="translate(180, 360) translate(30,30) rotate(180) translate(-30,-30)"
fill="#0077b6" d="M60 0H0v60L60 0z"></path>
<rect transform="translate(180, 360)" fill="#0096c7" x="15" y="15" width="30" height="30"></rect>
</svg>
<svg>
<rect transform="translate(180, 420)" fill="#023e8a" width="60" height="60"></rect>
<path transform="translate(180, 420) translate(30,30) rotate(270) translate(-30,-30)"
fill="#48cae4" d="M60 0H0v60L60 0z"></path>
</svg>
<svg>
<rect transform="translate(180, 480)" fill="#48cae4" width="60" height="60"></rect>
<path transform="translate(180, 480) translate(30,30) rotate(270) translate(-30,-30)"
fill="#ade8f4" d="M60 0H0v60L60 0z"></path>
<rect transform="translate(180, 480)" fill="#00b4d8" x="15" y="15" width="30" height="30"></rect>
</svg>
<svg>
<rect transform="translate(180, 540)" fill="#0077b6" width="60" height="60"></rect>
<path transform="translate(180, 540) translate(30,30) rotate(90) translate(-30,-30)"
fill="#00b4d8" d="M60 0H0v60L60 0z"></path>
</svg>
<svg>
<rect transform="translate(240, 0)" fill="#ade8f4" width="60" height="60"></rect>
<path transform="translate(240, 0) translate(30,30) rotate(270) translate(-30,-30)"
fill="#caf0f8" d="M60 0H0v60L60 0z"></path>
</svg>
<svg>
<rect transform="translate(240, 60)" fill="#48cae4" width="60" height="60"></rect>
<path transform="translate(240, 60) translate(30,30) rotate(180) translate(-30,-30)"
fill="#03045e" d="M60 0H0v60L60 0z"></path>
</svg>
<svg>
<rect transform="translate(240, 120)" fill="#caf0f8" width="60" height="60"></rect>
<path transform="translate(240, 120) translate(30,30) rotate(270) translate(-30,-30)"
fill="#90e0ef" d="M60 0H0v60L60 0z"></path>
<rect transform="translate(240, 120)" fill="#48cae4" x="15" y="15" width="30" height="30"></rect>
</svg>
<svg>
<rect transform="translate(240, 180)" fill="#48cae4" width="60" height="60"></rect>
<path transform="translate(240, 180) translate(30,30) rotate(0) translate(-30,-30)"
fill="#03045e" d="M60 0H0v60L60 0z"></path>
<rect transform="translate(240, 180)" fill="#00b4d8" x="15" y="15" width="30" height="30"></rect>
</svg>
<svg>
<rect transform="translate(240, 240)" fill="#48cae4" width="60" height="60"></rect>
<rect transform="translate(240, 240)" fill="#00b4d8" x="15" y="15" width="30" height="30"></rect>
</svg>
<svg>
<rect transform="translate(240, 300)" fill="#023e8a" width="60" height="60"></rect>
<path transform="translate(240, 300) translate(30,30) rotate(90) translate(-30,-30)"
fill="#90e0ef" d="M60 0H0v60L60 0z"></path>
<rect transform="translate(240, 300)" fill="#0077b6" x="15" y="15" width="30" height="30"></rect>
</svg>
<svg>
<rect transform="translate(240, 360)" fill="#48cae4" width="60" height="60"></rect>
<path transform="translate(240, 360) translate(30,30) rotate(270) translate(-30,-30)"
fill="#caf0f8" d="M60 0H0v60L60 0z"></path>
</svg>
<svg>
<rect transform="translate(240, 420)" fill="#90e0ef" width="60" height="60"></rect>
<path transform="translate(240, 420) translate(30,30) rotate(90) translate(-30,-30)"
fill="#ade8f4" d="M60 0H0v60L60 0z"></path>
<rect transform="translate(240, 420)" fill="#00b4d8" x="15" y="15" width="30" height="30"></rect>
</svg>
<svg>
<rect transform="translate(240, 480)" fill="#03045e" width="60" height="60"></rect>
<rect transform="translate(240, 480)" fill="#0096c7" x="15" y="15" width="30" height="30"></rect>
</svg>
<svg>
<rect transform="translate(240, 540)" fill="#ade8f4" width="60" height="60"></rect>
<rect transform="translate(240, 540)" fill="#90e0ef" x="15" y="15" width="30" height="30"></rect>
</svg>
<svg>
<rect transform="translate(300, 0)" fill="#0096c7" width="60" height="60"></rect>
<rect transform="translate(300, 0)" fill="#00b4d8" x="15" y="15" width="30" height="30"></rect>
</svg>
<svg>
<rect transform="translate(300, 60)" fill="#023e8a" width="60" height="60"></rect>
<path transform="translate(300, 60) translate(30,30) rotate(270) translate(-30,-30)"
fill="#03045e" d="M60 0H0v60L60 0z"></path>
<rect transform="translate(300, 60)" fill="#00b4d8" x="15" y="15" width="30" height="30"></rect>
</svg>
<svg>
<rect transform="translate(300, 120)" fill="#0096c7" width="60" height="60"></rect>
<path transform="translate(300, 120) translate(30,30) rotate(0) translate(-30,-30)"
fill="#00b4d8" d="M60 0H0v60L60 0z"></path>
</svg>
<svg>
<rect transform="translate(300, 180)" fill="#03045e" width="60" height="60"></rect>
<path transform="translate(300, 180) translate(30,30) rotate(90) translate(-30,-30)"
fill="#0096c7" d="M60 0H0v60L60 0z"></path>
<rect transform="translate(300, 180)" fill="#90e0ef" x="15" y="15" width="30" height="30"></rect>
</svg>
<svg>
<rect transform="translate(300, 240)" fill="#ade8f4" width="60" height="60"></rect>
<path transform="translate(300, 240) translate(30,30) rotate(270) translate(-30,-30)"
fill="#023e8a" d="M60 0H0v60L60 0z"></path>
</svg>
<svg>
<rect transform="translate(300, 300)" fill="#03045e" width="60" height="60"></rect>
<path transform="translate(300, 300) translate(30,30) rotate(0) translate(-30,-30)"
fill="#00b4d8" d="M60 0H0v60L60 0z"></path>
<rect transform="translate(300, 300)" fill="#0096c7" x="15" y="15" width="30" height="30"></rect>
</svg>
<svg>
<rect transform="translate(300, 360)" fill="#caf0f8" width="60" height="60"></rect>
<path transform="translate(300, 360) translate(30,30) rotate(180) translate(-30,-30)"
fill="#023e8a" d="M60 0H0v60L60 0z"></path>
<rect transform="translate(300, 360)" fill="#ade8f4" x="15" y="15" width="30" height="30"></rect>
</svg>
<svg>
<rect transform="translate(300, 420)" fill="#0096c7" width="60" height="60"></rect>
<path transform="translate(300, 420) translate(30,30) rotate(0) translate(-30,-30)"
fill="#ade8f4" d="M60 0H0v60L60 0z"></path>
</svg>
<svg>
<rect transform="translate(300, 480)" fill="#00b4d8" width="60" height="60"></rect>
<rect transform="translate(300, 480)" fill="#48cae4" x="15" y="15" width="30" height="30"></rect>
</svg>
<svg>
<rect transform="translate(300, 540)" fill="#48cae4" width="60" height="60"></rect>
<path transform="translate(300, 540) translate(30,30) rotate(0) translate(-30,-30)"
fill="#ade8f4" d="M60 0H0v60L60 0z"></path>
</svg>
<svg>
<rect transform="translate(360, 0)" fill="#03045e" width="60" height="60"></rect>
<path transform="translate(360, 0) translate(30,30) rotate(180) translate(-30,-30)"
fill="#023e8a" d="M60 0H0v60L60 0z"></path>
<rect transform="translate(360, 0)" fill="#90e0ef" x="15" y="15" width="30" height="30"></rect>
</svg>
<svg>
<rect transform="translate(360, 60)" fill="#0096c7" width="60" height="60"></rect>
<path transform="translate(360, 60) translate(30,30) rotate(90) translate(-30,-30)"
fill="#00b4d8" d="M60 0H0v60L60 0z"></path>
</svg>
<svg>
<rect transform="translate(360, 120)" fill="#0077b6" width="60" height="60"></rect>
<path transform="translate(360, 120) translate(30,30) rotate(180) translate(-30,-30)"
fill="#00b4d8" d="M60 0H0v60L60 0z"></path>
</svg>
<svg>
<rect transform="translate(360, 180)" fill="#00b4d8" width="60" height="60"></rect>
<path transform="translate(360, 180) translate(30,30) rotate(0) translate(-30,-30)"
fill="#48cae4" d="M60 0H0v60L60 0z"></path>
<rect transform="translate(360, 180)" fill="#ade8f4" x="15" y="15" width="30" height="30"></rect>
</svg>
<svg>
<rect transform="translate(360, 240)" fill="#90e0ef" width="60" height="60"></rect>
<path transform="translate(360, 240) translate(30,30) rotate(270) translate(-30,-30)"
fill="#0077b6" d="M60 0H0v60L60 0z"></path>
</svg>
<svg>
<rect transform="translate(360, 300)" fill="#0077b6" width="60" height="60"></rect>
<path transform="translate(360, 300) translate(30,30) rotate(90) translate(-30,-30)"
fill="#03045e" d="M60 0H0v60L60 0z"></path>
<rect transform="translate(360, 300)" fill="#00b4d8" x="15" y="15" width="30" height="30"></rect>
</svg>
<svg>
<rect transform="translate(360, 360)" fill="#0096c7" width="60" height="60"></rect>
<path transform="translate(360, 360) translate(30,30) rotate(0) translate(-30,-30)"
fill="#90e0ef" d="M60 0H0v60L60 0z"></path>
</svg>
<svg>
<rect transform="translate(360, 420)" fill="#0096c7" width="60" height="60"></rect>
<path transform="translate(360, 420) translate(30,30) rotate(270) translate(-30,-30)"
fill="#90e0ef" d="M60 0H0v60L60 0z"></path>
</svg>
<svg>
<rect transform="translate(360, 480)" fill="#0077b6" width="60" height="60"></rect>
<rect transform="translate(360, 480)" fill="#023e8a" x="15" y="15" width="30" height="30"></rect>
</svg>
<svg>
<rect transform="translate(360, 540)" fill="#ade8f4" width="60" height="60"></rect>
<path transform="translate(360, 540) translate(30,30) rotate(90) translate(-30,-30)"
fill="#90e0ef" d="M60 0H0v60L60 0z"></path>
</svg>
<svg>
<rect transform="translate(420, 0)" fill="#00b4d8" width="60" height="60"></rect>
<path transform="translate(420, 0) translate(30,30) rotate(0) translate(-30,-30)"
fill="#48cae4" d="M60 0H0v60L60 0z"></path>
</svg>
<svg>
<rect transform="translate(420, 60)" fill="#ade8f4" width="60" height="60"></rect>
<path transform="translate(420, 60) translate(30,30) rotate(270) translate(-30,-30)"
fill="#0096c7" d="M60 0H0v60L60 0z"></path>
</svg>
<svg>
<rect transform="translate(420, 120)" fill="#0096c7" width="60" height="60"></rect>
<path transform="translate(420, 120) translate(30,30) rotate(180) translate(-30,-30)"
fill="#48cae4" d="M60 0H0v60L60 0z"></path>
<rect transform="translate(420, 120)" fill="#00b4d8" x="15" y="15" width="30" height="30"></rect>
</svg>
<svg>
<rect transform="translate(420, 180)" fill="#00b4d8" width="60" height="60"></rect>
<rect transform="translate(420, 180)" fill="#ade8f4" x="15" y="15" width="30" height="30"></rect>
</svg>
<svg>
<rect transform="translate(420, 240)" fill="#0096c7" width="60" height="60"></rect>
<path transform="translate(420, 240) translate(30,30) rotate(90) translate(-30,-30)"
fill="#90e0ef" d="M60 0H0v60L60 0z"></path>
</svg>
<svg>
<rect transform="translate(420, 300)" fill="#caf0f8" width="60" height="60"></rect>
<path transform="translate(420, 300) translate(30,30) rotate(90) translate(-30,-30)"
fill="#90e0ef" d="M60 0H0v60L60 0z"></path>
<rect transform="translate(420, 300)" fill="#023e8a" x="15" y="15" width="30" height="30"></rect>
</svg>
<svg>
<rect transform="translate(420, 360)" fill="#48cae4" width="60" height="60"></rect>
<path transform="translate(420, 360) translate(30,30) rotate(90) translate(-30,-30)"
fill="#03045e" d="M60 0H0v60L60 0z"></path>
</svg>
<svg>
<rect transform="translate(420, 420)" fill="#023e8a" width="60" height="60"></rect>
<path transform="translate(420, 420) translate(30,30) rotate(0) translate(-30,-30)"
fill="#ade8f4" d="M60 0H0v60L60 0z"></path>
</svg>
<svg>
<rect transform="translate(420, 480)" fill="#00b4d8" width="60" height="60"></rect>
<path transform="translate(420, 480) translate(30,30) rotate(0) translate(-30,-30)"
fill="#caf0f8" d="M60 0H0v60L60 0z"></path>
<rect transform="translate(420, 480)" fill="#023e8a" x="15" y="15" width="30" height="30"></rect>
</svg>
<svg>
<rect transform="translate(420, 540)" fill="#48cae4" width="60" height="60"></rect>
<path transform="translate(420, 540) translate(30,30) rotate(180) translate(-30,-30)"
fill="#caf0f8" d="M60 0H0v60L60 0z"></path>
<rect transform="translate(420, 540)" fill="#0096c7" x="15" y="15" width="30" height="30"></rect>
</svg>
<svg>
<rect transform="translate(480, 0)" fill="#caf0f8" width="60" height="60"></rect>
<path transform="translate(480, 0) translate(30,30) rotate(0) translate(-30,-30)"
fill="#ade8f4" d="M60 0H0v60L60 0z"></path>
<rect transform="translate(480, 0)" fill="#0096c7" x="15" y="15" width="30" height="30"></rect>
</svg>
<svg>
<rect transform="translate(480, 60)" fill="#ade8f4" width="60" height="60"></rect>
<path transform="translate(480, 60) translate(30,30) rotate(90) translate(-30,-30)"
fill="#90e0ef" d="M60 0H0v60L60 0z"></path>
</svg>
<svg>
<rect transform="translate(480, 120)" fill="#0096c7" width="60" height="60"></rect>
<path transform="translate(480, 120) translate(30,30) rotate(90) translate(-30,-30)"
fill="#023e8a" d="M60 0H0v60L60 0z"></path>
<rect transform="translate(480, 120)" fill="#48cae4" x="15" y="15" width="30" height="30"></rect>
</svg>
<svg>
<rect transform="translate(480, 180)" fill="#023e8a" width="60" height="60"></rect>
<rect transform="translate(480, 180)" fill="#90e0ef" x="15" y="15" width="30" height="30"></rect>
</svg>
<svg>
<rect transform="translate(480, 240)" fill="#00b4d8" width="60" height="60"></rect>
<path transform="translate(480, 240) translate(30,30) rotate(270) translate(-30,-30)"
fill="#caf0f8" d="M60 0H0v60L60 0z"></path>
</svg>
<svg>
<rect transform="translate(480, 300)" fill="#90e0ef" width="60" height="60"></rect>
<path transform="translate(480, 300) translate(30,30) rotate(0) translate(-30,-30)"
fill="#023e8a" d="M60 0H0v60L60 0z"></path>
</svg>
<svg>
<rect transform="translate(480, 360)" fill="#48cae4" width="60" height="60"></rect>
<rect transform="translate(480, 360)" fill="#0096c7" x="15" y="15" width="30" height="30"></rect>
</svg>
<svg>
<rect transform="translate(480, 420)" fill="#caf0f8" width="60" height="60"></rect>
<path transform="translate(480, 420) translate(30,30) rotate(0) translate(-30,-30)"
fill="#90e0ef" d="M60 0H0v60L60 0z"></path>
<rect transform="translate(480, 420)" fill="#023e8a" x="15" y="15" width="30" height="30"></rect>
</svg>
<svg>
<rect transform="translate(480, 480)" fill="#0096c7" width="60" height="60"></rect>
<rect transform="translate(480, 480)" fill="#ade8f4" x="15" y="15" width="30" height="30"></rect>
</svg>
<svg>
<rect transform="translate(480, 540)" fill="#0077b6" width="60" height="60"></rect>
<rect transform="translate(480, 540)" fill="#00b4d8" x="15" y="15" width="30" height="30"></rect>
</svg>
<svg>
<rect transform="translate(540, 0)" fill="#0096c7" width="60" height="60"></rect>
<path transform="translate(540, 0) translate(30,30) rotate(270) translate(-30,-30)"
fill="#ade8f4" d="M60 0H0v60L60 0z"></path>
</svg>
<svg>
<rect transform="translate(540, 60)" fill="#03045e" width="60" height="60"></rect>
<path transform="translate(540, 60) translate(30,30) rotate(180) translate(-30,-30)"
fill="#ade8f4" d="M60 0H0v60L60 0z"></path>
<rect transform="translate(540, 60)" fill="#0077b6" x="15" y="15" width="30" height="30"></rect>
</svg>
<svg>
<rect transform="translate(540, 120)" fill="#90e0ef" width="60" height="60"></rect>
<rect transform="translate(540, 120)" fill="#48cae4" x="15" y="15" width="30" height="30"></rect>
</svg>
<svg>
<rect transform="translate(540, 180)" fill="#ade8f4" width="60" height="60"></rect>
<rect transform="translate(540, 180)" fill="#0096c7" x="15" y="15" width="30" height="30"></rect>
</svg>
<svg>
<rect transform="translate(540, 240)" fill="#03045e" width="60" height="60"></rect>
<path transform="translate(540, 240) translate(30,30) rotate(270) translate(-30,-30)"
fill="#0096c7" d="M60 0H0v60L60 0z"></path>
</svg>
<svg>
<rect transform="translate(540, 300)" fill="#00b4d8" width="60" height="60"></rect>
<rect transform="translate(540, 300)" fill="#0077b6" x="15" y="15" width="30" height="30"></rect>
</svg>
<svg>
<rect transform="translate(540, 360)" fill="#03045e" width="60" height="60"></rect>
<path transform="translate(540, 360) translate(30,30) rotate(90) translate(-30,-30)"
fill="#caf0f8" d="M60 0H0v60L60 0z"></path>
<rect transform="translate(540, 360)" fill="#90e0ef" x="15" y="15" width="30" height="30"></rect>
</svg>
<svg>
<rect transform="translate(540, 420)" fill="#ade8f4" width="60" height="60"></rect>
<path transform="translate(540, 420) translate(30,30) rotate(180) translate(-30,-30)"
fill="#0096c7" d="M60 0H0v60L60 0z"></path>
</svg>
<svg>
<rect transform="translate(540, 480)" fill="#0077b6" width="60" height="60"></rect>
<rect transform="translate(540, 480)" fill="#ade8f4" x="15" y="15" width="30" height="30"></rect>
</svg>
<svg>
<rect transform="translate(540, 540)" fill="#48cae4" width="60" height="60"></rect>
<rect transform="translate(540, 540)" fill="#0077b6" x="15" y="15" width="30" height="30"></rect>
</svg>
</svg>

After

Width:  |  Height:  |  Size: 28 KiB

View file

@ -0,0 +1,102 @@
---
title: "Multiple Authors"
weight: 8
draft: false
description: "Configure multiple authors for your articles."
slug: "multi-author"
tags: ["authors", "config", "docs"]
series: ["Documentation"]
series_order: 10
showAuthor: true
authors:
- "nunocoracao"
showAuthorsBadges : false
---
Some websites have more than one author contributing with content and therefore require more than a single default author across the entire website. For those use-cases, Blowfish allows users to extend the list of authors using the multiple authors feature.
To keep everything backwards compatible, this feature only allows the definition of extra authors and does not change in any way the previous author functionality which is used via config files.
## Create Authors
The first step to create new authors is to set up a new folder in `./data/authors`. Then you can simply add new `json` files inside, one for each new author. The name of the file will be the `key` for that author when referencing it in your articles.
As an example, lets create a file called `nunocoracao.json` within `./data/authors`. The contents of the file should be similar to the ones below. `name`, `image`, `bio`, and `social` are the 4 parameters supported right for authors. They mimic the configurations available for the default author in the config files.
_Note: the key in the social object will be used to fetch one of the themes icons, feel free to use any of the icons available in your setup._
```json
{
"name": "Nuno Coração",
"image" : "img/nuno_avatar.jpg",
"bio": "Theme Creator",
"social": [
{ "linkedin": "https://linkedin.com/in/nunocoracao" },
{ "twitter": "https://twitter.com/nunocoracao" },
{ "instagram": "https://instagram.com/nunocoracao" },
{ "medium": "https://medium.com/@nunocoracao" },
{ "github": "https://github.com/nunocoracao" },
{ "goodreads": "http://goodreads.com/nunocoracao" },
{ "keybase": "https://keybase.io/nunocoracao" },
{ "reddit": "https://reddit.com/user/nunoheart" }
]
}
```
## Reference Authors in Articles
Now that you created one author, the next step is to reference it in one or more articles. In the example below, we reference the author created in the previous step using its `key`.
This will render an extra author using the data provided in the `json` file. This feature does not change in any way the default author configured for the overall site, and therefore, you can control both separately. Using the `showAuthor` parameter, you can configure whether to show the default author, that is the normal use-case for a single author blog. The new `authors` front-matter parameter allows you to define authors specifically to an article, and they will be rendered independently of the configurations for the default site author.
```md
---
title: "Multiple Authors"
date: 2020-08-10
draft: false
description: "Configure multiple authors for your articles."
slug: "multi-author"
tags: ["authors", "config", "docs"]
showAuthor: true
authors:
- "nunocoracao"
showAuthorsBadges : false
---
```
In the example, which matches the markdown of the current page, both the default author and the new one will be displayed. You can scroll now to see the outcome.
## Create the Authors Taxonomy
To get lists of articles for each of your authors you can configure the `authors` taxonomy, which opens up some more configurations that might be interesting. This is an optional step in the process that is not required to display the authors in your articles.
First step is to configure the `authors` taxonomy in your `config.toml` file, like in the example below. Even though `tag` and `category` are defined by default with Hugo, once you add a specific taxonomies section you need to add them again otherwise the site will not process them.
```toml
[taxonomies]
tag = "tags"
category = "categories"
author = "authors"
```
And thats just about it. Now you will have pages that reference your authors and, for each, show the respective list of articles where they participate. You can also use the `article.showAuthorsBadges` on the config file, or `showAuthorsBadges` on each article to chose whether to display the `authors` taxonomy as badges in each post item. As an example, this doc is configured to not display authors but if you look at the sample referenced below you will see the authors displayed as badges.
Lastly, you can add more detail to each author page so that it displays a little bio, links, or whatever information fits your use-case. To achieve that, create a folder with the `key` to each author inside `./content/authors` and inside each folder place a `_index.md` file. For the example above, we would end up with a `.content/authors/nunocoracao/_index.md` file. Inside, you can configure the actual name of the author and the contents of their page. Authors in this documentation website are configured like this, so you can have a look by playing around with the site.
```md
---
title: "Nuno Coração"
---
Nuno's awesome dummy bio.
```
## Sample
This sample sample below shows an example where the default site author is turned off and the article has multiple authors.
{{< article link="/samples/multiple-authors/" >}}

View file

@ -0,0 +1,100 @@
---
title: "複数の著者"
weight: 8
draft: false
description: "記事に複数の著者を設定する。"
slug: "multi-author"
tags: ["authors", "config", "docs"]
series: ["Documentation"]
series_order: 10
showAuthor: true
authors:
- "nunocoracao"
showAuthorsBadges : false
---
一部のウェブサイトでは、複数の著者がコンテンツを提供しているため、ウェブサイト全体で単一のデフォルト著者以上のものが必要になります。このようなユースケースのために、Blowfish では、複数著者機能を使用して著者リストを拡張できます。
すべての後方互換性を維持するために、この機能では追加の著者の定義のみを許可し、設定ファイルを介して使用される以前の著者機能を一切変更しません。
## 著者の作成
新しい著者を作成する最初のステップは、`./data/authors` に新しいフォルダを設定することです。次に、その中に新しい `json` ファイルを、新しい著者ごとに1つずつ追加できます。ファイルの名前は、記事で参照する際のその著者の `key` になります。
例として、`./data/authors` 内に `nunocoracao.json` というファイルを作成しましょう。ファイルの内容は以下のものと同様である必要があります。`name``image``bio`、および `social` は、著者に対して現在サポートされている4つのパラメータです。これらは、設定ファイルでデフォルトの著者に対して使用できる設定を模倣しています。
_注: ソーシャルオブジェクトのキーは、テーマのアイコンの1つを取得するために使用されます。セットアップで利用可能な任意のアイコンを自由に使用してください。_
```json
{
"name": "Nuno Coração",
"image" : "img/nuno_avatar.jpg",
"bio": "テーマ作成者",
"social": [
{ "linkedin": "https://linkedin.com/in/nunocoracao" },
{ "twitter": "https://twitter.com/nunocoracao" },
{ "instagram": "https://instagram.com/nunocoracao" },
{ "medium": "https://medium.com/@nunocoracao" },
{ "github": "https://github.com/nunocoracao" },
{ "goodreads": "http://goodreads.com/nunocoracao" },
{ "keybase": "https://keybase.io/nunocoracao" },
{ "reddit": "https://reddit.com/user/nunoheart" }
]
}
```
## 記事で著者を参照する
著者を作成したので、次のステップは1つ以上の記事でそれを参照することです。以下の例では、前のステップで作成した著者をその `key` を使用して参照しています。
これにより、`json` ファイルで提供されたデータを使用して追加の著者がレンダリングされます。この機能は、サイト全体に設定されたデフォルトの著者を一切変更しないため、両方を個別に制御できます。`showAuthor` パラメータを使用すると、デフォルトの著者を表示するかどうかを設定できます。これは、単一著者のブログの通常の使用例です。新しい `authors` フロントマターパラメータを使用すると、記事に固有の著者を定義でき、それらはデフォルトのサイト著者の設定とは独立してレンダリングされます。
```md
---
title: "複数の著者"
date: 2020-08-10
draft: false
description: "記事に複数の著者を設定する。"
slug: "multi-author"
tags: ["authors", "config", "docs"]
showAuthor: true
authors:
- "nunocoracao"
showAuthorsBadges : false
---
```
この例は、現在のページの Markdown と同じもので、デフォルトの著者と新しい著者の両方が表示されます。スクロールして結果を確認できます。
## 著者タクソノミーを作成する
著者ごとに記事のリストを取得するには、`authors` タクソノミーを設定できます。これにより、さらに興味深い設定がいくつか可能になります。これは、記事に著者を表示するために必要なプロセスではオプションのステップです。
最初のステップは、以下の例のように、`config.toml` ファイルで `authors` タクソノミーを設定することです。`tag``category` はデフォルトで Hugo で定義されていますが、一度特定のタクソノミーセクションを追加したら、再度追加する必要があります。そうしないと、サイトはそれらを処理しません。
```toml
[taxonomies]
tag = "tags"
category = "categories"
author = "authors"
```
これでほぼ完了です。著者を指定するページが作成され、それぞれに、参加している記事のリストが表示されます。設定ファイルで `article.showAuthorsBadges` を使用したり、各記事で `showAuthorsBadges` を使用したりして、各投稿アイテムに `authors` タクソノミーをバッジとして表示するかを選択できます。例として、このドキュメントでは著者を表示しないように設定されていますが、以下に参照されているサンプルを見ると、著者がバッジとして表示されていることがわかります。
最後に、各著者ページに詳細を追加して、ちょっとした経歴、リンク、または用途に合った情報を表示できます。これを実現するには、`./content/authors` 内に各著者への `key` を持つフォルダを作成し、各フォルダ内に `_index.md` ファイルを配置します。上記の例では、`.content/authors/nunocoracao/_index.md` ファイルが作成されます。この中で、著者の実際の名前とそのページの内容を設定できます。このドキュメントウェブサイトの著者はこのように設定されているため、サイトをいじって見てください。
```md
---
title: "Nuno Coração"
---
Nuno の素晴らしいダミー経歴。
```
## サンプル
以下のサンプルは、デフォルトのサイト作成者がオフになっており、記事に複数の作成者がいる例を示しています。
{{< article link="/samples/multiple-authors/" >}}

View file

@ -0,0 +1,102 @@
---
title: "Multiple Authors"
weight: 8
draft: false
description: "Configure multiple authors for your articles."
slug: "multi-author"
tags: ["authors", "config", "docs"]
series: ["Documentation"]
series_order: 10
showAuthor: true
authors:
- "nunocoracao"
showAuthorsBadges : false
---
Some websites have more than one author contributing with content and therefore require more than a single default author across the entire website. For those use-cases, Blowfish allows users to extend the list of authors using the multiple authors feature.
To keep everything backwards compatible, this feature only allows the definition of extra authors and does not change in any way the previous author functionality which is used via config files.
## Create Authors
The first step to create new authors is to set up a new folder in `./data/authors`. Then you can simply add new `json` files inside, one for each new author. The name of the file will be the `key` for that author when referencing it in your articles.
As an example, lets create a file called `nunocoracao.json` within `./data/authors`. The contents of the file should be similar to the ones below. `name`, `image`, `bio`, and `social` are the 4 parameters supported right for authors. They mimic the configurations available for the default author in the config files.
_Note: the key in the social object will be used to fetch one of the themes icons, feel free to use any of the icons available in your setup._
```json
{
"name": "Nuno Coração",
"image" : "img/nuno_avatar.jpg",
"bio": "Theme Creator",
"social": [
{ "linkedin": "https://linkedin.com/in/nunocoracao" },
{ "twitter": "https://twitter.com/nunocoracao" },
{ "instagram": "https://instagram.com/nunocoracao" },
{ "medium": "https://medium.com/@nunocoracao" },
{ "github": "https://github.com/nunocoracao" },
{ "goodreads": "http://goodreads.com/nunocoracao" },
{ "keybase": "https://keybase.io/nunocoracao" },
{ "reddit": "https://reddit.com/user/nunoheart" }
]
}
```
## Reference Authors in Articles
Now that you created one author, the next step is to reference it in one or more articles. In the example below, we reference the author created in the previous step using its `key`.
This will render an extra author using the data provided in the `json` file. This feature does not change in any way the default author configured for the overall site, and therefore, you can control both separately. Using the `showAuthor` parameter, you can configure whether to show the default author, that is the normal use-case for a single author blog. The new `authors` front-matter parameter allows you to define authors specifically to an article, and they will be rendered independently of the configurations for the default site author.
```md
---
title: "Multiple Authors"
date: 2020-08-10
draft: false
description: "Configure multiple authors for your articles."
slug: "multi-author"
tags: ["authors", "config", "docs"]
showAuthor: true
authors:
- "nunocoracao"
showAuthorsBadges : false
---
```
In the example, which matches the markdown of the current page, both the default author and the new one will be displayed. You can scroll now to see the outcome.
## Create the Authors Taxonomy
To get lists of articles for each of your authors you can configure the `authors` taxonomy, which opens up some more configurations that might be interesting. This is an optional step in the process that is not required to display the authors in your articles.
First step is to configure the `authors` taxonomy in your `config.toml` file, like in the example below. Even though `tag` and `category` are defined by default with Hugo, once you add a specific taxonomies section you need to add them again otherwise the site will not process them.
```toml
[taxonomies]
tag = "tags"
category = "categories"
author = "authors"
```
And thats just about it. Now you will have pages that reference your authors and, for each, show the respective list of articles where they participate. You can also use the `article.showAuthorsBadges` on the config file, or `showAuthorsBadges` on each article to chose whether to display the `authors` taxonomy as badges in each post item. As an example, this doc is configured to not display authors but if you look at the sample referenced below you will see the authors displayed as badges.
Lastly, you can add more detail to each author page so that it displays a little bio, links, or whatever information fits your use-case. To achieve that, create a folder with the `key` to each author inside `./content/authors` and inside each folder place a `_index.md` file. For the example above, we would end up with a `.content/authors/nunocoracao/_index.md` file. Inside, you can configure the actual name of the author and the contents of their page. Authors in this documentation website are configured like this, so you can have a look by playing around with the site.
```md
---
title: "Nuno Coração"
---
Nuno's awesome dummy bio.
```
## Sample
This sample sample below shows an example where the default site author is turned off and the article has multiple authors.
{{< article link="/samples/multiple-authors/" >}}

View file

@ -0,0 +1,100 @@
---
title: "多创作者模式"
weight: 8
draft: false
description: "为你的文章设置多个作者。"
slug: "multi-author"
tags: ["作者", "配置", "文档"]
series: ["部署教程"]
series_order: 10
showAuthor: true
authors:
- "nunocoracao"
showAuthorsBadges : false
---
一个网站会有多个创作者共同贡献内容所以需要再整个网站中默认使用多创作者。对于这种情况Blowfish 允许用户使用多创作者功能拓展创作者列表。
为了保持向后兼容,这个功能仅允许定义额外的创作者,并不会以任何方式修改之前通过配置文件添加的创作者。
## 新建创作者
新建创作者的第一步是设置一个 `./data/authors` 文件夹。然后,你可以在里面简单的添加新创作者的 `json` 文件。文件的名称是你在文章引用该作者时需要指定的 `key`
例如,在 `./data/authors` 文件夹中新建一个 `nunocoracao.json` 文件。文件的内容示例如下。`name``image``bio``social` 是目前创作者文件支持的4个参数这与你在 `languages.[language-code].toml` 配置文件中的默认创作者配置类似。
_注意社交参数中的 `key` 将会默认获取主题的图标 icon当然你也可以在 `assests/icons` 文件夹中设置任何图标。_
```json
{
"name": "Nuno Coração",
"image" : "img/nuno_avatar.jpg",
"bio": "Theme Creator",
"social": [
{ "linkedin": "https://linkedin.com/in/nunocoracao" },
{ "twitter": "https://twitter.com/nunocoracao" },
{ "instagram": "https://instagram.com/nunocoracao" },
{ "medium": "https://medium.com/@nunocoracao" },
{ "github": "https://github.com/nunocoracao" },
{ "goodreads": "http://goodreads.com/nunocoracao" },
{ "keybase": "https://keybase.io/nunocoracao" },
{ "reddit": "https://reddit.com/user/nunoheart" }
]
}
```
## 在文章中引用创作者
你已经新建好了创作者,下一步让我们在文章中引用它。在下面的实例中,我们使用前面新建的创作者 `key` 来引用它。
Blowfish 将会使用额外创作者对应`json`文件中的数据,以帮助在文章中渲染此作者。这个功能不会以改变整个站点配置的默认作者,因此你可以分别控制他们。使用 `showAuthor` 参数,可以配置是否显示默认作者,这适用于单创作者的博客。扉页中的 `authors` 参数允许你为文章定义额外的创作者,这里的创作者将独立于整个站点中的默认创作者。
```md
---
title: "多创作者"
date: 2020-08-10
draft: false
description: "为你的文章设置多个作者。"
slug: "multi-author"
tags: ["authors", "config", "docs"]
showAuthor: true
authors:
- "nunocoracao"
showAuthorsBadges : false
---
```
上面这个示例和当前这个页面一样,将显示默认创作者和新创作者。你可以滚动此页面来查看实际效果。
## 新建创作者分类法
如果你想要获取每个作者的文章列表,需要配置 `authors` 分类,这会让你了解到一些更有趣的配置。这个是多创作者模式中的一个可选步骤。
To get lists of articles for each of your authors you can configure the `authors` taxonomy, which opens up some more configurations that might be interesting. This is an optional step in the process that is not required to display the authors in your articles.
第一步是在 `config.toml` 文件中配置 `authors` 分类法,如下所示。尽管 `tag``category` 默认是 Hugo 定义的,但只要你添加了一个特定的分类法,就需要显式添加 `tag``category`,否则基于 Hugo 的文件加载顺序,站点将不会处理 `tag``category`
```toml
[taxonomies]
tag = "tags"
category = "categories"
author = "authors"
```
这样一来,你将会有一个所有创作者列表的页面,并且每个创作者都会显示他们参与创作的文章列表。如果你想在每个文章中以徽章的形式中展示作者,有两种方式:在全局配置文件添加 `article.showAuthorsBadges` 参数 或 在每篇文章的扉页参数中配置 `showAuthorsBadges`参数。
最后,你可以为每个创作者页面添加更多细节内容,以便显示简介、链接或者适合你需求的任何其他信息。为了实现这一点,需要在 `./content/authors` 文件夹中为每个创作者添加一个目录名为 `key` 的文件夹,并在文件夹中添加 `_index.md` 文件,对于上面的例子,我们会得到一个 `.content/authors/nunocoracao/_index.md` 文件。在这个文件中你可以添加创作者的实际姓名和他们自己的个人信息页面。本文档站点中的作者就是这么配置的,你可以在文档站点中查看实际效果。
```md
---
title: "Nuno Coração"
---
Nuno's awesome dummy bio.
```
## 示例
下面这个示例,介绍了演示了如何关闭站点默认创作者,并在文章中添加多创作者。
{{< article link="/samples/multiple-authors/" >}}

View file

@ -0,0 +1,574 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
style="margin:auto;background:rgba(NaN, NaN, NaN, 0);display:block;z-index:1;position:relative"
width="1084" height="322" preserveAspectRatio="xMidYMid" viewBox="0 0 1084 322">
<defs>
<pattern id="pid-0.7735807359934106" x="0" y="0" width="345.6" height="345.6"
patternUnits="userSpaceOnUse">
<g transform="scale(1.35)">
<g>
<line x1="237.6288884328494" x2="201.39714008747956" y1="119.05338354492488"
y2="155.28513189029474" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="237.6288884328494" x2="201.39714008747956" y1="-392.9466164550751"
y2="-356.71486810970526" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="493.6288884328494" x2="457.39714008747956" y1="-392.9466164550751"
y2="-356.71486810970526" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="749.6288884328494" x2="713.3971400874796" y1="-392.9466164550751"
y2="-356.71486810970526" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="237.6288884328494" x2="201.39714008747956" y1="-136.94661645507512"
y2="-100.71486810970526" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="493.6288884328494" x2="457.39714008747956" y1="-136.94661645507512"
y2="-100.71486810970526" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="749.6288884328494" x2="713.3971400874796" y1="-136.94661645507512"
y2="-100.71486810970526" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="237.6288884328494" x2="201.39714008747956" y1="119.05338354492488"
y2="155.28513189029474" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="493.6288884328494" x2="457.39714008747956" y1="119.05338354492488"
y2="155.28513189029474" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="749.6288884328494" x2="713.3971400874796" y1="119.05338354492488"
y2="155.28513189029474" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="244.43797352167968" x2="179.25167385613412" y1="196.21419032492787"
y2="261.40048999047343" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="244.43797352167968" x2="179.25167385613412" y1="-315.78580967507213"
y2="-250.59951000952657" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="500.4379735216797" x2="435.2516738561341" y1="-315.78580967507213"
y2="-250.59951000952657" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="756.4379735216796" x2="691.2516738561342" y1="-315.78580967507213"
y2="-250.59951000952657" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="244.43797352167968" x2="179.25167385613412" y1="-59.78580967507213"
y2="5.400489990473432" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="500.4379735216797" x2="435.2516738561341" y1="-59.78580967507213"
y2="5.400489990473432" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="756.4379735216796" x2="691.2516738561342" y1="-59.78580967507213"
y2="5.400489990473432" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="244.43797352167968" x2="179.25167385613412" y1="196.21419032492787"
y2="261.40048999047343" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="500.4379735216797" x2="435.2516738561341" y1="196.21419032492787"
y2="261.40048999047343" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="756.4379735216796" x2="691.2516738561342" y1="196.21419032492787"
y2="261.40048999047343" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="219.6724359102308" x2="209.2181431749452" y1="92.85808081141191"
y2="103.31237354669749" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="219.6724359102308" x2="209.2181431749452" y1="-419.1419191885881"
y2="-408.6876264533025" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="475.6724359102308" x2="465.2181431749452" y1="-419.1419191885881"
y2="-408.6876264533025" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="731.6724359102308" x2="721.2181431749452" y1="-419.1419191885881"
y2="-408.6876264533025" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="219.6724359102308" x2="209.2181431749452" y1="-163.14191918858808"
y2="-152.68762645330253" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="475.6724359102308" x2="465.2181431749452" y1="-163.14191918858808"
y2="-152.68762645330253" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="731.6724359102308" x2="721.2181431749452" y1="-163.14191918858808"
y2="-152.68762645330253" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="219.6724359102308" x2="209.2181431749452" y1="92.85808081141191"
y2="103.31237354669749" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="475.6724359102308" x2="465.2181431749452" y1="92.85808081141191"
y2="103.31237354669749" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="731.6724359102308" x2="721.2181431749452" y1="92.85808081141191"
y2="103.31237354669749" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="112.00565118011832" x2="71.15817744773324" y1="56.63419812919665"
y2="97.48167186158173" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="112.00565118011832" x2="71.15817744773324" y1="-455.36580187080335"
y2="-414.51832813841827" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="368.0056511801183" x2="327.15817744773324" y1="-455.36580187080335"
y2="-414.51832813841827" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="624.0056511801183" x2="583.1581774477332" y1="-455.36580187080335"
y2="-414.51832813841827" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="112.00565118011832" x2="71.15817744773324" y1="-199.36580187080335"
y2="-158.51832813841827" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="368.0056511801183" x2="327.15817744773324" y1="-199.36580187080335"
y2="-158.51832813841827" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="624.0056511801183" x2="583.1581774477332" y1="-199.36580187080335"
y2="-158.51832813841827" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="112.00565118011832" x2="71.15817744773324" y1="56.63419812919665"
y2="97.48167186158173" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="368.0056511801183" x2="327.15817744773324" y1="56.63419812919665"
y2="97.48167186158173" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="624.0056511801183" x2="583.1581774477332" y1="56.63419812919665"
y2="97.48167186158173" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="60.932966336476014" x2="49.388821076756514" y1="125.65681060957188"
y2="137.20095586929136" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="60.932966336476014" x2="49.388821076756514" y1="-386.3431893904281"
y2="-374.79904413070864" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="316.932966336476" x2="305.3888210767565" y1="-386.3431893904281"
y2="-374.79904413070864" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="572.932966336476" x2="561.3888210767565" y1="-386.3431893904281"
y2="-374.79904413070864" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="60.932966336476014" x2="49.388821076756514" y1="-130.3431893904281"
y2="-118.79904413070864" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="316.932966336476" x2="305.3888210767565" y1="-130.3431893904281"
y2="-118.79904413070864" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="572.932966336476" x2="561.3888210767565" y1="-130.3431893904281"
y2="-118.79904413070864" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="60.932966336476014" x2="49.388821076756514" y1="125.65681060957188"
y2="137.20095586929136" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="316.932966336476" x2="305.3888210767565" y1="125.65681060957188"
y2="137.20095586929136" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="572.932966336476" x2="561.3888210767565" y1="125.65681060957188"
y2="137.20095586929136" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="103.78310212459807" x2="35.08486945593138" y1="-2.328164446496814"
y2="66.37006822216988" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="103.78310212459807" x2="35.08486945593138" y1="-514.3281644464968"
y2="-445.6299317778301" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="359.7831021245981" x2="291.08486945593137" y1="-514.3281644464968"
y2="-445.6299317778301" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="615.783102124598" x2="547.0848694559314" y1="-514.3281644464968"
y2="-445.6299317778301" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="103.78310212459807" x2="35.08486945593138" y1="-258.3281644464968"
y2="-189.6299317778301" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="359.7831021245981" x2="291.08486945593137" y1="-258.3281644464968"
y2="-189.6299317778301" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="615.783102124598" x2="547.0848694559314" y1="-258.3281644464968"
y2="-189.6299317778301" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="103.78310212459807" x2="35.08486945593138" y1="-2.328164446496814"
y2="66.37006822216988" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="359.7831021245981" x2="291.08486945593137" y1="-2.328164446496814"
y2="66.37006822216988" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="615.783102124598" x2="547.0848694559314" y1="-2.328164446496814"
y2="66.37006822216988" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="103.78310212459807" x2="35.08486945593138" y1="253.67183555350317"
y2="322.3700682221699" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="211.69894364075495" x2="194.13528259328754" y1="166.21741462144607"
y2="183.78107566891347" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="211.69894364075495" x2="194.13528259328754" y1="-345.7825853785539"
y2="-328.21892433108655" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="467.6989436407549" x2="450.13528259328757" y1="-345.7825853785539"
y2="-328.21892433108655" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="723.6989436407549" x2="706.1352825932876" y1="-345.7825853785539"
y2="-328.21892433108655" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="211.69894364075495" x2="194.13528259328754" y1="-89.78258537855393"
y2="-72.21892433108653" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="467.6989436407549" x2="450.13528259328757" y1="-89.78258537855393"
y2="-72.21892433108653" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="723.6989436407549" x2="706.1352825932876" y1="-89.78258537855393"
y2="-72.21892433108653" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="211.69894364075495" x2="194.13528259328754" y1="166.21741462144607"
y2="183.78107566891347" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="467.6989436407549" x2="450.13528259328757" y1="166.21741462144607"
y2="183.78107566891347" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="723.6989436407549" x2="706.1352825932876" y1="166.21741462144607"
y2="183.78107566891347" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="44.012515207413756" x2="6.2920050630466875" y1="153.79537767995515"
y2="191.5158878243222" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="44.012515207413756" x2="6.2920050630466875" y1="-358.20462232004485"
y2="-320.4841121756778" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="300.01251520741374" x2="262.2920050630467" y1="-358.20462232004485"
y2="-320.4841121756778" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="556.0125152074138" x2="518.2920050630466" y1="-358.20462232004485"
y2="-320.4841121756778" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="44.012515207413756" x2="6.2920050630466875" y1="-102.20462232004485"
y2="-64.48411217567781" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="300.01251520741374" x2="262.2920050630467" y1="-102.20462232004485"
y2="-64.48411217567781" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="556.0125152074138" x2="518.2920050630466" y1="-102.20462232004485"
y2="-64.48411217567781" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="44.012515207413756" x2="6.2920050630466875" y1="153.79537767995515"
y2="191.5158878243222" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="300.01251520741374" x2="262.2920050630467" y1="153.79537767995515"
y2="191.5158878243222" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="556.0125152074138" x2="518.2920050630466" y1="153.79537767995515"
y2="191.5158878243222" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="105.49237048043514" x2="31.549625942354083" y1="123.41684480916788"
y2="197.35958934724894" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="105.49237048043514" x2="31.549625942354083" y1="-388.58315519083214"
y2="-314.64041065275103" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="361.49237048043517" x2="287.54962594235406" y1="-388.58315519083214"
y2="-314.64041065275103" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="617.4923704804352" x2="543.549625942354" y1="-388.58315519083214"
y2="-314.64041065275103" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="105.49237048043514" x2="31.549625942354083" y1="-132.58315519083212"
y2="-58.64041065275106" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="361.49237048043517" x2="287.54962594235406" y1="-132.58315519083212"
y2="-58.64041065275106" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="617.4923704804352" x2="543.549625942354" y1="-132.58315519083212"
y2="-58.64041065275106" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="105.49237048043514" x2="31.549625942354083" y1="123.41684480916788"
y2="197.35958934724894" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="361.49237048043517" x2="287.54962594235406" y1="123.41684480916788"
y2="197.35958934724894" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="617.4923704804352" x2="543.549625942354" y1="123.41684480916788"
y2="197.35958934724894" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<animateTransform attributeName="transform" type="translate" values="0 0;-256 256"
keyTimes="0;1" repeatCount="indefinite" dur="10s"></animateTransform>
</g>
<g>
<line x1="95.73622575770466" x2="50.085335235319484" y1="20.45659654328417"
y2="66.10748706566935" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="95.73622575770466" x2="50.085335235319484" y1="-491.54340345671585"
y2="-445.8925129343306" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="351.7362257577047" x2="306.08533523531946" y1="-491.54340345671585"
y2="-445.8925129343306" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="607.7362257577047" x2="562.0853352353195" y1="-491.54340345671585"
y2="-445.8925129343306" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="95.73622575770466" x2="50.085335235319484" y1="-235.54340345671582"
y2="-189.89251293433065" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="351.7362257577047" x2="306.08533523531946" y1="-235.54340345671582"
y2="-189.89251293433065" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="607.7362257577047" x2="562.0853352353195" y1="-235.54340345671582"
y2="-189.89251293433065" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="95.73622575770466" x2="50.085335235319484" y1="20.45659654328417"
y2="66.10748706566935" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="351.7362257577047" x2="306.08533523531946" y1="20.45659654328417"
y2="66.10748706566935" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="607.7362257577047" x2="562.0853352353195" y1="20.45659654328417"
y2="66.10748706566935" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="263.34308373797757" x2="226.59561736370148" y1="112.42933995479353"
y2="149.17680632906962" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="263.34308373797757" x2="226.59561736370148" y1="-399.57066004520647"
y2="-362.8231936709304" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="519.3430837379776" x2="482.5956173637015" y1="-399.57066004520647"
y2="-362.8231936709304" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="775.3430837379776" x2="738.5956173637014" y1="-399.57066004520647"
y2="-362.8231936709304" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="263.34308373797757" x2="226.59561736370148" y1="-143.57066004520647"
y2="-106.82319367093038" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="519.3430837379776" x2="482.5956173637015" y1="-143.57066004520647"
y2="-106.82319367093038" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="775.3430837379776" x2="738.5956173637014" y1="-143.57066004520647"
y2="-106.82319367093038" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="263.34308373797757" x2="226.59561736370148" y1="112.42933995479353"
y2="149.17680632906962" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="519.3430837379776" x2="482.5956173637015" y1="112.42933995479353"
y2="149.17680632906962" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="775.3430837379776" x2="738.5956173637014" y1="112.42933995479353"
y2="149.17680632906962" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="7.343083737977565" x2="-29.40438263629852" y1="112.42933995479353"
y2="149.17680632906962" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="29.5343611349199" x2="-26.261040392985034" y1="205.16777076655512"
y2="260.96317229446004" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="29.5343611349199" x2="-26.261040392985034" y1="-306.8322292334449"
y2="-251.03682770553996" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="285.5343611349199" x2="229.73895960701498" y1="-306.8322292334449"
y2="-251.03682770553996" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="541.5343611349199" x2="485.738959607015" y1="-306.8322292334449"
y2="-251.03682770553996" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="29.5343611349199" x2="-26.261040392985034" y1="-50.83222923344488"
y2="4.963172294460037" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="285.5343611349199" x2="229.73895960701498" y1="-50.83222923344488"
y2="4.963172294460037" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="541.5343611349199" x2="485.738959607015" y1="-50.83222923344488"
y2="4.963172294460037" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="29.5343611349199" x2="-26.261040392985034" y1="205.16777076655512"
y2="260.96317229446004" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="285.5343611349199" x2="229.73895960701498" y1="205.16777076655512"
y2="260.96317229446004" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="541.5343611349199" x2="485.738959607015" y1="205.16777076655512"
y2="260.96317229446004" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="235.025028503587" x2="173.48946106938683" y1="23.306929884424335"
y2="84.84249731862451" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="235.025028503587" x2="173.48946106938683" y1="-488.69307011557567"
y2="-427.1575026813755" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="491.025028503587" x2="429.48946106938683" y1="-488.69307011557567"
y2="-427.1575026813755" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="747.025028503587" x2="685.4894610693868" y1="-488.69307011557567"
y2="-427.1575026813755" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="235.025028503587" x2="173.48946106938683" y1="-232.69307011557567"
y2="-171.1575026813755" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="491.025028503587" x2="429.48946106938683" y1="-232.69307011557567"
y2="-171.1575026813755" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="747.025028503587" x2="685.4894610693868" y1="-232.69307011557567"
y2="-171.1575026813755" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="235.025028503587" x2="173.48946106938683" y1="23.306929884424335"
y2="84.84249731862451" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="491.025028503587" x2="429.48946106938683" y1="23.306929884424335"
y2="84.84249731862451" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="747.025028503587" x2="685.4894610693868" y1="23.306929884424335"
y2="84.84249731862451" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="225.00990918130768" x2="200.62370409686488" y1="210.1052181599721"
y2="234.4914232444149" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="225.00990918130768" x2="200.62370409686488" y1="-301.8947818400279"
y2="-277.50857675558507" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="481.00990918130765" x2="456.6237040968649" y1="-301.8947818400279"
y2="-277.50857675558507" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="737.0099091813076" x2="712.6237040968649" y1="-301.8947818400279"
y2="-277.50857675558507" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="225.00990918130768" x2="200.62370409686488" y1="-45.89478184002789"
y2="-21.508576755585096" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="481.00990918130765" x2="456.6237040968649" y1="-45.89478184002789"
y2="-21.508576755585096" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="737.0099091813076" x2="712.6237040968649" y1="-45.89478184002789"
y2="-21.508576755585096" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="225.00990918130768" x2="200.62370409686488" y1="210.1052181599721"
y2="234.4914232444149" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="481.00990918130765" x2="456.6237040968649" y1="210.1052181599721"
y2="234.4914232444149" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="737.0099091813076" x2="712.6237040968649" y1="210.1052181599721"
y2="234.4914232444149" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="171.55017713954658" x2="102.05334080042758" y1="78.55895711807653"
y2="148.05579345719553" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="171.55017713954658" x2="102.05334080042758" y1="-433.44104288192347"
y2="-363.94420654280447" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="427.5501771395466" x2="358.0533408004276" y1="-433.44104288192347"
y2="-363.94420654280447" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="683.5501771395466" x2="614.0533408004276" y1="-433.44104288192347"
y2="-363.94420654280447" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="171.55017713954658" x2="102.05334080042758" y1="-177.44104288192347"
y2="-107.94420654280447" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="427.5501771395466" x2="358.0533408004276" y1="-177.44104288192347"
y2="-107.94420654280447" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="683.5501771395466" x2="614.0533408004276" y1="-177.44104288192347"
y2="-107.94420654280447" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="171.55017713954658" x2="102.05334080042758" y1="78.55895711807653"
y2="148.05579345719553" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="427.5501771395466" x2="358.0533408004276" y1="78.55895711807653"
y2="148.05579345719553" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="683.5501771395466" x2="614.0533408004276" y1="78.55895711807653"
y2="148.05579345719553" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="258.4358284744095" x2="228.09906783279462" y1="10.646186924515469"
y2="40.98294756613034" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="258.4358284744095" x2="228.09906783279462" y1="-501.35381307548454"
y2="-471.01705243386965" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="514.4358284744095" x2="484.0990678327946" y1="-501.35381307548454"
y2="-471.01705243386965" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="770.4358284744095" x2="740.0990678327946" y1="-501.35381307548454"
y2="-471.01705243386965" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="258.4358284744095" x2="228.09906783279462" y1="-245.35381307548454"
y2="-215.01705243386965" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="514.4358284744095" x2="484.0990678327946" y1="-245.35381307548454"
y2="-215.01705243386965" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="770.4358284744095" x2="740.0990678327946" y1="-245.35381307548454"
y2="-215.01705243386965" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="258.4358284744095" x2="228.09906783279462" y1="10.646186924515469"
y2="40.98294756613034" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="514.4358284744095" x2="484.0990678327946" y1="10.646186924515469"
y2="40.98294756613034" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="770.4358284744095" x2="740.0990678327946" y1="10.646186924515469"
y2="40.98294756613034" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="2.4358284744095045" x2="-27.900932167205383" y1="10.646186924515469"
y2="40.98294756613034" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="35.41624886616098" x2="-5.966808810922494" y1="10.151780697595989"
y2="51.53483837467946" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="35.41624886616098" x2="-5.966808810922494" y1="-501.848219302404"
y2="-460.46516162532055" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="291.41624886616097" x2="250.0331911890775" y1="-501.848219302404"
y2="-460.46516162532055" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="547.416248866161" x2="506.0331911890775" y1="-501.848219302404"
y2="-460.46516162532055" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="35.41624886616098" x2="-5.966808810922494" y1="-245.848219302404"
y2="-204.46516162532055" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="291.41624886616097" x2="250.0331911890775" y1="-245.848219302404"
y2="-204.46516162532055" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="547.416248866161" x2="506.0331911890775" y1="-245.848219302404"
y2="-204.46516162532055" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="35.41624886616098" x2="-5.966808810922494" y1="10.151780697595989"
y2="51.53483837467946" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="291.41624886616097" x2="250.0331911890775" y1="10.151780697595989"
y2="51.53483837467946" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="547.416248866161" x2="506.0331911890775" y1="10.151780697595989"
y2="51.53483837467946" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="90.76285286976488" x2="72.92514980496989" y1="79.79001478147771"
y2="97.6277178462727" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="90.76285286976488" x2="72.92514980496989" y1="-432.2099852185223"
y2="-414.37228215372727" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="346.76285286976486" x2="328.9251498049699" y1="-432.2099852185223"
y2="-414.37228215372727" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="602.7628528697649" x2="584.9251498049699" y1="-432.2099852185223"
y2="-414.37228215372727" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="90.76285286976488" x2="72.92514980496989" y1="-176.2099852185223"
y2="-158.3722821537273" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="346.76285286976486" x2="328.9251498049699" y1="-176.2099852185223"
y2="-158.3722821537273" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="602.7628528697649" x2="584.9251498049699" y1="-176.2099852185223"
y2="-158.3722821537273" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="90.76285286976488" x2="72.92514980496989" y1="79.79001478147771"
y2="97.6277178462727" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="346.76285286976486" x2="328.9251498049699" y1="79.79001478147771"
y2="97.6277178462727" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="602.7628528697649" x2="584.9251498049699" y1="79.79001478147771"
y2="97.6277178462727" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<animateTransform attributeName="transform" type="translate" values="0 0;-256 256"
keyTimes="0;1" repeatCount="indefinite" dur="5s"></animateTransform>
</g>
<g>
<line x1="93.6896305353637" x2="75.71575147590588" y1="83.83758835275793"
y2="101.81146741221576" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="93.6896305353637" x2="75.71575147590588" y1="-428.16241164724204"
y2="-410.18853258778427" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="349.6896305353637" x2="331.7157514759059" y1="-428.16241164724204"
y2="-410.18853258778427" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="605.6896305353637" x2="587.7157514759059" y1="-428.16241164724204"
y2="-410.18853258778427" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="93.6896305353637" x2="75.71575147590588" y1="-172.16241164724207"
y2="-154.18853258778424" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="349.6896305353637" x2="331.7157514759059" y1="-172.16241164724207"
y2="-154.18853258778424" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="605.6896305353637" x2="587.7157514759059" y1="-172.16241164724207"
y2="-154.18853258778424" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="93.6896305353637" x2="75.71575147590588" y1="83.83758835275793"
y2="101.81146741221576" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="349.6896305353637" x2="331.7157514759059" y1="83.83758835275793"
y2="101.81146741221576" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="605.6896305353637" x2="587.7157514759059" y1="83.83758835275793"
y2="101.81146741221576" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="207.24941141296466" x2="167.48134532138562" y1="234.55973050121918"
y2="274.3277965927982" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="207.24941141296466" x2="167.48134532138562" y1="-277.4402694987808"
y2="-237.67220340720178" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="463.24941141296466" x2="423.4813453213856" y1="-277.4402694987808"
y2="-237.67220340720178" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="719.2494114129647" x2="679.4813453213856" y1="-277.4402694987808"
y2="-237.67220340720178" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="207.24941141296466" x2="167.48134532138562" y1="-21.440269498780822"
y2="18.327796592798222" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="463.24941141296466" x2="423.4813453213856" y1="-21.440269498780822"
y2="18.327796592798222" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="719.2494114129647" x2="679.4813453213856" y1="-21.440269498780822"
y2="18.327796592798222" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="207.24941141296466" x2="167.48134532138562" y1="234.55973050121918"
y2="274.3277965927982" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="463.24941141296466" x2="423.4813453213856" y1="234.55973050121918"
y2="274.3277965927982" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="719.2494114129647" x2="679.4813453213856" y1="234.55973050121918"
y2="274.3277965927982" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="69.19671201083756" x2="20.15599089926107" y1="61.52941038272999"
y2="110.57013149430648" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="69.19671201083756" x2="20.15599089926107" y1="-450.47058961727"
y2="-401.42986850569355" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="325.1967120108376" x2="276.15599089926104" y1="-450.47058961727"
y2="-401.42986850569355" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="581.1967120108376" x2="532.155990899261" y1="-450.47058961727"
y2="-401.42986850569355" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="69.19671201083756" x2="20.15599089926107" y1="-194.47058961727"
y2="-145.42986850569352" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="325.1967120108376" x2="276.15599089926104" y1="-194.47058961727"
y2="-145.42986850569352" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="581.1967120108376" x2="532.155990899261" y1="-194.47058961727"
y2="-145.42986850569352" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="69.19671201083756" x2="20.15599089926107" y1="61.52941038272999"
y2="110.57013149430648" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="325.1967120108376" x2="276.15599089926104" y1="61.52941038272999"
y2="110.57013149430648" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="581.1967120108376" x2="532.155990899261" y1="61.52941038272999"
y2="110.57013149430648" stroke-width="15" stroke="#93dbe9" stroke-linecap="round"></line>
<line x1="153.36870174443493" x2="103.52218176454608" y1="129.93915864820679"
y2="179.78567862809564" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="153.36870174443493" x2="103.52218176454608" y1="-382.0608413517932"
y2="-332.21432137190436" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="409.36870174443493" x2="359.5221817645461" y1="-382.0608413517932"
y2="-332.21432137190436" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="665.3687017444349" x2="615.5221817645461" y1="-382.0608413517932"
y2="-332.21432137190436" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="153.36870174443493" x2="103.52218176454608" y1="-126.06084135179321"
y2="-76.21432137190436" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="409.36870174443493" x2="359.5221817645461" y1="-126.06084135179321"
y2="-76.21432137190436" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="665.3687017444349" x2="615.5221817645461" y1="-126.06084135179321"
y2="-76.21432137190436" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="153.36870174443493" x2="103.52218176454608" y1="129.93915864820679"
y2="179.78567862809564" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="409.36870174443493" x2="359.5221817645461" y1="129.93915864820679"
y2="179.78567862809564" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="665.3687017444349" x2="615.5221817645461" y1="129.93915864820679"
y2="179.78567862809564" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="49.20494471467643" x2="2.7142059537850685" y1="141.75997600855746"
y2="188.25071476944882" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="49.20494471467643" x2="2.7142059537850685" y1="-370.2400239914425"
y2="-323.7492852305512" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="305.20494471467646" x2="258.71420595378504" y1="-370.2400239914425"
y2="-323.7492852305512" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="561.2049447146765" x2="514.714205953785" y1="-370.2400239914425"
y2="-323.7492852305512" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="49.20494471467643" x2="2.7142059537850685" y1="-114.24002399144254"
y2="-67.74928523055118" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="305.20494471467646" x2="258.71420595378504" y1="-114.24002399144254"
y2="-67.74928523055118" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="561.2049447146765" x2="514.714205953785" y1="-114.24002399144254"
y2="-67.74928523055118" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="49.20494471467643" x2="2.7142059537850685" y1="141.75997600855746"
y2="188.25071476944882" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="305.20494471467646" x2="258.71420595378504" y1="141.75997600855746"
y2="188.25071476944882" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="561.2049447146765" x2="514.714205953785" y1="141.75997600855746"
y2="188.25071476944882" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="84.6808460539986" x2="32.68305955000314" y1="-7.711036017440037"
y2="44.28675048655542" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="84.6808460539986" x2="32.68305955000314" y1="-519.71103601744"
y2="-467.71324951344457" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="340.6808460539986" x2="288.6830595500031" y1="-519.71103601744"
y2="-467.71324951344457" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="596.6808460539986" x2="544.6830595500031" y1="-519.71103601744"
y2="-467.71324951344457" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="84.6808460539986" x2="32.68305955000314" y1="-263.71103601744005"
y2="-211.71324951344457" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="340.6808460539986" x2="288.6830595500031" y1="-263.71103601744005"
y2="-211.71324951344457" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="596.6808460539986" x2="544.6830595500031" y1="-263.71103601744005"
y2="-211.71324951344457" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="84.6808460539986" x2="32.68305955000314" y1="-7.711036017440037"
y2="44.28675048655542" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="340.6808460539986" x2="288.6830595500031" y1="-7.711036017440037"
y2="44.28675048655542" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="596.6808460539986" x2="544.6830595500031" y1="-7.711036017440037"
y2="44.28675048655542" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="84.6808460539986" x2="32.68305955000314" y1="248.28896398255995"
y2="300.28675048655543" stroke-width="15" stroke="#689cc5" stroke-linecap="round"></line>
<line x1="225.38342310559023" x2="185.66602314192056" y1="109.68961591653738"
y2="149.40701588020704" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="225.38342310559023" x2="185.66602314192056" y1="-402.3103840834626"
y2="-362.59298411979296" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="481.3834231055902" x2="441.66602314192056" y1="-402.3103840834626"
y2="-362.59298411979296" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="737.3834231055903" x2="697.6660231419205" y1="-402.3103840834626"
y2="-362.59298411979296" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="225.38342310559023" x2="185.66602314192056" y1="-146.31038408346262"
y2="-106.59298411979296" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="481.3834231055902" x2="441.66602314192056" y1="-146.31038408346262"
y2="-106.59298411979296" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="737.3834231055903" x2="697.6660231419205" y1="-146.31038408346262"
y2="-106.59298411979296" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="225.38342310559023" x2="185.66602314192056" y1="109.68961591653738"
y2="149.40701588020704" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="481.3834231055902" x2="441.66602314192056" y1="109.68961591653738"
y2="149.40701588020704" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="737.3834231055903" x2="697.6660231419205" y1="109.68961591653738"
y2="149.40701588020704" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="172.83662370669697" x2="103.52581079778793" y1="164.45975635392284"
y2="233.77056926283188" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="172.83662370669697" x2="103.52581079778793" y1="-347.54024364607716"
y2="-278.2294307371681" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="428.83662370669697" x2="359.5258107977879" y1="-347.54024364607716"
y2="-278.2294307371681" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="684.836623706697" x2="615.5258107977879" y1="-347.54024364607716"
y2="-278.2294307371681" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="172.83662370669697" x2="103.52581079778793" y1="-91.54024364607716"
y2="-22.229430737168116" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="428.83662370669697" x2="359.5258107977879" y1="-91.54024364607716"
y2="-22.229430737168116" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="684.836623706697" x2="615.5258107977879" y1="-91.54024364607716"
y2="-22.229430737168116" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="172.83662370669697" x2="103.52581079778793" y1="164.45975635392284"
y2="233.77056926283188" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="428.83662370669697" x2="359.5258107977879" y1="164.45975635392284"
y2="233.77056926283188" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="684.836623706697" x2="615.5258107977879" y1="164.45975635392284"
y2="233.77056926283188" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="254.85435949520382" x2="240.10841684705935" y1="-1.209429949430282"
y2="13.536512698714214" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="254.85435949520382" x2="240.10841684705935" y1="-513.2094299494303"
y2="-498.4634873012858" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="510.8543594952038" x2="496.10841684705935" y1="-513.2094299494303"
y2="-498.4634873012858" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="766.8543594952039" x2="752.1084168470593" y1="-513.2094299494303"
y2="-498.4634873012858" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="254.85435949520382" x2="240.10841684705935" y1="-257.2094299494303"
y2="-242.4634873012858" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="510.8543594952038" x2="496.10841684705935" y1="-257.2094299494303"
y2="-242.4634873012858" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="766.8543594952039" x2="752.1084168470593" y1="-257.2094299494303"
y2="-242.4634873012858" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="254.85435949520382" x2="240.10841684705935" y1="-1.209429949430282"
y2="13.536512698714214" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="510.8543594952038" x2="496.10841684705935" y1="-1.209429949430282"
y2="13.536512698714214" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="766.8543594952039" x2="752.1084168470593" y1="-1.209429949430282"
y2="13.536512698714214" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<line x1="254.85435949520382" x2="240.10841684705935" y1="254.79057005056973"
y2="269.5365126987142" stroke-width="15" stroke="#5e6fa3" stroke-linecap="round"></line>
<animateTransform attributeName="transform" type="translate" values="0 0;-256 256"
keyTimes="0;1" repeatCount="indefinite" dur="10.3333333333333335s"></animateTransform>
</g>
</g>
</pattern>
</defs>
<rect x="0" y="0" width="1084" height="322" fill="url(#pid-0.7735807359934106)"></rect>
</svg>

View file

@ -0,0 +1,874 @@
<svg id="canvas" height="100%" xmlns="http://www.w3.org/2000/svg" version="1.1"
xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.dev/svgjs"
viewBox="0 0 600 600">
<rect width="600" height="600" fill="transparent"></rect>
<mask id="mask" mask-type="alpha" maskUnits="userSpaceOnUse">
<rect transform="translate(0, 0)" width="600" height="600" fill="white"></rect>
</mask>
<svg>
<path transform="translate(0, 0) translate(30,30) rotate(90) translate(-30,-30)"
fill="#0096c7" fill-rule="evenodd"
d="M5.072.5H.83L.5.83v4.242L5.072.5zM.5 19.214v-4.242L14.972.5h4.242L.5 19.214zm0 14.142v-4.242L29.114.5h4.242L.5 33.356zM.5 47.5v-4.243L43.256.5H47.5L.5 47.499zM2.64 59.5H.5v-2.102L57.398.5H59.5v2.14L2.64 59.5zm14.143 0H12.54L59.5 12.54v4.243L16.783 59.5zm14.142 0h-4.242L59.5 26.683v4.242L30.925 59.5zm14.142 0h-4.242L59.5 40.825v4.242L45.067 59.5zm14.143 0h-4.243l4.533-4.533v4.243l-.29.29z"
clip-rule="evenodd"></path>
</svg>
<svg>
<path transform="translate(0, 60) translate(30,30) rotate(0) translate(-30,-30)"
fill="#0096c7" fill-rule="evenodd"
d="M5.072.5H.83L.5.83v4.242L5.072.5zM.5 19.214v-4.242L14.972.5h4.242L.5 19.214zm0 14.142v-4.242L29.114.5h4.242L.5 33.356zM.5 47.5v-4.243L43.256.5H47.5L.5 47.499zM2.64 59.5H.5v-2.102L57.398.5H59.5v2.14L2.64 59.5zm14.143 0H12.54L59.5 12.54v4.243L16.783 59.5zm14.142 0h-4.242L59.5 26.683v4.242L30.925 59.5zm14.142 0h-4.242L59.5 40.825v4.242L45.067 59.5zm14.143 0h-4.243l4.533-4.533v4.243l-.29.29z"
clip-rule="evenodd"></path>
</svg>
<svg>
<path transform="translate(0, 120) translate(30,30) rotate(180) translate(-30,-30)"
fill="#48cae4" fill-rule="evenodd"
d="M8.5.5h3v59h-3V.5zM18.5.5h3v59h-3V.5zM31.5.5h-3v59h3V.5zM38.5.5h3v59h-3V.5zM51.5.5h-3v59h3V.5z"
clip-rule="evenodd"></path>
</svg>
<svg>
<path transform="translate(0, 180) translate(30,30) rotate(0) translate(-30,-30)"
fill="#0096c7"
d="M11.122.5h-4.6A80.499 80.499 0 00.5 6.522v4.6A77.464 77.464 0 0111.122.5zM.5 29.168v-6.061A70.364 70.364 0 0123.107.5h6.06A67.297 67.297 0 00.5 29.168z"></path>
<path transform="translate(0, 180) translate(30,30) rotate(0) translate(-30,-30)"
fill="#0096c7"
d="M3.002 59.5H.5v-7.282C3.985 25.305 25.305 3.985 52.218.5H59.5v2.502C28.416 3.27 3.27 28.417 3.002 59.5z"></path>
<path transform="translate(0, 180) translate(30,30) rotate(0) translate(-30,-30)"
fill="#0096c7"
d="M13.003 59.5h-3c.266-27.218 22.28-49.23 49.497-49.498v3C33.94 13.27 13.269 33.94 13.003 59.5z"></path>
<path transform="translate(0, 180) translate(30,30) rotate(0) translate(-30,-30)"
fill="#0096c7"
d="M23.003 59.5h-3C20.27 37.805 37.805 20.269 59.5 20.003v3c-20.038.266-36.231 16.46-36.497 36.497z"></path>
<path transform="translate(0, 180) translate(30,30) rotate(0) translate(-30,-30)"
fill="#0096c7"
d="M33.005 59.5h-3c.263-16.172 13.323-29.232 29.495-29.496v3c-14.515.264-26.232 11.981-26.495 26.496z"></path>
<path transform="translate(0, 180) translate(30,30) rotate(0) translate(-30,-30)"
fill="#0096c7"
d="M43.007 59.5h-3c.26-10.648 8.845-19.233 19.493-19.494v3.001c-8.992.26-16.233 7.502-16.493 16.493zM53.018 59.5h-3.006a10 10 0 019.488-9.488v3.006a7.001 7.001 0 00-6.482 6.482z"></path>
</svg>
<svg>
<path transform="translate(0, 240) translate(30,30) rotate(180) translate(-30,-30)"
fill="#03045e"
d="M11.122.5h-4.6A80.499 80.499 0 00.5 6.522v4.6A77.464 77.464 0 0111.122.5zM.5 29.168v-6.061A70.364 70.364 0 0123.107.5h6.06A67.297 67.297 0 00.5 29.168z"></path>
<path transform="translate(0, 240) translate(30,30) rotate(180) translate(-30,-30)"
fill="#03045e"
d="M3.002 59.5H.5v-7.282C3.985 25.305 25.305 3.985 52.218.5H59.5v2.502C28.416 3.27 3.27 28.417 3.002 59.5z"></path>
<path transform="translate(0, 240) translate(30,30) rotate(180) translate(-30,-30)"
fill="#03045e"
d="M13.003 59.5h-3c.266-27.218 22.28-49.23 49.497-49.498v3C33.94 13.27 13.269 33.94 13.003 59.5z"></path>
<path transform="translate(0, 240) translate(30,30) rotate(180) translate(-30,-30)"
fill="#03045e"
d="M23.003 59.5h-3C20.27 37.805 37.805 20.269 59.5 20.003v3c-20.038.266-36.231 16.46-36.497 36.497z"></path>
<path transform="translate(0, 240) translate(30,30) rotate(180) translate(-30,-30)"
fill="#03045e"
d="M33.005 59.5h-3c.263-16.172 13.323-29.232 29.495-29.496v3c-14.515.264-26.232 11.981-26.495 26.496z"></path>
<path transform="translate(0, 240) translate(30,30) rotate(180) translate(-30,-30)"
fill="#03045e"
d="M43.007 59.5h-3c.26-10.648 8.845-19.233 19.493-19.494v3.001c-8.992.26-16.233 7.502-16.493 16.493zM53.018 59.5h-3.006a10 10 0 019.488-9.488v3.006a7.001 7.001 0 00-6.482 6.482z"></path>
</svg>
<svg>
<path transform="translate(0, 300) translate(30,30) rotate(90) translate(-30,-30)"
fill="#90e0ef" fill-rule="evenodd"
d="M5.072.5H.83L.5.83v4.242L5.072.5zM.5 19.214v-4.242L14.972.5h4.242L.5 19.214zm0 14.142v-4.242L29.114.5h4.242L.5 33.356zM.5 47.5v-4.243L43.256.5H47.5L.5 47.499zM2.64 59.5H.5v-2.102L57.398.5H59.5v2.14L2.64 59.5zm14.143 0H12.54L59.5 12.54v4.243L16.783 59.5zm14.142 0h-4.242L59.5 26.683v4.242L30.925 59.5zm14.142 0h-4.242L59.5 40.825v4.242L45.067 59.5zm14.143 0h-4.243l4.533-4.533v4.243l-.29.29z"
clip-rule="evenodd"></path>
</svg>
<svg>
<path transform="translate(0, 360) translate(30,30) rotate(0) translate(-30,-30)"
fill="#0077b6" fill-rule="evenodd"
d="M59.5 11.218V7.74A59.602 59.602 0 0037.782.5H22.218A59.602 59.602 0 00.5 7.74v3.478C9.106 6.002 19.202 3 30 3c10.798 0 20.894 3.002 29.5 8.218zm0 8.408A49.775 49.775 0 0030 10 49.775 49.775 0 00.5 19.626v3.783A46.803 46.803 0 0130 13a46.803 46.803 0 0129.5 10.409v-3.783zm0 13.36C52.187 25.004 41.678 20 30 20S7.813 25.004.5 32.986v4.678C7.256 28.754 17.956 23 30 23s22.744 5.755 29.5 14.664v-4.678zm0 21.53C56.923 40.567 44.696 30 30 30S3.077 40.566.5 54.517V59.5h2.505C3.27 44.819 15.255 33 30 33c14.745 0 26.729 11.819 26.995 26.5H59.5v-4.983zM49.994 59.5C49.728 48.685 40.879 40 30 40c-10.878 0-19.729 8.685-19.994 19.5h3.001C13.272 50.342 20.778 43 30 43c9.222 0 16.728 7.342 16.993 16.5h3zm-10.006 0C39.728 54.21 35.355 50 30 50c-5.355 0-9.727 4.21-9.988 9.5h3.006a7 7 0 0113.964 0h3.006z"
clip-rule="evenodd"></path>
</svg>
<svg>
<path transform="translate(0, 420) translate(30,30) rotate(270) translate(-30,-30)"
fill="#00b4d8" fill-rule="evenodd"
d="M5.072.5H.83L.5.83v4.242L5.072.5zM.5 19.214v-4.242L14.972.5h4.242L.5 19.214zm0 14.142v-4.242L29.114.5h4.242L.5 33.356zM.5 47.5v-4.243L43.256.5H47.5L.5 47.499zM2.64 59.5H.5v-2.102L57.398.5H59.5v2.14L2.64 59.5zm14.143 0H12.54L59.5 12.54v4.243L16.783 59.5zm14.142 0h-4.242L59.5 26.683v4.242L30.925 59.5zm14.142 0h-4.242L59.5 40.825v4.242L45.067 59.5zm14.143 0h-4.243l4.533-4.533v4.243l-.29.29z"
clip-rule="evenodd"></path>
</svg>
<svg>
<path transform="translate(0, 480) translate(30,30) rotate(180) translate(-30,-30)"
fill="#00b4d8" fill-rule="evenodd"
d="M8.5.5h3v59h-3V.5zM18.5.5h3v59h-3V.5zM31.5.5h-3v59h3V.5zM38.5.5h3v59h-3V.5zM51.5.5h-3v59h3V.5z"
clip-rule="evenodd"></path>
</svg>
<svg>
<path transform="translate(0, 540) translate(30,30) rotate(90) translate(-30,-30)"
fill="#00b4d8" fill-rule="evenodd"
d="M8.5.5h3v59h-3V.5zM18.5.5h3v59h-3V.5zM31.5.5h-3v59h3V.5zM38.5.5h3v59h-3V.5zM51.5.5h-3v59h3V.5z"
clip-rule="evenodd"></path>
</svg>
<svg>
<path transform="translate(60, 0) translate(30,30) rotate(0) translate(-30,-30)"
fill="#90e0ef" fill-rule="evenodd"
d="M59.5 11.218V7.74A59.602 59.602 0 0037.782.5H22.218A59.602 59.602 0 00.5 7.74v3.478C9.106 6.002 19.202 3 30 3c10.798 0 20.894 3.002 29.5 8.218zm0 8.408A49.775 49.775 0 0030 10 49.775 49.775 0 00.5 19.626v3.783A46.803 46.803 0 0130 13a46.803 46.803 0 0129.5 10.409v-3.783zm0 13.36C52.187 25.004 41.678 20 30 20S7.813 25.004.5 32.986v4.678C7.256 28.754 17.956 23 30 23s22.744 5.755 29.5 14.664v-4.678zm0 21.53C56.923 40.567 44.696 30 30 30S3.077 40.566.5 54.517V59.5h2.505C3.27 44.819 15.255 33 30 33c14.745 0 26.729 11.819 26.995 26.5H59.5v-4.983zM49.994 59.5C49.728 48.685 40.879 40 30 40c-10.878 0-19.729 8.685-19.994 19.5h3.001C13.272 50.342 20.778 43 30 43c9.222 0 16.728 7.342 16.993 16.5h3zm-10.006 0C39.728 54.21 35.355 50 30 50c-5.355 0-9.727 4.21-9.988 9.5h3.006a7 7 0 0113.964 0h3.006z"
clip-rule="evenodd"></path>
</svg>
<svg>
<path transform="translate(60, 60) translate(30,30) rotate(180) translate(-30,-30)"
fill="#023e8a" fill-rule="evenodd"
d="M8.5.5h3v59h-3V.5zM18.5.5h3v59h-3V.5zM31.5.5h-3v59h3V.5zM38.5.5h3v59h-3V.5zM51.5.5h-3v59h3V.5z"
clip-rule="evenodd"></path>
</svg>
<svg>
<path transform="translate(60, 120) translate(30,30) rotate(90) translate(-30,-30)"
fill="#03045e" fill-rule="evenodd"
d="M5.072.5H.83L.5.83v4.242L5.072.5zM.5 19.214v-4.242L14.972.5h4.242L.5 19.214zm0 14.142v-4.242L29.114.5h4.242L.5 33.356zM.5 47.5v-4.243L43.256.5H47.5L.5 47.499zM2.64 59.5H.5v-2.102L57.398.5H59.5v2.14L2.64 59.5zm14.143 0H12.54L59.5 12.54v4.243L16.783 59.5zm14.142 0h-4.242L59.5 26.683v4.242L30.925 59.5zm14.142 0h-4.242L59.5 40.825v4.242L45.067 59.5zm14.143 0h-4.243l4.533-4.533v4.243l-.29.29z"
clip-rule="evenodd"></path>
</svg>
<svg>
<path transform="translate(60, 180) translate(30,30) rotate(180) translate(-30,-30)"
fill="#0096c7"
d="M11.122.5h-4.6A80.499 80.499 0 00.5 6.522v4.6A77.464 77.464 0 0111.122.5zM.5 29.168v-6.061A70.364 70.364 0 0123.107.5h6.06A67.297 67.297 0 00.5 29.168z"></path>
<path transform="translate(60, 180) translate(30,30) rotate(180) translate(-30,-30)"
fill="#0096c7"
d="M3.002 59.5H.5v-7.282C3.985 25.305 25.305 3.985 52.218.5H59.5v2.502C28.416 3.27 3.27 28.417 3.002 59.5z"></path>
<path transform="translate(60, 180) translate(30,30) rotate(180) translate(-30,-30)"
fill="#0096c7"
d="M13.003 59.5h-3c.266-27.218 22.28-49.23 49.497-49.498v3C33.94 13.27 13.269 33.94 13.003 59.5z"></path>
<path transform="translate(60, 180) translate(30,30) rotate(180) translate(-30,-30)"
fill="#0096c7"
d="M23.003 59.5h-3C20.27 37.805 37.805 20.269 59.5 20.003v3c-20.038.266-36.231 16.46-36.497 36.497z"></path>
<path transform="translate(60, 180) translate(30,30) rotate(180) translate(-30,-30)"
fill="#0096c7"
d="M33.005 59.5h-3c.263-16.172 13.323-29.232 29.495-29.496v3c-14.515.264-26.232 11.981-26.495 26.496z"></path>
<path transform="translate(60, 180) translate(30,30) rotate(180) translate(-30,-30)"
fill="#0096c7"
d="M43.007 59.5h-3c.26-10.648 8.845-19.233 19.493-19.494v3.001c-8.992.26-16.233 7.502-16.493 16.493zM53.018 59.5h-3.006a10 10 0 019.488-9.488v3.006a7.001 7.001 0 00-6.482 6.482z"></path>
</svg>
<svg>
<path transform="translate(60, 240) translate(30,30) rotate(270) translate(-30,-30)"
fill="#023e8a" fill-rule="evenodd"
d="M5.072.5H.83L.5.83v4.242L5.072.5zM.5 19.214v-4.242L14.972.5h4.242L.5 19.214zm0 14.142v-4.242L29.114.5h4.242L.5 33.356zM.5 47.5v-4.243L43.256.5H47.5L.5 47.499zM2.64 59.5H.5v-2.102L57.398.5H59.5v2.14L2.64 59.5zm14.143 0H12.54L59.5 12.54v4.243L16.783 59.5zm14.142 0h-4.242L59.5 26.683v4.242L30.925 59.5zm14.142 0h-4.242L59.5 40.825v4.242L45.067 59.5zm14.143 0h-4.243l4.533-4.533v4.243l-.29.29z"
clip-rule="evenodd"></path>
</svg>
<svg>
<path transform="translate(60, 300) translate(30,30) rotate(180) translate(-30,-30)"
fill="#90e0ef" fill-rule="evenodd"
d="M5.072.5H.83L.5.83v4.242L5.072.5zM.5 19.214v-4.242L14.972.5h4.242L.5 19.214zm0 14.142v-4.242L29.114.5h4.242L.5 33.356zM.5 47.5v-4.243L43.256.5H47.5L.5 47.499zM2.64 59.5H.5v-2.102L57.398.5H59.5v2.14L2.64 59.5zm14.143 0H12.54L59.5 12.54v4.243L16.783 59.5zm14.142 0h-4.242L59.5 26.683v4.242L30.925 59.5zm14.142 0h-4.242L59.5 40.825v4.242L45.067 59.5zm14.143 0h-4.243l4.533-4.533v4.243l-.29.29z"
clip-rule="evenodd"></path>
</svg>
<svg>
<path transform="translate(60, 360) translate(30,30) rotate(270) translate(-30,-30)"
fill="#90e0ef"
d="M11.122.5h-4.6A80.499 80.499 0 00.5 6.522v4.6A77.464 77.464 0 0111.122.5zM.5 29.168v-6.061A70.364 70.364 0 0123.107.5h6.06A67.297 67.297 0 00.5 29.168z"></path>
<path transform="translate(60, 360) translate(30,30) rotate(270) translate(-30,-30)"
fill="#90e0ef"
d="M3.002 59.5H.5v-7.282C3.985 25.305 25.305 3.985 52.218.5H59.5v2.502C28.416 3.27 3.27 28.417 3.002 59.5z"></path>
<path transform="translate(60, 360) translate(30,30) rotate(270) translate(-30,-30)"
fill="#90e0ef"
d="M13.003 59.5h-3c.266-27.218 22.28-49.23 49.497-49.498v3C33.94 13.27 13.269 33.94 13.003 59.5z"></path>
<path transform="translate(60, 360) translate(30,30) rotate(270) translate(-30,-30)"
fill="#90e0ef"
d="M23.003 59.5h-3C20.27 37.805 37.805 20.269 59.5 20.003v3c-20.038.266-36.231 16.46-36.497 36.497z"></path>
<path transform="translate(60, 360) translate(30,30) rotate(270) translate(-30,-30)"
fill="#90e0ef"
d="M33.005 59.5h-3c.263-16.172 13.323-29.232 29.495-29.496v3c-14.515.264-26.232 11.981-26.495 26.496z"></path>
<path transform="translate(60, 360) translate(30,30) rotate(270) translate(-30,-30)"
fill="#90e0ef"
d="M43.007 59.5h-3c.26-10.648 8.845-19.233 19.493-19.494v3.001c-8.992.26-16.233 7.502-16.493 16.493zM53.018 59.5h-3.006a10 10 0 019.488-9.488v3.006a7.001 7.001 0 00-6.482 6.482z"></path>
</svg>
<svg>
<path transform="translate(60, 420) translate(30,30) rotate(0) translate(-30,-30)"
fill="#00b4d8" fill-rule="evenodd"
d="M8.5.5h3v59h-3V.5zM18.5.5h3v59h-3V.5zM31.5.5h-3v59h3V.5zM38.5.5h3v59h-3V.5zM51.5.5h-3v59h3V.5z"
clip-rule="evenodd"></path>
</svg>
<svg>
<path transform="translate(60, 480) translate(30,30) rotate(180) translate(-30,-30)"
fill="#0096c7" fill-rule="evenodd"
d="M5.072.5H.83L.5.83v4.242L5.072.5zM.5 19.214v-4.242L14.972.5h4.242L.5 19.214zm0 14.142v-4.242L29.114.5h4.242L.5 33.356zM.5 47.5v-4.243L43.256.5H47.5L.5 47.499zM2.64 59.5H.5v-2.102L57.398.5H59.5v2.14L2.64 59.5zm14.143 0H12.54L59.5 12.54v4.243L16.783 59.5zm14.142 0h-4.242L59.5 26.683v4.242L30.925 59.5zm14.142 0h-4.242L59.5 40.825v4.242L45.067 59.5zm14.143 0h-4.243l4.533-4.533v4.243l-.29.29z"
clip-rule="evenodd"></path>
</svg>
<svg>
<path transform="translate(60, 540) translate(30,30) rotate(90) translate(-30,-30)"
fill="#ade8f4" fill-rule="evenodd"
d="M59.5 11.218V7.74A59.602 59.602 0 0037.782.5H22.218A59.602 59.602 0 00.5 7.74v3.478C9.106 6.002 19.202 3 30 3c10.798 0 20.894 3.002 29.5 8.218zm0 8.408A49.775 49.775 0 0030 10 49.775 49.775 0 00.5 19.626v3.783A46.803 46.803 0 0130 13a46.803 46.803 0 0129.5 10.409v-3.783zm0 13.36C52.187 25.004 41.678 20 30 20S7.813 25.004.5 32.986v4.678C7.256 28.754 17.956 23 30 23s22.744 5.755 29.5 14.664v-4.678zm0 21.53C56.923 40.567 44.696 30 30 30S3.077 40.566.5 54.517V59.5h2.505C3.27 44.819 15.255 33 30 33c14.745 0 26.729 11.819 26.995 26.5H59.5v-4.983zM49.994 59.5C49.728 48.685 40.879 40 30 40c-10.878 0-19.729 8.685-19.994 19.5h3.001C13.272 50.342 20.778 43 30 43c9.222 0 16.728 7.342 16.993 16.5h3zm-10.006 0C39.728 54.21 35.355 50 30 50c-5.355 0-9.727 4.21-9.988 9.5h3.006a7 7 0 0113.964 0h3.006z"
clip-rule="evenodd"></path>
</svg>
<svg>
<path transform="translate(120, 0) translate(30,30) rotate(0) translate(-30,-30)"
fill="#023e8a"
d="M11.122.5h-4.6A80.499 80.499 0 00.5 6.522v4.6A77.464 77.464 0 0111.122.5zM.5 29.168v-6.061A70.364 70.364 0 0123.107.5h6.06A67.297 67.297 0 00.5 29.168z"></path>
<path transform="translate(120, 0) translate(30,30) rotate(0) translate(-30,-30)"
fill="#023e8a"
d="M3.002 59.5H.5v-7.282C3.985 25.305 25.305 3.985 52.218.5H59.5v2.502C28.416 3.27 3.27 28.417 3.002 59.5z"></path>
<path transform="translate(120, 0) translate(30,30) rotate(0) translate(-30,-30)"
fill="#023e8a"
d="M13.003 59.5h-3c.266-27.218 22.28-49.23 49.497-49.498v3C33.94 13.27 13.269 33.94 13.003 59.5z"></path>
<path transform="translate(120, 0) translate(30,30) rotate(0) translate(-30,-30)"
fill="#023e8a"
d="M23.003 59.5h-3C20.27 37.805 37.805 20.269 59.5 20.003v3c-20.038.266-36.231 16.46-36.497 36.497z"></path>
<path transform="translate(120, 0) translate(30,30) rotate(0) translate(-30,-30)"
fill="#023e8a"
d="M33.005 59.5h-3c.263-16.172 13.323-29.232 29.495-29.496v3c-14.515.264-26.232 11.981-26.495 26.496z"></path>
<path transform="translate(120, 0) translate(30,30) rotate(0) translate(-30,-30)"
fill="#023e8a"
d="M43.007 59.5h-3c.26-10.648 8.845-19.233 19.493-19.494v3.001c-8.992.26-16.233 7.502-16.493 16.493zM53.018 59.5h-3.006a10 10 0 019.488-9.488v3.006a7.001 7.001 0 00-6.482 6.482z"></path>
</svg>
<svg>
<path transform="translate(120, 60) translate(30,30) rotate(270) translate(-30,-30)"
fill="#03045e" fill-rule="evenodd"
d="M5.072.5H.83L.5.83v4.242L5.072.5zM.5 19.214v-4.242L14.972.5h4.242L.5 19.214zm0 14.142v-4.242L29.114.5h4.242L.5 33.356zM.5 47.5v-4.243L43.256.5H47.5L.5 47.499zM2.64 59.5H.5v-2.102L57.398.5H59.5v2.14L2.64 59.5zm14.143 0H12.54L59.5 12.54v4.243L16.783 59.5zm14.142 0h-4.242L59.5 26.683v4.242L30.925 59.5zm14.142 0h-4.242L59.5 40.825v4.242L45.067 59.5zm14.143 0h-4.243l4.533-4.533v4.243l-.29.29z"
clip-rule="evenodd"></path>
</svg>
<svg>
<path transform="translate(120, 120) translate(30,30) rotate(0) translate(-30,-30)"
fill="#48cae4" fill-rule="evenodd"
d="M5.072.5H.83L.5.83v4.242L5.072.5zM.5 19.214v-4.242L14.972.5h4.242L.5 19.214zm0 14.142v-4.242L29.114.5h4.242L.5 33.356zM.5 47.5v-4.243L43.256.5H47.5L.5 47.499zM2.64 59.5H.5v-2.102L57.398.5H59.5v2.14L2.64 59.5zm14.143 0H12.54L59.5 12.54v4.243L16.783 59.5zm14.142 0h-4.242L59.5 26.683v4.242L30.925 59.5zm14.142 0h-4.242L59.5 40.825v4.242L45.067 59.5zm14.143 0h-4.243l4.533-4.533v4.243l-.29.29z"
clip-rule="evenodd"></path>
</svg>
<svg>
<path transform="translate(120, 180) translate(30,30) rotate(180) translate(-30,-30)"
fill="#48cae4" fill-rule="evenodd"
d="M8.5.5h3v59h-3V.5zM18.5.5h3v59h-3V.5zM31.5.5h-3v59h3V.5zM38.5.5h3v59h-3V.5zM51.5.5h-3v59h3V.5z"
clip-rule="evenodd"></path>
</svg>
<svg>
<path transform="translate(120, 240) translate(30,30) rotate(0) translate(-30,-30)"
fill="#00b4d8" fill-rule="evenodd"
d="M59.5 11.218V7.74A59.602 59.602 0 0037.782.5H22.218A59.602 59.602 0 00.5 7.74v3.478C9.106 6.002 19.202 3 30 3c10.798 0 20.894 3.002 29.5 8.218zm0 8.408A49.775 49.775 0 0030 10 49.775 49.775 0 00.5 19.626v3.783A46.803 46.803 0 0130 13a46.803 46.803 0 0129.5 10.409v-3.783zm0 13.36C52.187 25.004 41.678 20 30 20S7.813 25.004.5 32.986v4.678C7.256 28.754 17.956 23 30 23s22.744 5.755 29.5 14.664v-4.678zm0 21.53C56.923 40.567 44.696 30 30 30S3.077 40.566.5 54.517V59.5h2.505C3.27 44.819 15.255 33 30 33c14.745 0 26.729 11.819 26.995 26.5H59.5v-4.983zM49.994 59.5C49.728 48.685 40.879 40 30 40c-10.878 0-19.729 8.685-19.994 19.5h3.001C13.272 50.342 20.778 43 30 43c9.222 0 16.728 7.342 16.993 16.5h3zm-10.006 0C39.728 54.21 35.355 50 30 50c-5.355 0-9.727 4.21-9.988 9.5h3.006a7 7 0 0113.964 0h3.006z"
clip-rule="evenodd"></path>
</svg>
<svg>
<path transform="translate(120, 300) translate(30,30) rotate(270) translate(-30,-30)"
fill="#ade8f4" fill-rule="evenodd"
d="M5.072.5H.83L.5.83v4.242L5.072.5zM.5 19.214v-4.242L14.972.5h4.242L.5 19.214zm0 14.142v-4.242L29.114.5h4.242L.5 33.356zM.5 47.5v-4.243L43.256.5H47.5L.5 47.499zM2.64 59.5H.5v-2.102L57.398.5H59.5v2.14L2.64 59.5zm14.143 0H12.54L59.5 12.54v4.243L16.783 59.5zm14.142 0h-4.242L59.5 26.683v4.242L30.925 59.5zm14.142 0h-4.242L59.5 40.825v4.242L45.067 59.5zm14.143 0h-4.243l4.533-4.533v4.243l-.29.29z"
clip-rule="evenodd"></path>
</svg>
<svg>
<path transform="translate(120, 360) translate(30,30) rotate(90) translate(-30,-30)"
fill="#48cae4" fill-rule="evenodd"
d="M8.5.5h3v59h-3V.5zM18.5.5h3v59h-3V.5zM31.5.5h-3v59h3V.5zM38.5.5h3v59h-3V.5zM51.5.5h-3v59h3V.5z"
clip-rule="evenodd"></path>
</svg>
<svg>
<path transform="translate(120, 420) translate(30,30) rotate(180) translate(-30,-30)"
fill="#90e0ef" fill-rule="evenodd"
d="M59.5 11.218V7.74A59.602 59.602 0 0037.782.5H22.218A59.602 59.602 0 00.5 7.74v3.478C9.106 6.002 19.202 3 30 3c10.798 0 20.894 3.002 29.5 8.218zm0 8.408A49.775 49.775 0 0030 10 49.775 49.775 0 00.5 19.626v3.783A46.803 46.803 0 0130 13a46.803 46.803 0 0129.5 10.409v-3.783zm0 13.36C52.187 25.004 41.678 20 30 20S7.813 25.004.5 32.986v4.678C7.256 28.754 17.956 23 30 23s22.744 5.755 29.5 14.664v-4.678zm0 21.53C56.923 40.567 44.696 30 30 30S3.077 40.566.5 54.517V59.5h2.505C3.27 44.819 15.255 33 30 33c14.745 0 26.729 11.819 26.995 26.5H59.5v-4.983zM49.994 59.5C49.728 48.685 40.879 40 30 40c-10.878 0-19.729 8.685-19.994 19.5h3.001C13.272 50.342 20.778 43 30 43c9.222 0 16.728 7.342 16.993 16.5h3zm-10.006 0C39.728 54.21 35.355 50 30 50c-5.355 0-9.727 4.21-9.988 9.5h3.006a7 7 0 0113.964 0h3.006z"
clip-rule="evenodd"></path>
</svg>
<svg>
<path transform="translate(120, 480) translate(30,30) rotate(270) translate(-30,-30)"
fill="#90e0ef" fill-rule="evenodd"
d="M8.5.5h3v59h-3V.5zM18.5.5h3v59h-3V.5zM31.5.5h-3v59h3V.5zM38.5.5h3v59h-3V.5zM51.5.5h-3v59h3V.5z"
clip-rule="evenodd"></path>
</svg>
<svg>
<path transform="translate(120, 540) translate(30,30) rotate(270) translate(-30,-30)"
fill="#ade8f4" fill-rule="evenodd"
d="M8.5.5h3v59h-3V.5zM18.5.5h3v59h-3V.5zM31.5.5h-3v59h3V.5zM38.5.5h3v59h-3V.5zM51.5.5h-3v59h3V.5z"
clip-rule="evenodd"></path>
</svg>
<svg>
<path transform="translate(180, 0) translate(30,30) rotate(180) translate(-30,-30)"
fill="#023e8a" fill-rule="evenodd"
d="M59.5 11.218V7.74A59.602 59.602 0 0037.782.5H22.218A59.602 59.602 0 00.5 7.74v3.478C9.106 6.002 19.202 3 30 3c10.798 0 20.894 3.002 29.5 8.218zm0 8.408A49.775 49.775 0 0030 10 49.775 49.775 0 00.5 19.626v3.783A46.803 46.803 0 0130 13a46.803 46.803 0 0129.5 10.409v-3.783zm0 13.36C52.187 25.004 41.678 20 30 20S7.813 25.004.5 32.986v4.678C7.256 28.754 17.956 23 30 23s22.744 5.755 29.5 14.664v-4.678zm0 21.53C56.923 40.567 44.696 30 30 30S3.077 40.566.5 54.517V59.5h2.505C3.27 44.819 15.255 33 30 33c14.745 0 26.729 11.819 26.995 26.5H59.5v-4.983zM49.994 59.5C49.728 48.685 40.879 40 30 40c-10.878 0-19.729 8.685-19.994 19.5h3.001C13.272 50.342 20.778 43 30 43c9.222 0 16.728 7.342 16.993 16.5h3zm-10.006 0C39.728 54.21 35.355 50 30 50c-5.355 0-9.727 4.21-9.988 9.5h3.006a7 7 0 0113.964 0h3.006z"
clip-rule="evenodd"></path>
</svg>
<svg>
<path transform="translate(180, 60) translate(30,30) rotate(180) translate(-30,-30)"
fill="#023e8a" fill-rule="evenodd"
d="M59.5 11.218V7.74A59.602 59.602 0 0037.782.5H22.218A59.602 59.602 0 00.5 7.74v3.478C9.106 6.002 19.202 3 30 3c10.798 0 20.894 3.002 29.5 8.218zm0 8.408A49.775 49.775 0 0030 10 49.775 49.775 0 00.5 19.626v3.783A46.803 46.803 0 0130 13a46.803 46.803 0 0129.5 10.409v-3.783zm0 13.36C52.187 25.004 41.678 20 30 20S7.813 25.004.5 32.986v4.678C7.256 28.754 17.956 23 30 23s22.744 5.755 29.5 14.664v-4.678zm0 21.53C56.923 40.567 44.696 30 30 30S3.077 40.566.5 54.517V59.5h2.505C3.27 44.819 15.255 33 30 33c14.745 0 26.729 11.819 26.995 26.5H59.5v-4.983zM49.994 59.5C49.728 48.685 40.879 40 30 40c-10.878 0-19.729 8.685-19.994 19.5h3.001C13.272 50.342 20.778 43 30 43c9.222 0 16.728 7.342 16.993 16.5h3zm-10.006 0C39.728 54.21 35.355 50 30 50c-5.355 0-9.727 4.21-9.988 9.5h3.006a7 7 0 0113.964 0h3.006z"
clip-rule="evenodd"></path>
</svg>
<svg>
<path transform="translate(180, 120) translate(30,30) rotate(0) translate(-30,-30)"
fill="#48cae4" fill-rule="evenodd"
d="M8.5.5h3v59h-3V.5zM18.5.5h3v59h-3V.5zM31.5.5h-3v59h3V.5zM38.5.5h3v59h-3V.5zM51.5.5h-3v59h3V.5z"
clip-rule="evenodd"></path>
</svg>
<svg>
<path transform="translate(180, 180) translate(30,30) rotate(180) translate(-30,-30)"
fill="#48cae4" fill-rule="evenodd"
d="M5.072.5H.83L.5.83v4.242L5.072.5zM.5 19.214v-4.242L14.972.5h4.242L.5 19.214zm0 14.142v-4.242L29.114.5h4.242L.5 33.356zM.5 47.5v-4.243L43.256.5H47.5L.5 47.499zM2.64 59.5H.5v-2.102L57.398.5H59.5v2.14L2.64 59.5zm14.143 0H12.54L59.5 12.54v4.243L16.783 59.5zm14.142 0h-4.242L59.5 26.683v4.242L30.925 59.5zm14.142 0h-4.242L59.5 40.825v4.242L45.067 59.5zm14.143 0h-4.243l4.533-4.533v4.243l-.29.29z"
clip-rule="evenodd"></path>
</svg>
<svg>
<path transform="translate(180, 240) translate(30,30) rotate(180) translate(-30,-30)"
fill="#00b4d8" fill-rule="evenodd"
d="M8.5.5h3v59h-3V.5zM18.5.5h3v59h-3V.5zM31.5.5h-3v59h3V.5zM38.5.5h3v59h-3V.5zM51.5.5h-3v59h3V.5z"
clip-rule="evenodd"></path>
</svg>
<svg>
<path transform="translate(180, 300) translate(30,30) rotate(180) translate(-30,-30)"
fill="#48cae4" fill-rule="evenodd"
d="M8.5.5h3v59h-3V.5zM18.5.5h3v59h-3V.5zM31.5.5h-3v59h3V.5zM38.5.5h3v59h-3V.5zM51.5.5h-3v59h3V.5z"
clip-rule="evenodd"></path>
</svg>
<svg>
<path transform="translate(180, 360) translate(30,30) rotate(270) translate(-30,-30)"
fill="#0077b6" fill-rule="evenodd"
d="M59.5 11.218V7.74A59.602 59.602 0 0037.782.5H22.218A59.602 59.602 0 00.5 7.74v3.478C9.106 6.002 19.202 3 30 3c10.798 0 20.894 3.002 29.5 8.218zm0 8.408A49.775 49.775 0 0030 10 49.775 49.775 0 00.5 19.626v3.783A46.803 46.803 0 0130 13a46.803 46.803 0 0129.5 10.409v-3.783zm0 13.36C52.187 25.004 41.678 20 30 20S7.813 25.004.5 32.986v4.678C7.256 28.754 17.956 23 30 23s22.744 5.755 29.5 14.664v-4.678zm0 21.53C56.923 40.567 44.696 30 30 30S3.077 40.566.5 54.517V59.5h2.505C3.27 44.819 15.255 33 30 33c14.745 0 26.729 11.819 26.995 26.5H59.5v-4.983zM49.994 59.5C49.728 48.685 40.879 40 30 40c-10.878 0-19.729 8.685-19.994 19.5h3.001C13.272 50.342 20.778 43 30 43c9.222 0 16.728 7.342 16.993 16.5h3zm-10.006 0C39.728 54.21 35.355 50 30 50c-5.355 0-9.727 4.21-9.988 9.5h3.006a7 7 0 0113.964 0h3.006z"
clip-rule="evenodd"></path>
</svg>
<svg>
<path transform="translate(180, 420) translate(30,30) rotate(90) translate(-30,-30)"
fill="#ade8f4" fill-rule="evenodd"
d="M5.072.5H.83L.5.83v4.242L5.072.5zM.5 19.214v-4.242L14.972.5h4.242L.5 19.214zm0 14.142v-4.242L29.114.5h4.242L.5 33.356zM.5 47.5v-4.243L43.256.5H47.5L.5 47.499zM2.64 59.5H.5v-2.102L57.398.5H59.5v2.14L2.64 59.5zm14.143 0H12.54L59.5 12.54v4.243L16.783 59.5zm14.142 0h-4.242L59.5 26.683v4.242L30.925 59.5zm14.142 0h-4.242L59.5 40.825v4.242L45.067 59.5zm14.143 0h-4.243l4.533-4.533v4.243l-.29.29z"
clip-rule="evenodd"></path>
</svg>
<svg>
<path transform="translate(180, 480) translate(30,30) rotate(90) translate(-30,-30)"
fill="#00b4d8" fill-rule="evenodd"
d="M8.5.5h3v59h-3V.5zM18.5.5h3v59h-3V.5zM31.5.5h-3v59h3V.5zM38.5.5h3v59h-3V.5zM51.5.5h-3v59h3V.5z"
clip-rule="evenodd"></path>
</svg>
<svg>
<path transform="translate(180, 540) translate(30,30) rotate(0) translate(-30,-30)"
fill="#00b4d8" fill-rule="evenodd"
d="M59.5 11.218V7.74A59.602 59.602 0 0037.782.5H22.218A59.602 59.602 0 00.5 7.74v3.478C9.106 6.002 19.202 3 30 3c10.798 0 20.894 3.002 29.5 8.218zm0 8.408A49.775 49.775 0 0030 10 49.775 49.775 0 00.5 19.626v3.783A46.803 46.803 0 0130 13a46.803 46.803 0 0129.5 10.409v-3.783zm0 13.36C52.187 25.004 41.678 20 30 20S7.813 25.004.5 32.986v4.678C7.256 28.754 17.956 23 30 23s22.744 5.755 29.5 14.664v-4.678zm0 21.53C56.923 40.567 44.696 30 30 30S3.077 40.566.5 54.517V59.5h2.505C3.27 44.819 15.255 33 30 33c14.745 0 26.729 11.819 26.995 26.5H59.5v-4.983zM49.994 59.5C49.728 48.685 40.879 40 30 40c-10.878 0-19.729 8.685-19.994 19.5h3.001C13.272 50.342 20.778 43 30 43c9.222 0 16.728 7.342 16.993 16.5h3zm-10.006 0C39.728 54.21 35.355 50 30 50c-5.355 0-9.727 4.21-9.988 9.5h3.006a7 7 0 0113.964 0h3.006z"
clip-rule="evenodd"></path>
</svg>
<svg>
<path transform="translate(240, 0) translate(30,30) rotate(180) translate(-30,-30)"
fill="#03045e" fill-rule="evenodd"
d="M5.072.5H.83L.5.83v4.242L5.072.5zM.5 19.214v-4.242L14.972.5h4.242L.5 19.214zm0 14.142v-4.242L29.114.5h4.242L.5 33.356zM.5 47.5v-4.243L43.256.5H47.5L.5 47.499zM2.64 59.5H.5v-2.102L57.398.5H59.5v2.14L2.64 59.5zm14.143 0H12.54L59.5 12.54v4.243L16.783 59.5zm14.142 0h-4.242L59.5 26.683v4.242L30.925 59.5zm14.142 0h-4.242L59.5 40.825v4.242L45.067 59.5zm14.143 0h-4.243l4.533-4.533v4.243l-.29.29z"
clip-rule="evenodd"></path>
</svg>
<svg>
<path transform="translate(240, 60) translate(30,30) rotate(270) translate(-30,-30)"
fill="#00b4d8" fill-rule="evenodd"
d="M59.5 11.218V7.74A59.602 59.602 0 0037.782.5H22.218A59.602 59.602 0 00.5 7.74v3.478C9.106 6.002 19.202 3 30 3c10.798 0 20.894 3.002 29.5 8.218zm0 8.408A49.775 49.775 0 0030 10 49.775 49.775 0 00.5 19.626v3.783A46.803 46.803 0 0130 13a46.803 46.803 0 0129.5 10.409v-3.783zm0 13.36C52.187 25.004 41.678 20 30 20S7.813 25.004.5 32.986v4.678C7.256 28.754 17.956 23 30 23s22.744 5.755 29.5 14.664v-4.678zm0 21.53C56.923 40.567 44.696 30 30 30S3.077 40.566.5 54.517V59.5h2.505C3.27 44.819 15.255 33 30 33c14.745 0 26.729 11.819 26.995 26.5H59.5v-4.983zM49.994 59.5C49.728 48.685 40.879 40 30 40c-10.878 0-19.729 8.685-19.994 19.5h3.001C13.272 50.342 20.778 43 30 43c9.222 0 16.728 7.342 16.993 16.5h3zm-10.006 0C39.728 54.21 35.355 50 30 50c-5.355 0-9.727 4.21-9.988 9.5h3.006a7 7 0 0113.964 0h3.006z"
clip-rule="evenodd"></path>
</svg>
<svg>
<path transform="translate(240, 120) translate(30,30) rotate(180) translate(-30,-30)"
fill="#90e0ef" fill-rule="evenodd"
d="M59.5 11.218V7.74A59.602 59.602 0 0037.782.5H22.218A59.602 59.602 0 00.5 7.74v3.478C9.106 6.002 19.202 3 30 3c10.798 0 20.894 3.002 29.5 8.218zm0 8.408A49.775 49.775 0 0030 10 49.775 49.775 0 00.5 19.626v3.783A46.803 46.803 0 0130 13a46.803 46.803 0 0129.5 10.409v-3.783zm0 13.36C52.187 25.004 41.678 20 30 20S7.813 25.004.5 32.986v4.678C7.256 28.754 17.956 23 30 23s22.744 5.755 29.5 14.664v-4.678zm0 21.53C56.923 40.567 44.696 30 30 30S3.077 40.566.5 54.517V59.5h2.505C3.27 44.819 15.255 33 30 33c14.745 0 26.729 11.819 26.995 26.5H59.5v-4.983zM49.994 59.5C49.728 48.685 40.879 40 30 40c-10.878 0-19.729 8.685-19.994 19.5h3.001C13.272 50.342 20.778 43 30 43c9.222 0 16.728 7.342 16.993 16.5h3zm-10.006 0C39.728 54.21 35.355 50 30 50c-5.355 0-9.727 4.21-9.988 9.5h3.006a7 7 0 0113.964 0h3.006z"
clip-rule="evenodd"></path>
</svg>
<svg>
<path transform="translate(240, 180) translate(30,30) rotate(270) translate(-30,-30)"
fill="#00b4d8" fill-rule="evenodd"
d="M5.072.5H.83L.5.83v4.242L5.072.5zM.5 19.214v-4.242L14.972.5h4.242L.5 19.214zm0 14.142v-4.242L29.114.5h4.242L.5 33.356zM.5 47.5v-4.243L43.256.5H47.5L.5 47.499zM2.64 59.5H.5v-2.102L57.398.5H59.5v2.14L2.64 59.5zm14.143 0H12.54L59.5 12.54v4.243L16.783 59.5zm14.142 0h-4.242L59.5 26.683v4.242L30.925 59.5zm14.142 0h-4.242L59.5 40.825v4.242L45.067 59.5zm14.143 0h-4.243l4.533-4.533v4.243l-.29.29z"
clip-rule="evenodd"></path>
</svg>
<svg>
<path transform="translate(240, 240) translate(30,30) rotate(0) translate(-30,-30)"
fill="#00b4d8"
d="M11.122.5h-4.6A80.499 80.499 0 00.5 6.522v4.6A77.464 77.464 0 0111.122.5zM.5 29.168v-6.061A70.364 70.364 0 0123.107.5h6.06A67.297 67.297 0 00.5 29.168z"></path>
<path transform="translate(240, 240) translate(30,30) rotate(0) translate(-30,-30)"
fill="#00b4d8"
d="M3.002 59.5H.5v-7.282C3.985 25.305 25.305 3.985 52.218.5H59.5v2.502C28.416 3.27 3.27 28.417 3.002 59.5z"></path>
<path transform="translate(240, 240) translate(30,30) rotate(0) translate(-30,-30)"
fill="#00b4d8"
d="M13.003 59.5h-3c.266-27.218 22.28-49.23 49.497-49.498v3C33.94 13.27 13.269 33.94 13.003 59.5z"></path>
<path transform="translate(240, 240) translate(30,30) rotate(0) translate(-30,-30)"
fill="#00b4d8"
d="M23.003 59.5h-3C20.27 37.805 37.805 20.269 59.5 20.003v3c-20.038.266-36.231 16.46-36.497 36.497z"></path>
<path transform="translate(240, 240) translate(30,30) rotate(0) translate(-30,-30)"
fill="#00b4d8"
d="M33.005 59.5h-3c.263-16.172 13.323-29.232 29.495-29.496v3c-14.515.264-26.232 11.981-26.495 26.496z"></path>
<path transform="translate(240, 240) translate(30,30) rotate(0) translate(-30,-30)"
fill="#00b4d8"
d="M43.007 59.5h-3c.26-10.648 8.845-19.233 19.493-19.494v3.001c-8.992.26-16.233 7.502-16.493 16.493zM53.018 59.5h-3.006a10 10 0 019.488-9.488v3.006a7.001 7.001 0 00-6.482 6.482z"></path>
</svg>
<svg>
<path transform="translate(240, 300) translate(30,30) rotate(0) translate(-30,-30)"
fill="#90e0ef" fill-rule="evenodd"
d="M8.5.5h3v59h-3V.5zM18.5.5h3v59h-3V.5zM31.5.5h-3v59h3V.5zM38.5.5h3v59h-3V.5zM51.5.5h-3v59h3V.5z"
clip-rule="evenodd"></path>
</svg>
<svg>
<path transform="translate(240, 360) translate(30,30) rotate(270) translate(-30,-30)"
fill="#ade8f4" fill-rule="evenodd"
d="M8.5.5h3v59h-3V.5zM18.5.5h3v59h-3V.5zM31.5.5h-3v59h3V.5zM38.5.5h3v59h-3V.5zM51.5.5h-3v59h3V.5z"
clip-rule="evenodd"></path>
</svg>
<svg>
<path transform="translate(240, 420) translate(30,30) rotate(180) translate(-30,-30)"
fill="#0096c7"
d="M11.122.5h-4.6A80.499 80.499 0 00.5 6.522v4.6A77.464 77.464 0 0111.122.5zM.5 29.168v-6.061A70.364 70.364 0 0123.107.5h6.06A67.297 67.297 0 00.5 29.168z"></path>
<path transform="translate(240, 420) translate(30,30) rotate(180) translate(-30,-30)"
fill="#0096c7"
d="M3.002 59.5H.5v-7.282C3.985 25.305 25.305 3.985 52.218.5H59.5v2.502C28.416 3.27 3.27 28.417 3.002 59.5z"></path>
<path transform="translate(240, 420) translate(30,30) rotate(180) translate(-30,-30)"
fill="#0096c7"
d="M13.003 59.5h-3c.266-27.218 22.28-49.23 49.497-49.498v3C33.94 13.27 13.269 33.94 13.003 59.5z"></path>
<path transform="translate(240, 420) translate(30,30) rotate(180) translate(-30,-30)"
fill="#0096c7"
d="M23.003 59.5h-3C20.27 37.805 37.805 20.269 59.5 20.003v3c-20.038.266-36.231 16.46-36.497 36.497z"></path>
<path transform="translate(240, 420) translate(30,30) rotate(180) translate(-30,-30)"
fill="#0096c7"
d="M33.005 59.5h-3c.263-16.172 13.323-29.232 29.495-29.496v3c-14.515.264-26.232 11.981-26.495 26.496z"></path>
<path transform="translate(240, 420) translate(30,30) rotate(180) translate(-30,-30)"
fill="#0096c7"
d="M43.007 59.5h-3c.26-10.648 8.845-19.233 19.493-19.494v3.001c-8.992.26-16.233 7.502-16.493 16.493zM53.018 59.5h-3.006a10 10 0 019.488-9.488v3.006a7.001 7.001 0 00-6.482 6.482z"></path>
</svg>
<svg>
<path transform="translate(240, 480) translate(30,30) rotate(90) translate(-30,-30)"
fill="#0077b6" fill-rule="evenodd"
d="M59.5 11.218V7.74A59.602 59.602 0 0037.782.5H22.218A59.602 59.602 0 00.5 7.74v3.478C9.106 6.002 19.202 3 30 3c10.798 0 20.894 3.002 29.5 8.218zm0 8.408A49.775 49.775 0 0030 10 49.775 49.775 0 00.5 19.626v3.783A46.803 46.803 0 0130 13a46.803 46.803 0 0129.5 10.409v-3.783zm0 13.36C52.187 25.004 41.678 20 30 20S7.813 25.004.5 32.986v4.678C7.256 28.754 17.956 23 30 23s22.744 5.755 29.5 14.664v-4.678zm0 21.53C56.923 40.567 44.696 30 30 30S3.077 40.566.5 54.517V59.5h2.505C3.27 44.819 15.255 33 30 33c14.745 0 26.729 11.819 26.995 26.5H59.5v-4.983zM49.994 59.5C49.728 48.685 40.879 40 30 40c-10.878 0-19.729 8.685-19.994 19.5h3.001C13.272 50.342 20.778 43 30 43c9.222 0 16.728 7.342 16.993 16.5h3zm-10.006 0C39.728 54.21 35.355 50 30 50c-5.355 0-9.727 4.21-9.988 9.5h3.006a7 7 0 0113.964 0h3.006z"
clip-rule="evenodd"></path>
</svg>
<svg>
<path transform="translate(240, 540) translate(30,30) rotate(0) translate(-30,-30)"
fill="#023e8a" fill-rule="evenodd"
d="M59.5 11.218V7.74A59.602 59.602 0 0037.782.5H22.218A59.602 59.602 0 00.5 7.74v3.478C9.106 6.002 19.202 3 30 3c10.798 0 20.894 3.002 29.5 8.218zm0 8.408A49.775 49.775 0 0030 10 49.775 49.775 0 00.5 19.626v3.783A46.803 46.803 0 0130 13a46.803 46.803 0 0129.5 10.409v-3.783zm0 13.36C52.187 25.004 41.678 20 30 20S7.813 25.004.5 32.986v4.678C7.256 28.754 17.956 23 30 23s22.744 5.755 29.5 14.664v-4.678zm0 21.53C56.923 40.567 44.696 30 30 30S3.077 40.566.5 54.517V59.5h2.505C3.27 44.819 15.255 33 30 33c14.745 0 26.729 11.819 26.995 26.5H59.5v-4.983zM49.994 59.5C49.728 48.685 40.879 40 30 40c-10.878 0-19.729 8.685-19.994 19.5h3.001C13.272 50.342 20.778 43 30 43c9.222 0 16.728 7.342 16.993 16.5h3zm-10.006 0C39.728 54.21 35.355 50 30 50c-5.355 0-9.727 4.21-9.988 9.5h3.006a7 7 0 0113.964 0h3.006z"
clip-rule="evenodd"></path>
</svg>
<svg>
<path transform="translate(300, 0) translate(30,30) rotate(90) translate(-30,-30)"
fill="#48cae4"
d="M11.122.5h-4.6A80.499 80.499 0 00.5 6.522v4.6A77.464 77.464 0 0111.122.5zM.5 29.168v-6.061A70.364 70.364 0 0123.107.5h6.06A67.297 67.297 0 00.5 29.168z"></path>
<path transform="translate(300, 0) translate(30,30) rotate(90) translate(-30,-30)"
fill="#48cae4"
d="M3.002 59.5H.5v-7.282C3.985 25.305 25.305 3.985 52.218.5H59.5v2.502C28.416 3.27 3.27 28.417 3.002 59.5z"></path>
<path transform="translate(300, 0) translate(30,30) rotate(90) translate(-30,-30)"
fill="#48cae4"
d="M13.003 59.5h-3c.266-27.218 22.28-49.23 49.497-49.498v3C33.94 13.27 13.269 33.94 13.003 59.5z"></path>
<path transform="translate(300, 0) translate(30,30) rotate(90) translate(-30,-30)"
fill="#48cae4"
d="M23.003 59.5h-3C20.27 37.805 37.805 20.269 59.5 20.003v3c-20.038.266-36.231 16.46-36.497 36.497z"></path>
<path transform="translate(300, 0) translate(30,30) rotate(90) translate(-30,-30)"
fill="#48cae4"
d="M33.005 59.5h-3c.263-16.172 13.323-29.232 29.495-29.496v3c-14.515.264-26.232 11.981-26.495 26.496z"></path>
<path transform="translate(300, 0) translate(30,30) rotate(90) translate(-30,-30)"
fill="#48cae4"
d="M43.007 59.5h-3c.26-10.648 8.845-19.233 19.493-19.494v3.001c-8.992.26-16.233 7.502-16.493 16.493zM53.018 59.5h-3.006a10 10 0 019.488-9.488v3.006a7.001 7.001 0 00-6.482 6.482z"></path>
</svg>
<svg>
<path transform="translate(300, 60) translate(30,30) rotate(270) translate(-30,-30)"
fill="#023e8a" fill-rule="evenodd"
d="M59.5 11.218V7.74A59.602 59.602 0 0037.782.5H22.218A59.602 59.602 0 00.5 7.74v3.478C9.106 6.002 19.202 3 30 3c10.798 0 20.894 3.002 29.5 8.218zm0 8.408A49.775 49.775 0 0030 10 49.775 49.775 0 00.5 19.626v3.783A46.803 46.803 0 0130 13a46.803 46.803 0 0129.5 10.409v-3.783zm0 13.36C52.187 25.004 41.678 20 30 20S7.813 25.004.5 32.986v4.678C7.256 28.754 17.956 23 30 23s22.744 5.755 29.5 14.664v-4.678zm0 21.53C56.923 40.567 44.696 30 30 30S3.077 40.566.5 54.517V59.5h2.505C3.27 44.819 15.255 33 30 33c14.745 0 26.729 11.819 26.995 26.5H59.5v-4.983zM49.994 59.5C49.728 48.685 40.879 40 30 40c-10.878 0-19.729 8.685-19.994 19.5h3.001C13.272 50.342 20.778 43 30 43c9.222 0 16.728 7.342 16.993 16.5h3zm-10.006 0C39.728 54.21 35.355 50 30 50c-5.355 0-9.727 4.21-9.988 9.5h3.006a7 7 0 0113.964 0h3.006z"
clip-rule="evenodd"></path>
</svg>
<svg>
<path transform="translate(300, 120) translate(30,30) rotate(90) translate(-30,-30)"
fill="#ade8f4" fill-rule="evenodd"
d="M8.5.5h3v59h-3V.5zM18.5.5h3v59h-3V.5zM31.5.5h-3v59h3V.5zM38.5.5h3v59h-3V.5zM51.5.5h-3v59h3V.5z"
clip-rule="evenodd"></path>
</svg>
<svg>
<path transform="translate(300, 180) translate(30,30) rotate(180) translate(-30,-30)"
fill="#90e0ef" fill-rule="evenodd"
d="M59.5 11.218V7.74A59.602 59.602 0 0037.782.5H22.218A59.602 59.602 0 00.5 7.74v3.478C9.106 6.002 19.202 3 30 3c10.798 0 20.894 3.002 29.5 8.218zm0 8.408A49.775 49.775 0 0030 10 49.775 49.775 0 00.5 19.626v3.783A46.803 46.803 0 0130 13a46.803 46.803 0 0129.5 10.409v-3.783zm0 13.36C52.187 25.004 41.678 20 30 20S7.813 25.004.5 32.986v4.678C7.256 28.754 17.956 23 30 23s22.744 5.755 29.5 14.664v-4.678zm0 21.53C56.923 40.567 44.696 30 30 30S3.077 40.566.5 54.517V59.5h2.505C3.27 44.819 15.255 33 30 33c14.745 0 26.729 11.819 26.995 26.5H59.5v-4.983zM49.994 59.5C49.728 48.685 40.879 40 30 40c-10.878 0-19.729 8.685-19.994 19.5h3.001C13.272 50.342 20.778 43 30 43c9.222 0 16.728 7.342 16.993 16.5h3zm-10.006 0C39.728 54.21 35.355 50 30 50c-5.355 0-9.727 4.21-9.988 9.5h3.006a7 7 0 0113.964 0h3.006z"
clip-rule="evenodd"></path>
</svg>
<svg>
<path transform="translate(300, 240) translate(30,30) rotate(0) translate(-30,-30)"
fill="#0077b6" fill-rule="evenodd"
d="M5.072.5H.83L.5.83v4.242L5.072.5zM.5 19.214v-4.242L14.972.5h4.242L.5 19.214zm0 14.142v-4.242L29.114.5h4.242L.5 33.356zM.5 47.5v-4.243L43.256.5H47.5L.5 47.499zM2.64 59.5H.5v-2.102L57.398.5H59.5v2.14L2.64 59.5zm14.143 0H12.54L59.5 12.54v4.243L16.783 59.5zm14.142 0h-4.242L59.5 26.683v4.242L30.925 59.5zm14.142 0h-4.242L59.5 40.825v4.242L45.067 59.5zm14.143 0h-4.243l4.533-4.533v4.243l-.29.29z"
clip-rule="evenodd"></path>
</svg>
<svg>
<path transform="translate(300, 300) translate(30,30) rotate(180) translate(-30,-30)"
fill="#0077b6" fill-rule="evenodd"
d="M5.072.5H.83L.5.83v4.242L5.072.5zM.5 19.214v-4.242L14.972.5h4.242L.5 19.214zm0 14.142v-4.242L29.114.5h4.242L.5 33.356zM.5 47.5v-4.243L43.256.5H47.5L.5 47.499zM2.64 59.5H.5v-2.102L57.398.5H59.5v2.14L2.64 59.5zm14.143 0H12.54L59.5 12.54v4.243L16.783 59.5zm14.142 0h-4.242L59.5 26.683v4.242L30.925 59.5zm14.142 0h-4.242L59.5 40.825v4.242L45.067 59.5zm14.143 0h-4.243l4.533-4.533v4.243l-.29.29z"
clip-rule="evenodd"></path>
</svg>
<svg>
<path transform="translate(300, 360) translate(30,30) rotate(0) translate(-30,-30)"
fill="#48cae4" fill-rule="evenodd"
d="M5.072.5H.83L.5.83v4.242L5.072.5zM.5 19.214v-4.242L14.972.5h4.242L.5 19.214zm0 14.142v-4.242L29.114.5h4.242L.5 33.356zM.5 47.5v-4.243L43.256.5H47.5L.5 47.499zM2.64 59.5H.5v-2.102L57.398.5H59.5v2.14L2.64 59.5zm14.143 0H12.54L59.5 12.54v4.243L16.783 59.5zm14.142 0h-4.242L59.5 26.683v4.242L30.925 59.5zm14.142 0h-4.242L59.5 40.825v4.242L45.067 59.5zm14.143 0h-4.243l4.533-4.533v4.243l-.29.29z"
clip-rule="evenodd"></path>
</svg>
<svg>
<path transform="translate(300, 420) translate(30,30) rotate(0) translate(-30,-30)"
fill="#0077b6" fill-rule="evenodd"
d="M8.5.5h3v59h-3V.5zM18.5.5h3v59h-3V.5zM31.5.5h-3v59h3V.5zM38.5.5h3v59h-3V.5zM51.5.5h-3v59h3V.5z"
clip-rule="evenodd"></path>
</svg>
<svg>
<path transform="translate(300, 480) translate(30,30) rotate(90) translate(-30,-30)"
fill="#caf0f8" fill-rule="evenodd"
d="M8.5.5h3v59h-3V.5zM18.5.5h3v59h-3V.5zM31.5.5h-3v59h3V.5zM38.5.5h3v59h-3V.5zM51.5.5h-3v59h3V.5z"
clip-rule="evenodd"></path>
</svg>
<svg>
<path transform="translate(300, 540) translate(30,30) rotate(180) translate(-30,-30)"
fill="#00b4d8" fill-rule="evenodd"
d="M8.5.5h3v59h-3V.5zM18.5.5h3v59h-3V.5zM31.5.5h-3v59h3V.5zM38.5.5h3v59h-3V.5zM51.5.5h-3v59h3V.5z"
clip-rule="evenodd"></path>
</svg>
<svg>
<path transform="translate(360, 0) translate(30,30) rotate(180) translate(-30,-30)"
fill="#0096c7"
d="M11.122.5h-4.6A80.499 80.499 0 00.5 6.522v4.6A77.464 77.464 0 0111.122.5zM.5 29.168v-6.061A70.364 70.364 0 0123.107.5h6.06A67.297 67.297 0 00.5 29.168z"></path>
<path transform="translate(360, 0) translate(30,30) rotate(180) translate(-30,-30)"
fill="#0096c7"
d="M3.002 59.5H.5v-7.282C3.985 25.305 25.305 3.985 52.218.5H59.5v2.502C28.416 3.27 3.27 28.417 3.002 59.5z"></path>
<path transform="translate(360, 0) translate(30,30) rotate(180) translate(-30,-30)"
fill="#0096c7"
d="M13.003 59.5h-3c.266-27.218 22.28-49.23 49.497-49.498v3C33.94 13.27 13.269 33.94 13.003 59.5z"></path>
<path transform="translate(360, 0) translate(30,30) rotate(180) translate(-30,-30)"
fill="#0096c7"
d="M23.003 59.5h-3C20.27 37.805 37.805 20.269 59.5 20.003v3c-20.038.266-36.231 16.46-36.497 36.497z"></path>
<path transform="translate(360, 0) translate(30,30) rotate(180) translate(-30,-30)"
fill="#0096c7"
d="M33.005 59.5h-3c.263-16.172 13.323-29.232 29.495-29.496v3c-14.515.264-26.232 11.981-26.495 26.496z"></path>
<path transform="translate(360, 0) translate(30,30) rotate(180) translate(-30,-30)"
fill="#0096c7"
d="M43.007 59.5h-3c.26-10.648 8.845-19.233 19.493-19.494v3.001c-8.992.26-16.233 7.502-16.493 16.493zM53.018 59.5h-3.006a10 10 0 019.488-9.488v3.006a7.001 7.001 0 00-6.482 6.482z"></path>
</svg>
<svg>
<path transform="translate(360, 60) translate(30,30) rotate(180) translate(-30,-30)"
fill="#0077b6" fill-rule="evenodd"
d="M59.5 11.218V7.74A59.602 59.602 0 0037.782.5H22.218A59.602 59.602 0 00.5 7.74v3.478C9.106 6.002 19.202 3 30 3c10.798 0 20.894 3.002 29.5 8.218zm0 8.408A49.775 49.775 0 0030 10 49.775 49.775 0 00.5 19.626v3.783A46.803 46.803 0 0130 13a46.803 46.803 0 0129.5 10.409v-3.783zm0 13.36C52.187 25.004 41.678 20 30 20S7.813 25.004.5 32.986v4.678C7.256 28.754 17.956 23 30 23s22.744 5.755 29.5 14.664v-4.678zm0 21.53C56.923 40.567 44.696 30 30 30S3.077 40.566.5 54.517V59.5h2.505C3.27 44.819 15.255 33 30 33c14.745 0 26.729 11.819 26.995 26.5H59.5v-4.983zM49.994 59.5C49.728 48.685 40.879 40 30 40c-10.878 0-19.729 8.685-19.994 19.5h3.001C13.272 50.342 20.778 43 30 43c9.222 0 16.728 7.342 16.993 16.5h3zm-10.006 0C39.728 54.21 35.355 50 30 50c-5.355 0-9.727 4.21-9.988 9.5h3.006a7 7 0 0113.964 0h3.006z"
clip-rule="evenodd"></path>
</svg>
<svg>
<path transform="translate(360, 120) translate(30,30) rotate(0) translate(-30,-30)"
fill="#90e0ef"
d="M11.122.5h-4.6A80.499 80.499 0 00.5 6.522v4.6A77.464 77.464 0 0111.122.5zM.5 29.168v-6.061A70.364 70.364 0 0123.107.5h6.06A67.297 67.297 0 00.5 29.168z"></path>
<path transform="translate(360, 120) translate(30,30) rotate(0) translate(-30,-30)"
fill="#90e0ef"
d="M3.002 59.5H.5v-7.282C3.985 25.305 25.305 3.985 52.218.5H59.5v2.502C28.416 3.27 3.27 28.417 3.002 59.5z"></path>
<path transform="translate(360, 120) translate(30,30) rotate(0) translate(-30,-30)"
fill="#90e0ef"
d="M13.003 59.5h-3c.266-27.218 22.28-49.23 49.497-49.498v3C33.94 13.27 13.269 33.94 13.003 59.5z"></path>
<path transform="translate(360, 120) translate(30,30) rotate(0) translate(-30,-30)"
fill="#90e0ef"
d="M23.003 59.5h-3C20.27 37.805 37.805 20.269 59.5 20.003v3c-20.038.266-36.231 16.46-36.497 36.497z"></path>
<path transform="translate(360, 120) translate(30,30) rotate(0) translate(-30,-30)"
fill="#90e0ef"
d="M33.005 59.5h-3c.263-16.172 13.323-29.232 29.495-29.496v3c-14.515.264-26.232 11.981-26.495 26.496z"></path>
<path transform="translate(360, 120) translate(30,30) rotate(0) translate(-30,-30)"
fill="#90e0ef"
d="M43.007 59.5h-3c.26-10.648 8.845-19.233 19.493-19.494v3.001c-8.992.26-16.233 7.502-16.493 16.493zM53.018 59.5h-3.006a10 10 0 019.488-9.488v3.006a7.001 7.001 0 00-6.482 6.482z"></path>
</svg>
<svg>
<path transform="translate(360, 180) translate(30,30) rotate(180) translate(-30,-30)"
fill="#caf0f8" fill-rule="evenodd"
d="M5.072.5H.83L.5.83v4.242L5.072.5zM.5 19.214v-4.242L14.972.5h4.242L.5 19.214zm0 14.142v-4.242L29.114.5h4.242L.5 33.356zM.5 47.5v-4.243L43.256.5H47.5L.5 47.499zM2.64 59.5H.5v-2.102L57.398.5H59.5v2.14L2.64 59.5zm14.143 0H12.54L59.5 12.54v4.243L16.783 59.5zm14.142 0h-4.242L59.5 26.683v4.242L30.925 59.5zm14.142 0h-4.242L59.5 40.825v4.242L45.067 59.5zm14.143 0h-4.243l4.533-4.533v4.243l-.29.29z"
clip-rule="evenodd"></path>
</svg>
<svg>
<path transform="translate(360, 240) translate(30,30) rotate(90) translate(-30,-30)"
fill="#ade8f4" fill-rule="evenodd"
d="M5.072.5H.83L.5.83v4.242L5.072.5zM.5 19.214v-4.242L14.972.5h4.242L.5 19.214zm0 14.142v-4.242L29.114.5h4.242L.5 33.356zM.5 47.5v-4.243L43.256.5H47.5L.5 47.499zM2.64 59.5H.5v-2.102L57.398.5H59.5v2.14L2.64 59.5zm14.143 0H12.54L59.5 12.54v4.243L16.783 59.5zm14.142 0h-4.242L59.5 26.683v4.242L30.925 59.5zm14.142 0h-4.242L59.5 40.825v4.242L45.067 59.5zm14.143 0h-4.243l4.533-4.533v4.243l-.29.29z"
clip-rule="evenodd"></path>
</svg>
<svg>
<path transform="translate(360, 300) translate(30,30) rotate(90) translate(-30,-30)"
fill="#00b4d8"
d="M11.122.5h-4.6A80.499 80.499 0 00.5 6.522v4.6A77.464 77.464 0 0111.122.5zM.5 29.168v-6.061A70.364 70.364 0 0123.107.5h6.06A67.297 67.297 0 00.5 29.168z"></path>
<path transform="translate(360, 300) translate(30,30) rotate(90) translate(-30,-30)"
fill="#00b4d8"
d="M3.002 59.5H.5v-7.282C3.985 25.305 25.305 3.985 52.218.5H59.5v2.502C28.416 3.27 3.27 28.417 3.002 59.5z"></path>
<path transform="translate(360, 300) translate(30,30) rotate(90) translate(-30,-30)"
fill="#00b4d8"
d="M13.003 59.5h-3c.266-27.218 22.28-49.23 49.497-49.498v3C33.94 13.27 13.269 33.94 13.003 59.5z"></path>
<path transform="translate(360, 300) translate(30,30) rotate(90) translate(-30,-30)"
fill="#00b4d8"
d="M23.003 59.5h-3C20.27 37.805 37.805 20.269 59.5 20.003v3c-20.038.266-36.231 16.46-36.497 36.497z"></path>
<path transform="translate(360, 300) translate(30,30) rotate(90) translate(-30,-30)"
fill="#00b4d8"
d="M33.005 59.5h-3c.263-16.172 13.323-29.232 29.495-29.496v3c-14.515.264-26.232 11.981-26.495 26.496z"></path>
<path transform="translate(360, 300) translate(30,30) rotate(90) translate(-30,-30)"
fill="#00b4d8"
d="M43.007 59.5h-3c.26-10.648 8.845-19.233 19.493-19.494v3.001c-8.992.26-16.233 7.502-16.493 16.493zM53.018 59.5h-3.006a10 10 0 019.488-9.488v3.006a7.001 7.001 0 00-6.482 6.482z"></path>
</svg>
<svg>
<path transform="translate(360, 360) translate(30,30) rotate(90) translate(-30,-30)"
fill="#0096c7" fill-rule="evenodd"
d="M5.072.5H.83L.5.83v4.242L5.072.5zM.5 19.214v-4.242L14.972.5h4.242L.5 19.214zm0 14.142v-4.242L29.114.5h4.242L.5 33.356zM.5 47.5v-4.243L43.256.5H47.5L.5 47.499zM2.64 59.5H.5v-2.102L57.398.5H59.5v2.14L2.64 59.5zm14.143 0H12.54L59.5 12.54v4.243L16.783 59.5zm14.142 0h-4.242L59.5 26.683v4.242L30.925 59.5zm14.142 0h-4.242L59.5 40.825v4.242L45.067 59.5zm14.143 0h-4.243l4.533-4.533v4.243l-.29.29z"
clip-rule="evenodd"></path>
</svg>
<svg>
<path transform="translate(360, 420) translate(30,30) rotate(270) translate(-30,-30)"
fill="#0077b6" fill-rule="evenodd"
d="M59.5 11.218V7.74A59.602 59.602 0 0037.782.5H22.218A59.602 59.602 0 00.5 7.74v3.478C9.106 6.002 19.202 3 30 3c10.798 0 20.894 3.002 29.5 8.218zm0 8.408A49.775 49.775 0 0030 10 49.775 49.775 0 00.5 19.626v3.783A46.803 46.803 0 0130 13a46.803 46.803 0 0129.5 10.409v-3.783zm0 13.36C52.187 25.004 41.678 20 30 20S7.813 25.004.5 32.986v4.678C7.256 28.754 17.956 23 30 23s22.744 5.755 29.5 14.664v-4.678zm0 21.53C56.923 40.567 44.696 30 30 30S3.077 40.566.5 54.517V59.5h2.505C3.27 44.819 15.255 33 30 33c14.745 0 26.729 11.819 26.995 26.5H59.5v-4.983zM49.994 59.5C49.728 48.685 40.879 40 30 40c-10.878 0-19.729 8.685-19.994 19.5h3.001C13.272 50.342 20.778 43 30 43c9.222 0 16.728 7.342 16.993 16.5h3zm-10.006 0C39.728 54.21 35.355 50 30 50c-5.355 0-9.727 4.21-9.988 9.5h3.006a7 7 0 0113.964 0h3.006z"
clip-rule="evenodd"></path>
</svg>
<svg>
<path transform="translate(360, 480) translate(30,30) rotate(180) translate(-30,-30)"
fill="#023e8a" fill-rule="evenodd"
d="M8.5.5h3v59h-3V.5zM18.5.5h3v59h-3V.5zM31.5.5h-3v59h3V.5zM38.5.5h3v59h-3V.5zM51.5.5h-3v59h3V.5z"
clip-rule="evenodd"></path>
</svg>
<svg>
<path transform="translate(360, 540) translate(30,30) rotate(180) translate(-30,-30)"
fill="#023e8a" fill-rule="evenodd"
d="M59.5 11.218V7.74A59.602 59.602 0 0037.782.5H22.218A59.602 59.602 0 00.5 7.74v3.478C9.106 6.002 19.202 3 30 3c10.798 0 20.894 3.002 29.5 8.218zm0 8.408A49.775 49.775 0 0030 10 49.775 49.775 0 00.5 19.626v3.783A46.803 46.803 0 0130 13a46.803 46.803 0 0129.5 10.409v-3.783zm0 13.36C52.187 25.004 41.678 20 30 20S7.813 25.004.5 32.986v4.678C7.256 28.754 17.956 23 30 23s22.744 5.755 29.5 14.664v-4.678zm0 21.53C56.923 40.567 44.696 30 30 30S3.077 40.566.5 54.517V59.5h2.505C3.27 44.819 15.255 33 30 33c14.745 0 26.729 11.819 26.995 26.5H59.5v-4.983zM49.994 59.5C49.728 48.685 40.879 40 30 40c-10.878 0-19.729 8.685-19.994 19.5h3.001C13.272 50.342 20.778 43 30 43c9.222 0 16.728 7.342 16.993 16.5h3zm-10.006 0C39.728 54.21 35.355 50 30 50c-5.355 0-9.727 4.21-9.988 9.5h3.006a7 7 0 0113.964 0h3.006z"
clip-rule="evenodd"></path>
</svg>
<svg>
<path transform="translate(420, 0) translate(30,30) rotate(270) translate(-30,-30)"
fill="#90e0ef" fill-rule="evenodd"
d="M5.072.5H.83L.5.83v4.242L5.072.5zM.5 19.214v-4.242L14.972.5h4.242L.5 19.214zm0 14.142v-4.242L29.114.5h4.242L.5 33.356zM.5 47.5v-4.243L43.256.5H47.5L.5 47.499zM2.64 59.5H.5v-2.102L57.398.5H59.5v2.14L2.64 59.5zm14.143 0H12.54L59.5 12.54v4.243L16.783 59.5zm14.142 0h-4.242L59.5 26.683v4.242L30.925 59.5zm14.142 0h-4.242L59.5 40.825v4.242L45.067 59.5zm14.143 0h-4.243l4.533-4.533v4.243l-.29.29z"
clip-rule="evenodd"></path>
</svg>
<svg>
<path transform="translate(420, 60) translate(30,30) rotate(180) translate(-30,-30)"
fill="#90e0ef" fill-rule="evenodd"
d="M5.072.5H.83L.5.83v4.242L5.072.5zM.5 19.214v-4.242L14.972.5h4.242L.5 19.214zm0 14.142v-4.242L29.114.5h4.242L.5 33.356zM.5 47.5v-4.243L43.256.5H47.5L.5 47.499zM2.64 59.5H.5v-2.102L57.398.5H59.5v2.14L2.64 59.5zm14.143 0H12.54L59.5 12.54v4.243L16.783 59.5zm14.142 0h-4.242L59.5 26.683v4.242L30.925 59.5zm14.142 0h-4.242L59.5 40.825v4.242L45.067 59.5zm14.143 0h-4.243l4.533-4.533v4.243l-.29.29z"
clip-rule="evenodd"></path>
</svg>
<svg>
<path transform="translate(420, 120) translate(30,30) rotate(0) translate(-30,-30)"
fill="#00b4d8" fill-rule="evenodd"
d="M5.072.5H.83L.5.83v4.242L5.072.5zM.5 19.214v-4.242L14.972.5h4.242L.5 19.214zm0 14.142v-4.242L29.114.5h4.242L.5 33.356zM.5 47.5v-4.243L43.256.5H47.5L.5 47.499zM2.64 59.5H.5v-2.102L57.398.5H59.5v2.14L2.64 59.5zm14.143 0H12.54L59.5 12.54v4.243L16.783 59.5zm14.142 0h-4.242L59.5 26.683v4.242L30.925 59.5zm14.142 0h-4.242L59.5 40.825v4.242L45.067 59.5zm14.143 0h-4.243l4.533-4.533v4.243l-.29.29z"
clip-rule="evenodd"></path>
</svg>
<svg>
<path transform="translate(420, 180) translate(30,30) rotate(0) translate(-30,-30)"
fill="#48cae4" fill-rule="evenodd"
d="M8.5.5h3v59h-3V.5zM18.5.5h3v59h-3V.5zM31.5.5h-3v59h3V.5zM38.5.5h3v59h-3V.5zM51.5.5h-3v59h3V.5z"
clip-rule="evenodd"></path>
</svg>
<svg>
<path transform="translate(420, 240) translate(30,30) rotate(270) translate(-30,-30)"
fill="#023e8a" fill-rule="evenodd"
d="M8.5.5h3v59h-3V.5zM18.5.5h3v59h-3V.5zM31.5.5h-3v59h3V.5zM38.5.5h3v59h-3V.5zM51.5.5h-3v59h3V.5z"
clip-rule="evenodd"></path>
</svg>
<svg>
<path transform="translate(420, 300) translate(30,30) rotate(0) translate(-30,-30)"
fill="#023e8a" fill-rule="evenodd"
d="M59.5 11.218V7.74A59.602 59.602 0 0037.782.5H22.218A59.602 59.602 0 00.5 7.74v3.478C9.106 6.002 19.202 3 30 3c10.798 0 20.894 3.002 29.5 8.218zm0 8.408A49.775 49.775 0 0030 10 49.775 49.775 0 00.5 19.626v3.783A46.803 46.803 0 0130 13a46.803 46.803 0 0129.5 10.409v-3.783zm0 13.36C52.187 25.004 41.678 20 30 20S7.813 25.004.5 32.986v4.678C7.256 28.754 17.956 23 30 23s22.744 5.755 29.5 14.664v-4.678zm0 21.53C56.923 40.567 44.696 30 30 30S3.077 40.566.5 54.517V59.5h2.505C3.27 44.819 15.255 33 30 33c14.745 0 26.729 11.819 26.995 26.5H59.5v-4.983zM49.994 59.5C49.728 48.685 40.879 40 30 40c-10.878 0-19.729 8.685-19.994 19.5h3.001C13.272 50.342 20.778 43 30 43c9.222 0 16.728 7.342 16.993 16.5h3zm-10.006 0C39.728 54.21 35.355 50 30 50c-5.355 0-9.727 4.21-9.988 9.5h3.006a7 7 0 0113.964 0h3.006z"
clip-rule="evenodd"></path>
</svg>
<svg>
<path transform="translate(420, 360) translate(30,30) rotate(90) translate(-30,-30)"
fill="#48cae4" fill-rule="evenodd"
d="M5.072.5H.83L.5.83v4.242L5.072.5zM.5 19.214v-4.242L14.972.5h4.242L.5 19.214zm0 14.142v-4.242L29.114.5h4.242L.5 33.356zM.5 47.5v-4.243L43.256.5H47.5L.5 47.499zM2.64 59.5H.5v-2.102L57.398.5H59.5v2.14L2.64 59.5zm14.143 0H12.54L59.5 12.54v4.243L16.783 59.5zm14.142 0h-4.242L59.5 26.683v4.242L30.925 59.5zm14.142 0h-4.242L59.5 40.825v4.242L45.067 59.5zm14.143 0h-4.243l4.533-4.533v4.243l-.29.29z"
clip-rule="evenodd"></path>
</svg>
<svg>
<path transform="translate(420, 420) translate(30,30) rotate(270) translate(-30,-30)"
fill="#0077b6" fill-rule="evenodd"
d="M8.5.5h3v59h-3V.5zM18.5.5h3v59h-3V.5zM31.5.5h-3v59h3V.5zM38.5.5h3v59h-3V.5zM51.5.5h-3v59h3V.5z"
clip-rule="evenodd"></path>
</svg>
<svg>
<path transform="translate(420, 480) translate(30,30) rotate(270) translate(-30,-30)"
fill="#023e8a" fill-rule="evenodd"
d="M59.5 11.218V7.74A59.602 59.602 0 0037.782.5H22.218A59.602 59.602 0 00.5 7.74v3.478C9.106 6.002 19.202 3 30 3c10.798 0 20.894 3.002 29.5 8.218zm0 8.408A49.775 49.775 0 0030 10 49.775 49.775 0 00.5 19.626v3.783A46.803 46.803 0 0130 13a46.803 46.803 0 0129.5 10.409v-3.783zm0 13.36C52.187 25.004 41.678 20 30 20S7.813 25.004.5 32.986v4.678C7.256 28.754 17.956 23 30 23s22.744 5.755 29.5 14.664v-4.678zm0 21.53C56.923 40.567 44.696 30 30 30S3.077 40.566.5 54.517V59.5h2.505C3.27 44.819 15.255 33 30 33c14.745 0 26.729 11.819 26.995 26.5H59.5v-4.983zM49.994 59.5C49.728 48.685 40.879 40 30 40c-10.878 0-19.729 8.685-19.994 19.5h3.001C13.272 50.342 20.778 43 30 43c9.222 0 16.728 7.342 16.993 16.5h3zm-10.006 0C39.728 54.21 35.355 50 30 50c-5.355 0-9.727 4.21-9.988 9.5h3.006a7 7 0 0113.964 0h3.006z"
clip-rule="evenodd"></path>
</svg>
<svg>
<path transform="translate(420, 540) translate(30,30) rotate(270) translate(-30,-30)"
fill="#00b4d8" fill-rule="evenodd"
d="M59.5 11.218V7.74A59.602 59.602 0 0037.782.5H22.218A59.602 59.602 0 00.5 7.74v3.478C9.106 6.002 19.202 3 30 3c10.798 0 20.894 3.002 29.5 8.218zm0 8.408A49.775 49.775 0 0030 10 49.775 49.775 0 00.5 19.626v3.783A46.803 46.803 0 0130 13a46.803 46.803 0 0129.5 10.409v-3.783zm0 13.36C52.187 25.004 41.678 20 30 20S7.813 25.004.5 32.986v4.678C7.256 28.754 17.956 23 30 23s22.744 5.755 29.5 14.664v-4.678zm0 21.53C56.923 40.567 44.696 30 30 30S3.077 40.566.5 54.517V59.5h2.505C3.27 44.819 15.255 33 30 33c14.745 0 26.729 11.819 26.995 26.5H59.5v-4.983zM49.994 59.5C49.728 48.685 40.879 40 30 40c-10.878 0-19.729 8.685-19.994 19.5h3.001C13.272 50.342 20.778 43 30 43c9.222 0 16.728 7.342 16.993 16.5h3zm-10.006 0C39.728 54.21 35.355 50 30 50c-5.355 0-9.727 4.21-9.988 9.5h3.006a7 7 0 0113.964 0h3.006z"
clip-rule="evenodd"></path>
</svg>
<svg>
<path transform="translate(480, 0) translate(30,30) rotate(90) translate(-30,-30)"
fill="#0096c7" fill-rule="evenodd"
d="M8.5.5h3v59h-3V.5zM18.5.5h3v59h-3V.5zM31.5.5h-3v59h3V.5zM38.5.5h3v59h-3V.5zM51.5.5h-3v59h3V.5z"
clip-rule="evenodd"></path>
</svg>
<svg>
<path transform="translate(480, 60) translate(30,30) rotate(90) translate(-30,-30)"
fill="#ade8f4" fill-rule="evenodd"
d="M5.072.5H.83L.5.83v4.242L5.072.5zM.5 19.214v-4.242L14.972.5h4.242L.5 19.214zm0 14.142v-4.242L29.114.5h4.242L.5 33.356zM.5 47.5v-4.243L43.256.5H47.5L.5 47.499zM2.64 59.5H.5v-2.102L57.398.5H59.5v2.14L2.64 59.5zm14.143 0H12.54L59.5 12.54v4.243L16.783 59.5zm14.142 0h-4.242L59.5 26.683v4.242L30.925 59.5zm14.142 0h-4.242L59.5 40.825v4.242L45.067 59.5zm14.143 0h-4.243l4.533-4.533v4.243l-.29.29z"
clip-rule="evenodd"></path>
</svg>
<svg>
<path transform="translate(480, 120) translate(30,30) rotate(0) translate(-30,-30)"
fill="#0077b6"
d="M11.122.5h-4.6A80.499 80.499 0 00.5 6.522v4.6A77.464 77.464 0 0111.122.5zM.5 29.168v-6.061A70.364 70.364 0 0123.107.5h6.06A67.297 67.297 0 00.5 29.168z"></path>
<path transform="translate(480, 120) translate(30,30) rotate(0) translate(-30,-30)"
fill="#0077b6"
d="M3.002 59.5H.5v-7.282C3.985 25.305 25.305 3.985 52.218.5H59.5v2.502C28.416 3.27 3.27 28.417 3.002 59.5z"></path>
<path transform="translate(480, 120) translate(30,30) rotate(0) translate(-30,-30)"
fill="#0077b6"
d="M13.003 59.5h-3c.266-27.218 22.28-49.23 49.497-49.498v3C33.94 13.27 13.269 33.94 13.003 59.5z"></path>
<path transform="translate(480, 120) translate(30,30) rotate(0) translate(-30,-30)"
fill="#0077b6"
d="M23.003 59.5h-3C20.27 37.805 37.805 20.269 59.5 20.003v3c-20.038.266-36.231 16.46-36.497 36.497z"></path>
<path transform="translate(480, 120) translate(30,30) rotate(0) translate(-30,-30)"
fill="#0077b6"
d="M33.005 59.5h-3c.263-16.172 13.323-29.232 29.495-29.496v3c-14.515.264-26.232 11.981-26.495 26.496z"></path>
<path transform="translate(480, 120) translate(30,30) rotate(0) translate(-30,-30)"
fill="#0077b6"
d="M43.007 59.5h-3c.26-10.648 8.845-19.233 19.493-19.494v3.001c-8.992.26-16.233 7.502-16.493 16.493zM53.018 59.5h-3.006a10 10 0 019.488-9.488v3.006a7.001 7.001 0 00-6.482 6.482z"></path>
</svg>
<svg>
<path transform="translate(480, 180) translate(30,30) rotate(270) translate(-30,-30)"
fill="#00b4d8" fill-rule="evenodd"
d="M8.5.5h3v59h-3V.5zM18.5.5h3v59h-3V.5zM31.5.5h-3v59h3V.5zM38.5.5h3v59h-3V.5zM51.5.5h-3v59h3V.5z"
clip-rule="evenodd"></path>
</svg>
<svg>
<path transform="translate(480, 240) translate(30,30) rotate(270) translate(-30,-30)"
fill="#ade8f4" fill-rule="evenodd"
d="M5.072.5H.83L.5.83v4.242L5.072.5zM.5 19.214v-4.242L14.972.5h4.242L.5 19.214zm0 14.142v-4.242L29.114.5h4.242L.5 33.356zM.5 47.5v-4.243L43.256.5H47.5L.5 47.499zM2.64 59.5H.5v-2.102L57.398.5H59.5v2.14L2.64 59.5zm14.143 0H12.54L59.5 12.54v4.243L16.783 59.5zm14.142 0h-4.242L59.5 26.683v4.242L30.925 59.5zm14.142 0h-4.242L59.5 40.825v4.242L45.067 59.5zm14.143 0h-4.243l4.533-4.533v4.243l-.29.29z"
clip-rule="evenodd"></path>
</svg>
<svg>
<path transform="translate(480, 300) translate(30,30) rotate(90) translate(-30,-30)"
fill="#ade8f4" fill-rule="evenodd"
d="M59.5 11.218V7.74A59.602 59.602 0 0037.782.5H22.218A59.602 59.602 0 00.5 7.74v3.478C9.106 6.002 19.202 3 30 3c10.798 0 20.894 3.002 29.5 8.218zm0 8.408A49.775 49.775 0 0030 10 49.775 49.775 0 00.5 19.626v3.783A46.803 46.803 0 0130 13a46.803 46.803 0 0129.5 10.409v-3.783zm0 13.36C52.187 25.004 41.678 20 30 20S7.813 25.004.5 32.986v4.678C7.256 28.754 17.956 23 30 23s22.744 5.755 29.5 14.664v-4.678zm0 21.53C56.923 40.567 44.696 30 30 30S3.077 40.566.5 54.517V59.5h2.505C3.27 44.819 15.255 33 30 33c14.745 0 26.729 11.819 26.995 26.5H59.5v-4.983zM49.994 59.5C49.728 48.685 40.879 40 30 40c-10.878 0-19.729 8.685-19.994 19.5h3.001C13.272 50.342 20.778 43 30 43c9.222 0 16.728 7.342 16.993 16.5h3zm-10.006 0C39.728 54.21 35.355 50 30 50c-5.355 0-9.727 4.21-9.988 9.5h3.006a7 7 0 0113.964 0h3.006z"
clip-rule="evenodd"></path>
</svg>
<svg>
<path transform="translate(480, 360) translate(30,30) rotate(0) translate(-30,-30)"
fill="#48cae4" fill-rule="evenodd"
d="M59.5 11.218V7.74A59.602 59.602 0 0037.782.5H22.218A59.602 59.602 0 00.5 7.74v3.478C9.106 6.002 19.202 3 30 3c10.798 0 20.894 3.002 29.5 8.218zm0 8.408A49.775 49.775 0 0030 10 49.775 49.775 0 00.5 19.626v3.783A46.803 46.803 0 0130 13a46.803 46.803 0 0129.5 10.409v-3.783zm0 13.36C52.187 25.004 41.678 20 30 20S7.813 25.004.5 32.986v4.678C7.256 28.754 17.956 23 30 23s22.744 5.755 29.5 14.664v-4.678zm0 21.53C56.923 40.567 44.696 30 30 30S3.077 40.566.5 54.517V59.5h2.505C3.27 44.819 15.255 33 30 33c14.745 0 26.729 11.819 26.995 26.5H59.5v-4.983zM49.994 59.5C49.728 48.685 40.879 40 30 40c-10.878 0-19.729 8.685-19.994 19.5h3.001C13.272 50.342 20.778 43 30 43c9.222 0 16.728 7.342 16.993 16.5h3zm-10.006 0C39.728 54.21 35.355 50 30 50c-5.355 0-9.727 4.21-9.988 9.5h3.006a7 7 0 0113.964 0h3.006z"
clip-rule="evenodd"></path>
</svg>
<svg>
<path transform="translate(480, 420) translate(30,30) rotate(90) translate(-30,-30)"
fill="#ade8f4" fill-rule="evenodd"
d="M59.5 11.218V7.74A59.602 59.602 0 0037.782.5H22.218A59.602 59.602 0 00.5 7.74v3.478C9.106 6.002 19.202 3 30 3c10.798 0 20.894 3.002 29.5 8.218zm0 8.408A49.775 49.775 0 0030 10 49.775 49.775 0 00.5 19.626v3.783A46.803 46.803 0 0130 13a46.803 46.803 0 0129.5 10.409v-3.783zm0 13.36C52.187 25.004 41.678 20 30 20S7.813 25.004.5 32.986v4.678C7.256 28.754 17.956 23 30 23s22.744 5.755 29.5 14.664v-4.678zm0 21.53C56.923 40.567 44.696 30 30 30S3.077 40.566.5 54.517V59.5h2.505C3.27 44.819 15.255 33 30 33c14.745 0 26.729 11.819 26.995 26.5H59.5v-4.983zM49.994 59.5C49.728 48.685 40.879 40 30 40c-10.878 0-19.729 8.685-19.994 19.5h3.001C13.272 50.342 20.778 43 30 43c9.222 0 16.728 7.342 16.993 16.5h3zm-10.006 0C39.728 54.21 35.355 50 30 50c-5.355 0-9.727 4.21-9.988 9.5h3.006a7 7 0 0113.964 0h3.006z"
clip-rule="evenodd"></path>
</svg>
<svg>
<path transform="translate(480, 480) translate(30,30) rotate(90) translate(-30,-30)"
fill="#023e8a"
d="M11.122.5h-4.6A80.499 80.499 0 00.5 6.522v4.6A77.464 77.464 0 0111.122.5zM.5 29.168v-6.061A70.364 70.364 0 0123.107.5h6.06A67.297 67.297 0 00.5 29.168z"></path>
<path transform="translate(480, 480) translate(30,30) rotate(90) translate(-30,-30)"
fill="#023e8a"
d="M3.002 59.5H.5v-7.282C3.985 25.305 25.305 3.985 52.218.5H59.5v2.502C28.416 3.27 3.27 28.417 3.002 59.5z"></path>
<path transform="translate(480, 480) translate(30,30) rotate(90) translate(-30,-30)"
fill="#023e8a"
d="M13.003 59.5h-3c.266-27.218 22.28-49.23 49.497-49.498v3C33.94 13.27 13.269 33.94 13.003 59.5z"></path>
<path transform="translate(480, 480) translate(30,30) rotate(90) translate(-30,-30)"
fill="#023e8a"
d="M23.003 59.5h-3C20.27 37.805 37.805 20.269 59.5 20.003v3c-20.038.266-36.231 16.46-36.497 36.497z"></path>
<path transform="translate(480, 480) translate(30,30) rotate(90) translate(-30,-30)"
fill="#023e8a"
d="M33.005 59.5h-3c.263-16.172 13.323-29.232 29.495-29.496v3c-14.515.264-26.232 11.981-26.495 26.496z"></path>
<path transform="translate(480, 480) translate(30,30) rotate(90) translate(-30,-30)"
fill="#023e8a"
d="M43.007 59.5h-3c.26-10.648 8.845-19.233 19.493-19.494v3.001c-8.992.26-16.233 7.502-16.493 16.493zM53.018 59.5h-3.006a10 10 0 019.488-9.488v3.006a7.001 7.001 0 00-6.482 6.482z"></path>
</svg>
<svg>
<path transform="translate(480, 540) translate(30,30) rotate(90) translate(-30,-30)"
fill="#023e8a"
d="M11.122.5h-4.6A80.499 80.499 0 00.5 6.522v4.6A77.464 77.464 0 0111.122.5zM.5 29.168v-6.061A70.364 70.364 0 0123.107.5h6.06A67.297 67.297 0 00.5 29.168z"></path>
<path transform="translate(480, 540) translate(30,30) rotate(90) translate(-30,-30)"
fill="#023e8a"
d="M3.002 59.5H.5v-7.282C3.985 25.305 25.305 3.985 52.218.5H59.5v2.502C28.416 3.27 3.27 28.417 3.002 59.5z"></path>
<path transform="translate(480, 540) translate(30,30) rotate(90) translate(-30,-30)"
fill="#023e8a"
d="M13.003 59.5h-3c.266-27.218 22.28-49.23 49.497-49.498v3C33.94 13.27 13.269 33.94 13.003 59.5z"></path>
<path transform="translate(480, 540) translate(30,30) rotate(90) translate(-30,-30)"
fill="#023e8a"
d="M23.003 59.5h-3C20.27 37.805 37.805 20.269 59.5 20.003v3c-20.038.266-36.231 16.46-36.497 36.497z"></path>
<path transform="translate(480, 540) translate(30,30) rotate(90) translate(-30,-30)"
fill="#023e8a"
d="M33.005 59.5h-3c.263-16.172 13.323-29.232 29.495-29.496v3c-14.515.264-26.232 11.981-26.495 26.496z"></path>
<path transform="translate(480, 540) translate(30,30) rotate(90) translate(-30,-30)"
fill="#023e8a"
d="M43.007 59.5h-3c.26-10.648 8.845-19.233 19.493-19.494v3.001c-8.992.26-16.233 7.502-16.493 16.493zM53.018 59.5h-3.006a10 10 0 019.488-9.488v3.006a7.001 7.001 0 00-6.482 6.482z"></path>
</svg>
<svg>
<path transform="translate(540, 0) translate(30,30) rotate(0) translate(-30,-30)"
fill="#0096c7" fill-rule="evenodd"
d="M59.5 11.218V7.74A59.602 59.602 0 0037.782.5H22.218A59.602 59.602 0 00.5 7.74v3.478C9.106 6.002 19.202 3 30 3c10.798 0 20.894 3.002 29.5 8.218zm0 8.408A49.775 49.775 0 0030 10 49.775 49.775 0 00.5 19.626v3.783A46.803 46.803 0 0130 13a46.803 46.803 0 0129.5 10.409v-3.783zm0 13.36C52.187 25.004 41.678 20 30 20S7.813 25.004.5 32.986v4.678C7.256 28.754 17.956 23 30 23s22.744 5.755 29.5 14.664v-4.678zm0 21.53C56.923 40.567 44.696 30 30 30S3.077 40.566.5 54.517V59.5h2.505C3.27 44.819 15.255 33 30 33c14.745 0 26.729 11.819 26.995 26.5H59.5v-4.983zM49.994 59.5C49.728 48.685 40.879 40 30 40c-10.878 0-19.729 8.685-19.994 19.5h3.001C13.272 50.342 20.778 43 30 43c9.222 0 16.728 7.342 16.993 16.5h3zm-10.006 0C39.728 54.21 35.355 50 30 50c-5.355 0-9.727 4.21-9.988 9.5h3.006a7 7 0 0113.964 0h3.006z"
clip-rule="evenodd"></path>
</svg>
<svg>
<path transform="translate(540, 60) translate(30,30) rotate(90) translate(-30,-30)"
fill="#0077b6"
d="M11.122.5h-4.6A80.499 80.499 0 00.5 6.522v4.6A77.464 77.464 0 0111.122.5zM.5 29.168v-6.061A70.364 70.364 0 0123.107.5h6.06A67.297 67.297 0 00.5 29.168z"></path>
<path transform="translate(540, 60) translate(30,30) rotate(90) translate(-30,-30)"
fill="#0077b6"
d="M3.002 59.5H.5v-7.282C3.985 25.305 25.305 3.985 52.218.5H59.5v2.502C28.416 3.27 3.27 28.417 3.002 59.5z"></path>
<path transform="translate(540, 60) translate(30,30) rotate(90) translate(-30,-30)"
fill="#0077b6"
d="M13.003 59.5h-3c.266-27.218 22.28-49.23 49.497-49.498v3C33.94 13.27 13.269 33.94 13.003 59.5z"></path>
<path transform="translate(540, 60) translate(30,30) rotate(90) translate(-30,-30)"
fill="#0077b6"
d="M23.003 59.5h-3C20.27 37.805 37.805 20.269 59.5 20.003v3c-20.038.266-36.231 16.46-36.497 36.497z"></path>
<path transform="translate(540, 60) translate(30,30) rotate(90) translate(-30,-30)"
fill="#0077b6"
d="M33.005 59.5h-3c.263-16.172 13.323-29.232 29.495-29.496v3c-14.515.264-26.232 11.981-26.495 26.496z"></path>
<path transform="translate(540, 60) translate(30,30) rotate(90) translate(-30,-30)"
fill="#0077b6"
d="M43.007 59.5h-3c.26-10.648 8.845-19.233 19.493-19.494v3.001c-8.992.26-16.233 7.502-16.493 16.493zM53.018 59.5h-3.006a10 10 0 019.488-9.488v3.006a7.001 7.001 0 00-6.482 6.482z"></path>
</svg>
<svg>
<path transform="translate(540, 120) translate(30,30) rotate(0) translate(-30,-30)"
fill="#caf0f8"
d="M11.122.5h-4.6A80.499 80.499 0 00.5 6.522v4.6A77.464 77.464 0 0111.122.5zM.5 29.168v-6.061A70.364 70.364 0 0123.107.5h6.06A67.297 67.297 0 00.5 29.168z"></path>
<path transform="translate(540, 120) translate(30,30) rotate(0) translate(-30,-30)"
fill="#caf0f8"
d="M3.002 59.5H.5v-7.282C3.985 25.305 25.305 3.985 52.218.5H59.5v2.502C28.416 3.27 3.27 28.417 3.002 59.5z"></path>
<path transform="translate(540, 120) translate(30,30) rotate(0) translate(-30,-30)"
fill="#caf0f8"
d="M13.003 59.5h-3c.266-27.218 22.28-49.23 49.497-49.498v3C33.94 13.27 13.269 33.94 13.003 59.5z"></path>
<path transform="translate(540, 120) translate(30,30) rotate(0) translate(-30,-30)"
fill="#caf0f8"
d="M23.003 59.5h-3C20.27 37.805 37.805 20.269 59.5 20.003v3c-20.038.266-36.231 16.46-36.497 36.497z"></path>
<path transform="translate(540, 120) translate(30,30) rotate(0) translate(-30,-30)"
fill="#caf0f8"
d="M33.005 59.5h-3c.263-16.172 13.323-29.232 29.495-29.496v3c-14.515.264-26.232 11.981-26.495 26.496z"></path>
<path transform="translate(540, 120) translate(30,30) rotate(0) translate(-30,-30)"
fill="#caf0f8"
d="M43.007 59.5h-3c.26-10.648 8.845-19.233 19.493-19.494v3.001c-8.992.26-16.233 7.502-16.493 16.493zM53.018 59.5h-3.006a10 10 0 019.488-9.488v3.006a7.001 7.001 0 00-6.482 6.482z"></path>
</svg>
<svg>
<path transform="translate(540, 180) translate(30,30) rotate(0) translate(-30,-30)"
fill="#023e8a" fill-rule="evenodd"
d="M8.5.5h3v59h-3V.5zM18.5.5h3v59h-3V.5zM31.5.5h-3v59h3V.5zM38.5.5h3v59h-3V.5zM51.5.5h-3v59h3V.5z"
clip-rule="evenodd"></path>
</svg>
<svg>
<path transform="translate(540, 240) translate(30,30) rotate(270) translate(-30,-30)"
fill="#03045e" fill-rule="evenodd"
d="M5.072.5H.83L.5.83v4.242L5.072.5zM.5 19.214v-4.242L14.972.5h4.242L.5 19.214zm0 14.142v-4.242L29.114.5h4.242L.5 33.356zM.5 47.5v-4.243L43.256.5H47.5L.5 47.499zM2.64 59.5H.5v-2.102L57.398.5H59.5v2.14L2.64 59.5zm14.143 0H12.54L59.5 12.54v4.243L16.783 59.5zm14.142 0h-4.242L59.5 26.683v4.242L30.925 59.5zm14.142 0h-4.242L59.5 40.825v4.242L45.067 59.5zm14.143 0h-4.243l4.533-4.533v4.243l-.29.29z"
clip-rule="evenodd"></path>
</svg>
<svg>
<path transform="translate(540, 300) translate(30,30) rotate(180) translate(-30,-30)"
fill="#00b4d8" fill-rule="evenodd"
d="M59.5 11.218V7.74A59.602 59.602 0 0037.782.5H22.218A59.602 59.602 0 00.5 7.74v3.478C9.106 6.002 19.202 3 30 3c10.798 0 20.894 3.002 29.5 8.218zm0 8.408A49.775 49.775 0 0030 10 49.775 49.775 0 00.5 19.626v3.783A46.803 46.803 0 0130 13a46.803 46.803 0 0129.5 10.409v-3.783zm0 13.36C52.187 25.004 41.678 20 30 20S7.813 25.004.5 32.986v4.678C7.256 28.754 17.956 23 30 23s22.744 5.755 29.5 14.664v-4.678zm0 21.53C56.923 40.567 44.696 30 30 30S3.077 40.566.5 54.517V59.5h2.505C3.27 44.819 15.255 33 30 33c14.745 0 26.729 11.819 26.995 26.5H59.5v-4.983zM49.994 59.5C49.728 48.685 40.879 40 30 40c-10.878 0-19.729 8.685-19.994 19.5h3.001C13.272 50.342 20.778 43 30 43c9.222 0 16.728 7.342 16.993 16.5h3zm-10.006 0C39.728 54.21 35.355 50 30 50c-5.355 0-9.727 4.21-9.988 9.5h3.006a7 7 0 0113.964 0h3.006z"
clip-rule="evenodd"></path>
</svg>
<svg>
<path transform="translate(540, 360) translate(30,30) rotate(0) translate(-30,-30)"
fill="#90e0ef"
d="M11.122.5h-4.6A80.499 80.499 0 00.5 6.522v4.6A77.464 77.464 0 0111.122.5zM.5 29.168v-6.061A70.364 70.364 0 0123.107.5h6.06A67.297 67.297 0 00.5 29.168z"></path>
<path transform="translate(540, 360) translate(30,30) rotate(0) translate(-30,-30)"
fill="#90e0ef"
d="M3.002 59.5H.5v-7.282C3.985 25.305 25.305 3.985 52.218.5H59.5v2.502C28.416 3.27 3.27 28.417 3.002 59.5z"></path>
<path transform="translate(540, 360) translate(30,30) rotate(0) translate(-30,-30)"
fill="#90e0ef"
d="M13.003 59.5h-3c.266-27.218 22.28-49.23 49.497-49.498v3C33.94 13.27 13.269 33.94 13.003 59.5z"></path>
<path transform="translate(540, 360) translate(30,30) rotate(0) translate(-30,-30)"
fill="#90e0ef"
d="M23.003 59.5h-3C20.27 37.805 37.805 20.269 59.5 20.003v3c-20.038.266-36.231 16.46-36.497 36.497z"></path>
<path transform="translate(540, 360) translate(30,30) rotate(0) translate(-30,-30)"
fill="#90e0ef"
d="M33.005 59.5h-3c.263-16.172 13.323-29.232 29.495-29.496v3c-14.515.264-26.232 11.981-26.495 26.496z"></path>
<path transform="translate(540, 360) translate(30,30) rotate(0) translate(-30,-30)"
fill="#90e0ef"
d="M43.007 59.5h-3c.26-10.648 8.845-19.233 19.493-19.494v3.001c-8.992.26-16.233 7.502-16.493 16.493zM53.018 59.5h-3.006a10 10 0 019.488-9.488v3.006a7.001 7.001 0 00-6.482 6.482z"></path>
</svg>
<svg>
<path transform="translate(540, 420) translate(30,30) rotate(180) translate(-30,-30)"
fill="#90e0ef"
d="M11.122.5h-4.6A80.499 80.499 0 00.5 6.522v4.6A77.464 77.464 0 0111.122.5zM.5 29.168v-6.061A70.364 70.364 0 0123.107.5h6.06A67.297 67.297 0 00.5 29.168z"></path>
<path transform="translate(540, 420) translate(30,30) rotate(180) translate(-30,-30)"
fill="#90e0ef"
d="M3.002 59.5H.5v-7.282C3.985 25.305 25.305 3.985 52.218.5H59.5v2.502C28.416 3.27 3.27 28.417 3.002 59.5z"></path>
<path transform="translate(540, 420) translate(30,30) rotate(180) translate(-30,-30)"
fill="#90e0ef"
d="M13.003 59.5h-3c.266-27.218 22.28-49.23 49.497-49.498v3C33.94 13.27 13.269 33.94 13.003 59.5z"></path>
<path transform="translate(540, 420) translate(30,30) rotate(180) translate(-30,-30)"
fill="#90e0ef"
d="M23.003 59.5h-3C20.27 37.805 37.805 20.269 59.5 20.003v3c-20.038.266-36.231 16.46-36.497 36.497z"></path>
<path transform="translate(540, 420) translate(30,30) rotate(180) translate(-30,-30)"
fill="#90e0ef"
d="M33.005 59.5h-3c.263-16.172 13.323-29.232 29.495-29.496v3c-14.515.264-26.232 11.981-26.495 26.496z"></path>
<path transform="translate(540, 420) translate(30,30) rotate(180) translate(-30,-30)"
fill="#90e0ef"
d="M43.007 59.5h-3c.26-10.648 8.845-19.233 19.493-19.494v3.001c-8.992.26-16.233 7.502-16.493 16.493zM53.018 59.5h-3.006a10 10 0 019.488-9.488v3.006a7.001 7.001 0 00-6.482 6.482z"></path>
</svg>
<svg>
<path transform="translate(540, 480) translate(30,30) rotate(270) translate(-30,-30)"
fill="#caf0f8"
d="M11.122.5h-4.6A80.499 80.499 0 00.5 6.522v4.6A77.464 77.464 0 0111.122.5zM.5 29.168v-6.061A70.364 70.364 0 0123.107.5h6.06A67.297 67.297 0 00.5 29.168z"></path>
<path transform="translate(540, 480) translate(30,30) rotate(270) translate(-30,-30)"
fill="#caf0f8"
d="M3.002 59.5H.5v-7.282C3.985 25.305 25.305 3.985 52.218.5H59.5v2.502C28.416 3.27 3.27 28.417 3.002 59.5z"></path>
<path transform="translate(540, 480) translate(30,30) rotate(270) translate(-30,-30)"
fill="#caf0f8"
d="M13.003 59.5h-3c.266-27.218 22.28-49.23 49.497-49.498v3C33.94 13.27 13.269 33.94 13.003 59.5z"></path>
<path transform="translate(540, 480) translate(30,30) rotate(270) translate(-30,-30)"
fill="#caf0f8"
d="M23.003 59.5h-3C20.27 37.805 37.805 20.269 59.5 20.003v3c-20.038.266-36.231 16.46-36.497 36.497z"></path>
<path transform="translate(540, 480) translate(30,30) rotate(270) translate(-30,-30)"
fill="#caf0f8"
d="M33.005 59.5h-3c.263-16.172 13.323-29.232 29.495-29.496v3c-14.515.264-26.232 11.981-26.495 26.496z"></path>
<path transform="translate(540, 480) translate(30,30) rotate(270) translate(-30,-30)"
fill="#caf0f8"
d="M43.007 59.5h-3c.26-10.648 8.845-19.233 19.493-19.494v3.001c-8.992.26-16.233 7.502-16.493 16.493zM53.018 59.5h-3.006a10 10 0 019.488-9.488v3.006a7.001 7.001 0 00-6.482 6.482z"></path>
</svg>
<svg>
<path transform="translate(540, 540) translate(30,30) rotate(180) translate(-30,-30)"
fill="#03045e" fill-rule="evenodd"
d="M5.072.5H.83L.5.83v4.242L5.072.5zM.5 19.214v-4.242L14.972.5h4.242L.5 19.214zm0 14.142v-4.242L29.114.5h4.242L.5 33.356zM.5 47.5v-4.243L43.256.5H47.5L.5 47.499zM2.64 59.5H.5v-2.102L57.398.5H59.5v2.14L2.64 59.5zm14.143 0H12.54L59.5 12.54v4.243L16.783 59.5zm14.142 0h-4.242L59.5 26.683v4.242L30.925 59.5zm14.142 0h-4.242L59.5 40.825v4.242L45.067 59.5zm14.143 0h-4.243l4.533-4.533v4.243l-.29.29z"
clip-rule="evenodd"></path>
</svg>
</svg>

After

Width:  |  Height:  |  Size: 81 KiB

View file

@ -0,0 +1,139 @@
---
title: "Partials"
weight: 9
draft: false
description: "All the partials available in Blowfish."
slug: "partials"
tags: ["partials", "analytics", "privacy", "comments", "favicons", "icon", "docs"]
series: ["Documentation"]
series_order: 9
---
## Analytics
Blowfish provides built-in support for Fathom Analytics and Google Analytics. Fathom is a paid alternative to Google Analytics that respects user privacy.
### Fathom Analytics
To enable Fathom Analytics support, simply provide your Fathom site code in the `config/_default/params.toml` file. If you also use the custom domain feature of Fathom and would like to serve their script from your domain, you can also additionally provide the `domain` configuration value. If you don't provide a `domain` value, the script will load directly from Fathom DNS.
```toml
# config/_default/params.toml
[fathomAnalytics]
site = "ABC12345"
domain = "llama.yoursite.com"
```
### Google Analytics
Google Analytics support is provided through the internal Hugo partial. Simply provide the `googleAnalytics` key in the `config/_default/config.toml` file and the script will be added automatically.
Both version 3 (analytics.js) and version 4 (gtag.js) are supported, based on the configuration value provided:
```toml
# config/_default/config.toml
# version 3
googleAnalytics = "UA-PROPERTY_ID"
# version 4
googleAnalytics = "G-MEASUREMENT_ID"
```
### Umami Analytics
To enable Umami Analytics support, simply provide your [Umami tracking code](https://umami.is/docs/collect-data) in the `config/_default/params.toml` file.
If you also use the custom domain feature of Umami and would like to serve their script from your domain, you can also additionally provide the `domain` configuration value. If you don't provide a `domain` value, the script will load directly from Umami DNS (analytics.umami.is).
If you want the tracker to only run on specific domains, you can provide the `dataDomains` configuration value. If you don't provide a `dataDomains` value, the script will run on any website where the `domain` and`websiteid` match. If the environment variable `TRACKER_SCRIPT_NAME` is configured, you can specify a custom script name `scriptName`. If it is not configured, either comment it out or use the default `script.js`.
{{< alert >}}
**Note:** If you enable Umami Analytics, Blowfish will support [Umami Track Event](https://umami.is/docs/track-events) automatically. If you do not want to support Track Event, the param `enableTrackEvent` must set to `false`.
{{< /alert >}}
```toml
# config/_default/params.toml
[umamiAnalytics]
websiteid = "ABC12345"
domain = "llama.yoursite.com"
dataDomains = "yoursite.com,yoursite2.com"
scriptName = "TRACKER_SCRIPT_NAME"
enableTrackEvent = true
```
### Seline Analytics
To enable Seline Analytics support, simply provide your [Seline token](https://seline.so/docs/install-seline) in the `config/_default/params.toml` file.
{{< alert >}}
**Note:** If you enable Seline Analytics, Blowfish will support [Seline Track Event](https://seline.so/docs/custom-events) automatically. If you do not want to support Track Event, the param `enableTrackEvent` must set to `false`.
{{< /alert >}}
```toml
# config/_default/params.toml
[selineAnalytics]
token = "XXXXXX"
enableTrackEvent = true
```
### Custom analytics providers
If you wish to use a different analytics provider on your website you can also override the analytics partial and provide your own script. Simply create the file `layouts/partials/extend-head.html` in your project and it will automatically include it in the `<head>` of the website.
## Comments
To add comments to your articles, Blowfish includes support for a comments partial that is included at the base of each article page. Simply provide a `layouts/partials/comments.html` which contains the code required to display your chosen comments.
You can use either the built-in Hugo Disqus template, or provide your own custom code. Refer to the [Hugo docs](https://gohugo.io/content-management/comments/) for further information.
Once the partial has been provided, finer control over where comments are displayed is then managed using the `showComments` parameter. This value can be set at the theme level in the `params.toml` [config file]({{< ref "configuration#theme-parameters" >}}), or on a per-article basis by including it in the [front matter]({{< ref "front-matter" >}}). The parameter defaults to `false` so it must be set to `true` in one of these locations in order for comments to be displayed.
## Favicons
Blowfish provides a default set of blank favicons to get started but you can provide your own assets to override them. The easiest way to obtain new favicon assets is to generate them using a third-party provider like [favicon.io](https://favicon.io).
Icon assets should be placed directly in the `static/` folder of your website and named as per the listing below. If you use [favicon.io](https://favicon.io), these will be the filenames that are automatically generated for you, but you can provide your own assets if you wish.
```shell
static/
├─ android-chrome-192x192.png
├─ android-chrome-512x512.png
├─ apple-touch-icon.png
├─ favicon-16x16.png
├─ favicon-32x32.png
├─ favicon.ico
└─ site.webmanifest
```
Alternatively, you can also completely override the default favicon behaviour and provide your own favicon HTML tags and assets. Simply provide a `layouts/partials/favicons.html` file in your project and this will be injected into the site `<head>` in place of the default assets.
## Icon
Similar to the [icon shortcode]({{< ref "shortcodes#icon" >}}), you can include icons in your own templates and partials by using Blowfish's `icon.html` partial. The partial takes one parameter which is the name of the icon to be included.
**Example:**
```go
{{ partial "icon.html" "github" }}
```
Icons are populated using Hugo pipelines which makes them very flexible. Blowfish includes a number of built-in icons for social, links and other purposes. Check the [icon samples]({{< ref "samples/icons" >}}) page for a full list of supported icons.
Custom icons can be added by providing your own icon assets in the `assets/icons/` directory of your project. The icon can then be referenced in the partial by using the SVG filename without the `.svg` extension.
Icons can also be used in article content by calling the [icon shortcode]({{< ref "shortcodes#icon" >}}).
## Extensions
Blowfish also provides for a number of extension partials that allow for expanding upon base functionality.
### Article link
If you wish to insert additional code after article links, create a `layouts/partials/extend-article-link.html` file. This is especially powerful when combined with the [`badge`]({{< ref "shortcodes#badge" >}}) shortcode which can be used to highlight metadata for certain articles.
### Head and Footer
The theme allows for inserting additional code directly into the `<head>` and `<footer>` sections of the template. These can be useful for providing scripts or other logic that isn't part of the theme.
Simply create either `layouts/partials/extend-head.html` or `layouts/partials/extend-footer.html` and these will automatically be included in your website build. Both partials are injected as the last items in `<head>` and `<footer>` so they can be used to override theme defaults.

View file

@ -0,0 +1,139 @@
---
title: "パーシャル"
weight: 9
draft: false
description: "Blowfish で利用可能なすべてのパーシャル。"
slug: "partials"
tags: ["partials", "analytics", "privacy", "comments", "favicons", "icon", "docs"]
series: ["Documentation"]
series_order: 9
---
## アナリティクス
Blowfish は、Fathom Analytics、Google アナリティクス、Umami Analytics のビルトインサポートを提供しています。Fathom は、ユーザーのプライバシーを尊重する Google アナリティクスの有料の代替手段です。
### Fathom Analytics
Fathom Analytics のサポートを有効にするには、`config/_default/params.toml` ファイルに Fathom サイトコードを指定するだけです。Fathom のカスタムドメイン機能を使用していて、ドメインからスクリプトを配信したい場合は、追加で `domain` 設定値を指定することもできます。`domain` 値を指定しない場合、スクリプトは Fathom DNS から直接ロードされます。
```toml
# config/_default/params.toml
[fathomAnalytics]
site = "ABC12345"
domain = "llama.yoursite.com"
```
### Google アナリティクス
Google アナリティクスのサポートは、Hugo の内部パーシャルを介して提供されます。`config/_default/config.toml` ファイルに `googleAnalytics` キーを指定するだけで、スクリプトが自動的に追加されます。
指定された設定値に基づいて、バージョン 3 (analytics.js) とバージョン 4 (gtag.js) の両方がサポートされています。
```toml
# config/_default/config.toml
# バージョン 3
googleAnalytics = "UA-PROPERTY_ID"
# バージョン 4
googleAnalytics = "G-MEASUREMENT_ID"
```
### Umami Analytics
Umami Analytics のサポートを有効にするには、`config/_default/params.toml` ファイルに [Umami トラッキングコード](https://umami.is/docs/collect-data)を指定するだけです。
Umami のカスタムドメイン機能を使用していて、ドメインからスクリプトを配信したい場合は、追加で `domain` 設定値を指定することもできます。`domain` 値を指定しない場合、スクリプトは Umami DNS (analytics.umami.is) から直接ロードされます。
トラッカーを特定のドメインでのみ実行したい場合は、`dataDomains` 設定値を指定できます。`dataDomains` 値を指定しない場合、スクリプトは `domain``websiteid` が一致する任意のウェブサイトで実行されます。環境変数 `TRACKER_SCRIPT_NAME` が設定されている場合は、カスタムスクリプト名 `scriptName` を指定できます。設定されていない場合は、コメントアウトするか、デフォルトの `script.js` を使用してください。
{{< alert >}}
**注:** Umami Analytics を有効にすると、Blowfish は [Umami トラックイベント](https://umami.is/docs/track-events)を自動的にサポートします。トラックイベントをサポートしたくない場合は、パラメータ `enableTrackEvent``false` に設定する必要があります。
{{< /alert >}}
```toml
# config/_default/params.toml
[umamiAnalytics]
websiteid = "ABC12345"
domain = "llama.yoursite.com"
dataDomains = "yoursite.com,yoursite2.com"
scriptName = "TRACKER_SCRIPT_NAME"
enableTrackEvent = true
```
### Seline Analytics
Seline Analytics のサポートを有効にするには、`config/_default/params.toml` ファイルに [Seline トークン](https://seline.so/docs/install-seline)を指定するだけです。
{{< alert >}}
**注:** Seline Analytics を有効にすると、Blowfish は [Seline トラックイベント](https://seline.so/docs/custom-events)を自動的にサポートします。トラックイベントをサポートしたくない場合は、パラメータ `enableTrackEvent``false` に設定する必要があります。
{{< /alert >}}
```toml
# config/_default/params.toml
[selineAnalytics]
token = "XXXXXX"
enableTrackEvent = true
```
### カスタムアナリティクスプロバイダー
ウェブサイトで別のアナリティクスプロバイダーを使用したい場合は、アナリティクスパーシャルをオーバーライドして、独自のスクリプトを提供することもできます。プロジェクトに `layouts/partials/extend-head.html` ファイルを作成するだけで、ウェブサイトの `<head>` に自動的に含まれます。
## コメント
記事にコメントを追加するために、Blowfish には、各記事ページの下部に含まれるコメントパーシャルのサポートが含まれています。選択したコメントを表示するために必要なコードを含む `layouts/partials/comments.html` を指定するだけです。
組み込みの Hugo Disqus テンプレートを使用するか、独自のカスタムコードを提供できます。詳細については、[Hugo ドキュメント](https://gohugo.io/content-management/comments/)を参照してください。
パーシャルが提供されると、コメントが表示される場所をより細かく制御するために、`showComments` パラメータを使用して管理されます。この値は、`params.toml` [設定ファイル]({{< ref "configuration#テーマパラメーターtheme-parameters" >}})のテーマレベルで設定するか、[フロントマター]({{< ref "front-matter" >}})に含めることで記事ごとに設定できます。パラメータはデフォルトで `false` であるため、コメントを表示するには、これらの場所のいずれかで `true` に設定する必要があります。
## ファビコン
Blowfish は、開始するための空白のファビコンのデフォルトセットを提供しますが、独自のアセットを提供してそれらを上書きできます。新しいファビコンアセットを取得する最も簡単な方法は、[favicon.io](https://favicon.io) などのサードパーティプロバイダーを使用してそれらを生成することです。
アイコンアセットは、ウェブサイトの `static/` フォルダに直接配置し、以下のリストに従って名前を付ける必要があります。[favicon.io](https://favicon.io) を使用する場合、これらは自動的に生成されるファイル名になりますが、必要に応じて独自のアセットを提供できます。
```shell
static/
├─ android-chrome-192x192.png
├─ android-chrome-512x512.png
├─ apple-touch-icon.png
├─ favicon-16x16.png
├─ favicon-32x32.png
├─ favicon.ico
└─ site.webmanifest
```
または、デフォルトのファビコンの動作を完全にオーバーライドして、独自のファビコン HTML タグとアセットを提供することもできます。プロジェクトに `layouts/partials/favicons.html` ファイルを提供するだけで、デフォルトのアセットの代わりにサイトの `<head>` に挿入されます。
## アイコン
[アイコンショートコード]({{< ref "shortcodes#アイコン" >}})と同様に、Blowfish の `icon.html` パーシャルを使用して、独自のテンプレートやパーシャルにアイコンを含めることができます。パーシャルは、含めるアイコンの名前である1つのパラメータを受け取ります。
**例:**
```go
{{ partial "icon.html" "github" }}
```
アイコンは Hugo パイプラインを使用して設定されるため、非常に柔軟です。Blowfish には、ソーシャル、リンク、その他の目的のための組み込みアイコンが多数含まれています。サポートされているアイコンの完全なリストについては、[アイコンサンプル]({{< ref "samples/icons" >}})ページを確認してください。
カスタムアイコンは、プロジェクトの `assets/icons/` ディレクトリに独自のアイコンアセットを提供することで追加できます。その後、`.svg` 拡張子なしで SVG ファイル名を使用して、パーシャルでアイコンを参照できます。
アイコンは、[アイコンショートコード]({{< ref "shortcodes#アイコン" >}})を呼び出すことで、記事のコンテンツでも使用できます。
## 拡張機能
Blowfish は、基本機能を拡張できる多数の拡張パーシャルも提供しています。
### 記事リンク
記事リンクの後にコードを追加したい場合は、`layouts/partials/extend-article-link.html` ファイルを作成します。これは、特定の記事のメタデータを強調表示するために使用できる [`badge` ショートコード]({{< ref "shortcodes#バッジ" >}})と組み合わせると特に効果的です。
### ヘッダーとフッター
このテーマでは、テンプレートの `<head>` セクションと `<footer>` セクションに直接コードを追加できます。これらは、テーマの一部ではないスクリプトやその他のロジックを提供するのに役立ちます。
`layouts/partials/extend-head.html` または `layouts/partials/extend-footer.html` を作成するだけで、これらは自動的にウェブサイトのビルドに含まれます。どちらのパーシャルも `<head>``<footer>` の最後の項目として挿入されるため、テーマのデフォルトを上書きするために使用できます。

View file

@ -0,0 +1,139 @@
---
title: "Partials"
weight: 9
draft: false
description: "All the partials available in Blowfish."
slug: "partials"
tags: ["partials", "analytics", "privacy", "comments", "favicons", "icon", "docs"]
series: ["Documentation"]
series_order: 9
---
## Analytics
Blowfish provides built-in support for Fathom Analytics, Google Analytics and Umami Analytics. Fathom is a paid alternative to Google Analytics that respects user privacy.
### Fathom Analytics
To enable Fathom Analytics support, simply provide your Fathom site code in the `config/_default/params.toml` file. If you also use the custom domain feature of Fathom and would like to serve their script from your domain, you can also additionally provide the `domain` configuration value. If you don't provide a `domain` value, the script will load directly from Fathom DNS.
```toml
# config/_default/params.toml
[fathomAnalytics]
site = "ABC12345"
domain = "llama.yoursite.com"
```
### Google Analytics
Google Analytics support is provided through the internal Hugo partial. Simply provide the `googleAnalytics` key in the `config/_default/config.toml` file and the script will be added automatically.
Both version 3 (analytics.js) and version 4 (gtag.js) are supported, based on the configuration value provided:
```toml
# config/_default/config.toml
# version 3
googleAnalytics = "UA-PROPERTY_ID"
# version 4
googleAnalytics = "G-MEASUREMENT_ID"
```
### Umami Analytics
To enable Umami Analytics support, simply provide your [Umami tracking code](https://umami.is/docs/collect-data) in the `config/_default/params.toml` file.
If you also use the custom domain feature of Umami and would like to serve their script from your domain, you can also additionally provide the `domain` configuration value. If you don't provide a `domain` value, the script will load directly from Umami DNS (analytics.umami.is).
If you want the tracker to only run on specific domains, you can provide the `dataDomains` configuration value. If you don't provide a `dataDomains` value, the script will run on any website where the `domain` and`websiteid` match. If the environment variable `TRACKER_SCRIPT_NAME` is configured, you can specify a custom script name `scriptName`. If it is not configured, either comment it out or use the default `script.js`.
{{< alert >}}
**Note:** If you enable Umami Analytics, Blowfish will support [Umami Track Event](https://umami.is/docs/track-events) automatically. If you do not want to support Track Event, the param `enableTrackEvent` must set to `false`.
{{< /alert >}}
```toml
# config/_default/params.toml
[umamiAnalytics]
websiteid = "ABC12345"
domain = "llama.yoursite.com"
dataDomains = "yoursite.com,yoursite2.com"
scriptName = "TRACKER_SCRIPT_NAME"
enableTrackEvent = true
```
### Seline Analytics
To enable Seline Analytics support, simply provide your [Seline token](https://seline.so/docs/install-seline) in the `config/_default/params.toml` file.
{{< alert >}}
**Note:** If you enable Seline Analytics, Blowfish will support [Seline Track Event](https://seline.so/docs/custom-events) automatically. If you do not want to support Track Event, the param `enableTrackEvent` must set to `false`.
{{< /alert >}}
```toml
# config/_default/params.toml
[selineAnalytics]
token = "XXXXXX"
enableTrackEvent = true
```
### Custom analytics providers
If you wish to use a different analytics provider on your website you can also override the analytics partial and provide your own script. Simply create the file `layouts/partials/extend-head.html` in your project and it will automatically include it in the `<head>` of the website.
## Comments
To add comments to your articles, Blowfish includes support for a comments partial that is included at the base of each article page. Simply provide a `layouts/partials/comments.html` which contains the code required to display your chosen comments.
You can use either the built-in Hugo Disqus template, or provide your own custom code. Refer to the [Hugo docs](https://gohugo.io/content-management/comments/) for further information.
Once the partial has been provided, finer control over where comments are displayed is then managed using the `showComments` parameter. This value can be set at the theme level in the `params.toml` [config file]({{< ref "configuration#theme-parameters" >}}), or on a per-article basis by including it in the [front matter]({{< ref "front-matter" >}}). The parameter defaults to `false` so it must be set to `true` in one of these locations in order for comments to be displayed.
## Favicons
Blowfish provides a default set of blank favicons to get started but you can provide your own assets to override them. The easiest way to obtain new favicon assets is to generate them using a third-party provider like [favicon.io](https://favicon.io).
Icon assets should be placed directly in the `static/` folder of your website and named as per the listing below. If you use [favicon.io](https://favicon.io), these will be the filenames that are automatically generated for you, but you can provide your own assets if you wish.
```shell
static/
├─ android-chrome-192x192.png
├─ android-chrome-512x512.png
├─ apple-touch-icon.png
├─ favicon-16x16.png
├─ favicon-32x32.png
├─ favicon.ico
└─ site.webmanifest
```
Alternatively, you can also completely override the default favicon behaviour and provide your own favicon HTML tags and assets. Simply provide a `layouts/partials/favicons.html` file in your project and this will be injected into the site `<head>` in place of the default assets.
## Icon
Similar to the [icon shortcode]({{< ref "shortcodes#icon" >}}), you can include icons in your own templates and partials by using Blowfish's `icon.html` partial. The partial takes one parameter which is the name of the icon to be included.
**Example:**
```go
{{ partial "icon.html" "github" }}
```
Icons are populated using Hugo pipelines which makes them very flexible. Blowfish includes a number of built-in icons for social, links and other purposes. Check the [icon samples]({{< ref "samples/icons" >}}) page for a full list of supported icons.
Custom icons can be added by providing your own icon assets in the `assets/icons/` directory of your project. The icon can then be referenced in the partial by using the SVG filename without the `.svg` extension.
Icons can also be used in article content by calling the [icon shortcode]({{< ref "shortcodes#icon" >}}).
## Extensions
Blowfish also provides for a number of extension partials that allow for expanding upon base functionality.
### Article link
If you wish to insert additional code after article links, create a `layouts/partials/extend-article-link.html` file. This is especially powerful when combined with the [`badge`]({{< ref "shortcodes#badge" >}}) shortcode which can be used to highlight metadata for certain articles.
### Head and Footer
The theme allows for inserting additional code directly into the `<head>` and `<footer>` sections of the template. These can be useful for providing scripts or other logic that isn't part of the theme.
Simply create either `layouts/partials/extend-head.html` or `layouts/partials/extend-footer.html` and these will automatically be included in your website build. Both partials are injected as the last items in `<head>` and `<footer>` so they can be used to override theme defaults.

View file

@ -0,0 +1,142 @@
---
title: "局部模板(Partials)"
weight: 9
draft: false
description: "所有 Blowfish 可以配置的 Partials"
slug: "partials"
tags: ["partials", "统计服务", "隐私", "评论", "网站图标", "图标", "文档"]
series: ["部署教程"]
series_order: 9
---
## 站点分析
Blowfish 支持了 Fathom、Google 和 Umami。Fathom 和 Umami 都是开源、简单、且注重隐私的站点分析服务,他们可以很好地替代 Google 分析。Fathom 和 Umami 都有公有云的付费版本,当然你也可以自己手动部署开源版。
### Fathom
要启用 Fathom Analytics 支持,只需在 `config/_default/params.toml` 文件中提供您的 Fathom 站点代码。如果您还使用 Fathom 的自定义域功能,并希望从您的域中提供脚本,还可以额外提供 `domain` 配置值。如果不提供 `domain` 值,脚本将直接从 Fath只需要在 `config/_default/params.toml` 文件提供你的 Fathom 站点代码,就可以快速支持 Fathom 站点分析。
如果你想使用自定义域名来获取跟踪脚本, 那么需要提供 `domain` 参数,否则会从 Fathom 云服务版的地址 (cdn.usefathom.com) 获取脚本。
```toml
# config/_default/params.toml
[fathomAnalytics]
site = "ABC12345"
domain = "llama.yoursite.com"
```
### Google
Hugo partial 本身已经支持了 Google 站点分析。只需要在 `config/_default/config.toml` 文件添加 `googleAnalytics` 参数即可,跟踪脚本会自动添加。
版本3 (analytics.js) 和版本4 (gtag.js) 都是支持的,参考如下示例:
```toml
# config/_default/config.toml
# 版本 3
googleAnalytics = "UA-PROPERTY_ID"
# 版本 4
googleAnalytics = "G-MEASUREMENT_ID"
```
### Umami
只需要在 `config/_default/params.toml` 文件提供你的 [Umami 跟踪代码](https://umami.is/docs/collect-data),就可以快速支持 Umami 站点分析。
如果你想使用自定义域名来获取跟踪脚本, 那么需要提供 `domain` 参数,否则会从 Umami 云服务版的地址 (analytics.umami.is) 获取脚本。
如果你只想在特别的数个域名中使用 tracker 功能,那么需要提供 `dataDomains` 参数。否则任何一个匹配了 `websiteid``domain` 参数值的网站Umami 脚本都会执行。如果环境变量配置了 `TRACKER_SCRIPT_NAME` 可以填写自定义的脚本名称 `scriptName`,如果没有配置就注释掉或者填写默认的 `script.js`
{{< alert >}}
**Note:** 开启 Umami 网站分析后, Blowfish 会自动支持 [Umami 事件追踪](https://umami.is/docs/track-events)。如果你不想支持此功能,需要把参数 `enableTrackEvent` 设置为 `false`
{{< /alert >}}
```toml
# config/_default/params.toml
[umamiAnalytics]
websiteid = "ABC12345"
domain = "llama.yoursite.com"
dataDomains = "yoursite.com,yoursite2.com"
scriptName = "TRACKER_SCRIPT_NAME"
enableTrackEvent = true
```
### Seline
只需要在 `config/_default/params.toml` 文件提供你的 [Seline token](https://seline.so/docs/install-seline),就可以快速支持 Seline 站点分析。
{{< alert >}}
**Note:** 开启 Seline 网站分析后, Blowfish 会自动支持 [Seline 事件追踪](https://seline.so/docs/custom-events)。如果你不想支持此功能,需要把参数 `enableTrackEvent` 设置为 `false`
{{< /alert >}}
```toml
# config/_default/params.toml
[selineAnalytics]
token = "XXXXXX"
enableTrackEvent = true
```
### 提供自定义站点分析
如果你想在你的网站提供其他站点分析,你可以自己提供脚本,并覆盖 Blowfish 主题中内置的 partial。
只需要创建 `layouts/partials/extend-head.html` 文件并在内容中提供脚本即可Blowfish 主题会自动将 `extend-head.html` 中的内容添加到整个站点的 `<head>` 中。
## 评论
Blowfish 支持了在每篇文章底部添加一个评论功能。只需要提供一个 `layouts/partials/comments.html` 文件,并在其中添加显示评论的代码即可。
你可以使用 Hugo 中内置的 Disqus 模板,也可以提供自定义代码。更多内容和细节可以参考 [Hugo 文档](https://gohugo.io/content-management/comments/).
一旦提供了评论的 partial你就可以使用 `showComments` 更细致地控制评论的显隐。此参数可以在 `params.toml` [配置文件]({{< ref "configuration#theme-parameters" >}}) 中全局设置,也可以在每篇文章的 [扉页参数]({{< ref "front-matter" >}}) 中单独针对特定文章设置。该参数默认为 `false`,因此需要在上面两个位置设置为 `true` 才能显示评论。
## 网站图标Favicons
Blowfish 提供了一套空白网站图标以便快速上手,但你可以提供自己的资源来覆盖他们。想要获取新的图标资源最简单的方法是使用第三方提供商,如 [favicon.io](https://favicon.io)。
网站图标资源的位置在 `static/` 文件夹中,并务必按照如下的名称命名。如果你使用了[favicon.io](https://favicon.io),那么下载下来的文件名和下面的示例完全一致;当然你也可以通过别的方式提供,记得重命名就行。
```shell
static/
├─ android-chrome-192x192.png
├─ android-chrome-512x512.png
├─ apple-touch-icon.png
├─ favicon-16x16.png
├─ favicon-32x32.png
├─ favicon.ico
└─ site.webmanifest
```
或者,您也可以完全覆盖默认的 favicon 行为,提供自己的 favicon HTML 标签和资源。只需在项目中提供一个 `layouts/partials/favicons.html` 文件,该文件就会被加入网站的 `<head>` 中,取代默认资源。
## Icon 图标
与 [图标简码]{{< ref "shortcodes#icon" >}})类似,您也可以通过使用 Blowfish 的 `icon.html` partial在自己的模板和 partial 中加入图标。该部分包含一个参数,即要包含的图标名称。
**示例:**
```go
{{ partial "icon.html" "github" }}
```
图标使用 Hugo 管道填充因此非常灵活。Blowfish 内置了大量用于社交、链接和其他用途的图标。请查看[图标示例]{{< ref "samples/icons" >}})页面,查看支持图标的完整列表。
可以通过在项目的 `assets/icons/` 目录中提供自己的图标资源来添加自定义图标。然后,可以通过使用 SVG 文件名(不含`.svg`扩展名)在局部中引用图标。
图标还可通过调用[图标简码]{{< ref "shortcodes#icon" >}})在文章内容中使用。
## 扩展
Blowfish 还提供了许多扩展 partial可以扩展基本功能。
### 文章链接
如果您希望在文章链接后插入附加代码,请创建一个 `layouts/partials/extend-article-link.html` 文件。如果与[`badge`]({{< ref "shortcodes#badge" >}})简码结合使用,该功能将尤为强大,可用于突出显示某些文章的元数据。
### 头部和尾部
本主题允许在模板的`<head>``<footer>`部分直接插入附加代码。这些代码可用于提供不属于主题的脚本或其他逻辑。
只需创建`layouts/partials/extend-head.html``layouts/partials/extend-footer.html`,这些部分就会自动包含在网站构建中。这两个 partial 将作为最后一项注入到 `<head>``<footer>` 中,因此它们可用于覆盖主题默认值。

Some files were not shown because too many files have changed in this diff Show more