记录一些关于hexo主题使用的一些小要点

记录一些关于hexo的Butterfly和nexmoe（tangyuxian ver）主题使用的一些小要点

最近成功的安利我的一个朋友霖雫雫玩上了博客，在主题方面，他选择了butterfly。我目前这个糖羽仙深度定制nexmoe主题用了也有1年多的时间了，打算趁此机会也折腾一下新的主题。在这里记录一下折腾新主题遇到的一些需要注意的点。

Hexo方面

我自己是使用文章资源文件夹来管理blog中需要插入的图片的，在折腾新主题的时候忘了开这个功能……然后在我把主题差不多弄好之后，预览了一下发现图片加载不出来才注意到这个问题。于是我去Hexo本体的config文件里把这个功能打开了，结果不知道为什么就报错了。于是乎我就用hexo init blog2生成了一个新的Hexo文件夹，在把主题文件拷贝进去之前先开启了这个功能，主题文件拷贝进去之后预览，图片显示正常，问题解决。

通过将config.yml文件中的post_asset_folder选项设为true来打开。

正确的引用图片方式是使用下列的标签插件而不是 markdown ：
{% asset_img example.jpg This is an example image %}

通过按键操作解锁隐藏内容的代码相关

按键跳转其他网站代码本体

<script>
  // 用于跟踪用户键入的按键序列
  var konamiCode = [];
  // 预定义的 Konami Code 序列
  var correctCode = ['ArrowUp', 'ArrowUp', 'ArrowDown', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'ArrowLeft', 'ArrowRight', 'b', 'a'];

  // 添加键盘事件侦听器
  document.addEventListener('keydown', function(event) {
    konamiCode.push(event.key);
    konamiCode = konamiCode.slice(-correctCode.length); // 保持序列的长度与 Konami Code 相同
    
    // 检查用户输入是否与 Konami Code 相匹配
    if (JSON.stringify(konamiCode) === JSON.stringify(correctCode)) {
      // 触发跳转到其他网站的操作
      window.location.href = 'https://example.site'; // 替换为你想要跳转的网站链接
    }
  });
</script>

隐藏内容代码本体

<style>
    #hidden-content {
      display: none; /* 默认情况下隐藏内容 */
    }
</style>

<script>
    const konamiCode = [
      'ArrowUp',
      'ArrowUp',
      'ArrowDown',
      'ArrowDown',
      'ArrowLeft',
      'ArrowRight',
      'ArrowLeft',
      'ArrowRight',
      'b',
      'a'
    ];

    let konamiCodeIndex = 0;

    document.addEventListener('keydown', (event) => {
      if (event.key === konamiCode[konamiCodeIndex]) 
        {
            konamiCodeIndex++;
            if (konamiCodeIndex === konamiCode.length) 
                {
                // 显示隐藏内容
                const hiddenContent = document.getElementById('hidden-content');
                hiddenContent.style.display = 'block';
                }
        } 
        else 
        {
        konamiCodeIndex = 0; // 重置索引
        }
    });
</script>

<div id="hidden-content">
    <!-- 需要隐藏的内容放在这里 -->
    <p>这里是隐藏内容</p>
    <blockquote>
        <p>也可以将隐藏内容放在引用框里</p>
        <p>直接按照html格式去写即可</p>
    </blockquote>
</div>

直接将这段写在.md里就可以，下面是示例。

这下面有隐藏内容

这上面有隐藏内容

隐藏图片时出现的问题

在使用nexmoe的时候，通过查看网页源码发现，插入网络图片的html语言如下

<p><img data-fancybox="gallery" data-sizes="auto" data-src="https://example.com/1.png" alt="avatar" class="lazyload"></p>

插入本地图片则为（在你开启了文章开头所说的文章资源文件夹时）

<img src="/2022/05/19/test/1.png" class="" title="This is an example image">

那么实际隐藏图片的时候只需把这些直接在div块中即可。

在nexmoe上测试正常，后来我在butterfly的主题中测试的时候也这么做了，发现显示不出来。

我稍微思考了一下问题出现在哪，抱着试试的心态看了一眼butterfly正常插入图片的html源码，果不其然，问题在此。

butterfly插入网络图片

<p><img src="https://example.com/1.png" alt="avatar"></p>

本地图片

<img src="/2022/05/19/test/1.png" class="" title="This is an example image">

在.md里同样是使用![avatar](https://example.com/1.png)插入网图，而实际生成的html确实不一样的，在不同主题中想使用html隐藏图片需要注意此点。

而插入本地图片则是一样，且对于本地图片还可以写成这样

<p><img src="/img/bg.png"></p>

Butterfly设置透明样式，并且引入l2d

Butterfly的config内容

inject:
  head:
    - <link rel="stylesheet" href=" /css/transpancy.css">
    #- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css">
    # - <link rel="stylesheet" href="/xxx.css">
  bottom:
    - <script src="https://fastly.jsdelivr.net/gh/stevenjoezhang/live2d-widget@latest/autoload.js"></script>
    # - <script src="xxxx"></script>

透明化

如上设置head部分，引入一个css，这个transpancy.css具体内容如下。

.layout_post>#post 
{
    background:rgba(255,255,255,.5);
}
#aside_content .card-widget, 
#recent-posts>recent-post-item, 
.layout_page>div:first-child:not(.recent-posts), 
.layout_post>#page, 
.layout_post>#post, 
.read-mode .layout_post>#post
{
    background:rgba(255,255,255,.5);
}
:root {
    --card-bg: rgba(255,255,255,.5);
}

放在对应位置即可。其中，三个.5的地方可以设置透明度大小

l2d

开源地址在这Live2D Widget

一些因为自己脑瘫遇到的问题…

主题换色

其原本是全被注释掉的

# theme_color:
#   enable: true
#   main: "#49B1F5"
#   paginator: "#00c4b6"
#   button_hover: "#FF7242"
...
......

注意取消注释的时候…记得# theme_color:前面的#还有一个空格都要删掉…

主页副标题

原本设置如下

# the subtitle on homepage (主頁subtitle)
subtitle:
  enable: false
  # Typewriter Effect (打字效果)
  effect: true
  # Customize typed.js (配置typed.js)
  # https://github.com/mattboldt/typed.js/#customization
  typed_option:
  # source 調用第三方服務
  # source: false 關閉調用
  # source: 1  調用一言網的一句話（簡體） https://hitokoto.cn/
  # source: 2  調用一句網（簡體） https://yijuzhan.com/
  # source: 3  調用今日詩詞（簡體） https://www.jinrishici.com/
  # subtitle 會先顯示 source , 再顯示 sub 的內容
  source: false
  # 如果關閉打字效果，subtitle 只會顯示 sub 的第一行文字
  sub:

书写副标题正确格式为

sub: 
- 这是副标题

而关于这里这个设置

# Font settings for the site title and site subtitle
# 左上角網站名字 主頁居中網站名字
blog_title_font: 
  font_link:
  font-family:

这字体设置是个啥格式不知道，官方文档还没看完，可能有写。

但是我的问题是，这2个地方的标题如果能分开设置就好了，之后可能会稍微研究一下。