Hugo + Blowfish｜自装样式记录

{{ define "main" }}  
<main class="w-full mt-20 px-6">  
    <section class="flex flex-col lg:flex-row items-center justify-between gap-16 max-w-6xl mx-auto">  
  
        <!-- 图片区块 -->  
        <div class="lg:w-1/2 order-first lg:order-none shrink-0">  
            {{ with .Params.images }}  
            {{ range first 1 . }}  
            <img width="650" src="{{ . }}" alt="Background"  
                 class="mx-auto rounded-xl shadow-md object-contain" />  
            {{ end }}  
            {{ end }}  
        </div>  
  
        <!-- 文字区块 -->  
        <div class="lg:w-1/2 text-right flex flex-col justify-center">  
            {{ with .Params.title }}  
            <h1 class="text-4xl lg:text-5xl font-semibold mb-4 leading-tight max-w-md mx-auto lg:mx-0">{{ . }}</h1>  
            {{ end }}  
  
            {{ with .Params.subtitle }}  
            <h2 class="text-sm uppercase tracking-widest font-bold text-gray-500 mb-6 max-w-md mx-auto lg:mx-0">{{ . }}</h2>  
            {{ end }}  
  
            {{ with .Params.description }}  
            <p class="text-lg text-gray-700 mb-8 mt-6 leading-relaxed max-w-md mx-auto lg:mx-0 whitespace-nowrap">{{ . | markdownify }}</p>  
            {{ end }}  
        </div>  
  
    </section>  
</main>  
{{ end }}

{{ $dbUrl := .Get 0 }}  
{{ $dbApiUrl := "https://neodb.social/api/" }}  
{{ $dbType := "" }}  
  
{{ if (findRE `^.*neodb\.social\/.*` $dbUrl) }}  
{{ $dbType = replaceRE `.*neodb.social\/(.*\/.*)` "$1" $dbUrl }}  
{{ else }}  
{{ $dbType = $dbUrl }}  
{{ $dbApiUrl = "https://neodb.social/api/catalog/fetch?url=" }}  
{{ end }}  
  
{{ $remote := resources.GetRemote (print $dbApiUrl $dbType) }}  
{{ $dbFetch := $remote | transform.Unmarshal }}  
  
{{ if $dbFetch }}  
{{ $itemRating := 0 }}{{ with $dbFetch.rating }}{{ $itemRating = . }}{{ end }}  
<div class="db-card">  
    <div class="db-card-subject">  
        <div class="db-card-post">  
            <img loading="lazy" decoding="async" referrerpolicy="no-referrer" src="{{ $dbFetch.cover_image_url }}">  
        </div>  
        <div class="db-card-content">  
            <div class="db-card-title"><a href="{{ $dbUrl }}" class="cute" target="_blank" rel="noreferrer">{{ $dbFetch.title }}</a></div>  
            <div class="rating">  
                {{ if $dbFetch.rating }}  
                <span class="allstardark">  
                                    <span class="allstarlight" style="width:{{mul 10 $itemRating }}%"></span>  
                                </span>  
                <span class="rating_nums">{{ $itemRating }}</span>  
                {{ else }}  
                <span class="rating_nums" style="color:#737373;">评分人数不足</span>  
                {{ end }}  
            </div>  
            <div class="db-card-abstract">{{ $dbFetch.brief }}</div>  
        </div>  
        <div class="db-card-cate">{{ $dbFetch.category }}</div>  
    </div>  
</div>  
{{ else }}  
<p style="text-align: center;"><small>远程获取内容失败，请检查 API 有效性。</small></p>  
{{ end }}

/* db-card -------- start*/  
.db-card {  
  margin: 2rem 3rem;  
  background: #FAFAFA;  
  border-radius: 8px;  
  box-shadow: 0px px 2px rgba(0, 0, 0, 0.04), 0px 0px 2px rgba(0, 0, 0, 0.06), 0px 0px 1px rgba(0, 0, 0, 0.04);  
}  
  
.db-card-subject {  
  display: flex;  
  align-items: flex-start;  
  line-height: 1.6;  
  padding: 12px;  
  position: relative  
}  
  
.db-card-content {  
  flex: 1 1 auto  
}  
  
.db-card-post {  
  width: 96px;  
  margin-right: 15px;  
  display: flex;  
  flex: 0 0 auto  
}  
  
.db-card-title {  
  margin-bottom: 5px;  
  font-size: 18px  
}  
  
.db-card-title a {  
  text-decoration: none!important  
}  
  
.db-card-abstract,  
.db-card-comment {  
  font-size: 14px;  
  overflow: auto;  
  max-height: 7rem  
}  
  
.db-card-cate {  
  position: absolute;  
  top: 0;  
  right: 0;  
  background: #f99b0170;  
  padding: 1px 8px;  
  font-size: small;  
  font-style: italic;  
  border-radius: 0 8px 0 8px;  
  text-transform: capitalize  
}  
  
.db-card-post img {  
  width: 96px!important;  
  height: 128px!important;  
  border-radius: 4px;  
  -o-object-fit: cover;  
  object-fit: cover  
}  
  
.rating {  
  margin: 0 0 5px;  
  font-size: 13px;  
  line-height: 1;  
  display: flex;  
  align-items: center  
}  
  
.rating .allstardark {  
  position: relative;  
  color: #f99b01;  
  height: 16px;  
  width: 80px;  
  background-size: auto 100%;  
  margin-right: 8px;  
  background-repeat: repeat;  
  background-image: url(data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMzIiIGhlaWdodD0iMzIiPjxwYXRoIGQ9Ik05MDguMSAzNTMuMWwtMjUzLjktMzYuOUw1NDAuNyA4Ni4xYy0zLjEtNi4zLTguMi0xMS40LTE0LjUtMTQuNS0xNS44LTcuOC0zNS0xLjMtNDIuOSAxNC41TDM2OS44IDMxNi4ybC0yNTMuOSAzNi45Yy03IDEtMTMuNCA0LjMtMTguMyA5LjMtMTIuMyAxMi43LTEyLjEgMzIuOS42IDQ1LjNsMTgzLjcgMTc5LjEtNDMuNCAyNTIuOWMtMS4yIDYuOS0uMSAxNC4xIDMuMiAyMC4zIDguMiAxNS42IDI3LjYgMjEuNyA0My4yIDEzLjRMNTEyIDc1NGwyMjcuMSAxMTkuNGM2LjIgMy4zIDEzLjQgNC40IDIwLjMgMy4yIDE3LjQtMyAyOS4xLTE5LjUgMjYuMS0zNi45bC00My40LTI1Mi45IDE4My43LTE3OS4xYzUtNC45IDguMy0xMS4zIDkuMy0xOC4zIDIuNy0xNy41LTkuNS0zMy43LTI3LTM2LjN6TTY2NC44IDU2MS42bDM2LjEgMjEwLjNMNTEyIDY3Mi43IDMyMy4xIDc3MmwzNi4xLTIxMC4zLTE1Mi44LTE0OUw0MTcuNiAzODIgNTEyIDE5MC43IDYwNi40IDM4MmwyMTEuMiAzMC43LTE1Mi44IDE0OC45eiIgZmlsbD0iI2Y5OWIwMSIvPjwvc3ZnPg==)  
}  
  
.rating .allstarlight {  
  position: absolute;  
  left: 0;  
  color: #f99b01;  
  height: 16px;  
  overflow: hidden;  
  background-size: auto 100%;  
  background-repeat: repeat;  
  background-image: url(data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMzIiIGhlaWdodD0iMzIiPjxwYXRoIGQ9Ik05MDguMSAzNTMuMWwtMjUzLjktMzYuOUw1NDAuNyA4Ni4xYy0zLjEtNi4zLTguMi0xMS40LTE0LjUtMTQuNS0xNS44LTcuOC0zNS0xLjMtNDIuOSAxNC41TDM2OS44IDMxNi4ybC0yNTMuOSAzNi45Yy03IDEtMTMuNCA0LjMtMTguMyA5LjMtMTIuMyAxMi43LTEyLjEgMzIuOS42IDQ1LjNsMTgzLjcgMTc5LjEtNDMuNCAyNTIuOWMtMS4yIDYuOS0uMSAxNC4xIDMuMiAyMC4zIDguMiAxNS42IDI3LjYgMjEuNyA0My4yIDEzLjRMNTEyIDc1NGwyMjcuMSAxMTkuNGM2LjIgMy4zIDEzLjQgNC40IDIwLjMgMy4yIDE3LjQtMyAyOS4xLTE5LjUgMjYuMS0zNi45bC00My40LTI1Mi45IDE4My43LTE3OS4xYzUtNC45IDguMy0xMS4zIDkuMy0xOC4zIDIuNy0xNy41LTkuNS0zMy43LTI3LTM2LjN6IiBmaWxsPSIjZjk5YjAxIi8+PC9zdmc+)  
}  
  
@media(max-width: 550px) {  
  .db-card {  
    margin: .8rem 1rem  
  }  
  .db-card-comment {  
    display: none  
  }  
}  
  
/* 整体滚动条窄一些 */
::-webkit-scrollbar {  
  width: 6px;  
}  
  
/* 轨道完全透明 */
::-webkit-scrollbar-track {  
  background: transparent;  
}  
  
/* 滑块样式 */
::-webkit-scrollbar-thumb {  
  background-color: rgba(150, 150, 150, 0.3);  
  border-radius: 10px;  
}  
  
/* 鼠标 hover 时才更明显 */
::-webkit-scrollbar-thumb:hover {  
  background-color: rgba(150, 150, 150, 0.6);  
}  
  
/* Dark mode for db-card */
.dark {  
  --card-background: #2C2857;  
  --card-text-color-main: #cccccc;  
  --card-shadow: 0 6px 10px rgba(0, 0, 0, 0.6);  
}  
  
.dark .db-card {  
  background: var(--card-background);  
  box-shadow: var(--card-shadow);  
}  
  
.dark .db-card-title,  
.dark .db-card-abstract,  
.dark .db-card-cate,  
.dark .rating_nums {  
  color: var(--card-text-color-main);  
}  
  
.dark .db-card-cate {  
  background: rgba(249, 155, 1, 0.2); /* 柔和橘色 */}  
  
/* 夜间模式下的滚动条更暗一点 */
.dark ::-webkit-scrollbar-thumb {  
  background-color: rgba(255, 255, 255, 0.2);  
}  
.dark ::-webkit-scrollbar-thumb:hover {  
  background-color: rgba(255, 255, 255, 0.35);  
}  
/* db-card -------- end */

.prose a {  
  text-decoration: none;  
  color: inherit;  
  background-image: linear-gradient(to top, rgba(249, 155, 1, 0.3) 30%, transparent 30%);  
  transition: background-size 0.3s ease;  
  background-size: 100% 0.4em;  
  background-repeat: no-repeat;  
  background-position: 0 88%;  
}  
  
.prose a:hover {  
  background-size: 100% 70%;  
  background-image: linear-gradient(to top, rgba(249, 155, 1, 0.3) 88%, transparent 88%);  
}