Feat: 增加目录显示

resolved #9

Author: Lruihao

README.md

@@ -117,6 +117,16 @@ Use the `gh-repo-card-container` and `gh-repo-card` shortcodes in any page to di
 {{< /gh-repo-card-container >}}
 ```
 
+### Custom Blocks
+
+You can implement these blocks through `define`.
+
+| Block Name        | Description                                       |
+| :---------------- | :------------------------------------------------ |
+| `projects-aside`  | Displayed in the aside of the projects page       |
+| `projects-meta`   | Displayed in the post meta of the projects page   |
+| `projects-footer` | Displayed in the post footer of the projects page |
+
 ## Scheduled tasks
 
 Since it uses server-side rendering, all data is fetched at build time and not requested from the GitHub API on each visit. Therefore, we can use scheduled tasks to update the data to keep it up to date.

README.zh-cn.md

@@ -117,6 +117,16 @@ Some text to display at the start of the page.
 {{< /gh-repo-card-container >}}
 ```
 
+### 自定义块
+
+你可以通过 `define` 来实现这些块。
+
+| 块名称            | 描述                     |
+| :---------------- | :----------------------- |
+| `projects-aside`  | 显示在项目页面的侧边栏中 |
+| `projects-meta`   | 显示在项目页面的开始处   |
+| `projects-footer` | 显示在项目页面的底部处   |
+
 ## 定时任务
 
 由于采用服务端渲染，所有数据是在构建时获取的，而不会在每次访问时都请求 GitHub API。因此，我们可以使用定时任务来更新数据，从而保持其最新状态。

assets/css/component-projects/index.scss

@@ -33,6 +33,12 @@
     }
   }
 
+  .component-projects-powered {
+    text-align: right;
+    font-size: 80%;
+    color: var(--color-muted);
+  }
+
   #comments {
     padding: 2rem 0;
     margin-top: 2rem;

i18n/en.toml

@@ -4,6 +4,7 @@
 [projects]
 relatedArticles = "Related Articles"
 errorGetGhRepo = "failed to fetch repo info from GitHub API, Please check the network!"
+poweredBy = "This page is powered by <a href=\"https://github.com/hugo-fixit/component-projects\">Component Projects</a>."
 
 [projects.totalStarCount]
 one = "Total one star"

i18n/zh-CN.toml

@@ -5,6 +5,7 @@
 [projects]
 relatedArticles = "相关文章"
 errorGetGhRepo = "从 GitHub API 获取仓库信息失败，请检查网络！"
+poweredBy = "本页面由 <a href=\"https://github.com/hugo-fixit/component-projects\">Component Projects</a> 强力驱动。"
 
 [projects.totalStarCount]
 other = "累计 {{ .Count }} stars"

layouts/section/projects.html

@@ -6,13 +6,22 @@
 {{- define "content" -}}
   {{- $params := partial "function/params.html" -}}
   {{- $fingerprint := .Scratch.Get "fingerprint" -}}
+  {{- $data := index .Site.Data (printf "projects.%v" .Language) | default .Site.Data.projects -}}
+  {{- $toc := .Scratch.Get "toc" -}}
+  {{- $hasToc := (gt (len .Fragments.Headings) 0) | or (gt (len $data) 0) | or (gt .Pages.Len 0) -}}
+  {{- $showToc := $toc.enable | and $hasToc -}}
 
   {{- /* component-projects.min.css */ -}}
   {{- $options := dict "Source" "css/component-projects/index.scss" "Fingerprint" $fingerprint -}}
   {{- $toCSS := dict "targetPath" "css/component-projects.min.css" "enableSourceMap" true -}}
   {{- $options = dict "Context" . "ToCSS" $toCSS | merge $options -}}
   {{- partial "plugin/style.html" $options -}}
 
+  <aside class="animate__animated animate__fadeIn animate__faster">
+    {{- /* Projects Aside */ -}}
+    {{- block "projects-aside" . }}{{ end -}}
+  </aside>
+
   <div class="page archive projects single">
     <div class="header">
       {{- /* Title */ -}}
@@ -25,11 +34,55 @@ <h1 class="single-title animate__animated animate__pulse animate__faster">
       {{- /* Subtitle */ -}}
       {{- with $params.subtitle -}}<p class="single-subtitle animate__animated animate__fadeIn">{{ . | $.RenderString }}</p>{{- end -}}
     </div>
-    
+
+    {{- /* Meta */ -}}
+    <div class="post-meta">
+      {{- /* Projects Meta */ -}}
+      {{- block "projects-meta" . }}{{ end -}}
+    </div>
+
+    {{- /* Featured image */ -}}
+    {{- $image := $params.featuredimage -}}
+    {{- with .Resources.GetMatch "featured-image" -}}
+      {{- $image = .RelPermalink -}}
+    {{- end -}}
+    {{- with $image -}}
+      <div class="featured-image">
+        {{- dict "Src" . "Title" $.Description | partial "plugin/image.html" -}}
+      </div>
+    {{- end -}}
+
+    {{- /* Static TOC */ -}}
+    {{- if $showToc -}}
+      {{- $tableOfContents := .Fragments.ToHTML ($toc.startLevel | int) ($toc.endLevel | int) false -}}
+      {{- $tocFromData := "" -}}
+      {{- range $group := $data -}}
+        {{- if $group.title -}}
+          {{- $tocFromData = add $tocFromData (printf "<li><a href=\"#%v\">%v</a></li>" ($group.title | anchorize) $group.title) -}}
+        {{- end -}}
+      {{- end -}}
+      {{- $tocFromData = add $tocFromData (printf "<li><a href=\"#related-articles\">%v</a></li>" (T "projects.relatedArticles")) -}}
+      {{- with $tocFromData -}}
+        {{- if gt (len $.Fragments.Headings) 0 -}}
+          {{- $tableOfContents = replaceRE "</ul>" (printf "%v</ul>" .) $tableOfContents -}}
+        {{- else -}}
+          {{- $tableOfContents = replaceRE "</nav>" (printf "<ul>%v</ul></nav>" .) $tableOfContents -}}
+        {{- end -}}
+      {{- end -}}
+      <div class="details toc{{ with $params.password }} encrypted-hidden{{ end }}" id="toc-static" data-kept="{{ if $toc.keepStatic }}true{{ else }}false{{ end }}">
+        <div class="details-summary toc-title">
+          <span>{{ T "single.contents" }}</span>
+          <span>{{ dict "Class" "details-icon fa-solid fa-angle-right" | partial "plugin/icon.html" }}</span>
+        </div>
+        <div class="details-content toc-content" id="toc-content-static">
+          {{- dict "Content" $tableOfContents "Ruby" $params.ruby "Fraction" $params.fraction "Fontawesome" $params.fontawesome | partial "function/content.html" | safeHTML -}}
+        </div>
+      </div>
+    {{- end -}}
+
     {{- /* Content */ -}}
     <div class="content" id="content">
       {{- dict "Content" .Content "Ruby" $params.ruby "Fraction" $params.fraction "Fontawesome" $params.fontawesome | partial "function/content.html" | safeHTML -}}
-      {{- $data := index .Site.Data (printf "projects.%v" .Language) | default .Site.Data.projects -}}
       {{- $headers := dict "headers" (.Scratch.Get "githubTokenHeader") -}}
       {{- $githubLangColors := partial "function/get-remote-json" (dict "URL" "https://raw.githubusercontent.com/ozh/github-colors/master/colors.json" "OPTIONS" $headers ) -}}
       {{- range $group := $data -}}
@@ -113,7 +166,24 @@ <h3 class="group-title">
       {{- partial "paginator.html" . -}}
     {{- end -}}
 
+    {{- /* Footer */ -}}
+    <div class="post-footer" id="post-footer">
+      {{- /* Projects Footer */ -}}
+      {{- block "projects-footer" . }}<div class="component-projects-powered">{{ (T "projects.poweredBy") | safeHTML }}</div>{{ end -}}
+    </div>
+
     {{- /* Comment */ -}}
     {{- partial "single/comment.html" . -}}
   </div>
+
+  <aside class="toc" id="toc-auto" aria-label="{{ T "single.contents" }}">
+    {{- /* Auto TOC */ -}}
+    {{- if $showToc -}}
+      <h2 class="toc-title{{ with $params.password }} encrypted-hidden{{ end }}">
+        {{- T "single.contents" -}}&nbsp;
+        {{- dict "Class" "toc-icon fa-solid fa-angle-down fa-fw" | partial "plugin/icon.html" -}}
+      </h2>
+      <div class="toc-content{{ if eq $toc.auto false }} always-active{{ end }}{{ with $params.password }} encrypted-hidden{{ end }}" id="toc-content-auto"></div>
+    {{- end -}}
+  </aside>
 {{- end -}}