#1 利用Github Pages白嫖个人博客

←返回 | 创建：2022-07-20 | 最后更新：2023-01-30

2023-01-27 updata

今天发现一篇博客，进而发现跟着docs走的我完全没有用上Jekyll的特性
比如搜索、侧边栏、插件啥啥啥的……

唯一一点：解决了Jekyll的md解释器默认使用bug-ful的kramdown的问题

跟着文档走，用了github推荐的两个解释器：GFW和另一个（github pages默认使用）
其中推荐默认（_config.yml的markdown:一项注释），因为GFW不能解释部分html标签（比如<iframe></iframe>）
建立站点

首先新建仓库，取名[用户名].github.io

之后Setiings > Github Pages创建github.io站点

创建后回到仓库，打开(没有就新建)_config.yml，把下面的内容添加到文件中：

title: "改成你的个人博客标题"

这个相当于全局标题，会这样显示：页面标题(Markdown第一个标题) | 全局标题

建立博客

新建blogs文件夹，里面丢入index.md和search.html两个文件。

index.md 相当于博客首页
search.html 后面会说

之后新建一个文件夹，用texts之类命名

新建博客就相当于在texts里面新建xxx.md

或者直接参考文档建立帖子

建立首页 index.md

照markdown语法抄就行

开头要加上

---
layout: page
title: "kdXiaoyi's Blog"
permalink: /blogs/index.html
---

title后面是页面标题，可以自定义。其它的建议不要动有时候这个会抽风加载不出来，去掉就可以

建立搜索功能 search.html

搜索直接用html和js调用bing搜索

具体代码(释放)：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>搜索kdXiaoyi的blog</title>
  </head>
  <body>
    <h3>kdXiaoyi博客搜索</h3>
      <script>
        function OnSearchBtnClicked() {
         var githubP_url = "https://kdxiaoyi.github.io/blogs";
         var searchInput = document.getElementById('txt');
         var searchKey = searchInput.value;
         var bingurl="http://global.bing.com/search?q="+searchKey+"+site%3a" + githubP_url + "&qs=n&sp=-1&pq="+ searchKey +"&sc=8-0&sk=&setmkt=en-us&setlang=zh-cn&FORM=SECNEN";
         window.location.href=bingurl;
         }
      </script>
    <input id="txt" type="text" name="txt" value="">
      <button onclick="OnSearchBtnClicked()">BUG 搜索</button> 
  </body>
</html>

但直接这样搞不行，bing无论如何都会提示未能找到
测试了一下，返回http405错误

我又想到可以Ctrl+f搜索
于是，就直接加上alert("Ctrl+F 就可以搜索了。（MacOS是Command+F）")来显示提示框再加上返回操作，html代码就变成:

<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>搜索kdXiaoyi的blog</title>
  </head>
  <body>
    <h3>kdXiaoyi博客搜索</h3>
      <script>
        function OnSearchBtnClicked() {
          alert("Ctrl+F 就可以搜索了。 （MacOS是Command+F）");
          // 利用8种方法返回
          window.history.go(-1);
          window.history.back(-1);
          window.history.back();
          history.go(-1);
          history.back(-1);
          history.back();
          // 这2种方法防止一些人开新窗，但我也不知道好不好用
          const prevPageUrl = document.referer;
          document.location,href = prevPageUrl;
          // 要是不能返回就直接关闭
          window.close();

          //实际应用只需要选一个
         }
      </script>
    <input id="txt" type="text" name="txt" value="">
      <button onclick="OnSearchBtnClicked()">BUG 搜索</button> 
  </body>
</html>

结束

新建每一篇帖子之前，开头应加上

---
layout: page
title: "kdXiaoyi's Blog"
---

其中title后面是帖子标题，可以自定义。其它的建议不要动有时候这个会抽风加载不出来，去掉就可以

Markdown常用语法

# ## ### …… 各级标题。几个#就是几级标题，最多6级

_xxx_ or *xxx* 斜体    **xx** 加粗
*xxx  列表1    -xxx  列表2

[显示文字](链接地址)   链接
![提示信息](图片地址)  图片

[![图片描述](图片地址) 其它文字](链接地址) 图片链接(其它文字可以去掉)

~~ xxx ~~ 删除线

> xxx 表示引用

$ 连续两个，中间为数学公式
$ 连续三个，换行再三个，中间为数学公式

还有 ` 连续输入两个，中间就是单行代码块

` 连续输入三个再换行输入三个就是代码块。第一行那三个行尾可以写代码语言

单行代码块示例 E.G.

多行示例

ABCDEFG0123456 E.G.

md可以直接插入html标签，对于下面这段html，则效果在后面

<iframe width="100%" high="100%" src="//kdxiaoyi.github.io"></iframe>