mirror of https://github.com/vuejs/vitepress
Kia King Ishii
3 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