malte70/hugo-paper
1
0
Fork 0
Code Activity

add theme param

Browse source
This commit is contained in:
nanxiaobei 2022-08-16 02:20:41 +08:00
parent e3d39acf6c
commit d134c6dfcb
7 changed files with 72 additions and 52 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
README.md
View file

@ -49,13 +49,16 @@ Available options to `config.toml`:
disqusShortname = 'YOUR_DISQUS_SHORTNAME' # add disqus comments disqusShortname = 'YOUR_DISQUS_SHORTNAME' # add disqus comments
[params] [params]
# show header social icons # color theme
theme = 'linen' # linen, gray, light
# header social icons
twitter = 'YOUR_TWITTER_ID' # twitter.com/YOUR_TWITTER_ID twitter = 'YOUR_TWITTER_ID' # twitter.com/YOUR_TWITTER_ID
github = 'YOUR_GITHUB_ID' # github.com/YOUR_GITHUB_ID github = 'YOUR_GITHUB_ID' # github.com/YOUR_GITHUB_ID
instagram = 'YOUR_INSTAGRAM_ID' # instagram.com/YOUR_INSTAGRAM_ID instagram = 'YOUR_INSTAGRAM_ID' # instagram.com/YOUR_INSTAGRAM_ID
rss = true # show rss icon with link rss = true # show rss icon with link
# show home page profile # home page profile
avatar = 'GRAVATAR_EMAIL' # Gravatar email or image url(e.g. "https://deno.land/logo.svg") avatar = 'GRAVATAR_EMAIL' # Gravatar email or image url(e.g. "https://deno.land/logo.svg")
name = 'YOUR_NAME' name = 'YOUR_NAME'
bio = 'YOUR_BIO' bio = 'YOUR_BIO'

10
assets/app.css
View file

@ -3,7 +3,7 @@
* A simple, clean, flexible Hugo theme * A simple, clean, flexible Hugo theme
* https://github.com/nanxiaobei/hugo-paper * https://github.com/nanxiaobei/hugo-paper
* Designed by 南小北 (https://lee.so/) * Designed by 南小北 (https://lee.so/)
* Updated in 2022.7.20 * Updated in 2022.8.16
*/ */
@tailwind base; @tailwind base;
@ -16,9 +16,13 @@
@apply h-full; @apply h-full;
} }
html {
--bg: transparent;
}
body { body {
-webkit-tap-highlight-color: transparent; -webkit-tap-highlight-color: transparent;
background: #fbfbfb; background: var(--bg);
@apply dark:bg-black; @apply dark:bg-black;
} }
@ -45,7 +49,7 @@
} }
.nav-wrapper { .nav-wrapper {
background: #fbfbfb; background: var(--bg);
} }
.open { .open {

34
assets/main.css
View file

@ -3,11 +3,11 @@
* A simple, clean, flexible Hugo theme * A simple, clean, flexible Hugo theme
* https://github.com/nanxiaobei/hugo-paper * https://github.com/nanxiaobei/hugo-paper
* Designed by 南小北 (https://lee.so/) * Designed by 南小北 (https://lee.so/)
* Updated in 2022.7.20 * Updated in 2022.8.16
*/ */
/* /*
! tailwindcss v3.1.6 | MIT License | https://tailwindcss.com ! tailwindcss v3.1.8 | MIT License | https://tailwindcss.com
*/ */
/* /*
@ -363,13 +363,6 @@ input::-moz-placeholder, textarea::-moz-placeholder {
/* 2 */ /* 2 */
} }
input:-ms-input-placeholder, textarea:-ms-input-placeholder {
opacity: 1;
/* 1 */
color: #9ca3af;
/* 2 */
}
input::placeholder, input::placeholder,
textarea::placeholder { textarea::placeholder {
opacity: 1; opacity: 1;
@ -430,9 +423,13 @@ html,
height: 100%; height: 100%;
} }
html {
--bg: transparent;
}
body { body {
-webkit-tap-highlight-color: transparent; -webkit-tap-highlight-color: transparent;
background: #fbfbfb; background: var(--bg);
} }
.dark body { .dark body {
@ -1503,7 +1500,6 @@ body {
.select-none { .select-none {
-webkit-user-select: none; -webkit-user-select: none;
-moz-user-select: none; -moz-user-select: none;
-ms-user-select: none;
user-select: none; user-select: none;
} }
@ -1565,8 +1561,8 @@ body {
border-color: rgb(0 0 0 / 0.1); border-color: rgb(0 0 0 / 0.1);
} }
.bg-white\/80 { .bg-white\/50 {
background-color: rgb(255 255 255 / 0.8); background-color: rgb(255 255 255 / 0.5);
} }
.\!bg-black\/5 { .\!bg-black\/5 {
@ -1697,12 +1693,6 @@ body {
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
} }
.shadow-sm {
--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.duration-200 { .duration-200 {
transition-duration: 200ms; transition-duration: 200ms;
} }
@ -1734,7 +1724,7 @@ body {
} }
.nav-wrapper { .nav-wrapper {
background: #fbfbfb; background: var(--bg);
} }
.open { .open {
@ -1848,6 +1838,10 @@ article blockquote {
--tw-prose-td-borders: var(--tw-prose-invert-td-borders); --tw-prose-td-borders: var(--tw-prose-invert-td-borders);
} }
.dark .dark\:bg-white\/80 {
background-color: rgb(255 255 255 / 0.8);
}
.dark .dark\:\!bg-black\/80 { .dark .dark\:\!bg-black\/80 {
background-color: rgb(0 0 0 / 0.8) !important; background-color: rgb(0 0 0 / 0.8) !important;
} }

2
exampleSite/config.toml
View file

@ -15,6 +15,8 @@ theme = "hugo-paper"
title = "Paper" title = "Paper"
[params] [params]
theme = 'linen'
twitter = 'nanxiaobei' twitter = 'nanxiaobei'
github = 'nanxiaobei' github = 'nanxiaobei'
instagram = 'nan.xiaobei' instagram = 'nan.xiaobei'

15
layouts/_default/baseof.html
View file

@ -1,11 +1,16 @@
<!DOCTYPE html> <!DOCTYPE html>
{{ $.Scratch.Delete "theme_color" }}<!---->
{{ $.Scratch.Delete "social_list" }}<!----> {{ $.Scratch.Delete "social_list" }}<!---->
{{ $.Scratch.Delete "avatar_url" }}<!----> {{ $.Scratch.Delete "avatar_url" }}<!---->
<!-- theme_color -->
{{ $theme_map := dict "gray" "#fbfbfb" "light" "#fff" "linen" "#faf6f1" "wheat" "#f1efe1" }}<!---->
{{ $.Scratch.Set "theme_color" (index $theme_map (site.Params.theme | default (print "gray"))) }}<!---->
<!-- social_list --> <!-- social_list -->
{{ $socialParams := slice "twitter" "github" "instagram" "rss" }}<!----> {{ $social_params := slice "twitter" "github" "instagram" "rss" }}<!---->
{{ range $socialParams }}<!----> {{ range $social_params }}<!---->
{{ if isset site.Params . }}<!----> {{ if isset site.Params . }}<!---->
{{ $.Scratch.Add "social_list" (slice .) }}<!----> {{ $.Scratch.Add "social_list" (slice .) }}<!---->
{{ end }}<!----> {{ end }}<!---->
@ -22,7 +27,11 @@
{{ end }}<!----> {{ end }}<!---->
{{ end }}<!----> {{ end }}<!---->
<html class="not-ready text-sm lg:text-base" lang="{{ site.LanguageCode }}"> <html
class="not-ready text-sm lg:text-base"
style="--bg: {{ $.Scratch.Get `theme_color` }}"
lang="{{ site.LanguageCode }}"
>
{{ partial "head.html" . }} {{ partial "head.html" . }}
<body class="text-black duration-200 ease-out dark:text-white"> <body class="text-black duration-200 ease-out dark:text-white">
{{ partial "header.html" . }} {{ partial "header.html" . }}

6
layouts/_default/list.html
View file

@ -17,11 +17,13 @@
<!-- avatar --> <!-- avatar -->
{{ if and $.IsHome (eq $paginator.PageNumber 1) (eq $index 0) }}<!----> {{ if and $.IsHome (eq $paginator.PageNumber 1) (eq $index 0) }}<!---->
{{ $avatar_url := $.Scratch.Get `avatar_url` }}<!----> {{ $avatar_url := $.Scratch.Get "avatar_url" }}<!---->
{{ if or $avatar_url site.Params.name }} {{ if or $avatar_url site.Params.name }}
<div class="-mt-4 mb-20 flex items-start"> <div class="-mt-4 mb-20 flex items-start">
{{ if $avatar_url }} {{ if $avatar_url }}
<div class="mr-5 shrink-0 rounded-full border-[0.5px] border-black/10 bg-white/80 p-3 shadow-xl"> <div
class="mr-5 shrink-0 rounded-full border-[0.5px] border-black/10 bg-white/50 p-3 shadow-xl dark:bg-white/80"
>
<img <img
class="my-0 h-14 w-14 rounded-full !bg-black/5 hover:animate-spin dark:!bg-black/80" class="my-0 h-14 w-14 rounded-full !bg-black/5 hover:animate-spin dark:!bg-black/80"
src="{{ $avatar_url }}" src="{{ $avatar_url }}"

30
layouts/partials/header.html
View file

@ -12,15 +12,27 @@
class="btn-menu relative z-50 -mr-8 flex h-[5rem] w-[5rem] shrink-0 cursor-pointer flex-col items-center justify-center gap-2.5 lg:hidden" class="btn-menu relative z-50 -mr-8 flex h-[5rem] w-[5rem] shrink-0 cursor-pointer flex-col items-center justify-center gap-2.5 lg:hidden"
></a> ></a>
{{ $theme_color := $.Scratch.Get "theme_color" }}
<script> <script>
const metaTheme = document.querySelector('meta[name="theme-color"]'); // base
const htmlClass = document.documentElement.classList; const htmlClass = document.documentElement.classList;
setTimeout(() => htmlClass.remove('not-ready'), 10); setTimeout(() => {
htmlClass.remove('not-ready');
}, 10);
const setDark = (newDark) => { // mobile menu
metaTheme.setAttribute('content', newDark ? '#000' : '#fbfbfb'); const btnMenu = document.querySelector('.btn-menu');
htmlClass[newDark ? 'add' : 'remove']('dark'); btnMenu.addEventListener('click', () => {
localStorage.setItem('dark', newDark); htmlClass.toggle('open');
});
// dark theme
const metaTheme = document.querySelector('meta[name="theme-color"]');
const lightBg = `{{ $.Scratch.Get "theme_color" }}`.replace(/"/g, '');
const setDark = (isDark) => {
metaTheme.setAttribute('content', isDark ? '#000' : lightBg);
htmlClass[isDark ? 'add' : 'remove']('dark');
localStorage.setItem('dark', isDark);
}; };
// init // init
@ -38,12 +50,6 @@
btnDark.addEventListener('click', () => { btnDark.addEventListener('click', () => {
setDark(localStorage.getItem('dark') !== 'true'); setDark(localStorage.getItem('dark') !== 'true');
}); });
// mobile menu
const btnMenu = document.querySelector('.btn-menu');
btnMenu.addEventListener('click', () => {
htmlClass.toggle('open');
});
</script> </script>
<div <div