mirror of https://github.com/halo-dev/halo
feat: change the tab title to the site title of the website (#5696)
#### What type of PR is this? /kind feature /area ui /area core /milestone 2.15.x #### What this PR does / why we need it: 将 Console 与 UC 页面的标签页标题改为网站实际标题 #### How to test it? 查看 Console 页面与 UC 页面的标题页标题是否变为网站实际标题 #### Which issue(s) this PR fixes: Fixes #5679 #### Does this PR introduce a user-facing change? ```release-note 将 Console 与 UC 的标签页标题改为网站实际标题 ```pull/5697/head
parent
6ed8cdf5bc
commit
60f113110b
|
@ -85,6 +85,8 @@ public class GlobalInfoEndpoint {
|
||||||
private List<SocialAuthProvider> socialAuthProviders;
|
private List<SocialAuthProvider> socialAuthProviders;
|
||||||
|
|
||||||
private Boolean mustVerifyEmailOnRegistration;
|
private Boolean mustVerifyEmailOnRegistration;
|
||||||
|
|
||||||
|
private String siteTitle;
|
||||||
}
|
}
|
||||||
|
|
||||||
@Data
|
@Data
|
||||||
|
@ -139,6 +141,7 @@ public class GlobalInfoEndpoint {
|
||||||
var basic = SystemSetting.get(configMap, Basic.GROUP, Basic.class);
|
var basic = SystemSetting.get(configMap, Basic.GROUP, Basic.class);
|
||||||
if (basic != null) {
|
if (basic != null) {
|
||||||
info.setFavicon(basic.getFavicon());
|
info.setFavicon(basic.getFavicon());
|
||||||
|
info.setSiteTitle(basic.getTitle());
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { computed, watch } from "vue";
|
import { computed } from "vue";
|
||||||
import LoginForm from "@/components/login/LoginForm.vue";
|
import LoginForm from "@/components/login/LoginForm.vue";
|
||||||
import { useRouteQuery } from "@vueuse/router";
|
import { useRouteQuery } from "@vueuse/router";
|
||||||
import SignupForm from "@/components/signup/SignupForm.vue";
|
import SignupForm from "@/components/signup/SignupForm.vue";
|
||||||
|
@ -32,16 +32,14 @@ function handleChangeType() {
|
||||||
|
|
||||||
const isLoginType = computed(() => type.value !== SIGNUP_TYPE);
|
const isLoginType = computed(() => type.value !== SIGNUP_TYPE);
|
||||||
|
|
||||||
// page title
|
useTitle(
|
||||||
const title = useTitle();
|
computed(() => {
|
||||||
watch(
|
const siteTitle = globalInfo.value?.siteTitle || AppName;
|
||||||
() => type.value,
|
|
||||||
(value) => {
|
|
||||||
const routeTitle = t(
|
const routeTitle = t(
|
||||||
`core.${value === SIGNUP_TYPE ? SIGNUP_TYPE : "login"}.title`
|
`core.${type.value === SIGNUP_TYPE ? SIGNUP_TYPE : "login"}.title`
|
||||||
);
|
);
|
||||||
title.value = [routeTitle, AppName].join(" - ");
|
return [routeTitle, siteTitle].join(" - ");
|
||||||
}
|
})
|
||||||
);
|
);
|
||||||
</script>
|
</script>
|
||||||
<template>
|
<template>
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { RouterView, useRoute } from "vue-router";
|
import { RouterView, useRoute } from "vue-router";
|
||||||
import { computed, watch, reactive, onMounted, inject } from "vue";
|
import { computed, reactive, onMounted, inject } from "vue";
|
||||||
import { useTitle } from "@vueuse/core";
|
import { useTitle } from "@vueuse/core";
|
||||||
import { useFavicon } from "@vueuse/core";
|
import { useFavicon } from "@vueuse/core";
|
||||||
import { useI18n } from "vue-i18n";
|
import { useI18n } from "vue-i18n";
|
||||||
|
@ -12,30 +12,25 @@ import type { FormKitConfig } from "@formkit/core";
|
||||||
import { i18n } from "@/locales";
|
import { i18n } from "@/locales";
|
||||||
import { AppName } from "@/constants/app";
|
import { AppName } from "@/constants/app";
|
||||||
import { useGlobalInfoStore } from "@/stores/global-info";
|
import { useGlobalInfoStore } from "@/stores/global-info";
|
||||||
|
import { storeToRefs } from "pinia";
|
||||||
|
|
||||||
const { t } = useI18n();
|
const { t } = useI18n();
|
||||||
|
|
||||||
const globalInfoStore = useGlobalInfoStore();
|
const { globalInfo } = storeToRefs(useGlobalInfoStore());
|
||||||
|
|
||||||
const route = useRoute();
|
const route = useRoute();
|
||||||
const title = useTitle();
|
useTitle(
|
||||||
|
computed(() => {
|
||||||
watch(
|
|
||||||
() => route.name,
|
|
||||||
() => {
|
|
||||||
const { title: routeTitle } = route.meta;
|
const { title: routeTitle } = route.meta;
|
||||||
if (routeTitle) {
|
const siteTitle = globalInfo.value?.siteTitle || AppName;
|
||||||
title.value = `${t(routeTitle)} - ${AppName}`;
|
return [t(routeTitle || ""), siteTitle].filter(Boolean).join(" - ");
|
||||||
return;
|
})
|
||||||
}
|
|
||||||
title.value = AppName;
|
|
||||||
}
|
|
||||||
);
|
);
|
||||||
|
|
||||||
// Favicon
|
// Favicon
|
||||||
const defaultFavicon = "/console/favicon.ico";
|
const defaultFavicon = "/console/favicon.ico";
|
||||||
const favicon = computed(() => {
|
const favicon = computed(() => {
|
||||||
return globalInfoStore.globalInfo?.favicon || defaultFavicon;
|
return globalInfo.value?.favicon || defaultFavicon;
|
||||||
});
|
});
|
||||||
|
|
||||||
useFavicon(favicon);
|
useFavicon(favicon);
|
||||||
|
|
|
@ -14,6 +14,7 @@ export interface GlobalInfo {
|
||||||
favicon?: string;
|
favicon?: string;
|
||||||
postSlugGenerationStrategy: ModeType;
|
postSlugGenerationStrategy: ModeType;
|
||||||
mustVerifyEmailOnRegistration: boolean;
|
mustVerifyEmailOnRegistration: boolean;
|
||||||
|
siteTitle: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface Info {
|
export interface Info {
|
||||||
|
|
Loading…
Reference in New Issue