MarshVer

博客优化

发表于 更新于
本文字数： 7.4k 阅读时长 ≈ 12 分钟
图片不显示;备份问题;博客优化

图片不显示

在根目录安装hexo-asset-image，就能按照markdown的格式进行图片的插入。

1
npm install https://github.com/CodeFalling/hexo-asset-image --save

如果npm下载太慢可以用cnpm install…代替。
安装cnpm，同时将cnmp使用淘宝镜像提高下载速度

1
2
npm install cnpm -g
npm install cnpm -g --registry=https://registry.npm.taobao.org

同时在hexo中使用文章资源文件夹，在config.yaml文件中更改一下配置：

1
post_asset_folder: true

当该配置被应用后，使用hexo new命令创建新文章时，会生成相同名字的文件夹，也就是文章资源文件夹，你可以把与该文章有关的任何文件放在该文件夹中，并在文章中用相对路径![ ]（./…）引用。

备份问题

一般我们hexo d上传部署到github的其实是hexo编译后的文件，是用来生成网页的，不包含源文件。也就是上传的是在本地目录里自动生成的.deploy_git里面。
其他文件 ，包括我们写在source 里面的文章和配置文件，主题文件，都没有上传到github,所以可以利用git的分支管理，将源文件上传到另一个分支即可备份。

1.创建新分支

下图所示位置输入分支名并确认即可创建（我的分支名为backups）

将刚才创建的分支设置为默认分支：

2.获取.git文件夹

去任意地方把刚刚的source分支给clone下来

1
$ git clone https://github.com/marshver/marshver.github.io

然后把里面的.git文件夹剪切到博客的根文件夹中。

3.主题文件无法上传

如果你的博客里有主题文件夹（themes/yourtheme），需要把主题文件夹的.git文件夹给删除，因为git不能嵌套上传，最好是显示隐藏文件，检查一下有没有，否则上传的时候会出错，导致你的主题文件无法上传，这样你的主题配置在别的电脑上就用不了了。

4.博客备份

博客文件打开git执行：

1
2
3
git add .
git commit -m "Backup"
git push origin backups

这样就备份完博客的源文件，且在Github上能看到两个分支(master和source)。后续备份最后一步只需git push即可。

5.恢复博客

如想恢复博客请看“博客相关”中的恢复博客博客相关

博客优化

1.图片问题

(1)搭配图床

图片如果用本地文件，会影响服务器的响应速度，我们可以把图片放到图床上，在博客里用图片的url地址引用，可以在一定程度上加快服务器的响应速度。

这里我推荐sm.mshttps://sm.ms/, 首先是免费的，虽然只有5个G，但对于只放图片够用了。

可以搭配PicGo图片批量上传，直接生成图片链接到剪切板，还能查看历史图片的URL链接，非常方便。

去官网： https://github.com/Molunerfinn/PicGo/releases 下载稳定版本的.exe文件，只需要将你自己sm.ms的API Token配置到PicGo上，即可使用。

(2)图片懒加载

懒加载一般是当图片滚动进可视窗口内才加载图片，可视窗口之外的图片则不加载，对服务器有一定的缓解压力作用。

首先安装图片懒加载插件,根目录执行：

1
npm install hexo-lazyload-image --save

然后在Hexo根目录配置文件末尾加入以下代码：

1
2
3
4
5
6
7
# 图片懒加载
lazyload:
  enable: true
  onlypost: true # 如果为 true，则只有来自帖子或页面的图像将支持延迟加载。# 如果为 false，则您网站的整个图像将使用延迟加载，包括来自您主题的图像 dist，但不包括来自 CSS 样式的背景图像。
  loadingImg:  https://s2.loli.net/2022/08/03/yJ23MDaUGdg7LCk.gif # 加载图片 eg ./images/loading.gif
  isSPA: true # optional
  preloadRatio: 3 # 默认是 1

然后hexo cl && hexo g && hexo s即可生效。

详细说明可以看原文介绍：https://github.com/Troy-Yang/hexo-lazyload-image

一般情况下懒加载会和gallery插件会发生冲突，结果可能就是点开图片，左翻右翻都是loading image。matery主题的解决方案是：
修改 /themes/matery/source/js 中的 matery.js文件(我的是matery主题)
在第108行加上：

1
2
3
4
$(document).find('img[data-original]').each(function(){
    $(this).parent().attr("href", $(this).attr("data-original"));
});

2.服务器加速

我们在把博客部署到github page上，会发现每次hexo d上传文件后，第一次的打开速度都比较慢，这主要是因为github的访问速度较慢。

我们可以把博客的静态文件部署到其他服务器上来加快速度，例如腾讯云或者阿里云，但国内的服务器大多要钱，而且还需要一个已备案域名来绑定。（腾讯云有个webify服务可以实现类似的功能，价格也不贵，按量计费，访问少的博客一天才几分钱。但是它默认的域名太长，不便于记忆，如果你有一个已备案的域名，且不介意这一点钱可以使用腾讯云的webify，并且在项目设置里绑定你的域名）。

白嫖党的我选择使用境外的Vercel或者netlify的免费服务器来加速。（vercel的速度好像比netlify的要快，强推）但毕竟是国外的，访问速度依旧没有国内的服务器块，而且可能偶尔会抽风，但对于个人博客够用了,下面介绍如何使用Vercel部署静态博客。

  1. 首先进入Vercel的官网：https://vercel.com/
  2. 将GitHub博客仓库的默认分支改为main（非源文件）（因为源文件导入vercel可能会运行错误）
  3. Continue with Github使用Github授权并登录。点击New Porject，选择Browse All Templates选择你的博客框架，我的是hexo，然后选择Import Git Repository，授权博客文件的仓库，然后点击确定即可。settings中设置Your Username，则你的域名为Your Username.vercel.app。（是不是很好记！）
  4. 后续也可以通过把域名绑定到Cloudflare，使用Cloudflare的DNS加速，便可以使用vercel自定义域名加速访问。详细步骤见：申请免费域名并绑定Cloudflare

注：记得查看新建项目的view domains，左侧git项，Production Branch是博客源文件的分支（我的是source），不是hexo d生成的网页文件，是博客的源文件（包含主题和一些配置文件，其他服务器也是一样），不是的话记得修改，不然会报错。服务器的内容需要git push过一会才能生效。

代码块显示异常

代码块“{}”显示乱码，卸载hexo-prism-plugin，删除配置。

1
npm uninstall hexo-prism-plugin

用hexo自带的PrismJS,效果一样。

1
2
3
4
5
6
7
8
9
# _config.yml
highlight:
  enable: false
prismjs:
  enable: true
  preprocess: true
  line_number: true
  line_threshold: 0
  tab_replace: ''

更改hexo d的分支

由于github将默认分支master改为了main，而hexo-deployer-git插件没有改，所以就算你改了_config.yml的默认分支为main，hexo d后依然会创建一个master指向main，main会有一定延迟接受master分支，所以我们要将hexo-deployer-git插件你指向的master全部改为main

1.修改hexo-deployer-git插件

去目录： yourBlog\node_modules\hexo-deployer-git\lib\parse_config.js
VScode按F3查找master全部替换为main

2.上传文件到main分支

hexo cl+hexo g+hexo d

3.删除master分支

可以不删
blog文件下打开git执行

1
git push origin :master

git push失败

全局代理

1
2
3
4
5
6
7
## 设置全局代理
git config --global http.proxy http://127.0.0.1:7890
git config --global https.proxy http://127.0.0.1:7890

# 取消代理
git config --global --unset http.proxy
git config --global --unset https.proxy

设置仅针对某个网站的代理：比如Github

1
2
3
4
5
## 对github设置代理
git config --global http.http://github.com.proxy http://127.0.0.1:7890

# 取消代理
git config --global --unset http.https://github.com.proxy

设置指定存储库上使用代理

1
2
# $ git clone https://仓库地址 --config "https.proxy=proxyHost:proxyPort"
git clone https://github.com/marshver/marshver.github.io --config https.proxy=https://127.0.0.1:7890

查看是否成功代理

1
2
git config --global --get http.proxy
git config --global --get https.proxy

添加鼠标点击特效

点击出现爱心和社会主义核心价值观。

  • 进入主题文件夹/source/js/新建js文件click.js输入下列代码：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    /* 爱心特效 */

    !function (e, t, a) {
        function r() {
          for (var e = 0; e < s.length; e++) s[e].alpha <= 0 ? (t.body.removeChild(s[e].el), s.splice(e, 1)) : (s[e].y--, s[e].scale += .004, s[e].alpha -= .013, s[e].el.style.cssText = "left:" + s[e].x + "px;top:" + s[e].y + "px;opacity:" + s[e].alpha + ";transform:scale(" + s[e].scale + "," + s[e].scale + ") rotate(45deg);background:" + s[e].color + ";z-index:99999");
          requestAnimationFrame(r)
        }
      
        function n() {
          var t = "function" == typeof e.onclick && e.onclick;
          e.onclick = function (e) {
            t && t(), o(e)
          }
        }
      
        function o(e) {
          var a = t.createElement("div");
          a.className = "heart", s.push({
            el: a,
            x: e.clientX - 5,
            y: e.clientY - 5,
            scale: 1,
            alpha: 1,
            color: c()
          }), t.body.appendChild(a)
        }
      
        function i(e) {
          var a = t.createElement("style");
          a.type = "text/css";
          try {
            a.appendChild(t.createTextNode(e))
          } catch (t) {
            a.styleSheet.cssText = e
          }
          t.getElementsByTagName("head")[0].appendChild(a)
        }
      
        function c() {
          return "rgb(" + ~~(255 * Math.random()) + "," + ~~(255 * Math.random()) + "," + ~~(255 * Math.random()) + ")"
        }
        var s = [];
        e.requestAnimationFrame = e.requestAnimationFrame || e.webkitRequestAnimationFrame || e.mozRequestAnimationFrame || e.oRequestAnimationFrame || e.msRequestAnimationFrame || function (e) {
          setTimeout(e, 1e3 / 60)
        }, i(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"), n(), r()
      }(window, document);
      
      /* 社会主体核心价值观效果 */
      var a_idx = 0;
      jQuery(document).ready(function ($) {
        $("body").click(function (e) {
          var a = new Array("富强", "民主", "文明", "和谐", "自由", "平等", "公正", "法治", "爱国", "敬业", "诚信", "友善");
          var $i = $("<span/>").text(a[a_idx]);
          a_idx = (a_idx + 1) % a.length;
          var x = e.pageX,
            y = e.pageY;
          $i.css({
            "z-index": 100000000,
            "top": y - 20,
            "left": x,
            "position": "absolute",
            "font-weight": "bold",
            "color": "#ff6651"
          });
          $("body").append($i);
          $i.animate({
            "top": y - 180,
            "opacity": 0
          }, 1500, function () {
            $i.remove();
          });
        });
      });

  • 进入主题文件夹\layout_layout.swig，在中间输入以下代码：

    1
    2
    <!- 页面点击特效 -!>
    <script type="text/javascript" src="/js/click.js"></script>

自定义域名

在cloudfare添加域名到GitHubPages的代理
cloudfare.png

在GitHubPages上添加域名
githubPages.png