mirror of
https://github.com/dillonzq/LoveIt.git
synced 2024-09-20 00:52:49 +02:00
feat: new index and style update
This commit is contained in:
Dillon
parent
6981f1e285
commit
ee7c7549b5
29 changed files with 801 additions and 707 deletions
|
|
@ -4,13 +4,19 @@ date: {{ .Date }}
|
|||
lastmod: {{ .Date }}
|
||||
draft: true
|
||||
description: ""
|
||||
show_in_homepage: true
|
||||
show_description: false
|
||||
|
||||
tags: []
|
||||
categories: []
|
||||
|
||||
featured_image: ""
|
||||
featured_image_preview: ""
|
||||
|
||||
comment: true
|
||||
toc: false
|
||||
autoCollapseToc: true
|
||||
math: false
|
||||
---
|
||||
---
|
||||
|
||||
<!--more-->
|
||||
|
|
@ -8,4 +8,4 @@
|
|||
text-align:center;
|
||||
font-size: 30px;
|
||||
line-height: 50px;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,5 +1,4 @@
|
|||
/** Home **/
|
||||
|
||||
.intro {
|
||||
transform: translateY(25vh);
|
||||
text-align: center;
|
||||
|
|
@ -55,4 +54,4 @@ h2.description {
|
|||
i {
|
||||
font-size: 1.4em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,65 +0,0 @@
|
|||
.post-warp {
|
||||
.intro {
|
||||
transform: translateY(0);
|
||||
margin: 2em 0 5em 0;
|
||||
|
||||
.avatar {
|
||||
img {
|
||||
width: 96px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.post {
|
||||
margin-bottom: 4em;
|
||||
border-bottom: 1px dashed #ddd;
|
||||
|
||||
.post-content {
|
||||
padding-top: .5em;
|
||||
}
|
||||
|
||||
.post-footer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.post-meta {
|
||||
a {
|
||||
color: rgba(85, 85, 85, 0.52941) !important;
|
||||
|
||||
.dark-theme & {
|
||||
color: $global-font-secondary-color-dark !important;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: $global-font-secondary-color !important;
|
||||
|
||||
.dark-theme & {
|
||||
color: $global-font-secondary-color-dark !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.post-tags {
|
||||
span {
|
||||
a {
|
||||
color: rgba(85, 85, 85, 0.52941) !important;
|
||||
|
||||
.dark-theme & {
|
||||
color: $global-font-secondary-color-dark !important;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: $global-font-secondary-color !important;
|
||||
|
||||
.dark-theme & {
|
||||
color: $global-font-secondary-color-dark !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
22
assets/css/_page/_index.scss
Normal file
22
assets/css/_page/_index.scss
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
@import "_home";
|
||||
|
||||
.post-warp {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
max-width: 780px;
|
||||
margin: 0 auto;
|
||||
padding-top: 2rem;
|
||||
|
||||
@import "_post";
|
||||
@import "_posts";
|
||||
}
|
||||
|
||||
.archive {
|
||||
.post-title {
|
||||
text-align: right;
|
||||
padding-bottom: 2em;
|
||||
}
|
||||
|
||||
@import "_terms";
|
||||
@import "_tags";
|
||||
}
|
||||
|
|
@ -1,372 +1,370 @@
|
|||
/** Post **/
|
||||
.post-header {
|
||||
.post-title {
|
||||
margin: 0 !important;
|
||||
font-size: 2em;
|
||||
line-height: 1.5em;
|
||||
}
|
||||
}
|
||||
|
||||
.post-warp {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
max-width: 780px;
|
||||
margin: 0 auto;
|
||||
padding-top: 2rem;
|
||||
.post-meta {
|
||||
font-size: 14px;
|
||||
color: rgba(85, 85, 85, 0.52941) !important;
|
||||
|
||||
.post-header {
|
||||
.post-title {
|
||||
margin: 0 !important;
|
||||
font-size: 2em;
|
||||
line-height: 1.5em;
|
||||
}
|
||||
span {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.post-meta {
|
||||
font-size: 14px;
|
||||
color: rgba(85, 85, 85, 0.52941) !important;
|
||||
.dark-theme & {
|
||||
color: $global-font-secondary-color-dark !important;
|
||||
}
|
||||
|
||||
span {
|
||||
display: inline-block;
|
||||
}
|
||||
a {
|
||||
color: $post-link-color;
|
||||
|
||||
.dark-theme & {
|
||||
color: $global-font-secondary-color-dark !important;
|
||||
color: $post-link-color-dark;
|
||||
}
|
||||
|
||||
a {
|
||||
color: $post-link-color;
|
||||
|
||||
.dark-theme & {
|
||||
color: $post-link-color-dark;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: $post-link-hover-color;
|
||||
|
||||
.dark-theme & {
|
||||
color: $post-link-hover-color-dark;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.post-toc {
|
||||
position: absolute;
|
||||
width: 200px;
|
||||
max-width: 240px;
|
||||
margin-left: 800px;
|
||||
padding: 10px;
|
||||
border-left: 1px solid $global-border-color;
|
||||
word-wrap: break-word;
|
||||
box-sizing: border-box;
|
||||
top: 120px;
|
||||
|
||||
.post-toc-title {
|
||||
font-weight: 400;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.post-toc-content {
|
||||
&.always-active ul {
|
||||
display: block;
|
||||
}
|
||||
|
||||
>nav>ul {
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
ul {
|
||||
padding-left: 10px;
|
||||
list-style: none;
|
||||
|
||||
ul {
|
||||
padding-left: 20px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.has-active > ul {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.toc-link.active {
|
||||
color: $global-link-hover-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.post-content {
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
padding-top: .8em;
|
||||
padding-bottom: .3em;
|
||||
}
|
||||
|
||||
h2::before {
|
||||
content: "#";
|
||||
margin-right: 5px;
|
||||
color: $post-link-color;
|
||||
|
||||
.dark-theme & {
|
||||
color: $post-link-color-dark;
|
||||
}
|
||||
}
|
||||
|
||||
h3::before {
|
||||
content: "|";
|
||||
margin-right: 5px;
|
||||
color: $post-link-color;
|
||||
|
||||
.dark-theme & {
|
||||
color: $post-link-color-dark;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
color: $post-link-color;
|
||||
|
||||
.dark-theme & {
|
||||
color: $post-link-color-dark;
|
||||
}
|
||||
}
|
||||
|
||||
a:hover {
|
||||
&:hover {
|
||||
color: $post-link-hover-color;
|
||||
|
||||
.dark-theme &:hover {
|
||||
.dark-theme & {
|
||||
color: $post-link-hover-color-dark;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.author {
|
||||
font-size: 1.2em;
|
||||
}
|
||||
}
|
||||
|
||||
.post-toc {
|
||||
position: absolute;
|
||||
width: 200px;
|
||||
max-width: 240px;
|
||||
margin-left: 800px;
|
||||
padding: 10px;
|
||||
border-left: 1px solid $global-border-color;
|
||||
word-wrap: break-word;
|
||||
box-sizing: border-box;
|
||||
top: 120px;
|
||||
|
||||
.post-toc-title {
|
||||
font-weight: 400;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.post-toc-content {
|
||||
&.always-active ul {
|
||||
display: block;
|
||||
}
|
||||
|
||||
>nav>ul {
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
ul {
|
||||
padding-left: 2em;
|
||||
}
|
||||
padding-left: 10px;
|
||||
list-style: none;
|
||||
|
||||
.table-wrapper {
|
||||
overflow-x: auto;
|
||||
|
||||
> table {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
margin: 10px 0;
|
||||
border-spacing: 0;
|
||||
box-shadow: 2px 2px 3px rgba(0,0,0,.125);
|
||||
background: $table-background-color;
|
||||
|
||||
.dark-theme & {
|
||||
background: $table-background-color-dark;
|
||||
}
|
||||
|
||||
thead {
|
||||
background: $table-thead-color;
|
||||
|
||||
.dark-theme & {
|
||||
background-color: $table-thead-color-dark;
|
||||
}
|
||||
}
|
||||
|
||||
th, td {
|
||||
padding: 5px 15px;
|
||||
border: 1px double $global-border-color;
|
||||
|
||||
.dark-theme & {
|
||||
border: 1px double $global-border-color-dark;
|
||||
}
|
||||
}
|
||||
ul {
|
||||
padding-left: 20px;
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
figure {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.image-caption:not(:empty) {
|
||||
min-width: 20%;
|
||||
max-width: 80%;
|
||||
display: inline-block;
|
||||
padding: 10px;
|
||||
margin: 0 auto;
|
||||
border-bottom: 1px solid #d9d9d9;
|
||||
font-size: 14px;
|
||||
color: #969696;
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
img {
|
||||
display: block;
|
||||
max-width: 80%;
|
||||
height: auto;
|
||||
margin: 0 auto;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.featured_image {
|
||||
width: 100% !important;
|
||||
max-width: 100% !important;
|
||||
height: auto !important;
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
font-size: 1rem;
|
||||
display: block;
|
||||
border-width: 1px 0;
|
||||
border-style: solid;
|
||||
border-color: $global-border-color;
|
||||
padding: 1.5em 1.2em 0.5em 1.2em;
|
||||
margin: 0 0 2em 0;
|
||||
position: relative;
|
||||
|
||||
&:before {
|
||||
content: '\201C';
|
||||
position: absolute;
|
||||
top: 0em;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 3rem;
|
||||
height: 2rem;
|
||||
font: 6em/1.08em 'PT Sans', sans-serif;
|
||||
color: $post-link-color;
|
||||
text-align: center;
|
||||
|
||||
.dark-theme & {
|
||||
color: $post-link-color-dark;
|
||||
}
|
||||
}
|
||||
&:after {
|
||||
content: "#blockquote" attr(cite);
|
||||
.has-active > ul {
|
||||
display: block;
|
||||
text-align: right;
|
||||
font-size: 0.875em;
|
||||
color: $post-link-color;
|
||||
}
|
||||
}
|
||||
|
||||
.toc-link.active {
|
||||
color: $global-link-hover-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.featured_image {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
margin: 0 auto;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.post-content {
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
padding-top: .8em;
|
||||
padding-bottom: .3em;
|
||||
}
|
||||
|
||||
h2::before {
|
||||
content: "#";
|
||||
margin-right: 5px;
|
||||
color: $post-link-color;
|
||||
|
||||
.dark-theme & {
|
||||
color: $post-link-color-dark;
|
||||
}
|
||||
}
|
||||
|
||||
h3::before {
|
||||
content: "|";
|
||||
margin-right: 5px;
|
||||
color: $post-link-color;
|
||||
|
||||
.dark-theme & {
|
||||
color: $post-link-color-dark;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
color: $post-link-color;
|
||||
|
||||
.dark-theme & {
|
||||
color: $post-link-color-dark;
|
||||
}
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: $post-link-hover-color;
|
||||
|
||||
.dark-theme &:hover {
|
||||
color: $post-link-hover-color-dark;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
padding-left: 2em;
|
||||
}
|
||||
|
||||
.table-wrapper {
|
||||
overflow-x: auto;
|
||||
|
||||
> table {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
margin: 10px 0;
|
||||
border-spacing: 0;
|
||||
box-shadow: 2px 2px 3px rgba(0,0,0,.125);
|
||||
background: $table-background-color;
|
||||
|
||||
.dark-theme & {
|
||||
background: $table-background-color-dark;
|
||||
}
|
||||
|
||||
thead {
|
||||
background: $table-thead-color;
|
||||
|
||||
.dark-theme & {
|
||||
color: $post-link-color-dark;
|
||||
background-color: $table-thead-color-dark;
|
||||
}
|
||||
}
|
||||
|
||||
.dark-theme & {
|
||||
border-color: $global-border-color-dark;
|
||||
th, td {
|
||||
padding: 5px 15px;
|
||||
border: 1px double $global-border-color;
|
||||
|
||||
.dark-theme & {
|
||||
border: 1px double $global-border-color-dark;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@import "../_partial/_post/code";
|
||||
@import "../_partial/_post/admonition";
|
||||
figure {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.mermaid {
|
||||
@import "../_mermaid/neutral/index";
|
||||
.image-caption:not(:empty) {
|
||||
min-width: 20%;
|
||||
max-width: 80%;
|
||||
display: inline-block;
|
||||
padding: 10px;
|
||||
margin: 0 auto;
|
||||
border-bottom: 1px solid #d9d9d9;
|
||||
font-size: 14px;
|
||||
color: #969696;
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.dark-theme & {
|
||||
@import "../_mermaid/dark/index";
|
||||
}
|
||||
}
|
||||
img {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
margin: 0 auto;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.echarts {
|
||||
margin: 3% auto;
|
||||
blockquote {
|
||||
font-size: 1rem;
|
||||
display: block;
|
||||
border-width: 1px 0;
|
||||
border-style: solid;
|
||||
border-color: $global-border-color;
|
||||
padding: 1.5em 1.2em 0.5em 1.2em;
|
||||
margin: 0 0 2em 0;
|
||||
position: relative;
|
||||
|
||||
&:before {
|
||||
content: '\201C';
|
||||
position: absolute;
|
||||
top: 0em;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 3rem;
|
||||
height: 2rem;
|
||||
font: 6em/1.08em 'PT Sans', sans-serif;
|
||||
color: $post-link-color;
|
||||
text-align: center;
|
||||
|
||||
.dark-theme & {
|
||||
color: $post-link-color-dark;
|
||||
}
|
||||
}
|
||||
&:after {
|
||||
content: "#blockquote" attr(cite);
|
||||
display: block;
|
||||
text-align: right;
|
||||
font-size: 0.875em;
|
||||
color: $post-link-color;
|
||||
|
||||
.dark-theme & {
|
||||
color: $post-link-color-dark;
|
||||
}
|
||||
}
|
||||
|
||||
.bilibili {
|
||||
position: relative;
|
||||
.dark-theme & {
|
||||
border-color: $global-border-color-dark;
|
||||
}
|
||||
}
|
||||
|
||||
@import "../_partial/_post/code";
|
||||
@import "../_partial/_post/admonition";
|
||||
|
||||
.mermaid {
|
||||
@import "../_mermaid/neutral/index";
|
||||
|
||||
.dark-theme & {
|
||||
@import "../_mermaid/dark/index";
|
||||
}
|
||||
}
|
||||
|
||||
.echarts {
|
||||
margin: 3% auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.bilibili {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 0;
|
||||
padding-bottom: 75%;
|
||||
margin: 3% auto;
|
||||
|
||||
iframe {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 0;
|
||||
padding-bottom: 75%;
|
||||
margin: 3% auto;
|
||||
|
||||
iframe {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
hr {
|
||||
margin: 1rem 0;
|
||||
position: relative;
|
||||
border-top: 1px dashed $global-border-color;
|
||||
border-bottom: none;
|
||||
|
||||
.dark-theme & {
|
||||
border-top: 1px dashed $global-border-color-dark;
|
||||
}
|
||||
}
|
||||
|
||||
kbd {
|
||||
display: inline-block;
|
||||
padding: .25em;
|
||||
background-color: $global-background-color;
|
||||
border: 1px solid $global-border-color;
|
||||
border-bottom-color: $global-border-color;
|
||||
border-radius: 3px;
|
||||
-webkit-box-shadow: inset 0 -1px 0 $global-border-color;
|
||||
box-shadow: inset 0 -1px 0 $global-border-color;
|
||||
font-size: .8em;
|
||||
line-height: 1.25;
|
||||
font-family: $code-font-family;
|
||||
color: $code-color;
|
||||
|
||||
.dark-theme & {
|
||||
background-color: $global-background-color-dark;
|
||||
border: 1px solid $global-border-color-dark;
|
||||
border-bottom-color: $global-border-color-dark;
|
||||
-webkit-box-shadow: inset 0 -1px 0 $global-border-color-dark;
|
||||
box-shadow: inset 0 -1px 0 $global-border-color-dark;
|
||||
color: $code-color-dark;
|
||||
}
|
||||
}
|
||||
|
||||
.typeit {
|
||||
.code {
|
||||
padding: 6px;
|
||||
font-size: 14px;
|
||||
font-family: Consolas, Monaco, Menlo, Consolas, monospace;
|
||||
font-weight: bold;
|
||||
word-break: break-all;
|
||||
|
||||
.k {
|
||||
color: #D371E3;
|
||||
}
|
||||
|
||||
.kt {
|
||||
color: #D371E3;
|
||||
}
|
||||
|
||||
.kc {
|
||||
color: #D371E3;
|
||||
}
|
||||
|
||||
.o {
|
||||
color: #D371E3;
|
||||
}
|
||||
|
||||
.nf {
|
||||
color: #F16473;
|
||||
}
|
||||
|
||||
.na {
|
||||
color: #41B1F5;
|
||||
}
|
||||
|
||||
.s {
|
||||
color: #8BC56F;
|
||||
}
|
||||
|
||||
.n {
|
||||
color: #DB975C;
|
||||
}
|
||||
|
||||
.c1 {
|
||||
color: #7E848F;
|
||||
}
|
||||
}
|
||||
height: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 1em;
|
||||
margin: .5em 0 .5em 0;
|
||||
hr {
|
||||
margin: 1rem 0;
|
||||
position: relative;
|
||||
border-top: 1px dashed $global-border-color;
|
||||
border-bottom: none;
|
||||
|
||||
.dark-theme & {
|
||||
border-top: 1px dashed $global-border-color-dark;
|
||||
}
|
||||
}
|
||||
|
||||
kbd {
|
||||
display: inline-block;
|
||||
padding: .25em;
|
||||
background-color: $global-background-color;
|
||||
border: 1px solid $global-border-color;
|
||||
border-bottom-color: $global-border-color;
|
||||
border-radius: 3px;
|
||||
-webkit-box-shadow: inset 0 -1px 0 $global-border-color;
|
||||
box-shadow: inset 0 -1px 0 $global-border-color;
|
||||
font-size: .8em;
|
||||
line-height: 1.25;
|
||||
font-family: $code-font-family;
|
||||
color: $code-color;
|
||||
|
||||
.dark-theme & {
|
||||
background-color: $global-background-color-dark;
|
||||
border: 1px solid $global-border-color-dark;
|
||||
border-bottom-color: $global-border-color-dark;
|
||||
-webkit-box-shadow: inset 0 -1px 0 $global-border-color-dark;
|
||||
box-shadow: inset 0 -1px 0 $global-border-color-dark;
|
||||
color: $code-color-dark;
|
||||
}
|
||||
}
|
||||
|
||||
.typeit {
|
||||
.code {
|
||||
padding: 6px;
|
||||
font-size: 14px;
|
||||
font-family: Consolas, Monaco, Menlo, Consolas, monospace;
|
||||
font-weight: bold;
|
||||
word-break: break-all;
|
||||
|
||||
.k {
|
||||
color: #D371E3;
|
||||
}
|
||||
|
||||
.kt {
|
||||
color: #D371E3;
|
||||
}
|
||||
|
||||
.kc {
|
||||
color: #D371E3;
|
||||
}
|
||||
|
||||
.o {
|
||||
color: #D371E3;
|
||||
}
|
||||
|
||||
.nf {
|
||||
color: #F16473;
|
||||
}
|
||||
|
||||
.na {
|
||||
color: #41B1F5;
|
||||
}
|
||||
|
||||
.s {
|
||||
color: #8BC56F;
|
||||
}
|
||||
|
||||
.n {
|
||||
color: #DB975C;
|
||||
}
|
||||
|
||||
.c1 {
|
||||
color: #7E848F;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 1em;
|
||||
margin: .5em 0 .5em 0;
|
||||
}
|
||||
|
||||
.post-footer {
|
||||
.post-info {
|
||||
margin-top: 3rem;
|
||||
border-bottom: 1px solid $global-border-color;
|
||||
|
|
@ -419,28 +417,28 @@
|
|||
transform: translateX(4px);
|
||||
}
|
||||
}
|
||||
|
||||
.post-comment {
|
||||
padding: 3em 0;
|
||||
}
|
||||
|
||||
.align-left {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.align-center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.align-right {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.float-left {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.float-right {
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
|
||||
.post-comment {
|
||||
padding: 3em 0;
|
||||
}
|
||||
|
||||
.align-left {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.align-center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.align-right {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.float-left {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.float-right {
|
||||
float: right;
|
||||
}
|
||||
128
assets/css/_page/_posts.scss
Normal file
128
assets/css/_page/_posts.scss
Normal file
|
|
@ -0,0 +1,128 @@
|
|||
.intro {
|
||||
transform: translateY(0);
|
||||
padding: 2em 0 2em 0;
|
||||
|
||||
.avatar {
|
||||
img {
|
||||
width: 96px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.post {
|
||||
padding-top: 0.8em;
|
||||
padding-bottom: 0.8em;
|
||||
color: $global-font-color;
|
||||
border-top: 1px dashed $global-border-color;
|
||||
border-bottom: 1px dashed $global-border-color;
|
||||
|
||||
.dark-theme & {
|
||||
color: $global-font-color-dark;
|
||||
border-bottom: 1px dashed $global-border-color-dark;
|
||||
}
|
||||
|
||||
.featured_image_preview {
|
||||
width: 100%;
|
||||
padding: 30% 0 0;
|
||||
position: relative;
|
||||
margin-bottom: 1em;
|
||||
|
||||
img {
|
||||
position: absolute;
|
||||
width: 100%; height: 100%;
|
||||
left: 0; top: 0;
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
|
||||
.post-list-title {
|
||||
font-size: 1.6em;
|
||||
}
|
||||
|
||||
.post-meta {
|
||||
font-size: 14px !important;
|
||||
a {
|
||||
color: $global-font-secondary-color !important;
|
||||
|
||||
.dark-theme & {
|
||||
color: $global-font-secondary-color-dark !important;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: $global-link-hover-color !important;
|
||||
|
||||
.dark-theme & {
|
||||
color: $global-link-hover-color-dark !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.post-content {
|
||||
padding-top: .2em;
|
||||
font-size: 0.9em;
|
||||
width: 100%;
|
||||
max-height: 100px;
|
||||
overflow: hidden;
|
||||
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-size: 1em;
|
||||
line-height: 1em;
|
||||
padding-top: .3em;
|
||||
padding-bottom: .3em;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
padding-top: .3em;
|
||||
padding-bottom: .3em;
|
||||
}
|
||||
}
|
||||
|
||||
.post-footer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-size: 14px !important;
|
||||
|
||||
a {
|
||||
color: $post-link-color !important;
|
||||
|
||||
.dark-theme & {
|
||||
color: $post-link-color-dark !important;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: $post-link-hover-color !important;
|
||||
|
||||
.dark-theme & {
|
||||
color: $post-link-hover-color-dark !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.post-tags {
|
||||
padding: 0;
|
||||
|
||||
a {
|
||||
color: $global-link-color !important;
|
||||
|
||||
.dark-theme & {
|
||||
color: $global-link-color-dark !important;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: $global-link-hover-color !important;
|
||||
|
||||
.dark-theme & {
|
||||
color: $global-link-hover-color-dark !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,76 +1,73 @@
|
|||
.post-warp {
|
||||
.archive-item {
|
||||
margin-left: 2rem;
|
||||
}
|
||||
|
||||
.archive-item {
|
||||
margin-left: 2rem;
|
||||
}
|
||||
.categories-card {
|
||||
margin: 0 auto;
|
||||
margin-top: 3em;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
padding: 0 2.5em;
|
||||
line-height: 1.6em;
|
||||
|
||||
.categories-card {
|
||||
margin: 0 auto;
|
||||
margin-top: 3em;
|
||||
.card-item {
|
||||
font-size: 14px;
|
||||
text-align: left;
|
||||
width: 45%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
padding: 0 2.5em;
|
||||
line-height: 1.6em;
|
||||
align-items: flex-start;
|
||||
margin-top: 2em;
|
||||
min-height: 16em;
|
||||
padding: 0 2%;
|
||||
position: relative;
|
||||
|
||||
.card-item {
|
||||
font-size: 14px;
|
||||
text-align: left;
|
||||
width: 45%;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
margin-top: 2em;
|
||||
min-height: 16em;
|
||||
padding: 0 2%;
|
||||
position: relative;
|
||||
|
||||
.categories {
|
||||
overflow: hidden;
|
||||
}
|
||||
.categories {
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.archive-item-link {
|
||||
display: inline-block;
|
||||
.archive-item-link {
|
||||
display: inline-block;
|
||||
text-decoration: none;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
max-width: 95%;
|
||||
|
||||
&:hover {
|
||||
color: $global-link-hover-color;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.dark-theme & {
|
||||
color: $global-link-color-dark;
|
||||
text-decoration: none;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
max-width: 95%;
|
||||
transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease, opacity 0.2s ease;
|
||||
|
||||
&:hover {
|
||||
color: $global-link-hover-color;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.dark-theme & {
|
||||
color: $global-link-color-dark;
|
||||
color: $global-link-hover-color-dark;
|
||||
text-decoration: none;
|
||||
transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease, opacity 0.2s ease;
|
||||
|
||||
&:hover {
|
||||
color: $global-link-hover-color-dark;
|
||||
text-decoration: none;
|
||||
transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease, opacity 0.2s ease;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.archive-item-date {
|
||||
float: right;
|
||||
text-align: right;
|
||||
color: $global-font-secondary-color;
|
||||
.archive-item-date {
|
||||
float: right;
|
||||
text-align: right;
|
||||
color: $global-font-secondary-color;
|
||||
|
||||
.dark-theme & {
|
||||
color: $global-font-secondary-color-dark;
|
||||
}
|
||||
.dark-theme & {
|
||||
color: $global-font-secondary-color-dark;
|
||||
}
|
||||
}
|
||||
|
||||
.more-post {
|
||||
text-align: right;
|
||||
}
|
||||
.more-post {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.categories {
|
||||
|
|
@ -82,4 +79,4 @@
|
|||
float: right;
|
||||
padding-right: 1em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -7,11 +7,11 @@
|
|||
list-style: none;
|
||||
white-space: nowrap;
|
||||
width: 100%;
|
||||
padding-top: 2em;
|
||||
padding-top: 1em;
|
||||
|
||||
a {
|
||||
-webkit-font-smoothing: antialiased;
|
||||
font-size: 12px;
|
||||
font-size: 0.8em;
|
||||
color: #bfbfbf;
|
||||
letter-spacing: 0.1em;
|
||||
font-weight: 700;
|
||||
|
|
|
|||
|
|
@ -5,11 +5,7 @@
|
|||
@import "_core/base";
|
||||
@import "_core/layout";
|
||||
|
||||
@import "_page/home";
|
||||
@import "_page/home_post";
|
||||
@import "_page/post";
|
||||
@import "_page/tags";
|
||||
@import "_page/terms";
|
||||
@import "_page/index";
|
||||
|
||||
@import "_partial/navbar";
|
||||
@import "_partial/footer";
|
||||
|
|
|
|||
|
|
@ -56,56 +56,64 @@ jQuery(function($) {
|
|||
_Blog._initToc = function() {
|
||||
const SPACING = 20;
|
||||
const $toc = $('.post-toc');
|
||||
const $footer = $('.post-footer');
|
||||
|
||||
if ($toc.length) {
|
||||
const startTop = $toc.css("top");
|
||||
const minScrollTop = $toc.offset().top - SPACING;
|
||||
|
||||
const tocState = {
|
||||
start: {
|
||||
'position': 'absolute',
|
||||
'top': startTop,
|
||||
},
|
||||
process: {
|
||||
'position': 'fixed',
|
||||
'top': SPACING,
|
||||
},
|
||||
};
|
||||
const minTop = $toc.position().top;
|
||||
const mainTop = $('main').position().top;
|
||||
const minScrollTop = minTop + mainTop - SPACING;
|
||||
|
||||
$(window).scroll(function() {
|
||||
const scrollTop = $(window).scrollTop();
|
||||
const scrollTop = $(window).scrollTop();
|
||||
const maxTop = $footer.position().top - $toc.height();
|
||||
const maxScrollTop = maxTop + mainTop - SPACING;
|
||||
|
||||
if (scrollTop < minScrollTop) {
|
||||
$toc.css(tocState.start);
|
||||
} else {
|
||||
$toc.css(tocState.process);
|
||||
}
|
||||
const tocState = {
|
||||
start: {
|
||||
'position': 'absolute',
|
||||
'top': minTop,
|
||||
},
|
||||
process: {
|
||||
'position': 'fixed',
|
||||
'top': SPACING,
|
||||
},
|
||||
end: {
|
||||
'position': 'absolute',
|
||||
'top': maxTop,
|
||||
}
|
||||
};
|
||||
|
||||
if (scrollTop < minScrollTop) {
|
||||
$toc.css(tocState.start);
|
||||
} else if (scrollTop > maxScrollTop) {
|
||||
$toc.css(tocState.end);
|
||||
} else {
|
||||
$toc.css(tocState.process);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
const HEADERFIX = 30;
|
||||
const HEADERFIX = 60;
|
||||
const $toclink = $('.toc-link');
|
||||
const $headerlink = $('.headerlink');
|
||||
const $tocLinkLis = $('.post-toc-content li');
|
||||
|
||||
const headerlinkTop = $.map($headerlink, function(link) {
|
||||
return $(link).offset().top;
|
||||
});
|
||||
|
||||
const headerLinksOffsetForSearch = $.map(headerlinkTop, function(offset) {
|
||||
return offset - HEADERFIX;
|
||||
});
|
||||
|
||||
const searchActiveTocIndex = function(array, target) {
|
||||
for (let i = 0; i < array.length - 1; i++) {
|
||||
if (target > array[i] && target <= array[i + 1]) return i;
|
||||
}
|
||||
if (target > array[array.length - 1]) return array.length - 1;
|
||||
return 0;
|
||||
};
|
||||
|
||||
const activeIndex = function() {
|
||||
const scrollTop = $(window).scrollTop();
|
||||
const headerlinkTop = $.map($headerlink, function(link) {
|
||||
return $(link).offset().top;
|
||||
});
|
||||
const headerLinksOffsetForSearch = $.map(headerlinkTop, function(offset) {
|
||||
return offset - HEADERFIX;
|
||||
});
|
||||
const searchActiveTocIndex = function(array, target) {
|
||||
for (let i = 0; i < array.length - 1; i++) {
|
||||
if (target > array[i] && target <= array[i + 1]) return i;
|
||||
}
|
||||
if (target > array[array.length - 1]) return array.length - 1;
|
||||
return 0;
|
||||
};
|
||||
|
||||
const activeTocIndex = searchActiveTocIndex(headerLinksOffsetForSearch, scrollTop);
|
||||
|
||||
$($toclink).removeClass('active');
|
||||
|
|
@ -182,7 +190,7 @@ jQuery(function($) {
|
|||
_Blog.countdown = function() {
|
||||
if (window.countdownMap) {
|
||||
Object.keys(countdownMap).forEach(function(id) {
|
||||
$(id).countdown(countdownMap[id], {elapse: true})
|
||||
$(`#${id}`).countdown(countdownMap[id], {elapse: true})
|
||||
.on('update.countdown', function(event) {
|
||||
var $this = $(this).html(event.strftime(''
|
||||
+ '<span>%D</span> 天 <br />'
|
||||
|
|
@ -226,9 +234,9 @@ jQuery(function($) {
|
|||
_Blog.changeTitle();
|
||||
_Blog.chroma();
|
||||
_Blog.responsiveTable();
|
||||
_Blog.toc();
|
||||
_Blog.echarts(isDark);
|
||||
_Blog.countdown();
|
||||
_Blog.typeit();
|
||||
_Blog.toc();
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -37,6 +37,9 @@ other = "Theme - "
|
|||
[toc]
|
||||
other = "Table of Contents"
|
||||
|
||||
[publish]
|
||||
other = "published on"
|
||||
|
||||
[included]
|
||||
other = "included in"
|
||||
|
||||
|
|
@ -63,6 +66,9 @@ other = "Back"
|
|||
|
||||
[home]
|
||||
other = "Home"
|
||||
|
||||
[readmore]
|
||||
other = "Read More......"
|
||||
# === posts/single.html ===
|
||||
|
||||
# === 404.html ===
|
||||
|
|
|
|||
|
|
@ -37,6 +37,9 @@ other = "主题 - "
|
|||
[toc]
|
||||
other = "目录"
|
||||
|
||||
[publish]
|
||||
other = "发布于"
|
||||
|
||||
[included]
|
||||
other = "收录于"
|
||||
|
||||
|
|
@ -63,6 +66,9 @@ other = "返回"
|
|||
|
||||
[home]
|
||||
other = "主页"
|
||||
|
||||
[readmore]
|
||||
other = "阅读全文......"
|
||||
# === posts/single.html ===
|
||||
|
||||
# === 404.html ===
|
||||
|
|
|
|||
|
|
@ -5,9 +5,6 @@
|
|||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<title>{{ block "title" . }}{{ .Site.Title }}{{ end }}</title>
|
||||
{{ partial "head.html" . }}
|
||||
{{ $style := resources.Get "css/style.scss" | resources.ToCSS | resources.Minify}}
|
||||
<link rel="stylesheet" href="{{ $style.RelPermalink }}">
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.10.1/css/all.min.css" integrity="sha256-fdcFNFiBMrNfWL6OcAGQz6jDgNTRxnrLEd4vJYFWScE=" crossorigin="anonymous">
|
||||
</head>
|
||||
<body class="">
|
||||
<div class="wrapper">
|
||||
|
|
@ -18,7 +15,7 @@
|
|||
</div>
|
||||
</main>
|
||||
{{ partial "footer.html" . }}
|
||||
{{ partial "scripts.html" . }}
|
||||
</div>
|
||||
{{ partial "js.html" . }}
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
|
@ -1,22 +1,22 @@
|
|||
{{ define "title" }}{{ T "posts" }} - {{ .Site.Title }}{{ end }}
|
||||
{{ define "title" }}{{ T "posts" }} - {{ .Site.Title }}{{ end -}}
|
||||
|
||||
{{ define "content" }}
|
||||
{{ $data := .Data }}
|
||||
{{ define "content" -}}
|
||||
{{ $data := .Data -}}
|
||||
<div class="post-warp archive">
|
||||
<h2 class="post-title" style="text-align:right;padding-bottom:2em">
|
||||
<h2 class="post-title">
|
||||
{{ printf "- %s -" (T "posts") }}
|
||||
</h2>
|
||||
{{ range (.Paginate (.Pages.GroupByDate "2006")).PageGroups }}
|
||||
<h3>{{ .Key }}</h3>
|
||||
|
||||
{{ range .Pages }}
|
||||
<article class="archive-item">
|
||||
<a href="{{ .RelPermalink }}" class="archive-item-link">{{ .Title }}</a>
|
||||
<span class="archive-item-date">
|
||||
{{ .Date.Format (.Site.Params.dateFormatToUse | default "01-02") }}
|
||||
</span>
|
||||
</article>
|
||||
{{ end }} {{ end }}
|
||||
{{ partial "paginator.html" . }}
|
||||
{{- range (.Paginate (.Pages.GroupByDate "2006")).PageGroups -}}
|
||||
<h3>{{ .Key }}</h3>
|
||||
{{- range .Pages -}}
|
||||
<article class="archive-item">
|
||||
<a href="{{ .RelPermalink }}" class="archive-item-link">{{ .Title }}</a>
|
||||
<span class="archive-item-date">
|
||||
{{- .Date.Format (.Site.Params.dateFormatToUse | default "01-02") -}}
|
||||
</span>
|
||||
</article>
|
||||
{{- end -}}
|
||||
{{- end -}}
|
||||
{{- partial "paginator.html" . -}}
|
||||
</div>
|
||||
{{end }}
|
||||
{{- end }}
|
||||
55
layouts/_default/summary.html
Normal file
55
layouts/_default/summary.html
Normal file
|
|
@ -0,0 +1,55 @@
|
|||
<article class="post" itemscope itemtype="http://schema.org/Article">
|
||||
{{ $publish_date := .PublishDate.Format (.Site.Params.dateFormatToUse | default "2006-01-02") }}
|
||||
{{ $author := .Site.Author.name }}
|
||||
{{ if isset .Params "author" }}
|
||||
{{ $author = .Site.Author.name }}
|
||||
{{ end }}
|
||||
|
||||
<!--featured_image-->
|
||||
{{ with .Params.featured_image }}
|
||||
{{ $image := $.Params.featured_image_preview | default . }}
|
||||
<div class="featured_image_preview">
|
||||
<img src=/images/loading.svg data-sizes=auto data-src={{ $image }} alt="featured image" class="lazyload">
|
||||
</div>
|
||||
{{ end }}
|
||||
<!-- end featured_image-->
|
||||
<header class="post-header">
|
||||
<h1 class="post-title post-list-title" itemprop="name headline">
|
||||
<a href="{{ .Permalink }}">{{ .Title }}</a>
|
||||
</h1>
|
||||
</header>
|
||||
<div class="post-meta">
|
||||
<a class="author" href="{{.Site.BaseURL }}" rel="author"><i class="fas fa-user-circle"></i> {{ $author }} </a>
|
||||
{{ T "publish" }}<span class="post-time"> <time datetime={{ $publish_date }}>{{ $publish_date }}</time> </span>
|
||||
{{ with .Params.categories -}}
|
||||
<span class="post-category">
|
||||
{{ T "included" }}
|
||||
{{ range . }}
|
||||
{{- $name := . -}}
|
||||
{{- with $.Site.GetPage "taxonomy" (printf "categories/%s" $name) | default ($.Site.GetPage "taxonomy" (printf "categories/%s" ($name | urlize))) -}}
|
||||
<i class="far fa-folder"></i> <a href="{{ .Permalink }}">{{ $name }}</a>
|
||||
{{ end -}}
|
||||
{{ end }}
|
||||
</span>
|
||||
{{- end }}
|
||||
</div>
|
||||
<div class="post-content">
|
||||
{{ if .Params.show_description }}
|
||||
<p>{{ . }}</p>
|
||||
{{ else }}
|
||||
{{ .Summary }}
|
||||
{{ end }}
|
||||
</div>
|
||||
<div class="post-footer">
|
||||
<a href="{{ .Permalink }}">{{ T "readmore" }}</a>
|
||||
{{ with .Params.tags }}
|
||||
<div class="post-tags">
|
||||
{{ range . }}
|
||||
<span class="tag">
|
||||
<a href="{{ "tags/" | absURL }}{{ . | urlize }}/"> <i class="fas fa-tag"></i> {{ . }}</a>
|
||||
</span>
|
||||
{{ end }}
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
</article>
|
||||
|
|
@ -1,15 +1,16 @@
|
|||
{{ define "content" }}
|
||||
{{ if eq .Site.Params.home_mode "post" }}
|
||||
{{ define "content" -}}
|
||||
{{ if eq .Site.Params.home_mode "post" -}}
|
||||
<div class="post-warp">
|
||||
{{ partial "home/profile.html" . }}
|
||||
{{- partial "home/profile.html" . -}}
|
||||
|
||||
{{ range (.Paginate (where .Pages "Type" "posts")).Pages }}
|
||||
{{ .Render "summary" }}
|
||||
{{ end }}
|
||||
{{- $paginator := .Paginate (where (where .Data.Pages "Type" "posts") ".Params.show_in_homepage" "!=" false) }}
|
||||
{{ range $paginator.Pages -}}
|
||||
{{ .Render "summary" -}}
|
||||
{{ end -}}
|
||||
|
||||
{{ partial "paginator.html" . }}
|
||||
</div>
|
||||
{{ else }}
|
||||
{{ partial "home/profile.html" . }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
{{- else -}}
|
||||
{{ partial "home/profile.html" . -}}
|
||||
{{ end -}}
|
||||
{{ end }}
|
||||
|
|
@ -18,4 +18,4 @@
|
|||
<span class="license"> | {{ . | safeHTML }}</span>
|
||||
{{- end -}}
|
||||
</div>
|
||||
</footer>
|
||||
</footer>
|
||||
|
|
@ -30,12 +30,15 @@
|
|||
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
|
||||
<meta name="msapplication-TileColor" content="#da532c">
|
||||
<meta name="theme-color" content="#ffffff">
|
||||
|
||||
{{ with .OutputFormats.Get "RSS" }}
|
||||
{{- with .OutputFormats.Get "RSS" -}}
|
||||
<link rel="alternate" href="{{ .RelPermalink }}" type="application/rss+xml" title="{{ site.Title }}">
|
||||
<link rel="feed" href="{{ .RelPermalink }}" type="application/rss+xml" title="{{ site.Title }}">
|
||||
{{ end }}
|
||||
{{- end -}}
|
||||
|
||||
{{ template "_internal/twitter_cards.html" . }}
|
||||
{{- template "_internal/twitter_cards.html" . -}}
|
||||
|
||||
{{ partial "seo_schema.html" . }}
|
||||
{{- partial "seo_schema.html" . -}}
|
||||
|
||||
{{- $style := resources.Get "css/style.scss" | resources.ToCSS | resources.Minify -}}
|
||||
<link rel="stylesheet" href="{{ $style.RelPermalink }}">
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.10.1/css/all.min.css" integrity="sha256-fdcFNFiBMrNfWL6OcAGQz6jDgNTRxnrLEd4vJYFWScE=" crossorigin="anonymous">
|
||||
|
|
@ -13,7 +13,6 @@
|
|||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<nav class="navbar-mobile" id="nav-mobile" style="display: none">
|
||||
<div class="container">
|
||||
<div class="navbar-header">
|
||||
|
|
@ -30,4 +29,4 @@
|
|||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</nav>
|
||||
|
|
@ -28,4 +28,4 @@
|
|||
{{ end }}
|
||||
{{ end }}
|
||||
</ul>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
35
layouts/partials/post/footer.html
Normal file
35
layouts/partials/post/footer.html
Normal file
|
|
@ -0,0 +1,35 @@
|
|||
{{ $modify_date := .Lastmod.Format (.Site.Params.dateFormatToUse | default "2006-01-02") -}}
|
||||
<div class="post-footer">
|
||||
<div class="post-info">
|
||||
<div class="post-info-mod"><span>{{ printf (T "lastMod") $modify_date }}</span></div>
|
||||
<div class="post-info-share">
|
||||
{{ if and ( .Param "socialShare" ) (gt (len (.Param "share")) 0) }}
|
||||
<span>{{ partial "post/share.html" . }}</span>
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="post-tags">
|
||||
<section>
|
||||
{{ with .Params.tags }}
|
||||
{{ range . }}
|
||||
<span class="tag">
|
||||
<a href="{{ "tags/" | absURL }}{{ . | urlize }}/"><i class="fas fa-tag"></i> {{.}} </a>
|
||||
</span>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
</section>
|
||||
<section>
|
||||
<span><a href="javascript:window.history.back();">{{ T "back" }}</a></span> | <span><a href="{{ .Site.BaseURL }}">{{ T "home" }}</a></span>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<div class="post-nav">
|
||||
{{ if .PrevInSection }}
|
||||
<a href="{{.PrevInSection.Permalink}}" class="prev" rel="prev" title="{{ .PrevInSection.Title}}"><i class="fas fa-angle-left"></i> {{ .PrevInSection.Title}}</a>
|
||||
{{ end }}
|
||||
{{ if .NextInSection }}
|
||||
<a href="{{.NextInSection.Permalink}}" class="next" rel="next" title="{{.NextInSection.Title}}">{{.NextInSection.Title}} <i class="fas fa-angle-right"></i></a>
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1,62 +1,52 @@
|
|||
{{ if or .Params.socialShare (and .Site.Params.socialShare (ne .Params.socialShare false)) }}
|
||||
|
||||
{{ if or (eq .Params.share.enable false) (eq .Site.Params.share.enable false) | not }}
|
||||
{{ if or .Params.Share.Twitter (and .Site.Params.Share.Twitter (ne .Params.Share.Twitter false)) }}
|
||||
<a href="//twitter.com/share?url={{ .Permalink }}&text={{ .Title }}&via={{ .Site.Params.Social.Twitter }}" target="_blank" title="Share on Twitter">
|
||||
<i class="fab fa-twitter"></i>
|
||||
</a>
|
||||
{{ end }}
|
||||
|
||||
{{ if or .Params.Share.Facebook (and .Site.Params.Share.Facebook (ne .Params.Share.Facebook false)) }}
|
||||
<a href="//www.facebook.com/sharer/sharer.php?u={{ .Permalink }}" target="_blank" title="Share on Facebook">
|
||||
<i class="fab fa-facebook-square"></i>
|
||||
</a>
|
||||
{{ end }}
|
||||
|
||||
{{ if or .Params.Share.Reddit (and .Site.Params.Share.Reddit (ne .Params.Share.Reddit false)) }}
|
||||
<a href="//reddit.com/submit?url={{ .Permalink }}&title={{ .Title }}" target="_blank" title="Share on Reddit">
|
||||
<i class="fab fa-reddit"></i>
|
||||
</a>
|
||||
{{ end }}
|
||||
|
||||
{{ if or .Params.Share.Linkedin (and .Site.Params.Share.Linkedin (ne .Params.Share.Linkedin false)) }}
|
||||
<a href="//www.linkedin.com/shareArticle?url={{ .Permalink }}&title={{ .Title }}" target="_blank" title="Share on LinkedIn">
|
||||
<i class="fab fa-linkedin"></i>
|
||||
</a>
|
||||
{{ end }}
|
||||
|
||||
{{ if or .Params.Share.Pinterest (and .Site.Params.Share.Pinterest (ne .Params.Share.Pinterest false)) }}
|
||||
<a href="//www.pinterest.com/pin/create/button/?url={{ .Permalink }}&description={{ .Title }}" target="_blank" title="Share on Pinterest">
|
||||
<i class="fab fa-pinterest"></i>
|
||||
</a>
|
||||
{{ end }}
|
||||
|
||||
{{ if or .Params.Share.YCombinator (and .Site.Params.Share.YCombinator (ne .Params.Share.YCombinator false)) }}
|
||||
<a href="//news.ycombinator.com/submitlink?u={{ .Permalink }}&description={{ .Title }}" target="_blank" title="Share on Hacker News">
|
||||
<i class="fab fa-y-combinator"></i>
|
||||
</a>
|
||||
{{ end }}
|
||||
|
||||
{{ if or .Params.Share.Mix (and .Site.Params.Share.Mix (ne .Params.Share.Mix false)) }}
|
||||
<a href="//mix.com/add?url={{ .Permalink }}&description={{ .Title }}" target="_blank" title="Share on Mix">
|
||||
<i class="fab fa-mix"></i>
|
||||
</a>
|
||||
{{ end }}
|
||||
|
||||
{{ if or .Params.Share.Tumblr (and .Site.Params.Share.Tumblr (ne .Params.Share.Tumblr false)) }}
|
||||
<a href="//www.tumblr.com/widgets/share/tool?canonicalUrl={{ .Permalink }}&title={{ .Title }}" target="_blank" title="Share on Tumblr">
|
||||
<i class="fab fa-tumblr"></i>
|
||||
</a>
|
||||
{{ end }}
|
||||
|
||||
{{ if or .Params.Share.VK (and .Site.Params.Share.VK (ne .Params.Share.VK false)) }}
|
||||
<a href="//vk.com/share.php?url={{ .Permalink }}&title={{ .Title }}" target="_blank" title="Share on VKontakte ">
|
||||
<i class="fab fa-vk"></i>
|
||||
</a>
|
||||
{{ end }}
|
||||
|
||||
{{ if or .Params.Share.Weibo (and .Site.Params.Share.Weibo (ne .Params.Share.Weibo false)) }}
|
||||
<a href="//service.weibo.com/share/share.php?url={{ .Permalink }}&appkey=&title={{ .Title }}" target="_blank" title="Share on Weibo">
|
||||
<i class="fab fa-weibo"></i>
|
||||
</a>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
|
|
@ -1,6 +1,3 @@
|
|||
{{ $scripts := resources.Get "/js/main.js" | slice }}
|
||||
{{ $dynamicToTop := resources.Get "/js/dynamicToTop.js" }}
|
||||
|
||||
<!-- jQuery https://github.com/jquery/jquery -->
|
||||
{{ $jquery := `
|
||||
<script src="https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
|
||||
|
|
@ -41,10 +38,9 @@
|
|||
` }}
|
||||
|
||||
{{ $jquery | safeHTML }}
|
||||
{{ $lazysizes | safeHTML }}
|
||||
|
||||
{{ if .IsPage }}
|
||||
{{ $lazysizes | safeHTML }}
|
||||
|
||||
{{ if .Scratch.Get "diagram" }}
|
||||
{{ $diagram | safeHTML }}
|
||||
{{ end }}
|
||||
|
|
@ -71,11 +67,6 @@
|
|||
{{ $countdown | safeHTML }}
|
||||
<script>var countdownMap = {{ . | jsonify | safeJS }};</script>
|
||||
{{ end }}
|
||||
|
||||
{{ $scripts = $scripts | append $dynamicToTop }}
|
||||
{{ $scripts = $scripts | resources.Concat "/js/vendor_post.js" | resources.Minify }}
|
||||
{{ else }}
|
||||
{{ $scripts = $scripts | resources.Concat "/js/vendor_main.js" | resources.Minify}}
|
||||
{{ end }}
|
||||
|
||||
{{ $typeitMap := .Scratch.Get "typeitMap" }}
|
||||
|
|
@ -88,6 +79,7 @@
|
|||
<script>var typeitArr = {{ $typeitArr | jsonify | safeJS }};</script>
|
||||
{{ end }}
|
||||
|
||||
{{ $scripts := slice (resources.Get "/js/main.js") (resources.Get "/js/dynamicToTop.js") | resources.Concat "/js/vendor.js" | resources.Minify }}
|
||||
<script src="{{ $scripts.RelPermalink }}" async=""></script>
|
||||
|
||||
{{ template "_internal/google_analytics_async.html" . }}
|
||||
{{ template "_internal/google_analytics_async.html" . }}
|
||||
|
|
@ -2,7 +2,6 @@
|
|||
|
||||
{{ define "content" }}
|
||||
{{ $publish_date := .PublishDate.Format (.Site.Params.dateFormatToUse | default "2006-01-02") }}
|
||||
{{ $modify_date := .Lastmod.Format (.Site.Params.dateFormatToUse | default "2006-01-02") }}
|
||||
{{ $author := .Site.Author.name }}
|
||||
{{ if isset .Params "author" }}
|
||||
{{ $author = .Site.Author.name }}
|
||||
|
|
@ -15,20 +14,19 @@
|
|||
|
||||
<div class="post-meta">
|
||||
<div class="post-meta-main">
|
||||
<a href="{{.Site.BaseURL }}" rel="author">{{ $author }}</a>
|
||||
{{ T "included" }}
|
||||
<a class="author" href="{{.Site.BaseURL }}" rel="author"><i class="fas fa-user-circle"></i> {{ $author }} </a>
|
||||
{{ with .Params.categories -}}
|
||||
<span class="post-category">
|
||||
{{ T "included" }}
|
||||
{{ range . }}
|
||||
{{- $name := . -}}
|
||||
{{- with $.Site.GetPage "taxonomy" (printf "categories/%s" $name) | default ($.Site.GetPage "taxonomy" (printf "categories/%s" ($name | urlize))) -}}
|
||||
<i class="far fa-folder"></i> <a href="{{ .Permalink }}">{{ $name }}</a>
|
||||
<i class="far fa-folder"></i> <a href="{{ .Permalink }}">{{ $name }}</a>
|
||||
{{ end -}}
|
||||
{{ end }}
|
||||
</span>
|
||||
{{- end }}
|
||||
</div>
|
||||
|
||||
<div class="post-meta-other">
|
||||
<span class="post-time"><i class="far fa-calendar-alt"></i> <time datetime={{ $publish_date }}>{{ $publish_date }}</time> </span>
|
||||
<i class="fas fa-pencil-alt"></i> {{ T "wordCount" .WordCount }}
|
||||
|
|
@ -45,66 +43,36 @@
|
|||
<div class="post-toc" id="post-toc">
|
||||
<h2 class="post-toc-title">{{ T "toc" }}</h2>
|
||||
{{- $globalAutoCollapseToc := .Site.Params.autoCollapseToc | default true }}
|
||||
<div class="post-toc-content{{ if not (or .Params.autoCollapseToc (and $globalAutoCollapseToc (ne .Params.autoCollapseToc false))) }} always-active{{ end }}">
|
||||
{{.TableOfContents}}
|
||||
<div class="post-toc-content{{ if not (and $globalAutoCollapseToc (ne .Params.autoCollapseToc false)) }} always-active{{ end }}">
|
||||
{{ .TableOfContents }}
|
||||
</div>
|
||||
</div>
|
||||
{{- end }}
|
||||
|
||||
{{ with .Params.featured_image }}
|
||||
<img src=/images/loading.svg data-sizes=auto data-src={{ . }} alt="featured image" class="featured_image lazyload">
|
||||
{{ end }}
|
||||
|
||||
<div class="post-content">
|
||||
<!--featured_image-->
|
||||
{{ with .Params.featured_image }}
|
||||
<img src=/images/loading.svg data-sizes=auto data-src={{ . }} alt="featured image" class="featured_image lazyload">
|
||||
{{ end }}
|
||||
<!-- end featured_image-->
|
||||
|
||||
{{ $reAltIn := `<img src="([^"]+)" alt="([^"]+)?" />` }}
|
||||
{{ $reAltOut := "<figure><img src=/images/loading.svg data-sizes=auto data-src=$1 alt=$2 class=lazyload><figcaption class=image-caption>$2</figcaption></figure>" }}
|
||||
{{ $altContent := .Content | replaceRE $reAltIn $reAltOut | safeHTML }}
|
||||
{{ $reAltTitleIn := `<img src="([^"]+)" alt="([^"]+)?" title="([^"]+)?" />` }}
|
||||
{{ $reAltTitleOut := "<figure><img src=/images/loading.svg data-src=$1 data-sizes=auto alt=$2 title=$3 class=lazyload><figcaption class=image-caption>$2</figcaption></figure>" }}
|
||||
{{ $finalContent := $altContent | replaceRE $reAltTitleIn $reAltTitleOut | safeHTML }}
|
||||
{{ $finalContent }}
|
||||
{{ $content := .Content }}
|
||||
{{ $REin := `<img src="([^"]+)" alt="([^"]+)?" />` }}
|
||||
{{ $REout := "<figure><img src=/images/loading.svg data-sizes=auto data-src=$1 alt=$2 class=lazyload><figcaption class=image-caption>$2</figcaption></figure>" }}
|
||||
{{ $content = replaceRE $REin $REout $content }}
|
||||
{{ $REin = `<img src="([^"]+)" alt="([^"]+)?" title="([^"]+)?" />` }}
|
||||
{{ $REout = "<figure><img src=/images/loading.svg data-src=$1 data-sizes=auto alt=$2 title=$3 class=lazyload><figcaption class=image-caption>$2</figcaption></figure>" }}
|
||||
{{ $content = replaceRE $REin $REout $content }}
|
||||
{{ $REin = `:\(([\w- ]+?)\):` }}
|
||||
{{ $REout = `<i class="inline-icon $1"></i>` }}
|
||||
{{ $content = replaceRE $REin $REout $content }}
|
||||
{{ $content | safeHTML }}
|
||||
</div>
|
||||
<div class="post-footer">
|
||||
<div class="post-info">
|
||||
<div class="post-info-mod"><span>{{ printf (T "lastMod") $modify_date }}</span></div>
|
||||
<div class="post-info-share">
|
||||
{{ if and ( $.Param "socialShare" ) (gt (len ($.Param "share")) 0) }}
|
||||
<span>{{ partial "post/share-links.html" . }}</span>
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="post-tags">
|
||||
<section>
|
||||
{{ with .Params.tags }}
|
||||
{{ range . }}
|
||||
<span class="tag">
|
||||
<i class="fas fa-tag"></i><a href="{{ "tags/" | absURL }}{{ . | urlize }}/"> {{.}} </a>
|
||||
</span>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
</section>
|
||||
<section>
|
||||
<span><a href="javascript:window.history.back();">{{ T "back" }}</a></span> | <span><a href="{{ .Site.BaseURL }}">{{ T "home" }}</a></span>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<div class="post-nav">
|
||||
{{ if .PrevInSection }}
|
||||
<a href="{{.PrevInSection.Permalink}}" class="prev" rel="prev" title="{{ .PrevInSection.Title}}"><i class="fas fa-angle-left"></i> {{ .PrevInSection.Title}}</a>
|
||||
{{ end }}
|
||||
{{ if .NextInSection }}
|
||||
<a href="{{.NextInSection.Permalink}}" class="next" rel="next" title="{{.NextInSection.Title}}">{{.NextInSection.Title}} <i class="fas fa-angle-right"></i></a>
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
{{ partial "post/footer.html" . }}
|
||||
|
||||
<div class="post-comment">
|
||||
{{ if ( .Params.showComments | default true ) }}
|
||||
{{ if ( .Params.comment | default true ) }}
|
||||
{{ partial "comments.html" . }}
|
||||
{{ end }}
|
||||
</div>
|
||||
</article>
|
||||
{{- end }}
|
||||
{{- end }}
|
||||
|
|
@ -1,46 +0,0 @@
|
|||
<article class="post" itemscope itemtype="http://schema.org/Article">
|
||||
<header class="post-header">
|
||||
<h1 class="post-title" itemprop="name headline">
|
||||
<a href="{{ .Permalink }}">{{ .Title }}</a>
|
||||
</h1>
|
||||
</header>
|
||||
<div class="post-content">
|
||||
<!--featured_image-->
|
||||
{{ with .Params.featured_image }}
|
||||
<p><img itemprop="image" src={{ . }} class="featured_image"></p>
|
||||
{{ end }}
|
||||
<!-- end featured_image-->
|
||||
{{ .Summary }}
|
||||
</div>
|
||||
<div class="post-footer">
|
||||
<div class="post-meta">
|
||||
<span class="post-time">
|
||||
<time datetime={{.Date.Format (.Site.Params.dateFormatToUse | default "2006-01-02") }} itemprop="datePublished">
|
||||
{{ .Date.Format (.Site.Params.dateFormatToUse | default "2 January 2006") }}
|
||||
</time>
|
||||
</span>
|
||||
in
|
||||
{{ with .Params.categories }}
|
||||
<i class="far fa-folder"></i>
|
||||
<span class="post-category">
|
||||
{{ range . }}
|
||||
{{ $name := . }}
|
||||
{{ with $.Site.GetPage "taxonomy" (printf "categories/%s" $name) | default ($.Site.GetPage "taxonomy" (printf "categories/%s" ($name | urlize))) }}
|
||||
<a href="{{ .Permalink }}">{{ $name }}</a>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
</span>
|
||||
{{ end }}
|
||||
</div>
|
||||
|
||||
{{ with .Params.tags }}
|
||||
<div class="post-tags">
|
||||
{{ range . }}
|
||||
<span class="tag">
|
||||
<a href="{{ "tags/" | absURL }}{{ . | urlize }}/">#{{ . }}</a>
|
||||
</span>
|
||||
{{ end }}
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
</article>
|
||||
|
|
@ -1,17 +1,16 @@
|
|||
{{ if .Get "id" }}
|
||||
{{ $id := .Get "id" }}
|
||||
{{ with .Get "class" }}
|
||||
<div id={{ $id }} class="{{ . }}"></div>
|
||||
{{ else }}
|
||||
<div id={{ $id }}></div>
|
||||
{{ end }}
|
||||
{{ $id = printf "#%s" $id }}
|
||||
{{ with .Get "date" }}
|
||||
{{ $date := . }}
|
||||
{{ with $.Page.Scratch.Get "countdownMap" }}
|
||||
{{ $.Page.Scratch.Set "countdownMap" (dict $id $date | merge .) }}
|
||||
{{ else }}
|
||||
{{ $.Page.Scratch.Set "countdownMap" (dict $id $date) }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
{{ if .Get "id" -}}
|
||||
{{ $id := .Get "id" -}}
|
||||
{{ if .Get "date" -}}
|
||||
{{ $date := .Get "date" -}}
|
||||
{{ with .Page.Scratch.Get "countdownMap" -}}
|
||||
{{ .Page.Scratch.Set "countdownMap" (dict $id $date | merge .) -}}
|
||||
{{ else -}}
|
||||
{{ .Page.Scratch.Set "countdownMap" (dict $id $date) -}}
|
||||
{{ end -}}
|
||||
{{ with .Get "class" -}}
|
||||
<div id={{ $id }} class="{{ . }}"></div>
|
||||
{{- else -}}
|
||||
<div id={{ $id }}></div>
|
||||
{{- end -}}
|
||||
{{ end -}}
|
||||
{{ end }}
|
||||
|
|
@ -9,7 +9,7 @@
|
|||
{{ $taxonomyName = (T "category") }}
|
||||
{{ end }}
|
||||
<div class="post-warp archive">
|
||||
<h2 class="post-title" style="text-align:right;padding-bottom:2em">
|
||||
<h2 class="post-title">
|
||||
{{- printf "%s - %s" $taxonomyName .Title -}}
|
||||
</h2>
|
||||
{{ range (.Paginate (.Pages.GroupByDate "2006")).PageGroups }}
|
||||
|
|
|
|||
|
|
@ -13,8 +13,8 @@
|
|||
{{ $length := len $terms }}
|
||||
{{ $type := .Type }}
|
||||
|
||||
<div class="post-warp {{.Data.Plural}}">
|
||||
<h2 class="post-title" style="text-align:right;padding-bottom:2em">
|
||||
<div class="post-warp archive">
|
||||
<h2 class="post-title">
|
||||
{{- printf "- %s -" $taxonomysName -}}
|
||||
</h2>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue