改版了 | 送别三月的一份小站报告

Pinming

开发记录

发布于：2020/3/28

「あなたに出会った四月になると。」
「与你相遇的四月就要来了。」

——『四月は君の嘘』

0x00 前言

四月份马上就要来了。虽然深圳早已是春暖花开之时，但 COVID-19 疫情笼罩的阴霾却仍稍稍未能散去，我也十分期望能够摘下口罩，自如地感受春风。

不过正因如此，我也有了更多的机会去探索此前没有时间探索的东西。一定程度上，今天这个网站的改变也必须归功于我拥有这么一段多出来的时间罢。

那么接下来就简要说明一下本站开站至今做出的改进。

0x01 一个简单的汇报

首先是本站的外观已经发生了显而易见的变化！这要归功于 xaoxuu 设计的主题 Volantis，在原先主题 Material X 的基础上进一步提升了其颜值。

在本站开站之初，这个网站还有很多很多的小毛病没有被解决，然后就上线了【再放送：『Hello World | 这破站是干啥的？』】。当然现在也还有一些问题……不过以下的问题在这四个多月间得到了解决：

网站部署在 Github 的国外服务器上，国内访问可能速度上有所限制，但应该不会太差，出国党应该问题不大。后续可能考虑迁移回国内；

目前全站已经迁移至阿里云服务器，国内访问体验将获得极大改善。
由于微信 API 接口限制，网站的 favicon 在微信分享不能显示，也就是说在朋友圈和聊天页面，大家只能看到标题 + 一个回形针图标（但我相信你们一定能认出我的！）；

已经氪金去买了微信高级 API 了……哎，又亏银子了。
网站背景音乐的播放是调用了阿里云 OSS 的，如果歌放不出来了说明本月 OSS 的免费流量用完了…… 还想来这听歌请提醒我充钱，充钱才能变得更强（要是能把流量听完说明这站人气还可以了 2333）；

同上，氪金就有流量。不过这个倒不是很费银子。
总而言之，能用钱解决的问题好像都不是很大的问题……【但是我确实也缺钱】

同时正如在上一段所见，还实现了新的功能：

「黑幕」。感谢萌娘百科的创意。点击「黑幕」就可以查看隐藏内容。【二刺螈爪巴嘻嘻】

并做出了一些后台优化：

全站 CDN + HTTPS。这将使本站在全国各地各网络的访问速度进一步提升，同时保障连接的加密性。

那么还剩下这些问题有待解决：

音乐播放器在极少部分小尺寸手机上 (e.g. iPhone 5/5s) 似乎有点长…… 展开了就收不回去，除非横屏（现在大家手机都大屏了应该不太存在这个问题……）；

所以这个问题应该也不会再做什么修改了……
网站暂未实现 pjax 加载，背景音乐在点击其他网页时就断了……（UI 作者称近期会加上 pjax 支持，我也会尽快跟进，让大家听歌听爽点）；

该问题还在全力解决。
由于 Markdown 语法的限制，正文区域并不能滑稽，然而评论区可以，嘻嘻；
未来还可能加入：夜间模式。

这个 Feature 加入应该不会太快了……暂时没有精力嗷。

0x02 后续计划

以下内容并不作为后续文章内容计划的明示或暗示保证。【滑稽】

先立几个 flag 好了！不然后面很可能没有更博的动力……【就算立了也说不定还会咕咕咕】

待能够回校后，对灵越 7590 黑苹果的无线网卡做测试，拼上完整黑苹果体验的最后一块拼图，在之前的基础上形成完整的使用体验报告，甚至还有可能码篇安装过程记录或教程。
今年会是笔记本市场大动荡大变革大发展的一年，因为AMD，YES！，今年的笔记本市场一定会有更多带来惊喜的产品。目前计划在 5-6 月可能写一份笔记本选购指南。毕竟从 6 月 8 日高考结束到 618 期间，一定会有很多人蠢蠢欲动的。之所以起意写这个也是觉得知乎上的各种指南总还是有些奇怪的槽点……所以想自己尝试了。

目前的计划暂时就是这样了，还请期待。今天这篇就写到这里了，期望春暖花开之时我们能再度相遇。

【到了这里的意思就是可以关掉了，滑稽】

0xFF 后记 | 部分功能实现的简单记录

i) 黑幕功能实现源码

<style>
  .heimu, .heimu a, a .heimu, .heimu a.new {
    background-color: #0066A0; /*背景色*/
    color: #0066A0; /*隐藏文字色*/
    text-shadow: none;
  }
  .heimu:hover, .heimu:active,
  .heimu:hover .heimu, .heimu:active .heimu {
    color: white !important; /*显示文字色*/
  }
  .heimu:hover { /*渐变控制*/
  opacity: 1;
  transition-duration: 0.3s;
  }
  .heimu:hover a, a:hover .heimu,
  .heimu:active a, a:active .heimu {
    color: lightblue !important;
  }
  .heimu:hover .new, .heimu .new:hover, .new:hover .heimu,
  .heimu:active .new, .heimu .new:active, .new:active .heimu {
    color: #BA0000 !important;
  }
</style>

对于 Volantis 及结构与之类似的其他主题，只需将这段 CSS 引入到：\你的主题文件夹\layout\layout.ejs 的 <body> 之前。
从而在 Markdown 语法下可以这样实现黑幕：

1	<span class="heimu" title="你知道的太多了">这里填写你需要的内容</span>

ii) Hexo 下微信分享接口接入

在开始之前
首先你需要拥有一个认证过的公众号（企业号或服务号），并且拥有自己的已备案域名及服务器资源。
说实话，我真的没有见过接入哪个平台像微信这么麻烦，可能我见识太短浅。但是张小龙：十四亿人也休想教会我做微信【滑稽】
具体接入细节可以参考：微信公众平台『JS-SDK 说明文档』
以下只说明简要步骤。

1. 后端准备

假设你的服务器已经配置好诸如 PHP+IIS 的环境。这里以 PHP 方案为例。

下载腾讯官方 sample

点击下载

在 sample.php 第 3 行及 jssdk.php 第 104 行中填入你的公众号对应的 AppID 和 AppSecret
确保同文件夹 access_token.json 及 jsapi_ticket.json 属性为可写，使得服务器可以动态储存校验票据

2. 前端引入

将相关 js 引入到：\你的主题文件夹\layout\layout.ejs

<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<script src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
<!-- 可以视需求更换为最新的 1.6.0 版本 -->
<script>
  url = location.href.split("#")[0]
  // 请注意这里是绝对的大坑 #1！必须隔断 URL 的所有 Hash！
  $.ajax({
    type: "get",
    url: "https://your.domain/jssdk.php?url=" + encodeURIComponent(url),
    // 请注意这里是绝对的大坑 #2！URL 必须经过转义！
    // 这里引入你自己配置好的 JSSDK.php
    dataType: "jsonp",
    jsonp: "callback",
    jsonpCallback: "success_jsonpCallback",
    success: function (data) {
      wx.config({
        debug: false,
        appId: data.appId,
        timestamp: data.timestamp,
        nonceStr: data.nonceStr,
        signature: data.signature,
        jsApiList: [
          "onMenuShareTimeline",
          "onMenuShareAppMessage",
          "onMenuShareQQ",
          "onMenuShareWeibo"
          // 新版分享接口可以照猫画虎自己配置，这里懒得改了
        ]
      });
    },
  });
  wx.ready(function () {
    wx.onMenuShareTimeline({
      title: document.title, // 分享标题
      link: location.href.split("#")[0],
      imgUrl: 'YourFavicon', // 分享 Favicon
      success: function () {
      }
    });
    wx.onMenuShareAppMessage({
      title: document.title, // 分享标题
      desc: 'YourDescription',
      link: location.href.split("#")[0],
      imgUrl: 'YourFavicon',
      success: function () {
      }
    });
    wx.onMenuShareQQ({
      title: document.title, // 分享标题
      link: location.href.split("#")[0],
      imgUrl: 'YourFavicon',
      success: function () {
      }
    });
    wx.onMenuShareWeibo({
      title: document.title, // 分享标题
      link: location.href.split("#")[0],
      imgUrl: 'YourFavicon',
      success: function () {
      }
    });
  });
</script>

尤其需要注意的是，该段代码第 2 行的 url 必须从 # 号开始截断！第 5 行的 url 必须经过 encodeURIComponent(url) 的转义！否则会导致 url 校验失败而无法实现 js。

以上即是 Hexo 博客接入微信公众平台的简要步骤，这样也有利于网站在微信平台的分享。但该方案缺点也显而易见，就是无法动态地改变 Desc，但是于我个人而言这个倒算不上很大的问题~

好了，本文到这里就全部结束了！那么你们也可以给我一个「三连冠」【没有人会不爱看罗翔】，求点赞求投币求收藏~【对不起走错了这里不是批站滑稽】

不过是真心求个分享的 23333。感谢你一路阅读到这里。

致谢金主爸爸 | 「dwu5」「粗丝棉」 本名单依据先后顺序定时更新，感谢滋磁！

公告 | 全国哀悼日 —— 逝者安息，生者坚强！

Pinming 的歌单 | 2020 年第 13 周