ant-design/site/theme/static/template.html

221 lines
7.8 KiB
HTML
Raw Normal View History

2016-02-29 14:08:40 +08:00
<!DOCTYPE html>
2019-09-08 11:07:54 +08:00
<html {{ htmlAttributes | safe }}>
2016-12-09 14:14:31 +08:00
<head>
2019-05-07 14:57:32 +08:00
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
2021-08-23 10:46:56 +08:00
<meta name="theme-color" content="#1890ff" />
2019-10-01 16:22:19 +08:00
<title>{% if title %}{{ title | safe }}{% else %}{% endif %}</title>
2019-09-08 11:07:54 +08:00
{% if meta %}{{ meta | safe }}{% endif %}
2019-05-07 14:57:32 +08:00
<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 }}" />
2019-04-09 20:19:45 +08:00
{% endfor %}
2018-08-17 22:29:36 +08:00
<style id="nprogress-style">
2019-05-07 14:57:32 +08:00
#nprogress {
display: none;
}
2018-08-17 22:29:36 +08:00
</style>
2019-05-07 14:57:32 +08:00
<link rel="stylesheet/less" type="text/css" href="{{ root }}color.less" />
2021-05-06 10:34:06 +08:00
<script src="https://b.alicdn.com/s/polyfill.min.js?features=default,es2015,Intl"></script>
<link id="darkThemeLink" rel="stylesheet" href="/dark.css" />
<script>
2021-08-23 10:46:56 +08:00
/* 设置 meta theme-color 的值,默认会设置一个 #1890ff */
function setColor(isDarken) {
try {
var theme = document.getElementsByTagName('meta')['theme-color'];
2021-08-23 10:46:56 +08:00
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 },
);
2021-08-23 10:46:56 +08:00
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 {
2021-08-23 10:46:56 +08:00
setColor(false);
document.documentElement.style.colorScheme = 'light';
darkThemeLinkEl.parentNode.removeChild(darkThemeLinkEl);
}
})();
</script>
<script>
(function () {
2019-05-07 14:57:32 +08:00
function isLocalStorageNameSupported() {
var testKey = 'test';
var storage = window.localStorage;
try {
storage.setItem(testKey, '1');
storage.removeItem(testKey);
return true;
} catch (error) {
return false;
}
2017-02-21 13:36:17 +08:00
}
2019-05-07 14:57:32 +08:00
// 优先级提高到所有静态资源的前面,语言不对,加载其他静态资源没意义
var pathname = location.pathname;
2019-05-07 14:57:32 +08:00
function isZhCN(pathname) {
return /-cn\/?$/.test(pathname);
}
function getLocalizedPathname(path, zhCN) {
var pathname = path.indexOf('/') === 0 ? path : '/' + path;
2019-05-07 14:57:32 +08:00
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) {
2019-05-07 14:57:32 +08:00
return pathname.replace(/\/$/, '-cn/');
}
return pathname + '-cn';
}
2019-05-07 14:57:32 +08:00
// 兼容旧的 URL `?locale=...`
var queryString = location.search;
if (queryString) {
var isZhCNConfig = queryString.indexOf('zh-CN') > -1;
if (isZhCNConfig && !isZhCN(pathname)) {
location.pathname = getLocalizedPathname(pathname, isZhCNConfig);
}
}
2019-05-07 14:57:32 +08:00
// 首页无视链接里面的语言设置 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');
}
}
2019-05-07 14:57:32 +08:00
document.documentElement.className += isZhCN(pathname) ? 'zh-cn' : 'en-us';
})();
</script>
</head>
<body>
2020-10-21 10:35:06 +08:00
<div id="react-content">{{ content | safe }}</div>
{% for jsFile in manifest["js"] %}
<script src="{{ root }}{{ jsFile }}"></script>
2019-04-09 20:19:45 +08:00
{% endfor %}
<!-- Global Site Tag (gtag.js) - Google Analytics -->
2018-05-21 23:27:26 +08:00
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-72788897-1"></script>
2016-12-09 14:14:31 +08:00
<script>
2019-05-07 14:57:32 +08:00
if (!location.port) {
// Enable Google Analytics
window.dataLayer = window.dataLayer || [];
function gtag() {
dataLayer.push(arguments);
}
gtag('js', new Date());
gtag('config', 'UA-72788897-1');
}
2017-01-07 23:30:33 +08:00
</script>
2017-04-12 21:17:04 +08:00
<!-- Hotjar Tracking Code for ant.design -->
<script>
(function (h, o, t, j, a, r) {
if (location.hostname === 'localhost') {
return;
}
2019-05-07 14:57:32 +08:00
h.hj =
h.hj ||
function () {
2019-05-07 14:57:32 +08:00
(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=');
2017-04-12 21:17:04 +08:00
</script>
<!--
感谢每位为开源理想而奋斗的人们,愿你们在人生新的旅途一帆风顺!~
https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*_7M0S7zdFBcAAAAAAAAAAAAAARQnAQ
2021.05.21
-->
2016-12-09 14:14:31 +08:00
</body>
2016-02-29 14:08:40 +08:00
</html>