nishiki/hugo-theme-relearn
1
0
Fork 0
mirror of https://github.com/McShelby/hugo-theme-relearn.git synced 2024-10-28 03:03:18 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 2
hugo-theme-relearn/basics/customization/index.html
McShelby 60f55ecbf4 deploy: a7ed81d234
2021-10-16 23:10:53 +00:00

271 lines
No EOL
34 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!doctype html><html lang=en class="js csstransforms3d">
<head>
<meta charset=utf-8>
<meta name=viewport content="width=device-width,initial-scale=1">
<meta name=generator content="Hugo 0.88.1">
<link rel=alternate type=application/rss+xml href=https://example.com/basics/customization/index.xml title="Documentation for Hugo Relearn Theme">
<meta name=description content="Documentation for Hugo Relearn Theme">
<meta name=author content="Sören Weber">
<link rel="shortcut icon" href=../../images/logo.svg>
<title>Customization :: Documentation for Hugo Relearn Theme</title>
<link href=../../css/nucleus.css?1634425850 rel=stylesheet>
<link href=../../css/fontawesome-all.min.css?1634425850 rel=stylesheet>
<link href=../../css/featherlight.min.css?1634425850 rel=stylesheet>
<link href=../../css/perfect-scrollbar.min.css?1634425850 rel=stylesheet>
<link href=../../css/auto-complete.css?1634425850 rel=stylesheet>
<link href=../../css/theme.css?1634425850 rel=stylesheet>
<link href=../../css/theme-relearn.css?1634425850 rel=stylesheet>
<link href=../../css/variant.css?1634425850 rel=stylesheet>
<link href=../../css/print.css?1634425850 rel=stylesheet media=print>
<script src=../../js/jquery.min.js?1634425850></script>
<style>:root #header+#content>#left>#rlblock_left{display:none!important}</style>
</head>
<body data-url=../../basics/customization/>
<nav id=sidebar class=showVisitedLinks>
<div id=header-wrapper>
<div id=header>
<a id=logo href=../../en style="color:#3d414d;font-family:novacento sans wide,helvetica,tahoma,geneva,arial,sans-serif;font-size:30px;font-weight:700;margin-top:-2px"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64.044 64.044" style="height:65px;margin-bottom:-20px;margin-top:-20px;width:65px"><path d="M46.103 136.34c-.642-.394-1.222-2.242-1.98-2.358-.76-.117-1.353.506-1.618 1.519-.266 1.012-.446 4.188.173 5.538.213.435.482.787 1.03.845.547.057.967-.504 1.45-1.027.482-.523.437-.9 1.142-.612.705.289 1.051.4 1.586 1.229.535.828 1.085 4.043.868 5.598-.241 1.458-.531 2.8-.59 4.088.26.075.517.148.772.217 2.68.724 5.373 1.037 7.873.02.001-.028.01-.105.008-.11-.048-.165-.18-.41-.36-.698-.18-.29-.414-.645-.586-1.114a3.212 3.212.0 01-.125-1.735c.056-.21.153-.342.249-.475 1.237-1.193 2.932-1.373 4.244-1.384.557-.004 1.389.016 2.198.255s1.706.724 2.068 1.843c.187.578.114 1.17-.043 1.623-.153.438-.369.783-.545 1.091-.178.31-.329.6-.401.821-.007.02-.003.071-.005.094 2.256 1.008 4.716.91 7.189.398.55-.114 1.11-.247 1.673-.377.344-1.085.678-2.145.852-3.208.124-.752.158-2.311-.078-3.538-.118-.613-.306-1.15-.52-1.489-.221-.349-.413-.501-.747-.538-.243-.027-.51.013-.796.098-.67.223-1.33.606-1.966.76l-.008.002-.109.032c-.556.152-1.233.158-1.797-.36-.556-.51-.89-1.367-1.117-2.596-.283-1.528-.075-3.279.89-4.518l.071-.09h.07c.65-.71 1.485-.802 2.16-.599.706.213 1.333.629 1.772.84.736.354 1.185.319 1.475.171.291-.148.5-.439.668-.955.332-1.017.301-2.819.022-4.106-.148-.684-.13-1.292-.13-1.883-1.558-.463-3.067-.982-4.574-1.208-1.128-.169-2.263-.173-3.298.164-.13.046-.256.095-.38.15-.373.164-.633.342-.805.52-.077.098-.081.105-.087.21-.004.068.031.289.13.571.1.282.256.634.467 1.03.279.524.448 1.063.431 1.618a2.12 2.12.0 01-.499 1.309 1.757 1.757.0 01-.62.51h-.002c-.515.291-1.107.404-1.723.464-.86.083-1.787.026-2.598-.097-.806-.123-1.47-.28-1.948-.555-.444-.256-.79-.547-1.037-.925a2.273 2.273.0 01-.356-1.301c.029-.837.403-1.437.625-1.897.111-.23.191-.433.236-.583.045-.15.044-.25.046-.24-.005-.029-.127-.355-1.015-.741-1.138-.495-2.322-.673-3.533-.668h-.015a9.711 9.711.0 00-.521.016h-.002c-1.163.057-2.35.308-3.541.569.383 1.531.79 2.753.818 4.502-.096 1.297.158 2.114-1.03 2.935-.85.588-1.508.729-2.15.335" style="fill:#3d414d;fill-opacity:1;stroke:none;stroke-width:1.03763;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" transform="translate(-40.698 -95.175)"/><path d="M61.472 101.34v.002c-.3-.003-.603.01-.894.04-.544.055-1.39.165-1.778.306-1.238.364.13 2.344.41 2.913.28.569.285 2.03.14 2.134-.144.103-.375.261-.934.345-.56.084.03-.037-1.589.086-1.62.122-5.506.29-8.265.248-.022.26-.036.521-.097.808-.309 1.442-.63 3.163-.494 4.074.071.473.168.65.414.8.23.14.737.235 1.62-.004.834-.227 1.3-.442 1.887-.456.595-.016 1.555.472 1.965.717.411.245-.03-.008.002.0s.128.05.176.102c.049.053-.276-.523.104.199.379.721.72 3.256.002 4.68-.46.913-1.01 1.49-1.64 1.711-.63.22-1.229.067-1.734-.135-.881-.353-1.584-.7-2.205-.647-1.199 1.94-1.186 4.17-.6 6.602.097.397.212.814.327 1.23 2.68-.556 5.542-1.016 8.337.132 1.064.437 1.73 1.015 1.902 1.857.169.831-.193 1.508-.438 1.986-.122.238-.23.46-.307.642-.07.164-.096.28-.104.324.069.429.309.723.686.945.385.227.89.355 1.35.423.723.104 1.567.152 2.287.086.693-.064 1.032-.338 1.241-.544a2.447 2.447.0 00.303-.437.175.175.0 00.013-.035c-.004-.066-.037-.246-.195-.527-.46-.816-.87-1.595-.817-2.51.028-.476.218-.938.529-1.288.304-.343.698-.586 1.186-.79 1.442-.606 2.96-.609 4.372-.409 1.525.216 2.963.679 4.378 1.083.226-2.09.784-3.9.592-5.77-.058-.565-.287-1.333-.598-1.827-.32-.508-.59-.717-1.036-.642-.648.11-1.472.935-2.707 1.078-.791.092-1.494-.267-1.95-.86-.45-.583-.678-1.335-.78-2.101-.202-1.525.031-3.229.89-4.27.615-.747 1.45-.887 2.15-.74.687.145 1.307.492 1.857.745v-.002c.546.252 1.033.388 1.281.344a.547.547.0 00.353-.188c.113-.124.242-.35.384-.75.604-1.712.206-3.68-.303-5.654-.667.145-1.336.293-2.018.413-1.341.236-2.73.392-4.136.273-.656-.055-1.695-.085-2.58-.476-.442-.195-.903-.514-1.157-1.093-.259-.591-.205-1.313.08-2.014.223-.64 1.082-2.178.692-2.585-.391-.407-1.651-.56-2.554-.571z" style="fill:#3d414d;fill-opacity:1;stroke:none;stroke-width:.992837;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" transform="translate(-40.698 -95.175)"/><path d="M83.128 98.116c-.484 1.875-1.057 3.757-2.486 5.033-.638.57-1.13.666-1.483.548-.401-.134-.715-.506-1.058-.973-.338-.461-.655-.97-1.076-1.332-.192-.165-.404-.315-.683-.38-.279-.066-.599-.02-.9.102-.489.196-.89.58-1.28 1.047a6.1 6.1.0 00-.985 1.632c-.234.591-.356 1.174-.277 1.713.072.487.392.977.905 1.185.463.187.926.156 1.36.154.433.0.843.01 1.242.147.55.189.79.736.822 1.368.034.66-.145 1.412-.393 1.988l-.008.021c-.74 1.705-1.946 2.893-3.004 4.349l-.664.915.979.099c.924.092 1.788.26 2.468.675.46.281 1.806 1.205 2.794 2.222.497.513.888 1.031 1.047 1.502.078.231.095.422.05.6a.93.93.0 01-.345.474c-.301.223-.606.395-.864.532l-.354.186c-.107.058-.189.087-.345.228a.637.637.0 01.062-.045l-.064.041-.209.236-.103.343s.003.126.007.152c.003.017.003.007.004.015v.002c.016.195.061.307.133.476a4.1 4.1.0 00.32.596 5.7 5.7.0 002.8 2.258c.284.108.908.321 1.548.36.33.02.59.015.912-.13h.002c.08-.037.228-.095.382-.281.153-.186.19-.355.212-.445l.019-.075.003-.078c.023-.585-.037-1.296.072-1.899.153-.657.435-.956 1.009-.909 2.771.239 4.74 1.955 6.693 3.83l.742.714.279-1.155c.55-2.29 1.093-4.464 2.928-5.977.692-.57 1.184-.642 1.527-.509.39.151.676.536.996.995.319.458.605.926 1.07 1.212.194.119.464.232.784.209.32-.024.638-.163.988-.384 1.022-.645 1.778-1.756 2.086-2.942.136-.522.102-.991-.046-1.301-.158-.334-.433-.553-.754-.707-.653-.314-1.468-.373-2.094-.486-.825-.15-1.22-.475-1.345-.878-.13-.417.0-.953.335-1.61.6-1.173 1.887-2.602 3.13-3.911l.498-.526-.449-.432c-1.545-1.49-3.163-3.01-5.252-3.715h-.002c-.473-.16-1.097-.413-1.73-.424h-.003c-.311-.004-.596.04-.883.24v.002c-.22.155-.483.537-.583.937l-.008.036-.006.038c-.116.773-.06 1.467-.217 1.995-.063.212-.198.418-.359.507-.202.111-.492.153-.976.072-.582-.097-1.978-.69-3.021-1.503-.523-.407-.934-.85-1.117-1.3a1.153 1.153.0 01-.083-.63c.03-.184.1-.477.308-.593.21-.116.941-.32 1.377-.642h.002c.192-.141.403-.367.518-.64.114-.275.127-.526.123-.774-.006-.142-.036-.192-.08-.3a8.417 8.417.0 00-3-3.027c-1.226-.725-2.585-1.135-3.927-1.539-.434-.12-.844-.111-1.02.466zm.912.947c1.186.364 2.357.718 3.345 1.303 1.035.612 1.864 1.488 2.507 2.528-.514.263-1.095.5-1.44.79s-.729.914-.815 1.434c-.084.509.0.968.155 1.347.301.74.85 1.276 1.44 1.735 1.18.92 2.554 1.545 3.47 1.698.604.1 1.186.088 1.739-.216.594-.327.935-.911 1.088-1.427.264-.884.193-1.664.262-2.17h.1c.3.006.926.206 1.417.371 1.646.554 3.044 1.773 4.431 3.089-1.102 1.174-2.222 2.423-2.888 3.73-.42.823-.73 1.789-.453 2.687.283.913 1.1 1.415 2.138 1.603.691.126 1.472.226 1.84.403.19.091.258.182.278.223.03.064.058.075-.023.387-.21.804-.761 1.598-1.413 2.01-.247.155-.365.183-.407.187-.042.003-.061.002-.172-.066-.144-.088-.455-.473-.772-.929-.317-.454-.714-1.07-1.452-1.356-.783-.304-1.776-.022-2.713.75-1.942 1.6-2.626 3.764-3.146 5.8-1.802-1.676-3.772-3.138-6.589-3.517h-.002c-.346-.095-1.013-.031-1.293.143-.735.501-1.005 1.132-1.168 2.007-.125.69-.082 1.216-.074 1.659-.055.006-.046.01-.104.006-.42-.026-1.035-.215-1.244-.295-.947-.361-1.774-1.006-2.314-1.857-.054-.085-.072-.132-.109-.2l.027-.016c.284-.15.656-.36 1.045-.648.44-.327.789-.798.93-1.35a2.4 2.4.0 00-.068-1.379c-.254-.751-.753-1.353-1.295-1.911-1.09-1.124-2.452-2.049-2.99-2.378-.609-.372-1.303-.44-1.981-.56.875-1.094 1.878-2.251 2.596-3.921.294-.823.543-1.907.513-2.658-.049-.97-.489-2.013-1.52-2.367-.579-.2-1.131-.204-1.58-.203-.45.002-.786-.006-.97-.08h-.002c-.264-.107-.236-.108-.268-.33-.025-.17.021-.553.183-.962a4.67 4.67.0 01.725-1.192c.29-.348.617-.59.705-.626.142-.057.176-.05.22-.04.045.011.127.052.263.17.235.201.56.671.92 1.161.354.484.791 1.08 1.543 1.33.8.267 1.784-.052 2.671-.846 1.594-1.424 2.235-3.317 2.714-5.051zm11.705 7.023c-.02.014.042-.002.042.0l-.008.035c.05-.2-.028-.04-.034-.035zM79.472 122.45a.198.198.0 01.005.023v.014c-.002-.01-.003-.03-.005-.037zm-.29.732-.006.01-.044.027c.016-.01.033-.024.05-.036z" style="color:#000;fill:#3d414d;stroke-width:1.02352;-inkscape-stroke:none" transform="translate(-40.698 -95.175)"/><path d="M76.694 128.845c-.85-.012-1.668.253-2.434.67-.01.592-.015 1.17.109 1.772.323 1.573.422 3.553-.07 5.147-.247.804-.684 1.535-1.347 1.891s-1.467.296-2.362-.159c-.522-.266-1.059-.62-1.487-.757-.223-.072-.392-.096-.522-.069-.13.027-.232.094-.362.27-.53.719-.681 1.823-.497 2.876.177 1.012.418 1.438.543 1.56.143.137.26.154.604.055.548-.158 1.523-.857 2.573-.972l.02-.002.5.058c.686.081 1.247.562 1.622 1.19.372.62.591 1.37.73 2.136.279 1.532.25 3.16.083 4.232-.14.91-.394 1.72-.632 2.53 1.719-.385 3.485-.692 5.307-.36 1.174.214 2.749.574 3.762 1.977l.088.122.046.159c.162.551.16 1.114.024 1.578-.13.45-.348.772-.533 1.023-.181.246-.336.444-.437.606-.102.16-.141.275-.145.336-.01.17.0.197.07.315.057.1.186.242.39.366.408.246 1.106.414 1.843.45a7.842 7.842.0 002.174-.21 4.28 4.28.0 00.822-.296c.218-.106.385-.242.377-.233l.029-.031c.025-.035.05-.072.05-.068.0-.004.0-.017-.003-.05a2.733 2.733.0 00-.21-.579c-.26-.548-.839-1.333-.822-2.46.01-.657.27-1.21.598-1.576.32-.357.696-.575 1.074-.736.759-.323 1.57-.418 2.054-.458 1.653-.136 3.252.296 4.755.765.457.142.905.29 1.352.434.325-2.258.902-4.247.598-6.217-.071-.46-.25-1.169-.486-1.684-.238-.518-.495-.762-.675-.779-.351-.032-.716.14-1.174.418-.457.277-1.005.665-1.695.742-.745.082-1.406-.291-1.84-.908-.428-.608-.653-1.394-.754-2.196-.203-1.596.016-3.377.794-4.493.568-.813 1.358-.984 2.024-.835.65.146 1.243.51 1.769.779.524.267.99.413 1.237.365a.527.527.0 00.346-.2c.11-.132.235-.373.37-.798.612-1.918.27-3.894-.246-6.054-2.815-.851-5.49-1.534-8.089-.267a.727.727.0 00-.223.148c-.024.028-.018.021-.026.056.001-.003-.01.178.07.44.162.522.611 1.29.911 1.978l.004.009.029.063.024.084V133c.162.635.016 1.297-.274 1.727-.272.404-.618.636-.952.81-.675.353-1.399.484-1.724.533a5.888 5.888.0 01-3.973-.795c-.512-.311-.876-.594-1.133-1.02-.282-.466-.318-1.084-.172-1.557.252-.814.715-1.266.971-1.89a.663.663.0 00.047-.14c.001-.013.0-.006-.007-.037a.761.761.0 00-.184-.268c-.264-.267-.865-.595-1.54-.826-1.356-.462-3.07-.659-3.583-.686-.062-.002-.121-.006-.178-.006z" style="fill:#3d414d;fill-opacity:1;stroke:none;stroke-width:.991342;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" transform="translate(-40.698 -95.175)"/></svg>
Relearn
</a>
</div>
<div class=searchbox>
<label for=search-by><i class="fas fa-search"></i></label>
<input data-search-input id=search-by type=search placeholder=Search...>
<span data-search-clear><i class="fas fa-times"></i></span>
</div>
<script src=../../js/lunr.min.js?1634425850></script>
<script src=../../js/auto-complete.js?1634425850></script>
<script>var index_url="../../index.json",root_url="../../",baseUri=root_url.replace(/\/$/,'')</script>
<script src=../../js/search.js?1634425850></script>
</div>
<div class=highlightable>
<ul class=topics>
<li data-nav-id=/basics/ title=Basics class="dd-item parent"><a href=../../basics/><b>1.</b> Basics<i class="fas fa-check read-icon"></i></a><ul>
<li data-nav-id=/basics/migration/ title="What's new" class="dd-item alwaysopen"><a href=../../basics/migration/>What's new<i class="fas fa-check read-icon"></i></a><ul></ul></li>
<li data-nav-id=/basics/requirements/ title=Requirements class="dd-item alwaysopen"><a href=../../basics/requirements/>Requirements<i class="fas fa-check read-icon"></i></a><ul></ul></li>
<li data-nav-id=/basics/installation/ title=Installation class="dd-item alwaysopen"><a href=../../basics/installation/>Installation<i class="fas fa-check read-icon"></i></a><ul></ul></li>
<li data-nav-id=/basics/configuration/ title=Configuration class="dd-item alwaysopen"><a href=../../basics/configuration/>Configuration<i class="fas fa-check read-icon"></i></a><ul></ul></li>
<li data-nav-id=/basics/customization/ title=Customization class="dd-item active parent alwaysopen"><a href=../../basics/customization/>Customization<i class="fas fa-check read-icon"></i></a><ul></ul></li>
<li data-nav-id=/basics/history/ title=History class="dd-item alwaysopen"><a href=../../basics/history/>History<i class="fas fa-check read-icon"></i></a><ul></ul></li></ul></li>
<li data-nav-id=/cont/ title=Content class=dd-item><a href=../../cont/><b>2.</b> Content<i class="fas fa-check read-icon"></i></a><ul>
<li data-nav-id=/cont/pages/ title="Pages organization" class="dd-item alwaysopen"><a href=../../cont/pages/>Pages organization<i class="fas fa-check read-icon"></i></a><ul></ul></li>
<li data-nav-id=/cont/archetypes/ title=Archetypes class=dd-item><a href=../../cont/archetypes/>Archetypes<i class="fas fa-check read-icon"></i></a></li>
<li data-nav-id=/cont/markdown/ title="Markdown syntax" class=dd-item><a href=../../cont/markdown/>Markdown syntax<i class="fas fa-check read-icon"></i></a></li>
<li data-nav-id=/cont/syntaxhighlight/ title="Code highlighting" class=dd-item><a href=../../cont/syntaxhighlight/>Code highlighting<i class="fas fa-check read-icon"></i></a></li>
<li data-nav-id=/cont/menushortcuts/ title="Menu extra shortcuts" class=dd-item><a href=../../cont/menushortcuts/>Menu extra shortcuts<i class="fas fa-check read-icon"></i></a></li>
<li data-nav-id=/cont/icons/ title="Icons and logos" class=dd-item><a href=../../cont/icons/>Icons and logos<i class="fas fa-check read-icon"></i></a></li>
<li data-nav-id=/cont/i18n/ title="Multilingual and i18n" class="dd-item alwaysopen"><a href=../../cont/i18n/>Multilingual and i18n<i class="fas fa-check read-icon"></i></a><ul></ul></li>
<li data-nav-id=/cont/tags/ title=Tags class=dd-item><a href=../../cont/tags/>Tags<i class="fas fa-check read-icon"></i></a></li></ul></li>
<li data-nav-id=/shortcodes/ title=Shortcodes class=dd-item><a href=../../shortcodes/><b>3.</b> Shortcodes<i class="fas fa-check read-icon"></i></a><ul>
<li data-nav-id=/shortcodes/attachments/ title=Attachments class=dd-item><a href=../../shortcodes/attachments/>Attachments<i class="fas fa-check read-icon"></i></a></li>
<li data-nav-id=/shortcodes/button/ title=Button class=dd-item><a href=../../shortcodes/button/>Button<i class="fas fa-check read-icon"></i></a></li>
<li data-nav-id=/shortcodes/children/ title=Children class=dd-item><a href=../../shortcodes/children/>Children<i class="fas fa-check read-icon"></i></a><ul>
<li data-nav-id=/shortcodes/children/test/ title="page X" class=dd-item><a href=../../shortcodes/children/test/>page X<i class="fas fa-check read-icon"></i></a></li>
<li data-nav-id=/shortcodes/children/children-1/ title="page 1" class=dd-item><a href=../../shortcodes/children/children-1/>page 1<i class="fas fa-check read-icon"></i></a><ul>
<li data-nav-id=/shortcodes/children/children-1/children-1-1/ title="page 1-1" class=dd-item><a href=../../shortcodes/children/children-1/children-1-1/>page 1-1<i class="fas fa-check read-icon"></i></a><ul>
<li data-nav-id=/shortcodes/children/children-1/children-1-1/children-1-1-2/ title="page 1-1-2" class="dd-item alwaysopen"><a href=../../shortcodes/children/children-1/children-1-1/children-1-1-2/>page 1-1-2<i class="fas fa-check read-icon"></i></a><ul>
<li data-nav-id=/shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-1/ title="page 1-1-2-1" class="dd-item alwaysopen"><a href=../../shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-1/>page 1-1-2-1<i class="fas fa-check read-icon"></i></a><ul></ul></li>
<li data-nav-id=/shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-2/ title="page 1-1-2-2" class="dd-item alwaysopen"><a href=../../shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-2/>page 1-1-2-2<i class="fas fa-check read-icon"></i></a><ul></ul></li></ul></li>
<li data-nav-id=/shortcodes/children/children-1/children-1-1/children-1-1-3/ title="page 1-1-3" class="dd-item alwaysopen"><a href=../../shortcodes/children/children-1/children-1-1/children-1-1-3/>page 1-1-3<i class="fas fa-check read-icon"></i></a><ul></ul></li></ul></li></ul></li>
<li data-nav-id=/shortcodes/children/children-2/ title="page 2" class=dd-item><a href=../../shortcodes/children/children-2/>page 2<i class="fas fa-check read-icon"></i></a><ul></ul></li>
<li data-nav-id=/shortcodes/children/children-3/ title="page 3" class=dd-item><a href=../../shortcodes/children/children-3/>page 3<i class="fas fa-check read-icon"></i></a><ul>
<li data-nav-id=/shortcodes/children/children-3/test3/ title="page 3-1" class=dd-item><a href=../../shortcodes/children/children-3/test3/>page 3-1<i class="fas fa-check read-icon"></i></a></li></ul></li></ul></li>
<li data-nav-id=/shortcodes/expand/ title=Expand class=dd-item><a href=../../shortcodes/expand/>Expand<i class="fas fa-check read-icon"></i></a></li>
<li data-nav-id=/shortcodes/include/ title=Include class=dd-item><a href=../../shortcodes/include/>Include<i class="fas fa-check read-icon"></i></a></li>
<li data-nav-id=/shortcodes/mermaid/ title=Mermaid class=dd-item><a href=../../shortcodes/mermaid/>Mermaid<i class="fas fa-check read-icon"></i></a></li>
<li data-nav-id=/shortcodes/notice/ title=Notice class=dd-item><a href=../../shortcodes/notice/>Notice<i class="fas fa-check read-icon"></i></a></li>
<li data-nav-id=/shortcodes/siteparam/ title="Site param" class=dd-item><a href=../../shortcodes/siteparam/>Site param<i class="fas fa-check read-icon"></i></a></li>
<li data-nav-id=/shortcodes/tabs/ title="Tabbed views" class=dd-item><a href=../../shortcodes/tabs/>Tabbed views<i class="fas fa-check read-icon"></i></a></li></ul></li>
</ul>
<div id=shortcuts>
<div class=nav-title>More</div>
<ul>
<li><a class=padding href=../../tags/><i class="fas fa-fw fa-tags"></i> Tags</a></li>
<li><a class=padding href=https://github.com/McShelby/hugo-theme-relearn><i class="fab fa-fw fa-github"></i> GitHub repo</a></li>
<li><a class=padding href=../../showcase><i class="fas fa-fw fa-camera"></i> Showcases</a></li>
<li><a class=padding href=https://gohugo.io/><i class="fas fa-fw fa-bookmark"></i> Hugo Documentation</a></li>
<li><a class=padding href=../../credits><i class="fas fa-fw fa-bullhorn"></i> Credits</a></li>
</ul>
</div>
<div id=prefooter>
<hr>
<ul>
<li>
<a class=padding>
<i class="fas fa-language fa-fw"></i>
<div class=select-style>
<select id=select-language onchange="location=this.value"><option id=pir value=https://example.com/pir/basics/customization/>Arrr! Pirrrates</option><option id=en value=https://example.com/basics/customization/ selected>English</option></select><svg id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="255" height="255" viewBox="0 0 255 255" style="enable-background:new 0 0 255 255"><g><g id="arrow-drop-down"><polygon points="0,63.75 127.5,191.25 255,63.75"/></g></g></svg>
</div>
</a>
</li>
<li><a class=padding href=# data-clear-history-toggle><i class="fas fa-history fa-fw"></i> Clear History</a></li>
</ul>
</div>
<div id=footer>
<a class=github-button href=https://github.com/McShelby/hugo-theme-relearn/archive/main.zip data-icon=octicon-cloud-download aria-label="Download McShelby/hugo-theme-relearn on GitHub">Download</a>
<a class=github-button href=https://github.com/McShelby/hugo-theme-relearn data-icon=octicon-star data-show-count=true aria-label="Star McShelby/hugo-theme-relearn on GitHub">Star</a>
<a class=github-button href=https://github.com/McShelby/hugo-theme-relearn/fork data-icon=octicon-repo-forked data-show-count=true aria-label="Fork McShelby/hugo-theme-relearn on GitHub">Fork</a>
<p>Built with <a href=https://github.com/McShelby/hugo-theme-relearn><i class="fas fa-heart"></i></a> by <a href=https://gohugo.io/>Hugo</a></p>
<script async defer src=https://buttons.github.io/buttons.js></script>
</div>
</div>
</nav>
<div id=body>
<div id=overlay></div>
<div class="padding highlightable">
<div id=top-bar>
<div id=top-github-link>
<a class=github-link title="Edit this page" href=https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/basics/customization/_index.en.md target=blank>
<i class="fas fa-code-branch"></i>
<span id=top-github-link-text>Edit this page</span>
</a>
</div>
<div id=breadcrumbs>
<span id=sidebar-toggle-span>
<a href=# id=sidebar-toggle data-sidebar-toggle>
<i class="fas fa-bars"></i>
</a>
</span>
<span id=toc-menu><i class="fas fa-list-alt"></i></span>
<ol class=links itemscope itemtype=http://schema.org/BreadcrumbList>
<meta itemprop=itemListOrder content="Descending">
<li itemscope itemtype=https://schema.org/ListItem itemprop=itemListElement><meta itemprop=position content="3"><a itemprop=item href=../../><span itemprop=name>Relearn Theme for Hugo</span></a> > </li>
<li itemscope itemtype=https://schema.org/ListItem itemprop=itemListElement><meta itemprop=position content="2"><a itemprop=item href=../../basics/><span itemprop=name>Basics</span></a> > </li>
<li itemscope itemtype=https://schema.org/ListItem itemprop=itemListElement><meta itemprop=position content="1"><a itemprop=item href=../../basics/customization/ aria-disabled=true><span itemprop=name>Customization</span></a></li>
</ol>
</div>
<div class=progress>
<div class=wrapper>
<nav id=TableOfContents>
<ul>
<li><a href=#change-the-logo>Change the logo</a></li>
<li><a href=#change-the-favicon>Change the favicon</a></li>
<li><a href=#theme-variant>Change default colors</a>
<ul>
<li><a href=#standard-variant>Standard variant</a></li>
<li><a href=#red-variant>Red variant</a></li>
<li><a href=#blue-variant>Blue variant</a></li>
<li><a href=#green-variant>Green variant</a></li>
<li><a href=#mine-variant>&lsquo;Mine‘ variant</a></li>
</ul>
</li>
</ul>
</nav>
</div>
</div>
</div>
<div id=head-tags>
</div>
<main id=body-inner>
<h1>Customization</h1>
<p>The Relearn theme has been built to be as configurable as possible by defining multiple <a href=https://gohugo.io/templates/partials/>partials</a></p>
<p>In <code>themes/hugo-theme-relearn/layouts/partials/</code>, you will find all the partials defined for this theme. If you need to overwrite something, don&rsquo;t change the code directly. Instead <a href=https://gohugo.io/themes/customizing/>follow this page</a>. You&rsquo;d create a new partial in the <code>layouts/partials</code> folder of your local project. This partial will have the priority.</p>
<p>This theme defines the following partials :</p>
<ul>
<li><em>content</em>: the content page itself. This can be overridden if you wan&rsquo;t to display page&rsquo;s meta data above or below the content.</li>
<li><em>header</em>: the header of the content page (contains the breadcrumbs). <em>Not meant to be overwritten</em></li>
<li><em>custom-header</em>: custom headers in page. Meant to be overwritten when adding CSS imports. Don&rsquo;t forget to include <code>style</code> HTML tag directive in your file</li>
<li><em>footer</em>: the footer of the content page (contains the arrows). <em>Not meant to be overwritten</em></li>
<li><em>custom-footer</em>: custom footer in page. Meant to be overwritten when adding Javacript. Don&rsquo;t forget to include <code>javascript</code> HTML tag directive in your file</li>
<li><em>favicon</em>: the favicon</li>
<li><em>logo</em>: the logo, on top left hand corner.</li>
<li><em>meta</em>: HTML meta tags, if you want to change default behavior</li>
<li><em>menu</em>: left menu. <em>Not meant to be overwritten</em></li>
<li><em>menu-pre</em>: side-wide configuration to prepend to menu items. If you override this, it is your responsiblity to take the page&rsquo;s <code>pre</code> setting into account.</li>
<li><em>menu-post</em>: side-wide configuration to append to menu items. If you override this, it is your responsiblity to take the page&rsquo;s <code>post</code> setting into account.</li>
<li><em>menu-footer</em>: footer of the the left menu</li>
<li><em>search</em>: search box</li>
<li><em>toc</em>: table of contents</li>
</ul>
<h2 id=change-the-logo>Change the logo</h2>
<p>Create a new file in <code>layouts/partials/</code> named <code>logo.html</code>. Then write any HTML you want.
You could use an <code>img</code> HTML tag and reference an image created under the <em>static</em> folder, or you could paste a SVG definition!</p>
<div class="notices note">
<div class=label>Note</div><p>The size of the logo will adapt automatically</p>
</div>
<h2 id=change-the-favicon>Change the favicon</h2>
<p>If your favicon is a png, just drop off your image in your local <code>static/images/</code> folder and name it <code>favicon.png</code></p>
<p>If you need to change this default behavior, create a new file in <code>layouts/partials/</code> named <code>favicon.html</code>. Then write something like this:</p>
<div class=highlight><pre tabindex=0 style=color:#e2e4e5;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4><code class=language-html data-lang=html>&lt;<span style=color:#ff6ac1>link</span> <span style=color:#57c7ff>rel</span><span style=color:#ff6ac1>=</span><span style=color:#5af78e>&#34;shortcut icon&#34;</span> <span style=color:#57c7ff>href</span><span style=color:#ff6ac1>=</span><span style=color:#5af78e>&#34;/images/favicon.png&#34;</span> <span style=color:#57c7ff>type</span><span style=color:#ff6ac1>=</span><span style=color:#5af78e>&#34;image/x-icon&#34;</span> /&gt;
</code></pre></div><h2 id=theme-variant>Change default colors</h2>
<p>The Relearn theme let you choose between some predefined color scheme variants, but feel free to add one yourself!</p>
<h3 id=standard-variant>Standard variant</h3>
<div class=highlight><pre tabindex=0 style=color:#e2e4e5;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4><code class=language-toml data-lang=toml>[params]
<span style=color:#78787e># Change default color scheme with a variant one. Can be empty, &#34;red&#34;, &#34;blue&#34;, &#34;green&#34;.</span>
themeVariant = <span style=color:#5af78e>&#34;&#34;</span>
</code></pre></div><p><img src="../../basics/customization/images/standard-variant.png?width=60pc" alt="Red variant"></p>
<h3 id=red-variant>Red variant</h3>
<div class=highlight><pre tabindex=0 style=color:#e2e4e5;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4><code class=language-toml data-lang=toml>[params]
<span style=color:#78787e># Change default color scheme with a variant one. Can be empty, &#34;red&#34;, &#34;blue&#34;, &#34;green&#34;.</span>
themeVariant = <span style=color:#5af78e>&#34;red&#34;</span>
</code></pre></div><p><img src="../../basics/customization/images/red-variant.png?width=60pc" alt="Red variant"></p>
<h3 id=blue-variant>Blue variant</h3>
<div class=highlight><pre tabindex=0 style=color:#e2e4e5;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4><code class=language-toml data-lang=toml>[params]
<span style=color:#78787e># Change default color scheme with a variant one. Can be empty, &#34;red&#34;, &#34;blue&#34;, &#34;green&#34;.</span>
themeVariant = <span style=color:#5af78e>&#34;blue&#34;</span>
</code></pre></div><p><img src="../../basics/customization/images/blue-variant.png?width=60pc" alt="Blue variant"></p>
<h3 id=green-variant>Green variant</h3>
<div class=highlight><pre tabindex=0 style=color:#e2e4e5;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4><code class=language-toml data-lang=toml>[params]
<span style=color:#78787e># Change default color scheme with a variant one. Can be empty, &#34;red&#34;, &#34;blue&#34;, &#34;green&#34;.</span>
themeVariant = <span style=color:#5af78e>&#34;green&#34;</span>
</code></pre></div><p><img src="../../basics/customization/images/green-variant.png?width=60pc" alt="Green variant"></p>
<h3 id=mine-variant>&lsquo;Mine‘ variant</h3>
<p>First, create a new CSS file in your local <code>static/css</code> folder prefixed by <code>theme</code> (e.g. with <em>mine</em> theme <code>static/css/theme-mine.css</code>). Copy the following content and modify colors in CSS variables.</p>
<div class=highlight><pre tabindex=0 style=color:#e2e4e5;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4><code class=language-css data-lang=css>:<span style=color:#ff9f43>root</span> {
<span style=color:#ff5c57>--MAIN-TEXT-color</span>: <span style=color:#ff9f43>#323232</span>; <span style=color:#78787e>/* Color of text by default */</span>
<span style=color:#ff5c57>--MAIN-TITLES-TEXT-color</span>: <span style=color:#ff9f43>#5e5e5e</span>; <span style=color:#78787e>/* Color of titles h2-h3-h4-h5-h6 */</span>
<span style=color:#ff5c57>--MAIN-LINK-color</span>: <span style=color:#ff9f43>#1C90F3</span>; <span style=color:#78787e>/* Color of links */</span>
<span style=color:#ff5c57>--MAIN-LINK-HOVER-color</span>: <span style=color:#ff9f43>#167ad0</span>; <span style=color:#78787e>/* Color of hovered links */</span>
<span style=color:#ff5c57>--MAIN-ANCHOR-color</span>: <span style=color:#ff9f43>#1C90F3</span>; <span style=color:#78787e>/* color of anchors on titles */</span>
<span style=color:#ff5c57>--MAIN-CODE-color</span>: <span style=color:#ff9f43>#e2e4e5</span>; <span style=color:#78787e>/* fallback color for code background */</span>
<span style=color:#ff5c57>--MAIN-CODE-BG-color</span>: <span style=color:#ff9f43>#282a36</span>; <span style=color:#78787e>/* fallback color for code text */</span>
<span style=color:#ff5c57>--MENU-HOME-LINK-color</span>: <span style=color:#ff9f43>#323232</span>; <span style=color:#78787e>/* Color of the home button text */</span>
<span style=color:#ff5c57>--MENU-HOME-LINK-HOVER-color</span>: <span style=color:#ff9f43>#5e5e5e</span>; <span style=color:#78787e>/* Color of the hovered home button text */</span>
<span style=color:#ff5c57>--MENU-HEADER-BG-color</span>: <span style=color:#ff9f43>#1C90F3</span>; <span style=color:#78787e>/* Background color of menu header */</span>
<span style=color:#ff5c57>--MENU-HEADER-BORDER-color</span>: <span style=color:#ff9f43>#33a1ff</span>; <span style=color:#78787e>/*Color of menu header border */</span>
<span style=color:#ff5c57>--MENU-SEARCH-BG-color</span>: <span style=color:#ff9f43>#167ad0</span>; <span style=color:#78787e>/* Search field background color (by default borders + icons) */</span>
<span style=color:#ff5c57>--MENU-SEARCH-BOX-color</span>: <span style=color:#ff9f43>#33a1ff</span>; <span style=color:#78787e>/* Override search field border color */</span>
<span style=color:#ff5c57>--MENU-SEARCH-BOX-ICONS-color</span>: <span style=color:#ff9f43>#a1d2fd</span>; <span style=color:#78787e>/* Override search field icons color */</span>
<span style=color:#ff5c57>--MENU-SECTIONS-ACTIVE-BG-color</span>: <span style=color:#ff9f43>#20272b</span>; <span style=color:#78787e>/* Background color of the active section and its children */</span>
<span style=color:#ff5c57>--MENU-SECTIONS-BG-color</span>: <span style=color:#ff9f43>#252c31</span>; <span style=color:#78787e>/* Background color of other sections */</span>
<span style=color:#ff5c57>--MENU-SECTIONS-LINK-color</span>: <span style=color:#ff9f43>#ccc</span>; <span style=color:#78787e>/* Color of links in menu */</span>
<span style=color:#ff5c57>--MENU-SECTIONS-LINK-HOVER-color</span>: <span style=color:#ff9f43>#e6e6e6</span>; <span style=color:#78787e>/* Color of links in menu, when hovered */</span>
<span style=color:#ff5c57>--MENU-SECTION-ACTIVE-CATEGORY-color</span>: <span style=color:#ff9f43>#777</span>; <span style=color:#78787e>/* Color of active category text */</span>
<span style=color:#ff5c57>--MENU-SECTION-ACTIVE-CATEGORY-BG-color</span>: <span style=color:#ff9f43>#fff</span>; <span style=color:#78787e>/* Color of background for the active category (only) */</span>
<span style=color:#ff5c57>--MENU-VISITED-color</span>: <span style=color:#ff9f43>#33a1ff</span>; <span style=color:#78787e>/* Color of &#39;page visited&#39; icons in menu */</span>
<span style=color:#ff5c57>--MENU-SECTION-HR-color</span>: <span style=color:#ff9f43>#20272b</span>; <span style=color:#78787e>/* Color of &lt;hr&gt; separator in menu */</span>
}
</code></pre></div><p>Then, set the <code>themeVariant</code> value with the name of your custom theme file. That&rsquo;s it!</p>
<div class=highlight><pre tabindex=0 style=color:#e2e4e5;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4><code class=language-toml data-lang=toml>[params]
<span style=color:#78787e># Change default color scheme with a variant one. Can be &#34;red&#34;, &#34;blue&#34;, &#34;green&#34;.</span>
themeVariant = <span style=color:#5af78e>&#34;mine&#34;</span>
</code></pre></div>
<footer class=footline>
</footer>
</main>
</div>
<div id=navigation>
<a class="nav nav-prev" href=../../basics/configuration/ title=Configuration><i class="fa fa-chevron-left"></i></a>
<a class="nav nav-next" href=../../basics/history/ title=History><i class="fa fa-chevron-right"></i></a>
</div>
</div>
<div style=left:-1000px;overflow:scroll;position:absolute;top:-1000px;border:none;box-sizing:content-box;height:200px;margin:0;padding:0;width:200px>
<div style=border:none;box-sizing:content-box;height:200px;margin:0;padding:0;width:200px></div>
</div>
<script src=../../js/clipboard.min.js?1634425850></script>
<script src=../../js/perfect-scrollbar.min.js?1634425850></script>
<script src=../../js/perfect-scrollbar.jquery.min.js?1634425850></script>
<script src=../../js/jquery.svg.pan.zoom.js?1634425850></script>
<script src=../../js/featherlight.min.js?1634425850></script>
<script src=../../js/modernizr.custom-3.6.0.js?1634425850></script>
<script src=../../js/mermaid.min.js?1634425850></script>
<script>typeof mermaid!='undefined'&&mermaid.mermaidAPI.initialize(Object.assign({securityLevel:"antiscript"},JSON.parse('{ "startOnLoad": true }'),{startOnLoad:!1}))</script>
<script src=../../js/relearn.js?1634425850></script>
</body>
</html>
Reference in a new issue View git blame Copy permalink