cpuwolf · July 5, 2022 10:43 · cpuwolf · Jul 5, 2022
diff --git a/ghost.html b/ghost.html
 <html>

 <head>
 	<meta charset="utf-8" />
 	<style type="text/css">
 		.algolia-autocomplete {
 			width: 80%;
 			max-width: 700px;
 		}

 		.algolia-autocomplete .aa-input,
 		.algolia-autocomplete .aa-hint {
 			width: 100%;
 			/*min-height: 30px;*/
 			text-indent: 10px;
 		}

 		.aa-input {
 			border-radius: 2px;
 			/*background: url(./powered-by-algolia/Algolia_logo_bg-dark.jpg) right top no-repeat;
 			background-size: contain;*/
 		}

 		.algolia-autocomplete .aa-hint {
 			color: #999;
 		}

 		.algolia-autocomplete .aa-dropdown-menu {
 			width: 100%;
 			background-color: #fff;
 			border: 1px solid #999;
 			border-top: none;
 		}

 		.algolia-autocomplete .aa-dropdown-menu .aa-suggestion {
 			cursor: pointer;
 			padding: 5px 4px;
 		}

 		.algolia-autocomplete .aa-dropdown-menu .aa-suggestion.aa-cursor {
 			background-color: #B2D7FF;
 		}

 		.algolia-autocomplete .aa-dropdown-menu .aa-suggestion em {
 			font-weight: bold;
 			font-style: normal;
 		}
 	</style>
 </head>

 <body>

 	<!--div style="text-align: center;">
 		<input type="search" placeholder="Search posts" id="search-input" />
 	</div-->
 	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 	<script src="https://cdn.jsdelivr.net/algoliasearch/3/algoliasearch.min.js"></script>
 	<script src="https://cdn.jsdelivr.net/autocomplete.js/0/autocomplete.jquery.min.js"></script>
 	<script>
 		//(function() {
 		document.addEventListener("DOMContentLoaded", cpuwolf_defer_add_algolia);
 		//....
 		function cpuwolf_defer_add_algolia() {
 			console.log("boot start up");
 			console.log(document.getElementById('gh-head').getElementsByClassName('gh-head-actions')[0].innerHTML);
 			var oldhtml = document.getElementById('gh-head').getElementsByClassName('gh-head-actions')[0].innerHTML;
 			console.log(oldhtml);
 			var html = '<div style="text-align: center;"><input type="search" placeholder="Search posts" id="search-input" /></div>';
 			var newhtml = html + oldhtml;
 			console.log(newhtml);
 			document.getElementById('gh-head').getElementsByClassName('gh-head-actions')[0].innerHTML = newhtml;
 			var options = {
 				appId: "A33X79BVHS",
 				apiKey: "9bd884d98dba35430719457cc3313f67",
 				indexName: "9bd884d98dba35430719457cc3313f67"
 			};
 			var client = algoliasearch(options.appId, options.apiKey);
 			var index = client.initIndex(options.indexName);
 			$("#search-input")
 				.autocomplete({
 					hint: true
 				}, [{
 					source: function(q, cb) {
 						index.search(q, {
 							hitsPerPage: 6
 						}, function(error, content) {
 							if (error) {
 								cb([]);
 								return;
 							}
 							console.log(content.hits[0].title);
 							console.log(content.hits);
 							var urllist = [];
 							for (var i = 0; i < content.hits.length; i++) {
 								var html =
 									"<a href='" +
 									content.hits[i].url +
 									"'>" +
 									content.hits[i].title +
 									"</a>";
 								urllist.push(html);
 							}
 							cb(urllist);
 						});
 					},
 					displayKey: "title",
 					templates: {
 						suggestion: function(suggestion) {
 							console.log(suggestion);
 							return suggestion;
 						}
 					}
 				}])
 				.on("autocomplete:selected", function(event, suggestion, dataset) {
 					console.log(suggestion);
 					//console.log(suggestion._highlightResult);
 					$("#search-input").val(suggestion);
 				});
 		}
 	</script>

 	<script>

 	</script>

 	<header id="gh-head" class="gh-head outer">
 		<nav class="gh-head-inner inner">

 			<div class="gh-head-brand">
 				<a class="gh-head-logo no-image" href="https://x-plane.vip">
 					X-Plane.VIP
 				</a>
 				<a class="gh-burger" role="button">
 					<div class="gh-burger-box">
 						<div class="gh-burger-inner"></div>
 					</div>
 				</a>
 			</div>
 			<div class="gh-head-menu">
 				<ul class="nav">
 					<li class="nav-home nav-current"><a href="https://x-plane.vip/">Home</a></li>
 					<li class="nav-x-plane-12xin-shou-zhi-nan"><a href="https://x-plane.vip/xp11newbie/">X-Plane 12新手指南</a></li>
 					<li class="nav-xtouchdownrecorder"><a href="https://x-plane.vip/xtdr/">XTouchDownRecorder</a></li>
 					<li class="nav-quickmade"><a href="https://x-plane.vip/quickmade/">QuickMade</a></li>
 					<li class="nav-about"><a href="https://x-plane.vip/about/">About</a></li>
 				</ul>

 			</div>
 			<div class="gh-head-actions">
 				<div class="gh-social">

 				</div>
 				<a class="gh-head-button gh-portal-close" href="#/portal/signup" data-portal="signup">Subscribe</a>
 			</div>
 		</nav>
 	</header>
 </body>

 </html>
	<html>

	<head>
	<meta charset="utf-8" />
	<style type="text/css">
	.algolia-autocomplete {
	width: 80%;
	max-width: 700px;
	}

	.algolia-autocomplete .aa-input,
	.algolia-autocomplete .aa-hint {
	width: 100%;
	/min-height: 30px;/
	text-indent: 10px;
	}

	.aa-input {
	border-radius: 2px;
	/*background: url(./powered-by-algolia/Algolia_logo_bg-dark.jpg) right top no-repeat;
	background-size: contain;*/
	}

	.algolia-autocomplete .aa-hint {
	color: #999;
	}

	.algolia-autocomplete .aa-dropdown-menu {
	width: 100%;
	background-color: #fff;
	border: 1px solid #999;
	border-top: none;
	}

	.algolia-autocomplete .aa-dropdown-menu .aa-suggestion {
	cursor: pointer;
	padding: 5px 4px;
	}

	.algolia-autocomplete .aa-dropdown-menu .aa-suggestion.aa-cursor {
	background-color: #B2D7FF;
	}

	.algolia-autocomplete .aa-dropdown-menu .aa-suggestion em {
	font-weight: bold;
	font-style: normal;
	}
	</style>
	</head>

	<body>

	<!--div style="text-align: center;">
	<input type="search" placeholder="Search posts" id="search-input" />
	</div-->
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.jsdelivr.net/algoliasearch/3/algoliasearch.min.js"></script>
	<script src="https://cdn.jsdelivr.net/autocomplete.js/0/autocomplete.jquery.min.js"></script>
	<script>
	//(function() {
	document.addEventListener("DOMContentLoaded", cpuwolf_defer_add_algolia);
	//....
	function cpuwolf_defer_add_algolia() {
	console.log("boot start up");
	console.log(document.getElementById('gh-head').getElementsByClassName('gh-head-actions')[0].innerHTML);
	var oldhtml = document.getElementById('gh-head').getElementsByClassName('gh-head-actions')[0].innerHTML;
	console.log(oldhtml);
	var html = '<div style="text-align: center;"><input type="search" placeholder="Search posts" id="search-input" /></div>';
	var newhtml = html + oldhtml;
	console.log(newhtml);
	document.getElementById('gh-head').getElementsByClassName('gh-head-actions')[0].innerHTML = newhtml;
	var options = {
	appId: "A33X79BVHS",
	apiKey: "9bd884d98dba35430719457cc3313f67",
	indexName: "9bd884d98dba35430719457cc3313f67"
	};
	var client = algoliasearch(options.appId, options.apiKey);
	var index = client.initIndex(options.indexName);
	$("#search-input")
	.autocomplete({
	hint: true
	}, [{
	source: function(q, cb) {
	index.search(q, {
	hitsPerPage: 6
	}, function(error, content) {
	if (error) {
	cb([]);
	return;
	}
	console.log(content.hits[0].title);
	console.log(content.hits);
	var urllist = [];
	for (var i = 0; i < content.hits.length; i++) {
	var html =
	"<a href='" +
	content.hits[i].url +
	"'>" +
	content.hits[i].title +
	"</a>";
	urllist.push(html);
	}
	cb(urllist);
	});
	},
	displayKey: "title",
	templates: {
	suggestion: function(suggestion) {
	console.log(suggestion);
	return suggestion;
	}
	}
	}])
	.on("autocomplete:selected", function(event, suggestion, dataset) {
	console.log(suggestion);
	//console.log(suggestion._highlightResult);
	$("#search-input").val(suggestion);
	});
	}
	</script>

	<script>

	</script>

	<header id="gh-head" class="gh-head outer">
	<nav class="gh-head-inner inner">

	<div class="gh-head-brand">
	<a class="gh-head-logo no-image" href="https://x-plane.vip">
	X-Plane.VIP
	</a>
	<a class="gh-burger" role="button">
	<div class="gh-burger-box">
	<div class="gh-burger-inner"></div>
	</div>
	</a>
	</div>
	<div class="gh-head-menu">
	<ul class="nav">
	<li class="nav-home nav-current"><a href="https://x-plane.vip/">Home</a></li>
	<li class="nav-x-plane-12xin-shou-zhi-nan"><a href="https://x-plane.vip/xp11newbie/">X-Plane 12新手指南</a></li>
	<li class="nav-xtouchdownrecorder"><a href="https://x-plane.vip/xtdr/">XTouchDownRecorder</a></li>
	<li class="nav-quickmade"><a href="https://x-plane.vip/quickmade/">QuickMade</a></li>
	<li class="nav-about"><a href="https://x-plane.vip/about/">About</a></li>
	</ul>

	</div>
	<div class="gh-head-actions">
	<div class="gh-social">

	</div>
	<a class="gh-head-button gh-portal-close" href="#/portal/signup" data-portal="signup">Subscribe</a>
	</div>
	</nav>
	</header>
	</body>

	</html>