add theme param
This commit is contained in:
nanxiaobei
parent
e3d39acf6c
commit
d134c6dfcb
7 changed files with 72 additions and 52 deletions
|
|
@ -49,13 +49,16 @@ Available options to `config.toml`:
|
|||
disqusShortname = 'YOUR_DISQUS_SHORTNAME' # add disqus comments
|
||||
|
||||
[params]
|
||||
# show header social icons
|
||||
# color theme
|
||||
theme = 'linen' # linen, gray, light
|
||||
|
||||
# header social icons
|
||||
twitter = 'YOUR_TWITTER_ID' # twitter.com/YOUR_TWITTER_ID
|
||||
github = 'YOUR_GITHUB_ID' # github.com/YOUR_GITHUB_ID
|
||||
instagram = 'YOUR_INSTAGRAM_ID' # instagram.com/YOUR_INSTAGRAM_ID
|
||||
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")
|
||||
name = 'YOUR_NAME'
|
||||
bio = 'YOUR_BIO'
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
* A simple, clean, flexible Hugo theme
|
||||
* https://github.com/nanxiaobei/hugo-paper
|
||||
* Designed by 南小北 (https://lee.so/)
|
||||
* Updated in 2022.7.20
|
||||
* Updated in 2022.8.16
|
||||
*/
|
||||
|
||||
@tailwind base;
|
||||
|
|
@ -16,9 +16,13 @@
|
|||
@apply h-full;
|
||||
}
|
||||
|
||||
html {
|
||||
--bg: transparent;
|
||||
}
|
||||
|
||||
body {
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
background: #fbfbfb;
|
||||
background: var(--bg);
|
||||
|
||||
@apply dark:bg-black;
|
||||
}
|
||||
|
|
@ -45,7 +49,7 @@
|
|||
}
|
||||
|
||||
.nav-wrapper {
|
||||
background: #fbfbfb;
|
||||
background: var(--bg);
|
||||
}
|
||||
|
||||
.open {
|
||||
|
|
|
|||
|
|
@ -3,11 +3,11 @@
|
|||
* A simple, clean, flexible Hugo theme
|
||||
* https://github.com/nanxiaobei/hugo-paper
|
||||
* 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 */
|
||||
}
|
||||
|
||||
input:-ms-input-placeholder, textarea:-ms-input-placeholder {
|
||||
opacity: 1;
|
||||
/* 1 */
|
||||
color: #9ca3af;
|
||||
/* 2 */
|
||||
}
|
||||
|
||||
input::placeholder,
|
||||
textarea::placeholder {
|
||||
opacity: 1;
|
||||
|
|
@ -430,9 +423,13 @@ html,
|
|||
height: 100%;
|
||||
}
|
||||
|
||||
html {
|
||||
--bg: transparent;
|
||||
}
|
||||
|
||||
body {
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
background: #fbfbfb;
|
||||
background: var(--bg);
|
||||
}
|
||||
|
||||
.dark body {
|
||||
|
|
@ -1503,7 +1500,6 @@ body {
|
|||
.select-none {
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
|
|
@ -1565,8 +1561,8 @@ body {
|
|||
border-color: rgb(0 0 0 / 0.1);
|
||||
}
|
||||
|
||||
.bg-white\/80 {
|
||||
background-color: rgb(255 255 255 / 0.8);
|
||||
.bg-white\/50 {
|
||||
background-color: rgb(255 255 255 / 0.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);
|
||||
}
|
||||
|
||||
.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 {
|
||||
transition-duration: 200ms;
|
||||
}
|
||||
|
|
@ -1734,7 +1724,7 @@ body {
|
|||
}
|
||||
|
||||
.nav-wrapper {
|
||||
background: #fbfbfb;
|
||||
background: var(--bg);
|
||||
}
|
||||
|
||||
.open {
|
||||
|
|
@ -1848,6 +1838,10 @@ article blockquote {
|
|||
--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 {
|
||||
background-color: rgb(0 0 0 / 0.8) !important;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -15,6 +15,8 @@ theme = "hugo-paper"
|
|||
title = "Paper"
|
||||
|
||||
[params]
|
||||
theme = 'linen'
|
||||
|
||||
twitter = 'nanxiaobei'
|
||||
github = 'nanxiaobei'
|
||||
instagram = 'nan.xiaobei'
|
||||
|
|
|
|||
|
|
@ -1,11 +1,16 @@
|
|||
<!DOCTYPE html>
|
||||
|
||||
{{ $.Scratch.Delete "theme_color" }}<!---->
|
||||
{{ $.Scratch.Delete "social_list" }}<!---->
|
||||
{{ $.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 -->
|
||||
{{ $socialParams := slice "twitter" "github" "instagram" "rss" }}<!---->
|
||||
{{ range $socialParams }}<!---->
|
||||
{{ $social_params := slice "twitter" "github" "instagram" "rss" }}<!---->
|
||||
{{ range $social_params }}<!---->
|
||||
{{ if isset site.Params . }}<!---->
|
||||
{{ $.Scratch.Add "social_list" (slice .) }}<!---->
|
||||
{{ end }}<!---->
|
||||
|
|
@ -22,7 +27,11 @@
|
|||
{{ 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" . }}
|
||||
<body class="text-black duration-200 ease-out dark:text-white">
|
||||
{{ partial "header.html" . }}
|
||||
|
|
|
|||
|
|
@ -17,11 +17,13 @@
|
|||
<!-- avatar -->
|
||||
{{ 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 }}
|
||||
<div class="-mt-4 mb-20 flex items-start">
|
||||
{{ 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
|
||||
class="my-0 h-14 w-14 rounded-full !bg-black/5 hover:animate-spin dark:!bg-black/80"
|
||||
src="{{ $avatar_url }}"
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
></a>
|
||||
|
||||
{{ $theme_color := $.Scratch.Get "theme_color" }}
|
||||
<script>
|
||||
const metaTheme = document.querySelector('meta[name="theme-color"]');
|
||||
// base
|
||||
const htmlClass = document.documentElement.classList;
|
||||
setTimeout(() => htmlClass.remove('not-ready'), 10);
|
||||
setTimeout(() => {
|
||||
htmlClass.remove('not-ready');
|
||||
}, 10);
|
||||
|
||||
const setDark = (newDark) => {
|
||||
metaTheme.setAttribute('content', newDark ? '#000' : '#fbfbfb');
|
||||
htmlClass[newDark ? 'add' : 'remove']('dark');
|
||||
localStorage.setItem('dark', newDark);
|
||||
// mobile menu
|
||||
const btnMenu = document.querySelector('.btn-menu');
|
||||
btnMenu.addEventListener('click', () => {
|
||||
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
|
||||
|
|
@ -38,12 +50,6 @@
|
|||
btnDark.addEventListener('click', () => {
|
||||
setDark(localStorage.getItem('dark') !== 'true');
|
||||
});
|
||||
|
||||
// mobile menu
|
||||
const btnMenu = document.querySelector('.btn-menu');
|
||||
btnMenu.addEventListener('click', () => {
|
||||
htmlClass.toggle('open');
|
||||
});
|
||||
</script>
|
||||
|
||||
<div
|
||||
|
|
|
|||
Loading…
Reference in a new issue