Implement affeliate link shortcode
This commit is contained in:
tabinurie
parent
9a5a692aab
commit
368cb44499
|
|
@ -0,0 +1,124 @@
|
||||||
|
.affeliate {
|
||||||
|
word-break: keep-all;
|
||||||
|
padding: 0.5rem;
|
||||||
|
margin: 2.5rem 0;
|
||||||
|
border-radius: 0.5rem;
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
@include themify($themes) {
|
||||||
|
border: 1px solid themed('content-box-border-color');
|
||||||
|
background-color: themed('content-box-background-color');
|
||||||
|
}
|
||||||
|
|
||||||
|
&__imgwrapper {
|
||||||
|
width: 25%;
|
||||||
|
text-align: center;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: .5rem;
|
||||||
|
}
|
||||||
|
&__image {
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
|
&__body {
|
||||||
|
width: 75%;
|
||||||
|
text-align: center;
|
||||||
|
&__title {
|
||||||
|
font-family: $title-font;
|
||||||
|
font-size: 1rem;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
&__description {
|
||||||
|
font-size: 0.75rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__icons {
|
||||||
|
@include flexbox();
|
||||||
|
@include align-items(center);
|
||||||
|
@include justify-content(center);
|
||||||
|
@include flex-wrap(wrap);
|
||||||
|
margin: 0.5rem 0;
|
||||||
|
|
||||||
|
a {
|
||||||
|
text-decoration: none !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__item {
|
||||||
|
font-family: $title-font;
|
||||||
|
font-size: 0.8rem;
|
||||||
|
cursor: pointer;
|
||||||
|
border-radius: 0.25rem;
|
||||||
|
margin: 0.25rem;
|
||||||
|
text-transform: capitalize;
|
||||||
|
|
||||||
|
@include flexbox();
|
||||||
|
@include align-items(center);
|
||||||
|
|
||||||
|
&[data-type="affeliate"] {
|
||||||
|
svg {
|
||||||
|
@include themify($themes) {
|
||||||
|
color: themed('share-color');
|
||||||
|
background-color: themed('share-background-color');
|
||||||
|
@include box-shadow(1px, 1px, 3px, 0, themed('share-shadow-color'));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
svg {
|
||||||
|
padding: 0.375rem;
|
||||||
|
border-radius: 0.25rem;
|
||||||
|
margin-right: 0.25rem;
|
||||||
|
|
||||||
|
&[data-name="amazon"] {
|
||||||
|
color: white;
|
||||||
|
@include on-event {
|
||||||
|
background-color: #FF9900;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&[data-name="rakuten"] {
|
||||||
|
color: white;
|
||||||
|
@include on-event {
|
||||||
|
background-color: #BF0000;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&[data-name="yahoojp"] {
|
||||||
|
color: white;
|
||||||
|
@include on-event {
|
||||||
|
background-color: #FF0132;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&[data-name="gmarket"] {
|
||||||
|
color: white;
|
||||||
|
@include on-event {
|
||||||
|
background-color: #48AC4A;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&[data-name="link"] {
|
||||||
|
color: white;
|
||||||
|
@include on-event {
|
||||||
|
background-color: #00457C;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@include transition(transform, 0.15s, ease-in);
|
||||||
|
@include on-event {
|
||||||
|
@include translateY(-0.25rem);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 767px) {
|
||||||
|
display: block;
|
||||||
|
|
||||||
|
&__imgwrapper {
|
||||||
|
width: 60%;
|
||||||
|
}
|
||||||
|
&__body {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -82,6 +82,7 @@ $viewport_size: {{ .Site.Params.viewportSize | default "normal" }};
|
||||||
@import 'components/button';
|
@import 'components/button';
|
||||||
@import 'components/featuredImage';
|
@import 'components/featuredImage';
|
||||||
@import 'components/comment';
|
@import 'components/comment';
|
||||||
|
@import 'components/affeliate';
|
||||||
|
|
||||||
@import 'pages/404';
|
@import 'pages/404';
|
||||||
@import 'pages/about';
|
@import 'pages/about';
|
||||||
|
|
|
||||||
|
|
@ -133,3 +133,14 @@ warning text
|
||||||
{{< notice error >}}
|
{{< notice error >}}
|
||||||
error text
|
error text
|
||||||
{{< /notice >}}
|
{{< /notice >}}
|
||||||
|
|
||||||
|
## Affeliate
|
||||||
|
{{< affeliate title="The Very Hungry Caterpillar"
|
||||||
|
description="Author: Eric Carle; Publisher: Philomel Books<br>THE all-time classic picture book, from generation to generation, sold somewhere in the world every 30 seconds! A sturdy and beautiful book to give as a gift for new babies, baby showers, birthdays, and other new beginnings!"
|
||||||
|
img="images/shortcodes/affeliate.jpg"
|
||||||
|
amazon="https://www.amazon.com/dp/0399226907/"
|
||||||
|
rakuten="https://books.rakuten.co.jp/rb/4177444/"
|
||||||
|
yahoojp="https://store.shopping.yahoo.co.jp/maniacs-shop/pd-01041801.html"
|
||||||
|
gmarket="http://global.gmarket.co.kr/item?goodsCode=260740452"
|
||||||
|
link="https://www.penguinrandomhouse.com/books/557025/9780399256042" >}}
|
||||||
|
|
||||||
|
|
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 7.2 KiB |
|
|
@ -0,0 +1 @@
|
||||||
|
<svg data-name="amazon" enable-background="new 0 0 24 24" viewBox="0 0 24 24" width="{{ .width }}" height="{{ .height }}" fill="currentColor" xmlns="http://www.w3.org/2000/svg" ><path d="M.045 18.02c.072-.116.187-.124.348-.022 3.636 2.11 7.594 3.166 11.87 3.166 2.852 0 5.668-.533 8.447-1.595l.315-.14c.138-.06.234-.1.293-.13.226-.088.39-.046.525.13.12.174.09.336-.12.48-.256.19-.6.41-1.006.654-1.244.743-2.64 1.316-4.185 1.726a17.617 17.617 0 01-10.951-.577 17.88 17.88 0 01-5.43-3.35c-.1-.074-.151-.15-.151-.22 0-.047.021-.09.051-.13zm6.565-6.218c0-1.005.247-1.863.743-2.577.495-.71 1.17-1.25 2.04-1.615.796-.335 1.756-.575 2.912-.72.39-.046 1.033-.103 1.92-.174v-.37c0-.93-.105-1.558-.3-1.875-.302-.43-.78-.65-1.44-.65h-.182c-.48.046-.896.196-1.246.46-.35.27-.575.63-.675 1.096-.06.3-.206.465-.435.51l-2.52-.315c-.248-.06-.372-.18-.372-.39 0-.046.007-.09.022-.15.247-1.29.855-2.25 1.82-2.88.976-.616 2.1-.975 3.39-1.05h.54c1.65 0 2.957.434 3.888 1.29.135.15.27.3.405.48.12.165.224.314.283.45.075.134.15.33.195.57.06.254.105.42.135.51.03.104.062.3.076.615.01.313.02.493.02.553v5.28c0 .376.06.72.165 1.036.105.313.21.54.315.674l.51.674c.09.136.136.256.136.36 0 .12-.06.226-.18.314-1.2 1.05-1.86 1.62-1.963 1.71-.165.135-.375.15-.63.045a6.062 6.062 0 01-.526-.496l-.31-.347a9.391 9.391 0 01-.317-.42l-.3-.435c-.81.886-1.603 1.44-2.4 1.665-.494.15-1.093.227-1.83.227-1.11 0-2.04-.343-2.76-1.034-.72-.69-1.08-1.665-1.08-2.94l-.05-.076zm3.753-.438c0 .566.14 1.02.425 1.364.285.34.675.512 1.155.512.045 0 .106-.007.195-.02.09-.016.134-.023.166-.023.614-.16 1.08-.553 1.424-1.178.165-.28.285-.58.36-.91.09-.32.12-.59.135-.8.015-.195.015-.54.015-1.005v-.54c-.84 0-1.484.06-1.92.18-1.275.36-1.92 1.17-1.92 2.43l-.035-.02zm9.162 7.027c.03-.06.075-.11.132-.17.362-.243.714-.41 1.05-.5a8.094 8.094 0 011.612-.24c.14-.012.28 0 .41.03.65.06 1.05.168 1.172.33.063.09.099.228.099.39v.15c0 .51-.149 1.11-.424 1.8-.278.69-.664 1.248-1.156 1.68-.073.06-.14.09-.197.09-.03 0-.06 0-.09-.012-.09-.044-.107-.12-.064-.24.54-1.26.806-2.143.806-2.64 0-.15-.03-.27-.087-.344-.145-.166-.55-.257-1.224-.257-.243 0-.533.016-.87.046-.363.045-.7.09-1 .135-.09 0-.148-.014-.18-.044-.03-.03-.036-.047-.02-.077 0-.017.006-.03.02-.063v-.06z"/></svg>
|
||||||
|
After Width: | Height: | Size: 2.2 KiB |
|
|
@ -0,0 +1 @@
|
||||||
|
<svg data-name="gmarket" enable-background="new 0 0 106 108" viewBox="0 0 106 108" width="{{ .width }}" height="{{ .height }}" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="m92.625 7.922c6.561 3.8 9.063 7.438 9.063 12.041 0 6.205-5.03 11.234-11.237 11.234-4.004 0-6.51-2.023-10.157-4.158-4.61-2.685-11.08-5.616-19.477-5.616-18.22 0-34.225 12.182-34.225 32.97 0 17.405 14.901 31.61 32.903 31.61 11.538 0 17.728-2.973 21.122-4.832v-15.415h-21.975v-22.818h32.839c8.265 0 14.3 5.248 14.3 13.857h8e-3v28.803c0 5.393-1.012 7.547-5.699 10.51-7.424 4.705-21.252 11.242-41.205 11.242-32.216 0-58.885-22.025-58.885-52.965 0-31.786 24.804-54.385 60.371-54.385 13.165-1e-3 23.825 3.032 32.254 7.922"/><path d="m69.946 54.349c0 6.301-5.106 11.409-11.416 11.409-6.305 0-11.415-5.107-11.415-11.409 0-6.318 5.11-11.423 11.415-11.423 6.311 0 11.416 5.105 11.416 11.423"/></svg>
|
||||||
|
After Width: | Height: | Size: 879 B |
|
|
@ -0,0 +1 @@
|
||||||
|
<svg data-name="link" enable-background="new 0 0 512 512" viewBox="0 0 512 512" width="{{ .width }}" height="{{ .height }}" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M432,320H400a16,16,0,0,0-16,16V448H64V128H208a16,16,0,0,0,16-16V80a16,16,0,0,0-16-16H48A48,48,0,0,0,0,112V464a48,48,0,0,0,48,48H400a48,48,0,0,0,48-48V336A16,16,0,0,0,432,320ZM488,0h-128c-21.37,0-32.05,25.91-17,41l35.73,35.73L135,320.37a24,24,0,0,0,0,34L157.67,377a24,24,0,0,0,34,0L435.28,133.32,471,169c15,15,41,4.5,41-17V24A24,24,0,0,0,488,0Z"></path></svg>
|
||||||
|
After Width: | Height: | Size: 547 B |
|
|
@ -0,0 +1 @@
|
||||||
|
<svg data-name="rakuten" enable-background="new 0 0 1024 1024" viewBox="0 0 614 654" width="{{ .width }}" height="{{ .height }}" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><polygon points="328,848.8 240.3,775.2 855.2,775.2" transform="translate(-240.3,-194.5)"/><path d="m 187.5,525.5 v -163 h 70.6 l 122.3,163 h 125 L 357.7,328.9 C 403.8,295.8 434,242.1 434,181.2 434,81.2 352.7,0 252.7,0 h -165 v 525.5 z m 0,-425.7 h 65.2 c 44.8,0 81.5,36.5 81.5,81.4 0,45.1 -36.7,81.5 -81.5,81.5 h -65.2 z"/></svg>
|
||||||
|
After Width: | Height: | Size: 514 B |
|
|
@ -0,0 +1 @@
|
||||||
|
<svg data-name="yahoojp" enable-background="new -1 -1 52 52" viewBox="-1 -1 51 26" width="{{ .width }}" height="{{ .height }}" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="m 39.6,4 c -0.7,0.10001 -3.7,0.70001 -4.7,0.89999 -1.1,0.3 -11.3,8.3 -12,10.2 -0.10001,0.60001 0,7.6 0,7.6 l 5.8,0.39999 -0.2,1.9 c -0.8,-0.10001 -6.2,0 -9.6,0 -1.7,0 -6.9,0.20001 -8.7,0.10001 l 0.2,-1.8 C 11.5,23.4 13.2,23.19998 14.2,22.9 15.2,22.60002 16,22.19999 16,21.2 v -6 C 15.60003,14.1 7.1,3.4 4.9,1.7 4.3,1.49998 0,0.99998 -1,0.8 L -0.8,-1 h 19.5 l -0.3,1.7 c -0.89999,0.20001 -5,0.29999 -6.1,0.60001 2.8,4.1 7.2,9.5 8.6,11.5 0.8,-1.1 8.3,-6.4 8.5,-8 C 28.3,4.6 24.8,4.1 24.2,4.1 L 23.9,2.3 h 16.8 z"/><path d="m 36.411,24.683 -2.2025,-0.59015 1.602,-3.587 2.1365,0.79679 2.0992,0.55712 -1.569,3.4837 z m 4.5928,-5.8192 -3.2026,-1.0237 5.3165,-16.633 7.2316,2.3115 -1.4124,2.2813 z"/></svg>
|
||||||
|
After Width: | Height: | Size: 892 B |
|
|
@ -0,0 +1,42 @@
|
||||||
|
<div class="affeliate">
|
||||||
|
<div class="affeliate__imgwrapper">
|
||||||
|
{{ if .Get "img" }}
|
||||||
|
<img data-src="{{ .Get "img" | relURL }}" src="data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='none' d='M0 0h24v24H0V0z'/%3E%3Cpath fill='%23aaa' d='M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-1 16H6c-.55 0-1-.45-1-1V6c0-.55.45-1 1-1h12c.55 0 1 .45 1 1v12c0 .55-.45 1-1 1zm-4.44-6.19l-2.35 3.02-1.56-1.88c-.2-.25-.58-.24-.78.01l-1.74 2.23c-.26.33-.02.81.39.81h8.98c.41 0 .65-.47.4-.8l-2.55-3.39c-.19-.26-.59-.26-.79 0z'/%3E%3C/svg%3E" alt="{{ if .Get "title" }}{{ .Get "title" }}{{ else }}Image{{ end }}" class="lazyload affeliate__image"/>
|
||||||
|
{{ end }}
|
||||||
|
</div>
|
||||||
|
<div class="affeliate__body">
|
||||||
|
<div class="affeliate__body__title">
|
||||||
|
{{ if .Get "title"}}{{ .Get "title" }}{{ end }}
|
||||||
|
</div>
|
||||||
|
<div class="affeliate__body__description">
|
||||||
|
{{ if .Get "description"}}{{ .Get "description" | safeHTML }}{{ end }}
|
||||||
|
</div>
|
||||||
|
<div class="affeliate__icons">
|
||||||
|
{{ if .Get "amazon"}}
|
||||||
|
<a href="{{ .Get "amazon" }}" title="{{ i18n "Amazon" | default "Amazon" }}" aria-label="Amazon Link Button" class="affeliate__item" target="_blank" rel="noreferrer" data-type="affeliate">
|
||||||
|
{{ partial "svgs/affeliate/amazon.svg" (dict "width" 30 "height" 30) }}
|
||||||
|
</a>
|
||||||
|
{{ end }}
|
||||||
|
{{ if .Get "rakuten"}}
|
||||||
|
<a href="{{ .Get "rakuten" }}" title="{{ i18n "Rakuten" | default "Rakuten" }}" aria-label="Rakuten Link Button" class="affeliate__item" target="_blank" rel="noreferrer" data-type="affeliate">
|
||||||
|
{{ partial "svgs/affeliate/rakuten.svg" (dict "width" 30 "height" 30) }}
|
||||||
|
</a>
|
||||||
|
{{ end }}
|
||||||
|
{{ if .Get "yahoojp"}}
|
||||||
|
<a href="{{ .Get "yahoojp" }}" title="{{ i18n "Yahoo Japan" | default "Yahoo! Japan" }}" aria-label="Yahoo! Japan Shopping Link Button" class="affeliate__item" target="_blank" rel="noreferrer" data-type="affeliate">
|
||||||
|
{{ partial "svgs/affeliate/yahoojp.svg" (dict "width" 30 "height" 30) }}
|
||||||
|
</a>
|
||||||
|
{{ end }}
|
||||||
|
{{ if .Get "gmarket"}}
|
||||||
|
<a href="{{ .Get "gmarket" }}" title="{{ i18n "Gmarket" | default "Gmarket" }}" aria-label="Gmarket Link Button" class="affeliate__item" target="_blank" rel="noreferrer" data-type="affeliate">
|
||||||
|
{{ partial "svgs/affeliate/gmarket.svg" (dict "width" 30 "height" 30) }}
|
||||||
|
</a>
|
||||||
|
{{ end }}
|
||||||
|
{{ if .Get "link"}}
|
||||||
|
<a href="{{ .Get "link" }}" title="{{ i18n "Amazon" | default "Amazon" }}" aria-label="Link Button" class="affeliate__item" target="_blank" rel="noreferrer" data-type="affeliate">
|
||||||
|
{{ partial "svgs/affeliate/link.svg" (dict "width" 30 "height" 30) }}
|
||||||
|
</a>
|
||||||
|
{{ end }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
Loading…
Reference in New Issue