mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-14 16:19:15 +08:00
d2ef1198f5
* feat: 优化暗色主题模式下刷新白屏且延迟切换的问题，优化主题路由自动切换逻辑 * feat: 添加系统主题color-scheme, 在暗色模式下滚动条等系统控件也变为暗色主题 * feat: remove logic about localstorage theme, query theme from url search
194 lines
7.0 KiB
HTML
194 lines
7.0 KiB
HTML
<!DOCTYPE html>
|
||
<html {{ htmlAttributes | safe }}>
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
<title>{% if title %}{{ title | safe }}{% else %}{% endif %}</title>
|
||
{% if meta %}{{ meta | safe }}{% endif %}
|
||
<link
|
||
rel="icon"
|
||
href="https://gw.alipayobjects.com/zos/rmsportal/rlpTLlbMzTNYuZGGCVYM.png"
|
||
type="image/x-icon"
|
||
/>
|
||
{% for cssFile in manifest["css"] %}
|
||
<link rel="stylesheet" type="text/css" href="{{ root }}{{ cssFile }}" />
|
||
{% endfor %}
|
||
<style id="nprogress-style">
|
||
#nprogress {
|
||
display: none;
|
||
}
|
||
</style>
|
||
<link rel="stylesheet/less" type="text/css" href="{{ root }}color.less" />
|
||
<script src="https://b.alicdn.com/s/polyfill.min.js?features=default,es2015,Intl"></script>
|
||
<link id="darkThemeLink" rel="stylesheet" href="/dark.css" />
|
||
<script>
|
||
/* -------------------------- 主题相关 -------------------------- */
|
||
(function () {
|
||
/* 获取查询参数对象 */
|
||
function getSearchParam(search) {
|
||
// 处理入参错误
|
||
var search = search || location.search;
|
||
if (search === undefined) return;
|
||
|
||
var pattern = /(\w+)=(\w+)/gi; // 定义正则
|
||
var matches = search.match(pattern);
|
||
if (!matches) return;
|
||
|
||
var searchParam = Object.fromEntries(matches.map(item => item.split('=')));
|
||
return searchParam;
|
||
}
|
||
|
||
/* 转成查询参数字符串 */
|
||
function fromSearchParam(searchParam) {
|
||
// 处理入参错误
|
||
if (searchParam === undefined) return;
|
||
|
||
var search = Object.entries(searchParam)
|
||
.map(item => item.join('='))
|
||
.join('&');
|
||
return search;
|
||
}
|
||
|
||
var searchParam = getSearchParam(location.search) || {}; // 查询参数对象
|
||
|
||
var isDarkMode = searchParam.theme === 'dark'; // 判断当前主题
|
||
var isComponentsPage = location.pathname.startsWith('/components'); // 判断是否组件页面
|
||
|
||
// 1. 暗色主题刷新时无白屏
|
||
// 如果是暗色主题，且在components路由下
|
||
var darkThemeLinkEl = document.getElementById('darkThemeLink');
|
||
if (isDarkMode && isComponentsPage) {
|
||
// 将预先定义的暗色主题link移动到body内
|
||
document.addEventListener(
|
||
'readystatechange',
|
||
() => {
|
||
document.body.prepend(darkThemeLinkEl);
|
||
},
|
||
{ once: true },
|
||
);
|
||
// load后卸载
|
||
window.addEventListener('load', () => darkThemeLinkEl.remove(), { once: true });
|
||
|
||
// 清除dark.css中的全部transition 待解析完后恢复
|
||
var styleElement = document.createElement('style');
|
||
styleElement.type = 'text/css';
|
||
styleElement.innerHTML =
|
||
'* {transition: none !important;} html {background: rgb(20, 20, 20)}';
|
||
document.head.appendChild(styleElement);
|
||
document.documentElement.style.backgroundColor = 'black';
|
||
window.addEventListener('load', () => styleElement.remove(), { once: true });
|
||
|
||
// 设置系统主题
|
||
document.documentElement.style.colorScheme = 'dark';
|
||
} else {
|
||
document.documentElement.style.colorScheme = 'light';
|
||
darkThemeLinkEl.remove();
|
||
}
|
||
})();
|
||
</script>
|
||
<script>
|
||
(function () {
|
||
function isLocalStorageNameSupported() {
|
||
var testKey = 'test';
|
||
var storage = window.localStorage;
|
||
try {
|
||
storage.setItem(testKey, '1');
|
||
storage.removeItem(testKey);
|
||
return true;
|
||
} catch (error) {
|
||
return false;
|
||
}
|
||
}
|
||
// 优先级提高到所有静态资源的前面，语言不对，加载其他静态资源没意义
|
||
var pathname = location.pathname;
|
||
|
||
function isZhCN(pathname) {
|
||
return /-cn\/?$/.test(pathname);
|
||
}
|
||
function getLocalizedPathname(path, zhCN) {
|
||
var pathname = path.startsWith('/') ? path : '/' + path;
|
||
if (!zhCN) {
|
||
// to enUS
|
||
return /\/?index-cn/.test(pathname) ? '/' : pathname.replace('-cn', '');
|
||
} else if (pathname === '/') {
|
||
return '/index-cn';
|
||
} else if (pathname.endsWith('/')) {
|
||
return pathname.replace(/\/$/, '-cn/');
|
||
}
|
||
return pathname + '-cn';
|
||
}
|
||
|
||
// 兼容旧的 URL， `?locale=...`
|
||
var queryString = location.search;
|
||
if (queryString) {
|
||
var isZhCNConfig = queryString.indexOf('zh-CN') > -1;
|
||
if (isZhCNConfig && !isZhCN(pathname)) {
|
||
location.pathname = getLocalizedPathname(pathname, isZhCNConfig);
|
||
}
|
||
}
|
||
|
||
// 首页无视链接里面的语言设置 https://github.com/ant-design/ant-design/issues/4552
|
||
if (isLocalStorageNameSupported() && (pathname === '/' || pathname === '/index-cn')) {
|
||
var lang =
|
||
(window.localStorage && localStorage.getItem('locale')) ||
|
||
((navigator.language || navigator.browserLanguage).toLowerCase() === 'zh-cn'
|
||
? 'zh-CN'
|
||
: 'en-US');
|
||
// safari is 'zh-cn', while other browser is 'zh-CN';
|
||
if ((lang === 'zh-CN') !== isZhCN(pathname)) {
|
||
location.pathname = getLocalizedPathname(pathname, lang === 'zh-CN');
|
||
}
|
||
}
|
||
document.documentElement.className += isZhCN(pathname) ? 'zh-cn' : 'en-us';
|
||
})();
|
||
</script>
|
||
</head>
|
||
<body>
|
||
<div id="react-content">{{ content | safe }}</div>
|
||
{% for jsFile in manifest["js"] %}
|
||
<script src="{{ root }}{{ jsFile }}"></script>
|
||
{% endfor %}
|
||
<!-- Global Site Tag (gtag.js) - Google Analytics -->
|
||
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-72788897-1"></script>
|
||
<script>
|
||
if (!location.port) {
|
||
// Enable Google Analytics
|
||
window.dataLayer = window.dataLayer || [];
|
||
function gtag() {
|
||
dataLayer.push(arguments);
|
||
}
|
||
gtag('js', new Date());
|
||
gtag('config', 'UA-72788897-1');
|
||
}
|
||
</script>
|
||
<!-- Hotjar Tracking Code for ant.design -->
|
||
<script>
|
||
(function (h, o, t, j, a, r) {
|
||
if (location.hostname === 'localhost') {
|
||
return;
|
||
}
|
||
|
||
h.hj =
|
||
h.hj ||
|
||
function () {
|
||
(h.hj.q = h.hj.q || []).push(arguments);
|
||
};
|
||
h._hjSettings = { hjid: 473408, hjsv: 5 };
|
||
a = o.getElementsByTagName('head')[0];
|
||
r = o.createElement('script');
|
||
r.async = 1;
|
||
r.src = t + h._hjSettings.hjid + j + h._hjSettings.hjsv;
|
||
a.appendChild(r);
|
||
})(window, document, '//static.hotjar.com/c/hotjar-', '.js?sv=');
|
||
</script>
|
||
|
||
<!--
|
||
感谢每位为开源理想而奋斗的人们，愿你们在人生新的旅途一帆风顺！~
|
||
https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*_7M0S7zdFBcAAAAAAAAAAAAAARQnAQ
|
||
|
||
2021.05.21
|
||
-->
|
||
</body>
|
||
</html>
|