我的 Halo 博客 Earth 主题【代码注入】配置

全局页 head 标签

<!-- 博客列表页 #post-list -->
<style>
  #post-list>div>div { height: 100%; }
  #post-list>div>div>div:last-of-type { flex: 1; align-items: end; }
  #post-list>div>div>div:last-of-type { display: none; }
</style>

<!-- 侧边栏 社交媒体 图标 -->
<style>
  .container>aside>div>div>div:last-child * {
    color: #faa !important;
    font-size: 1.1em;
  }
</style>

内容页 head 标签

<!-- input[type="checkbox"] -->
<style>
  input[type="checkbox"] { position: relative; cursor: pointer; }
  input[type="checkbox"]::before {
    content: "";
    width: 115%;
    height: 115%;
    position: absolute;
    top: 0;
    left: 0;
    background: #fff;
    border: 1px solid #000;
    font-weight: bold;
    font-size: 0.8em;
    line-height: 1em;
    text-align: center;
  }
  input[type="checkbox"]:checked::before { content: "\2713"; }
  input[type="checkbox"] + span { margin-left: 0.5em; }
</style>

<style>
  
/* ------------------------------------------------------------------------ */

article#content{
  max-width: 40em;
  margin: 0 auto;
  padding: 4em clamp(1em, calc(1em + 3 * (100vw - 45em) / 10), 5em);;
  background-color: #fff;
  box-shadow: 0 0 10px 0 #bbb;
  color:black;
  text-align:justify;
  font-size: 16px;
}

/* ------------------------------------------------------------------------ */

/* debug，框选当前元素 */

article#content *:not(:has(>:hover)):hover {
  outline: 1px solid #f06;
  outline-offset: 1px;
}

/* ------------------------------------------------------------------------ */

/* 字体 */

article#content h1,
article#content h2,
article#content h3,
article#content h4,
article#content h5,
article#content h6 {
  font-family: 'Times New Roman', 'simhei', sans-serif;
}

article#content p,
article#content table th,
article#content table td,
article#content ol li,
article#content ul li,
article#content details,
article#content summary {
  font-family: 'Times New Roman', 'simsun', serif;
}

article#content pre,
article#content code {
  font-family: monospace;
}

/* ------------------------------------------------------------------------ */

/* 标题 */

article#content h1 {
  margin: 0.5em 0;
  font-size: 2.4em;
  font-weight: normal;
  text-align: center;
  word-wrap: break-word;
}

article#content h2 {
  margin: 0.8em 0;
  font-size: 1.2em;
}

article#content h3 {
  margin: 0.5em 0;
  font-size: 1em;
}

article#content h4,
article#content h5,
article#content h6 {
  margin: 0.5em 0;
  font-size: 1em;
}

/* 标题自动编号 */

article#content h1 {                                counter-reset: h2_counter; }
article#content h2 { counter-increment: h2_counter; counter-reset: h3_counter; }
article#content h3 { counter-increment: h3_counter; counter-reset: h4_counter; }
article#content h4 { counter-increment: h4_counter; counter-reset: h5_counter; }
article#content h5 { counter-increment: h5_counter; counter-reset: h6_counter; }
article#content h6 { counter-increment: h6_counter;                            }

article#content h2:before { content: counter(h2_counter) "." }
article#content h3:before { content: counter(h2_counter) "." counter(h3_counter) "." }
article#content h4:before { content: counter(h2_counter) "." counter(h3_counter) "." counter(h4_counter) "." }
article#content h5:before { content: counter(h2_counter) "." counter(h3_counter) "." counter(h4_counter) "." counter(h5_counter) "." }
article#content h6:before { content: counter(h2_counter) "." counter(h3_counter) "." counter(h4_counter) "." counter(h5_counter) "." counter(h6_counter) "." }
 
article#content h2:before,
article#content h3:before,
article#content h4:before,
article#content h5:before,
article#content h6:before { margin-right: 1em;}

/* ------------------------------------------------------------------------ */

/* 段落 */

article#content p {
  text-indent: 2em;
  line-height: 1.4em;
  font-size: 1em;
  margin: 0;
  word-break: break-all;
}

article#content strong { color: #f06; }

article#content a { color: #06f; }

/* ------------------------------------------------------------------------ */

/* 三线表 */

article#content table {
  display: table;
  min-width: 50%;
  max-width: 98%;
  width: fit-content;
  margin: 1em auto;
  border-top: 1.5px solid #000;
  border-bottom: 1.5px solid #000;
  border-collapse: collapse;
  text-align: center;
  overflow: auto;
}

article#content table thead {
  border-bottom: 1px solid;
}
article#content table tr {
  border: none;
  background-color: transparent;
}
article#content table th,
article#content table td {
  padding: 0.1em 0.8em;
  border: none;
}

/* ------------------------------------------------------------------------ */

/* 列表 */

article#content ul,
article#content ol {
  padding-left: 2em;
  margin: 1em 0;
}

article#content ul li, 
article#content ol li {
  line-height: 1.4em;
  font-size: 1em;
}

/* ------------------------------------------------------------------------ */

/* 行内代码 */

article#content code {
  border-radius: 0;
  color: #a30;
  background-color: transparent;
}
article#content code::before,
article#content code::after { content: "`"; }

/* 代码块 */

article#content pre {
  margin: 1em 0;
  padding: 0.2em 0.5em 0.3em 0.5em;
  overflow: auto;
}

article#content pre:has(code) { border: 1px solid #000; }
article#content pre code {
  border: none;
  color: #000;
}
pre code::before, pre code::after { display: none; }

/* ------------------------------------------------------------------------ */

/* 引用 */

article#content blockquote {
  margin: 1em 0;
  padding-left: 1.2em;
  border-left: 0.3em solid #ddd;
  color: #000;
  background-color: transparent;
}

/* ------------------------------------------------------------------------ */

/* 图片 */

article#content img {
  display: block;
  margin: 1em auto;
  min-width: 30%;
  max-width: 98%;
}

/* ------------------------------------------------------------------------ */

/* 分割线 */

article#content hr {
  margin: 0.5em 0;
  border: none;
  border-bottom: 1px solid #000;
}

/* ------------------------------------------------------------------------ */

/* 折叠框 */

article#content details {
  padding: 0.2em 0.5em;
  border: 1px solid #000;
}

article#content details > * {
  overflow-x: auto;
  overflow-y: clip;
}

article#content details > summary {
  margin: 0 -0.5em;
  padding: 0 0.5em;
  font-size: 1em;
  cursor: pointer;
}

article#content details[open] > summary {
  padding-bottom: 0.2em;
  margin-bottom: 0.5em;
  border-bottom: 1px solid #000;
}

/* ------------------------------------------------------------------------ */

/* latex 公式 */

article#content .katex {
  color: #369;
}

/* ------------------------------------------------------------------------ */

</style>

页脚

<!-- helper -->
<script>
  /* 将一段文本写入剪切板 */
  function copy_text(text) {
    const textarea = document.createElement("textarea");
    textarea.value = text;
    document.body.appendChild(textarea);
    textarea.select();
    try {
       return document.execCommand("copy");
    } catch (err) {
       return false;
    } finally {
      textarea.remove();
    }
  }

  /* 返回指定长度的随机字符串 */
  function random_str(len) {
    let result = "";
    const char_set = "abcdefghijklmnopqrstuvwxyz";
    for(let i = 0; i < len; i++)
      result += char_set[Math.round(Math.random() * (char_set.length - 1))];
    return result;
  }

  /* 往 <head> 中添加一个 <style> */
  function add_css(css_text) {
    const style = document.createElement('style');
    style.type = 'text/css';
    style.appendChild(document.createTextNode(css_text));
    document.head.appendChild(style);
  }

  /* 获取博客正文的 DOM */
  const this_article = document.querySelector("article#content");
</script>

<!-- 增加博客正文和 tag 栏的间距 -->
<script>
  if (this_article !== null)
    this_article.style.marginTop = "0.5em";
</script>

<!-- 移除上一篇博客和下一篇博客的跳转按钮 -->
<script>
  if (null !== this_article)
    this_article.nextElementSibling.remove()
</script>

<!-- 删去文章分类标签开头的 # 符号 -->
<script>
  const tag_css = "tag_" + random_str(4);
  add_css(`
  a.${tag_css} {
    font-size: .875rem;
    padding: 0 0.5em;
    border-radius: 4px;
    background: #fff;
    color: #222;
    cursor: pointer;
    border: 1px solid #ccc;
  }
  a.${tag_css}:hover {
    background-color: #f3f3f3;
  }`);
  document.querySelectorAll(".container a[href^='/tags/']").forEach(a => {
    a.textContent = a.title;
    a.className = tag_css;
  })
</script>

<!-- 代码块语法着色，以及代码注入 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/vs.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
<script>
(function(){
  if (this_article == null)
    return;

  /* 给代码块语法着色，并在顶部添加语言名字和复制按钮 */
  function highlight(code, language) {

    hljs.highlightElement(code);
    code.style.padding = "0.2em 0.5em";
    code.style.backgroundColor = "#fff";
    code.style.borderRadius = "0";

    const pre = code.parentNode;
    pre.style.borderRadius = "0";

    const p = document.createElement("p");
    p.style.textIndent = "0";
    p.style.padding = "2px 10px";
    p.style.margin = "0";
    p.style.borderBottom = "1px solid #000";
    p.style.color = "#222";
    
    const span = document.createElement("span");
    span.textContent = language;
    p.appendChild(span);
    
    const btn_text_content = "[copy]"
    const button = document.createElement("button");
    button.textContent = btn_text_content;
    button.style.float = "right";
    const code_text_content = code.textContent;
    button.onclick = () => {
      const result = copy_text(code_text_content);
      button.textContent = `[${result ? "done" : "failed"}] ${btn_text_content}`
    };
    button.addEventListener("mouseout", () => { button.textContent = btn_text_content });
    p.appendChild(button);
    
    pre.insertBefore(p, code);
  }

  this_article.querySelectorAll("pre > code").forEach(code => {
    const matched = code.classList.value.match(/language-(\w*)/);
    const language = (matched !== null && matched.length == 2) ? matched[1] : " ";

    if (language !== "injected_html") {
      /* 代码块语法高亮 */
      highlight(code, language);
    }
    else {
      /* 注入代码 */
      const injected = document.createElement("div");
      injected.innerHTML = code.textContent;
      const pre = code.parentNode;
      pre.parentNode.replaceChild(injected, pre);
      
      injected.querySelectorAll('script').forEach(script => {
        const new_script = document.createElement('script');
        new_script.textContent = script.textContent;
        for (let attr of script.attributes) {
          new_script.setAttribute(attr.name, attr.value);
        }
        script.parentNode.replaceChild(new_script, script);
      });
    }
  })
})();
</script>