←
手記

初具雛形

2023-08-09發表約 5 分鐘工程日記網站
本頁目次

To-do list for my site

  1. 為 Navigation Bar 新增 Categories
  2. code block
    1. 增加 copy 按鈕
    2. Line number
    3. 還要再新增 code block 的 title！
    4. copy時不要copy到Line number
    5. 最好再調整一下按鈕的位置！
    6. title的位置，希望固定於container，不要隨滾動條而移動
    7. （水平滾動條中）single line highlight 的長度？！
  3. Lastmod
  4. Back-to-top button
  5. cursor effect

配置文件 config.yaml 和 config.toml 不可以同時存在？

一直卡住，原來是因為我的路徑中同時存在config.yaml和config.toml兩個配置文件，打架了啦！只會認一個！

於是我只留下config.yaml。終於一切都正常了QQ

自我感動中

為 Navigation Bar 新增 Categories

為navigation bar 新增了 Categories（類別） 的 Taxonomies

taxonomies:
  categories: categories
  tags: tags

<a href="{{ "/categories" | relURL }}">{{ i18n "categories" }}</a>

改良code block

Two methods for code block1

  1. Highlighting in code fences【推薦，可附加檔案名】

```html
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Example HTML5 Document</title>
</head>
<body>
  <p>Test</p>
</body>
</html>


2. Highlight shortcode【好像沒辦法加註檔案名】
```markdown
<!-- Highlight shortcode -->
{{</* highlight html*/>}}
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Example HTML5 Document</title>
</head>
<body>
  <p>Test</p>
</body>
</html>
{{</* /highlight */>}}

Output:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Example HTML5 Document</title>
</head>
<body>
  <p>Test</p>
</body>
</html>

這個不好看（且不兼容我的 copy 按鈕），不要：

\<?php
  echo 'Hello, Mom, I am here.';
?>

增加 copy 按鈕 2

用 code fences 可實現加註檔案名

js:

function createCopyButton(highlightDiv) {
  const button = document.createElement("button");
  button.className = "copy-code-button";
  button.type = "button";
  button.innerText = "Copy";
  button.addEventListener("click", () =>
    copyCodeToClipboard(button, highlightDiv)
  );
  addCopyButtonToDom(button, highlightDiv);
}

async function copyCodeToClipboard(button, highlightDiv) {
  const codeToCopy = Array.from(highlightDiv.querySelectorAll(":last-child > .chroma > code > .line >.cl")) 
  //嗷嗷解決了！！！終於不會copy到line number！
  .map(codeElement => codeElement.innerText)
  .join(" ");
  try {
    result = await navigator.permissions.query({ name: "clipboard-write" });
    if (result.state == "granted" || result.state == "prompt") {
      await navigator.clipboard.writeText(codeToCopy);
    } else {
      copyCodeBlockExecCommand(codeToCopy, highlightDiv);
    }
  } catch (_) {
    copyCodeBlockExecCommand(codeToCopy, highlightDiv);
  } finally {
    codeWasCopied(button);
  }
}

function copyCodeBlockExecCommand(codeToCopy, highlightDiv) {
  const textArea = document.createElement("textArea");
  textArea.contentEditable = "true";
  textArea.readOnly = "false";
  textArea.className = "copyable-text-area";
  textArea.value = codeToCopy;
  highlightDiv.insertBefore(textArea, highlightDiv.firstChild);
  const range = document.createRange();
  range.selectNodeContents(textArea);
  const sel = window.getSelection();
  sel.removeAllRanges();
  sel.addRange(range);
  textArea.setSelectionRange(0, textArea.value.length);
  // document.execCommand("copy");
  highlightDiv.removeChild(textArea);
}

function codeWasCopied(button) {
  button.blur();
  button.innerText = "Copied!";
  setTimeout(function () {
    button.innerText = "Copy";
  }, 2000);
}

function addCopyButtonToDom(button, highlightDiv) {
  highlightDiv.insertBefore(button, highlightDiv.firstChild);
  const wrapper = document.createElement("div");
  wrapper.className = "highlight-wrapper";
  highlightDiv.parentNode.insertBefore(wrapper, highlightDiv);
  wrapper.appendChild(highlightDiv);
}

document
  .querySelectorAll(".highlight")
  .forEach((highlightDiv) => createCopyButton(highlightDiv));

css:

.highlight-wrapper {
    display: block;
  }
  
  /* Start: Turn off individual column border, margin, and padding when line numbers are showing */
  .highlight-wrapper .lntd pre {
      padding: 0;
  }
  
  .chroma .lntd pre {
      border: 0px solid #ccc;
  }
  
  .chroma .lntd:first-child {
    padding: 7px 7px 7px 10px;
    margin: 0;
  }
  
  .chroma .lntd:last-child {
    padding: 7px 10px 7px 7px;
    margin: 0;
  }
  /* End: Turn off individual column border, margin, and padding when line numbers are showing */
  
  .highlight {
    position: relative;
    z-index: 0;
    /* padding: 20px; */
    /* margin: 40px 0 10px 0; */

    border-radius: 4px;
    top: 0px; /* Adjust this value */
  }
  
  .highlight > .chroma {
    position: relative;
    z-index: 1;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    padding: 50px 10px 10px 10px;
    /* margin: 40 0 0 0px; */
  }
  
  .copy-code-button {
    position: absolute;
    z-index: 2;
    right: 0px;
    top: 15px;
    font-size: 13px;
    font-weight: 700;
    line-height: 14px;
    width: 65px;
    color: #232326;
    background-color: #e8d8d8;
    border: 1.25px solid #dbdbf0;
    border-top-left-radius: 0;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 4px;
    white-space: nowrap;
    padding: 4px 4px 5px 4px;
    margin: 0 0 0 1px;
    cursor: pointer;
    opacity: 0.6;
  }
  
  .copy-code-button:hover,
  .copy-code-button:focus,
  .copy-code-button:active,
  .copy-code-button:active:hover {
    color: #222225;
    background-color: #b3b3b3;
    opacity: 0.8;
  }
  
  .copyable-text-area {
    position: absolute;
    height: 0;
    z-index: -1;
    opacity: .01;
  }
  
  
  .chroma [data-lang]:before {
    position: absolute;
    z-index: 2;
    top: 0px;
    left: 0;
    content: attr(data-lang);
    font-size: 13px;
    font-weight: 700;
    color: white;
    background-color: black;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    padding: 6px 6px 7px 6px;
    line-height: 14px;
    opacity: 0.6;
    position: absolute;
    letter-spacing: 0.5px;
    border: 1.25px solid #232326;
    margin: 0 0 0 1px;
  }

在配置文件中新增css及js檔案

customCSS:
  - css/copy-code-button.css
customJS:
  - js/copy-code-button.js

<!-- ```go {title="main.go"} package main

func main() { println("Hugo rules!!!!") }


<!-- ```javascript:test.js
console.log("Have a nice blog life!!!");
``` -->

## 增加 Back-to-top button [^2]

[^2]: [Reference for the Back-to-top button](https://www.ariesme.com/posts/2019/add_go_top_button_for_hugo/) 

新增：

```html:baseof.html
<body>
  <button class="btn" onclick="smoothScrollTop()" id="goTopBtn" title="Go to top">TOP</button>
</body>

js:

// When the user scrolls down 20px from the top of the document, show the button
window.onscroll = function() {scrollTopButton()};

function scrollTopButton() {
  if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
    document.getElementById("goTopBtn").style.display = "block";
  } else {
    document.getElementById("goTopBtn").style.display = "none";
  }
}

// When the user clicks on the button, scroll to the top of the document
function scrollTop() {
  document.body.scrollTop = 0; // For Safari
  document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
}

//Smooth scroll to the top of the document
function smoothScrollTop(){
    var timer  = null;
    cancelAnimationFrame(timer);
    timer = requestAnimationFrame(function fn(){
        var oTop = document.body.scrollTop || document.documentElement.scrollTop;
        if(oTop > 0){
            document.body.scrollTop = document.documentElement.scrollTop = oTop - 50;
            timer = requestAnimationFrame(fn);
        }else{
            cancelAnimationFrame(timer);
        }
    });
}

css:

#goTopBtn {
    display: none; /* Hidden by default */
    position: fixed; /* Fixed/sticky position */
    bottom: 25px; /* Place the button at the bottom of the page */
    right: 25px; /* Place the button 30px from the right */
    z-index: 99; /* Make sure it does not overlap */
    border: none; /* Remove borders */
    outline: none; /* Remove outline */
    cursor: pointer; /* Add a mouse pointer on hover */
    padding: 10px; /* Some padding */
    border-radius: 0.3em; /* Rounded corners */
    font-size: 12px; /* Increase font size */
  }

/* Button */
.btn {
	padding: 5px 10px;
	font-weight: 700;
	color: #fff;
	white-space: pre-line;
	background: #2a2a2a;
}

.btn:hover {
	color: #fff;
	background: #f04343a8;
}

在配置文件中新增css及js檔案

customCSS:
  - css/back-to-top.css
customJS:
  - js/back-to-top.js

改了CSS中按鈕響應的顏色，改成比較粉色的XD

用平滑向上，感覺滑動速度太慢了！沒耐心

盲猜，修改了一下back-to-top.js中，以下function的數值，從50改成500，果然快了～

//Smooth scroll to the top of the document
function smoothScrollTop()\{
    var timer  = null;
    cancelAnimationFrame(timer);
    timer = requestAnimationFrame(function fn()\{
        var oTop = document.body.scrollTop || document.documentElement.scrollTop;
        if(oTop > 0)\{
            document.body.scrollTop = document.documentElement.scrollTop = oTop - 500;
            timer = requestAnimationFrame(fn);
        }else\{
            cancelAnimationFrame(timer);
        }
    });
}

Archive Appearance

#archive .group .value .title {
  display: inline-flex;
}
#archive .group .value .tags {
  display: block;
  margin-left: 60px;
}

調整標題樣式

文章置頂

weight: 1

Markdown正文中插入表情3

表情4存放路徑：static/emoji

{{ $name := .Get "name" }}
<img
    src="/emoji/{{ $name }}.{{ with .Get "ext" }}{{ . }}{{ else }}gif{{ end }}"
    title="{{ with .Get "title" }}{{ . }}{{ else }}{{ $name }}{{ end }}"
    alt="{{ with .Get "alt" }}{{ . }}{{ else }}{{ $name }}{{ end }}"
    {{ with .Get "width" }} width="{{ . }}"{{ else }}width="16"{{ end }}
    {{ with .Get "height" }} height="{{ . }}"{{ else }}height="16"{{ end }}
    style="vertical-align:middle;"
/>


表情前面的文字{{</* emoji name="2@2x" */>}}{{</* emoji name="12@2x" */>}}表情後面的文字

成果：

表情前面的文字2@2x12@2x表情後面的文字

Footnotes

  1. Reference for the code clock ↩

  2. Reference for the copy button ↩

  3. Reference for the inline emoji shortcut ↩

  4. Reference for the 表情包 ↩