blogs/FixIt
1
0
Fork 0
mirror of https://github.com/hugo-fixit/FixIt.git synced 2026-09-02 11:42:39 +00:00
Code Issues Packages Projects Releases Wiki Activity

✨ Perf: add GitHub Corners full support (#106)

Browse Source
This commit is contained in:
Cell
2022-04-30 14:30:42 +08:00
parent 910fc5f3b0
commit 08d95cb578
9 changed files with 72 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/css/_partial/_header.scss
+6 -1
View File
@@ -184,9 +184,14 @@ header {
}
.header-wrapper {
padding: 0 2rem 0 10vh;
// use css native function to calculate max value
padding: 0 2rem 0 MAX(10vh, $header-height);
height: 100%;
&[github-corner='right'] {
padding-right: $header-height;
}
.header-title {
font-size: $header-title-font-size;
height: 100%;
assets/css/_partial/_widgets/_github-corner.scss
+20 -10
View File
@@ -14,23 +14,33 @@
}
.github-corner {
display: block;
width: 1.5rem;
position: fixed;
top: 0;
z-index: 150;
:hover .octo-arm {
animation: octocat-wave 560ms ease-in-out;
}
svg {
width: $header-height;
height: $header-height;
border: 0;
color: white;
fill: $header-background-color-dark;
position: absolute;
right: 0;
top: 0;
color: $github-corner-color;
fill: $github-corner-fill;
[theme='dark'] & {
color: black;
fill: $header-background-color;
color: $github-corner-color-dark;
fill: $github-corner-fill-dark;
}
}
}
&.left {
left: 0;
svg {
transform: scale(-1, 1);
}
}
&.right {
right: 0;
}
}
assets/css/_variables.scss
+10
View File
@@ -377,3 +377,13 @@ $admonition-background-color-map: (
'quote': rgba(159, 159, 159, 0.1)
) !default;
// ========== Admonition ========== //
// ========== GitHub Corners ========== //
// Color of the GitHub Corners
$github-corner-color: white !default;
$github-corner-color-dark: black !default;
// Color of the GitHub Corners background
$github-corner-fill: $header-background-color-dark !default;
$github-corner-fill-dark: $header-background-color !default;
// ========== GitHub Corners ========== //
exampleSite/config.toml
+2
View File
@@ -508,6 +508,7 @@ enableEmoji = true
enable = true
permalink = "https://github.com/Lruihao/FixIt"
title = "在 GitHub 上查看源代码"
position = "right" # left, right
# Gravatar 设置 since v0.2.14
[languages.zh-cn.params.gravatar]
# Gravatar 主机，默认：“www.gravatar.com”
@@ -1109,6 +1110,7 @@ enableEmoji = true
enable = true
permalink = "https://github.com/Lruihao/FixIt"
title = "View source on GitHub"
position = "right" # left, right
# Gravatar config since v0.2.14
# Gravatar 设置 since v0.2.14
[params.gravatar]
exampleSite/content/posts/theme-documentation-basics/index.en.md
+1
View File
@@ -789,6 +789,7 @@ Please open the code block below to view the complete sample configuration :(far
enable = false
permalink = "https://github.com/Lruihao/FixIt"
title = "View source on GitHub"
position = "right" # left, right
# {{< version 0.2.14 >}} Gravatar config
[params.gravatar]
# Gravatar host, default: "www.gravatar.com"
exampleSite/content/posts/theme-documentation-basics/index.zh-cn.md
+1
View File
@@ -798,6 +798,7 @@ hugo
enable = false
permalink = "https://github.com/Lruihao/FixIt"
title = "在 GitHub 上查看源代码"
position = "right" # left, right
# {{< version 0.2.14 >}} Gravatar 设置
[params.gravatar]
# Gravatar 主机，默认：“www.gravatar.com”
layouts/_default/baseof.html
+2 -13
View File
@@ -20,8 +20,6 @@
{{- $theme := .Site.Params.defaulttheme -}}
<script type="text/javascript">(window.localStorage && localStorage.getItem('theme') ? localStorage.getItem('theme') === 'dark' : ('{{ $theme }}' === 'auto' ? window.matchMedia('(prefers-color-scheme: dark)').matches : '{{ $theme }}' === 'dark')) && document.body.setAttribute('theme', 'dark');</script>
<div id="mask"></div>
{{- /* Body wrapper */ -}}
<div class="wrapper">
{{- partial "header.html" . -}}
@@ -32,17 +30,8 @@
{{- partial "footer.html" . -}}
</div>
<div id="fixed-buttons">
{{- /* top button */ -}}
<a href="#" id="back-to-top" class="fixed-button" title="{{ T `backToTop` }}">
<i class="fas fa-arrow-up fa-fw"></i>
</a>
{{- /* comment button */ -}}
<a href="#" id="view-comments" class="fixed-button" title="{{ T `viewComments` }}">
<i class="fas fa-comment fa-fw"></i>
</a>
</div>
{{- /* Theme widgets */ -}}
{{- partial "widgets.html" . -}}
{{- /* Load JavaScript scripts and CSS */ -}}
{{- partial "assets.html" . -}}
layouts/partials/header.html
+4 -10
View File
@@ -1,8 +1,8 @@
{{ $BuildDrafts :=.Site.BuildDrafts }}
{{- $buildDrafts := .Site.BuildDrafts -}}
{{- /* Desktop header */ -}}
<header class="desktop" id="header-desktop">
<div class="header-wrapper">
<div class="header-wrapper"{{ if .Site.Params.githubCorner.enable }} github-corner="{{ .Site.Params.githubCorner.position }}"{{ end }}>
<div class="header-title">
<a href="{{ .Site.Home.RelPermalink }}" title="{{ .Site.Title }}">
{{- with .Site.Params.header.title -}}
@@ -43,7 +43,7 @@
{{- with .Page -}}
{{- $url = .RelPermalink -}}
{{- end -}}
{{- if (ne .Params.Draft true) | or $BuildDrafts -}}
{{- if (ne .Params.Draft true) | or $buildDrafts -}}
<li
class="menu-item{{ if $.IsMenuCurrent `main` . | or ($.HasMenuCurrent `main` .) | or (eq $.RelPermalink $url) }} active{{ end }}{{ with .Params.Class }} {{ . }}{{ end }}"
{{ if .HasChildren }}has-children{{ end }}
@@ -138,12 +138,6 @@
</li>
</ul>
</nav>
{{- $githubCorner := .Site.Params.githubCorner -}}
{{- if $githubCorner.enable -}}
{{- $githubImage := `<svg width="56" height="56" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg>` -}}
{{- $options := dict "Destination" $githubCorner.permalink "Title" $githubCorner.title "Content" $githubImage "Class" "github-corner" -}}
{{- partial "plugin/link.html" $options -}}
{{- end -}}
</div>
</header>
@@ -215,7 +209,7 @@
{{- with .Page -}}
{{- $url = .RelPermalink -}}
{{- end -}}
{{- if (ne .Params.Draft true) | or $BuildDrafts -}}
{{- if (ne .Params.Draft true) | or $buildDrafts -}}
<li
class="menu-item{{ if $.IsMenuCurrent `main` . | or ($.HasMenuCurrent `main` .) | or (eq $.RelPermalink $url) }} active{{ end }}{{ with .Params.Class }} {{ . }}{{ end }}"
>
layouts/partials/widgets.html
+26
View File
@@ -0,0 +1,26 @@
<div class="widgets">
<div id="fixed-buttons">
{{- /* top button */ -}}
<a href="#" id="back-to-top" class="fixed-button" title="{{ T `backToTop` }}">
<i class="fas fa-arrow-up fa-fw"></i>
</a>
{{- /* comment button */ -}}
<a href="#" id="view-comments" class="fixed-button" title="{{ T `viewComments` }}">
<i class="fas fa-comment fa-fw"></i>
</a>
</div>
{{- /* GitHub Corners */ -}}
{{- $githubCorner := .Site.Params.githubCorner -}}
{{- if $githubCorner.enable -}}
{{- with $githubCorner -}}
{{- $githubImage := `<svg viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg>` -}}
{{- $options := dict "Destination" .Permalink "Title" .Title "Content" $githubImage "Class" (cond (eq .Position "left") "left" "right" | printf "github-corner %v d-none-mobile") -}}
{{- partial "plugin/link.html" $options -}}
{{- end -}}
{{- end -}}
{{- /* Search mask */ -}}
<div id="mask"></div>
</div>