Hello,
I had to change my personal site but my skills are poor. I succeeded the customization but I need one more step : to have a link for an english version.
Is there a way I can modify this “head.php” ? Remove the useless “dark mode” button and but a link to the english mirror site ?
Any help would be very important. Thanks !
<!DOCTYPE html>
<?php
$siteTitle = $site->title();
$pageTitle = $title . ' | ' . $siteTitle;
$description = $description != '' ? $description->excerpt(200, true, '') : '';
$locale = $kirby->languages() && $kirby->languages()->count() > 1 ? $kirby->language()->code() : $site->lang()->html();
// adjust for dist!
$font = '';
if ($page->template() == 'article-doc') {
if (param('font') == '') {
$font = 'pt_sans';
} else {
$font = param('font');
}
} else {
$font = $site->fonts();
}
?>
<html class="no-js <?= $font ?>-font-family" lang="<?= $locale ?>">
<head>
<meta charset="utf-8">
<title><?= ($page->isHomePage()) ? $siteTitle : $pageTitle ?></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<?php if ($description != ''): ?>
<meta name="description" content="<?= $description ?>">
<?php endif ?>
<?php if (isset($user) && $user != ''): ?>
<meta name="author" content="<?= $user->name() ?>">
<?php endif ?>
<meta property="og:site_name" content="<?= $siteTitle ?>">
<meta property="og:title" content="<?= $title ?>">
<meta property="og:type" content="website">
<meta property="og:url" content="<?= $page->url() ?>">
<?php if ($description != ''): ?>
<meta property="og:description" content="<?= $description ?>">
<?php endif ?>
<?php if ($cover != ''): ?>
<meta property="og:image" content="<?= $cover->resize(1200, 1200)->url() ?>">
<?php endif ?>
<meta property="og:locale" content="<?= $locale ?>">
<?php if ($kirby->languages()) : ?>
<?php foreach ($kirby->languages() as $language) : ?>
<?php if ($language == $kirby->languages()->default()) : ?>
<link rel="alternate" hreflang="x-default" href="<?= $page->url($language->code()) ?>">
<?php else : ?>
<link rel="alternate" hreflang="<?= $language->code() ?>" href="<?= $page->url($language->code()) ?>">
<?php endif ?>
<?php endforeach ?>
<?php endif ?>
<script>document.documentElement.classList.replace('no-js', 'js');</script>
<?php
if ($page->template() == 'article-doc') {
snippet('fonts-doc');
} else {
snippet('fonts');
}
?>
<link rel="preload" href="<?= url('/assets/css/style.css') ?><?= ($site->cssversion()->isNotEmpty()) ? '?v=' . $site->cssversion() : '' ?>" as="style">
<link rel="stylesheet" href="<?= url('/assets/css/style.css') ?><?= ($site->cssversion()->isNotEmpty()) ? '?v=' . $site->cssversion() : '' ?>">
<?= css('@auto') ?>
<?= css($page->files()->filterBy('extension', 'css')->pluck('url')) ?>
<?php if ($page->layout()->toLayouts()->hasBlockType('gallery')): ?>
<?= js('assets/js/scripts/spotlight.min.js', ['defer' => true]) ?>
<?php if ($lightbox = asset('assets/css/spotlight.css')): ?>
<style><?= $lightbox->read() ?></style>
<?php endif ?>
<?php endif ?>
<link rel="sitemap" type="application/xml" title="Sitemap" href="<?= url('sitemap') ?>">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#f4f4f4">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180.png">
<?php $fathom = $site->fathom();
if ($fathom != ''): ?>
<script src="https://cdn.usefathom.com/script.js" data-site="<?= $fathom ?>" defer></script>
<?php endif ?>
<!-- remove for dist -->
<?php if ($page->template() == 'article-doc'): ?>
<?= css('assets/css/documentation.css?v=1.0') ?>
<?php endif ?>
</head>
<body class="<?= $page->template() ?>-template <?= $site->colors() ?>">
<header id="top" class="site-header">
<div class="page menu-wrapper">
<div class="brand">
<?php snippet('logo-name', ['scale' => $site->logo_size()]) ?>
</div>
<div class="utilities">
<?php if ($kirby->languages() and $kirby->languages()->count() > 1) : ?>
<div class="languages nav deco">
<h2 class="sr-only"><?= ($site->languages()->isNotEmpty()) ? $site->languages() : 'Languages'; ?></h2>
<ul class="marbe0 unstyled">
<?php foreach ($kirby->languages() as $language) : ?>
<li<?php e($kirby->language() == $language, ' class="current" aria-current="true"') ?>>
<a href="<?= $page->url($language->code()) ?>" hreflang="<?php echo $language->code() ?>">
<abbr title="<?= $language->name() ?>"><?= html($language->code()) ?></abbr>
</a>
</li>
<?php endforeach ?>
</ul>
</div>
<?php endif ?>
<div class="theme">
<button class="btn btn-unstyled theme-btn" aria-label="<?= $site->switchMode()->or('Switch Mode') ?>">
<svg class="icon icon-theme icon-theme-dark" role="img" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px">
<rect fill="none" height="24" width="24" />
<title><?= $site->darkMode()->or('Dark Mode') ?></title>
<path d="M9.37,5.51C9.19,6.15,9.1,6.82,9.1,7.5c0,4.08,3.32,7.4,7.4,7.4c0.68,0,1.35-0.09,1.99-0.27C17.45,17.19,14.93,19,12,19 c-3.86,0-7-3.14-7-7C5,9.07,6.81,6.55,9.37,5.51z M12,3c-4.97,0-9,4.03-9,9s4.03,9,9,9s9-4.03,9-9c0-0.46-0.04-0.92-0.1-1.36 c-0.98,1.37-2.58,2.26-4.4,2.26c-2.98,0-5.4-2.42-5.4-5.4c0-1.81,0.89-3.42,2.26-4.4C12.92,3.04,12.46,3,12,3L12,3z" />
</svg>
<svg class="icon icon-theme icon-theme-light" role="img" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px">
<rect fill="none" height="24" width="24" />
<title><?= $site->lightMode()->or('Light Mode') ?></title>
<path d="M12,9c1.65,0,3,1.35,3,3s-1.35,3-3,3s-3-1.35-3-3S10.35,9,12,9 M12,7c-2.76,0-5,2.24-5,5s2.24,5,5,5s5-2.24,5-5 S14.76,7,12,7L12,7z M2,13l2,0c0.55,0,1-0.45,1-1s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S1.45,13,2,13z M20,13l2,0c0.55,0,1-0.45,1-1 s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S19.45,13,20,13z M11,2v2c0,0.55,0.45,1,1,1s1-0.45,1-1V2c0-0.55-0.45-1-1-1S11,1.45,11,2z M11,20v2c0,0.55,0.45,1,1,1s1-0.45,1-1v-2c0-0.55-0.45-1-1-1C11.45,19,11,19.45,11,20z M5.99,4.58c-0.39-0.39-1.03-0.39-1.41,0 c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0s0.39-1.03,0-1.41L5.99,4.58z M18.36,16.95 c-0.39-0.39-1.03-0.39-1.41,0c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0c0.39-0.39,0.39-1.03,0-1.41 L18.36,16.95z M19.42,5.99c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06c-0.39,0.39-0.39,1.03,0,1.41 s1.03,0.39,1.41,0L19.42,5.99z M7.05,18.36c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06 c-0.39,0.39-0.39,1.03,0,1.41s1.03,0.39,1.41,0L7.05,18.36z" />
</svg>
</button>
</div>
<button class="btn btn-unstyled menu-btn" data-toggle-class-on-trigger="is-active" data-toggle-class-on-target="is-open" data-toggle-target=".menu" aria-controls="menu" aria-label="<?= $site->menuTitle()->or('Menu') ?>" aria-expanded="false">
<svg class="icon icon-menu" role="img" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<title><?= $site->menuOpen()->or('Open') ?></title>
<path d="M3 4H21V6H3V4ZM3 11H21V13H3V11ZM3 18H21V20H3V18Z"></path>
</svg>
<svg class="icon icon-close" role="img" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24">
<title><?= $site->menuClose()->or('Close') ?></title>
<path d="m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z" />
</svg>
</button>
</div>
<nav id="menu" class="menu" aria-label="<?= $site->menuTitle()->or('Menu') ?>">
<ul>
<?php foreach ($sections = $pages->listed() as $section) :
$customTitle = $section->menuTitle();
?>
<li>
<a <?php e($section->isActive(), ' class="current" aria-current="page"') ?> href="<?= $section->url() ?>"><?= ($customTitle != '') ? $customTitle : $section->title() ?></a>
</li>
<?php endforeach ?>
<li class="search">
<a<?php e($page->uri() == 'search', ' class="current" aria-current="page"') ?> href="<?= url('search') ?>">
<svg class="icon icon-search" xmlns="http://www.w3.org/2000/svg" aria-labelledby="menuSearch" role="img" height="24" viewBox="0 -960 960 960" width="24">
<title id="menuSearch"><?= $pages->find('search')->title() ?></title>
<path d="M784-120 532-372q-30 24-69 38t-83 14q-109 0-184.5-75.5T120-580q0-109 75.5-184.5T380-840q109 0 184.5 75.5T640-580q0 44-14 83t-38 69l252 252-56 56ZM380-400q75 0 127.5-52.5T560-580q0-75-52.5-127.5T380-760q-75 0-127.5 52.5T200-580q0 75 52.5 127.5T380-400Z" />
</svg>
</a>
</li>
</ul>
</nav>
</div>
</header>