Skip to content

Commit b8a6d60

Browse files
posvaposva
committed
docs: add custom theme for ads
1 parent e52d648 commit b8a6d60

File tree

5 files changed

+218
-1
lines changed

5 files changed

+218
-1
lines changed

‎docs/.vuepress/config.js

+5-1
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,7 @@ module.exports = ctx => ({
5353
}
5454
]
5555
],
56-
theme: '@vuepress/vue',
56+
// theme: '@vuepress/vue',
5757
plugins: [
5858
[
5959
'@vuepress/pwa',
@@ -70,6 +70,10 @@ module.exports = ctx => ({
7070
indexName: 'vue-router'
7171
}
7272
: null,
73+
carbonAds: {
74+
serve: 'CEBICK3I',
75+
placement: 'routervuejsorg'
76+
},
7377
repo: 'vuejs/vue-router',
7478
docsDir: 'docs',
7579
smoothScroll: true,

‎docs/.vuepress/theme/Layout.vue

+36
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
<template>
2+
<ParentLayout>
3+
<template #sidebar-top>
4+
<CarbonAds
5+
v-if="$site.themeConfig.carbonAds"
6+
:key="$page.path"
7+
:serve="$site.themeConfig.carbonAds.serve"
8+
:placement="$site.themeConfig.carbonAds.placement"
9+
/>
10+
</template>
11+
<template #page-bottom>
12+
<BuySellAds
13+
v-if="$site.themeConfig.carbonAds"
14+
:key="$page.path"
15+
:serve="$site.themeConfig.carbonAds.serve"
16+
:placement="$site.themeConfig.carbonAds.placement"
17+
/>
18+
</template>
19+
</ParentLayout>
20+
</template>
21+
22+
<script>
23+
import ParentLayout from '@parent-theme/layouts/Layout.vue'
24+
import CarbonAds from './components/CarbonAds.vue'
25+
import BuySellAds from './components/BuySellAds.vue'
26+
27+
export default {
28+
name: 'Layout',
29+
30+
components: {
31+
ParentLayout,
32+
CarbonAds,
33+
BuySellAds
34+
}
35+
}
36+
</script>

‎docs/.vuepress/theme/components/BuySellAds.vue

+110
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,110 @@
1+
<template>
2+
<div class="bsa-cpc-wrapper">
3+
<div class="bsa-cpc"></div>
4+
</div>
5+
</template>
6+
7+
<script>
8+
/* global _bsa */
9+
const ID = 'bsa-cpc-script'
10+
11+
export default {
12+
name: 'BuySellAds',
13+
props: {
14+
serve: {
15+
type: String,
16+
required: true
17+
},
18+
placement: {
19+
type: String,
20+
required: true
21+
}
22+
},
23+
24+
methods: {
25+
load() {
26+
if (typeof _bsa !== 'undefined' && _bsa) {
27+
_bsa.init('default', this.serve, `placement:${this.placement}`, {
28+
target: '.bsa-cpc',
29+
align: 'horizontal',
30+
disable_css: 'true'
31+
})
32+
}
33+
}
34+
},
35+
36+
mounted() {
37+
if (!document.getElementById(ID)) {
38+
const s = document.createElement('script')
39+
s.id = ID
40+
s.src = `//m.servedby-buysellads.com/monetization.js`
41+
document.head.appendChild(s)
42+
s.onload = () => {
43+
this.load()
44+
}
45+
} else {
46+
this.load()
47+
}
48+
}
49+
}
50+
</script>
51+
52+
<style>
53+
.bsa-cpc-wrapper {
54+
font-size: 0.95rem;
55+
/* from Page.vue */
56+
max-width: 50rem;
57+
margin: 0px auto;
58+
padding: 1rem 2rem 0;
59+
margin-bottom: -1rem;
60+
}
61+
@media (max-width: 419px) {
62+
.bsa-cpc-wrapper {
63+
padding: 0 1.5rem;
64+
}
65+
}
66+
.bsa-cpc {
67+
font-size: 0.9em;
68+
background-color: #f8f8f8;
69+
border-radius: 6px;
70+
}
71+
.bsa-cpc a._default_ {
72+
text-align: left;
73+
display: block;
74+
text-decoration: none;
75+
padding: 10px 15px 12px;
76+
margin-bottom: 20px;
77+
color: #666;
78+
font-weight: 400;
79+
line-height: 18px;
80+
}
81+
.bsa-cpc a._default_ .default-image img {
82+
height: 20px;
83+
border-radius: 3px;
84+
vertical-align: middle;
85+
position: relative;
86+
top: -1px;
87+
}
88+
.bsa-cpc a._default_ .default-title {
89+
font-weight: 600;
90+
}
91+
.bsa-cpc a._default_ .default-description:after {
92+
font-size: 0.85em;
93+
content: 'Sponsored';
94+
color: #1c90f3;
95+
border: 1px solid #1c90f3;
96+
border-radius: 3px;
97+
padding: 0 4px 1px;
98+
margin-left: 6px;
99+
}
100+
.bsa-cpc .default-ad {
101+
display: none;
102+
}
103+
.bsa-cpc a._default_ .default-image,
104+
.bsa-cpc a._default_ .default-title,
105+
.bsa-cpc a._default_ .default-description {
106+
display: inline;
107+
vertical-align: middle;
108+
margin-right: 6px;
109+
}
110+
</style>

‎docs/.vuepress/theme/components/CarbonAds.vue

+64
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
<template>
2+
<div class="carbon-ads"></div>
3+
</template>
4+
5+
<script>
6+
export default {
7+
name: 'CarbonAds',
8+
props: {
9+
serve: {
10+
type: String,
11+
required: true
12+
},
13+
placement: {
14+
type: String,
15+
required: true
16+
}
17+
},
18+
19+
mounted() {
20+
const s = document.createElement('script')
21+
s.id = '_carbonads_js'
22+
s.src = `//cdn.carbonads.com/carbon.js?serve=${this.serve}&placement=${this.placement}`
23+
this.$el.appendChild(s)
24+
}
25+
}
26+
</script>
27+
28+
<style>
29+
.carbon-ads {
30+
min-height: 102px;
31+
padding: 1.5rem 1.5rem 0;
32+
margin-bottom: -0.5rem;
33+
font-size: 0.75rem;
34+
}
35+
36+
.carbon-ads a {
37+
color: #444;
38+
font-weight: normal;
39+
display: inline;
40+
}
41+
42+
.carbon-ads .carbon-img {
43+
float: left;
44+
margin-right: 1rem;
45+
border: 1px solid var(--border-color);
46+
}
47+
48+
.carbon-ads .carbon-img img {
49+
display: block;
50+
}
51+
52+
.carbon-ads .carbon-poweredby {
53+
color: #999;
54+
display: block;
55+
margin-top: 0.5em;
56+
}
57+
58+
@media (max-width: 719px) {
59+
.carbon-ads .carbon-img img {
60+
width: 100px;
61+
height: 77px;
62+
}
63+
}
64+
</style>

‎docs/.vuepress/theme/index.js

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
module.exports = {
2+
extend: '@vuepress/theme-default'
3+
}

0 commit comments

Comments
 (0)