feat(layout): add adsense widget
This commit is contained in:
ppoffice
parent
dd09bbe55b
commit
ea66ff939d
|
|
@ -106,5 +106,5 @@ dist
|
|||
# Stores VSCode versions used for testing VSCode extensions
|
||||
.vscode-test
|
||||
|
||||
_config.yml*
|
||||
_config*.yml*
|
||||
yarn.lock
|
||||
|
|
|
|||
|
|
@ -36,6 +36,9 @@
|
|||
},
|
||||
{
|
||||
"$ref": "/widget/subscribe_email.json"
|
||||
},
|
||||
{
|
||||
"$ref": "/widget/adsense.json"
|
||||
}
|
||||
],
|
||||
"required": [
|
||||
|
|
|
|||
|
|
@ -0,0 +1,25 @@
|
|||
{
|
||||
"$schema": "http://json-schema.org/draft-07/schema#",
|
||||
"$id": "/widget/adsense.json",
|
||||
"description": "Google AdSense unit configurations",
|
||||
"type": "object",
|
||||
"properties": {
|
||||
"type": {
|
||||
"type": "string",
|
||||
"const": "adsense"
|
||||
},
|
||||
"client_id": {
|
||||
"type": "string",
|
||||
"description": "AdSense client ID"
|
||||
},
|
||||
"slot_id": {
|
||||
"type": "string",
|
||||
"description": "AdSense AD unit ID"
|
||||
}
|
||||
},
|
||||
"required": [
|
||||
"type",
|
||||
"client_id",
|
||||
"slot_id"
|
||||
]
|
||||
}
|
||||
|
|
@ -19,9 +19,9 @@ widget:
|
|||
links: 'Links'
|
||||
tag_cloud: 'Tag Cloud'
|
||||
catalogue: 'Catalogue'
|
||||
email:
|
||||
title: 'Subscribe Email'
|
||||
button: 'Subscribe'
|
||||
subscribe_email: 'Subscribe to Updates'
|
||||
subscribe: 'Subscribe'
|
||||
adsense: 'Advertisement'
|
||||
article:
|
||||
more: 'Read More'
|
||||
comments: 'Comments'
|
||||
|
|
|
|||
|
|
@ -19,6 +19,9 @@ widget:
|
|||
links: '链接'
|
||||
tag_cloud: '标签云'
|
||||
catalogue: '目录'
|
||||
subscribe_email: '订阅更新'
|
||||
subscribe: '订阅'
|
||||
adsense: '广告'
|
||||
article:
|
||||
more: '阅读更多'
|
||||
comments: '评论'
|
||||
|
|
|
|||
|
|
@ -19,9 +19,8 @@ widget:
|
|||
links: '連結'
|
||||
tag_cloud: '標籤雲'
|
||||
catalogue: '文章目錄'
|
||||
email:
|
||||
title: '訂閱 Email'
|
||||
button: '訂閱'
|
||||
subscribe_email: '訂閱 Email'
|
||||
subscribe: '訂閱'
|
||||
article:
|
||||
more: '繼續閱讀'
|
||||
comments: '評論'
|
||||
|
|
|
|||
|
|
@ -73,6 +73,11 @@ module.exports = class extends Component {
|
|||
images = [url_for('/img/og_image.png')];
|
||||
}
|
||||
|
||||
let adsenseClientId = null;
|
||||
if (Array.isArray(config.widgets)) {
|
||||
adsenseClientId = config.widgets.find(widget => widget.type === 'adsense').client_id;
|
||||
}
|
||||
|
||||
return <head>
|
||||
<meta charset="utf-8" />
|
||||
{meta_generator ? <meta name="generator" content={`Hexo ${env.version}`} /> : null}
|
||||
|
|
@ -109,6 +114,9 @@ module.exports = class extends Component {
|
|||
{hlTheme ? <link rel="stylesheet" href={cdn('highlight.js', '9.12.0', 'styles/' + hlTheme + '.css')} /> : null}
|
||||
<Plugins site={site} config={config} helper={helper} page={page} head={true} />
|
||||
<link rel="stylesheet" href={url_for('/css/style.css')} />
|
||||
|
||||
{adsenseClientId ? <script data-ad-client={adsenseClientId}
|
||||
src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js" async={true}></script> : null}
|
||||
</head>;
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -0,0 +1,41 @@
|
|||
const { Component } = require('inferno');
|
||||
const { cacheComponent } = require('../util/cache');
|
||||
|
||||
class AdSense extends Component {
|
||||
render() {
|
||||
const { title, clientId, slotId } = this.props;
|
||||
if (!clientId || !slotId) {
|
||||
return <div class="card widget">
|
||||
<div class="card-content">
|
||||
<div class="notification is-danger">
|
||||
You need to set <code>client_id</code> and <code>slot_id</code> to show this AD unit.
|
||||
Please set it in <code>_config.yml</code>.
|
||||
</div>
|
||||
</div>
|
||||
</div>;
|
||||
}
|
||||
return <div class="card widget">
|
||||
<div class="card-content">
|
||||
<div class="menu">
|
||||
<h3 class="menu-label">{title}</h3>
|
||||
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
|
||||
<ins class="adsbygoogle"
|
||||
data-ad-client={clientId}
|
||||
data-ad-slot={slotId}></ins>
|
||||
<script dangerouslySetInnerHTML={{ __html: '(adsbygoogle = window.adsbygoogle || []).push({});' }}></script>
|
||||
</div>
|
||||
</div>
|
||||
</div>;
|
||||
}
|
||||
}
|
||||
|
||||
module.exports = cacheComponent(AdSense, 'widget.adsense', props => {
|
||||
const { widget, helper } = props;
|
||||
const { client_id, slot_id } = widget;
|
||||
|
||||
return {
|
||||
title: helper.__('widget.adsense'),
|
||||
clientId: client_id,
|
||||
slotId: slot_id
|
||||
}
|
||||
});
|
||||
|
|
@ -9,27 +9,23 @@ class SubscribeEmail extends Component {
|
|||
<div class="card-content">
|
||||
<div class="menu">
|
||||
<h3 class="menu-label">{title}</h3>
|
||||
<div>
|
||||
<form action="https://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow"
|
||||
onsubmit={`window.open('https://feedburner.google.com/fb/a/mailverify?uri=${feedburnerId}','popupwindow','scrollbars=yes,width=550,height=520');return true`}>
|
||||
<input type="hidden" value={feedburnerId} name="uri" />
|
||||
<input type="hidden" name="loc" value="en_US" />
|
||||
<div class="field">
|
||||
<div class="control has-icons-left">
|
||||
<input class="input" name="email" type="email" />
|
||||
<span class="icon is-small is-left">
|
||||
<i class="fas fa-envelope"></i>
|
||||
</span>
|
||||
</div>
|
||||
<p class="help">{description}</p>
|
||||
<form action="https://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow"
|
||||
onsubmit={`window.open('https://feedburner.google.com/fb/a/mailverify?uri=${feedburnerId}','popupwindow','scrollbars=yes,width=550,height=520');return true`}>
|
||||
<input type="hidden" value={feedburnerId} name="uri" />
|
||||
<input type="hidden" name="loc" value="en_US" />
|
||||
<div class="field has-addons">
|
||||
<div class="control has-icons-left">
|
||||
<input class="input" name="email" type="email" placeholder="Email" />
|
||||
<span class="icon is-small is-left">
|
||||
<i class="fas fa-envelope"></i>
|
||||
</span>
|
||||
</div>
|
||||
<div class="field is-grouped is-grouped-right">
|
||||
<div class="control">
|
||||
<input class="button is-link" type="submit" value={buttonTitle} />
|
||||
</div>
|
||||
<div class="control">
|
||||
<input class="button is-link" type="submit" value={buttonTitle} />
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
{description ? <p class="help">{description}</p> : null}
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>;
|
||||
|
|
@ -43,7 +39,7 @@ module.exports = cacheComponent(SubscribeEmail, 'widget.subscribeemail', props =
|
|||
return {
|
||||
description,
|
||||
feedburnerId: feedburner_id,
|
||||
title: helper.__('widget.email.title'),
|
||||
buttonTitle: helper.__('widget.email.button')
|
||||
title: helper.__('widget.subscribe_email'),
|
||||
buttonTitle: helper.__('widget.subscribe')
|
||||
};
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in New Issue