| <template> |
| <div class="page"> |
| <slot name="top"/> |
| |
| <Content :custom="false"/> |
| |
| <div class="page-nav" v-if="prev || next"> |
| <p class="inner"> |
| <span |
| v-if="prev" |
| class="prev" |
| > |
| ← |
| <router-link |
| v-if="prev" |
| class="prev" |
| :to="prev.path" |
| > |
| {{ prev.title || prev.path }} |
| </router-link> |
| </span> |
| |
| <span |
| v-if="next" |
| class="next" |
| > |
| <router-link |
| v-if="next" |
| :to="next.path" |
| > |
| {{ next.title || next.path }} |
| </router-link> |
| → |
| </span> |
| </p> |
| </div> |
| |
| <div class="page-edit"> |
| <div |
| class="last-updated" |
| v-if="lastUpdated" |
| > |
| <span class="prefix">{{ lastUpdatedText }}: </span> |
| <span class="time">{{ lastUpdated }}</span> |
| </div> |
| |
| <div |
| class="edit-link" |
| v-if="editLink" |
| > |
| <a |
| :href="editLink" |
| target="_blank" |
| rel="noopener noreferrer" |
| >{{ editLinkText }}</a> |
| <OutboundLink/> |
| <a |
| :href="issueLink()" |
| target="_blank" |
| rel="noopener noreferrer" |
| class="issueText" |
| >{{ openIssueText }}</a> |
| <OutboundLink/> |
| </div> |
| |
| <div class="score"> |
| <span class="choice"><img @click="scorePlus" class="score-icon" :src="scoreGood ? 'https://img.alicdn.com/tfs/TB1DOvPqCzqK1RjSZPxXXc4tVXa-20-18.svg' : 'https://img.alicdn.com/tfs/TB1h7TSqpYqK1RjSZLeXXbXppXa-20-18.svg'" />{{ scoreText.good }}</span> |
| <span class="choice"><img @click="scoreMinus" class="score-icon bad" :src="scoreBad ? 'https://img.alicdn.com/tfs/TB1DOvPqCzqK1RjSZPxXXc4tVXa-20-18.svg' : 'https://img.alicdn.com/tfs/TB1h7TSqpYqK1RjSZLeXXbXppXa-20-18.svg'" />{{ scoreText.bad }}</span> |
| </div> |
| </div> |
| |
| <div v-show="isApache" class="license-wrap"> |
| <License /> |
| </div> |
| |
| <slot name="bottom"/> |
| </div> |
| </template> |
| |
| <script> |
| import axios from 'axios'; |
| import qs from 'qs'; |
| import { resolvePage, normalize, outboundRE, endingSlashRE } from './util' |
| import License from './License.vue'; |
| |
| export default { |
| props: ['sidebarItems'], |
| |
| components: { |
| License |
| }, |
| |
| data() { |
| return { |
| scoreGood: false, |
| scoreBad: false, |
| path: '', |
| isApache: window.location.href.indexOf('weex.apache.org') !== -1 |
| } |
| }, |
| |
| watch: { |
| $route() { |
| if (!this.path) { |
| this.path = this.$route.path; |
| } else if (this.path !== this.$route.path) { |
| // console.log(this.$route.path, this.path) |
| this.scoreGood = false; |
| this.scoreBad = false; |
| } |
| } |
| }, |
| |
| computed: { |
| lastUpdated () { |
| if (this.$page.lastUpdated) { |
| return new Date(this.$page.lastUpdated).toLocaleDateString(this.$lang) |
| } |
| }, |
| |
| lastUpdatedText () { |
| if (typeof this.$themeLocaleConfig.lastUpdated === 'string') { |
| return this.$themeLocaleConfig.lastUpdated |
| } |
| if (typeof this.$site.themeConfig.lastUpdated === 'string') { |
| return this.$site.themeConfig.lastUpdated |
| } |
| return 'Last Updated' |
| }, |
| |
| prev () { |
| const prev = this.$page.frontmatter.prev |
| if (prev === false) { |
| return |
| } else if (prev) { |
| return resolvePage(this.$site.pages, prev, this.$route.path) |
| } else { |
| return resolvePrev(this.$page, this.sidebarItems) |
| } |
| }, |
| |
| next () { |
| const next = this.$page.frontmatter.next |
| if (next === false) { |
| return |
| } else if (next) { |
| return resolvePage(this.$site.pages, next, this.$route.path) |
| } else { |
| return resolveNext(this.$page, this.sidebarItems) |
| } |
| }, |
| |
| editLink () { |
| if (this.$page.frontmatter.editLink === false) { |
| return |
| } |
| const { |
| repo, |
| editLinks, |
| docsDir = '', |
| docsBranch = 'master', |
| docsRepo = repo |
| } = this.$site.themeConfig |
| |
| let path = normalize(this.$page.path) |
| if (endingSlashRE.test(path)) { |
| path += 'README.md' |
| } else { |
| path += '.md' |
| } |
| if (docsRepo && editLinks) { |
| return this.createEditLink(repo, docsRepo, docsDir, docsBranch, path) |
| } |
| }, |
| |
| editLinkText () { |
| return ( |
| this.$themeLocaleConfig.editLinkText || |
| this.$site.themeConfig.editLinkText || |
| `Edit this page` |
| ) |
| }, |
| |
| issueLink() { |
| return function() { |
| return `https://github.com/apache/incubator-weex-site/issues/new?body=${encodeURIComponent(location.href)}` |
| } |
| }, |
| |
| openIssueText() { |
| return ( |
| this.$themeLocaleConfig.openIssueText || |
| this.$site.themeConfig.openIssueText || |
| null |
| ) |
| }, |
| |
| scoreText () { |
| return ( |
| this.$themeLocaleConfig.scoreText || |
| this.$site.themeConfig.scoreText || |
| null |
| ) |
| } |
| }, |
| |
| methods: { |
| createEditLink (repo, docsRepo, docsDir, docsBranch, path) { |
| const bitbucket = /bitbucket.org/ |
| if (bitbucket.test(repo)) { |
| const base = outboundRE.test(docsRepo) |
| ? docsRepo |
| : repo |
| return ( |
| base.replace(endingSlashRE, '') + |
| `/${docsBranch}` + |
| (docsDir ? '/' + docsDir.replace(endingSlashRE, '') : '') + |
| path + |
| `?mode=edit&spa=0&at=${docsBranch}&fileviewer=file-view-default` |
| ) |
| } |
| |
| const base = outboundRE.test(docsRepo) |
| ? docsRepo |
| : `https://github.com/${docsRepo}` |
| |
| return ( |
| base.replace(endingSlashRE, '') + |
| `/edit/${docsBranch}` + |
| (docsDir ? '/' + docsDir.replace(endingSlashRE, '') : '') + |
| path |
| ) |
| }, |
| |
| scorePlus () { |
| if (this.scoreGood) return; |
| if (axios) { |
| axios.post(`${this.API_PREFIX}/api/like/islike`, qs.stringify({url: this.$route.path, islike: 1 })).then(() => { |
| this.scoreGood = true; |
| this.scoreBad = false; |
| }).catch(err => console.error(err)) |
| } |
| }, |
| |
| scoreMinus () { |
| if (this.scoreBad) return; |
| if (axios) { |
| axios.post(`${this.API_PREFIX}/api/like/islike`, qs.stringify({url: this.$route.path, islike: 0 })).then(() => { |
| this.scoreGood = false; |
| this.scoreBad = true; |
| }).catch(err => console.error(err)) |
| } |
| } |
| } |
| } |
| |
| function resolvePrev (page, items) { |
| return find(page, items, -1) |
| } |
| |
| function resolveNext (page, items) { |
| return find(page, items, 1) |
| } |
| |
| function find (page, items, offset) { |
| const res = [] |
| items.forEach(item => { |
| if (item.type === 'group') { |
| res.push(...item.children || []) |
| } else { |
| res.push(item) |
| } |
| }) |
| for (let i = 0; i < res.length; i++) { |
| const cur = res[i] |
| if (cur.type === 'page' && cur.path === page.path) { |
| return res[i + offset] |
| } |
| } |
| } |
| </script> |
| |
| <style lang="stylus"> |
| @import './styles/config.styl' |
| @require './styles/wrapper.styl' |
| |
| .page |
| padding-bottom 2rem |
| |
| .page-edit |
| @extend $wrapper |
| padding-top 1rem |
| padding-bottom 1rem |
| overflow auto |
| .edit-link |
| margin-left 1rem |
| display inline-block |
| a |
| color #606273 |
| margin-right 0.25rem |
| text-decoration underline |
| font-style italic |
| font-size 14px |
| .issueText |
| margin-left 16px |
| .last-updated |
| font-size 14px |
| display inline-block |
| .prefix |
| font-weight 500 |
| color #373D41 |
| .time |
| font-weight 400 |
| color #373D41 |
| .score |
| float right |
| display flex |
| font-size 14px |
| color #8A94AC |
| .choice |
| margin-left 1rem |
| display flex |
| align-items center |
| .score-icon |
| margin-right 0.3rem |
| cursor pointer |
| .bad |
| transform rotate(180deg) |
| position relative |
| top 2px |
| |
| .page-nav |
| @extend $wrapper |
| padding-top 1rem |
| padding-bottom 0 |
| .inner |
| min-height 2rem |
| margin-top 0 |
| margin-bottom 0 |
| border-bottom 1px solid $borderColor |
| overflow auto // clear float |
| .next |
| float right |
| |
| .license-wrap |
| margin-top 3rem |
| margin-left 11rem |
| margin-right -4rem |
| |
| @media (max-width: $MQMobile) |
| .license-wrap |
| margin-left 0 |
| margin-right 0 |
| .page-edit |
| margin-left 0 |
| .page-nav |
| margin-left 0 |
| .edit-link |
| margin-bottom .5rem |
| .last-updated |
| font-size .8em |
| float none |
| text-align left |
| |
| </style> |
