Merge pull request #2495 from ZhenShuo2021/fix/page-widget

🐛 Fix: page widget
2026-01-30 16:31:52 +01:00 · 2025-09-23 15:55:25 +01:00
parent 619fe502dc 1159e78cc3
commit 6f0238652b
12 changed files with 77 additions and 47 deletions
--- a/assets/css/compiled/main.css
+++ b/assets/css/compiled/main.css
@@ -497,6 +497,9 @@ body.zen-mode-enable {
  .start-\[calc\(max\(-50vw\,-800px\)\+50\%\)\] {
    inset-inline-start: calc(max(-50vw, -800px) + 50%);
  }
+  .end-6 {
+    inset-inline-end: calc(var(--spacing) * 6);
+  }
  .top-0 {
    top: calc(var(--spacing) * 0);
  }
@@ -506,18 +509,18 @@ body.zen-mode-enable {
  .top-20 {
    top: calc(var(--spacing) * 20);
  }
-  .top-\[110vh\] {
-    top: 110vh;
-  }
-  .top-\[calc\(100vh-5\.5rem\)\] {
-    top: calc(100vh - 5.5rem);
-  }
  .right-0 {
    right: calc(var(--spacing) * 0);
  }
  .bottom-0 {
    bottom: calc(var(--spacing) * 0);
  }
+  .bottom-6 {
+    bottom: calc(var(--spacing) * 6);
+  }
+  .bottom-24 {
+    bottom: calc(var(--spacing) * 24);
+  }
  .left-0 {
    left: calc(var(--spacing) * 0);
  }
@@ -536,6 +539,9 @@ body.zen-mode-enable {
  .z-30 {
    z-index: 30;
  }
+  .z-50 {
+    z-index: 50;
+  }
  .z-80 {
    z-index: 80;
  }
@@ -1204,9 +1210,6 @@ body.zen-mode-enable {
  .mb-12 {
    margin-bottom: calc(var(--spacing) * 12);
  }
-  .mb-16 {
-    margin-bottom: calc(var(--spacing) * 16);
-  }
  .mb-20 {
    margin-bottom: calc(var(--spacing) * 20);
  }
@@ -1538,6 +1541,14 @@ body.zen-mode-enable {
    --tw-translate-y: calc(var(--spacing) * -8);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
+  .translate-y-0 {
+    --tw-translate-y: calc(var(--spacing) * 0);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
+  .translate-y-4 {
+    --tw-translate-y: calc(var(--spacing) * 4);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
  .scale-0 {
    --tw-scale-x: 0%;
    --tw-scale-y: 0%;
@@ -3213,11 +3224,6 @@ body.zen-mode-enable {
      grid-template-columns: repeat(5, minmax(0, 1fr));
    }
  }
-  .ltr\:right-0 {
-    &:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) {
-      right: calc(var(--spacing) * 0);
-    }
-  }
  .ltr\:mr-4 {
    &:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) {
      margin-right: calc(var(--spacing) * 4);
@@ -3243,11 +3249,6 @@ body.zen-mode-enable {
      display: inline;
    }
  }
-  .rtl\:left-0 {
-    &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
-      left: calc(var(--spacing) * 0);
-    }
-  }
  .rtl\:-mr-\[79px\] {
    &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
      margin-right: calc(79px * -1);
@@ -3807,6 +3808,9 @@ pre {
 [id^="fn"], [id^="fnref"] {
  scroll-margin-top: 145px;
 }
+#main-content {
+  scroll-margin-top: -125px;
+}
@media (width >= 640px) {
  .article {
    flex-wrap: wrap;
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -215,6 +215,11 @@ pre {
  scroll-margin-top: 145px;
 }

+/* patch for skip to main content */
+#main-content {
+  scroll-margin-top: -125px;
+}
+
@variant sm {
  .article {
    flex-wrap: wrap;
--- a/assets/js/scroll-to-top.js
+++ b/assets/js/scroll-to-top.js
@@ -0,0 +1,13 @@
+function scrollToTop() {
+  const scrollToTop = document.getElementById("scroll-to-top");
+  if (window.scrollY > window.innerHeight * 0.5) {
+    scrollToTop.classList.remove("translate-y-4", "opacity-0");
+    scrollToTop.classList.add("translate-y-0", "opacity-100");
+  } else {
+    scrollToTop.classList.remove("translate-y-0", "opacity-100");
+    scrollToTop.classList.add("translate-y-4", "opacity-0");
+  }
+}
+
+window.addEventListener("scroll", scrollToTop);
+window.addEventListener("load", scrollToTop);
--- a/config/_default/params.toml
+++ b/config/_default/params.toml
@@ -160,7 +160,7 @@ forgejoDefaultServer = "https://v11.next.forgejo.org"
  # globalWidget = true
  # globalWidgetMessage = "Hello"
  # globalWidgetColor = "#FFDD00"
-  # globalWidgetPosition = "Right"
+  # globalWidgetPosition = "right"

 [verification]
  # google = ""
--- a/exampleSite/config/_default/params.toml
+++ b/exampleSite/config/_default/params.toml
@@ -159,7 +159,7 @@ fingerprintAlgorithm = "sha512" # Valid values are "sha512" (default), "sha384",
  globalWidget = true
  globalWidgetMessage = ""
  globalWidgetColor = "#FFDD00"
-  globalWidgetPosition = "Right"
+  globalWidgetPosition = "right"

 [verification]
  # google = ""
--- a/exampleSite/content/docs/configuration/index.it.md
+++ b/exampleSite/content/docs/configuration/index.it.md
@@ -353,8 +353,8 @@ Many of the article defaults here can be overridden on a per article basis by sp
 | `buymeacoffee.identifier` | _Not set_ | The identifier to the target buymeacoffee account. |
 | `buymeacoffee.globalWidget` | _Not set_ | Activate the global buymeacoffee widget. |
 | `buymeacoffee.globalWidgetMessage` | _Not set_ | Message what will be displayed the first time a new user lands on the site. |
-| `buymeacoffee.globalWidgetColor` | _Not set_ | Widget color in hex format. |
-| `buymeacoffee.globalWidgetPosition` | _Not set_ | Position of the widget, i.e. "Left" or "Right" |
+| `buymeacoffee.globalWidgetColor` | `#FFDD00` | Widget color in hex format. |
+| `buymeacoffee.globalWidgetPosition` | _Not set_ | Position of the widget, i.e. "left" or "right" |

 ### Verifications

--- a/exampleSite/content/docs/configuration/index.ja.md
+++ b/exampleSite/content/docs/configuration/index.ja.md
@@ -353,8 +353,8 @@ Blowfish は、テーマの機能を制御する多数の設定パラメータ
 | `buymeacoffee.identifier`           | _未設定_   | ターゲットの buymeacoffee アカウントの識別子。                         |
 | `buymeacoffee.globalWidget`         | _未設定_   | グローバル buymeacoffee ウィジェットを有効にします。                   |
 | `buymeacoffee.globalWidgetMessage`  | _未設定_   | 新しいユーザーが初めてサイトにアクセスしたときに表示されるメッセージ。 |
-| `buymeacoffee.globalWidgetColor`    | _未設定_   | ウィジェットの色（16進数形式）。                                       |
-| `buymeacoffee.globalWidgetPosition` | _未設定_   | ウィジェットの位置。例えば "Left" または "Right"                       |
+| `buymeacoffee.globalWidgetColor`    | `#FFDD00`   | ウィジェットの色（16進数形式）。                                       |
+| `buymeacoffee.globalWidgetPosition` | _未設定_   | ウィジェットの位置。例えば "left" または "right"                       |

 ### verification

--- a/exampleSite/content/docs/configuration/index.md
+++ b/exampleSite/content/docs/configuration/index.md
@@ -360,8 +360,8 @@ Many of the article defaults here can be overridden on a per article basis by sp
 | `buymeacoffee.identifier` | _Not set_ | The identifier to the target buymeacoffee account. |
 | `buymeacoffee.globalWidget` | _Not set_ | Activate the global buymeacoffee widget. |
 | `buymeacoffee.globalWidgetMessage` | _Not set_ | Message what will be displayed the first time a new user lands on the site. |
-| `buymeacoffee.globalWidgetColor` | _Not set_ | Widget color in hex format. |
-| `buymeacoffee.globalWidgetPosition` | _Not set_ | Position of the widget, i.e. "Left" or "Right" |
+| `buymeacoffee.globalWidgetColor` | `#FFDD00` | Widget color in hex format. |
+| `buymeacoffee.globalWidgetPosition` | _Not set_ | Position of the widget, i.e. "left" or "right" |

 ### Verifications

--- a/exampleSite/content/docs/configuration/index.zh-cn.md
+++ b/exampleSite/content/docs/configuration/index.zh-cn.md
@@ -352,13 +352,13 @@ Blowfish 提供了大量控制主题功能的配置参数，下面的表格中

 ### BuyMeACoffee(赞助平台)

-| 名称                                | 默认值 | 描述                               |
-| ----------------------------------- | ------ | ---------------------------------- |
-| `buymeacoffee.identifier`           | 无     | buymeacoffee 账号的用户名。        |
-| `buymeacoffee.globalWidget`         | 无     | 激活位于全局的 buymeacoffee 组件。 |
-| `buymeacoffee.globalWidgetMessage`  | 无     | 新用户首次访问网站时显示的消息。   |
-| `buymeacoffee.globalWidgetColor`    | 无     | 组件颜色，使用 HEX 格式。          |
-| `buymeacoffee.globalWidgetPosition` | 无     | 组件位置，例如 "Left" 或 "Right"。 |
+| 名称                                | 默认值    | 描述                               |
+| ----------------------------------- | --------- | ---------------------------------- |
+| `buymeacoffee.identifier`           | 无        | buymeacoffee 账号的用户名。        |
+| `buymeacoffee.globalWidget`         | 无        | 激活位于全局的 buymeacoffee 组件。 |
+| `buymeacoffee.globalWidgetMessage`  | 无        | 新用户首次访问网站时显示的消息。   |
+| `buymeacoffee.globalWidgetColor`    | `#FFDD00` | 组件颜色，使用 HEX 格式。          |
+| `buymeacoffee.globalWidgetPosition` | 无        | 组件位置，例如 "left" 或 "right"。 |

 ### 验证

--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@@ -1,14 +1,10 @@
 <!doctype html>
 <html
-  lang="{{ with site.Params.isoCode | default (site.LanguageCode | default " en") }}{{- . -}}{{ end }}"
-  dir="{{ if site.Params.rtl | default false -}}
-    rtl
-  {{- else -}}
-    ltr
-  {{- end }}"
+  lang="{{ with site.Params.isoCode | default (site.LanguageCode | default `en`) }}{{- . -}}{{ end }}"
+  dir="{{ cond (site.Params.rtl | default false) `rtl` `ltr` }}"
  class="scroll-smooth"
-  data-default-appearance="{{ site.Params.defaultAppearance | default " light" }}"
-  data-auto-appearance="{{ site.Params.autoSwitchAppearance | default " true" }}">
+  data-default-appearance="{{ site.Params.defaultAppearance | default `light` }}"
+  data-auto-appearance="{{ site.Params.autoSwitchAppearance | default `true` }}">
  {{- partial "head.html" . -}}


@@ -48,9 +44,9 @@
      src="https://cdnjs.buymeacoffee.com/1.0.0/widget.prod.min.js"
      data-id="{{ site.Params.buymeacoffee.identifier }}"
      data-description="Support me on Buy me a coffee!"
-      data-message="{{ site.Params.buymeacoffee.globalWidgetMessage | default "" }}"
-      data-color="{{ site.Params.buymeacoffee.globalWidgetColor | default "#FFDD00" }}"
-      data-position="{{ site.Params.buymeacoffee.globalWidgetPosition | default "Left" }}"
+      {{ with site.Params.buymeacoffee.globalWidgetMessage }}data-message="{{ . }}"{{ end }}
+      {{ with site.Params.buymeacoffee.globalWidgetColor | default `#FFDD00` }}data-color="{{ . }}"{{ end }}
+      {{ with site.Params.buymeacoffee.globalWidgetPosition }}data-position="{{ . }}"{{ end }}
      data-x_margin="18"
      data-y_margin="18"></script>
  {{ end }}
--- a/layouts/partials/head.html
+++ b/layouts/partials/head.html
@@ -69,6 +69,10 @@
    type="text/javascript"
    src="{{ $jsAppearance.RelPermalink }}"
    integrity="{{ $jsAppearance.Data.Integrity }}"></script>
+  {{ if site.Params.footer.showScrollToTop | default true }}
+    {{ $jsToTop := resources.Get "js/scroll-to-top.js" }}
+    {{ $assets.Add "js" (slice $jsToTop) }}
+  {{ end }}
  {{ if .Site.Params.enableA11y | default false }}
    {{ $jsA11y := resources.Get "js/a11y.js" }}
    {{ $jsA11y = $jsA11y | resources.Minify | resources.Fingerprint (site.Params.fingerprintAlgorithm | default "sha512") }}
@@ -83,6 +87,10 @@
      src="{{ $jsZenMode.RelPermalink }}"
      integrity="{{ $jsZenMode.Data.Integrity }}"></script>
  {{ end }}
+  {{ if site.Params.footer.showScrollToTop | default true }}
+    {{ $jsToTop := resources.Get "js/scroll-to-top.js" }}
+    {{ $assets.Add "js" (slice $jsToTop) }}
+  {{ end }}
  {{ if .Site.Params.enableSearch | default false }}
    {{ $jsFuse := resources.Get "lib/fuse/fuse.min.js" }}
    {{ $jsSearch := resources.Get "js/search.js" }}
--- a/layouts/partials/scroll-to-top.html
+++ b/layouts/partials/scroll-to-top.html
@@ -1,7 +1,11 @@
-<div id="top-scroller" class="pointer-events-none absolute top-[110vh] bottom-0 w-12 ltr:right-0 rtl:left-0 z-10">
+{{ $coffeeIsRight := and site.Params.buymeacoffee.globalWidget (eq (lower site.Params.buymeacoffee.globalWidgetPosition) "right") }}
+{{ $toTopYOffset := cond $coffeeIsRight "bottom-24" "bottom-6" }}
+<div
+  id="scroll-to-top"
+  class="fixed {{ $toTopYOffset }} end-6 z-50 transform translate-y-4 opacity-0 duration-200">
  <a
    href="#the-top"
-    class="pointer-events-auto sticky top-[calc(100vh-5.5rem)] flex h-12 w-12 mb-16 items-center justify-center rounded-full bg-neutral/50 text-xl text-neutral-700 hover:text-primary-600 dark:bg-neutral-800/50 dark:text-neutral dark:hover:text-primary-400"
+    class="pointer-events-auto flex h-12 w-12 items-center justify-center rounded-full bg-neutral/50 text-xl text-neutral-700 hover:text-primary-600 dark:bg-neutral-800/50 dark:text-neutral dark:hover:text-primary-400"
    aria-label="{{ i18n "nav.scroll_to_top_title" }}"
    title="{{ i18n "nav.scroll_to_top_title" }}">
    &uarr;