This is an automated email from the ASF dual-hosted git repository.
jiafengzheng pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/incubator-doris.git
The following commit(s) were added to refs/heads/master by this push:
new a45bf53af3 [website][doc]fix docs bugs with sidebar can not display
and some style problems (#10039)
a45bf53af3 is described below
commit a45bf53af343d8903015529550baea2e7d57d83a
Author: wangyongfeng <[email protected]>
AuthorDate: Fri Jun 10 08:49:37 2022 +0800
[website][doc]fix docs bugs with sidebar can not display and some style
problems (#10039)
* fix docs bugs with sidebar can not display and some style problems
---
docs/.vuepress/config.js | 4 +-
docs/.vuepress/styles/index.styl | 27 ++++++-----
docs/.vuepress/theme/components/Dropdown.vue | 35 ++++++++------
docs/.vuepress/theme/components/Navbar.vue | 9 +---
docs/.vuepress/theme/layouts/Layout.vue | 69 ++++++++++++++++++----------
docs/en/README.md | 14 +++---
docs/zh-CN/README.md | 6 +--
7 files changed, 93 insertions(+), 71 deletions(-)
diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js
index f81ad745a4..151bb99d75 100755
--- a/docs/.vuepress/config.js
+++ b/docs/.vuepress/config.js
@@ -128,7 +128,7 @@ module.exports = {
icon: "doris doris-xiala",
name: 'blog',
items: [
- { text: "Doris Weekly", link: "/en/categories/DorisWeekly/" },
+ // { text: "Doris Weekly", link: "/en/categories/DorisWeekly/" },
{ text: "Best Practice", link: "/en/categories/PracticalCases/"
},
{ text: "Release Note", link: "/en/categories/ReleaseNote/" },
{
@@ -221,7 +221,7 @@ module.exports = {
icon: "doris doris-xiala",
name: 'blog',
items: [
- { text: "每周通报", link: "/zh-CN/categories/DorisWeekly/" },
+ // { text: "每周通报", link: "/zh-CN/categories/DorisWeekly/" },
{ text: "最佳实践", link: "/zh-CN/categories/PracticalCases/" },
{ text: "版本发布", link: "/zh-CN/categories/ReleaseNote/" },
{
diff --git a/docs/.vuepress/styles/index.styl b/docs/.vuepress/styles/index.styl
index 5bd5e09dd1..0939fceb33 100644
--- a/docs/.vuepress/styles/index.styl
+++ b/docs/.vuepress/styles/index.styl
@@ -145,7 +145,7 @@ div .home-blog .hero {
justify-content: center;
}
.sum{
- font-size: 16px;
+ font-size: 18px;
color: rgba(255,255,255,.5);
line-height: 1.8;
margin: 50px 0 100px;
@@ -167,10 +167,10 @@ div .home-blog .home-blog-wrapper {
border-radius: 50px;
background: #2ca37d;
text-align: center;
- line-height: 50px;
- margin-right: 15px;
+ line-height: 55px;
+ margin-right: 25px;
color: #fff;
- font-size: 14px;
+ font-size: 18px;
vertical-align: middle;
transition: all ease .3s;
position: relative;
@@ -181,11 +181,12 @@ div .home-blog .home-blog-wrapper {
}
.bannerHref a i{
font-size: 22px;
- margin-right: 7px;
+ margin-right: 5px;
position: absolute;
top: 50%;
transform: translateY(-50%);
- left: 50px;
+ left: 45px;
+ padding-top: 4px;
}
.bannerHref a.button1{
background: #2ca37d;
@@ -355,10 +356,12 @@ div .content__default:not(.custom) a:hover {
display: inline-block;
color: #333;
background: #fff;
- padding: 16px 28px;
- border-radius: 25px;
- transition: all ease .3s;
- border-bottom: 5px solid rgba(1, 88, 60, 0);
+ padding: 10px 38px;
+ border-radius: 30px;
+ transition: all ease 0.3s;
+ border-bottom: 5px solid rgba(1,88,60,0);
+ font-size: 18px;
+ padding-top: 15px;
}
.newsleft a:hover{
background: #0c8760;
@@ -411,7 +414,7 @@ div .content__default:not(.custom) a:hover {
text-align: center;
line-height: 50px;
color: #fff;
- font-size: 14px;
+ font-size: 18px;
vertical-align: middle;
display: inline-block;
margin-top: 15px;
@@ -2343,7 +2346,7 @@ main.page .page-title div > i.tags{
width: 100%;
}
.newsleft a {
- padding: 17px 24px 12px;
+ padding: 10px 28px 5px;
}
.appleft, .appright {
flex-direction: column;
diff --git a/docs/.vuepress/theme/components/Dropdown.vue
b/docs/.vuepress/theme/components/Dropdown.vue
index 9410ca417e..6101fe7465 100644
--- a/docs/.vuepress/theme/components/Dropdown.vue
+++ b/docs/.vuepress/theme/components/Dropdown.vue
@@ -16,7 +16,7 @@ specific language governing permissions and limitations
under the License.
-->
<template>
- <div class="dropdown-wrapper" :class="{ open }">
+ <div class="dropdown-wrapper" :class="{ open }" v-show="showVersionNav">
<a class="dropdown-title" @click="toggle" v-if="versions">
<span class="title">
{{ currentItem.text }}
@@ -65,7 +65,8 @@ export default defineComponent({
data () {
return {
subItems: [],
- currentItem: {}
+ currentItem: {},
+ showVersionNav: false
}
},
computed: {
@@ -79,6 +80,7 @@ export default defineComponent({
deep: true,
handler(val) {
this.init(val)
+ this.setShowVersionNav(val)
},
},
currentItem: {
@@ -89,21 +91,23 @@ export default defineComponent({
}
},
methods: {
+ setShowVersionNav (versions) {
+ if (!versions) return false
+ const versionKeys = versions.items.map(v => v.text === 'master' ? 'docs'
: v.text)
+ this.showVersionNav = versionKeys.some(v => this.$route.path.indexOf(v)
> -1)
+ },
init(val) {
if (!val) return
this.subItems = val.items.map((item) => ({ ...item, active: false }));
let currentVersion = "master";
- if (!this.currentItem.text) {
- const versionKeys = this.$themeLocaleConfig.versions.items.map(
- (v) => v.text
- );
- const matchVersion = versionKeys.find(
- (v) => this.$route.path.indexOf(v) > -1
- );
- currentVersion = matchVersion || versionKeys[0];
- } else {
- currentVersion = this.currentItem.text;
- }
+ const versionKeys = val.items.map(
+ (v) => v.text
+ );
+ const matchVersion = versionKeys.find(
+ (v) => this.$route.path.indexOf(v) > -1
+ );
+ console.log(matchVersion, this.currentItem)
+ currentVersion = matchVersion ? matchVersion : (this.currentItem.text ||
versionKeys[0])
const index = this.subItems.findIndex(
(item) => item.text === currentVersion
);
@@ -114,8 +118,8 @@ export default defineComponent({
},
handleClick (item) {
this.subItems.forEach(v => { v.active = item.text === v.text })
- this.currentItem = item
this.$router.push(item.link)
+ this.currentItem = item
},
async fetchData () {
const res = await axios.get('/versions.json')
@@ -125,7 +129,8 @@ export default defineComponent({
const versionItems = res.data[k.replace(/\//gi, "")] || []
this.$site.themeConfig.locales[k].versions.items = versionItems
})
- this.init(this.$themeLocaleConfig.versions)
+ this.init(this.$site.themeConfig.locales[this.$localePath].versions)
+
this.setShowVersionNav(this.$site.themeConfig.locales[this.$localePath].versions)
},
updateVersion(val) {
const versionsValue = this.versions;
diff --git a/docs/.vuepress/theme/components/Navbar.vue
b/docs/.vuepress/theme/components/Navbar.vue
index f8ec0ceaa6..3253dba6a2 100644
--- a/docs/.vuepress/theme/components/Navbar.vue
+++ b/docs/.vuepress/theme/components/Navbar.vue
@@ -33,7 +33,7 @@ under the License.
v-if="$siteTitle">{{ $siteTitle }}</span>
</router-link>
- <div class="dropdown-box" v-show="showVersionNav()">
+ <div class="dropdown-box">
<Dropdown />
</div>
@@ -67,12 +67,7 @@ import NavLink from './NavLink.vue'
export default defineComponent({
components: { SidebarButton, NavLinks, SearchBox, AlgoliaSearchBox, Mode,
Dropdown, NavLink },
methods: {
- showVersionNav () {
- const versions = this.$themeLocaleConfig.versions
- if (!versions) return false
- const versionKeys = versions.items.map(v => v.text === 'master' ? 'docs'
: v.text)
- return versionKeys.some(v => this.$route.path.indexOf(v) > -1)
- }
+
},
setup (props, ctx) {
const instance = useInstance()
diff --git a/docs/.vuepress/theme/layouts/Layout.vue
b/docs/.vuepress/theme/layouts/Layout.vue
index afa1d79b9c..a891528db9 100644
--- a/docs/.vuepress/theme/layouts/Layout.vue
+++ b/docs/.vuepress/theme/layouts/Layout.vue
@@ -16,7 +16,7 @@ specific language governing permissions and limitations
under the License.
-->
<template>
- <Common :sidebarItems="sidebarItems" :showModule="recoShowModule">
+ <Common :sidebarItems="sidebarItems" v-if="renderComponent"
:showModule="recoShowModule">
<component v-if="$frontmatter.home" :is="homeCom"/>
<Page v-else :sidebar-items="sidebarItems"/>
<Footer v-if="$frontmatter.home" class="footer" />
@@ -38,7 +38,7 @@ import axios from "axios"
function convertSidebar(list, path) {
if (list.length > 0) {
list.forEach((element, i) => {
- if (element.children) {
+ if (element.children && element.directoryPath) {
convertSidebar(element.children, path + element.directoryPath);
delete element.directoryPath;
} else {
@@ -53,37 +53,56 @@ function convertSidebar(list, path) {
export default defineComponent({
mixins: [moduleTransitonMixin],
components: { HomeBlog, Home, Page, Common, Footer },
+ data () {
+ return {
+ renderComponent: false
+ }
+ },
+ methods: {
+ forceRerender() {
+ this.renderComponent = false;
+ this.$nextTick(() => {
+ this.renderComponent = true;
+ });
+ },
+ },
setup (props, ctx) {
const instance = useInstance()
-
const fetchData = async () => {
- const res = await axios.get('/versions.json').then(rsp => rsp)
- if (!res || !res.data) return
+ const res = await axios.get('/versions.json').then(rsp => rsp).catch(err
=> {
+ instance.forceRerender()
+ })
+ if (!res || !res.data) {
+ instance.forceRerender()
+ return
+ }
const locales = instance.$site.themeConfig.locales
let sidebar = {}
let versionKeys = []
Object.keys(locales).forEach(k => {
- const versionItems = res.data[k.replace(/\//gi, "")] || []
- versionItems.forEach((item) => {
- const version = item.text;
- const docName = version === "master" ? 'docs' : version
- if (versionKeys.indexOf(docName) === -1) {
- versionKeys.push(docName)
- }
- const path = `${k}${docName}/`;
- sidebar[path] = convertSidebar(
- require(`../../sidebar${k}${docName}.js`),
- path
- );
- });
- const localSidebar = {}
- Object.keys(locales[k].sidebar).forEach(path => {
- if (versionKeys.every(v => path.indexOf(v) === -1)) {
- localSidebar[path] = locales[k].sidebar[path]
- }
- })
- instance.$site.themeConfig.locales[k].sidebar = {...localSidebar,
...sidebar}
+ const versionItems = res.data[k.replace(/\//gi, "")] || []
+ versionItems.forEach((item) => {
+ const version = item.text;
+ const docName = version === "master" ? 'docs' : version
+ if (versionKeys.indexOf(docName) === -1) {
+ versionKeys.push(docName)
+ }
+ const path = `${k}${docName}/`;
+ const sidebarList =
JSON.parse(JSON.stringify(require(`../../sidebar${k}${docName}.js`)))
+ sidebar[path] = convertSidebar(
+ sidebarList,
+ path
+ );
+ });
+ const localSidebar = {}
+ Object.keys(locales[k].sidebar).forEach(path => {
+ if (versionKeys.every(v => path.indexOf(v) === -1)) {
+ localSidebar[path] = locales[k].sidebar[path]
+ }
})
+ instance.$site.themeConfig.locales[k].sidebar = {...localSidebar,
...sidebar}
+ })
+ instance.forceRerender()
}
onMounted(() => {
diff --git a/docs/en/README.md b/docs/en/README.md
index bf4a7bd1a3..08785737fc 100755
--- a/docs/en/README.md
+++ b/docs/en/README.md
@@ -31,8 +31,8 @@ under the License.
<p class="description">Apache Doris</p>
<p class="sum">A fast MPP database for all modern analytics on big
data</p>
<div class="bannerHref">
- <a href="/en/docs/get-starting/get-starting.html"
class="button1">Quick Start</a>
- <a href="https://github.com/apache/incubator-doris"; target="_blank"
class="button2"><i class="doris doris-github-fill"></i>GitHub</a>
+ <a href="/en/docs/get-starting/get-starting.html"
class="button1">QUICK START</a>
+ <a href="https://github.com/apache/incubator-doris"; target="_blank"
class="button2"><i class="doris doris-github-fill"></i>GITHUB</a>
</div>
</div>
<div class="bImg">
@@ -105,7 +105,7 @@ under the License.
<img src="/blog-images/data.png" alt="Data" />
<div class="dim"><img src="/blog-images/data-1.png" alt="Data" /></div>
</div>
- <div class="al wow fadeInUp"><a
href="/en/docs/get-starting/get-starting.html" class="a">Understand
More</a></div>
+ <div class="al wow fadeInUp"><a
href="/en/docs/get-starting/get-starting.html" class="a">Learn More</a></div>
</div>
</div>
</div>
@@ -115,7 +115,7 @@ under the License.
<div class="apptitle">
<p class="t wow fadeInUp">Data Import </p>
<p class="s wow fadeInUp">Apache Doris provides rich data
synchronization methods, supports fast loading of data from localhost, Hadoop,
Flink, Spark, Kafka and other systems.</p>
- <div class="al wow fadeInUp"><a
href="/en/docs/data-operate/import/load-manual.html">Understand More</a></div>
+ <div class="al wow fadeInUp"><a
href="/en/docs/data-operate/import/load-manual.html">Learn More</a></div>
</div>
<div class="appimg wow fadeInUp">
<img src="/blog-images/doris1.png" alt="doris">
@@ -128,7 +128,7 @@ under the License.
<div class="apptitle">
<p class="t wow fadeInUp">Data Access</p>
<p class="s wow fadeInUp">Apache Doris can directly access data in
MySQL, PostgreSQL, Oracle, S3, Hive, Iceberg, Elasticsearch and other systems
without data replication. At the same time, the data stored in Doris can also
be read by Spark and Flink, and can be output to the downstream data
application for display and analysis.</p>
- <div class="al wow fadeInUp"><a
href="/en/docs/ecosystem/external-table/doris-on-es.html">Understand
More</a></div>
+ <div class="al wow fadeInUp"><a
href="/en/docs/ecosystem/external-table/doris-on-es.html">Learn More</a></div>
</div>
<div class="appimg wow fadeInUp">
<img src="/blog-images/doris2.png" alt="doris">
@@ -141,7 +141,7 @@ under the License.
<div class="apptitle">
<p class="t wow fadeInUp">Data Application</p>
<p class="s wow fadeInUp">Apache Doris supports outputting data to
downstream applications through JDBC standard protocol, and also supports
various BI / Client tools to connect Doris through MySQL protocol。Based on
this, Apache Doris can be well applied in many business fields, such as
multi-dimensional reporting, user portrait, ad-hoc query, real-time dashboard
and so on.</p>
- <div class="al wow fadeInUp"><a
href="/en/docs/get-starting/get-starting.html">Understand More</a></div>
+ <div class="al wow fadeInUp"><a
href="/en/docs/get-starting/get-starting.html">Learn More</a></div>
</div>
<div class="appimg wow fadeInUp">
<img src="/blog-images/doris3.png" alt="doris">
@@ -329,7 +329,7 @@ under the License.
<li><a href="https://github.com/apache/incubator-doris";
target="_blank"><img src="/blog-images/fx2.png" alt="Github" /></a></li>
<li><a href="https://twitter.com/doris_apache"; target="_blank"><img
src="/blog-images/fx3.png" alt="Twitter" /></a></li>
<li><a
href="https://join.slack.com/t/apachedoriscommunity/shared_invite/zt-18u6vjopj-Th15vTVfmCzVfhhL5rz26A";
target="_blank"><img src="/blog-images/fx4.png" alt="Slack" /></a></li>
- <li><a
href="https://mp.weixin.qq.com/mp/homepage?__biz=Mzg5MDEyODc1OA==&hid=1&sn=eb2d31c20d5c4fc638b897c764e11195&scene=18";
target="_blank"><img src="/blog-images/fx5.png" alt="WeChart" /></a></li>
+ <!-- <li><a
href="https://mp.weixin.qq.com/mp/homepage?__biz=Mzg5MDEyODc1OA==&hid=1&sn=eb2d31c20d5c4fc638b897c764e11195&scene=18";
target="_blank"><img src="/blog-images/fx5.png" alt="WeChart" /></a></li> -->
<li><a href="https://space.bilibili.com/362350065";
target="_blank"><img src="/blog-images/fx6.png" alt="bilibili" /></a></li>
</ul>
</div>
diff --git a/docs/zh-CN/README.md b/docs/zh-CN/README.md
index 863490fdb5..42dec926a9 100755
--- a/docs/zh-CN/README.md
+++ b/docs/zh-CN/README.md
@@ -29,10 +29,10 @@ under the License.
<div class="bText">
<h1>欢迎使用</h1>
<p class="description">Apache Doris</p>
- <p class="sum">支持对海量大数据进行快速分析的MPP数据库。</p>
+ <p class="sum">现代化的高性能MPP分析型数据库</p>
<div class="bannerHref">
<a href="/zh-CN/docs/get-starting/get-starting.html"
class="button1">快速开始</a>
- <a href="https://github.com/apache/incubator-doris"; target="_blank"
class="button2"><i class="doris doris-github-fill"></i>GitHub</a>
+ <a href="https://github.com/apache/incubator-doris"; target="_blank"
class="button2"><i class="doris doris-github-fill"></i>GITHUB</a>
</div>
</div>
<div class="bImg">
@@ -326,7 +326,7 @@ under the License.
<li><a href="https://github.com/apache/incubator-doris";
target="_blank"><img src="/blog-images/fx2.png" alt="Github" /></a></li>
<li><a href="https://twitter.com/doris_apache"; target="_blank"><img
src="/blog-images/fx3.png" alt="Twitter" /></a></li>
<li><a
href="https://join.slack.com/t/apachedoriscommunity/shared_invite/zt-18u6vjopj-Th15vTVfmCzVfhhL5rz26A";
target="_blank"><img src="/blog-images/fx4.png" alt="Slack" /></a></li>
- <li><a
href="https://mp.weixin.qq.com/mp/homepage?__biz=Mzg5MDEyODc1OA==&hid=1&sn=eb2d31c20d5c4fc638b897c764e11195&scene=18";
target="_blank"><img src="/blog-images/fx5.png" alt="WeChart" /></a></li>
+ <!-- <li><a
href="https://mp.weixin.qq.com/mp/homepage?__biz=Mzg5MDEyODc1OA==&hid=1&sn=eb2d31c20d5c4fc638b897c764e11195&scene=18";
target="_blank"><img src="/blog-images/fx5.png" alt="WeChart" /></a></li> -->
<li><a href="https://space.bilibili.com/362350065";
target="_blank"><img src="/blog-images/fx6.png" alt="bilibili" /></a></li>
</ul>
</div>
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
