XDong Blog

XDong Blog的模板来自于Hux Blog

github仓库为：repo

XDong Blog clone的分支为dependabot/npm_and_yarn/lodash-4.17.19

github page

XDong Blog使用的是github page，并绑定了自己的域名xdong.site

jekyll

Jekyll 是一个简单的博客形态的静态站点生产机器。它有一个模版目录，其中包含原始文本格式的文档，通过一个转换器（如 Markdown）和我们的 Liquid 渲染器转化成一个完整的可发布的静态网站，你可以发布在任何你喜爱的服务器上。Jekyll 也可以运行在 GitHub Page 上，也就是说，你可以使用 GitHub 的服务来搭建你的项目页面、博客或者网站，而且是完全免费的。

jekyll教程：

部分_config.yml配置说明

# MathJax rendering for layout:page (e.g. post preview)
page-mathjax: true
# 说明：是否对数学公式进行渲染（渲染的话显示的公式在网页加载的时候会出现变化）（不过我现在还不知道有什么用）

数学公式

在_includes/head.html文件中添加代码

    <!-- 数学公式 -->
    <script type="text/x-mathjax-config">
        MathJax.Hub.Config({
            tex2jax: {
                skipTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code'],
                inlineMath: [ ['$','$'] ],
                <!--不需要displayMath(行外公式 我也不知道为什么)-->
                processEscapes: true
            },
            TeX: {
                equationNumbers: {
                    autoNumber: "AMS"
                },
                <!--自定义的宏-->
                Macros: {
                    lbrace: "\\{",
                    rbrace: "\\}"
                }
            }
        });
    </script>

自定义宏

在mathjax中，公式中的”{“要用”\\{“来表示，但是vscode中的”{“却是用”\{“来表示，这就导致博客和vscode markdown中总会有一个无法正确显示公式

查询资料看到了stackoverflow中有人用自定义宏的方式解决了这样的问题

最后我通过在mathjax和vscode markdown-all-in-one中定义一个同名的宏解决了问题

mathjax

mathjax中宏的用法MathJax文档

Macros: {
    lbrace: "\\{",
    rbrace: "\\}"
}

vscode markdown-all-in-one

KaTeX中宏的用法Markdown+Math

"markdown.extension.katex.macros": {
    "\\lbrace": "\\{",
    "\\rbrace": "\\}"
}

评论框

以前用的是disqus，但是disqus的评论框不能免费去广告

现在已经换成gitalk

gitalk教程：

Add Gitalk to Your Jekyll Blog

建站时间与网站计数

首先引入在footer.html中引入脚本

<!-- 不蒜子脚本 -->
<script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js">
</script>

然后添加span

<!-- 站点计时 -->
<span id='site_time'></span>
<br>
<!-- 不蒜子计数 -->
<span id="busuanzi_container_site_uv">
    👤Total Visitors <span id="busuanzi_value_site_uv"></span> |
</span>
<span id="busuanzi_container_site_pv">
    👀Total Visits <span id="busuanzi_value_site_pv"></span>
</span>
<br>

编写js计时函数

<!-- 站点计时 -->
<script>
    function siteTime() {
        window.setTimeout("siteTime()", 1000);
        var seconds = 1000;
        var minutes = seconds * 60;
        var hours = minutes * 60;
        var days = hours * 24;
        var years = days * 365;
        var today = new Date();
        var todayYear = today.getFullYear();
        var todayMonth = today.getMonth() + 1;
        var todayDate = today.getDate();
        var todayHour = today.getHours();
        var todayMinute = today.getMinutes();
        var todaySecond = today.getSeconds();
        var t1 = Date.UTC(2020, 10, 24, 00, 00, 00);  //此处填写建站时间
        var t2 = Date.UTC(todayYear, todayMonth, todayDate, todayHour, todayMinute, todaySecond);
        var t2 = Date.UTC(todayYear, todayMonth, todayDate, todayHour, todayMinute, todaySecond);
        var diff = t2 - t1;
        var diffYears = Math.floor(diff / years);
        var diffDays = Math.floor((diff / days) - diffYears * 365);
        var diffHours = Math.floor((diff - (diffYears * 365 + diffDays) * days) / hours);
        var diffMinutes = Math.floor((diff - (diffYears * 365 + diffDays) * days - diffHours * hours) / minutes);
        var diffSeconds = Math.floor((diff - (diffYears * 365 + diffDays) * days - diffHours * hours - diffMinutes * minutes) / seconds);
        var title = 'XDong Blog'  // 获取名称
        document.getElementById("site_time").innerHTML =
            "⏱️" + title + " already run " + diffYears + " years " + diffDays + " days " + diffHours + " hours " + diffMinutes + " mins " + diffSeconds + " s";
    }
    siteTime();
</script>

jekyll livereload

LiveReload is available as an option during development: with jekyll serve –livereload no more manual page refresh.

正常情况下，可以通过jekyll serve --livereload来使用livereload功能

由于部分jekyll版本需要安装eventmachine，要在Gemfile中添加一行代码

gem 'eventmachine', '1.2.7', git: 'https://github.com/eventmachine/eventmachine.git', tag: 'v1.2.7'

⚠️ 但是在Hux Blog中，livereload功能没有作用，在新的jekyll项目是可以起作用的

百二秦关终属楚

最后终于可以使用livereload了！！！😊😊😊

查看控制台报错，发现是cors的原因
google了下原因，修改了sw.js 中189行为const fetched = fetch(getCacheBustingUrl(event.request), { cache: "no-store", mode: "no-cors"});
已经可以成功刷新，修改为延迟自动刷新，在sw-registration.js中增加一行 setTimeout(()=>location.reload(), 3000)

cdn资源总结

lib.baomitu.com用于大部分js文件，如Mathjax，fastclick，部分css文件，如font-awesome，原cdnjs.cloudflare.com的国内访问不流畅
alicdn用于bilibili图标
cdn.jsdelivr.net用于gitalk的js文件

参考：

关于我的博客

这篇博客是给以后的自己的教程