google 自訂搜尋

post date - 2023/08/12

last update - 2023/08/12

設定只搜尋自己網站並嵌入的簡單紀錄，小網站的自製搜尋功能其實很難跟搜尋引擎提供的功能比了，如果沒有會員專用文章的需求還蠻常被使用。

設定網址
https://programmablesearchengine.google.com/controlpanel/all

如果使用google預設的樣子，設定好要搜尋的網址後直接取得程式碼貼上就完成了

下面簡單紀錄崁入頁面方式
首先在外觀與風格->版面配置中將設定改成只顯示結果

接著載入js

<script async src="https://cse.google.com/cse.js?cx=搜尋引擎 ID"></script>

搜尋用form，根據規則即使是自訂也記得要顯示google提供等字樣，有用logo的話不能亂改

<!--cx的內容填入 搜尋引擎 ID-->
<!--搜尋的name設定為q-->
				<form action="顯示崁入的網址" class="form-inline form-group my-5 my-lg-0 justify-content-center flex-nowrap">
					<input type="hidden" name="cx" value="搜尋引擎 ID" />
					<input type="hidden" name="ie" value="UTF-8" />
					<input type="text" name="q"class="form-control" placeholder="google站內搜尋" aria-label="google站內搜尋"
						aria-describedby="googleSearch">
					<button class="btn btn-outline-primary" type="submit">
						<i class="fas fa-search"></i>
					</button>
				</form>

顯示頁

<gcse:searchresults-only></gcse:searchresults-only>

Tags : google api