mirror of
https://github.com/nunocoracao/blowfish.git
synced 2026-01-30 16:31:52 +01:00
Merge pull request #2362 from ZhenShuo2021/feat/a11y-toggle
✨ Feat: support a11y toggle button
This commit is contained in:
Nuno C.
GitHub
1
assets/icons/a11y.svg
Normal file
1
assets/icons/a11y.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256zm161.5-86.1c-12.2-5.2-26.3 .4-31.5 12.6s.4 26.3 12.6 31.5l11.9 5.1c17.3 7.4 35.2 12.9 53.6 16.3l0 50.1c0 4.3-.7 8.6-2.1 12.6l-28.7 86.1c-4.2 12.6 2.6 26.2 15.2 30.4s26.2-2.6 30.4-15.2l24.4-73.2c1.3-3.8 4.8-6.4 8.8-6.4s7.6 2.6 8.8 6.4l24.4 73.2c4.2 12.6 17.8 19.4 30.4 15.2s19.4-17.8 15.2-30.4l-28.7-86.1c-1.4-4.1-2.1-8.3-2.1-12.6l0-50.1c18.4-3.5 36.3-8.9 53.6-16.3l11.9-5.1c12.2-5.2 17.8-19.3 12.6-31.5s-19.3-17.8-31.5-12.6L338.7 175c-26.1 11.2-54.2 17-82.7 17s-56.5-5.8-82.7-17l-11.9-5.1zM256 160a40 40 0 1 0 0-80 40 40 0 1 0 0 80z"/></svg>
|
||||
|
After Width: | Height: | Size: 680 B |
@@ -1,10 +1,80 @@
|
||||
(() => {
|
||||
const script = document.currentScript;
|
||||
const targetId = script?.getAttribute("data-target-id");
|
||||
const scripts = document.querySelectorAll('script[data-target-id]');
|
||||
|
||||
const isA11yMode = () => {
|
||||
return localStorage.getItem("a11yMode") === "true";
|
||||
};
|
||||
|
||||
window.addEventListener("scroll", () => {
|
||||
const scroll = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
|
||||
const backgroundBlur = document.getElementById(targetId);
|
||||
backgroundBlur.style.opacity = scroll / 300;
|
||||
const getScrollOpacity = (scrollDivisor) => {
|
||||
const scrollY = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
|
||||
return scrollY / scrollDivisor;
|
||||
};
|
||||
|
||||
const applyBlurState = (blurElement, scrollDivisor, targetId, imageElement, imageUrl) => {
|
||||
if (!blurElement) return;
|
||||
const isMenuBlur = targetId === "menu-blur";
|
||||
|
||||
if (isA11yMode()) {
|
||||
blurElement.setAttribute("aria-hidden", "true");
|
||||
if (!isMenuBlur) {
|
||||
blurElement.style.display = "none";
|
||||
blurElement.style.opacity = "0";
|
||||
} else {
|
||||
blurElement.style.display = "";
|
||||
blurElement.style.opacity = getScrollOpacity(scrollDivisor);
|
||||
}
|
||||
// Hide image in a11y mode
|
||||
if (imageElement) {
|
||||
imageElement.style.display = "none";
|
||||
}
|
||||
} else {
|
||||
blurElement.style.display = "";
|
||||
blurElement.style.opacity = getScrollOpacity(scrollDivisor);
|
||||
blurElement.removeAttribute("aria-hidden");
|
||||
// Show image in normal mode
|
||||
if (imageElement) {
|
||||
imageElement.style.display = "";
|
||||
// Re-apply image source if it was removed
|
||||
if (imageUrl && !imageElement.getAttribute('src')) {
|
||||
imageElement.setAttribute('src', imageUrl);
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
scripts.forEach(script => {
|
||||
const targetId = script.getAttribute("data-target-id");
|
||||
const scrollDivisor = Number(script.getAttribute("data-scroll-divisor") || 300);
|
||||
const imageId = script.getAttribute("data-image-id");
|
||||
const imageUrl = script.getAttribute("data-image-url"); // Get image URL from data attribute
|
||||
|
||||
const blurElement = document.getElementById(targetId);
|
||||
const imageElement = imageId ? document.getElementById(imageId) : null;
|
||||
|
||||
if (blurElement) {
|
||||
blurElement.setAttribute("role", "presentation");
|
||||
blurElement.setAttribute("tabindex", "-1");
|
||||
applyBlurState(blurElement, scrollDivisor, targetId, imageElement, imageUrl);
|
||||
|
||||
window.addEventListener("scroll", () => {
|
||||
if (!isA11yMode() || targetId === "menu-blur") {
|
||||
blurElement.style.opacity = getScrollOpacity(scrollDivisor);
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
window.toggleA11yMode = function() {
|
||||
localStorage.setItem("a11yMode", String(!isA11yMode()));
|
||||
scripts.forEach(script => {
|
||||
const targetId = script.getAttribute("data-target-id");
|
||||
const scrollDivisor = Number(script.getAttribute("data-scroll-divisor") || 300);
|
||||
const imageId = script.getAttribute("data-image-id");
|
||||
const imageUrl = script.getAttribute("data-image-url"); // Get image URL from data attribute
|
||||
|
||||
const blurElement = document.getElementById(targetId);
|
||||
const imageElement = imageId ? document.getElementById(imageId) : null;
|
||||
applyBlurState(blurElement, scrollDivisor, targetId, imageElement, imageUrl);
|
||||
});
|
||||
};
|
||||
})();
|
||||
|
||||
@@ -9,6 +9,7 @@ colorScheme = "blowfish"
|
||||
defaultAppearance = "light" # valid options: light or dark
|
||||
autoSwitchAppearance = true
|
||||
|
||||
enableA11y = false
|
||||
enableSearch = true
|
||||
enableCodeCopy = false
|
||||
|
||||
|
||||
@@ -9,6 +9,7 @@ colorScheme = "blowfish"
|
||||
defaultAppearance = "dark" # valid options: light or dark
|
||||
autoSwitchAppearance = true
|
||||
|
||||
enableA11y = true
|
||||
enableSearch = true
|
||||
enableCodeCopy = true
|
||||
|
||||
|
||||
@@ -171,6 +171,7 @@ Many of the article defaults here can be overridden on a per article basis by sp
|
||||
| `colorScheme` | `"blowfish"` | The theme colour scheme to use. Valid values are `blowfish` (default), `avocado`, `fire`, `ocean`, `forest`, `princess`, `neon`, `bloody`, `terminal`, `marvel`, `noir`, `autumn`, `congo`, and`slate`. Refer to the [Colour Schemes]({{< ref "getting-started#colour-schemes" >}}) section for more details. |
|
||||
| `defaultAppearance` | `"light"` | The default theme appearance, either `light` or `dark`. |
|
||||
| `autoSwitchAppearance` | `true` | Whether the theme appearance automatically switches based upon the visitor's operating system preference. Set to `false` to force the site to always use the `defaultAppearance`. |
|
||||
| `enableA11y` | `false` | Whether to enable the accessibility toggle button. |
|
||||
| `enableSearch` | `false` | Whether site search is enabled. Set to `true` to enable search functionality. Note that the search feature depends on the `outputs.home` setting in the [site configuration](#configurazioni-del-sito) being set correctly. |
|
||||
| `enableCodeCopy` | `false` | Whether copy-to-clipboard buttons are enabled for `<code>` blocks. The `highlight.noClasses` parameter must be set to `false` for code copy to function correctly. Read more about [other configuration files](#other-configuration-files) below. |
|
||||
| `mainSections` | _Not set_ | The sections that should be displayed in the recent articles list. If not provided the section with the greatest number of articles is used. |
|
||||
|
||||
@@ -171,6 +171,7 @@ Blowfish は、テーマの機能を制御する多数の設定パラメータ
|
||||
| `colorScheme` | `"blowfish"` | 使用するテーマのカラースキームです。有効な値は、`blowfish`（デフォルト）、`avocado`、`fire`、`ocean`、`forest`、`princess`、`neon`、`bloody`、`terminal`、`marvel`、`noir`、`autumn`、`congo`、`slate` です。詳細については、[カラースキーム]({{< ref "getting-started#カラースキーム" >}})セクションを参照してください。 |
|
||||
| `defaultAppearance` | `"light"` | デフォルトのテーマの外観です。`light` または `dark` のいずれかです。 |
|
||||
| `autoSwitchAppearance` | `true` | 訪問者のオペレーティングシステムの設定に基づいてテーマの外観を自動的に切り替えるかどうかです。`false` に設定すると、サイトは常に `defaultAppearance` を使用します。 |
|
||||
| `enableA11y` | `false` | アクセシビリティ切り替えボタンを有効にするかどうか。 |
|
||||
| `enableSearch` | `false` | サイト内検索が有効かどうかです。`true` に設定すると、検索機能が有効になります。検索機能は、[サイト設定](#サイト設定)の `outputs.home` 設定が正しく設定されているかどうかに依存することに注意してください。 |
|
||||
| `enableCodeCopy` | `false` | `<code>` ブロックのクリップボードへのコピーボタンを有効にするかどうかです。コードコピーが正しく機能するには、`highlight.noClasses` パラメータを `false` に設定する必要があります。以下の[その他の設定ファイル](#その他の設定ファイル)について読んでください。 |
|
||||
| `mainSections` | _未設定_ | 最近の記事リストに表示するセクションです。指定しない場合は、記事数が最も多いセクションが使用されます。 |
|
||||
|
||||
@@ -173,6 +173,7 @@ Many of the article defaults here can be overridden on a per article basis by sp
|
||||
| `colorScheme` | `"blowfish"` | The theme colour scheme to use. Valid values are `blowfish` (default), `avocado`, `fire`, `ocean`, `forest`, `princess`, `neon`, `bloody`, `terminal`, `marvel`, `noir`, `autumn`, `congo`, and`slate`. Refer to the [Colour Schemes]({{< ref "getting-started#colour-schemes" >}}) section for more details. |
|
||||
| `defaultAppearance` | `"light"` | The default theme appearance, either `light` or `dark`. |
|
||||
| `autoSwitchAppearance` | `true` | Whether the theme appearance automatically switches based upon the visitor's operating system preference. Set to `false` to force the site to always use the `defaultAppearance`. |
|
||||
| `enableA11y` | `false` | Whether to enable the accessibility toggle button. |
|
||||
| `enableSearch` | `false` | Whether site search is enabled. Set to `true` to enable search functionality. Note that the search feature depends on the `outputs.home` setting in the [site configuration](#site-configuration) being set correctly. |
|
||||
| `enableCodeCopy` | `false` | Whether copy-to-clipboard buttons are enabled for `<code>` blocks. The `highlight.noClasses` parameter must be set to `false` for code copy to function correctly. Read more about [other configuration files](#other-configuration-files) below. |
|
||||
| `replyByEmail` | `false` | Whether the reply-by-email link is enabled after post. The `params.author.email` parameter in `config/_default/languages.en.toml` must be set. |
|
||||
|
||||
@@ -171,6 +171,7 @@ Blowfish 提供了大量控制主题功能的配置参数，下面的表格中
|
||||
| `colorScheme` | `"blowfish"` | 主题使用的颜色方案。合法的值有： `blowfish` （默认）、`avocado`、`fire`、`ocean`、`forest`、`princess`、`neon`、`bloody`、`terminal`、`marvel`、`noir`、`autumn`、`congo` 和 `slate`。 具体参考[颜色方案]({{< ref "getting-started#colour-schemes" >}})以获取更多信息。 |
|
||||
| `defaultAppearance` | `"light"` | 默认的主题外观，可以是 `light` 或者 `dark`。 |
|
||||
| `autoSwitchAppearance` | `true` | 主题外观是否根据访问者操作系统的偏好自动切换。设置为 `false` 会强制网站始终使用 `defaultAppearance`。 |
|
||||
| `enableA11y` | `false` | 是否启用无障碍切换按钮。 |
|
||||
| `enableSearch` | `false` | 是否开启网站的搜索功能，设为 `true` 即为启用。注意，搜索功能依赖于[站点设置](#网站配置)中的 `outputs.home` 设置，请确保此值配置正确。 |
|
||||
| `enableCodeCopy` | `false` | 是否可以将`<code>`代码块复制到剪贴板。想要使用代码复制功能，需要将 `highlight.noClasses` 参数设置为 `false`。 阅读 [其他配置文件](#其他配置文件) 以获取更多信息。 |
|
||||
| `replyByEmail` | `false` | 是否在发布后启用“通过邮件回复”的链接。如果使用，则必须设置 `config/_default/languages.en.toml` 中的 `params.author.email` 参数。 |
|
||||
|
||||
@@ -34,6 +34,18 @@
|
||||
{{ end }}
|
||||
|
||||
{{ partial "translations.html" . }}
|
||||
{{ if .Site.Params.enableA11y | default false }}
|
||||
<button
|
||||
id="a11y-toggle"
|
||||
aria-label="Toggle accessibility background animation"
|
||||
type="button"
|
||||
class="text-base hover:text-primary-600 dark:hover:text-primary-400"
|
||||
onclick="toggleA11yMode()"
|
||||
role="button"
|
||||
aria-pressed="false">
|
||||
{{ partial "icon.html" "a11y" }}
|
||||
</button>
|
||||
{{ end }}
|
||||
|
||||
{{ if .Site.Params.enableSearch | default false }}
|
||||
<button
|
||||
@@ -70,6 +82,20 @@
|
||||
<span></span>
|
||||
|
||||
{{ partial "translations.html" . }}
|
||||
|
||||
{{ if .Site.Params.enableA11y | default false }}
|
||||
<button
|
||||
id="a11y-toggle"
|
||||
aria-label="Toggle accessibility background animation"
|
||||
type="button"
|
||||
class="text-base hover:text-primary-600 dark:hover:text-primary-400"
|
||||
onclick="toggleA11yMode()"
|
||||
role="button"
|
||||
aria-pressed="false">
|
||||
{{ partial "icon.html" "a11y" }}
|
||||
</button>
|
||||
{{ end }}
|
||||
|
||||
{{ if .Site.Params.enableSearch | default false }}
|
||||
<button
|
||||
id="search-button-mobile"
|
||||
|
||||
@@ -35,17 +35,16 @@
|
||||
<div id="hero" class="h-[150px] md:h-[200px]"></div>
|
||||
{{ end }}
|
||||
|
||||
{{ if or $disableImageOptimization (strings.HasSuffix $featured ".svg")}}
|
||||
{{ with . }}
|
||||
<div class="fixed inset-x-0 top-0 h-[800px] single_hero_background nozoom"
|
||||
style="background-image:url({{ .RelPermalink }});">
|
||||
<div class="fixed inset-x-0 top-0 h-[800px] single_hero_background nozoom">
|
||||
{{ if or $disableImageOptimization (strings.HasSuffix $featured ".svg")}}
|
||||
{{ with . }}
|
||||
<img id="background-image" src="{{ .RelPermalink }}" alt="Background Image" class="absolute inset-0 w-full h-full object-cover">
|
||||
{{ end }}
|
||||
{{ else }}
|
||||
{{ with .Resize (print ($.Site.Params.backgroundImageWidth | default "1200") "x") }}
|
||||
<img id="background-image" src="{{ .RelPermalink }}" alt="Background Image" class="absolute inset-0 w-full h-full object-cover">
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
{{ else }}
|
||||
{{ with .Resize (print ($.Site.Params.backgroundImageWidth | default "1200") "x") }}
|
||||
<div class="fixed inset-x-0 top-0 h-[800px] single_hero_background nozoom"
|
||||
style="background-image:url({{ .RelPermalink }});">
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
|
||||
<div class="absolute inset-0 bg-gradient-to-t from-neutral dark:from-neutral-800 to-transparent mix-blend-normal">
|
||||
</div>
|
||||
@@ -57,6 +56,10 @@
|
||||
<div id="background-blur" class="fixed opacity-0 inset-x-0 top-0 h-full single_hero_background nozoom backdrop-blur-2xl"></div>
|
||||
{{ $backgroundBlur := resources.Get "js/background-blur.js" }}
|
||||
{{ $backgroundBlur = $backgroundBlur | resources.Minify | resources.Fingerprint ($.Site.Params.fingerprintAlgorithm | default "sha512") }}
|
||||
<script type="text/javascript" src="{{ $backgroundBlur.RelPermalink }}" integrity="{{ $backgroundBlur.Data.Integrity }}" data-target-id="background-blur"></script>
|
||||
<script type="text/javascript" src="{{ $backgroundBlur.RelPermalink }}" integrity="{{ $backgroundBlur.Data.Integrity }}"
|
||||
data-target-id="background-blur"
|
||||
data-image-id="background-image"
|
||||
data-image-url="{{ .RelPermalink }}"
|
||||
></script>
|
||||
{{ end }}
|
||||
{{- end -}}
|
||||
|
||||
@@ -58,30 +58,29 @@
|
||||
|
||||
{{- with $background -}}
|
||||
|
||||
{{ if or $disableImageOptimization (strings.HasSuffix . ".svg") }}
|
||||
{{ with . }}
|
||||
<div
|
||||
class="fixed inset-x-0 top-0 h-[800px] single_hero_background nozoom"
|
||||
style="background-image:url({{ .RelPermalink }});">
|
||||
<div
|
||||
class="absolute inset-0 bg-gradient-to-t from-neutral dark:from-neutral-800 to-transparent mix-blend-normal"></div>
|
||||
<div
|
||||
class="absolute inset-0 opacity-30 dark:opacity-60 bg-gradient-to-t from-neutral dark:from-neutral-800 to-neutral dark:to-neutral-800 mix-blend-normal"></div>
|
||||
</div>
|
||||
<div class="single_hero_background nozoom fixed inset-x-0 top-0 h-[800px]">
|
||||
{{ if or $disableImageOptimization (strings.HasSuffix . ".svg") }}
|
||||
{{ with . }}
|
||||
<img
|
||||
id="background-image-main"
|
||||
src="{{ .RelPermalink }}"
|
||||
alt="Background Image"
|
||||
class="absolute inset-0 h-full w-full object-cover">
|
||||
{{ end }}
|
||||
{{ else }}
|
||||
{{ with .Resize (print ($.Site.Params.backgroundImageWidth | default "1200") "x") }}
|
||||
<img
|
||||
id="background-image-main"
|
||||
src="{{ .RelPermalink }}"
|
||||
alt="Background Image"
|
||||
class="absolute inset-0 h-full w-full object-cover">
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
{{ else }}
|
||||
{{ with .Resize (print ($.Site.Params.backgroundImageWidth | default "1200") "x") }}
|
||||
<div
|
||||
class="fixed inset-x-0 top-0 h-[800px] single_hero_background nozoom"
|
||||
style="background-image:url({{ .RelPermalink }});">
|
||||
<div
|
||||
class="absolute inset-0 bg-gradient-to-t from-neutral dark:from-neutral-800 to-transparent mix-blend-normal"></div>
|
||||
<div
|
||||
class="absolute inset-0 opacity-30 dark:opacity-60 bg-gradient-to-t from-neutral dark:from-neutral-800 to-neutral dark:to-neutral-800 mix-blend-normal"></div>
|
||||
</div>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
|
||||
<div
|
||||
class="from-neutral absolute inset-0 bg-gradient-to-t to-transparent mix-blend-normal dark:from-neutral-800"></div>
|
||||
<div
|
||||
class="from-neutral to-neutral absolute inset-0 bg-gradient-to-t opacity-30 mix-blend-normal dark:from-neutral-800 dark:to-neutral-800 dark:opacity-60"></div>
|
||||
</div>
|
||||
{{- end -}}
|
||||
|
||||
{{ if $shouldBlur | default false }}
|
||||
@@ -94,5 +93,7 @@
|
||||
type="text/javascript"
|
||||
src="{{ $backgroundBlur.RelPermalink }}"
|
||||
integrity="{{ $backgroundBlur.Data.Integrity }}"
|
||||
data-target-id="background-blur"></script>
|
||||
data-target-id="background-blur"
|
||||
data-image-id="background-image-main"
|
||||
{{ with $background }}data-image-url="{{ .RelPermalink }}"{{ end }}></script>
|
||||
{{ end }}
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
{{ $disableImageOptimization := .Site.Params.disableImageOptimization | default false }}
|
||||
<article class="max-w-full prose dark:prose-invert">
|
||||
<article class="prose dark:prose-invert max-w-full">
|
||||
<div class="relative">
|
||||
<div class="absolute inset-x-0 bottom-0 h-1/2 bg-gray-100"></div>
|
||||
<div class="mx-auto max-w-7xl p-0">
|
||||
@@ -22,16 +22,17 @@
|
||||
{{ end }}
|
||||
{{ if $homepageImage }}
|
||||
<img
|
||||
class="w-full h-[1000px] object-cover nozoom mt-0 mr-0 mb-0 ml-0"
|
||||
id="homepage-background-image"
|
||||
class="nozoom mt-0 mr-0 mb-0 ml-0 h-[1000px] w-full object-cover"
|
||||
src="{{ $homepageImage.RelPermalink }}"
|
||||
role="presentation">
|
||||
<div
|
||||
class="absolute inset-0 h-[1000px] bg-gradient-to-t from-neutral dark:from-neutral-800 to-transparent mix-blend-normal"></div>
|
||||
class="from-neutral absolute inset-0 h-[1000px] bg-gradient-to-t to-transparent mix-blend-normal dark:from-neutral-800"></div>
|
||||
<div
|
||||
class="opacity-60 absolute inset-0 h-[1000px] bg-gradient-to-t from-neutral dark:from-neutral-800 to-neutral-100 dark:to-neutral-800 mix-blend-normal"></div>
|
||||
class="from-neutral absolute inset-0 h-[1000px] bg-gradient-to-t to-neutral-100 opacity-60 mix-blend-normal dark:from-neutral-800 dark:to-neutral-800"></div>
|
||||
{{ end }}
|
||||
</div>
|
||||
<div class="relative px-1 py-1 flex flex-col items-center justify-center text-center">
|
||||
<div class="relative flex flex-col items-center justify-center px-1 py-1 text-center">
|
||||
{{ with .Site.Params.Author.image }}
|
||||
{{ $authorImage := "" }}
|
||||
{{ if or (strings.HasPrefix . "http:") (strings.HasPrefix . "https:") }}
|
||||
@@ -44,7 +45,7 @@
|
||||
{{ $authorImage = $authorImage.Fill (print "288x288 q" ( $.Site.Params.Author.imagequality | default "96" )) }}
|
||||
{{ end }}
|
||||
<img
|
||||
class="mb-2 rounded-full h-36 w-36"
|
||||
class="mb-2 h-36 w-36 rounded-full"
|
||||
width="144"
|
||||
height="144"
|
||||
alt="{{ $.Site.Params.Author.name | default " Author" }}"
|
||||
@@ -65,7 +66,7 @@
|
||||
{{ range $links := . }}
|
||||
{{ range $name, $url := $links }}
|
||||
<a
|
||||
class="px-1 hover:text-primary-400 text-primary-800 dark:text-primary-200"
|
||||
class="hover:text-primary-400 text-primary-800 dark:text-primary-200 px-1"
|
||||
href="{{ $url }}"
|
||||
target="_blank"
|
||||
aria-label="{{ $name | title }}"
|
||||
@@ -98,5 +99,7 @@
|
||||
type="text/javascript"
|
||||
src="{{ $backgroundBlur.RelPermalink }}"
|
||||
integrity="{{ $backgroundBlur.Data.Integrity }}"
|
||||
data-target-id="background-blur"></script>
|
||||
data-target-id="background-blur"
|
||||
data-image-id="homepage-background-image"
|
||||
{{ if $homepageImage }}data-image-url="{{ $homepageImage.RelPermalink }}"{{ end }}></script>
|
||||
{{ end }}
|
||||
|
||||
Reference in New Issue
Block a user