blogs/FixIt
1
0
Fork 0
mirror of https://github.com/hugo-fixit/FixIt.git synced 2026-08-24 15:28:57 +00:00
Code Issues Packages Projects Releases Wiki Activity

✨ Feat: add collection list at the sidebar

Browse Source
This commit is contained in:
Cell
2023-12-08 19:48:58 +08:00
parent 94a1796e63
commit 307851fc25
8 changed files with 249 additions and 90 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/css/_page/_single.scss
+1 -1
View File
@@ -1,5 +1,6 @@
@import '../_partials/_single/toc';
@import '../_partials/_single/fixit-decryptor';
@import '../_partials/_single/collections';
.single {
.single-title {
@@ -441,7 +442,6 @@
}
@import '../_partials/_single/reward';
@import '../_partials/_single/collection-card';
@import '../_partials/_single/footer';
@import '../_partials/_single/comment';
}
assets/css/_partials/_single/_collection-card.scss
-87
View File
@@ -1,87 +0,0 @@
.collection-card {
font-size: 0.875rem;
background-color: darken($global-background-color, 3%);
margin-top: 0.5rem;
padding: 1rem 1.25rem;
position: relative;
@include border-radius($global-border-radius * 1.5);
@include user-select(none);
[data-theme='dark'] & {
background-color: lighten($global-background-color-dark, 3%);
}
&:has(.collection-nav-item:nth-child(2))::before {
content: '';
position: absolute;
left: 50%;
bottom: 0.75rem;
width: 1px;
height: 2rem;
background: linear-gradient(
to bottom,
rgba(0, 0, 0, 0.03),
rgba(0, 0, 0, 0.05) 50%,
rgba(0, 0, 0, 0.03) 100%
);
[data-theme='dark'] & {
background: linear-gradient(
to bottom,
rgba(255, 255, 255, 0.03),
rgba(255, 255, 255, 0.05) 50%,
rgba(255, 255, 255, 0.03) 100%
);
}
}
.collection-title {
@include link(false, false);
}
.collection-nav {
display: flex;
justify-content: space-between;
gap: 1rem;
&:not(:empty) {
margin-top: 0.5rem;
}
.collection-nav-item {
flex-grow: 1;
max-width: 50%;
font-weight: 500;
display: flex;
align-items: center;
@include transition(all 0.3s ease-out);
&:only-child {
max-width: 100%;
}
i {
flex-shrink: 0;
}
span {
flex-grow: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
&[rel='next'] {
text-align: right;
}
&[rel='prev']:hover {
@include transform(translateX(-4px));
}
&[rel='next']:hover {
@include transform(translateX(4px));
}
}
}
}
assets/css/_partials/_single/_collections.scss
+185
View File
@@ -0,0 +1,185 @@
// Collection Navigation
.collection-card {
font-size: 0.875rem;
background-color: darken($global-background-color, 3%);
margin-top: 0.5rem;
padding: 1rem 1.25rem;
position: relative;
@include border-radius($global-border-radius * 1.5);
@include user-select(none);
[data-theme='dark'] & {
background-color: lighten($global-background-color-dark, 3%);
}
&:has(.collection-nav-item:nth-child(2))::before {
content: '';
position: absolute;
left: 50%;
bottom: 0.75rem;
width: 1px;
height: 2rem;
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.03), rgba(0, 0, 0, 0.05) 50%, rgba(0, 0, 0, 0.03) 100%);
[data-theme='dark'] & {
background: linear-gradient(
to bottom,
rgba(255, 255, 255, 0.03),
rgba(255, 255, 255, 0.05) 50%,
rgba(255, 255, 255, 0.03) 100%
);
}
}
.collection-title {
@include link(false, false);
}
.collection-nav {
display: flex;
justify-content: space-between;
gap: 1rem;
&:not(:empty) {
margin-top: 0.5rem;
}
.collection-nav-item {
flex-grow: 1;
max-width: 50%;
font-weight: 500;
display: flex;
align-items: center;
@include transition(all 0.3s ease-out);
&:only-child {
max-width: 100%;
}
i {
flex-shrink: 0;
}
span {
flex-grow: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
&[rel='next'] {
text-align: right;
}
&[rel='prev']:hover {
@include transform(translateX(-4px));
}
&[rel='next']:hover {
@include transform(translateX(4px));
}
}
}
}
// Collection List
.collection-details {
&:not(:last-of-type) {
margin-bottom: 0.5rem;
}
&.open {
.collection-summary {
background-color: darken($global-background-color, 4%);
[data-theme='dark'] & {
background-color: lighten($global-background-color-dark, 4%);
}
}
}
.collection-summary {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.2rem 0.5rem;
background-color: darken($global-background-color, 3%);
[data-theme='dark'] & {
background-color: lighten($global-background-color-dark, 3%);
}
.details-icon {
flex-shrink: 0;
}
.collection-name {
font-weight: bold;
}
@include user-select(none);
}
.collection-content {
font-size: $toc-content-font-size;
background-color: darken($global-background-color, 2%);
[data-theme='dark'] & {
background-color: lighten($global-background-color-dark, 2%);
}
.collection-list {
margin: 0;
padding-inline: 1.6rem 0.8rem;
padding-block: 0.4rem;
text-indent: -0.8rem;
list-style: none;
overflow-y: scroll;
max-height: 60vh;
&::-webkit-scrollbar {
width: 0;
}
.collection-item > a::before,
.collection-item > span::before {
content: '|';
font-weight: 600;
margin-right: 0.5rem;
position: relative;
bottom: 2px;
color: $single-link-color;
[data-theme='dark'] & {
color: $single-link-color-dark;
}
}
.active {
font-weight: bold;
color: $single-link-color;
[data-theme='dark'] & {
color: $single-link-color-dark;
}
}
}
.collection-nav-simple {
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
background-color: darken($global-background-color, 3%);
[data-theme='dark'] & {
background-color: lighten($global-background-color-dark, 3%);
}
> i.collection-nav-item {
cursor: not-allowed;
}
}
}
}
assets/css/_partials/_single/_toc.scss
+4
View File
@@ -17,6 +17,8 @@
content: '|';
font-weight: bolder;
margin-right: 0.5rem;
position: relative;
bottom: 2px;
color: $single-link-color;
[data-theme='dark'] & {
@@ -71,6 +73,8 @@
content: '|';
font-weight: bolder;
margin-right: 0.5rem;
position: relative;
bottom: 2px;
color: $global-border-color;
[data-theme='dark'] & {
assets/js/theme.js
+1 -1
View File
@@ -482,7 +482,7 @@ class FixIt {
$tocCore.parentElement.replaceChild($newTocCore, $tocCore);
$tocCore = $newTocCore;
}
if (document.getElementById('toc-static').dataset.kept === true || this.util.isTocStatic()) {
if (document.getElementById('toc-static').dataset.kept === 'true' || this.util.isTocStatic()) {
const $tocContentStatic = document.getElementById('toc-content-static');
if ($tocCore.parentElement !== $tocContentStatic) {
$tocCore.parentElement.removeChild($tocCore);
hugo.toml
+4
View File
@@ -428,6 +428,10 @@ enableEmoji = true
endFlag = ""
# FixIt 0.2.18 | NEW whether to enable instant.page
instantPage = false
# FixIt 0.3.0 | NEW whether to enable collection list at the sidebar
collectionList = false
# FixIt 0.3.0 | NEW whether to enable collection navigation at the end of the post
collectionNavigation = false
# FixIt 0.2.15 | NEW Repost config
[params.page.repost]
layouts/partials/single/collection-list.html
+53
View File
@@ -0,0 +1,53 @@
{{- /* Collection List */ -}}
{{- $params := .Scratch.Get "params" -}}
{{- if .Params.collections | and $params.collectionList -}}
{{- range .Params.collections -}}
{{- $term := $.Site.GetPage "/collections" . -}}
{{- $pages := $term.Pages.ByDate -}}
{{- $open := eq (index $.Params.collections 0) . -}}
{{- $currentKey := 0 -}}
<div class="details collection-details{{ if $open }} open{{ end }}">
<div class="details-summary collection-summary">
<span class="collection-title">
{{ dict "Class" "fa-solid fa-layer-group fa-fw" | partial "plugin/icon.html" }}
<span class="collection-name">{{ T "collections" }}・{{ $term.LinkTitle }}</span>
<span class="text-secondary">{{ $pages.Len }}</span>
</span>
{{- dict "Class" "details-icon fa-solid fa-angle-right fa-fw" | partial "plugin/icon.html" -}}
</div>
<div class="details-content collection-content">
<nav>
<ul class="collection-list">
{{- range $key, $value := $pages -}}
{{- if $value.LinkTitle | eq $.LinkTitle -}}
{{- $currentKey = $key | add 1 -}}
<li class="collection-item"><span class="active" title="{{ $value.LinkTitle }}">{{ $value.LinkTitle }}</span></li>
{{- else }}
<li class="collection-item"><a href="{{ $value.RelPermalink }}" title="{{ $value.LinkTitle }}">{{ $value.LinkTitle }}</a></li>
{{- end }}
{{- end -}}
</ul>
<div class="collection-nav-simple">
{{- with $pages.Next $ -}}
<a href="{{ .RelPermalink }}" class="collection-nav-item" rel="prev" title="{{ .LinkTitle }}">
{{- dict "Class" "fa-solid fa-angle-left fa-fw" | partial "plugin/icon.html" -}}
</a>
{{- else -}}
{{- dict "Class" "fa-solid fa-angle-left fa-fw collection-nav-item text-secondary" | partial "plugin/icon.html" -}}
{{- end -}}
<span class="text-secondary">{{ $currentKey }}/{{ $pages.Len }}</span>
{{- with $pages.Prev $ -}}
<a href="{{ .RelPermalink }}" class="collection-nav-item" rel="next" title="{{ .LinkTitle }}">
{{- dict "Class" "fa-solid fa-angle-right fa-fw" | partial "plugin/icon.html" -}}
</a>
{{- else -}}
{{- dict "Class" "fa-solid fa-angle-right fa-fw collection-nav-item text-secondary" | partial "plugin/icon.html" -}}
{{- end -}}
</div>
</nav>
</div>
</div>
{{- end -}}
{{- end -}}
layouts/posts/single.html
+1 -1
View File
@@ -7,7 +7,7 @@
<aside class="aside-collection" aria-label="{{ T "collections" }}">
{{- /* Collection List */ -}}
{{/* {{- partial "single/collection-list.html" . -}} */}}
{{- partial "single/collection-list.html" . -}}
{{- /* Custom part for aside */ -}}
{{- partial (.Scratch.Get "customFilePath").aside . -}}
</aside>