Hexo博客Ayer主题自定义配置

Hexo
字数统计: 2.6k   |   阅读时长≈ 12 分钟
  1. 主要命令说明
  2. 代码高亮
  3. 站内搜索
  4. 文章字数统计
  5. EVANYOU三角彩带背景
  6. Valine评论框加背景
  7. 运行天数
  8. 自我介绍botui机器人
  9. 文章顶置
  10. 页内音乐播放器
  11. 中文链接转拼音
  12. 添加视频
  13. hexo中插入pdf
  14. 在 Hexo 中插入 ECharts 动态图表
  15. 利用Hexo-abbrlink插件生成唯一文章链接
  16. 日志的自动分类插件 hexo-auto-category
  17. 在Hexo博客中加入豆瓣读书页面
  18. 部署到github上
  19. 参考

Ayer主题，下面是我的部分配置，可以参考，希望能帮到你

主要命令说明

# 初始化网站 
$ cd myblog 
$ hexo init 

# 新建一篇文章 
$ hexo new [layout] <title> 
$ hexo new post "article_name" # 新建文章 
$ hexo new page "name" # 少用 

# 生成静态文件,可简写为 hexo g 
$ hexo generate 
$ hexo g #

生成草稿 
$ hexo putlish [layout] <filename> 

# 启动服务器 可以简写为 hexo s 
$ hexo server # 参数: -p:指定端口 
# -s:只使用静态文件 
# -i:指定ip地址 

# 部署网站,可以简写为 hexo d 
$ hexo deploy 

# 清除缓存文件 db.json 和已经成成的静态文件 public 
$hexo clean 

# 查看版本 
$ hexo version

代码高亮

由于Hex 自带的代码高亮主题显示不好看，所以主题中使用到了 [hexo-prism-plugin](https://github.com/ele828/hexo-prism-plugin) 的Hexo插件来做代码高亮，安装命令如下：

npm i -S hexo-prism-plugin

然后，修改 Hexo 根目录下 _config.yml 文件中 highlight.enable 的值为 false，并新增 prism 插件相关的配置，主要配置如下：

# 44行 打开生成文件时同时生成文件夹 
post_asset_folder: true 
highlight: 
    enable: false 

#prismjs:
#  enable: false
#  preprocess: true
#  line_number: true
#  tab_replace: ''

prism_plugin: 
    mode: 'preprocess' # realtime/preprocess 
    theme: 'tomorrow' 
    line_number: false # default false 
    custom_css:

站内搜索

本主题中还使用到了 hexo-generator-search 的 Hexo 插件来做内容搜索，安装命令如下：

npm install hexo-generator-search --save

在 Hexo 根目录下的 _config.yml 文件中，新增以下的配置项：

search:
 path: search.xml
 field: post

文章字数统计

如果你想要在文章中显示文章字数、阅读时长信息，可以安装 hexo-wordcount插件。

安装命令如下：

npm i --save hexo-wordcount

然后只需在本主题下的 _config.yml 文件中，将各个文章字数相关的配置激活即可：

postInfo: 
    date: true 
    update: false 
    wordCount: false # 设置文章字数统计为 true. 
    totalCount: false # 设置站点文章总字数统计为 true. 
    min2read: false # 阅读时长. 
    readCount: false # 阅读次数.

EVANYOU三角彩带背景

引入位置

路径：【Hexo\themes\ayer\layout\layout.ejs】

<%- partial('_partial/head') %>
<body>
  <div id="app">
    <main class="content on">
      <%- body %>
      <%- partial('_partial/footer', null, {cache: !config.relative_link}) %>
      <div class="float_btns">
        <%- partial('_partial/totop') %>
      </div>
    </main>
    <aside class="sidebar on">
      <%- partial('_partial/sidebar') %>
    </aside>
    <script>
      if (window.matchMedia("(max-width: 768px)").matches) {
        document.querySelector('.content').classList.remove('on');
        document.querySelector('.sidebar').classList.remove('on');
      }
    </script>
    <%- partial('_partial/modal') %>
    <%- partial('_partial/after-footer') %>

    <% if (theme.music&&theme.music.enable){ %>
    <%- partial('_partial/music') %>
    <% } %>
  </div>
  <!-- 三角彩带背景 -->
  <canvas id="evanyou-canvas" style="opacity: 0.3; position: fixed; top: 0px; left: 0px; z-index: -1; width: 100%; height: 100%; pointer-events: none;"></canvas>
  <script src="https://cdn.jsdelivr.net/gh/XXXZhy/Blog_Image/js/evanyou_canvas.js"></script>
</body>
</html>

Valine评论框加背景

路径：【Hexo\themes\ayer\layout_partial\post\valine.ejs】

<% if (!index && theme.leancloud && theme.leancloud.enable){ %>
<!-- valine评论 -->
<div id="vcomments-box">
    <div id="vcomments">
    </div>
</div>
<script src="//cdn1.lncld.net/static/js/3.0.4/av-min.js"></script>
<!-- <script src='https://cdn.jsdelivr.net/npm/valine@1.3.10/dist/Valine.min.js'></script> -->
<script src="//unpkg.com/valine/dist/Valine.min.js"></script>
<!-- 评论背景 -->                                                         
<style>
    #veditor{min-height: 10rem;
        background-image: url(https://gitee.com/cungudafa/source/raw/master/img/gif/katon/pinkcoolpig.gif);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: right;
        background-color: rgba(255,255,255,0);
        resize: none;}
</style>
<!-- Valine配置 --> 
<script>
    new Valine({
        el: '#vcomments',
        enableQQ: true,
        app_id: '<%- theme.leancloud.app_id %>',
        app_key: '<%- theme.leancloud.app_key %>',
        path: window.location.pathname,
        //notify: '<%- theme.valine.notify %>',
        //verify: '<%- theme.valine.verify %>',
        avatar: '<%- theme.valine.avatar %>',
        placeholder: '<%- theme.valine.placeholder %>',
        recordIP: true,

        // 设置Bilibili表情包地址
        emojiCDN: 'https://cdn.jsdelivr.net/gh/XXXZhy/Blog_Image/valine_emoticon/', 
        // 表情title和图片映射
        emojiMaps: {
            "墙角滑稽": "害怕滑稽.gif",
            "仙女下凡": "仙女下凡.webp",
            "听歌": "听歌.webp",
            "嫌弃": "嫌弃.webp",
            "害羞": "害羞.webp",
            "彩虹滑稽": "彩虹滑稽.webp",
            "快走": "快走.webp",
            "扯脸": "扯脸.webp",
            "摸脸": "摸脸.webp",
            "流汗": "流汗.webp",
            "滑滑板": "滑滑板.webp",
            "点赞": "点赞.webp",
            "转圈圈": "转圈圈.webp",
            // ... 更多表情
        }     
    });
    const infoEle = document.querySelector('#vcomments .info');
    if (infoEle && infoEle.childNodes && infoEle.childNodes.length > 0) {
        infoEle.childNodes.forEach(function (item) {
            item.parentNode.removeChild(item);
        });
    }
</script>

<style>
    #vcomments-box {
        padding: 5px 30px;
    }

    @media screen and (max-width: 800px) {
        #vcomments-box {
            padding: 5px 0px;
        }
    }

    #vcomments-box #vcomments {
        background-color: #fff;
    }

    .v .vlist .vcard .vh {
        padding-right: 20px;
    }

    .v .vlist .vcard {
        padding-left: 10px;
    }
</style>
<% } %>

运行天数

html

路径：【Hexo\themes\ayer\layout_partial\footer.ejs】加入

<!-- 运行天数 -->
    <ul>
        <li><span id="runtime_span"></span></li>
    </ul>

JS

路径：【Hexo\themes\ayer\layout_partial\footer.ejs】加入，在runtime_span标签后加

<script type="text/javascript">            
    function show_runtime() {
        window.setTimeout("show_runtime()", 1000);
        X = new Date("02/22/2020 22:22:22");
        Y = new Date();
        T = (Y.getTime() - X.getTime());
        M = 24 * 60 * 60 * 1000;
        a = T / M;
        A = Math.floor(a);
        b = (a - A) * 24;
        B = Math.floor(b);
        c = (b - B) * 60;
        C = Math.floor((b - B) * 60);
        D = Math.floor((c - C) * 60);
        runtime_span.innerHTML = "小站在各种崩坏中坚持了: " + A + "天" + B + "小时" + C + "分" + D + "秒"
    }
    show_runtime();
</script>

自我介绍botui机器人

路径：【FHexo\source\about\index.md】

---
title: about
date: 2020-05-09 19:23:38
---

<div class="entry-content">
  <div id="hello-mashiro" class="popcontainer" style="min-height: 300px; padding: 2px 6px 4px; background-color: rgba(242, 242, 242, 0.5); border-radius: 10px;">
    <center>
    <p>
    </p>
    <h4>
    与&nbsp;<ruby>
    XXXZhy&nbsp;<rp>
    （</rp>
    <rp>
    ）</rp>
    </ruby>
    通话中：</h4>
    <p>
    </p>
    </center>
    <bot-ui></botui>
  </div>
</div>


<script src="https://cdn.jsdelivr.net/gh/HG95/CDN/botui_hhg.js"></script>

<link href="https://cdn.bootcss.com/botui/0.3.9/botui-theme-default.css" rel="stylesheet">
<link href="https://cdn.bootcss.com/botui/0.3.9/botui.min.css" rel="stylesheet">

将上面这个的botui_xxxzhy.js下载下来，里面最后的对话改成自己的，再引进便可以了。

文章顶置

$ npm uninstall hexo-generator-index --save
$ npm install hexo-generator-index-pin-top --save
index_generator:
  path: ''
  per_page: 10
  order_by: -date

要在文章的开始加入 top: 是否开启置顶

title: Hexo博客Ayer主题自定义配置
top: false
date: 2020-09-13 19:12:26
categories: Hexo
tags:

页内音乐播放器

npm install --save hexo-tag-aplayer

公式

<!-- 简单示例 (id, server, type)  -->
<!-- 网易云音乐的歌单id -->
{% meting "60198" "netease" "playlist" %}

<!-- 进阶示例 -->
{% meting "60198" "netease" "playlist" "autoplay" "mutex:false" "listmaxheight:340px" "preload:none" "theme:#ad7a86"%}

配置_config.yml文件

aplayer:
  meting: true

中文链接转拼音

如果你的文章名称是中文的，那么 Hexo 默认生成的永久链接也会有中文，这样不利于 SEO，且 gitment 评论对中文链接也不支持。我们可以用 hexo-permalink-pinyin Hexo 插件使在生成文章时生成中文拼音的永久链接。

安装命令如下：

npm i hexo-permalink-pinyin --save

在 Hexo 根目录下的 _config.yml 文件中，新增以下的配置项：

permalink_pinyin:
  enable: true
  separator: '-' # default: '-'

添加视频

直接在.md 文件中引入代码：

<div style="position:relative; width:100%; height:0; padding-bottom:75%;">
<iframe src="//player.bilibili.com/player.html?aid=884294177&bvid=BV1iK4y1Y7dE&cid=227370204&page=1" 
scrolling="no" border="0" frameborder="no"  framespacing="0"  
style="position:absolute; width:100%; height:100%;  left:0; top:0"  > </iframe>
</div>
这里是先获取嵌入式分享的代码： image-20200913221305549

提取嵌入代码里面的 src ，并复制到上面的代码中。

hexo中插入pdf

安装hexo-pdf插件

插件地址：hexo-pdf

Install

$ npm install --save hexo-pdf

利用html语法

首先修改_config.yml文件

将_config.yml中的post_asset_folder选项置为true

当您设置post_asset_folder为true参数后，在建立文件时，Hexo 会自动建立一个与文章同名的文件夹，您可以把与该文章相关的所有资源都放到那个文件夹，如此一来，您便可以更方便的使用资源。

直接使用

在\themes\next\source\目录下创建file文件夹，将pdf文件丢进去，文章中引用：

{% pdf /file/pdf文件%}

如果使用外接链接，使用如下：

外部链接：
{% pdf http://7xov2f.com1.z0.glb.clouddn.com/bash_freshman.pdf %}

在 Hexo 中插入 ECharts 动态图表

Hexo 中的 ECharts

Hexo 的 ECharts 插件是我根据周旅军的原型插件[1]开发的，已收录于 Hexo 官方插件页。插件的安装和使用非常的简单，只需要进入博客目录，然后安装

npm install hexo-tag-echarts3 --save

之后在文章内使用 ECharts 的 tag 就可以了：

{% echarts 400 '85%' %}
\\TODO option goes here
{% endecharts %}

其中 echarts 是标签名，不需要更改，400 是图表容器的高度，85% 是图表容器的相对宽度。而在 tag 之间的部分，则是需要自己填充的图表数据了。

利用Hexo-abbrlink插件生成唯一文章链接

安装

npm install hexo-abbrlink --save

修改 _config.yml 文件

permalink: posts/:abbrlink/
# abbrlink config
abbrlink:
  alg: crc32      #support crc16(default) and crc32
  rep: hex        #support dec(default) and hex

日志的自动分类插件 hexo-auto-category

安装

$ npm install hexo-auto-category --save

配置

在站点根目录下的_config.yml添加：

# Generate categories from directory-tree
# Dependencies: https://github.com/xu-song/hexo-auto-category
# depth: the depth of directory-tree you want to generate, should > 0
auto_category:
 enable: true
 depth:

在Hexo博客中加入豆瓣读书页面

https://bestzuo.cn/posts/hexo-douban.html

部署到github上

安装插件：

npm install hexo-deployer-git --save

修改网站配置文件_config.yml,添加deploy信息：

deploy:
  type: git
  repository: https://github.com/HG95/HG95.github.io.git
  branch: master

上面的repo的配置信息，替换成自己的项目名字

生成SSH key:

$ ssh-agent bash

以上命令回车，启动进程，后再输入命令：

$ ssh-add ~/.ssh/id_rsa

按照提示操作输入密码，

这样就在c盘对应位置生成了ssh-key；

配置github账户的ssh-key
打开id_rsa.pub文件将一整串公钥拷贝下来

进入你的github账户设置，在ssh and GPG keys中新增一个ssh key，如下

image-20201118202440512 image-20201118202520067

title随意，key填id_rsa.pub文件中内容，保存即可；

验证是否连接成功：

$ ssh -T git@github.com

出现下面的语句说明你的ssh key已经配置好了

Hi wispyoureyes! You've successfully authenticated, but GitHub does not provide shell access.

ok,到了这一步，本地跟远程github的连接已经建立，在项目中，直接生成静态文件，上传就可以了：

$ hexo clean  //清除缓存文件db.json和已生成的静态文件public
$ hexo g   //生成网站静态文件到默认设置的public文件夹
$ hexo d   //部署网站到设定的仓库
hexo clean && hexo douban -bgm && hexo g && hexo s

hexo clean && hexo douban -bgm && hexo g && hexo deploy

参考

打赏
  • 版权声明： 本博客所有文章除特别声明外，著作权归作者所有。转载请注明出处！

扫一扫，分享到微信

微信分享二维码
来发评论吧~
Powered By Valine
v1.4.14
  • Copyrights © 2019-2021 HG | 访问人数:26415 | 浏览次数:30344
  • 小站在各种崩坏中坚持了: 1668天3小时14分22秒

请我喝瓶农夫三拳吧~

支付宝
微信