Skip to content

Commit 8d4ba80

Browse files
nakanohirokonakanohiroko
committed
feature: バナーを複数設定できるように変更
1 parent 9953102 commit 8d4ba80

File tree

9 files changed

+130
-92
lines changed

9 files changed

+130
-92
lines changed

‎README.md‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -114,14 +114,20 @@ type: オブジェクト形式
114114
| articles | 人気の記事 | 複数コンテンツ参照 - ブログ |
115115

116116
### バナー
117-
endpoint: banner
117+
endpoint: banners
118118
type: オブジェクト形式
119119

120120
| フィールドID | 表示名 | 種類 |
121121
| ------------- | ------------- | ----- |
122+
| banner | バナー | 繰り返し - カスタムフィールド |
123+
124+
#### カスタムフィールド
125+
フィールドID: cf_banner
126+
127+
| フィールド ID | 表示名 | 種類 |
128+
| ------------- | ---------- | --------------------------- |
122129
| image | 画像 | 画像 |
123130
| url | リンク先URL | テキストフィールド |
124-
| alt | 代替テキスト | テキストフィールド |
125131

126132
### CTA
127133
endpoint: cta

‎components/Banner.vue‎

Lines changed: 0 additions & 58 deletions
This file was deleted.

‎components/Banners.vue‎

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
<template>
2+
<div class="wrapper">
3+
<template v-for="(banner, idx) in normalizedBanners">
4+
<a
5+
v-if="banner && banner.image && banner.image.url && banner.url"
6+
:key="`${banner.id || idx}-link`"
7+
:href="banner.url"
8+
class="link blog-cta-link"
9+
target="banner"
10+
rel="noopener"
11+
>
12+
<picture>
13+
<source
14+
type="image/webp"
15+
:data-srcset="`${banner.image.url}?w=300&fm=webp, ${banner.image.url}?w=600&fm=webp 2x`"
16+
/>
17+
<img
18+
:data-src="banner.image.url"
19+
:width="banner.image.width"
20+
:height="banner.image.height"
21+
class="image lazyload"
22+
:alt="banner.image.alt || ''"
23+
/>
24+
</picture>
25+
</a>
26+
<div
27+
v-else-if="banner && banner.image && banner.image.url"
28+
:key="`${banner.id || idx}-nolink`"
29+
class="link blog-cta-link"
30+
>
31+
<picture>
32+
<source
33+
type="image/webp"
34+
:data-srcset="`${banner.image.url}?w=300&fm=webp, ${banner.image.url}?w=600&fm=webp 2x`"
35+
/>
36+
<img
37+
:data-src="banner.image.url"
38+
:width="banner.image.width"
39+
:height="banner.image.height"
40+
class="image lazyload"
41+
:alt="banner.image.alt || ''"
42+
/>
43+
</picture>
44+
</div>
45+
</template>
46+
</div>
47+
</template>
48+
49+
<script>
50+
export default {
51+
props: {
52+
banners: {
53+
type: [Array, Object],
54+
required: false,
55+
default: () => [],
56+
},
57+
id: {
58+
type: String,
59+
required: true,
60+
},
61+
},
62+
computed: {
63+
normalizedBanners() {
64+
if (Array.isArray(this.banners)) return this.banners;
65+
if (this.banners && Array.isArray(this.banners.banner)) {
66+
return this.banners.banner;
67+
}
68+
return [];
69+
},
70+
},
71+
};
72+
</script>
73+
74+
<style scoped>
75+
.image {
76+
width: 300px;
77+
height: auto;
78+
}
79+
80+
.link {
81+
display: block;
82+
margin-bottom: 30px;
83+
}
84+
85+
@media (max-width: 1160px) {
86+
.wrapper {
87+
text-align: center;
88+
}
89+
}
90+
</style>

‎nuxt.config.js‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -214,8 +214,8 @@ export default {
214214
endpoint: 'popular-articles',
215215
})
216216
).articles;
217-
const banner = await client.get({
218-
endpoint: 'banner',
217+
const banners = await client.get({
218+
endpoint: 'banners',
219219
});
220220
const ctaContents = (
221221
await client.get({
@@ -242,7 +242,7 @@ export default {
242242
return [
243243
...res.contents.map((content) => ({
244244
route: `/${content.id}`,
245-
payload: { content, popularArticles, banner, ctaContents },
245+
payload: { content, popularArticles, banners, ctaContents },
246246
})),
247247
...articles,
248248
];
@@ -253,7 +253,7 @@ export default {
253253
// 一覧ページ
254254
const index = {
255255
route: '/',
256-
payload: { popularArticles, banner },
256+
payload: { popularArticles, banners },
257257
};
258258

259259
// 一覧のページング
@@ -267,14 +267,14 @@ export default {
267267
.then((res) =>
268268
range(1, Math.ceil(res.totalCount / 10)).map((p) => ({
269269
route: `/page/${p}`,
270-
payload: { popularArticles, banner },
270+
payload: { popularArticles, banners },
271271
}))
272272
);
273273

274274
// 検索ページ
275275
const search = {
276276
route: '/search',
277-
payload: { popularArticles, banner },
277+
payload: { popularArticles, banners },
278278
};
279279

280280
const categories = await client
@@ -302,7 +302,7 @@ export default {
302302
.then((res) => {
303303
return range(1, Math.ceil(res.totalCount / 10)).map((p) => ({
304304
route: `/category/${category}/page/${p}`,
305-
payload: { popularArticles, banner },
305+
payload: { popularArticles, banners },
306306
}));
307307
})
308308
)
@@ -335,7 +335,7 @@ export default {
335335
.then((res) => {
336336
return range(1, Math.ceil(res.totalCount / 10)).map((p) => ({
337337
route: `/tag/${tag}/page/${p}`,
338-
payload: { popularArticles, banner },
338+
payload: { popularArticles, banners },
339339
}));
340340
})
341341
)

‎pages/_slug/index.vue‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -81,7 +81,7 @@
8181
<Tags :tags="tags" />
8282
<PopularArticles :contents="popularArticles" />
8383
<div class="followArea">
84-
<Banner :id="`blog-${id}`" :banner="banner" />
84+
<Banners :id="`blog-${id}`" :banners="banners" />
8585
<Latest :contents="contents" />
8686
</div>
8787
</aside>
@@ -115,11 +115,11 @@ export default {
115115
endpoint: 'popular-articles',
116116
})
117117
).articles;
118-
const banner =
118+
const banners =
119119
payload !== undefined
120-
? payload.banner
120+
? payload.banners
121121
: await $microcms.get({
122-
endpoint: 'banner',
122+
endpoint: 'banners',
123123
});
124124
const ctaContents =
125125
payload !== undefined && payload.ctaContents !== undefined
@@ -182,7 +182,7 @@ export default {
182182
...data,
183183
defaultOgimage: getDefaultOgimage(data),
184184
popularArticles,
185-
banner,
185+
banners,
186186
ctaContents,
187187
body: $.html(),
188188
toc,

‎pages/author/_authorId.vue‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -88,7 +88,7 @@
8888
/>
8989
</div>
9090
<aside class="aside">
91-
<Banner id="list" :banner="banner" />
91+
<Banners id="list" :banners="banners" />
9292
<Search />
9393
<Categories :categories="categories" />
9494
<Tags :tags="tags" />
@@ -115,11 +115,11 @@ export default {
115115
endpoint: 'popular-articles',
116116
})
117117
).articles;
118-
const banner =
118+
const banners =
119119
payload !== undefined
120-
? payload.banner
120+
? payload.banners
121121
: await $microcms.get({
122-
endpoint: 'banner',
122+
endpoint: 'banners',
123123
});
124124
const author = await $microcms.get({
125125
endpoint: `authors/${authorId}`,
@@ -156,7 +156,7 @@ export default {
156156
tags: tags.contents,
157157
authorId,
158158
popularArticles,
159-
banner,
159+
banners,
160160
page,
161161
pager: [...Array(Math.ceil(data.totalCount / limit)).keys()],
162162
};

‎pages/draft/index.vue‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -75,7 +75,7 @@
7575
<Categories :categories="categories" />
7676
<Tags :tags="tags" />
7777
<div class="followArea">
78-
<Banner :id="`draft-${data.id}`" :banner="banner" />
78+
<Banners :id="`draft-${data.id}`" :banners="banners" />
7979
<Latest :contents="contents" />
8080
</div>
8181
</aside>
@@ -104,16 +104,16 @@ export default {
104104
limit: 100,
105105
},
106106
});
107-
const banner = await $microcms.get({
108-
endpoint: 'banner',
107+
const banners = await $microcms.get({
108+
endpoint: 'banners',
109109
});
110110
const { contents } = await $microcms.get({
111111
endpoint: 'blog',
112112
});
113113
return {
114114
categories: categories.contents,
115115
tags: tags.contents,
116-
banner,
116+
banners,
117117
contents,
118118
};
119119
},

‎pages/index.vue‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,7 @@
5757
/>
5858
</div>
5959
<aside class="aside">
60-
<Banner id="list" :banner="banner" />
60+
<Banners id="list" :banners="banners" />
6161
<Search />
6262
<Categories :categories="categories" />
6363
<Tags :tags="tags" />
@@ -91,11 +91,11 @@ export default {
9191
endpoint: 'popular-articles',
9292
})
9393
).articles;
94-
const banner =
94+
const banners =
9595
payload !== undefined
96-
? payload.banner
96+
? payload.banners
9797
: await $microcms.get({
98-
endpoint: 'banner',
98+
endpoint: 'banners',
9999
});
100100
const data = await $microcms.get({
101101
endpoint: 'blog',
@@ -138,7 +138,7 @@ export default {
138138
selectedCategory,
139139
selectedTag,
140140
popularArticles,
141-
banner,
141+
banners,
142142
page,
143143
pager: [...Array(Math.ceil(data.totalCount / limit)).keys()],
144144
};

‎pages/search/index.vue‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -77,7 +77,7 @@
7777
</div>
7878
</div>
7979
<aside class="aside">
80-
<Banner id="search" :banner="banner" />
80+
<Banners id="search" :banners="banners" />
8181
<Categories :categories="categories" />
8282
<Tags :tags="tags" />
8383
<PopularArticles :contents="popularArticles" />
@@ -101,11 +101,11 @@ export default {
101101
endpoint: 'popular-articles',
102102
})
103103
).articles;
104-
const banner =
104+
const banners =
105105
payload !== undefined
106-
? payload.banner
106+
? payload.banners
107107
: await $microcms.get({
108-
endpoint: 'banner',
108+
endpoint: 'banners',
109109
});
110110
const categories = await $microcms.get({
111111
endpoint: 'categories',
@@ -121,7 +121,7 @@ export default {
121121
});
122122
return {
123123
popularArticles,
124-
banner,
124+
banners,
125125
categories: categories.contents,
126126
tags: tags.contents,
127127
};

0 commit comments

Comments
 (0)