如何客製化Github Pages主頁
2021/07/10
經過建立自己的Github Pages之後，很多人應該都想自己調整主頁內容，可是又不會寫html怎麼辦 (像我)，所以我就參考了之前提到的教你建立Github Pages的文章內容，自行更改了我的layout，其實也還只能設定一些連結按鈕之類的。
複製style
首先在你的repo底下建立一個檔案/assets/css/style.scss，裡面僅輸入底下這樣就好。
---
---
@import "jekyll-theme-cayman";
更改layout
接著進入自己網頁的repo，建立一個檔案/_layouts/default.html，這個檔案就會覆寫原本從Cayman連結過來的default layout。
可是裡面是空的啊?我又不會寫，這時候就直接從Cayman的Github複製他的html程式碼過來，複製時記得點選raw後ctrl+A全選複製，底下我們解說這個複製過來的檔案要做什麼。
我的原則就是看不懂的地方就別動，這樣至少完全複製會有一樣的內容，前面不懂，所以我們從body部分開始一段一段看就好。
<body>
<a id="skip-to-content" href="#content">Skip to the content.</a>
這裡是body的開頭，不知為何預設了一行Skip to the content的醜醜按鈕，會出現在頁面的左上角，建議把這行刪除。
<header class="page-header" role="banner">
<h1 class="project-name">{{ page.title | default: site.title | default: site.github.repository_name }}</h1>
<h2 class="project-tagline">{{ page.description | default: site.description | default: site.github.project_tagline }}</h2>
{% if site.github.is_project_page %}
<a href="{{ site.github.repository_url }}" class="btn">View on GitHub</a>
{% endif %}
{% if site.show_downloads %}
<a href="{{ site.github.zip_url }}" class="btn">Download .zip</a>
<a href="{{ site.github.tar_url }}" class="btn">Download .tar.gz</a>
{% endif %}
</header>
這裡是Cayman頁面的頂端，<h1 class="project-name">開頭的這行代表最主要的標題，如果已經確定網頁只要用一個標題，就把這裡改成<h1 class="project-name">你的標題</h1>，看到這裡應該發現html的寫法會用<h1></h1>這樣的包夾，之後的<h2 class="project-tagline">同理修改。再來如果不想要有按鈕的話就把</header>之前的都刪掉，想要加入一個按鈕就使用<a href="連結" class="btn">顯示的內容</a>。
<main id="content" class="main-content" role="main">
{{ content }}
<footer class="site-footer">
{% if site.github.is_project_page %}
<span class="site-footer-owner"><a href="{{ site.github.repository_url }}">{{ site.github.repository_name }}</a> is maintained by <a href="{{ site.github.owner_url }}">{{ site.github.owner_name }}</a>.</span>
{% endif %}
<span class="site-footer-credits">This page was generated by <a href="https://pages.github.com">GitHub Pages</a>.</span>
</footer>
</main>
</body>
接著main裡不用動，就是你的內文，而最底下footer是網頁的底端，可以用預設的也不錯，不喜歡就自己改連結，原理跟前面一樣。
那麼這就是我第二天自學Github Pages的內容。