mirror of https://github.com/vuejs/vitepress
Kia King Ishii
2 years ago
parent
439f370355
commit
36a67bd67d
@ -0,0 +1,22 @@
|
||||
# Carbon Ads
|
||||
|
||||
VitePress has built in native support for [Carbon Ads](https://www.carbonads.net/). By defining the Carbon Ads credentials in config, VitePress will display ads on the page.
|
||||
|
||||
```js
|
||||
export default {
|
||||
themeConfig: {
|
||||
carbonAds: {
|
||||
code: 'your-carbon-code',
|
||||
placement: 'your-carbon-placement'
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
These values are used to call carbon CDN script as shown below.
|
||||
|
||||
```js
|
||||
`//cdn.carbonads.com/carbon.js?serve=${code}&placement=${placement}`
|
||||
```
|
||||
|
||||
To learn more about Carbon Ads configuration, please visit [Carbon Ads website](https://www.carbonads.net/).
|
||||
@ -0,0 +1,93 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, watch, onMounted } from 'vue'
|
||||
import { useData } from 'vitepress'
|
||||
import { useAside } from '../composables/aside'
|
||||
|
||||
const { theme } = useData()
|
||||
const carbonOptions = theme.value.carbonAds
|
||||
const { isAsideEnabled } = useAside()
|
||||
const container = ref()
|
||||
|
||||
let hasInitalized = false
|
||||
|
||||
function init() {
|
||||
if (!hasInitalized) {
|
||||
hasInitalized = true
|
||||
const s = document.createElement('script')
|
||||
s.id = '_carbonads_js'
|
||||
s.src = `//cdn.carbonads.com/carbon.js?serve=${carbonOptions.code}&placement=${carbonOptions.placement}`
|
||||
s.async = true
|
||||
container.value.appendChild(s)
|
||||
}
|
||||
}
|
||||
|
||||
// no need to account for option changes during dev, we can just
|
||||
// refresh the page
|
||||
if (carbonOptions) {
|
||||
onMounted(() => {
|
||||
// if the page is loaded when aside is active, load carbon directly.
|
||||
// otherwise, only load it if the page resizes to wide enough. this avoids
|
||||
// loading carbon at all on mobile where it's never shown
|
||||
if (isAsideEnabled.value) {
|
||||
init()
|
||||
} else {
|
||||
watch(isAsideEnabled, (wide) => wide && init())
|
||||
}
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="VPCarbonAds" ref="container" />
|
||||
</template>
|
||||
|
||||
<style>
|
||||
.VPCarbonAds {
|
||||
padding: 24px 24px 20px;
|
||||
border-radius: 8px;
|
||||
min-height: 240px;
|
||||
text-align: center;
|
||||
line-height: 18px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
background-color: var(--vp-c-bg-alt);
|
||||
transition: color 0.5s, background-color 0.5s;
|
||||
}
|
||||
|
||||
@media (min-width: 1440px) {
|
||||
.VPCarbonAds {
|
||||
padding: 32px 32px 28px;
|
||||
}
|
||||
}
|
||||
|
||||
.VPCarbonAds img {
|
||||
margin: 0 auto;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.VPCarbonAds .carbon-text {
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
padding-top: 12px;
|
||||
color: var(--vp-c-text-1);
|
||||
transition: color 0.25s;
|
||||
}
|
||||
|
||||
.VPCarbonAds .carbon-text:hover {
|
||||
color: var(--vp-c-brand);
|
||||
}
|
||||
|
||||
.VPCarbonAds .carbon-poweredby {
|
||||
display: block;
|
||||
padding-top: 6px;
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
color: var(--vp-c-text-2);
|
||||
text-transform: uppercase;
|
||||
transition: color 0.25s;
|
||||
}
|
||||
|
||||
.VPCarbonAds .carbon-poweredby:hover {
|
||||
color: var(--vp-c-text-1);
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,20 @@
|
||||
<script setup lang="ts">
|
||||
import { useData } from 'vitepress'
|
||||
import VPDocAsideOutline from './VPDocAsideOutline.vue'
|
||||
import VPDocAsideCarbonAds from './VPDocAsideCarbonAds.vue'
|
||||
|
||||
const { page, theme } = useData()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="VPDocAside">
|
||||
<VPDocAsideOutline v-if="page.headers.length" />
|
||||
<VPDocAsideCarbonAds v-if="theme.carbonAds" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.VPDocAside :deep(.VPDocAsideOutline + .VPDocAsideCarbonAds) {
|
||||
margin-top: 24px;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,13 @@
|
||||
<script setup lang="ts">
|
||||
import { defineAsyncComponent } from 'vue'
|
||||
|
||||
const VPCarbonAds = __ALGOLIA__
|
||||
? defineAsyncComponent(() => import('./VPCarbonAds.vue'))
|
||||
: () => null
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="VPDocAsideCarbonAds">
|
||||
<VPCarbonAds />
|
||||
</div>
|
||||
</template>
|
||||
@ -0,0 +1,21 @@
|
||||
import { computed } from 'vue'
|
||||
import { useMediaQuery } from '@vueuse/core'
|
||||
import { useSidebar } from './sidebar'
|
||||
|
||||
export function useAside() {
|
||||
const { hasSidebar } = useSidebar()
|
||||
const is960 = useMediaQuery('(min-width: 960px)')
|
||||
const is1280 = useMediaQuery('(min-width: 1280px)')
|
||||
|
||||
const isAsideEnabled = computed(() => {
|
||||
if (!is1280.value && !is960.value) {
|
||||
return false
|
||||
}
|
||||
|
||||
return hasSidebar.value ? is1280.value : is960.value
|
||||
})
|
||||
|
||||
return {
|
||||
isAsideEnabled
|
||||
}
|
||||
}
|
||||
Loading…
Reference in new issue