ant-design/site/theme/static/template.html
afc163 ed08303cd6
chore: fix site in IE11 (#32868)
* chore: fix site in IE11

* chore: fix site in IE11

* chore: fix site in IE11

* chore: fix site in IE11
2021-11-16 13:12:54 +08:00

221 lines
7.8 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!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" />
<meta name="theme-color" content="#1890ff" />
<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>
/* 设置 meta theme-color 的值,默认会设置一个 #1890ff */
function setColor(isDarken) {
try {
var theme = document.getElementsByTagName('meta')['theme-color'];
theme.setAttribute('content', isDarken ? 'rgba(0,0,0,0.65)' : '#1890ff');
} catch (error) {}
}
/* -------------------------- 主题相关 -------------------------- */
(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;
}
function fromEntries(iterable) {
return iterable.reduce(function (obj, keyvalue) {
var key = keyvalue[0];
var val = keyvalue[1];
obj[key] = val;
return obj;
}, {});
}
var searchParam = fromEntries(
matches.map(function (item) {
return item.split('=');
}),
);
return searchParam;
}
var searchParam = getSearchParam(location.search) || {}; // 查询参数对象
var isDarkMode = searchParam.theme === 'dark'; // 判断当前主题
var isComponentsPage = location.pathname.indexOf('/components') === 0; // 判断是否组件页面
// 1. 暗色主题刷新时无白屏
// 如果是暗色主题且在components路由下
var darkThemeLinkEl = document.getElementById('darkThemeLink');
if (isDarkMode && isComponentsPage) {
// 将预先定义的暗色主题link移动到body内
document.addEventListener(
'readystatechange',
function () {
document.head.appendChild(styleElement);
},
{ once: true },
);
// load后卸载
window.addEventListener(
'load',
function () {
darkThemeLinkEl.parentNode.removeChild(darkThemeLinkEl);
},
{ once: true },
);
setColor(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',
function () {
styleElement.parentNode.removeChild(styleElement);
},
{ once: true },
);
// 设置系统主题
document.documentElement.style.colorScheme = 'dark';
} else {
setColor(false);
document.documentElement.style.colorScheme = 'light';
darkThemeLinkEl.parentNode.removeChild(darkThemeLinkEl);
}
})();
</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.indexOf('/') === 0 ? path : '/' + path;
if (!zhCN) {
// to enUS
return /\/?index-cn/.test(pathname) ? '/' : pathname.replace('-cn', '');
} else if (pathname === '/') {
return '/index-cn';
} else if (pathname.indexOf('/') === pathname.length - 1) {
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>