Skip to content

feature: バナーを複数設定できるように変更 #183

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: production
Choose a base branch
from
Open

feature: バナーを複数設定できるように変更 #183

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 8 additions & 2 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -114,14 +114,20 @@ type: オブジェクト形式
| articles | 人気の記事 | 複数コンテンツ参照 - ブログ |

### バナー
endpoint: banner
endpoint: banners
type: オブジェクト形式

| フィールドID | 表示名 | 種類 |
| ------------- | ------------- | ----- |
| banner | バナー | 繰り返し - カスタムフィールド |

#### カスタムフィールド
フィールドID: cf_banner

| フィールド ID | 表示名 | 種類 |
| ------------- | ---------- | --------------------------- |
| image | 画像 | 画像 |
| url | リンク先URL | テキストフィールド |
| alt | 代替テキスト | テキストフィールド |

### CTA
endpoint: cta
Expand Down
58 changes: 0 additions & 58 deletions components/Banner.vue
View file
Open in desktop

This file was deleted.

90 changes: 90 additions & 0 deletions components/Banners.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,90 @@
<template>
<div class="wrapper">
<template v-for="(banner, idx) in normalizedBanners">
<a
v-if="banner && banner.image && banner.image.url && banner.url"
:key="`${banner.id || idx}-link`"
:href="banner.url"
class="link blog-cta-link"
target="banner"
rel="noopener"
>
<picture>
<source
type="image/webp"
:data-srcset="`${banner.image.url}?w=300&fm=webp, ${banner.image.url}?w=600&fm=webp 2x`"
/>
<img
:data-src="banner.image.url"
:width="banner.image.width"
:height="banner.image.height"
class="image lazyload"
:alt="banner.image.alt || ''"
/>
</picture>
</a>
<div
v-else-if="banner && banner.image && banner.image.url"
:key="`${banner.id || idx}-nolink`"
class="link blog-cta-link"
>
<picture>
<source
type="image/webp"
:data-srcset="`${banner.image.url}?w=300&fm=webp, ${banner.image.url}?w=600&fm=webp 2x`"
/>
<img
:data-src="banner.image.url"
:width="banner.image.width"
:height="banner.image.height"
class="image lazyload"
:alt="banner.image.alt || ''"
/>
</picture>
</div>
</template>
</div>
</template>

<script>
export default {
props: {
banners: {
type: [Array, Object],
required: false,
default: () => [],
},
id: {
type: String,
required: true,
},
},
computed: {
normalizedBanners() {
if (Array.isArray(this.banners)) return this.banners;
if (this.banners && Array.isArray(this.banners.banner)) {
return this.banners.banner;
}
return [];
},
},
};
</script>

<style scoped>
.image {
width: 300px;
height: auto;
}

.link {
display: block;
margin-bottom: 30px;
}

@media (max-width: 1160px) {
.wrapper {
text-align: center;
}
}
</style>
16 changes: 8 additions & 8 deletions nuxt.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -214,8 +214,8 @@ export default {
endpoint: 'popular-articles',
})
).articles;
const banner = await client.get({
endpoint: 'banner',
const banners = await client.get({
endpoint: 'banners',
});
const ctaContents = (
await client.get({
Expand All @@ -242,7 +242,7 @@ export default {
return [
...res.contents.map((content) => ({
route: `/${content.id}`,
payload: { content, popularArticles, banner, ctaContents },
payload: { content, popularArticles, banners, ctaContents },
})),
...articles,
];
Expand All @@ -253,7 +253,7 @@ export default {
// 一覧ページ
const index = {
route: '/',
payload: { popularArticles, banner },
payload: { popularArticles, banners },
};

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

// 検索ページ
const search = {
route: '/search',
payload: { popularArticles, banner },
payload: { popularArticles, banners },
};

const categories = await client
Expand Down Expand Up @@ -302,7 +302,7 @@ export default {
.then((res) => {
return range(1, Math.ceil(res.totalCount / 10)).map((p) => ({
route: `/category/${category}/page/${p}`,
payload: { popularArticles, banner },
payload: { popularArticles, banners },
}));
})
)
Expand Down Expand Up @@ -335,7 +335,7 @@ export default {
.then((res) => {
return range(1, Math.ceil(res.totalCount / 10)).map((p) => ({
route: `/tag/${tag}/page/${p}`,
payload: { popularArticles, banner },
payload: { popularArticles, banners },
}));
})
)
Expand Down
10 changes: 5 additions & 5 deletions pages/_slug/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -81,7 +81,7 @@
<Tags :tags="tags" />
<PopularArticles :contents="popularArticles" />
<div class="followArea">
<Banner :id="`blog-${id}`" :banner="banner" />
<Banners :id="`blog-${id}`" :banners="banners" />
<Latest :contents="contents" />
</div>
</aside>
Expand Down Expand Up @@ -115,11 +115,11 @@ export default {
endpoint: 'popular-articles',
})
).articles;
const banner =
const banners =
payload !== undefined
? payload.banner
? payload.banners
: await $microcms.get({
endpoint: 'banner',
endpoint: 'banners',
});
const ctaContents =
payload !== undefined && payload.ctaContents !== undefined
Expand Down Expand Up @@ -182,7 +182,7 @@ export default {
...data,
defaultOgimage: getDefaultOgimage(data),
popularArticles,
banner,
banners,
ctaContents,
body: $.html(),
toc,
Expand Down
10 changes: 5 additions & 5 deletions pages/author/_authorId.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -88,7 +88,7 @@
/>
</div>
<aside class="aside">
<Banner id="list" :banner="banner" />
<Banners id="list" :banners="banners" />
<Search />
<Categories :categories="categories" />
<Tags :tags="tags" />
Expand All @@ -115,11 +115,11 @@ export default {
endpoint: 'popular-articles',
})
).articles;
const banner =
const banners =
payload !== undefined
? payload.banner
? payload.banners
: await $microcms.get({
endpoint: 'banner',
endpoint: 'banners',
});
const author = await $microcms.get({
endpoint: `authors/${authorId}`,
Expand Down Expand Up @@ -156,7 +156,7 @@ export default {
tags: tags.contents,
authorId,
popularArticles,
banner,
banners,
page,
pager: [...Array(Math.ceil(data.totalCount / limit)).keys()],
};
Expand Down
8 changes: 4 additions & 4 deletions pages/draft/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -75,7 +75,7 @@
<Categories :categories="categories" />
<Tags :tags="tags" />
<div class="followArea">
<Banner :id="`draft-${data.id}`" :banner="banner" />
<Banners :id="`draft-${data.id}`" :banners="banners" />
<Latest :contents="contents" />
</div>
</aside>
Expand Down Expand Up @@ -104,16 +104,16 @@ export default {
limit: 100,
},
});
const banner = await $microcms.get({
endpoint: 'banner',
const banners = await $microcms.get({
endpoint: 'banners',
});
const { contents } = await $microcms.get({
endpoint: 'blog',
});
return {
categories: categories.contents,
tags: tags.contents,
banner,
banners,
contents,
};
},
Expand Down
10 changes: 5 additions & 5 deletions pages/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@
/>
</div>
<aside class="aside">
<Banner id="list" :banner="banner" />
<Banners id="list" :banners="banners" />
<Search />
<Categories :categories="categories" />
<Tags :tags="tags" />
Expand Down Expand Up @@ -91,11 +91,11 @@ export default {
endpoint: 'popular-articles',
})
).articles;
const banner =
const banners =
payload !== undefined
? payload.banner
? payload.banners
: await $microcms.get({
endpoint: 'banner',
endpoint: 'banners',
});
const data = await $microcms.get({
endpoint: 'blog',
Expand Down Expand Up @@ -138,7 +138,7 @@ export default {
selectedCategory,
selectedTag,
popularArticles,
banner,
banners,
page,
pager: [...Array(Math.ceil(data.totalCount / limit)).keys()],
};
Expand Down
10 changes: 5 additions & 5 deletions pages/search/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -77,7 +77,7 @@
</div>
</div>
<aside class="aside">
<Banner id="search" :banner="banner" />
<Banners id="search" :banners="banners" />
<Categories :categories="categories" />
<Tags :tags="tags" />
<PopularArticles :contents="popularArticles" />
Expand All @@ -101,11 +101,11 @@ export default {
endpoint: 'popular-articles',
})
).articles;
const banner =
const banners =
payload !== undefined
? payload.banner
? payload.banners
: await $microcms.get({
endpoint: 'banner',
endpoint: 'banners',
});
const categories = await $microcms.get({
endpoint: 'categories',
Expand All @@ -121,7 +121,7 @@ export default {
});
return {
popularArticles,
banner,
banners,
categories: categories.contents,
tags: tags.contents,
};
Expand Down