cpuwolf/ghost.html

## 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>