You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@doris.apache.org by ji...@apache.org on 2022/06/10 00:49:45 UTC
[incubator-doris] branch master updated: [website][doc]fix docs bugs with sidebar can not display and some style problems (#10039)
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 <94...@qq.com>
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: commits-unsubscribe@doris.apache.org
For additional commands, e-mail: commits-help@doris.apache.org