8.11
This commit is contained in:
小赵同学 committed
1 parent
78a6cc46cd
commit
e86aebf49b
86 files changed
+1064
-391
No files matched your search
+104
-12
@@ -6,7 +6,102 @@
|
||||
<description></description>
|
||||
<generator>Hugo -- gohugo.io</generator>
|
||||
<language>zh-cn</language>
|
||||
<lastBuildDate>Wed, 07 Aug 2024 16:10:05 +0800</lastBuildDate><atom:link href="https://usj.cc/post/rss.xml" rel="self" type="application/rss+xml" />
|
||||
<lastBuildDate>Sun, 11 Aug 2024 20:52:39 +0800</lastBuildDate><atom:link href="https://usj.cc/post/rss.xml" rel="self" type="application/rss+xml" />
|
||||
<item>
|
||||
<title>迁移博客至hugo</title>
|
||||
<link>https://usj.cc/post/migrate-to-hugo/</link>
|
||||
<pubDate>Sun, 11 Aug 2024 20:52:39 +0800</pubDate>
|
||||
|
||||
<guid>https://usj.cc/post/migrate-to-hugo/</guid>
|
||||
<description>近日，在午休的时候，突然收到了腾讯云的短信，起初以为就是腾讯云的新产品上线的营销短信，也就没管它 午觉起床仔细查看，原来是我当时买的四年腾讯云</description>
|
||||
|
||||
<content:encoded><![CDATA[<img loading="lazy" decoding="async" src="/" alt="迁移博客至hugo" /><p>近日，在午休的时候，突然收到了腾讯云的短信，起初以为就是腾讯云的新产品上线的营销短信，也就没管它</p>
|
||||
<p>午觉起床仔细查看，原来是我当时买的四年腾讯云轻量服务器马上要到期了，于是去腾讯云官网看看有没有划算的活动，再续几年，不出我所料，腾讯云只对新用户才有优惠活动，而老用户单纯续费不走活动的话，价格不是我这种小博主可以承担的起的</p>
|
||||
<p>所以只能放弃，再寻它法</p>
|
||||
<p>经历差不多三四天内心博弈与挣扎，总算下定决心，我要转静态博客，比较有名的静态博客平台就属hexo，hugo，因为hexo有丰富的主题和插件生态以及很多优秀积极活跃的开发者，所以我首选的静态博客平台是hexo，实际用了几天hexo，然后再和hugo测试对比，我还是放弃了hexo</p>
|
||||
<p>没有选择使用 Hexo 的一个最大原因是，Hexo 的性能远远不及 Hugo</p>
|
||||
<p>我的博客文章从typecho导出大概有一百多篇文章，用hexo构建，大部分情况下需要半分钟，而在老家那个老式办公机，可能是电脑性能太差，经常会出现构建失败，而用hugo却只需要两秒即可构建所有页面及文章，即使我的老式办公机也可以快速构建，极大的原因可能是hugo的底层是go写的，构建速度会比hexo快很多</p>
|
||||
<p>下决心转到hugo的这几天里，给我最大的感受就是hugo的主题真的是太少了，大部分都是老外写的，因为自己下载的hugo最新的版本，一些比较老的hugo主题，实际运行会出现奇奇怪怪的报错，试了几个比较满意的主题都遇到各种奇奇怪怪的报错问题，对一个新手来说还真的是蛮打击心态的，找了一圈也没有找到满意的</p>
|
||||
<p>于是我又萌生了一个大胆的想法，自己尝试写一个自用的hugo主题</p>
|
||||
<p>果不其然，我又遇到了第二个棘手的问题，hugo的文档真的很差，大部分都是机翻，描述的语言晦涩难懂，对于一个新手开发者真的太打击了</p>
|
||||
<p>不过好在，之前二开过几款typecho主题，所以也是有了点自己的门道，找了几款star比较多的hugo主题，将它的主题源码下载下来，研究学习，经过差不多半个月的摸爬滚打，也算是把主题的雏形慢慢搓出来了</p>
|
||||
<p>从此，我的博客彻底定型为hugo</p>
|
||||
<h2 id="个人感受">个人感受</h2>
|
||||
<p>最大的感受就是静态博客真的很省心，转到了静态博客，我不用再花费相当大的精力去维护LNMP 类型的博客（typecho）</p>
|
||||
<p>因为静态博客不再依赖数据库，也不会遇到数据库长时间不重启，突然某一天自己熄火</p>
|
||||
<p>其次再也不用为ssl证书发愁，通过GitHub action 自动构建在博客托管平台，vercel会自动帮我续期ssl证书</p>
|
||||
<p>此外我也不用再考虑通过各种各样的插件优化博客速度，静态博客全站静态化搭配国内cdn，可以达到相当快很快的访问速度</p>
|
||||
<p>我也不用花精力在备份上了，静态博客全站托管在GitHub，通过GitHub action 自动化构建，GitHub存一份，腾讯云oss存一份，又拍云存一份，基本上都是自动化，省去了很多人工操作</p>
|
||||
<p>或许我只用关心如何写好自己的文章</p>
|
||||
<h2 id="关于主题">关于主题</h2>
|
||||
<p>经常逛我博客的老朋友可能知道，这次hugo主题主要是移植的是typecho我曾魔改的Ying主题</p>
|
||||
<p>也有很多朋友问我typecho版本是否可以开源，这里统一回复一下，<strong>typecho版本不开源</strong></p>
|
||||
<p>主要原因是当时魔改的时候还没有一个正确的思路，功能都是东拼西凑，只达到了能跑的现状，也可以说是完完全全的屎山代码</p>
|
||||
<p>整体的维护性很差，很多代码我自己现在都看不懂了，属于会改的不想看，不会改的看不懂</p>
|
||||
<p>为了不耽误各位的时间，就不要来找我要主题了，最后特别感谢大家对我魔改的肯定</p>
|
||||
<h2 id="主题优化">主题优化</h2>
|
||||
<p>在主题还是typecho版本的时候，有博友反馈pc端的评论弹幕很卡，这次特地重写了弹幕逻辑，各位来访的朋友，是不是感觉很丝滑呢</p>
|
||||
<p>
|
||||
<img data-lazy-src="/pics/hugo/migrate-to-hugo/image-20240811222643740.png" alt="image-20240811222643740" class="lazyload"></p>
|
||||
<p>目前主题还是雏形，主题还在开发中，更多功能，敬请期待</p>
|
||||
<h2 id="特别感谢">特别感谢</h2>
|
||||
<p>特别感谢主题开发期间提供帮助的博友以及开发者（以下排名不分先后）</p>
|
||||
<p>hugo 官方
|
||||
<a
|
||||
|
||||
href="/tiaozhuan/index.html?target=aHR0cHM6Ly9nb2h1Z28uaW8%3d"
|
||||
|
||||
target="_blank"
|
||||
>
|
||||
https://gohugo.io</a></p>
|
||||
<p>
|
||||
<a
|
||||
|
||||
href="/tiaozhuan/index.html?target=aHR0cHM6Ly90LXQubGl2ZQ%3d%3d"
|
||||
|
||||
target="_blank"
|
||||
>
|
||||
团团</a>
|
||||
<a
|
||||
|
||||
href="/tiaozhuan/index.html?target=aHR0cHM6Ly90LXQubGl2ZQ%3d%3d"
|
||||
|
||||
target="_blank"
|
||||
>
|
||||
https://t-t.live</a></p>
|
||||
<p>
|
||||
<a
|
||||
|
||||
href="/tiaozhuan/index.html?target=aHR0cHM6Ly9xcS5tZA%3d%3d"
|
||||
|
||||
target="_blank"
|
||||
>
|
||||
叶开</a>
|
||||
<a
|
||||
|
||||
href="/tiaozhuan/index.html?target=aHR0cHM6Ly9xcS5tZA%3d%3d"
|
||||
|
||||
target="_blank"
|
||||
>
|
||||
https://qq.md</a></p>
|
||||
<p>
|
||||
<a
|
||||
|
||||
href="/tiaozhuan/index.html?target=aHR0cHM6Ly9saWthaWppYW4uY29tLw%3d%3d"
|
||||
|
||||
target="_blank"
|
||||
>
|
||||
永恒末匕</a>
|
||||
<a
|
||||
|
||||
href="/tiaozhuan/index.html?target=aHR0cHM6Ly9saWthaWppYW4uY29t"
|
||||
|
||||
target="_blank"
|
||||
>
|
||||
https://likaijian.com</a></p>
|
||||
]]></content:encoded>
|
||||
</item>
|
||||
|
||||
<item>
|
||||
<title>主机配置单</title>
|
||||
<link>https://usj.cc/post/1287/</link>
|
||||
@@ -68,21 +163,18 @@
|
||||
https://github.com/instantpage/instant.page</a></p>
|
||||
<p>项目的介绍这样写到</p>
|
||||
<h2 id="pc端">PC端</h2>
|
||||
<pre><code>在用户单击链接之前，他们会将鼠标悬停在该链接上。当用户悬停 65 毫秒时，他们有二分之一的机会点击该链接，因此 instant.page此时开始预加载，平均为页面预加载留下超过 300 毫秒的时间。
|
||||
另一种选择是在用户开始按下鼠标时加载页面而不进行预加载。这使得未使用的请求为零，同时仍然将页面加载平均提高了 80 毫秒。
|
||||
您还可以在悬停时或链接可见时进行预加载，并在用户开始按下鼠标时触发点击，从而使您的页面成为世界上最快的页面。
|
||||
</code></pre>
|
||||
<h2 id="移动端">移动端</h2>
|
||||
<pre><code>用户在释放之前开始触摸显示屏，平均留出90 毫秒的时间来预加载页面。
|
||||
</code></pre>
|
||||
<p>
|
||||
<div class="highlight"><pre tabindex="0" style="background-color:#f8f8f8;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-markdown" data-lang="markdown"><span style="display:flex;"><span>在用户单击链接之前，他们会将鼠标悬停在该链接上。当用户悬停 65 毫秒时，他们有二分之一的机会点击该链接，因此 instant.page此时开始预加载，平均为页面预加载留下超过 300 毫秒的时间。
|
||||
</span></span><span style="display:flex;"><span>另一种选择是在用户开始按下鼠标时加载页面而不进行预加载。这使得未使用的请求为零，同时仍然将页面加载平均提高了 80 毫秒。
|
||||
</span></span><span style="display:flex;"><span>您还可以在悬停时或链接可见时进行预加载，并在用户开始按下鼠标时触发点击，从而使您的页面成为世界上最快的页面。
|
||||
</span></span></code></pre></div><h2 id="移动端">移动端</h2>
|
||||
<div class="highlight"><pre tabindex="0" style="background-color:#f8f8f8;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-markdown" data-lang="markdown"><span style="display:flex;"><span>用户在释放之前开始触摸显示屏，平均留出90 毫秒的时间来预加载页面。
|
||||
</span></span></code></pre></div><p>
|
||||
<img data-lazy-src="/pics/2024/03/4028544490.png" alt="" class="lazyload"></p>
|
||||
<p>汉译过来大概意思就是，当鼠标即将悬停到a标签的之前，对该链接进行预加载，提高访问速度</p>
|
||||
<p>因为之前有同学反馈我的博客点击文章加载有些慢，于是乎说干就干，项目很简单，如需上手，直接在body标签之前加入一行js代码即可</p>
|
||||
<p>代码如下</p>
|
||||
<pre><code><script src="//instant.page/5.2.0" type="module" integrity="sha384-jnZyxPjiipYXnSU0ygqeac2q7CVYMbh84q0uHVRRxEtvFPiQYbXWUorga2aqZJ0z"></script>
|
||||
</code></pre>
|
||||
<p>
|
||||
<div class="highlight"><pre tabindex="0" style="background-color:#f8f8f8;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-js" data-lang="js"><span style="display:flex;"><span><span style="color:#ce5c00;font-weight:bold"><</span><span style="color:#000">script</span> <span style="color:#000">src</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">"//instant.page/5.2.0"</span> <span style="color:#000">type</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">"module"</span> <span style="color:#000">integrity</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">"sha384-jnZyxPjiipYXnSU0ygqeac2q7CVYMbh84q0uHVRRxEtvFPiQYbXWUorga2aqZJ0z"</span><span style="color:#ce5c00;font-weight:bold">><</span><span style="color:#a40000">/script></span>
|
||||
</span></span></code></pre></div><p>
|
||||
<img data-lazy-src="/pics/2024/03/1392231476.png" alt="" class="lazyload"></p>
|
||||
<p>如上截图所示，当鼠标即将点击到文章链接，instant.page会对文章链接执行预加载，从而提高页面渲染速度</p>
|
||||
<p>各位来访的朋友，有没有觉得速度比之前更快呢</p>
|
||||
|
||||
Reference in new issue
Block a user