Feat: 改用 FixIt 主题推荐的样式注入方式

README.md

@@ -13,7 +13,7 @@ A Hugo theme component with layout `projects` and shortcodes to display GitHub p
 
 ## Requirements
 
-- [FixIt](https://github.com/hugo-fixit) v0.3.5 or higher
+- [FixIt](https://github.com/hugo-fixit) v0.3.7 or higher
 
 ## Installation
 
@@ -30,6 +30,14 @@ Next edit `hugo.toml` of your project and add this theme component to your theme
 theme = ["FixIt", "component-projects"]
 ```
 
+Finally, inject the theme component's assets in `layouts/partials/custom.html` within the `custom-head` or `custom-assets` block:
+
+```go-html-template
+{{- define "custom-assets" -}}
+  {{- partial "inject/component-projects.html" . -}}
+{{- end -}}
+```
+
 To learn about theme components of hugo and how to use them, check out <https://gohugo.io/hugo-modules/theme-components/>.
 
 ## Configuration

README.zh-cn.md

@@ -13,7 +13,7 @@
 
 ## 要求
 
-- [FixIt](https://github.com/hugo-fixit) v0.3.5 或更高版本
+- [FixIt](https://github.com/hugo-fixit) v0.3.7 或更高版本
 
 ## 安装
 
@@ -30,6 +30,14 @@ git submodule add https://github.com/hugo-fixit/component-projects.git themes/co
 theme = ["FixIt", "component-projects"]
 ```
 
+最后，在 `layouts/partials/custom.html` 中的 `custom-head` 或 `custom-assets` 块内注入主题组件的样式：
+
+```go-html-template
+{{- define "custom-assets" -}}
+  {{- partial "inject/component-projects.html" . -}}
+{{- end -}}
+```
+
 要了解 Hugo 的主题组件以及如何使用它们，请查看 <https://gohugo.io/hugo-modules/theme-components/>。
 
 ## 配置

assets/css/component-projects/repo-card.scss

@@ -37,6 +37,10 @@
   border-style: solid;
   border-width: var(--bw-gh-repo-card);
 
+  &.single:only-child {
+    margin: auto;
+  }
+
   svg {
     display: inline-block;
     overflow: visible !important;

layouts/partials/inject/component-projects.html

@@ -0,0 +1,8 @@
+{{- /* repo-card.min.css */ -}}
+{{- if (.HasShortcode "gh-repo-card") | and (ne .Layout "projects") -}}
+  {{- $fingerprint := .Scratch.Get "fingerprint" -}}
+  {{- $options := dict "Source" "css/component-projects/repo-card.scss" "Fingerprint" $fingerprint -}}
+  {{- $toCSS := dict "targetPath" "css/repo-card.min.css" "enableSourceMap" true -}}
+  {{- $options = dict "Context" . "ToCSS" $toCSS | merge $options -}}
+  {{- partial "plugin/style.html" $options -}}
+{{- end -}}

layouts/partials/plugin/gh-repo-card.html

@@ -43,4 +43,5 @@
       {{- end -}}
     </p>
   </div>
-</div>
+</div>
+{{- /* EOF */ -}}

layouts/shortcodes/gh-repo-card-container.html

@@ -1 +1 @@
-<div class="gh-repo-card-container">{{- .Inner -}}</div>
+<div class="gh-repo-card-container single">{{- .Inner -}}</div>

layouts/shortcodes/gh-repo-card.html

@@ -16,13 +16,4 @@
   {{- erroridf "error-get-gh-repo" "gh-repo-card shortcode: failed to fetch repo info from GitHub API" -}}
 {{- end -}}
 
-{{- if eq .Ordinal 0 -}}
-  {{- /* repo-card.min.css */ -}}
-  {{- $fingerprint := .Scratch.Get "fingerprint" -}}
-  {{- $options := dict "Source" "css/component-projects/repo-card.scss" "Fingerprint" $fingerprint -}}
-  {{- $toCSS := dict "targetPath" "css/repo-card.min.css" "enableSourceMap" true -}}
-  {{- $options = dict "Context" . "ToCSS" $toCSS | merge $options -}}
-  {{- partial "plugin/style.html" $options -}}
-{{- end -}}
-
 {{- dict "RepoInfo" $repoInfo "GithubLangColors" $githubLangColors | partial "plugin/gh-repo-card.html" -}}