blowfish
This commit is contained in:
parent
bfbe0de3c6
commit
30c2170ae7
1369 changed files with 92622 additions and 16 deletions
|
|
@ -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 |
|
|
@ -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.
|
||||
|
|
@ -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/)も、テンプレート作成について学ぶための優れた情報源です。
|
||||
|
|
@ -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.
|
||||
|
|
@ -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/) 也是学习创建自定义模板的宝贵资源。
|
||||
Loading…
Add table
Add a link
Reference in a new issue