支持了 gitbook 字体主题切换，修复 git 的二进制换行符问题

- 修复(重写)了 gitbook 字体主题的切换面板
- 添加了字体主题的 cookie 储存(默认30天过期)
- 为添加的元素新增了主题颜色的支持
  - 同时修复了“搜索框”的主题不匹配问题
- 修改 .gitattributes 使其能够正常识别 PNG 图片和常见字体文件(ttf,otf,woff&2)为二进制文件

.gitattributes

@@ -1 +1,7 @@
+* text=auto
 * text eol=lf
+*.png binary
+*.otf binary
+*.ttf binary
+*.woff binary
+*.woff2 binary

assets/gitbook-fix.css

@@ -1,3 +1,23 @@
+:root {
+	--color-graystyle-background: rgba(0, 0, 0, 0.07);
+	--color-icon-in-background: white;
+	--color-graystyle: rgba(0, 0, 0, 0.2);
+	--color-nav-background-base: null;
+}
+
+.color-theme-1 {
+	--color-graystyle-background: rgba(255, 255, 255, 0.48);
+	--color-icon-in-background: black;
+	--color-graystyle: rgba(135, 127, 106, 0.5);
+	--color-nav-background-base: #1111111;
+}
+
+.color-theme-2 {
+	--color-graystyle-background: rgba(29, 34, 63, 0.6);
+	--color-icon-in-background: white;
+	--color-graystyle: rgba(193, 198, 215, 0.2);
+	--color-nav-background-base: #252737;
+}
 
 .fold > ul {
 	max-height: 0;
@@ -54,8 +74,8 @@
 	top: 1px;
 	right: 20px;
 	padding: 0 5px 2px;
-	background: rgba(0,0,0,.07);
+	background: var(--color-graystyle-background);
-	color: white;
+	color: var(--color-icon-in-background);
 	border-bottom: 0;
 	border-radius: 0 0 5px 5px;
 	z-index: 1000;
@@ -72,9 +92,13 @@
 .book .book-summary ul.summary li span.annotation {
 	padding: 0;
 	font-size: 0.2em;
-	color: rgba(0, 0, 0, 0.2);
+	color: var(--color-graystyle);
 }
 
 .book .book-summary ul.summary li span.annotation:hover {
 	text-decoration: none !important;
 }
+
+#book-search-input {
+	background-color: var(--color-nav-background-base);
+}

assets/gitbook-fix.js

@@ -1,7 +1,11 @@
 const WITH_SUMMARY_CLASS = "with-summary"
 
+const DROPDOWN_OPEN_CLASS = "open";
+
 let bookRoot;
 
+let fontSettingDiv;
+
 function summaryOnOrOff () {
 	
 	if (bookRoot.classList.contains(WITH_SUMMARY_CLASS)) {
@@ -16,6 +20,8 @@ window.onload = function () {
 	
 	bookRoot = document.getElementsByClassName("book")[0];
 	
+	fontSettingDiv = document.getElementsByClassName("font-settings")[0].getElementsByClassName("dropdown-menu")[0];
+	
 	if (window.innerWidth > 600) {
 		bookRoot.classList.add(WITH_SUMMARY_CLASS);
 	}
@@ -42,3 +48,69 @@ for (const node of document.getElementsByClassName("summary-container")) {
 	})
 	
 }
+
+function openOrCloseFontSettings () {
+	if (fontSettingDiv.classList.contains(DROPDOWN_OPEN_CLASS)) {
+		fontSettingDiv.classList.remove(DROPDOWN_OPEN_CLASS);
+	} else {
+		fontSettingDiv.classList.add(DROPDOWN_OPEN_CLASS);
+	}
+}
+
+function getFontSize () {
+	return parseInt(
+		/ font-size-([0-9]+) /.exec(bookRoot.className)[1]
+	);
+}
+
+function setFontSize (size) {
+	if (size < 0) size = 0;
+	else if (size > 4) size = 4;
+	bookRoot.className = bookRoot.className.replace(/ font-size-[0-9]+ /, " font-size-"+size+" ");
+	setCookie("font-size", size);
+}
+
+function enlargeFontSize () {
+	setFontSize(getFontSize()+1);
+}
+
+function reduceFontSize () {
+	setFontSize(getFontSize()-1);
+}
+
+function setFontFamily (familyId) {
+	bookRoot.className = bookRoot.className.replace(/ font-family-[0-9]+ /, " font-family-"+familyId+" ");
+	setCookie("font-family", familyId);
+}
+
+function setFontFamilySerif () {
+	setFontFamily(0);
+}
+
+function setFontFamilySans () {
+	setFontFamily(1);
+}
+
+function setColorTheme (colorThemeId) {
+	bookRoot.className = bookRoot.className.replace(/ color-theme-[0-9]+ /, " color-theme-"+colorThemeId+" ");
+	setCookie("color-theme", colorThemeId);
+}
+
+function setColorThemeWhite () {
+	setColorTheme(0);
+}
+
+function setColorThemeSepia () {
+	setColorTheme(1);
+}
+
+function setColorThemeNight () {
+	setColorTheme(2);
+}
+
+function setCookie(name, value) {
+	const d = new Date()
+	d.setTime(d.getTime() + (30*24*60*60*1000));
+	const expires = "expires=" + d.toGMTString()
+	document.cookie = name + "=" + value + "; " + expires;
+}

index.php

@@ -101,23 +101,23 @@ try {
 				<!-- Title -->
 				<a class="btn pull-left js-toolbar-action" aria-label="" href="#" onclick="summaryOnOrOff()"><i class="fa fa-align-justify"></i></a>
 				<div class="dropdown pull-left font-settings js-toolbar-action">
-					<a class="btn toggle-dropdown" aria-label="Font Settings" href="#"><i class="fa fa-font"></i></a>
+					<a class="btn toggle-dropdown" aria-label="Font Settings" onclick="openOrCloseFontSettings()"><i class="fa fa-font"></i></a>
 					<div class="dropdown-menu dropdown-right">
 						<div class="dropdown-caret">
 							<span class="caret-outer"></span>
 							<span class="caret-inner"></span>
 						</div>
 						<div class="buttons">
-							<button class="button size-2 font-reduce">A</button>
+							<button class="button size-2 font-reduce" onclick="reduceFontSize()">A</button>
-							<button class="button size-2 font-enlarge">A</button>
+							<button class="button size-2 font-enlarge" onclick="enlargeFontSize()">A</button>
 						</div>
 						<div class="buttons">
-							<button class="button size-2 ">Serif</button>
+							<button class="button size-2" onclick="setFontFamilySerif()">Serif</button>
-							<button class="button size-2 ">Sans</button>
+							<button class="button size-2" onclick="setFontFamilySans()">Sans</button>
 						</div><div class="buttons">
-							<button class="button size-3 ">White</button>
+							<button class="button size-3" onclick="setColorThemeWhite()">White</button>
-							<button class="button size-3 ">Sepia</button>
+							<button class="button size-3" onclick="setColorThemeSepia()">Sepia</button>
-							<button class="button size-3 ">Night</button>
+							<button class="button size-3" onclick="setColorThemeNight()">Night</button>
 						</div>
 					</div>
 				</div>

src/Data/SiteMeta.php

@@ -29,6 +29,7 @@ class SiteMeta {
 	public static function getGitbookStylesheetsList (): array {
 		return array(
 			"/assets/gitbook/style.css",
+			"/assets/gitbook/gitbook-plugin-fontsettings/website.css",
 			"/assets/gitbook-fix.css",
 		);
 	}
@@ -48,4 +49,11 @@ class SiteMeta {
 		return file_get_contents("./data/$id.js");
 	}
 	
+	public static function getUserThemes (): string {
+		$fontSize = $_COOKIE['font-size'] ?? 2;
+		$fontFamily = $_COOKIE['font-family'] ?? 1;
+		$colorTheme = $_COOKIE['color-theme'] ?? 0;
+		return "font-size-$fontSize font-family-$fontFamily color-theme-$colorTheme";
+	}
+	
 }

template/header.php

@@ -27,5 +27,5 @@
 		<style><?= SiteMeta::getCustomCssContent("custom") ?></style>
 	</head>
 	<body>
-		<div class="book">
+		<div class="book <?= SiteMeta::getUserThemes() ?>">