博客修护笔记

24 Nov 2020

如何修改GitHub page中每篇博客的链接？如何加入全文搜索功能？如何把fork来的仓库之前的commit都清零？等等问题，随时学习，随时记录。

修改文章post链接地址
加入全文搜索功能
修改配色
将所有之前别人的commits都清零
使用自定义域名
给博客增加目录
电脑手机的responsive设计
添加google analytic
索引页面增加post计数和排序
Changelog

修改文章post链接地址

jekyll默认为博客配置的地址实在有些长，比如本文曾经默认的链接地址是/2020/11/24/improve_jekyll_pages。这么多层叠加，不利于搜索引擎寻找都该页面。所以为了方便搜索，所谓SEO优化。

一是修改博客链接。

博客的地址是采用permalink设置的。参考官网 Permalinks_Jekyll。

只要在根目录下的_config.yml文件中，写上一行permalink: /:title.html。中间有一个空格。

二是在每个博客页面的前面，加一个description.几句话描述下这个页面。

加入全文搜索功能

使用的现成的代码仓库在这里：Simple-Jekyll-Search

参考：可能是最全面的github pages搭建个人博客教程

自己的折腾步骤记录如下：

在这里下载文件 simple-jekyll-search.min.js放到博客仓库里。
再在仓库里放一个json文件，代码在其wiki中。

这样可以开展全文搜索。不过我照搬后报错，于是删掉第二部分搜索页面功能，只保留搜索博文。代码在ericazhan.github.io/search.json

在html文件中想放搜索框的地方，抄入如下别人的代码，两个引用文件的地址按情况调整：

 <div class="search-container">
   <input type="text" id="search-input" placeholder="search blog posts...">
   <ul id="results-container"></ul>
 </div>
 <script src="../public/simple-jekyll-search.min.js"></script>
 <script>
     window.simpleJekyllSearch = new SimpleJekyllSearch({
     searchInput: document.getElementById('search-input'),
     resultsContainer: document.getElementById('results-container'),
     json: '../public/search.json',
     searchResultTemplate: '<li><a href="{url}?query={query}" title="{desc}">{title}</a></li>',
     noResultsText: 'No results found',
     limit: 10,
     fuzzy: false,
     exclude: ['Welcome']
   })
 </script>

修改搜索框样式

设计样式挑选自20 Creative Search Bar Design，照抄代码在这里。SCSS和CSS格式有差异，手动改了下，放到博客的css文件中。

修改配色

想把原来的颜色变浅一点，但是在同样的色系里，比如之前的搜索键的深红色换成浅红。

可以通过代码中的颜色编码 #ca4d4d 在这个网站 Hex Color Codes可以找到比它更深或更浅的颜色代码。

将所有之前别人的commits都清零

保持现在博客状态，但是如何把commit历史清零？以下是安全做法： git - how to delete all commit history in github? - Stack Overflow

新建一个孤子分支，并进入这个分支

git checkout --orphan temp_branch
在孤子分支中复制所有master分支的文件，commit

git add -A

git commit -am "my first message"
删除原本的master分支

git branch -D master
把孤子分支改名为master

git branch -m master
强制更新远端仓库

git push -f origin master

使用自定义域名

购买域名。

我的域名是今年年初在godaddy买的。直接买了10年。买之前一定先搜索 godaddy优惠码！比如我用的最新GoDaddy 优惠码及GoDaddy常见问题汇总

买完后有朋友说买贵了，godaddy并不实惠。。推荐实惠网站NameSilo以及实惠服务器 Cloudways
在GitHub博客仓库中新建一个文件，CNAME ，没有文件后缀。

用文本打开，写入域名 zhanluyan.com
去godaddy设置DNS，添加至少3条记录
- CNAME-WWW-ericazhan.github.io
- A-@-185.199.108.153
- A-@-185.199.109.153
A 这行的ip地址是 github page的ip 地址。官方查询在这里。官方一共提供4个ip地址，也可以都加上。

这三步做完，等待1小时就可以了~

主要参考：陈素封：如何搭建个人独立博客？ - 知乎

给博客增加目录

jekyll默认使用Kramdown来解析markdown语法，kramdown自带生成目录功能。先检查你的jekyll是不是kramdown解析，需要看 _config.yml 文件中是否有这一行：

markdown: kramdown

如果的确是kramadown,那么增加目录特别简单，不需要任何附加插件，自带生成目录功能。添加目录，只要在对应博客的md文件中，希望增加目录的地方写这两行代码就OK啦。

* TOC
{:toc}

参考：How I Add a Table of Contents to my Jekyll Blog Written in Markdown

电脑手机的responsive设计

原则：哪个设备有特殊格式需求，就专门给这个设备写一个css格式。

比如，我希望自己的博客文章在电脑端的文本宽度是550px，其他手机端不变。那么对于.post我需要专门加一个为电脑屏幕的css格式：新格式(wid:550px)

responsive的语法很简单：

@media (device condition) { /* CSS Rules */ }

电脑屏幕宽度一定大于500px，所以设备条件是 min-width: 500px。

前面是.post原格式，后面是为.post加入reponsive格式

.post {
  margin-bottom: 1em;
}	}

@media (min-width: 500px){
  .post {
    width: 550px;
  }
}

commit实例：文本宽度电脑端变短 ; 搜索框手机端变小

ref: Learn Responsive Web Design Principles: Create a Media Query - freeCodeCamp.org

添加google analytic

去Google Analytics注册一个号。这里用户名不用考虑太多，是属于你google账号下的分用户名。按照自己需求取名就好。
选择“衡量网站”，输入你想衡量统计的网址，点击“创建”。
一般创建完会自动跳到代码页。把这些js代码复制到博客<head>中就完成啦。如果没有自动跳转，那么在管理(administration) — 跟踪信息(Flux de données)，点进去会看到”跟踪代码js”。

索引页面增加post计数和排序

post计数的变量是 35 按照categories计数，变量是 0

排序的功能需要使用sort这个liquid语言自带的filter来排序。

比如给category排序。如果不使用sort，默认是按照category添加的顺序排序。

按照字母顺序alphabetic把各category排序: 先通过assing定义一个list,再在这个排序过的list里循环

 
{% assign sorted_categories = site.categories | sort %}
{% for category in sorted_categories %}

比如如果想把文章按标题排序：

 
{{ site.pages | sort: "title", "last" }}

PS, 为了呈现liquid语言，但又不想它被parser,需要使用Raw标签。

Ref: sort-Stack Overflow， Advanced Liquid: Sort - Siteleaf， Liquid Filters-Jekyll

Changelog

210114 +google analytic + posts统计排序
210110 + reponsive设计
201231 +博客增加目录
201130 加入自定义域名章节，补充搜索章节的具体步骤
201124 init

["web", "code"]

本作品采用 CC BY-NC-ND 进行许可. 如需转载, 请标明 ericazhan + 源地址

Glider

Too fast to live.

erica's playground share my work