Hexo获取url参数实现主题自适应

需求背景

由于博客嵌入到开源项目Android客户端中，客户端做了深色主题兼容，博客在上一节中也实现了深色主题。 上节遗留一个问题，就是从Android客户端中跳转到博客时，无法把客户端的主题类型携带过去。所以出现了深色主题客户端跳转到博客后，需要在博客主界面再次设置深色主题。这个过程显然是不满足要求的，本次就解决如何同步过来客户端的主题模式。 由于Android客户端跳转博客，仅通过URL跳转实现，所以传过来主题类型也只能从url传参入手。

实现过程

URL采用GET请求方式时，可以传入参数，具体如下：

https://devdroid.cn?nightmode=1

上面url片段中，请求参数为nightmode，传入的值为1。该方式能很好的实现类传递，满足需求。所以咱们就实现博客解析url参数并进行主题的切换能力。 显而易见，我们从客户端跳转到博客时，会默认打开主页。基于这个原理，我们只需要实现主页获取url并解析参数即可，我们找到\blog\themes\matery\layout\index.ejs文件，并在文件中追加如下script代码：

<script>
    try {
        var reg = new RegExp("(^|&)nightmode=([^&]*)(&|$)");
        var r = window.location.href.split('?')[1].match(reg);
        if(r != null) {
          '1' === r[2]?($('body').addClass('DarkMode'), localStorage.setItem('isDark', '1'), $('#nightMode').removeClass('fa-lightbulb-o').addClass('fa-moon-o')):($('body').removeClass('DarkMode'), localStorage.setItem('isDark', '0'),$('#nightMode').removeClass('fa-moon-o').addClass('fa-lightbulb-o'))
        }
    } catch(e) {
        
    }
</script>

其中，window.location.href为url的全部内容。我们通过正则表达式RegExp解析出nightmode参数的值。判断当nightmode为1时，切换到暗色主题，并缓存主题类型；否则切换到亮色主题，并缓存主题类型。 此时我们可以通过浏览器访问：https://devdroid.cn?nightmode=1，打开博客的暗色主题；通过浏览器访问：https://devdroid.cn?nightmode=0，打开博客的亮色主题。

博客实现了解析url的能力，这时候客户端只需要做兼容即可，兼容代码如下：

String url = getIntent().getStringExtra("url");
if(TextUtils.isEmpty(url)) {
  boolean isNightMode = LauncherModel.getInstance().getSharedPreferencesManager().getBoolean(IPreferencesIds.KEY_THEME_NIGHT_MODE, false);
  url = "https://devdroid.cn?nightmode="+(isNightMode?1:0);
}
WebViewClient webViewClient = new WebViewClient() {
  @Override
  public boolean shouldOverrideUrlLoading(WebView view, String url) {
    super.shouldOverrideUrlLoading(view, url);
    view.loadUrl(url);
    return true;
  }
};

此时通过客户端判断祖逖类型并传递到博客中的功能就实现了。

相关代码请参考：睡眠助理