1
2
3

{{< card url="https://blog.tomoyukim.net/entry/script-migrate-hatena2hugo/" img="https://blog.tomoyukim.net/entry/script-migrate-hatena2hugo/cover.jpg" title="はてなブログからHugo記事に移行するためのスクリプトを作った" >}}
以下の記事でお知らせした通り、はてなブログで公開していたブログをHugoで作り直して、さくらのレンタルサーバーに移設しました。 はてなブログか...
{{< /card >}}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20

{{- $description := .Inner -}}
{{- $url := .Get "url" -}}
{{- $image := .Get "img" -}}
{{- $title := .Get "title" -}}

<div class="blogcard">
  <div class="blogcard-content">
    <div class="blogcard-title">
      <a class="link" href="{{ $url }}">
	{{ $title | truncate 80}}
      </a>
    </div>
    <div class="blogcard-excerpt">
      {{ $description }}
    </div>
  </div>
  <div class="blogcard-thumbnail">
    <img src="{{ $image }}" alt="{{ $title }}" />
  </div>
</div>

 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

@mixin widget {
    display: flex;
    justify-content: flex-start;
    align-items: stretch;
    margin: 2rem 0;
    padding: 2rem;
    border: 1px solid var(--accent-color-darker);
}
@mixin line-clamp($line-num:1) {
    display: -webkit-box;
    -webkit-line-clamp: $line-num;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
@mixin font($size:1.0, $weight:normal) {
    font-size: #{$size}rem;
    line-height: $size;
    font-weight: $weight;
}

// Blogcard widget
.blogcard {
    @include widget;
    .blogcard-content {
	flex-grow: 1;
    }
    .blogcard-title {
	@include font(1.6, bold);
	@include line-clamp;

	padding-right: 2rem;
	margin-bottom: 1rem;
    }
    .blogcard-excerpt {
	@include font(1.2);
	@include line-clamp(2);

	padding-right: 2rem;
	color: var(--body-text-color);
    }
    .blogcard-thumbnail {
	width: auto;
	height: auto;
	max-width: 20%;
    }
}