给Blog本身改了点东西

 

碎碎念

记录一下改动了什么,以防以后出问题。

怎么能加多个tag呢?还没看到,哎,我好菜。

突然发现这一个为什么在最下边是第一篇?B是最小的?

添加bilibili链接

通过对文件夹内容搜索,在weibo所在的位置后边复制了一份并改为了bilibili,个人主页链接一开始没注意写的bilibili.com,实际应该写space.bilibili.com,在config里添加我的id之后发现打开是三体动画,愣是没反应过来,我还以为都现在了打开B站还有三体的开屏广告?硬控我半分钟

其实是因为这个链接正好是三体动画,跟我的ID一样。hhhhhh

图片加载修复

本地编辑时,直接粘贴的图片的链接无法在网站上正常加载,所以搞了拼接,让它直接去加载仓库里的图片。

本地形如这样

![1737529592551](image/2025-01-22-数据结构大纲/1737529592551.png)

实际src会为这样,这样是无法加载的

https://MapleInori.net/2025/01/08/image/2025-01-08-first_test/1737546135783.png

于是给article.html添加如下代码,万一以后有其他image之类的内容,还是要区分一下image/20开头,总不能超过100年。hhhhh

<script>
  // 确保页面加载完成后执行
  document.addEventListener("DOMContentLoaded", function() {
    const images = document.querySelectorAll('img');
    images.forEach(img => {
      const src = img.getAttribute('src');
      if (src && src.startsWith('image/20')) {
        // 动态拼接GitHub URL,使其在不影响本地图片正常加载的情况下网页也能正常加载图片
        img.setAttribute('src', 'https://github.com/MapleInori/MapleInori.github.io/blob/main/_posts/' + src + '?raw=true');
      }
    });
  });
</script>

加速图片加载

修改

img.setAttribute('src', 'https://github.com/MapleInori/MapleInori.github.io/blob/main/_posts/' + src + '?raw=true');

img.setAttribute('src', 'https://cdn.jsdelivr.net/gh/MapleInori/MapleInori.github.io/_posts/' + src + '?raw=true');

但是感觉效果不大,不明白了,如果用github的子域名而不用我自己的域名的话,效果也许会好一些?可能是因为我这样来回跳的原因吗?github->NameSilo->腾讯DNS->github?

添加LeanCloud

配置config.yml,provider填写为leancloud,填写app_id,app_key,app_class,三个值来源于leancloud,且class为手动创建的类。应该是无限制。

修改leancloud.js,添加if判断

function searchKey(key) {
      if (!key) {
        console.error('Invalid key provided:', key);
        return Promise.reject('Invalid key');
      }
      var query = new AV.Query(appClass);
      query.equalTo('key', key);
      return query.first();
    }

修改下方代码

    function get(key, callback) {
      searchKey(key).then(function(result) {
        if (result) {
          callback && callback(result.attributes.views);
        }
      }, errorHandler);
    }

    function get(key, callback) {
      searchKey(key).then(function(result) {
        // console.log(result);  // 打印查询结果
        if (result) {
          callback && callback(result.attributes.views);
        } else {
          insert(key, title).then(function(result) {
            increment(result).then(function(result) {
              callback && callback(result.attributes.views);
            });
          }, errorHandler);
        }
      }, errorHandler);

沃趣!这个主题的教程文档不行还是我看的不够仔细呢,原来只需要在每篇的头信息中添加KEY属性就好了。

不过会有延迟,浏览量变化比较慢,这个应该是网络问题,没办法吧,至少我没办法,github和leancloud的网络通信?不过DNS用的腾讯的,应该速度还好,有用就行。耶!

参考

使用 LeanCloud 为 Github Pages 添加阅读量统计 (snownight22.github.io)

以及这个主题的教程

添加GoogleAnalysis

前端控制台出现如下报错,关闭广告拦截插件即可。

Failed to load resource: net::ERR_BLOCKED_BY_CLIENT

然后出现如下报错

GET https://www.googletagmanager.com/gtag/js?id=G-2S7EGHFE6M net::ERR_SSL_PROTOCOL_ERROR

很奇怪,我这个似乎还没解决,但是正常了。emmmmmmm

使用Google Analytics监听GitHub pages页面访问量 Marvin's blog (winxuan.github.io)

修改variables.yml的sources版本

# 原版
sources:
  bootcdn:
    font_awesome: 'https://cdn.bootcdn.net/ajax/libs/font-awesome/5.15.1/css/all.css'
    jquery: 'https://cdn.bootcss.com/jquery/3.1.1/jquery.min.js'
    leancloud_js_sdk: '//cdn.jsdelivr.net/npm/leancloud-storage@3.13.2/dist/av-min.js'
    chart: 'https://cdn.bootcss.com/Chart.js/2.7.2/Chart.bundle.min.js'
    gitalk:
      js: 'https://cdn.bootcss.com/gitalk/1.2.2/gitalk.min.js'
      css: 'https://cdn.bootcss.com/gitalk/1.2.2/gitalk.min.css'
    valine: 'https://unpkg.com/valine/dist/Valine.min.js' # bootcdn not available
    mathjax: 'https://cdn.bootcss.com/mathjax/2.7.4/MathJax.js?config=TeX-MML-AM_CHTML'
    mermaid: 'https://cdn.bootcss.com/mermaid/8.0.0-rc.8/mermaid.min.js'
  unpkg:
    font_awesome: 'https://use.fontawesome.com/releases/v5.15.1/css/all.css'
    jquery: 'https://unpkg.com/jquery@3.3.1/dist/jquery.min.js'
    leancloud_js_sdk: '//cdn.jsdelivr.net/npm/leancloud-storage@3.13.2/dist/av-min.js'
    chart: 'https://unpkg.com/chart.js@2.7.2/dist/Chart.min.js'
    gitalk:
      js: 'https://unpkg.com/gitalk@1.2.2/dist/gitalk.min.js'
      css: 'https://unpkg.com/gitalk@1.2.2/dist/gitalk.css'
    valine: 'https//unpkg.com/valine/dist/Valine.min.js'
    mathjax: 'https://unpkg.com/mathjax@2.7.4/unpacked/MathJax.js?config=TeX-MML-AM_CHTML'
    mermaid: 'https://unpkg.com/mermaid@8.0.0-rc.8/dist/mermaid.min.js'

# 新版
sources:
  bootcdn:
    font_awesome: 'https://cdn.bootcdn.net/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css'
    jquery: 'https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js'
    leancloud_js_sdk: 'https://cdn.jsdelivr.net/npm/leancloud-storage@4.7.0/dist/av-min.js'
    chart: 'https://cdn.jsdelivr.net/npm/chart.js@3.7.0/dist/chart.min.js'
    gitalk:
      js: 'https://cdn.jsdelivr.net/npm/gitalk@1.7.0/dist/gitalk.min.js'
      css: 'https://cdn.jsdelivr.net/npm/gitalk@1.7.0/dist/gitalk.min.css'
    valine: 'https://cdn.jsdelivr.net/npm/valine@1.5.2/dist/Valine.min.js'
    mathjax: 'https://cdn.jsdelivr.net/npm/mathjax@2.7.7/MathJax.js?config=TeX-MML-AM_CHTML'
    mermaid: 'https://cdn.jsdelivr.net/npm/mermaid@10.1.0/dist/mermaid.min.js'
  unpkg:
    font_awesome: 'https://unpkg.com/font-awesome@6.0.0-beta3/css/all.min.css'
    jquery: 'https://unpkg.com/jquery@3.6.0/dist/jquery.min.js'
    leancloud_js_sdk: 'https://cdn.jsdelivr.net/npm/leancloud-storage@4.7.0/dist/av-min.js'
    chart: 'https://unpkg.com/chart.js@3.7.0/dist/chart.min.js'
    gitalk:
      js: 'https://unpkg.com/gitalk@1.7.0/dist/gitalk.min.js'
      css: 'https://unpkg.com/gitalk@1.7.0/dist/gitalk.min.css'
    valine: 'https://unpkg.com/valine@1.5.2/dist/Valine.min.js'
    mathjax: 'https://unpkg.com/mathjax@2.7.7/unpacked/MathJax.js?config=TeX-MML-AM_CHTML'
    mermaid: 'https://unpkg.com/mermaid@10.1.0/dist/mermaid.min.js'