提交 c58b35bd 编写于 作者: hbcui1984's avatar hbcui1984

Merge branch 'vuepress' of https://github.com/dcloudio/unidocs-zh into vuepress

...@@ -31,11 +31,11 @@ const config = { ...@@ -31,11 +31,11 @@ const config = {
editLinks: true, editLinks: true,
editLinkText: '帮助我们改善此页面!', editLinkText: '帮助我们改善此页面!',
// smoothScroll: true, // smoothScroll: true,
algolia: { /* algolia: {
apiKey: 'ca67b01d14df58783e2f7dc45c79736e', apiKey: 'ca67b01d14df58783e2f7dc45c79736e',
indexName: 'en-uniapp-dcloud', indexName: 'en-uniapp-dcloud',
appId: 'TZ0EGQ9J1Y' appId: 'TZ0EGQ9J1Y'
} } */
}, },
markdown: { markdown: {
slugify(str) { slugify(str) {
......
...@@ -56,6 +56,7 @@ ...@@ -56,6 +56,7 @@
'max-width': linksWrapMaxWidth + 'px' 'max-width': linksWrapMaxWidth + 'px'
} : {}" } : {}"
> >
<a class="switch-version" href="javascript:void(0)" @click="switchVersion">回到旧版</a>
<AlgoliaSearchBox <AlgoliaSearchBox
v-if="isAlgoliaSearch" v-if="isAlgoliaSearch"
:options="algolia" :options="algolia"
...@@ -77,7 +78,7 @@ ...@@ -77,7 +78,7 @@
<script> <script>
import AlgoliaSearchBox from '@AlgoliaSearchBox' import AlgoliaSearchBox from '@AlgoliaSearchBox'
import SearchBox from '@SearchBox' import SearchBox from './SearchBox'
import SidebarButton from '@theme/components/SidebarButton.vue' import SidebarButton from '@theme/components/SidebarButton.vue'
import NavLinks from '@theme/components/NavLinks.vue' import NavLinks from '@theme/components/NavLinks.vue'
import MainNavbarLink from './MainNavbarLink.vue'; import MainNavbarLink from './MainNavbarLink.vue';
...@@ -186,6 +187,10 @@ export default { ...@@ -186,6 +187,10 @@ export default {
toggleMobilePanel () { toggleMobilePanel () {
this.showMobilePanel = !this.showMobilePanel this.showMobilePanel = !this.showMobilePanel
forbidScroll(this.showMobilePanel) forbidScroll(this.showMobilePanel)
},
switchVersion () {
document.cookie = '__new_version=;expires=-1'
location.reload()
} }
}, },
......
<template>
<div class="search-box">
<input
ref="input"
aria-label="Search"
:value="query"
:class="{ focused: focused }"
:placeholder="placeholder"
class="custom-search"
autocomplete="off"
spellcheck="false"
@input="query = $event.target.value"
@focus="focused = true"
@blur="focused = true"
@keyup.enter="go(focusIndex)"
@keyup.up="onUp"
@keyup.down="onDown"
/>
<ul
v-if="showSuggestions"
class="suggestions"
:class="{ 'align-right': alignRight }"
style="z-index: 1"
@mouseleave="unfocus"
>
<li
v-for="(s, i) in suggestions"
:key="i"
class="suggestion"
:class="{ focused: i === focusIndex }"
@mousedown="go(i)"
@mouseenter="focus(i)"
>
<a :href="s.path" @click.prevent>
<div class="suggestion-item">
<span class="page-title">{{ s.title || 'Document' }}</span>
<span v-if="s.header" class="header">{{ s.header.title }}</span>
</div>
</a>
</li>
</ul>
</div>
</template>
<script>
import matchQuery from './match-query';
/* global SEARCH_MAX_SUGGESTIONS, SEARCH_PATHS, SEARCH_HOTKEYS */
export default {
name: 'SearchBox',
data() {
return {
query: '',
focused: false,
focusIndex: 0,
placeholder: undefined,
SEARCH_PATHS: null,
SEARCH_HOTKEYS: ['s', '/'],
SEARCH_MAX_SUGGESTIONS: 5,
};
},
computed: {
showSuggestions() {
return this.focused && this.suggestions && this.suggestions.length;
},
suggestions() {
const query = this.query.trim().toLowerCase();
if (!query) {
return;
}
const { pages } = this.$site;
const max = this.$site.themeConfig.searchMaxSuggestions || this.SEARCH_MAX_SUGGESTIONS;
const localePath = this.$localePath;
const res = [];
for (let i = 0; i < pages.length; i++) {
if (res.length >= max) break;
const p = pages[i];
// filter out results that do not match current locale
if (this.getPageLocalePath(p) !== localePath) {
continue;
}
// filter out results that do not match searchable paths
if (!this.isSearchable(p)) {
continue;
}
if (matchQuery(query, p)) {
res.push(p);
} else if (p.headers) {
for (let j = 0; j < p.headers.length; j++) {
if (res.length >= max) break;
const h = p.headers[j];
if (h.title && matchQuery(query, p, h.title)) {
res.push(
Object.assign({}, p, {
path: p.path + '#' + h.slug,
header: h,
})
);
}
}
}
}
return res;
},
// make suggestions align right when there are not enough items
alignRight() {
const navCount = (this.$site.themeConfig.nav || []).length;
const repo = this.$site.repo ? 1 : 0;
return navCount + repo <= 2;
},
},
mounted() {
this.placeholder = this.$site.themeConfig.searchPlaceholder || '';
document.addEventListener('keydown', this.onHotkey);
},
beforeDestroy() {
document.removeEventListener('keydown', this.onHotkey);
},
methods: {
getPageLocalePath(page) {
for (const localePath in this.$site.locales || {}) {
if (localePath !== '/' && page.path.indexOf(localePath) === 0) {
return localePath;
}
}
return '/';
},
isSearchable(page) {
let searchPaths = this.SEARCH_PATHS;
// all paths searchables
if (searchPaths === null) {
return true;
}
searchPaths = Array.isArray(searchPaths) ? searchPaths : new Array(searchPaths);
return (
searchPaths.filter(path => {
return page.path.match(path);
}).length > 0
);
},
onHotkey(event) {
if (event.srcElement === document.body && this.SEARCH_HOTKEYS.includes(event.key)) {
this.$refs.input.focus();
event.preventDefault();
}
},
onUp() {
if (this.showSuggestions) {
if (this.focusIndex > 0) {
this.focusIndex--;
} else {
this.focusIndex = this.suggestions.length - 1;
}
}
},
onDown() {
if (this.showSuggestions) {
if (this.focusIndex < this.suggestions.length - 1) {
this.focusIndex++;
} else {
this.focusIndex = 0;
}
}
},
go(i) {
if (!this.showSuggestions) {
return;
}
this.$router.push(this.suggestions[i].path);
this.query = '';
this.focusIndex = 0;
},
focus(i) {
this.focusIndex = i;
},
unfocus() {
this.focusIndex = -1;
},
},
};
</script>
<style lang="stylus">
.search-box
display inline-block
position relative
margin-right 1rem
input
cursor text
width 10rem
height: 2rem
color lighten($textColor, 25%)
display inline-block
border 1px solid darken($borderColor, 10%)
border-radius 2rem
font-size 0.9rem
line-height 2rem
padding 0 0.5rem 0 2rem
outline none
transition all .2s ease
background #fff url(search.svg) 0.6rem 0.5rem no-repeat
background-size 1rem
&:focus
cursor auto
border-color $accentColor
.suggestions
background #fff
width 20rem
position absolute
top 2 rem
border 1px solid darken($borderColor, 10%)
border-radius 6px
padding 0.4rem
list-style-type none
&.align-right
right 0
.suggestion
line-height 1.4
padding 0.4rem 0.6rem
border-radius 4px
cursor pointer
a
white-space normal
color lighten($textColor, 35%)
.page-title
font-weight 600
.header
font-size 0.9em
margin-left 0.25em
&.focused
background-color #f3f4f5
a
color $accentColor
@media (max-width: $MQNarrow)
.search-box
input
cursor pointer
width 0
border-color transparent
position relative
&:focus
cursor text
left 0
width 10rem
// Match IE11
@media all and (-ms-high-contrast: none)
.search-box input
height 2rem
@media (max-width: $MQNarrow) and (min-width: $MQMobile)
.search-box
.suggestions
left 0
@media (max-width: $MQMobile)
.search-box
margin-right 0
input
left 1rem
.suggestions
right 0
@media (max-width: $MQMobileNarrow)
.search-box
.suggestions
width calc(100vw - 4rem)
input:focus
width 8rem
// by Lxh
.search-box
.suggestions
width 30rem
.suggestion
$li-border-color = #f0f0f0
border 1px solid $li-border-color
border-radius 0
padding 0
&:not(:last-child)
border-bottom none
&:first-child
border-top-left-radius 6px
border-top-right-radius 6px
&:last-child
border-bottom 1px solid $li-border-color
border-bottom-left-radius 6px
border-bottom-right-radius 6px
a
width 100%
.suggestion-item
width 100%
display flex
.page-title
flex 1
width 9rem
background-color #f7f7f7
padding 10px
display flex
flex-direction column
justify-content center
text-align center
word-break break-all
.header
flex 2
padding-left 20px
display flex
flex-direction column
justify-content center
text-align left
</style>
import get from 'lodash/get'
export default (query, page, additionalStr = null) => {
let domain = get(page, 'title', '')
if (get(page, 'frontmatter.tags')) {
domain += ` ${page.frontmatter.tags.join(' ')}`
}
if (additionalStr) {
domain += ` ${additionalStr}`
}
return matchTest(query, domain)
}
const matchTest = (query, domain) => {
const escapeRegExp = str => str.replace(/[-/\\^$*+?.()|[\]{}]/g, '\\$&')
// eslint-disable-next-line no-control-regex
const nonASCIIRegExp = new RegExp('[^\x00-\x7F]')
const words = query
.split(/\s+/g)
.map(str => str.trim())
.filter(str => !!str)
if (!nonASCIIRegExp.test(query)) {
// if the query only has ASCII chars, treat as English
const hasTrailingSpace = query.endsWith(' ')
const searchRegex = new RegExp(
words
.map((word, index) => {
if (words.length === index + 1 && !hasTrailingSpace) {
// The last word - ok with the word being "startswith"-like
return `(?=.*\\b${escapeRegExp(word)})`
} else {
// Not the last word - expect the whole word exactly
return `(?=.*\\b${escapeRegExp(word)}\\b)`
}
})
.join('') + '.+',
'gi'
)
return searchRegex.test(domain)
} else {
// if the query has non-ASCII chars, treat as other languages
return words.some(word => domain.toLowerCase().indexOf(word) > -1)
}
}
<?xml version="1.0" encoding="UTF-8"?><svg xmlns="http://www.w3.org/2000/svg" width="12" height="13"><g stroke-width="2" stroke="#aaa" fill="none"><path d="M11.29 11.71l-4-4"/><circle cx="5" cy="5" r="4"/></g></svg>
...@@ -49,7 +49,7 @@ export default { ...@@ -49,7 +49,7 @@ export default {
watch: { watch: {
$route(after) { $route(after) {
let navbarIndex = this.customNavBarKeys.indexOf((after.fullPath.match(/\/(\w+)+\/*/) || [])[1]) let navbarIndex = this.customNavBarKeys.indexOf((after.fullPath.match(/\/(\w+)+\/*/) || [])[1])
navbarIndex === -1 && after.fullPath === '/' && (navbarIndex = 0) navbarIndex === -1 && (navbarIndex = 0)
this.navConfig.userNavIndex !== navbarIndex && navbarIndex !== -1 && (this.navConfig.userNavIndex = navbarIndex) this.navConfig.userNavIndex !== navbarIndex && navbarIndex !== -1 && (this.navConfig.userNavIndex = navbarIndex)
} }
} }
......
...@@ -70,6 +70,12 @@ $navbar-logo-height = $navbar-main-navbar-height - 2rem ...@@ -70,6 +70,12 @@ $navbar-logo-height = $navbar-main-navbar-height - 2rem
bottom 0 bottom 0
opacity 0 opacity 0
transform scaleX(0) transform scaleX(0)
.switch-version
padding-right 20px
text-decoration underline
color inherit
&:hover
color $accentColor
@media (max-width: $MQMobile) @media (max-width: $MQMobile)
$navbar-a-color = #222; $navbar-a-color = #222;
......
...@@ -326,7 +326,7 @@ yarn build:mp-360 ...@@ -326,7 +326,7 @@ yarn build:mp-360
yarn dev:mp-360 yarn dev:mp-360
# 监听文件变化且启用压缩 # 监听文件变化且启用压缩
yarn cross-env NODE_ENV=production UNI_PLATFORM=mp-360 vue-cli-service uni-build --watch yarn build:mp-360 --watch
``` ```
可以自定义更多条件编译平台,比如钉钉小程序,参考[package.json 文档](https://uniapp.dcloud.io/collocation/package) 可以自定义更多条件编译平台,比如钉钉小程序,参考[package.json 文档](https://uniapp.dcloud.io/collocation/package)
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册