deploy: 2097935

Author: xcatliu

_ga.js

@@ -0,0 +1,17 @@
+// @deno-types="https://deno.land/x/types/react/v16.13.1/react.d.ts"
+
+const Ga = ({ id }) => {
+    React.useEffect(() => {
+        window.addEventListener('rerender', () => {
+            // @ts-ignore
+            window.ga('set', 'page', location.pathname);
+            window.ga('send', 'pageview');
+        });
+    }, []);
+    return (React.createElement(React.Fragment, null,
+        React.createElement("script", { async: true, src: "https://www.google-analytics.com/analytics.js" }),
+        React.createElement("script", { dangerouslySetInnerHTML: {
+                __html: `window.dataLayer = window.dataLayer || []; function gtag() { dataLayer.push(arguments); } gtag('js', new Date()); gtag('config', '${id}');`
+            } })));
+};
+export default Ga;

_layout.js

@@ -1,54 +1,45 @@
 // @deno-types="https://deno.land/x/types/react/v16.13.1/react.d.ts"
 
 import Sidebar from './_sidebar.js';
-import Gitalk from './_gitalk.js';
-const Layout = ({ config, title, content, script, sidebar, outputPath }) => {
+const Layout = ({ config, title, content, ga, gitalk, script, sidebar, outputPath }) => {
     const [isDark, setIsDark] = React.useState(
     // @ts-ignore
     window.Deno ? false : document.documentElement.classList.contains('is_dark'));
     return (React.createElement("html", { className: isDark ? 'is_dark' : '' },
         React.createElement("head", null,
-            React.createElement("script", { async: true, src: "https://www.google-analytics.com/analytics.js" }),
-            React.createElement("script", { dangerouslySetInnerHTML: {
-                    __html: `window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-45256157-14');`
-                } }),
+            ga,
             React.createElement("title", null, outputPath !== 'index.html' ? `${title} · ${config.title}` : title),
             React.createElement("meta", { charSet: "utf-8" }),
-            React.createElement("link", { rel: "shortcut icon", type: "image/png", href: "//xcatliu.github.io/favicon.ico" }),
-            React.createElement("link", { id: "prismTheme", rel: "stylesheet", href: isDark ? '/assets/prism_tomorrow.css' : '/assets/prism.css' }),
-            React.createElement("link", { rel: "stylesheet", href: "/assets/index.css" }),
+            React.createElement("link", { id: "prismTheme", rel: "stylesheet", href: isDark ? `${config.base}assets/prism_tomorrow.css` : `${config.base}assets/prism.css` }),
             React.createElement("script", { dangerouslySetInnerHTML: {
                     __html: `
 let shouldSetIsDark = document.cookie.includes('is_dark=1') ? true : document.cookie.includes('is_dark=0') ? false : window.matchMedia('(prefers-color-scheme: dark)').matches
 if (shouldSetIsDark) {
   document.documentElement.classList.add('is_dark');
-  document.getElementById('prismTheme').href = "/assets/prism_tomorrow.css";
+  document.getElementById('prismTheme').href = "${config.base}assets/prism_tomorrow.css";
 }
 `
-                } })),
+                } }),
+            React.createElement("link", { rel: "stylesheet", href: `${config.base}assets/index.css` })),
         React.createElement("body", null,
             React.createElement("header", null,
                 React.createElement("h1", null,
-                    React.createElement("a", { href: "/" }, config.title)),
+                    React.createElement("a", { href: config.base }, config.title)),
                 React.createElement("nav", null,
                     React.createElement("ul", null,
-                        React.createElement("li", null,
-                            React.createElement("a", { href: "https://github.com/xcatliu/typescript-tutorial" }, "GitHub")),
-                        React.createElement("li", null,
-                            React.createElement("a", { href: "https://github.com/xcatliu/buy-me-a-coffee" }, "\u8D5E\u52A9\u4F5C\u8005")),
-                        React.createElement("li", null,
-                            React.createElement("a", { href: "https://github.com/xcatliu/pagic" }, "\u672C\u7F51\u7AD9\u4F7F\u7528 Pagic \u6784\u5EFA")),
+                        config.nav.map(({ text, link }) => (React.createElement("li", { key: link },
+                            React.createElement("a", { href: link }, text)))),
                         React.createElement("li", null,
                             React.createElement("a", { href: "#", onClick: (e) => {
                                     e.preventDefault();
                                     setIsDark(!isDark);
                                     // @ts-ignore
                                     document.cookie = `is_dark=${!isDark ? '1' : '0'}; expires=Tue, 19 Jun 2038 03:14:07 UTC; path=/`;
                                 } }, isDark ? '关闭黑暗模式' : '开启黑暗模式'))))),
-            React.createElement(Sidebar, { sidebar: sidebar, outputPath: outputPath }),
+            React.createElement(Sidebar, { sidebar: sidebar, outputPath: outputPath, config: config }),
             React.createElement("section", { className: "main" },
                 content,
-                React.createElement(Gitalk, { clientID: "29aa4941759fc887ed4f", clientSecret: "33e355efdf3a1959624506a5d88311145208471b", repo: "typescript-tutorial", owner: "xcatliu", admin: ['xcatliu'], id: outputPath, title: title })),
+                gitalk),
             script)));
 };
 export default Layout;

_sidebar.js

@@ -1,8 +1,8 @@
 // @deno-types="https://deno.land/x/types/react/v16.13.1/react.d.ts"
 
-const Sidebar = ({ sidebar, outputPath }) => (React.createElement("aside", null,
-    React.createElement("ul", null, sidebar.map(({ title, link, children }) => (React.createElement("li", { key: link },
-        React.createElement("a", { href: link, className: link === `/${outputPath}` ? 'active' : '' }, title),
-        children && (React.createElement("ul", null, children.map(({ title, link }) => (React.createElement("li", { key: link },
-            React.createElement("a", { href: link, className: link === `/${outputPath}` ? 'active' : '' }, title))))))))))));
+const Sidebar = ({ sidebar, outputPath, config }) => (React.createElement("aside", null,
+    React.createElement("ul", null, sidebar.map(({ text, link, children }) => (React.createElement("li", { key: link },
+        React.createElement("a", { href: `${config.base}${link}`, className: link === outputPath ? 'active' : '' }, text),
+        children && (React.createElement("ul", null, children.map(({ text, link }) => (React.createElement("li", { key: link },
+            React.createElement("a", { href: `${config.base}${link}`, className: link === outputPath ? 'active' : '' }, text))))))))))));
 export default Sidebar;

advanced/class-and-interfaces.html

@@ -1,10 +1,10 @@
-<html class="" data-reactroot=""><head><script async="" src="https://www.google-analytics.com/analytics.js"></script><script>window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-45256157-14');</script><title>类与接口 · TypeScript 入门教程</title><meta charSet="utf-8"/><link rel="shortcut icon" type="image/png" href="//xcatliu.github.io/favicon.ico"/><link id="prismTheme" rel="stylesheet" href="/assets/prism.css"/><link rel="stylesheet" href="/assets/index.css"/><script>
+<html class="" data-reactroot=""><head><script async="" src="https://www.google-analytics.com/analytics.js"></script><script>window.dataLayer = window.dataLayer || []; function gtag() { dataLayer.push(arguments); } gtag('js', new Date()); gtag('config', 'UA-45256157-14');</script><title>类与接口 · TypeScript 入门教程</title><meta charSet="utf-8"/><link id="prismTheme" rel="stylesheet" href="/assets/prism.css"/><script>
 let shouldSetIsDark = document.cookie.includes('is_dark=1') ? true : document.cookie.includes('is_dark=0') ? false : window.matchMedia('(prefers-color-scheme: dark)').matches
 if (shouldSetIsDark) {
   document.documentElement.classList.add('is_dark');
   document.getElementById('prismTheme').href = "/assets/prism_tomorrow.css";
 }
-</script></head><body><header><h1><a href="/">TypeScript 入门教程</a></h1><nav><ul><li><a href="https://github.com/xcatliu/typescript-tutorial">GitHub</a></li><li><a href="https://github.com/xcatliu/buy-me-a-coffee">赞助作者</a></li><li><a href="https://github.com/xcatliu/pagic">本网站使用 Pagic 构建</a></li><li><a href="#">开启黑暗模式</a></li></ul></nav></header><aside><ul><li><a href="/index.html" class="">TypeScript 入门教程</a></li><li><a href="/introduction/index.html" class="">简介</a><ul><li><a href="/introduction/what-is-typescript.html" class="">什么是 TypeScript</a></li><li><a href="/introduction/get-typescript.html" class="">安装 TypeScript</a></li><li><a href="/introduction/hello-typescript.html" class="">Hello TypeScript</a></li></ul></li><li><a href="/basics/index.html" class="">基础</a><ul><li><a href="/basics/primitive-data-types.html" class="">原始数据类型</a></li><li><a href="/basics/any.html" class="">任意值</a></li><li><a href="/basics/type-inference.html" class="">类型推论</a></li><li><a href="/basics/union-types.html" class="">联合类型</a></li><li><a href="/basics/type-of-object-interfaces.html" class="">对象的类型——接口</a></li><li><a href="/basics/type-of-array.html" class="">数组的类型</a></li><li><a href="/basics/type-of-function.html" class="">函数的类型</a></li><li><a href="/basics/type-assertion.html" class="">类型断言</a></li><li><a href="/basics/declaration-files.html" class="">声明文件</a></li><li><a href="/basics/built-in-objects.html" class="">内置对象</a></li></ul></li><li><a href="/advanced/index.html" class="">进阶</a><ul><li><a href="/advanced/type-aliases.html" class="">类型别名</a></li><li><a href="/advanced/string-literal-types.html" class="">字符串字面量类型</a></li><li><a href="/advanced/tuple.html" class="">元组</a></li><li><a href="/advanced/enum.html" class="">枚举</a></li><li><a href="/advanced/class.html" class="">类</a></li><li><a href="/advanced/class-and-interfaces.html" class="active">类与接口</a></li><li><a href="/advanced/generics.html" class="">泛型</a></li><li><a href="/advanced/declaration-merging.html" class="">声明合并</a></li><li><a href="/advanced/further-reading.html" class="">扩展阅读</a></li></ul></li><li><a href="/engineering/index.html" class="">工程</a><ul><li><a href="/engineering/lint.html" class="">代码检查</a></li><li><a href="/engineering/compiler-options.html" class="">编译选项</a></li></ul></li><li><a href="/thanks/index.html" class="">感谢</a></li></ul></aside><section class="main"><article><h1 id="%E7%B1%BB%E4%B8%8E%E6%8E%A5%E5%8F%A3">类与接口 <a class="header-anchor" href="#%E7%B1%BB%E4%B8%8E%E6%8E%A5%E5%8F%A3">§</a></h1>
+</script><link rel="stylesheet" href="/assets/index.css"/></head><body><header><h1><a href="/">TypeScript 入门教程</a></h1><nav><ul><li><a href="https://github.com/xcatliu/typescript-tutorial">GitHub</a></li><li><a href="https://github.com/xcatliu/typescript-tutorial">赞助作者</a></li><li><a href="https://github.com/xcatliu/pagic">本网站使用 Pagic 构建</a></li><li><a href="#">开启黑暗模式</a></li></ul></nav></header><aside><ul><li><a href="/index.html" class="">TypeScript 入门教程</a></li><li><a href="/introduction/index.html" class="">简介</a><ul><li><a href="/introduction/what-is-typescript.html" class="">什么是 TypeScript</a></li><li><a href="/introduction/get-typescript.html" class="">安装 TypeScript</a></li><li><a href="/introduction/hello-typescript.html" class="">Hello TypeScript</a></li></ul></li><li><a href="/basics/index.html" class="">基础</a><ul><li><a href="/basics/primitive-data-types.html" class="">原始数据类型</a></li><li><a href="/basics/any.html" class="">任意值</a></li><li><a href="/basics/type-inference.html" class="">类型推论</a></li><li><a href="/basics/union-types.html" class="">联合类型</a></li><li><a href="/basics/type-of-object-interfaces.html" class="">对象的类型——接口</a></li><li><a href="/basics/type-of-array.html" class="">数组的类型</a></li><li><a href="/basics/type-of-function.html" class="">函数的类型</a></li><li><a href="/basics/type-assertion.html" class="">类型断言</a></li><li><a href="/basics/declaration-files.html" class="">声明文件</a></li><li><a href="/basics/built-in-objects.html" class="">内置对象</a></li></ul></li><li><a href="/advanced/index.html" class="">进阶</a><ul><li><a href="/advanced/type-aliases.html" class="">类型别名</a></li><li><a href="/advanced/string-literal-types.html" class="">字符串字面量类型</a></li><li><a href="/advanced/tuple.html" class="">元组</a></li><li><a href="/advanced/enum.html" class="">枚举</a></li><li><a href="/advanced/class.html" class="">类</a></li><li><a href="/advanced/class-and-interfaces.html" class="active">类与接口</a></li><li><a href="/advanced/generics.html" class="">泛型</a></li><li><a href="/advanced/declaration-merging.html" class="">声明合并</a></li><li><a href="/advanced/further-reading.html" class="">扩展阅读</a></li></ul></li><li><a href="/engineering/index.html" class="">工程</a><ul><li><a href="/engineering/lint.html" class="">代码检查</a></li><li><a href="/engineering/compiler-options.html" class="">编译选项</a></li></ul></li><li><a href="/thanks/index.html" class="">感谢</a></li></ul></aside><section class="main"><article><h1 id="%E7%B1%BB%E4%B8%8E%E6%8E%A5%E5%8F%A3">类与接口 <a class="header-anchor" href="#%E7%B1%BB%E4%B8%8E%E6%8E%A5%E5%8F%A3">§</a></h1>
 <p><a href="../basics/type-of-object-interfaces.html">之前学习过</a>，接口（Interfaces）可以用于对「对象的形状（Shape）」进行描述。</p>
 <p>这一章主要介绍接口的另一个用途，对类的一部分行为进行抽象。</p>
 <h2 id="%E7%B1%BB%E5%AE%9E%E7%8E%B0%E6%8E%A5%E5%8F%A3">类实现接口 <a class="header-anchor" href="#%E7%B1%BB%E5%AE%9E%E7%8E%B0%E6%8E%A5%E5%8F%A3">§</a></h2>