Hugo + Blowfish | 自装样式记录

{{ $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: #5D5470;  
  --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 */

/* 给目录的链接加荧光笔效果 */
#TableOfContents 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%;
}

#TableOfContents a:hover {
background-size: 100% 70%;
background-image: linear-gradient(to top, rgba(249, 155, 1, 0.3) 88%, transparent 88%);
}

/* 给正文的链接加荧光笔效果 */
.article-content 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%;
}

.article-content a:hover {
background-size: 100% 70%;
background-image: linear-gradient(to top, rgba(249, 155, 1, 0.3) 88%, transparent 88%);
}

  /* ---------- 友链卡片样式开始 ---------- */
    a.friend-link {
      text-decoration: none;
      color: inherit;
      background-size: 0 !important;
    }
    
    a.friend-link:hover {
      text-decoration: none;
      color: inherit;
      background-size: 0 !important;
    } 
  
  .friend-link {  
    display: block;  
    width: 100%;  
    margin: 1rem auto;  
    text-decoration: none;  
    border-radius: 12px;  
    overflow: hidden;  
    background-color: #fff;  
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);  
    transition: transform 0.2s ease;  
  }  
  
  .friend-link-div {  
    display: flex;  
    align-items: center;  
    padding: 0 16px;  
  }  
  
  .friend-avatar {  
    width: 56px;  
    height: 56px;  
    border-radius: 50%;  
    object-fit: cover;  
    flex-shrink: 0;  
    margin-right: 10px;  
  }  
  
  .friend-link-info {  
    display: flex;  
    flex-direction: column;  
    justify-content: center;  
  }  
  
  .friend-name {  
    font-size: 16px;  
    font-weight: bolder;  
    font-style: normal;  
    color: #444;  
    margin-bottom: 0;  
    margin-top: 0;  
    margin-left: 12px;  
  }  
  
  .friend-bio {  
    font-size: 14px;  
    color: #666;  
    line-height: 1.4;  
    overflow: hidden;  
    text-overflow: ellipsis;  
    margin-top: 0;  
    margin-bottom: 0;  
    margin-left: 12px;  
  }  
  
  /* 夜间模式适配 */  .dark .friend-link {  
    background-color: #5D5470;  
    box-shadow: 0 4px 20px rgba(255, 255, 255, 0.05);  
  }  
  
  .dark .friend-name {  
    color: #ddd;  
  }  
  
  .dark .friend-bio {  
    color: #F5F5F5;  
  }  
  
  .dark .friend-avatar {  
    border-color: #444;  
  }  
  
  /* 响应式优化 */  @media screen and (max-width: 600px) {  
    .friend-link-div {  
      flex-direction: row;  
      padding: 12px 16px;  
    }  
  
    .friend-avatar {  
      width: 56px;  
      height: 56px;  
      margin-right: 12px;  
    }  
  
    .friend-name {  
      font-size: 16px;  
    }  
  
    .friend-bio {  
      font-size: 14px;  
    }  
  }  
  /* ---------- 友链卡片样式结束 ---------- */

{{- $name := .Get "name" | default (.Get 0) -}}
{{- $url := .Get "url" | default (.Get 1) -}}
{{- $avatar := .Get "avatar" | default (.Get 2) -}}
{{- $bio := .Get "bio" | default (.Get 3) -}}

<a href="{{- $url -}}" title="{{- $name -}}" class="friend-link" target="_blank" rel="friend">
    <div class="friend-link-div">
        <div class="friend-link-avatar">
            <img src={{ .Get "avatar" }} class="friend-avatar" loading="lazy" alt="Avatar">
        </div>
        <div class="friend-link-info">
            <i class="fa fa-link" aria-hidden="true"></i>
            <i class="friend-name">{{ $name }}</i>
            <p class="friend-bio">{{ $bio }}</p>
        </div>
    </div>
</a>