[dolphinscheduler-website] branch master updated: [Feature] Add titles. (#879)

[wanggenhua]

This is an automated email from the ASF dual-hosted git repository.

wanggenhua pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/dolphinscheduler-website.git


The following commit(s) were added to refs/heads/master by this push:
     new 0873db03ea [Feature] Add titles. (#879)
0873db03ea is described below

commit 0873db03ea7c62194d4790b459d0d40153903f2b
Author: Amy0104 <wanggen...@apache.org>
AuthorDate: Mon Feb 6 10:55:20 2023 +0800

    [Feature] Add titles. (#879)
---
 public/locales/en-us.json    |  9 ++++++++-
 public/locales/zh-cn.json    |  9 ++++++++-
 src/views/Layout/index.jsx   | 15 ++++++++++++---
 src/views/Layout/useTitle.js | 39 +++++++++++++++++++++++++++++++++++++++
 4 files changed, 67 insertions(+), 5 deletions(-)

diff --git a/public/locales/en-us.json b/public/locales/en-us.json
index 135c18a646..2f4241917f 100644
--- a/public/locales/en-us.json
+++ b/public/locales/en-us.json
@@ -155,5 +155,12 @@
   "source_code_download": "Source code download",
   "binary_download": "Binary download",
   "join_our_slack": "Join our Slack",
-  "contact_emails": " Contact Emails"
+  "contact_emails": " Contact Emails",
+  "documentation_title": "DophinScheduler | DolphinsScheduler Documentation",
+  "community_title": "DophinScheduler | DolphinScheduler Community",
+  "event_title": "DophinScheduler | DolphinScheduler Event",
+  "blog_title": "DophinScheduler | DolphinScheduler Blog",
+  "cases_title": "DophinScheduler | DolphinScheduler Use Cases",
+  "support_title": "DophinScheduler | DolphinScheduler Support",
+  "download_title": "DophinScheduler | DolphinScheduler Download"
 }
diff --git a/public/locales/zh-cn.json b/public/locales/zh-cn.json
index 6a0dce336d..2ff6f0cbfe 100644
--- a/public/locales/zh-cn.json
+++ b/public/locales/zh-cn.json
@@ -154,5 +154,12 @@
   "source_code_download": "源码下载",
   "binary_download": "二进制包下载",
   "join_our_slack": "加入Slack",
-  "contact_emails": "发送邮件"
+  "contact_emails": "发送邮件",
+  "documentation_title": "DophinScheduler | 文档中心",
+  "community_title": "DophinScheduler | 加入社区",
+  "event_title": "DophinScheduler | 社区活动",
+  "blog_title": "DophinScheduler | 技术博客",
+  "cases_title": "DophinScheduler | 用户案例",
+  "support_title": "DophinScheduler | 帮助支持",
+  "download_title": "DophinScheduler | 下载"
 }
diff --git a/src/views/Layout/index.jsx b/src/views/Layout/index.jsx
index 3958e499d0..a90b634969 100644
--- a/src/views/Layout/index.jsx
+++ b/src/views/Layout/index.jsx
@@ -3,8 +3,19 @@ import { useParams, Navigate, Outlet } from "react-router-dom";
 import { NavBar, Footer } from "../../components";
 import { getLanguageCodeFromLS } from "../../utils/getLanguageCodeFromLS";
 import { LocaleContext } from "../../LocaleContext";
+import { useTitle } from "./useTitle";
 import "./index.scss";
 
+const Content = () => {
+  useTitle();
+
+  return (
+    <section className="ds-content">
+      <Outlet />
+    </section>
+  );
+};
+
 const Layout = () => {
   const params = useParams();
   if (params.locale && ["en-us", "zh-cn"].includes(params.locale)) {
@@ -30,9 +41,7 @@ const Layout = () => {
         >
           <NavBar />
           <article className="ds-main" id="ds-scroll-content">
-            <section className="ds-content">
-              <Outlet />
-            </section>
+            <Content />
             <FloatButton.BackTop
               target={() => document.getElementById("ds-scroll-content")}
             />
diff --git a/src/views/Layout/useTitle.js b/src/views/Layout/useTitle.js
new file mode 100644
index 0000000000..f2e1fac2aa
--- /dev/null
+++ b/src/views/Layout/useTitle.js
@@ -0,0 +1,39 @@
+import { useEffect } from "react";
+import { useLocation } from "react-router-dom";
+import { useTranslation } from "../../hooks";
+
+export function useTitle() {
+  const location = useLocation();
+  const { t } = useTranslation();
+
+  useEffect(() => {
+    if (location.pathname.includes("docs")) {
+      document.title = t("documentation_title");
+      return;
+    }
+    if (location.pathname.includes("community")) {
+      document.title = t("community_title");
+      return;
+    }
+    if (location.pathname.includes("events")) {
+      document.title = t("event_title");
+      return;
+    }
+    if (location.pathname.includes("blog")) {
+      document.title = t("blog_title");
+      return;
+    }
+    if (location.pathname.includes("use_case")) {
+      document.title = t("cases_title");
+      return;
+    }
+    if (location.pathname.includes("support")) {
+      document.title = t("support_title");
+      return;
+    }
+    if (location.pathname.includes("download")) {
+      document.title = t("download_title");
+      return;
+    }
+  }, [location, t]);
+}