「ブログカード」というものを利用したい！

    html
    
  


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77


{{- $url := (.Get 0) -}}
{{- $target_url := urls.Parse $url -}}

{{- $title := "" -}}
{{- $description := "" -}}
{{- $image := "" -}}

{{- with try (resources.GetRemote $url) -}}
    {{- with .Err -}}
        {{- $title = (print "情報の取得に失敗しました( ;∀;)") -}}
    {{- else with .Value -}}
        {{- $content := .Content -}}
        {{- $head := index (findRE `(?s)<head[^>]*>.*?</head>` .Content ) 0 -}}

        {{/* タイトルの抽出（より柔軟なパターン） */}}
        {{- $titleMatch := findRE `<title[^>]*>(.*?)</title>` $content 1 -}}
        {{- if $titleMatch -}}
            {{- $title = replaceRE `<title[^>]*>(.*?)</title>` "$1" (index $titleMatch 0) -}}
        {{- end -}}

        {{/* メタタグの抽出 */}}
        {{- range $meta := findRE `<meta.*?>` $head -}}
            {{- $name := findRE `name=["']([^"']+)["']` $meta 1 -}}
            {{- if $name -}}
              {{- $name = replaceRE `name=["']([^"']+)["']` `$1` (index $name 0) -}}
            {{- end -}}

            {{- $property := findRE `property=["']([^"']+)["']` $meta 1 -}}
            {{- if $property -}}
              {{- $property = replaceRE `property=["']([^"']+)["']` `$1` (index $property 0) -}}
            {{- end -}}

            {{- $content := findRE `content=["']([^"']+)["']` $meta 1 -}}
            {{- if $content -}}
              {{- $content = replaceRE `content=["']([^"']+)["']` `$1` (index $content 0) -}}
            {{- end -}}

            {{- if eq $property "og:title" -}}
                {{- $title = $content -}}
            {{- else if eq $property "og:description" -}}
                {{- $description = $content -}}
            {{- else if eq $property "og:image" -}}
                {{- $image = $content -}}
            {{- end -}}
        {{- end -}}
    {{- end -}}
{{- end -}}
<a href="{{ $url }}" class="link-card-wrapper">
    <div class="link-card-inner">
      {{ if $image }}
        {{ $imgResource := resources.GetRemote $image | images.Filter images.AutoOrient }}
        {{ $resized := $imgResource.Fill "160x120 Center" }}
        {{ with $resized }}
          <div class="link-card-image">
            <img src="{{ .RelPermalink }}" alt="{{ $title }}">
          </div>
        {{ end }}
      {{ else }}
        <!-- 画像がない場合でもスペースを確保（任意） -->
        <!-- <div class="link-card-image" style="background-color:#f5f5f5;"></div> -->
      {{ end }}
  
      <div class="link-card-content">
        {{ if $title }}
          {{ $max := 40 }}
          {{ $shortTitle := cond (gt (len $title) $max) (printf "%s…" ($title | truncate  $max)) $title }}
          <div class="link-card-title" title="{{ $title }}">{{ $shortTitle | plainify }}</div>
        {{ end }}
        {{ if $description }}
          {{ $max := 80 }}
          {{ $shortDesc := cond (gt (len $description) $max) (printf "%s…" ($description | truncate $max)) $description }}
          <div class="link-card-description">{{ $shortDesc | plainify }}</div>
        {{ end }}
        <div class="link-card-url">{{ $url }}</div>
      </div>
    </div>
</a>

css

    scss
    
  


  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115


// ========== Link Card SCSS ========== //

$link-card-border-color: #ddd;
$link-card-border-color-dark: $global-border-color-dark;
$link-card-bg-color: #fff;
$link-card-bg-color-dark: #2b2b2b;
$link-card-text-color: inherit;
$link-card-text-color-dark: $global-font-color-dark;

$link-card-description-color: #555;
$link-card-description-color-dark: #ccc;

$link-card-url-color: #999;
$link-card-url-color-dark: #888;

.link-card-wrapper {
  display: block;
  max-width: 720px;
  margin-bottom: 1rem;
  border: 1px solid $link-card-border-color;
  border-radius: 8px;
  overflow: hidden;
  text-decoration: none;
  color: $link-card-text-color;
  background-color: $link-card-bg-color;
  transition: box-shadow 0.2s;

  &:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  }

  body[theme="dark"] & {
    border-color: $link-card-border-color-dark;
    background-color: $link-card-bg-color-dark;
    color: $link-card-text-color-dark;

    &:hover {
        box-shadow: 0 4px 12px rgba(255, 255, 255, 0.1);
    }
  }
}

.link-card-inner {
  display: flex;
  flex-direction: row;
  align-items: stretch;
}

.link-card-image {
  flex: 0 0 160px;
  height: 120px;
  overflow: hidden;

  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
}

.link-card-content {
  flex: 1;
  padding: 12px;
  display: flex;
  flex-direction: column;
  justify-content: center;

  .link-card-title {
    font-size: 1rem;
    font-weight: bold;
  }

  .link-card-description {
    font-size: 0.8rem;
    color: $link-card-description-color;

    body[theme="dark"] & {
      color: $link-card-description-color-dark;
    }
  }

  .link-card-url {
    font-size: 0.8rem;
    color: $link-card-url-color;

    body[theme="dark"] & {
      color: $link-card-url-color-dark;
    }
  }
}

@media (max-width: 768px) {

  .link-card-image {
    flex: 0 0 120px;
    height: 90px;
  }

  .link-card-content {
    padding: 8px;

    .link-card-title {
      font-size: 1rem;
    }

    .link-card-description {
      display: none;
    }

    .link-card-url {
      display: none;
    }
  }
}