mirror of
https://github.com/CaiJimmy/hugo-theme-stack.git
synced 2025-04-29 12:03:31 +08:00
Merge branch 'master' into new_branch
This commit is contained in:
Jimmy Cai
GitHub
commit
9b9ca2d788
47
README.md
47
README.md
@ -9,9 +9,9 @@
|
||||
|
||||
[](https://app.netlify.com/sites/hugo-theme-stack/deploys)
|
||||
|
||||
## Documentation & more information
|
||||
## Documentation
|
||||
|
||||
[Documentation](https://docs.stack.jimmycai.com/) | [中文文档](https://docs.stack.jimmycai.com/v/zh-cn/)
|
||||
[Documentation](https://docs.stack.jimmycai.com/) | [中文文档](https://docs.stack.jimmycai.com/zh/)
|
||||
|
||||
## Introduction
|
||||
|
||||
@ -27,21 +27,17 @@ Stack is a simple card-style Hugo theme designed for bloggers, some of its featu
|
||||
- No CSS framework, keep it simple and minimal
|
||||
- Properly cropped thumbnails
|
||||
- Subsection support
|
||||
- Table of contents
|
||||
|
||||
## Requirements
|
||||
|
||||
It's necessary to use **Hugo ≥ 0.78.0**.
|
||||
|
||||
Use Hugo Extended version (recommended) if you want to:
|
||||
|
||||
* Use the latest feature/fix from `master` branch
|
||||
* Edit SCSS files
|
||||
|
||||
**Compiled CSS are updated once per release.**
|
||||
It's necessary to use **Hugo Extended ≥ 0.78.0**.
|
||||
|
||||
## Installation
|
||||
|
||||
Clone / Download this repository to `theme` folder, and edit your site config following `exampleSite/config.toml`.
|
||||
Clone / Download this repository to `theme` folder, and edit your site config following `exampleSite/config.yaml`.
|
||||
|
||||
*Note: Remove `config.toml` if there is one in the site folder.*
|
||||
|
||||
Check [documentation](https://docs.stack.jimmycai.com/) for more details.
|
||||
|
||||
@ -63,13 +59,22 @@ Your support is greatly appreciated :)
|
||||
|
||||
## Thanks to
|
||||
|
||||
- [Vibrant-Colors/node-vibrant](https://github.com/Vibrant-Colors/node-vibrant)
|
||||
- [Normalize.css](https://necolas.github.io/normalize.css/)
|
||||
- [Tabler icons](https://tablericons.com/)
|
||||
- [Pure CSS implementation of Google Photos / 500px image layout](https://github.com/xieranmaya/blog/issues/6)
|
||||
- [jonsuh/hamburgers](https://github.com/jonsuh/hamburgers)
|
||||
- [PhotoSwipe](https://photoswipe.com/)
|
||||
- [artchen/hexo-theme-element](https://github.com/artchen/hexo-theme-element)
|
||||
- [MunifTanjim/minimo](https://github.com/MunifTanjim/minimo)
|
||||
- [lepture/yue.css](https://github.com/lepture/yue.css)
|
||||
- Markdown gallery syntax from [Typlog](https://typlog.com/)
|
||||
| Project | Description | Licence |
|
||||
| ------- | ----------- | ------- |
|
||||
| [PhotoSwipe](https://photoswipe.com/) | For the lightbox effect | [MIT](https://github.com/dimsemenov/PhotoSwipe/blob/master/LICENSE) |
|
||||
| [Normalize.css](https://github.com/necolas/normalize.css) | - | [MIT](https://github.com/necolas/normalize.css/blob/master/LICENSE.md) |
|
||||
| [Node Vibrant](https://github.com/Vibrant-Colors/node-vibrant) | To extract the color from images | [MIT](https://github.com/Vibrant-Colors/node-vibrant/blob/master/LICENSE.md)
|
||||
| [Tabler icons](https://github.com/tabler/tabler-icons) | Default menu icons | [MIT](https://github.com/tabler/tabler-icons/blob/master/LICENSE) |
|
||||
| [jonsuh/hamburgers](https://github.com/jonsuh/hamburgers) | Hamburger icon of menu | [MIT](https://github.com/jonsuh/hamburgers/blob/master/LICENSE) |
|
||||
| [lepture/yue.css](https://github.com/lepture/yue.css) | Part of it is used for styling article content | MIT |
|
||||
| [Typlog](https://typlog.com/) | Where the markdown gallery syntax is borrowed from | The author gave me the permission |
|
||||
| [Pure CSS implementation of Google Photos / 500px image layout](https://github.com/xieranmaya/blog/issues/6) | Used for image gallery | - |
|
||||
|
||||
### References
|
||||
|
||||
Some references that I took while building this theme:
|
||||
|
||||
| Project | Licence|
|
||||
| ------- | ------|
|
||||
| [artchen/hexo-theme-element](https://github.com/artchen/hexo-theme-element) | [MIT](https://github.com/artchen/hexo-theme-element/blob/master/LICENSE) |
|
||||
| [MunifTanjim/minimo](https://github.com/MunifTanjim/minimo) | [MIT](https://github.com/MunifTanjim/minimo/blob/master/LICENSE) |
|
||||
@ -1,4 +1,17 @@
|
||||
$on-phone: 812px;
|
||||
$on-tablet: 1024px;
|
||||
$on-desktop: 1519px;
|
||||
$on-desktop-large: 1920px;
|
||||
$breakpoints: (
|
||||
sm: 640px,
|
||||
md: 768px,
|
||||
lg: 1024px,
|
||||
xl: 1280px,
|
||||
2xl: 1536px,
|
||||
);
|
||||
|
||||
@mixin respond($breakpoint) {
|
||||
@if not map-has-key($breakpoints, $breakpoint) {
|
||||
@warn "'#{$breakpoint}' is not a valid breakpoint";
|
||||
} @else {
|
||||
@media (min-width: map-get($breakpoints, $breakpoint)) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -2,67 +2,52 @@
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
|
||||
.left-sidebar {
|
||||
max-width: var(--left-sidebar-max-width);
|
||||
}
|
||||
|
||||
.right-sidebar {
|
||||
max-width: var(--right-sidebar-max-width);
|
||||
|
||||
/// Display right sidebar when min-width: lg
|
||||
@include respond(lg) {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
&.extended {
|
||||
@media (min-width: $on-phone) {
|
||||
max-width: 800px;
|
||||
|
||||
.left-sidebar {
|
||||
width: 25%;
|
||||
}
|
||||
@include respond(md) {
|
||||
max-width: 1024px;
|
||||
--left-sidebar-max-width: 25%;
|
||||
--right-sidebar-max-width: 30%;
|
||||
}
|
||||
|
||||
@media (min-width: $on-tablet) {
|
||||
max-width: 972px;
|
||||
|
||||
.right-sidebar {
|
||||
width: 25%;
|
||||
}
|
||||
@include respond(lg) {
|
||||
max-width: 1280px;
|
||||
--left-sidebar-max-width: 20%;
|
||||
--right-sidebar-max-width: 30%;
|
||||
}
|
||||
|
||||
@media (min-width: $on-desktop) {
|
||||
max-width: 1200px;
|
||||
|
||||
.left-sidebar {
|
||||
width: 20%;
|
||||
}
|
||||
|
||||
.right-sidebar {
|
||||
width: 25%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: $on-desktop-large) {
|
||||
@include respond(xl) {
|
||||
max-width: 1536px;
|
||||
|
||||
.left-sidebar {
|
||||
width: 15%;
|
||||
}
|
||||
--left-sidebar-max-width: 15%;
|
||||
--right-sidebar-max-width: 25%;
|
||||
}
|
||||
}
|
||||
|
||||
&.compact {
|
||||
@media (min-width: $on-phone) {
|
||||
max-width: 800px;
|
||||
|
||||
.left-sidebar {
|
||||
width: 25%;
|
||||
}
|
||||
@include respond(md) {
|
||||
--left-sidebar-max-width: 25%;
|
||||
max-width: 768px;
|
||||
}
|
||||
|
||||
@media (min-width: $on-tablet) {
|
||||
max-width: 972px;
|
||||
@include respond(lg) {
|
||||
max-width: 1024px;
|
||||
--left-sidebar-max-width: 20%;
|
||||
}
|
||||
|
||||
@media (min-width: $on-desktop) {
|
||||
max-width: 1050px;
|
||||
|
||||
.left-sidebar {
|
||||
width: 20%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: $on-desktop-large) {
|
||||
max-width: 1300px;
|
||||
@include respond(xl) {
|
||||
max-width: 1280px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -76,8 +61,9 @@
|
||||
}
|
||||
|
||||
&.on-phone--column {
|
||||
@media (max-width: $on-phone) {
|
||||
flex-direction: column;
|
||||
flex-direction: column;
|
||||
@include respond(md) {
|
||||
flex-direction: unset;
|
||||
}
|
||||
}
|
||||
|
||||
@ -106,7 +92,6 @@
|
||||
|
||||
main.main {
|
||||
min-width: 0;
|
||||
padding: 0 15px;
|
||||
max-width: 100%;
|
||||
flex-grow: 1;
|
||||
padding-top: var(--main-top-padding);
|
||||
@ -114,4 +99,11 @@ main.main {
|
||||
|
||||
.main-container {
|
||||
min-height: 100vh;
|
||||
align-items: flex-start;
|
||||
padding: 0 15px;
|
||||
column-gap: var(--section-separation);
|
||||
|
||||
@include respond(md) {
|
||||
padding: 0 20px;
|
||||
}
|
||||
}
|
||||
@ -24,14 +24,14 @@
|
||||
.article-image {
|
||||
img {
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
height: 150px;
|
||||
object-fit: cover;
|
||||
|
||||
@media (max-width: $on-tablet) {
|
||||
height: 150px;
|
||||
@include respond(md) {
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
@media (min-width: $on-desktop-large) {
|
||||
@include respond(xl) {
|
||||
height: 250px;
|
||||
}
|
||||
}
|
||||
@ -62,7 +62,7 @@
|
||||
color: var(--card-text-color-main);
|
||||
font-size: 2.2rem;
|
||||
|
||||
@media (min-width: $on-desktop-large) {
|
||||
@include respond(xl) {
|
||||
font-size: 2.4rem;
|
||||
}
|
||||
|
||||
@ -86,7 +86,7 @@
|
||||
line-height: 1.5;
|
||||
|
||||
font-size: 1.75rem;
|
||||
@media (min-width: $on-desktop-large) {
|
||||
@include respond(xl) {
|
||||
font-size: 2rem;
|
||||
}
|
||||
}
|
||||
@ -135,10 +135,10 @@
|
||||
border-radius: var(--card-border-radius);
|
||||
box-shadow: var(--shadow-l1);
|
||||
background-color: var(--card-background);
|
||||
--image-size: 60px;
|
||||
--image-size: 50px;
|
||||
|
||||
@media (max-width: $on-tablet) {
|
||||
--image-size: 50px;
|
||||
@include respond(md) {
|
||||
--image-size: 60px;
|
||||
}
|
||||
|
||||
& + .pagination {
|
||||
@ -165,10 +165,10 @@
|
||||
|
||||
.article-title {
|
||||
margin: 0;
|
||||
font-size: 1.8rem;
|
||||
font-size: 1.6rem;
|
||||
|
||||
@media (max-width: $on-tablet) {
|
||||
font-size: 1.6rem;
|
||||
@include respond(md) {
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
}
|
||||
|
||||
@ -242,20 +242,20 @@
|
||||
flex-direction: column;
|
||||
justify-content: flex-end;
|
||||
z-index: 2;
|
||||
padding: 20px;
|
||||
padding: 15px;
|
||||
|
||||
@media (max-width: $on-phone) {
|
||||
padding: 15px;
|
||||
@include respond(sm) {
|
||||
padding: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.article-title {
|
||||
font-size: 2.2rem;
|
||||
font-size: 2rem;
|
||||
font-weight: 500;
|
||||
color: var(--card-text-color-main);
|
||||
|
||||
@media (max-width: $on-phone) {
|
||||
font-size: 2rem;
|
||||
@include respond(sm) {
|
||||
font-size: 2.2rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
html {
|
||||
font-size: 62.5%;
|
||||
overflow-y: scroll;
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
* {
|
||||
@ -15,3 +16,24 @@ body {
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
/* scrollbar styles for Firefox */
|
||||
* {
|
||||
scrollbar-width: auto;
|
||||
scrollbar-color: var(--scrollbar-thumb) transparent;
|
||||
}
|
||||
/**/
|
||||
|
||||
/* scrollbar styles for Chromium */
|
||||
::-webkit-scrollbar {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background-color: var(--scrollbar-thumb);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background-color: transparent;
|
||||
}
|
||||
/**/
|
||||
|
||||
@ -1,43 +1,9 @@
|
||||
.keep-sidebar {
|
||||
@media (min-width: $on-phone) and (max-width: $on-tablet) {
|
||||
--main-top-padding: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
.article-page {
|
||||
&.with-toolbar {
|
||||
@media (max-width: $on-tablet) {
|
||||
--main-top-padding: 0;
|
||||
}
|
||||
}
|
||||
&.hide-sidebar-sm .left-sidebar {
|
||||
display: none;
|
||||
|
||||
&:not(.keep-sidebar) .left-sidebar {
|
||||
@media (max-width: $on-tablet) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.article-sidebar {
|
||||
position: sticky;
|
||||
top: 50px;
|
||||
flex-shrink: 0;
|
||||
|
||||
@media (max-width: $on-tablet) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (min-width: $on-tablet) {
|
||||
padding-left: 15px;
|
||||
margin-left: 1%;
|
||||
}
|
||||
|
||||
@media (min-width: $on-tablet) {
|
||||
width: 25%;
|
||||
margin-right: 1%;
|
||||
}
|
||||
|
||||
@media (min-width: $on-desktop) {
|
||||
width: 30%;
|
||||
@include respond(md) {
|
||||
display: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
@ -111,12 +77,9 @@
|
||||
#article-toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 20px 0;
|
||||
|
||||
@media (max-width: $on-tablet) {
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
@media (min-width: $on-tablet) {
|
||||
@include respond(md) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@ -147,6 +110,115 @@
|
||||
|
||||
span {
|
||||
font-weight: 500;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.article-page.has-toc {
|
||||
scroll-behavior: smooth;
|
||||
|
||||
.left-sidebar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.right-sidebar {
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
display: none;
|
||||
|
||||
@include respond(xl) {
|
||||
display: block;
|
||||
top: var(--main-top-padding);
|
||||
}
|
||||
}
|
||||
|
||||
#article-toolbar {
|
||||
display: block;
|
||||
|
||||
@include respond(md) {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
@include respond(xl) {
|
||||
margin-top: 0;
|
||||
position: sticky;
|
||||
top: var(--main-top-padding);
|
||||
flex-shrink: 1;
|
||||
|
||||
a {
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
border: 1px solid var(--body-text-color);
|
||||
width: 100%;
|
||||
margin-right: 0;
|
||||
|
||||
svg {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.main-container {
|
||||
align-items: start;
|
||||
flex-direction: column;
|
||||
|
||||
@include respond(xl) {
|
||||
flex-direction: row;
|
||||
}
|
||||
}
|
||||
|
||||
.main {
|
||||
padding-top: 0;
|
||||
|
||||
@include respond(xl) {
|
||||
padding-top: var(--main-top-padding);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.widget--toc {
|
||||
background-color: var(--card-background);
|
||||
border-radius: var(--card-border-radius);
|
||||
box-shadow: var(--shadow-l1);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
color: var(--card-text-color-main);
|
||||
|
||||
#TableOfContents {
|
||||
ol {
|
||||
counter-reset: item;
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
& > li {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
li {
|
||||
margin: 15px 20px;
|
||||
padding: 5px;
|
||||
|
||||
&::before {
|
||||
counter-increment: item;
|
||||
content: counters(item, ".") ". ";
|
||||
font-weight: bold;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
& > ol {
|
||||
margin-top: 10px;
|
||||
padding-left: 10px;
|
||||
margin-bottom: -5px;
|
||||
|
||||
& > li:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -106,9 +106,10 @@
|
||||
z-index: 2;
|
||||
cursor: pointer;
|
||||
|
||||
@media (min-width: $on-phone + 1) {
|
||||
@include respond(md) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
outline: none;
|
||||
|
||||
&.is-active {
|
||||
@ -126,67 +127,59 @@
|
||||
list-style: none;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-top: var(--sidebar-element-separation);
|
||||
margin-bottom: 0;
|
||||
overflow-y: auto;
|
||||
flex-grow: 1;
|
||||
font-size: 1.5rem;
|
||||
font-size: 1.4rem;
|
||||
|
||||
@media (min-width: $on-desktop-large) {
|
||||
margin-top: 30px;
|
||||
background-color: var(--card-background);
|
||||
padding: 15px 0;
|
||||
box-shadow: var(--shadow-l1);
|
||||
display: none;
|
||||
|
||||
margin: 0 -15px;
|
||||
|
||||
&.show {
|
||||
display: block;
|
||||
}
|
||||
|
||||
@media (max-width: $on-phone) {
|
||||
background-color: var(--card-background);
|
||||
margin-top: 0;
|
||||
padding: 15px 0;
|
||||
box-shadow: var(--shadow-l1);
|
||||
display: none;
|
||||
|
||||
&.show {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: $on-phone + 1) {
|
||||
@include respond(md) {
|
||||
align-items: flex-end;
|
||||
display: flex;
|
||||
background-color: transparent;
|
||||
padding: 0;
|
||||
box-shadow: none;
|
||||
margin: 0;
|
||||
margin-top: var(--sidebar-element-separation);
|
||||
}
|
||||
|
||||
@include respond(xl) {
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
li {
|
||||
position: relative;
|
||||
vertical-align: middle;
|
||||
padding: 10px 0;
|
||||
padding: 10px 30px;
|
||||
|
||||
&:not(:last-of-type) {
|
||||
margin-bottom: 15px;
|
||||
|
||||
@media (min-width: $on-desktop-large) {
|
||||
@include respond(xl) {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: $on-phone) {
|
||||
padding: 10px 30px;
|
||||
}
|
||||
|
||||
@media (min-width: $on-phone + 1) and (max-width: ($on-desktop - 1)) {
|
||||
@include respond(md) {
|
||||
width: 100%;
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
@media (min-width: $on-phone + 1) {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
svg {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
stroke-width: 1.33;
|
||||
margin-right: 40px;
|
||||
|
||||
@media (max-width: $on-desktop-large) {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
a {
|
||||
@ -194,10 +187,6 @@
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
color: var(--body-text-color);
|
||||
|
||||
@media (max-width: $on-desktop-large) {
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
}
|
||||
|
||||
span {
|
||||
|
||||
@ -1,7 +1,6 @@
|
||||
.sidebar {
|
||||
padding: 0 15px;
|
||||
&.sticky {
|
||||
@media (min-width: ($on-phone + 1)) {
|
||||
@include respond(md) {
|
||||
position: sticky;
|
||||
}
|
||||
}
|
||||
@ -11,45 +10,41 @@
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-shrink: 0;
|
||||
align-self: stretch;
|
||||
|
||||
--sidebar-avatar-size: 150px;
|
||||
--sidebar-element-separation: 25px;
|
||||
width: 100%;
|
||||
padding: 30px 0 15px 0;
|
||||
max-width: none;
|
||||
|
||||
@media (max-width: $on-desktop-large) {
|
||||
--sidebar-avatar-size: 120px;
|
||||
--sidebar-element-separation: 20px;
|
||||
--sidebar-avatar-size: 120px;
|
||||
--sidebar-element-separation: 20px;
|
||||
|
||||
@include respond(md) {
|
||||
width: auto;
|
||||
padding-top: var(--main-top-padding);
|
||||
padding-bottom: var(--main-top-padding);
|
||||
max-height: 100vh;
|
||||
}
|
||||
|
||||
@media (max-width: $on-phone) {
|
||||
width: 100%;
|
||||
padding: 30px 0;
|
||||
max-width: none;
|
||||
@include respond(2xl) {
|
||||
--sidebar-avatar-size: 140px;
|
||||
--sidebar-element-separation: 25px;
|
||||
}
|
||||
|
||||
&.sticky {
|
||||
top: 0;
|
||||
}
|
||||
|
||||
@media (min-width: $on-phone + 1) {
|
||||
margin-right: 1%;
|
||||
padding: var(--main-top-padding) 15px;
|
||||
max-height: 100vh;
|
||||
}
|
||||
}
|
||||
|
||||
.right-sidebar {
|
||||
flex-shrink: 0;
|
||||
display: none;
|
||||
|
||||
&.sticky {
|
||||
top: 0;
|
||||
}
|
||||
|
||||
@media (max-width: $on-desktop - 1) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (min-width: $on-tablet) {
|
||||
margin-left: 1%;
|
||||
@include respond(lg) {
|
||||
padding-top: var(--main-top-padding);
|
||||
}
|
||||
}
|
||||
@ -58,8 +53,10 @@
|
||||
z-index: 1;
|
||||
transition: box-shadow 0.5s ease;
|
||||
|
||||
@media (max-width: $on-phone) {
|
||||
padding: 15px 30px;
|
||||
padding: 15px;
|
||||
|
||||
@include respond(md) {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.site-avatar {
|
||||
@ -79,9 +76,9 @@
|
||||
|
||||
.emoji {
|
||||
position: absolute;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
border-radius: 100%;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
@ -90,20 +87,20 @@
|
||||
background-color: var(--card-background);
|
||||
box-shadow: var(--shadow-l2);
|
||||
|
||||
@media (max-width: $on-desktop-large) {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
@include respond(2xl) {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.site-name {
|
||||
color: var(--accent-color);
|
||||
font-size: 2.4rem;
|
||||
margin: 0;
|
||||
font-size: 1.8rem;
|
||||
|
||||
@media (max-width: $on-desktop-large) {
|
||||
@include respond(2xl) {
|
||||
font-size: 2rem;
|
||||
}
|
||||
}
|
||||
@ -112,10 +109,10 @@
|
||||
color: var(--body-text-color);
|
||||
font-weight: normal;
|
||||
margin: 10px 0;
|
||||
font-size: 1.8rem;
|
||||
font-size: 1.6rem;
|
||||
|
||||
@media (max-width: $on-desktop-large) {
|
||||
font-size: 1.6rem;
|
||||
@include respond(2xl) {
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -17,11 +17,11 @@ $defaultTagColors: #fff, #fff, #fff, #fff, #fff;
|
||||
* Global style
|
||||
*/
|
||||
:root {
|
||||
@media (min-width: $on-phone + 1) {
|
||||
@include respond(md) {
|
||||
--main-top-padding: 35px;
|
||||
}
|
||||
|
||||
@media (min-width: $on-desktop-large) {
|
||||
@include respond(xl) {
|
||||
--main-top-padding: 50px;
|
||||
}
|
||||
|
||||
@ -36,12 +36,17 @@ $defaultTagColors: #fff, #fff, #fff, #fff, #fff;
|
||||
|
||||
--section-separation: 40px;
|
||||
|
||||
[data-scheme="dark"] {
|
||||
--scrollbar-thumb: hsl(0, 0%, 85%);
|
||||
--scrollbar-track: var(--body-background);
|
||||
|
||||
&[data-scheme="dark"] {
|
||||
--body-background: #303030;
|
||||
--accent-color: #ecf0f1;
|
||||
--accent-color-darker: #bdc3c7;
|
||||
--accent-color-text: #000;
|
||||
--body-text-color: rgba(255, 255, 255, 0.7);
|
||||
--scrollbar-thumb: #424242;
|
||||
--scrollbar-track: var(--body-background);
|
||||
}
|
||||
}
|
||||
|
||||
@ -70,20 +75,23 @@ $defaultTagColors: #fff, #fff, #fff, #fff, #fff;
|
||||
|
||||
--card-border-radius: 10px;
|
||||
|
||||
--card-padding: 30px;
|
||||
@media (max-width: $on-desktop-large) {
|
||||
--card-padding: 20px;
|
||||
|
||||
@include respond(md) {
|
||||
--card-padding: 25px;
|
||||
}
|
||||
@media (max-width: $on-tablet) {
|
||||
--card-padding: 20px;
|
||||
|
||||
@include respond(xl) {
|
||||
--card-padding: 30px;
|
||||
}
|
||||
|
||||
--small-card-padding: 25px;
|
||||
@media (max-width: $on-tablet) {
|
||||
--small-card-padding: 25px 20px;
|
||||
--small-card-padding: 25px 20px;
|
||||
|
||||
@include respond(md) {
|
||||
--small-card-padding: 25px;
|
||||
}
|
||||
|
||||
[data-scheme="dark"] {
|
||||
&[data-scheme="dark"] {
|
||||
--card-background: #424242;
|
||||
--card-background-selected: rgba(255, 255, 255, 0.16);
|
||||
--card-text-color-main: rgba(255, 255, 255, 0.9);
|
||||
@ -98,10 +106,12 @@ $defaultTagColors: #fff, #fff, #fff, #fff, #fff;
|
||||
*/
|
||||
:root {
|
||||
--article-font-family: var(--base-font-family);
|
||||
--article-font-size: 1.7rem;
|
||||
@media (max-width: $on-tablet) {
|
||||
--article-font-size: 1.6rem;
|
||||
--article-font-size: 1.6rem;
|
||||
|
||||
@include respond(md) {
|
||||
--article-font-size: 1.7rem;
|
||||
}
|
||||
|
||||
--article-line-height: 1.85;
|
||||
}
|
||||
|
||||
@ -127,7 +137,7 @@ $defaultTagColors: #fff, #fff, #fff, #fff, #fff;
|
||||
--table-border-color: #dadada;
|
||||
--tr-even-background-color: #efefee;
|
||||
|
||||
[data-scheme="dark"] {
|
||||
&[data-scheme="dark"] {
|
||||
--code-background-color: #272822;
|
||||
--code-text-color: rgba(255, 255, 255, 0.9);
|
||||
|
||||
|
||||
@ -9,7 +9,7 @@ class StackColorScheme {
|
||||
this.bindMatchMedia();
|
||||
this.currentScheme = this.getSavedScheme();
|
||||
|
||||
this.dispatchEvent(document.body.dataset.scheme as colorScheme);
|
||||
this.dispatchEvent(document.documentElement.dataset.scheme as colorScheme);
|
||||
|
||||
if (toggleEl)
|
||||
this.bindClick(toggleEl);
|
||||
@ -22,7 +22,7 @@ class StackColorScheme {
|
||||
localStorage.setItem(this.localStorageKey, this.currentScheme);
|
||||
}
|
||||
|
||||
private bindClick(toggleEl) {
|
||||
private bindClick(toggleEl: HTMLElement) {
|
||||
toggleEl.addEventListener('click', (e) => {
|
||||
if (this.isDark()) {
|
||||
/// Disable dark mode
|
||||
@ -56,13 +56,13 @@ class StackColorScheme {
|
||||
|
||||
private setBodyClass() {
|
||||
if (this.isDark()) {
|
||||
document.body.dataset.scheme = 'dark';
|
||||
document.documentElement.dataset.scheme = 'dark';
|
||||
}
|
||||
else {
|
||||
document.body.dataset.scheme = 'light';
|
||||
document.documentElement.dataset.scheme = 'light';
|
||||
}
|
||||
|
||||
this.dispatchEvent(document.body.dataset.scheme as colorScheme);
|
||||
this.dispatchEvent(document.documentElement.dataset.scheme as colorScheme);
|
||||
}
|
||||
|
||||
private getSavedScheme(): colorScheme {
|
||||
|
||||
@ -37,11 +37,13 @@ params:
|
||||
emoji: 🍥
|
||||
subtitle: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
||||
avatar:
|
||||
enabled: true
|
||||
local: true
|
||||
src: img/avatar.png
|
||||
|
||||
article:
|
||||
math: false
|
||||
toc: true
|
||||
license:
|
||||
enabled: true
|
||||
default: Licensed under CC BY-NC-SA 4.0
|
||||
@ -66,6 +68,23 @@ params:
|
||||
repo:
|
||||
clientId:
|
||||
clientSecret:
|
||||
autoCreateIssue: false
|
||||
|
||||
# Waline client configuration see: https://waline.js.org/en/reference/client.html
|
||||
waline:
|
||||
serverURL:
|
||||
lang:
|
||||
visitor:
|
||||
avatar:
|
||||
emoji:
|
||||
- https://cdn.jsdelivr.net/gh/walinejs/emojis/weibo
|
||||
requiredMeta:
|
||||
- name
|
||||
- email
|
||||
- url
|
||||
placeholder:
|
||||
locale:
|
||||
admin: Admin
|
||||
|
||||
widgets:
|
||||
enabled:
|
||||
@ -129,5 +148,9 @@ related:
|
||||
weight: 200
|
||||
|
||||
markup:
|
||||
tableOfContents:
|
||||
endLevel: 4
|
||||
ordered: true
|
||||
startLevel: 2
|
||||
highlight:
|
||||
noClasses: false
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
title: "Test"
|
||||
description: "This is a example category"
|
||||
description: "This is an example category"
|
||||
slug: "test"
|
||||
image: "hutomo-abrianto-l2jk-uxb1BY-unsplash.jpg"
|
||||
style:
|
||||
|
||||
@ -1,27 +0,0 @@
|
||||
> Original Repo: https://github.com/cdeleeuwe/netlify-plugin-hugo-cache-resources
|
||||
>
|
||||
# Netlify Build Plugin: Persist Hugo resources Between Builds
|
||||
|
||||
Persist [Hugo](https://gohugo.io/) resources folder between Netlify builds for huge build speed improvements! ⚡️
|
||||
|
||||
This plugin caches the `resources` folder after build. If you are processing many images, this would improve build duration significantly.
|
||||
|
||||
Note: Restoring cache only comes from the production branch. So once cache is saved on the production branch, the next preview build would use the cache. For example, when pushing to the same preview build, the latest preview build will not get the cache from the previous preview build, but will get it from master.
|
||||
|
||||
## Usage
|
||||
|
||||
To install, add the following lines to your `netlify.toml` file:
|
||||
|
||||
```toml
|
||||
[build]
|
||||
publish = "public"
|
||||
|
||||
[[plugins]]
|
||||
package = "netlify-plugin-hugo-cache-resources"
|
||||
|
||||
[plugins.inputs]
|
||||
# If it should show more verbose logs (optional, default = true)
|
||||
debug = true
|
||||
```
|
||||
|
||||
Note: The `[[plugins]]` line is required for each plugin, even if you have other plugins in your `netlify.toml` file already.
|
||||
@ -1,39 +0,0 @@
|
||||
const getResourcesDir = () => {
|
||||
return 'exampleSite/resources';
|
||||
}
|
||||
|
||||
const printList = (items) => {
|
||||
console.log('---');
|
||||
items.forEach((item, index) => {
|
||||
console.log(`${index + 1}. ${item}`);
|
||||
});
|
||||
}
|
||||
|
||||
module.exports = {
|
||||
|
||||
async onPreBuild({ utils, inputs }) {
|
||||
const path = getResourcesDir();
|
||||
const success = await utils.cache.restore(path);
|
||||
|
||||
if (success) {
|
||||
const cachedFiles = await utils.cache.list(path);
|
||||
console.log(`Restored cached resources folder. Total files: ${cachedFiles.length}`);
|
||||
if (inputs.debug) printList(cachedFiles);
|
||||
} else {
|
||||
console.log(`No cache found for resources folder`);
|
||||
}
|
||||
},
|
||||
|
||||
async onPostBuild({ utils, inputs }) {
|
||||
const path = getResourcesDir();
|
||||
const success = await utils.cache.save(path);
|
||||
|
||||
if (success) {
|
||||
const cachedFiles = await utils.cache.list(path);
|
||||
console.log(`Saved resources folder to cache. Total files: ${cachedFiles.length}`);
|
||||
if (inputs.debug) printList(cachedFiles);
|
||||
} else {
|
||||
console.log(`No resources folder cached`);
|
||||
}
|
||||
}
|
||||
};
|
||||
@ -1,5 +0,0 @@
|
||||
name: netlify-plugin-hugo-cache
|
||||
inputs:
|
||||
- name: debug
|
||||
description: Show more verbose logs
|
||||
default: true
|
||||
12
i18n/en.yaml
12
i18n/en.yaml
@ -17,8 +17,15 @@ list:
|
||||
other: Subsections
|
||||
|
||||
article:
|
||||
back:
|
||||
other: Back
|
||||
|
||||
tableOfContents:
|
||||
other: Table of contents
|
||||
|
||||
relatedContents:
|
||||
other: Related contents
|
||||
|
||||
lastUpdatedOn:
|
||||
other: Last updated on
|
||||
|
||||
@ -32,8 +39,10 @@ widget:
|
||||
archives:
|
||||
title:
|
||||
other: Archives
|
||||
|
||||
more:
|
||||
other: More
|
||||
|
||||
tagCloud:
|
||||
title:
|
||||
other: Tags
|
||||
@ -41,13 +50,16 @@ widget:
|
||||
search:
|
||||
title:
|
||||
other: Search
|
||||
|
||||
placeholder:
|
||||
other: Type something...
|
||||
|
||||
resultTitle:
|
||||
other: "#PAGES_COUNT pages (#TIME_SECONDS seconds)"
|
||||
|
||||
footer:
|
||||
builtWith:
|
||||
other: Built with {{ .Generator }}
|
||||
|
||||
designedBy:
|
||||
other: Theme {{ .Theme }} designed by {{ .DesignedBy }}
|
||||
|
||||
27
i18n/fr.yaml
27
i18n/fr.yaml
@ -1,9 +1,31 @@
|
||||
toggleMenu:
|
||||
other: Afficher le menu
|
||||
|
||||
darkMode:
|
||||
other: Mode sombre
|
||||
|
||||
list:
|
||||
page:
|
||||
one: "{{ .Count }} page"
|
||||
other: "{{ .Count }} pages"
|
||||
|
||||
section:
|
||||
other: Section
|
||||
|
||||
subsection:
|
||||
one: Sous-section
|
||||
other: Sous-sections
|
||||
|
||||
article:
|
||||
back:
|
||||
other: Retour
|
||||
|
||||
tableOfContents:
|
||||
other: Table des matières
|
||||
|
||||
relatedContents:
|
||||
other: Contenus liés
|
||||
|
||||
lastUpdatedOn:
|
||||
other: Dernière mise à jour le
|
||||
|
||||
@ -17,8 +39,10 @@ widget:
|
||||
archives:
|
||||
title:
|
||||
other: Archives
|
||||
|
||||
more:
|
||||
other: Autres
|
||||
|
||||
tagCloud:
|
||||
title:
|
||||
other: Mots clés
|
||||
@ -26,13 +50,16 @@ widget:
|
||||
search:
|
||||
title:
|
||||
other: Rechercher
|
||||
|
||||
placeholder:
|
||||
other: Cherchez un article, une publication, etc.
|
||||
|
||||
resultTitle:
|
||||
other: "#PAGES_COUNT pages (#TIME_SECONDS secondes)"
|
||||
|
||||
footer:
|
||||
builtWith:
|
||||
other: Généré avec {{ .Generator }}
|
||||
|
||||
designedBy:
|
||||
other: Thème {{ .Theme }} conçu par {{ .DesignedBy }}
|
||||
|
||||
31
i18n/id.yaml
31
i18n/id.yaml
@ -1,24 +1,48 @@
|
||||
toggleMenu:
|
||||
other: Tampilkan Menu
|
||||
|
||||
darkMode:
|
||||
other: Mode Gelap
|
||||
|
||||
list:
|
||||
page:
|
||||
one: "{{ .Count }} halaman"
|
||||
other: "{{ .Count }} halaman"
|
||||
|
||||
section:
|
||||
other: Bagian
|
||||
|
||||
subsection:
|
||||
one: Subbagian
|
||||
other: Subbagian
|
||||
|
||||
article:
|
||||
back:
|
||||
other: Kembali
|
||||
|
||||
tableOfContents:
|
||||
other: Daftar Isi
|
||||
|
||||
relatedContents:
|
||||
other: Konten terkait
|
||||
|
||||
lastUpdatedOn:
|
||||
other: Terakhir diperbarui pada
|
||||
|
||||
notFound:
|
||||
title:
|
||||
other: Not Found
|
||||
other: Tidak ditemukan
|
||||
subtitle:
|
||||
other: Halaman ini tidak ada.
|
||||
other: Halaman yang Anda akses tidak ditemukan.
|
||||
|
||||
widget:
|
||||
archives:
|
||||
title:
|
||||
other: Arsip
|
||||
|
||||
more:
|
||||
other: Lebih
|
||||
|
||||
tagCloud:
|
||||
title:
|
||||
other: Tag
|
||||
@ -26,13 +50,16 @@ widget:
|
||||
search:
|
||||
title:
|
||||
other: Cari
|
||||
|
||||
placeholder:
|
||||
other: Ketik sesuatu...
|
||||
|
||||
resultTitle:
|
||||
other: "#PAGES_COUNT halaman (#TIME_SECONDS detik)"
|
||||
|
||||
footer:
|
||||
builtWith:
|
||||
other: Dibangun dengan {{ .Generator }}
|
||||
|
||||
designedBy:
|
||||
other: Tema {{ .Theme }} dirancang oleh {{ .DesignedBy }}
|
||||
|
||||
13
i18n/ja.yaml
13
i18n/ja.yaml
@ -5,8 +5,15 @@ darkMode:
|
||||
other: ダークモード
|
||||
|
||||
article:
|
||||
back:
|
||||
other: 前のページ
|
||||
|
||||
tableOfContents:
|
||||
other: 目次
|
||||
|
||||
relatedContents:
|
||||
other: 関連するコンテンツ
|
||||
|
||||
lastUpdatedOn:
|
||||
other: 最終更新
|
||||
|
||||
@ -20,16 +27,20 @@ widget:
|
||||
archives:
|
||||
title:
|
||||
other: アーカイブ
|
||||
|
||||
more:
|
||||
other: さらに見る
|
||||
|
||||
tagCloud:
|
||||
title:
|
||||
other: タグ
|
||||
|
||||
search:
|
||||
title:
|
||||
other: サーチ
|
||||
other: 検索
|
||||
|
||||
placeholder:
|
||||
other: 入力...
|
||||
|
||||
resultTitle:
|
||||
other: "#PAGES_COUNT 件 （#TIME_SECONDS 秒）"
|
||||
|
||||
65
i18n/pl.yaml
Normal file
65
i18n/pl.yaml
Normal file
@ -0,0 +1,65 @@
|
||||
toggleMenu:
|
||||
other: Przełącz Menu
|
||||
|
||||
darkMode:
|
||||
other: Tryb ciemny
|
||||
|
||||
list:
|
||||
page:
|
||||
one: "{{ .Count }} strona"
|
||||
other: "{{ .Count }} stron"
|
||||
|
||||
section:
|
||||
other: Sekcja
|
||||
|
||||
subsection:
|
||||
one: Podsekcja
|
||||
other: Podsekcje
|
||||
|
||||
article:
|
||||
back:
|
||||
other: Wróć
|
||||
|
||||
tableOfContents:
|
||||
other: Spis treści
|
||||
|
||||
relatedContents:
|
||||
other: Powiązane artykuły
|
||||
|
||||
lastUpdatedOn:
|
||||
other: Ostatnio zaktualizowany
|
||||
|
||||
notFound:
|
||||
title:
|
||||
other: Nie znaleziono
|
||||
subtitle:
|
||||
other: Ta strona nie istnieje
|
||||
|
||||
widget:
|
||||
archives:
|
||||
title:
|
||||
other: Archiwum
|
||||
|
||||
more:
|
||||
other: Więcej
|
||||
|
||||
tagCloud:
|
||||
title:
|
||||
other: Tagi
|
||||
|
||||
search:
|
||||
title:
|
||||
other: Szukaj
|
||||
|
||||
placeholder:
|
||||
other: Wpisz coś...
|
||||
|
||||
resultTitle:
|
||||
other: "#PAGES_COUNT stron (#TIME_SECONDS sekund)"
|
||||
|
||||
footer:
|
||||
builtWith:
|
||||
other: Zbudowano z {{ .Generator }}
|
||||
|
||||
designedBy:
|
||||
other: Motyw {{ .Theme }} zaprojektowany przez {{ .DesignedBy }}
|
||||
@ -21,10 +21,14 @@ list:
|
||||
other: Подразделы
|
||||
|
||||
article:
|
||||
back:
|
||||
other: Назад
|
||||
relatedContents:
|
||||
other: Также рекомендуем
|
||||
lastUpdatedOn:
|
||||
other: Обновлено
|
||||
tableOfContents:
|
||||
other: Содержание
|
||||
|
||||
notFound:
|
||||
title:
|
||||
|
||||
@ -5,8 +5,15 @@ darkMode:
|
||||
other: 暗色模式
|
||||
|
||||
article:
|
||||
back:
|
||||
other: 返回
|
||||
|
||||
tableOfContents:
|
||||
other: 目录
|
||||
|
||||
relatedContents:
|
||||
other: 相关文章
|
||||
|
||||
lastUpdatedOn:
|
||||
other: 最后更新于
|
||||
|
||||
@ -20,8 +27,10 @@ widget:
|
||||
archives:
|
||||
title:
|
||||
other: 归档
|
||||
|
||||
more:
|
||||
other: 更多
|
||||
|
||||
tagCloud:
|
||||
title:
|
||||
other: 标签云
|
||||
@ -29,7 +38,9 @@ widget:
|
||||
search:
|
||||
title:
|
||||
other: 搜索
|
||||
|
||||
placeholder:
|
||||
other: 输入关键词...
|
||||
|
||||
resultTitle:
|
||||
other: "#PAGES_COUNT 个结果 （用时 #TIME_SECONDS 秒）"
|
||||
|
||||
@ -6,8 +6,10 @@
|
||||
</head>
|
||||
<body class="{{ block `body-class` . }}{{ end }}">
|
||||
{{- partial "head/colorScheme" . -}}
|
||||
<div class="container main-container flex on-phone--column {{ if .Site.Params.widgets.enabled }}extended{{ else }}compact{{ end }} {{ block `container-class` . }}{{end}}">
|
||||
{{ partial "sidebar/left.html" . }}
|
||||
<div class="container main-container flex {{ block `container-class` . }}on-phone--column {{ if .Site.Params.widgets.enabled }}extended{{ else }}compact{{ end }}{{ end }}">
|
||||
{{- block "left-sidebar" . -}}
|
||||
{{ partial "sidebar/left.html" . }}
|
||||
{{- end -}}
|
||||
<main class="main full-width">
|
||||
{{- block "main" . }}{{- end }}
|
||||
</main>
|
||||
|
||||
@ -1,7 +1,22 @@
|
||||
{{ define "body-class" }}article-page keep-sidebar{{ end }}
|
||||
{{ define "body-class" }}
|
||||
{{ $TOCEnabled := default (default false .Site.Params.article.toc) .Params.toc }}
|
||||
{{- .Scratch.Set "hasTOC" (and (ge (len .TableOfContents) 100) $TOCEnabled) -}}
|
||||
article-page {{ if (.Scratch.Get "hasTOC") }}has-toc{{ end }}
|
||||
{{ end }}
|
||||
|
||||
{{ define "container-class" }}
|
||||
{{ if (.Scratch.Get "hasTOC") }}
|
||||
extended
|
||||
{{ else }}
|
||||
on-phone--column {{ if .Site.Params.widgets.enabled }}extended{{ else }}compact{{ end }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
|
||||
{{ define "main" }}
|
||||
{{ partial "article/article.html" . }}
|
||||
|
||||
{{ partial "article/components/related-contents" . }}
|
||||
|
||||
{{ if or (not (isset .Params "comments")) (eq .Params.comments "true")}}
|
||||
{{ partial "comments/include" . }}
|
||||
{{ end }}
|
||||
@ -10,3 +25,33 @@
|
||||
|
||||
{{ partialCached "article/components/photoswipe" . }}
|
||||
{{ end }}
|
||||
|
||||
{{ define "left-sidebar" }}
|
||||
{{ if (.Scratch.Get "hasTOC") }}
|
||||
<div id="article-toolbar">
|
||||
<a href="{{ .Site.BaseURL }}" class="back-home">
|
||||
{{ (resources.Get "icons/back.svg").Content | safeHTML }}
|
||||
<span>{{ T "article.back" }}</span>
|
||||
</a>
|
||||
</div>
|
||||
{{ else }}
|
||||
{{ partial "sidebar/left.html" . }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
|
||||
{{ define "right-sidebar" }}
|
||||
{{ if (.Scratch.Get "hasTOC") }}
|
||||
<aside class="sidebar right-sidebar sticky">
|
||||
<section class="widget archives">
|
||||
<div class="widget-icon">
|
||||
{{ partial "helper/icon" "hash" }}
|
||||
</div>
|
||||
<h2 class="widget-title section-title">{{ T "article.tableOfContents" }}</h2>
|
||||
|
||||
<div class="widget--toc">
|
||||
{{ .TableOfContents }}
|
||||
</div>
|
||||
</section>
|
||||
</aside>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
@ -7,7 +7,7 @@
|
||||
components: ['embed'],
|
||||
url: "{{ $.Permalink }}",
|
||||
max_shown_comments: {{ default 15 .max_shown_comments }},
|
||||
theme: document.body.dataset.scheme,
|
||||
theme: document.documentElement.dataset.scheme,
|
||||
page_title: '{{ $.Title }}',
|
||||
locale: '{{ default "en" .locale }}',
|
||||
show_email_subscription: {{ default true .show_email_subscription }}
|
||||
|
||||
@ -31,7 +31,7 @@
|
||||
|
||||
addEventListener('message', event => {
|
||||
if (event.origin !== 'https://utteranc.es') return;
|
||||
setUtterancesTheme(document.body.dataset.scheme)
|
||||
setUtterancesTheme(document.documentElement.dataset.scheme)
|
||||
});
|
||||
|
||||
window.addEventListener('onColorSchemeChange', (e) => {
|
||||
|
||||
@ -14,7 +14,7 @@
|
||||
props: {
|
||||
title: "{{ $.Title }}",
|
||||
options: {
|
||||
proxy: (url) => "https://cors-anywhere.azm.workers.dev/" + url,
|
||||
autoCreateIssue: {{ default false .autoCreateIssue }},
|
||||
owner: "{{ .owner }}",
|
||||
repo: "{{ .repo }}",
|
||||
clientId: "{{ .clientId }}",
|
||||
|
||||
32
layouts/partials/comments/provider/waline.html
Normal file
32
layouts/partials/comments/provider/waline.html
Normal file
@ -0,0 +1,32 @@
|
||||
<script src='//cdn.jsdelivr.net/npm/@waline/client/dist/Waline.min.js'></script>
|
||||
<div id="waline" class="waline-container"></div>
|
||||
<style>
|
||||
.waline-container {
|
||||
background-color: var(--card-background);
|
||||
border-radius: var(--card-border-radius);
|
||||
box-shadow: var(--shadow-l1);
|
||||
padding: var(--card-padding);
|
||||
}
|
||||
.waline-container .vcount {
|
||||
color: var(--card-text-color-main);
|
||||
}
|
||||
</style>
|
||||
|
||||
{{- with .Site.Params.comments.waline -}}
|
||||
{{- $config := dict "el" "#waline" "dark" `html[data-scheme="dark"]` -}}
|
||||
{{- $replaceKeys := dict "serverurl" "serverURL" "requiredmeta" "requiredMeta" "wordlimit" "wordLimit" "pagesize" "pageSize" "avatarcdn" "avatarCDN" "avatarforce" "avatarForce" -}}
|
||||
|
||||
{{- range $key, $val := . -}}
|
||||
{{- if $val -}}
|
||||
{{- $replaceKey := index $replaceKeys $key -}}
|
||||
{{- $k := default $key $replaceKey -}}
|
||||
|
||||
{{- $config = merge $config (dict $k $val) -}}
|
||||
{{- end -}}
|
||||
{{- end -}}
|
||||
|
||||
<script>
|
||||
/// Waline client configuration see: https://waline.js.org/en/reference/client.html
|
||||
new Waline({{ $config | jsonify | safeJS }});
|
||||
</script>
|
||||
{{- end -}}
|
||||
@ -1,4 +1,4 @@
|
||||
{{- $ThemeVersion := "2.3.0" -}}
|
||||
{{- $ThemeVersion := "2.5.0" -}}
|
||||
<footer class="site-footer">
|
||||
<section class="copyright">
|
||||
©
|
||||
|
||||
@ -31,9 +31,9 @@
|
||||
* 1. If dark mode is set already (in local storage)
|
||||
* 2. Auto mode & prefere color scheme is dark
|
||||
*/
|
||||
document.body.dataset.scheme = 'dark';
|
||||
document.documentElement.dataset.scheme = 'dark';
|
||||
} else {
|
||||
document.body.dataset.scheme = 'light';
|
||||
document.documentElement.dataset.scheme = 'light';
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
@ -21,5 +21,5 @@
|
||||
<link rel="shortcut icon" href="{{ . }}" />
|
||||
{{ end }}
|
||||
|
||||
{{- template "_internal/google_analytics_async.html" . -}}
|
||||
{{- template "_internal/google_analytics.html" . -}}
|
||||
{{- partial "head/custom.html" . -}}
|
||||
|
||||
@ -8,7 +8,7 @@
|
||||
{{ $url := urls.Parse $imageValue }}
|
||||
|
||||
{{ if or (eq $url.Scheme "http") (eq $url.Scheme "https") }}
|
||||
<!-- Is a external image -->
|
||||
<!-- Is an external image -->
|
||||
{{ $result = merge $result (dict "permalink" $imageValue) }}
|
||||
{{ else }}
|
||||
{{ $pageResourceImage := .Context.Resources.GetMatch (printf "%s" ($imageValue | safeURL)) }}
|
||||
|
||||
@ -7,6 +7,7 @@
|
||||
|
||||
<header class="site-info">
|
||||
{{ with .Site.Params.sidebar.avatar }}
|
||||
{{ if (default true .enabled) }}
|
||||
<figure class="site-avatar">
|
||||
{{ if not .local }}
|
||||
<img src="{{ .src }}" width="300" height="300" class="site-logo" loading="lazy" alt="Avatar">
|
||||
@ -26,6 +27,7 @@
|
||||
<span class="emoji">{{ . }}</span>
|
||||
{{ end }}
|
||||
</figure>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
<h1 class="site-name"><a href="{{ .Site.BaseURL }}">{{ .Site.Title }}</a></h1>
|
||||
<h2 class="site-description">{{ .Site.Params.sidebar.subtitle }}</h2>
|
||||
|
||||
@ -1,21 +0,0 @@
|
||||
{{ define "container-class" }}article-page with-toolbar{{ end }}
|
||||
{{ define "main" }}
|
||||
<div id="article-toolbar">
|
||||
<a href="{{ .Site.BaseURL }}" class="back-home">
|
||||
{{ (resources.Get "icons/back.svg").Content | safeHTML }}
|
||||
<span>Back</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{{ partial "article/article.html" . }}
|
||||
|
||||
{{ partial "article/components/related-contents" . }}
|
||||
|
||||
{{ if or (not (isset .Params "comments")) (eq .Params.comments "true")}}
|
||||
{{ partial "comments/include" . }}
|
||||
{{ end }}
|
||||
|
||||
{{ partialCached "footer/footer" . }}
|
||||
|
||||
{{- partialCached "article/components/photoswipe.html" . -}}
|
||||
{{ end }}
|
||||
10
netlify.toml
10
netlify.toml
@ -2,7 +2,7 @@
|
||||
publish = "exampleSite/public"
|
||||
|
||||
[build.environment]
|
||||
HUGO_VERSION = "0.79.0"
|
||||
HUGO_VERSION = "0.85.0"
|
||||
HUGO_THEME = "repo"
|
||||
|
||||
[context.production]
|
||||
@ -17,4 +17,10 @@
|
||||
command = "cd exampleSite && hugo --gc --themesDir ../.. -b ${DEPLOY_PRIME_URL}"
|
||||
|
||||
[[plugins]]
|
||||
package = "/exampleSite/plugins/netlify-plugin-hugo-cache-resources"
|
||||
package = "netlify-plugin-hugo-cache-resources"
|
||||
|
||||
[plugins.inputs]
|
||||
# If it should show more verbose logs (optional, default = true)
|
||||
debug = true
|
||||
# Relative path to source directory in case you use Hugo's "--s" option
|
||||
srcdir = "exampleSite"
|
||||
File diff suppressed because one or more lines are too long
24
theme.toml
24
theme.toml
@ -5,23 +5,23 @@ name = "Stack"
|
||||
license = "GPL-3.0-only"
|
||||
licenselink = "https://github.com/CaiJimmy/hugo-theme-stack/blob/master/LICENSE"
|
||||
description = "Card-style Hugo theme designed for bloggers"
|
||||
homepage = "https://theme-stack.jimmycai.com"
|
||||
tags = [
|
||||
"blog",
|
||||
"responsive",
|
||||
"clean",
|
||||
"light",
|
||||
"dark",
|
||||
"personal"
|
||||
]
|
||||
homepage = "https://github.com/CaiJimmy/hugo-theme-stack"
|
||||
demosite = "https://theme-stack.jimmycai.com"
|
||||
|
||||
tags = ["blog", "responsive", "clean", "light", "dark", "personal"]
|
||||
|
||||
features = [
|
||||
"disqus",
|
||||
"photoswipe",
|
||||
"opengraph",
|
||||
"widgets"
|
||||
"widgets",
|
||||
"darkmode",
|
||||
"table of contents",
|
||||
"search",
|
||||
]
|
||||
|
||||
min_version = "0.78.0"
|
||||
|
||||
[author]
|
||||
name = "Jimmy Cai"
|
||||
homepage = "https://jimmycai.com"
|
||||
name = "Jimmy Cai"
|
||||
homepage = "https://jimmycai.com"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user