蕩漾

爱欲之人犹如执炬逆行，必有灼手之患

0%

我与我

发表于 分类于
本文字数： 5.4k
我与我的博客

Bolg环境配置

博客采用的Hexo框架XNext主题，采取的是网站部署到Github,图片资源采用CDN加速的方式。

Git

下载地址

node.js

下载地址

Next插件配置

文章字数统计

1
npm install hexo-symbols-cunt-time

配置站点配置文件_config.yml下添加

1
2
3
4
5
6
7
8
9
10
11
12
#设置博客单词统计
symbols_count_time:
  #文章字数统计
  symbols: true
  #文章阅读时间统计
  time: false
  #站点总字数统计
  total_symbols: true
  #站点总阅读时问统计
  total_time: false
  #排除代码字数影响
  exclude_codeblock: true

在主题配置文件下添加themes\next_config.yml

1
2
3
4
5
6
7
symbols_count_time:
#是否另起一行，不和发表时间一行
  separated_meta: true
#首页文字统计数量前是否添加文字描述 “本文字数”
  item_text_post: true
#页面底部是否显示文字描述
  item_text_total: false

RSS插件

为什么要安装RSS插件呢？不了解的可以看看这篇文章：rss订阅是什么意思?为什么要使用RSS?简单来说，RSS是一种协议，允许网站将其内容或其部分内容提供给其他网站或应用程序。通过使用RSS，可以节省宝贵的时间，并将各个站点提供的新闻和信息组织到一个中心点进行查看，也可以通过从使用RSS联合其内容的其他站点导入新闻来向你的站点添加新闻。

###安装hexo-generator-feed插件**

1
npm install hexo-generator-feed --save

在站点配置文件末尾加上如下代码：

1
2
3
4
5
6
feed:
  type: rss2
  path: rss2.xml
  limit: 10
  hub:
  content: 'true'

打开主题配置文件，搜索rss，将前面的#去掉：

1
2
3
4
5
follow_me:
  #Twitter: https://twitter.com/username || twitter
  #Telegram: https://t.me/channel_name || telegram
  #微信: /images/wechat_channel.jpg || wechat
  RSS: /atom.xml || rss

本地搜索

1
npm install hexo-generator-search

查找themes/next/_config.yml中的local_search ：

1
2
3
local_search:
  enable: true
  trigger: manual   #手动，按回车键或搜索按钮触发搜索

图片可点击放大

打开主题配置文件_config.yml，搜索fancybox，设置其值为true：

1
fancybox: true

进入到theme/next文件夹下，打开Git Bash，输入如下代码：

1
git clone theme-next/theme-next-fancybox3 source/lib/fancybox

博文置顶

在根目录Blog打开Git Bash，执行下面的命令：

1
2
npm uninstall hexo-generator-index --save
npm install hexo-generator-index-pin-top --save

设置置顶标志

打开blog/themes/next/layout/_macro目录下的post.swig文件，定位到<div class="post-meta">标签下，插入如下代码：

1
2
3
4
5
{% if post.top %}
  <i class="fa fa-thumb-tack"></i>
  <font color=7D26CD>置顶</font>
  <span class="post-meta-divider">|</span>
{% endif %}

在文章中添加top

然后在需要置顶的文章的Front-matter中加上top: true即可，如下：

1
2
3
4
5
6
---
title: Hello World

top: true(>0的数字越大越靠上)

---

hexo上给文章加密

1
npm install --save hexo-blog-encrypt

下好插件后将等字段添加到要加密文章的头部，如下：password, abstract, message

1
2
3
4
5
6
7
8
---
title: Hello World
date: 2020-05-02 18:00:00
them:up主题
password: 设定的密码
abstract: 该博客的摘要，会显示在博客的列表页
message: 查看博客时，密码输入框上面的描述性文字
---

hexo上给文章添加豆瓣卡片

下载插件:

1
npm install hexo-douban-card --save

第一项代表插件名douban

第二项可选:movie,book,music

第三项为豆瓣作品对应id，为豆瓣地址栏中后的数字subject

1
2
3
4
5
{% douban movie 24745500 %}

{% douban book 30376420 %}

{% douban music 35099703 %}

插入音乐

1
npm install --save hexo-tag-aplayer

在 Hexo 配置文件 _config.yml 中设置：

1
2
aplayer:
  meting: true

接着找到一个歌单、歌曲或专辑的链接，复制这个链接的id，这里以QQ音乐举例： https://y.qq.com/n/yqq/playlist/7868042847.html ，这个歌单的id就是7868042847；

最后将以下示例代码插入到你想要呈现播放器的地方即可：

1
{% meting "7868005687" "tencent" "playlist" "theme:#555" "mutex:true" "listmaxheight:1000px" "preload:auto" %}
选项 默认值 描述
id 必须值 歌曲 id / 播放列表 id / 相册 id / 搜索关键字
server 必须值 音乐平台: netease , tencent , kugou , xiami , baidu
type 必须值 song , playlist , album , search , artist
fixed false 开启固定模式
mini false 开启迷你模式
loop all 列表循环模式： all , one , none
order list 列表播放模式： list , random
volume 0.7 播放器音量
lrctype 0 歌词格式类型
listfolded false 指定音乐播放列表是否折叠
storagename metingjs LocalStorage 中存储播放器设定的键名
autoplay true 自动播放，移动端浏览器暂时不支持此功能
mutex true 该选项开启时，如果同页面有其他 aplayer 播放，该播放器会暂停
listmaxheight 340px 播放列表的最大长度

B站追番列表

安装

1
$ npm install hexo-bilibili-bangumi --save

将下面的配置写入站点的配置文件 _config.yml 里(不是主题的配置文件).

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
bangumi: # 追番设置
  enable: true
  source: bili
  bgmInfoSource: 'bgmApi'
  path:
  vmid:
  title: '追番列表'
  quote: '生命不息，追番不止！'
  show: 1
  lazyload: true
  srcValue: '__image__'
  lazyloadAttrName: 'data-src=__image__'
  loading:
  showMyComment: false
  pagination: false
  metaColor:
  color:
  webp:
  progress:
  extraOrder:
  proxy:
    host: '代理host'
    port: '代理端口'
  extra_options:
    key: value
cinema: # 追剧设置
  enable: true
  path:
  vmid:
  title: '追剧列表'
  quote: '生命不息，追剧不止！'
  show: 1
  lazyload: true
  srcValue: '__image__'
  lazyloadAttrName: 'data-src=__image__'
  loading:
  metaColor:
  color:
  webp:
  progress:
  extraOrder:
  extra_options:
    key: value

带*为必填选项！

  • enable: 是否启用
  • source: 数据源，仅支持追番，追剧仅支持哔哩哔哩源。bili: 哔哩哔哩源, bangumi: Bangumi源(bangumi.tv), bgm: Bangumi源(bgm.tv)
  • bgmInfoApi: 获取Bangumi番剧信息时使用的Api，仅使用Bangumi源时此选项生效。bgmApi: Bangumi Api, bgmSub: Bangumi-Subject
  • proxy: 代理设置，仅在使用支持bgm源追番时生效。默认false
  • path: 页面路径，默认bangumis/index.html, cinemas/index.html
  • vmid: 哔哩哔哩的 vmid(uid)如何获取？或Bangumi的用户id如何获取？
  • title: 该页面的标题
  • quote: 写在页面开头的一段话，支持 html 语法，可留空。
  • show: 初始显示页面：0: 想看, 1: 在看, 2: 看过，默认为1
  • lazyload: 是否启用图片懒加载，如果与主题的懒加载冲突请关闭，默认true
  • srcValue: 设置封面图的默认src值, __image__为封面链接, __loading__为loading图片链接, lazyload选项为false时此选项生效
  • lazyloadAttrName: 设置封面图的属性与属性值, 例lazyloadAttrName: 'data-src=__image__'代表为img元素添加data-src属性, 其值为图片链接, lazyload选项为false时此选项生效
  • loading: 图片加载完成前的 loading 图片，需启用图片懒加载
  • metaColor: meta 部分(简介上方)字体颜色（十六进制的颜色代码需要添加引号：metaColor: '#FFFFFF'）
  • color: 简介字体颜色
  • webp: 番剧封面使用webp格式(此格式在safari浏览器下不显示，但是图片大小可以缩小 100 倍左右，仅支持哔哩哔哩源), 默认true
  • progress: 获取番剧数据时是否显示进度条，默认true
  • extraOrder: 手动添加的番剧/追剧数据是否优先显示，1为优先，其它为不优先
  • showMyComment: 使用bgm源时显示自己的评价及评论，默认false
  • pagination: 分页优化，只将第一页的数据渲染到html文件中，其余数据将通过异步请求加载，避免番剧过多时html文件过大导致页面加载缓慢，建议番剧较多时使用，默认false
  • extra_options: 此配置会扩展到Hexopage变量中

使用

  1. 在hexo generate或hexo deploy之前使用hexo bangumi -u命令更新追番数据，使用hexo cinema -u命令更新追剧数据！
  2. 删除数据命令:hexo bangumi -d/hexo cinema -d

手动添加番剧/追剧数据

因为某些番剧在哔哩哔哩上没有，但是又想在hexo中展示，怎么办呢？现在支持手动添加番剧数据了！

在 sources/_data/ 目录下新建文件，命名为 extra_bangumis.json(追番数据)或extra_cinemas.json(追剧数据) ，并添加以如下内容:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
{
  "watchedExtra": [
    {
      "title": "缘之空",
      "type": "番剧",
      "area": "日本",
      "cover": "https://cdn.jsdelivr.net/gh/mmdjiji/bangumis@main/Yosuga-no-Sora/cover.jpg",
      "totalCount": "全12话",
      "id": 0,
      "follow": "不可用",
      "view": "不可用",
      "danmaku": "不可用",
      "coin": "不可用",
      "score": "不可用",
      "des": "远离都市的田园小镇，奥木染。春日野悠带着妹妹穹，来到了这座城镇。坐落在这里的是，儿时暑假经常造访的充满回忆的已故祖父的家。双亲因意外事故而丧生，变得无依无靠..."
    }
  ]
}

title 是番剧的标题，cover 是封面图链接， des 是简介，上述字段均根据需要修改。

另外除了 watchedExtra 数组，还可以在后面添加新的数组，可用数组名如下:

可用数组名 含义
wantWatchExtra 想看
watchingExtra 在看
watchedExtra 看过

需要注意，在两个数组之间需要用 , 分隔。

NexT主题美化

设置建站时间

打开主题配置文件即themes/next下的_config.yml，查找since：

1
2
3
footer:
  # Specify the date when the site was setup. If not defined, current year will be used.
  since: 2020-02   #建站时间

文章末尾添加版权说明

查找主题配置文件themes/next/_config.yml中的creative_commons：

1
2
3
4
5
creative_commons:
  license: by-nc-sa
  sidebar: false
  post: true  # 将false改为true即可显示版权信息
  language:

设置头像

打开主题配置文件即themes/next下的_config.yml，查找avatar，url后是图片的链接地址：

1
2
3
4
5
6
7
8
# Sidebar Avatar
avatar:
  # Replace the default image and set the url here.
  url: /images/avatar.gif   #图片的位置，也可以是http://xxx.com/avatar.png
  # If true, the avatar will be dispalyed in circle.
  rounded: true   #头像展示在圈里
  # If true, the avatar will be rotated with the cursor.
  rotated: false  #头像随光标旋转

然后将你要的头像图片复制到themes/next/source/images里，重命名为avatar.png。

网站图标设置

使用格式转换器将自己需要的图片压缩

下载16x16和32x32的图标后，打开主题配置文件，查找favicon，只要修改small和medium为你的图标路径：

1
2
3
4
5
6
7
favicon:
  small: /images/favicon-16x16.png
  medium: /images/favicon-32x32.png
  apple_touch_icon: /images/apple-touch-icon-next.png
  safari_pinned_tab: /images/logo.svg
  #android_manifest: /images/manifest.json
  #ms_browserconfig: /images/browserconfig.xml

设置动态背景

JavaScript 3D library风格

在themes/next目录下打开Git Bash，输入：

1
git clone https://github.com/theme-next/theme-next-three source/lib/three

打开主题配置文件即themes/next下的_config.yml，找到three，这里有三种风格，可以试一下看看喜欢哪种风格，直接将false改为true就行了。

1
2
3
4
5
6
7
# JavaScript 3D library.
# Dependencies: https://github.com/theme-next/theme-next-three
three:
  enable: true
  three_waves: false
  canvas_lines: false
  canvas_sphere: false

设置背景图片

打开主题配置文件即themes/next下的_config.yml，将 style: source/_data/styles.styl 取消注释：

1
2
custom_file_path:
  style: source/_data/styles.styl

打开根目录Blog/source创建文件_data/styles.styl，添加以下内容：

1
2
3
4
5
6
7
8
// 添加背景图片
body {
      background: url(images/background.png);//自己喜欢的图片地址
      background-size: cover;
      background-repeat: no-repeat;//定义背景图像的重复方式。不重复
      background-attachment: fixed;//决定背景图像的位置是在视口内固定，或者随着包含它的区块滚动。
      background-position: 50% 50%;//每一个背景图片设置初始位置。
}

主页文章添加阴影效果

打开themes/next/source/css/_common/conponents/post/post.styl，修改.post-block，如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.use-motion {
  if (hexo-config('motion.transition.post_block')) {
    .post-block {
      opacity: 0;
      margin-top: 60px;
      margin-bottom: 60px;
      padding: 25px;
      background:rgba(255,255,255,0.9) none repeat scroll !important;
      -webkit-box-shadow: 0 0 5px rgba(202, 203, 203, .5);
      -moz-box-shadow: 0 0 5px rgba(202, 203, 204, .5);

    }
    .pagination, .comments{
      opacity: 0;
    }
  }

还有一种方法打开Blog/source/_date/style.styl文件，添加以下代码：

1
2
3
4
5
6
7
// 主页文章添加阴影效果
.post {
   margin-top: 60px;
   margin-bottom: 60px;
   padding: 25px;
   -webkit-box-shadow: 0 0 5px rgba(202, 203, 203, .5);
   -moz-box-shadow: 0 0 5px rgba(202, 203, 204, .5);

设置预览摘要

next（v7.7.1）已经没有如下代码：

1
2
3
auto_excerpt:
  enable: true
  length: 150

所以不需要设置，只要我们在文章中插入 ，该标签之上的是摘要，之后的内容不可见，需点击全文阅读按钮：

1
<!-- more -->

设置侧边栏显示效果

打开主题配置文件即themes/next下的_config.yml，找到Sidebar Settings，设置：

1
2
3
4
5
6
7
8
9
10
sidebar:
  # Sidebar Position. #设置侧边栏位置
  position: left
  #position: right

  #  - post    默认显示模式
  #  - always  一直显示
  #  - hide    初始隐藏
  #  - remove  移除侧边栏
  display: post

侧边栏推荐阅读

打开主题配置文件即themes/next下的_config.yml，搜索links（里面写你想要的链接）：

1
2
3
4
5
6
7
8
9
10
links_settings:
  icon: fa fa-link
  title: 怪异！
  # Available values: block | inline
  layout: inline

links:
  #Title: http://yoursite.com
  物语介绍: https://zh.moegirl.org.cn/%E7%89%A9%E8%AF%AD%E7%B3%BB%E5%88%97
  物语拜年祭: https://space.bilibili.com/290451282

添加社交链接

打开主题配置文件即themes/next下的_config.yml，搜索social：

1
2
3
4
5
social:
  bilibil: https://space.bilibili.com/ || fab fa-instagram
  GitHub: https://github.com/ || fab fa-github
  Music: https://music.163.com/#/user/home? || fab fa-youtube
  E-Mail: mailto:xxxx@.com || fa fa-envelope

“||”前面的是链接，后面的是 FontAwesome图标名称。

设置博文内链接为蓝色

打开themes/next/source/css/_common/components/post/post.styl文件，将下面的代码复制到文件最后：

1
2
3
4
5
6
7
8
.post-body p a{
     color: #0593d3;
     border-bottom: none;
     &:hover {
       color: #0477ab;
       text-decoration: underline;
     }
   }

设置文章末尾”本文结束”标记

在路径/themes/next/layout/_macro 中新建 passage-end-tag.swig 文件,并添加以下内容：

1
2
3
4
5
<div>
    {% if not is_index %}
        <div style="text-align:center;color: #ccc;font-size:24px;">-------------本文结束<i class="fa fa-paw"></i>感谢您的阅读-------------</div>
    {% endif %}
</div>

接着打开/themes/next/layout/_macro/post.swig文件，在post-footer前添加代码：

1
2
3
4
5
{% if not is_index and theme.passage_end_tag.enabled %}
  <div>
    {% include 'passage-end-tag.swig' %}
  </div>
{% endif %}

然后打开主题配置文件（_config.yml)，在末尾添加：

1
2
3
# 文章末尾添加“本文结束”标记
passage_end_tag:
  enabled: true

添加访问量统计

打开主题配置文件即themes/next下的_config.yml，找到busuanzi_count，改为true：

1
2
busuanzi_count:
  enable: true

打开/themes/next/layout/_partials/footer.swig，在最后添加如下内容：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
{% if theme.busuanzi_count.enable %}
    <script async src="//dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script>

    <span id="busuanzi_container_site_pv">总访问量<span id="busuanzi_value_site_pv"></span>次</span>
    <span class="post-meta-divider">|</span>
    <span id="busuanzi_container_site_uv">总访客数<span id="busuanzi_value_site_uv"></span>人</span>
    <span class="post-meta-divider">|</span>
<!-- 不蒜子计数初始值纠正 -->
<script>
$(document).ready(function() {

    var int = setInterval(fixCount, 50);  // 50ms周期检测函数
    var countOffset = 20000;  // 初始化首次数据

    function fixCount() {            
       if (document.getElementById("busuanzi_container_site_pv").style.display != "none")
        {
            $("#busuanzi_value_site_pv").html(parseInt($("#busuanzi_value_site_pv").html()) + countOffset); 
            clearInterval(int);
        }                  
        if ($("#busuanzi_container_site_pv").css("display") != "none")
        {
            $("#busuanzi_value_site_uv").html(parseInt($("#busuanzi_value_site_uv").html()) + countOffset); // 加上初始数据 
            clearInterval(int); // 停止检测
        }  
    }
       	
});
</script> 
{% endif %}

代码块样式自定义

打开根目录Blog/source/_data/styles.styl，添加以下内容：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// Custom styles.
code {
    color: #ff7600;
    background: #fbf7f8;
    margin: 2px;
}
// 大代码块的自定义样式
.highlight, pre {
    margin: 5px 0;
    padding: 5px;
    border-radius: 3px;
}
.highlight, code, pre {
    border: 1px solid #d6d6d6;
}

支持mathjax公式

打开主题配置文件，搜索mathjax：

1
2
3
mathjax:
    enable: true   #将false改为true
    mhchem: false  #用来写化学方程式

腾讯公益404页面

离家的路有千万条，但回家的路只有一条。

在~/hexo/themes/next/source目录下新建404.html页面，在新建页面内添加如下内容：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
copy<!DOCTYPE HTML>
<html>
<head>
  <meta http-equiv="content-type" content="text/html;charset=utf-8;"/>
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <meta name="robots" content="all" />
  <meta name="robots" content="index,follow"/>
  <link rel="stylesheet" type="text/css" href="https://qzone.qq.com/gy/404/style/404style.css">
</head>
<body>
  <script type="text/plain" src="http://www.qq.com/404/search_children.js"
          charset="utf-8" homePageUrl="/"
          homePageName="回到我的主页">
  </script>
  <script src="https://qzone.qq.com/gy/404/data.js" charset="utf-8"></script>
  <script src="https://qzone.qq.com/gy/404/page.js" charset="utf-8"></script>
</body>
</html>

其中homePageUrl与homePageName可自定义。

修改文章底部#号tag标签

在~hexo/themes/next/layout/_macro中找到post.swig文件，在内搜索el="tag">#，将#换成<i class="fa fa-tag"></i>即可，然后hexo s刷新预览吧。

想使用其他图标可在Fontawesome内自行查找。

给文章添加更新时间

在主题配置文件中找到updated_at，默认为false，修改成true即可。

添加突破容器宽度限制的图片

当使用此标签引用图片时，图片将自动扩大 26%，并突破文章容器的宽度。 此标签使用于需要突出显示的图片, 图片的扩大与容器的偏差从视觉上提升图片的吸引力。 此标签有两种调用方式（详细参看底下示例）：

  • HTML方式：使用这种方式时，为 img 添加属性 class=”full-image”即可。
  • 标签方式：使用 fullimage 或者 简写 fi， 并传递图片地址、 alt 和 title 属性即可。 属性之间以逗号分隔。

标签方式要求 NexT 的版本在 0.4.5 或以上。 若你正在使用的版本比较低，可以选择使用 HTML 方式。
如果要在图片下显示图片的标题，请使用 标签方式 并给定 title 属性。

1
2
3
4
5
6
7
8
copy<!-- HTML方式: 直接在 Markdown 文件中编写 HTML 来调用 -->
<!-- 其中 class="full-image" 是必须的 -->
<img src="/image-url" class="full-image" />

{% fullimage /image-url, alt, title %}

<!-- 别名 -->
{% fi /image-url, alt, title %}

添加折叠项

格式如下，其中内容可以是文字和图片等：

1
2
3
<details><summary>点此打开折叠项</summary><p>
内容
</p></details>

示例：

点此打开折叠项

内容

　　

　　

-EOF-