CentOS Hexo-Butterfly快速搭建

博主： Dwtowen
发布时间：2020 年 05 月 21 日
1678 次浏览
暂无评论
38168字数
分类：技术技巧 System

# 快速安装 hexo

# 主题首页及菜单

> **说明：**
> 此文章仅仅是 My Blog 的配置和调整。
> 环境：`CentOS Linux release 8.1.1911 (Core)` | `NodeJs v13.14.0` | `git version 2.27.0` | `Nginx/1.19.0`
> 如果你觉得我的博客能满足你的需求，你可以完全按照此文章来快速进行你的博客部署和配置。

> 下载我的 `butterfly.yml` [下载butterfly.yml](#) ,Url 暂未公布。
> 我的 博客 [Demo](https://demo.blog.dwtowen.com) 点击查看效果。
> hexo官方地址 [hexo.io](https://hexo.io/)
> GitHub `hexo-theme-butterfly` 开源地址 [hexo-theme-butterfly](https://github.com/jerryc127/hexo-theme-butterfly)

> 需要更详细了解 hexo，请移步至 hexo 官方文档或者 theme 作者开源地址
> 参考文章：
> [hexo](https://hexo.io/) 官方文档 [hexo-theme-butterfly](https://github.com/jerryc127/hexo-theme-butterfly) 主题官方文档 以及 [JERRYC](https://jerryc.me/) 博客文章；

# 卸载 hexo

3.0.0 版本执行

```
npm uninstall hexo-cli -g
```

之前版本执行

```
npm uninstall hexo -g
```

# 开始安装

{% note warning %}
前提：你需要 安装好 Git 和 NodeJs ！
{% endnote %}

安装最新版 Git 和 NodeJs 可根据我博客的两篇文章进行安装。

## 安装 Git

[CentOS安装最新版Git](https://blog.dwtowen.com/2020/06/20/CentOS%E5%AE%89%E8%A3%85%E6%9C%80%E6%96%B0%E7%89%88Git/)

## 安装 NodeJs

[CentOS安装最新版Nodejs](https://blog.dwtowen.com/2020/03/20/CentOS%E5%AE%89%E8%A3%85%E6%9C%80%E6%96%B0%E7%89%88Nodejs/)

> 如需要在 /opt/ 目录下安装 Hexo

```
cd /opt/
```

快速开始

```bash
npm install hexo-cli -g
hexo init hexo
cd hexo
npm install
hexo server
```

这样，hexo 就安装完成了。
如安装不报错，hexo 会自动运行于 4000 端口。
访问地址为：http://localhost:4000

# 安装 Butterfly 主题

你可参考 GitHub 作者开源文档。
以下是主题开源链接地址：
https://github.com/jerryc127/hexo-theme-butterfly

```
git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/Butterfly
```

## 下载安装 pug 以及 stylus 的渲染器

```
npm install hexo-renderer-pug hexo-renderer-stylus
```

到这里 Butterfly 主题安装完成。

# hexo 关键命令

补充几个 hexo 关键的操作命令：

```bash
hexo clean
hexo g
hexo s
hexo d
```

## 命令解释：

以后每次同步远程仓库，基本都是上面的命令顺序。

# 平滑升級

為了主題的平滑升級，`Butterfly` 使用了 `data files` 特性。

主题默认的配置文件 `_config.yml` 复制到 `Hexo` 工作目录下的 `source/_data/butterfly.yml`，如果 `source/_data` 目录不存在那就创建一个。

> 注意，如果你创建了 butterfly.yml, 它将会替换主题默认配置文件_config.yml 里的配置项 （不是合併而是替换）, 之后你就只需要通过 git pull 的方式就可以平滑地升级 theme-butterfly 了。

# Post/draft Front-matter 模板

模板文件夹

```yml
---
title: <ruby>title }}
date<rp> (</rp><rt>{{ date</rt><rp>) </rp></ruby>
updated:
tags:
categories:
keywords:
description:
top_img:
comments:
cover:
toc: true
toc_number: true
copyright:
mathjax:
katex:
sticky:
password:
message:
---
```

# 标签页

前往你的 Hexo 博客的根目录

```nginx
hexo new page tags
```

你会找到 source/tags/index.md 这个文件

修改这个文件：

```nginx
vim source/tags/index.md
```

```yml
---
title: 标签
date: 2020-01-05 00:00:00
type: "tags"
---
```

# 分类页

前往你的 Hexo 博客的根目录

```nginx
hexo new page categories
```

你会找到 source/categories/index.md 这个文件

修改这个文件：

```nginx
vim source/categories/index.md
```

```yml
---
title: 分类
date: 2020-01-05 00:00:00
type: "categories"
---
```

# 友情链接

为你的博客创建一个友情链接！

创建友情链接页面
前往你的 Hexo 博客的根目录

```nginx
hexo new page link
```

你会找到 source/link/index.md 这个文件
修改这个文件：

```nginx
vim source/link/index.md
```

```yml
---
title: 友情链接
date: 2018-06-07 22:17:49
type: "link"
---
```

## 友情链接添加

在 Hexo 博客目录中的 `source/_data` 创建一个文件 link.yml

> 注意：如果你之前已经移动过主题配置文件，那么你现在已经有_data 目录，可直接 vim 新建。
> 
> 如果你没有 _data 目录，则你需要先新建 `source/_data/ `目录。

```nginx
vim source/_data/link.yml
```

```yml
class:
  class_name: 友情链接
  link_list:
    1:
      name: xxx
      link: https://blog.xxx.com
      avatar: https://cdn.xxxxx.top/avatar.png
      descr: xxxxxxx
    2:
      name: xxxxxx
      link: https://www.xxxxxxcn/
      avatar: https://xxxxx/avatar.png
      descr: xxxxxxx

class2:
  class_name: 链接无效
  link_list:
    1:
      name: 梦xxx
      link: https://blog.xxx.com
      avatar: https://xxxx/avatar.png
      descr: xxxx
    2:
      name: xx
      link: https://www.axxxx.cn/
      avatar: https://x
      descr: xx
```

## 友情链接界面设置

除了上边的添加方式外，由 2.2.0 起，你当然可以直接在友情链接的 md 文档里边直接创建和添加，以普通的 Markdown 格式书写即可。

# About

为你的博客创建一个 About 页面。

创建友情链接页面
前往你的 Hexo 博客的根目录

```nginx
hexo new page about
```

你会找到 source/about/index.md 这个文件
修改这个文件：

```nginx
vim source/about/index.md
```

```yml
---
title: about
date: 2020-05-05 15:49:10
type: "about"
---
```

然后你就可以直接用 Markdown 愉快的书写 About 页面了。

```md
{% aplayer "Kiss The Rain" "李闰珉" "/music/mp3/Kiss The Rain - 李闰珉.mp3" "/music/pic/Kiss The Rain.jpg" autoplay %}

# 关于我
<div style="border:1px soli #333;border-left:4px solid #fa0; padding-left:15px;">
<p> Never put off till tomorrow what you can do today.</p>
<p style="font-weight:bold; margin-top:-15px;"> —— Thomas Jefferson</p>
</div>
```

以上 Demo

<div style="border:1px soli #333;border-left:4px solid #fa0; padding-left:15px;">
<p> Never put off till tomorrow what you can do today.</p>
<p style="font-weight:bold; margin-top:-15px;"> —— Thomas Jefferson</p>
</div>

# 音乐

前往你的 Hexo 博客的根目录

```nginx
hexo new page music
```

你会找到 source/music/index.md 这个文件

修改这个文件：

```nginx
vim source/music/index.md
```

```yml
---
title: music
date: 2020-01-05 00:00:00
type: "music"
---
```

音乐界面推荐采用了 [MetingJS](https://github.com/metowolf/MetingJS) or [hexo-tag-aplayer](https://github.com/MoePlayer/hexo-tag-aplayer)

使用方法你或许可直接参考插件文档。

插件地址：https://github.com/MoePlayer/hexo-tag-aplayer

点击上方的蓝色的 `hexo-tag-aplayer` 也可直接打开插件地址。

## 安装 `hexo-tag-aplayer` 插件

```nginx
npm install --save hexo-tag-aplayer
```

启用 hexo-tag-aplayer

```nginx
vim /source/_data/butterfly.yml
```

添加如下配置

```yml
aplayer:
  meting: true
```

安装完插件后，根据 `hexo-tag-aplayer` 开源插件文档你就可以添加你的音乐了。
以下是我个人的 `Demo` 配置

```yml
---
title: music
date: 2020-01-05 00:00:00
type: "music"
---
{% aplayer "Kiss The Rain" "李闰珉" "/music/mp3/Kiss The Rain - 李闰珉.mp3" "/music/pic/Kiss The Rain.jpg" autoplay %}

{% aplayerlist %}
{
    "narrow": false,
    "autoplay": true,
    "mode": "random",
    "showlrc": 3,
    "mutex": true,
    "theme": "#ffffff",
    "preload": "metadata",
    "listmaxheight": "513px",
    "music": [
        {
            "title": "Kiss The Rain",
            "author": "李闰珉",
            "url": "/music/mp3/Kiss The Rain - 李闰珉.mp3",
            "pic": "/music/pic/Kiss The Rain.jpg"
        }
    ]
}
{% endaplayerlist %}

{% aplayerlist %}
{
    "narrow": false,
    "autoplay": false,
    "mode": "random",
    "showlrc": 3,
    "mutex": true,
    "theme": "#ffffff",
    "preload": "metadata",
    "listmaxheight": "513px",
    "music": [
        {
            "title": "What Are Words",
            "author": "Chris Medina",
            "url": "/music/mp3/What Are Words - Chris Medina.mp3",
            "pic": "/music/pic/What Are Words.jpg",
            "lrc": "/music/lrc/What Are Words.lrc"
        },
        {
            "title": "Kiss The Rain",
            "author": "李闰珉",
            "url": "/music/mp3/Kiss The Rain - 李闰珉.mp3",
            "pic": "/music/pic/Kiss The Rain.jpg"
        }
    ]
}
{% endaplayerlist %}
```

使用以上配置，你需要在 `source/music/` 目录下 新建对应文件夹。

如下结构：

```yml
root@dwtowen: /opt/hexo/source
# tree music                                                                                                                                                                                         [11:19:11]
music
├── index.md
├── lrc
│   └── What Are Words.lrc
├── mp3
│   ├── Kiss The Rain - 李闰珉.mp3
│   └── What Are Words - Chris Medina.mp3
└── pic
    ├── Kiss The Rain.jpg
    └── What Are Words.jpg

3 directories, 6 files
```

以上是 `hexo-tag-aplayer` 的配置；

关于 `MetingJS` 配置，就非常简单了，按照开源文档直接配置即可。

# photos

> 时间：2020-05-05 15:56:00:00
> 由于 Butterfly 主题没有 photo 菜单，所以我们先新建菜单

## 导航菜单

导航菜单位于 `配置 butterfly.yml` 中

```nginx
cd /opt/hexo
```

```nginx
vim source/_data/butterfly.yml
```

找到 menu

在 菜单 `List` 下添加 `photos` 菜单

```yml
- Photo || /photos/ || fa-fw fa fa-picture-o
```

我的配置

```yml
menu:
  Home: / || fa fa-home
  Archives: /archives/ || fa fa-archive
  Tags: /tags/ || fa fa-tags
  Categories: /categories/ || fa fa-folder-open
  Leave Word: /Leave Word/ || fa fa-pencil-square-o
  Link: /link/ || fa fa-link
  About: /about/ || fa fa-heart
  List||fa fa-list:
    - Music || /music/ || fa fa-music
    - Photo || /photos/ || fa-fw fa fa-picture-o
    - Movie || /movies/ || fa fa-film
```

## 新建 Photos 页面

前往你的 Hexo 博客的根目录

```nginx
hexo new page photos
```

你会找到 source/photos/index.md 这个文件

修改这个文件：

```nginx
vim source/photos/index.md
```

```yml
---
title: photos
date: 2020-05-05 16:17:39
type: photos
---
```

## 添加相册 Gallery 相册图库

写法：

```md
<div class="gallery-group-main">
{% galleryGroup name description link img-url %}
{% galleryGroup name description link img-url %}
{% galleryGroup name description link img-url %}
</div>
```

解释：

以一个相册为例：

```md
<div class="gallery-group-main">
{% galleryGroup 'Gallery' '我的相册 - 个人的一些图片集' '/Gallery/my_photos' /Gallery/my_photos/10.jpg %}
{% galleryGroup 'Gallery' '我的相册 - 个人的一些图片集' '/Gallery/my_photos' /Gallery/my_photos/01.jpg %}
{% galleryGroup 'Gallery' '我的相册 - 个人的一些图片集' '/Gallery/my_photos' /Gallery/my_photos/02.jpg %}
</div>
```

## Gallery 相册

> 2.0.0 以上可用

区别于旧版的 Gallery 相册，新的 Gallery 相册会自动根据图片长度进行排版，书写也更加方便，与 markdown 格式一样。可根据需要插入到相应的 md。

写法：

```Markdown
{% gallery %}
markdown 图片格式
{% endgallery %}
```

## 我的配置：

如果按我的配置，需要在 photos 目录下新建 `/Gallery/my_photos`目录（可自定义）。

到 `photos` 目录

```nginx
cd /opt/hexo/source/photos
```

```
mkdir -p /Gallery/my_photos
```

将图片放置于 my_photos 目录下。

在 `my_photos`目录下新建 md 文档，然后在文档内按照 Markdown 语法格式添加图片即可。

```Markdown
{% gallery %}
markdown 图片格式
{% endgallery %}
```

其他相册方法一致。

## 贴配置：

文件：/opt/hexo/source/photos/index.md

```markdown
---
title: photos
date: 2020-05-05 16:17:39
type: photos
---

<div class="gallery-group-main">
{% galleryGroup 'Gallery' '我的相册 - 个人的一些图片集' '/photos/Gallery/my_photos' /photos/Gallery/my_photos/10.jpg %}
{% galleryGroup 'Gallery' '我的相册 - 个人的一些图片集' '/photos/Gallery/my_photos' /photos/Gallery/my_photos/01.jpg %}
{% galleryGroup 'Gallery' '我的相册 - 个人的一些图片集' '/photos/Gallery/my_photos' /photos/Gallery/my_photos/02.jpg %}
</div>
```

文件：/opt/hexo/source/photos/Gallery/my_photos/index.md

```md
{% gallery %}
![](01.jpg)
![](02.jpg)
![](03.jpg)
![](04.jpg)
![](05.jpg)
![](06.jpg)
![](07.jpg)
![](08.jpg)
![](09.jpg)
![](10.jpg)
{% endgallery %}
```

## 目录结构

```yml
root@dwtowen: /opt/hexo/source
# tree photos                                                                                                                                                                                        [23:39:22]
photos
├── Gallery
│   └── my_photos
│       ├── 01.jpg
│       ├── 02.jpg
│       ├── 03.jpg
│       ├── 04.jpg
│       ├── 05.jpg
│       ├── 06.jpg
│       ├── 07.jpg
│       ├── 08.jpg
│       ├── 09.jpg
│       ├── 10.jpg
│       └── index.md
└── index.md

2 directories, 12 files
```

> 说明：如果你服务器网速不是很好的话，相册图片建议使用网速较好的图床。

# 电影

电影界面使用了插件 [hexo-douban](https://github.com/mythsman/hexo-douban)。

使用方法请参考插件的文档。

插件地址：https://github.com/mythsman/hexo-douban

> 注意：hexo-douban 会主动生成页面，所以不需要自己创建。对应网页的 top_img 可以 butterfly.yml 修改。

## 安装 hexo-douban 插件

```
npm install hexo-douban --save
```

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

```yml
douban:
  user: mythsman
  builtin: true
  book:
    title: 'This is my book title'
    quote: 'This is my book quote'
  movie:
    title: 'This is my movie title'
    quote: 'This is my movie quote'
  game:
    title: 'This is my game title'
    quote: 'This is my game quote'
  timeout: 10000
```

> 如果只想显示某一个页面（比如 movie)，那就把其他的配置项注释掉或者删除即可。

我的配置：

```yml
# hexo-douban
douban:
  user: 216327664
  builtin: true
  movie:
    title: '想看或看过的的电影'
    quote: '过去 现在 未来 !'
  timeout: 10000
```

# 404 页面

主题内置了一个简单的 404 页面，可在设置中开启

```yml
# A simple 404 page
error_404:
  enable: true
  subtitle: "页面没有找到"
  background:
```

# hexo-theme-butterfly 主题配置

# 修改博客语言

修改博客语言可直接修改 Hexo 工作目录的 `_config.yml` 配置文件。
hexo 安装完成后，默认配置语言为 `en` 英语。

hexo-theme-butterfly 支持三种语言：

1. default(en)
2. zh-CN （简体中文）
3. zh-TW （繁体中文）

其余配置 hexo 文件修改，请参照本文开始之前，给的官方链接，查看官方文档。

# 导航菜单

如果你当时迁移过主题配置文件至 `/hexo/source/_data` 的话。直接修改 `butterfly.yml` 文件即可。

```nginx
vim /opt/hexo/source/_data/butterfly.yml
```

```yml
menu:
  Home: / || fa fa-home
  Archives: /archives/ || fa fa-archive
  Tags: /tags/ || fa fa-tags
  Categories: /categories/ || fa fa-folder-open
  Link: /link/ || fa fa-link
  About: /about/ || fa fa-heart
  List||fa fa-list:
    - Music || /music/ || fa fa-music
    - Photo || /photos/ || fa-fw fa fa-picture-o
    - Movie || /movies/ || fa fa-film
```

格式看看上边就明白了。必须按照上述格式来。

必须是：

```
导航名称: /path/ || icon
```

# 社交图标

`Butterfly` 支持 [font-awesome v4](https://fontawesome.com/v4.7.0/) 和 [font-awesome v5](https://fontawesome.com/icons?from=io) 如需开启 `font-awesome v5`, 需要在 `Butterfly.yml` 上开启

```yml
# fontawesome图标
# 默认使用的是 fontawesome v4版本的图标
fontawesome_v5:
  enable: true
```

无论 V4 还是 V5, 书写格式都是一样的 `图标名：url || 描述性文字`

```yml
social:
  fa fa-github: https://github.com/dwtowen || Github
  fa fa-rss: /atom.xml || RSS链接
```

以下为我的社交图标配置

```yml
social:
  fa fa fa-qq: https://wpa.qq.com/msgrd?v=3&uin=1102886666&site=qq&menu=yes || QQ
  fa fa fa-weixin: /social/wechat/ || WeChat
  fa fa-github: https://github.com/dwtowen || Github
  fa fa-envelope: mailto:dwtowen@foxmail.com || Email
  fa fa-rss: /atom.xml || RSS
```

图标名可 icon 网站图标下方寻找

```yml
<i class="fas fa-feather-alt"></i>
```

`fas fa-feather-alt` 即为图标名。

# 顶部图

顶部图有 2 种配置：具体 `url` 和（`留空`，`true` 和 `false`，三个效果一样）

# page 页

## 当具体 url 时

主页的顶部图可以在 `Butterfly.yml` 设置 `index_img`

`archives` 页的顶部图可以在 `Butterfly.yml` 设置 `archive_img`

其他 `page` 页的顶部图可以在各自的 `md` 页面设置 `front-matter` 中的 `top_img`

页面如果没有设置各自的 top_img，则会显示 default_top_img 图片

## 当顶部图留空，true 和 false

主页会显示纯颜色的顶部图

其他 `page` 的顶部图没有设置时，也会显示纯颜色的顶部图

# post 页

`post` 页的顶部图会优先显示各自 `front-matter` 中的 `top_img`, 如果没有设置，则会缩略图（即各自 `front-matter` 中的 `cover`)，如果没有则会显示显示 `default_top_img` 图片

# 文章置顶

要为文章置顶，你需要安装插件 ([hexo-generator-index-pin-top](https://github.com/netcan/hexo-generator-index-pin-top) 或者 [hexo-generator-indexed](https://github.com/next-theme/hexo-generator-indexed))，记得先卸载掉 hexo-generator-index

如果使用 `hexo-generator-index-pin-top`, 在文章的 `front-matter` 区域里添加 `top: true` 属性来把这篇文章置顶

如果使用 `hexo-generator-indexed`, 在文章的 `front-matter` 区域里添加 `sticky: 1` 属性来把这篇文章置顶。数值越大，置顶的优先级越大

# 文章相关项

这个选项是用来显示文章的相关信息的。

配置 `butterfly.yml`

## 首页文章相关显示

```yml
post_meta:
  page:
    date_type: both
    categories: true
    tags: true
  post:
    date_type: both
    categories: true
    tags: true
```

## post_meta - page 主页文章

|写法|解释|
|:-:|:-|
|date_type|created or updated or both 主页文章日期是创建日或者更新日或都显示|
|categories|true or false 主页是否显示分类|
|tags|true or false 主页是否显示标签|
|||

## post_meta - post 文章页

# 文章版权

为你的博客文章展示文章版权和许可协议。

配置 `butterfly.yml`

```yml
post_copyright:
  enable: true
  decode: false
  license: CC BY-NC-SA 4.0
  license_url: https://creativecommons.org/licenses/by-nc-sa/4.0/
```

由于 Hexo 4.1 开始，默认对网址进行解码，以至于如果是中文网址，会被解码，可设置 decode: true 来显示中文网址。

如果有文章（例如：转载文章）不需要显示版权，可以在文章 Front-matter 单独设置

```yml
copyright: false
```

# 文章打赏

在你每篇文章的结尾，可以添加打赏按钮。相关二维码可以自行配置

配置 `butterfly.yml`

```yml
reward:
  enable: true
  QR_code:
    - itemlist:
        img: /img/wechat.png
        text: 微信
    - itemlist:
        img: /img/alipay.png
        text: 支付宝
```

文章封面
文章的 `markdown` 文档上，在 `Front-matter` 添加 `cover`, 并填上要显示的图片地址。
如果不配置 `cover`, 可以设置显示默认的 `cover`.

如果不想在首页显示 `cover`, 可以设置为 `false`

配置 `butterfly.yml`

```yml
cover:
  # 是否显示文章封面
  index_enable: true
  aside_enable: true
  archives_enable: true
  # 封面显示的位置
  # 三个值可配置 left , right , both
  position: left # (默认为left)
  # 当没有设置cover时，默认的封面显示
  default_cover:
```

当配置多张图片时，会随机选择一张作为 cover. 此时写法应为

```yml
default_cover:
  - https://path/default_bg.png
  - https://path/default_bg2.png
  - https://path/default_bg3.png
```

# 头像

配置 `butterfly.yml`

```yml
avatar:
	img: /img/avatar.png
	effect: true # 头像会一直转圈
```

# TOC

在文章页，会有一个目录，用于显示 TOC。 手机端默认显示按钮。

配置 `butterfly.yml`

```yml
toc:
  enable: true
  number: true   #显示章节数字
```

为特定的文章配置是否显示 `TOC` 和特定的目录章节数字
在你的文章 `md` 文件的头部，加入` toc_number` 和 `toc` 项，并配置 `true` 或者 `false` 即可。

`toc` 是否显示文章 `TOC`

`toc_number` 是否显示章节数

配置之后你的特定的文章将会拥有它自己的目录数字的显示与否，而不会受全局的配置影响。

显示目录序号：

```yml
enable: true
```

不显示目录序号：

```yml
number: false
```

### 设置是否自动打开 TOC

可选择进入文章页面时，是否自动打开 `sidebar` 显示 `TOC`

```yml
auto_open_sidebar:
  enable: true
```

# 文章推荐

相关文章推荐的原理是根据文章 `tags` 的比重来推荐

配置 `butterfly.yml`

```yml
related_post:
  enable: true
  limit: 6 # 显示推荐文章数目
  date_type: created # or created or updated 文章日期显示创建日或者更新日
```

# Footer 设置

博客年份
`since` 是一个来展示你站点起始时间的选项。它位于页面的最底部。

配置 `butterfly.yml`

```yml
since: 2020
```

页脚自定义文本
`footer_custom_text` 是一个给你用来在页脚自定义文本的选项。通常你可以在这里写声明文本等，支持 `HTML`。

配置 `butterfly.yml`

```yml
footer_custom_text: Hi, welcome to my <span class="external-link"><a class="no-external-link" href="http://blog.dwtowen.com/" target="_blank"><i data-feather="external-link"></i>blog</a></span>!
```

# ICP

对于部分有备案的域名，可以在 `ICP` 配置显示。

配置 `butterfly.yml`

```yml
ICP:
  enable: true
  url: http://www.beian.miit.gov.cn
  text: 滇ICP备19009904号
  icon: /img/icp.png
```

# 右下角按钮

简繁转换
简体繁体互换

右下角会有简繁转换按钮。

配置 `butterfly.yml`

```yml
translate:
  enable: true
  # 默认按钮显示文字(网站是简体，应设置为'default: 繁')
  default: 简
  #网站默认语言，1: 繁体中文, 2: 简体中文
  defaultEncoding: 1
  #延迟时间,若不在前, 要设定延迟翻译时间, 如100表示100ms,默认为0
  translateDelay: 0
  #博客网址
  cookieDomain: "https://blog.dwtowen.com/"
  #当文字是简体时，按钮显示的文字
  msgToTraditionalChinese: "繁"
  #当文字是繁体时，按钮显示的文字
  msgToSimplifiedChinese: "简"
```

## 夜间模式

右下角会有夜间模式按钮

配置` butterfly.yml`

```yml
# dark mode
darkmode:
  enable: true
  # dark mode和 light mode切换按钮
  button: true
  # 自动切换 dark mode和 light mode
  # autoChangeMode: 1  跟随系统而变化，不支持的浏览器/系统将按照时间晚上6点到早上6点之间切换为 dark mode
  # autoChangeMode: 2  只按照时间晚上6点到早上6点之间切换为 dark mode
  # autoChangeMode: false 取消自动切换
  autoChangeMode: false
```

<div style="border-left: 4px solid #fa0;padding-left: 15px;">
<p>V2.0.0 开始增加一个选项，可开启自动切换 <span style="color:#f47466">light mode</span> 和 <span style="color:#f47466">dark mode</span></p>

<p><span style="color:#f47466">autoChangeMode: <span style="color:#fa0">1</span></span> 跟随系统而变化，不支持的浏览器 / 系统将按照时间晚上 6 点到早上 6 点之间切换为 <span style="color:#f47466">dark mode</span></p>

<p><span style="color:#f47466">autoChangeMode: <span style="color:#fa0">2</span></span> 只按照时间 晚上 6 点到早上 6 点之间切换为 <span style="color:#f47466">dark mode</span>, 其余时间为 <span style="color:#f47466">light mode</span></p>

<p><span style="color:#f47466">autoChangeMode: false</span> 取消自动切换</p>
</div>

## 阅读模式

閲读模式下会去掉除文章外的内容，避免干扰閲读。

只会出现在文章页面，右下角会有閲读模式按钮。

配置 `butterfly.yml`

```yml
readmode:
  enable: true
```

# 侧边栏设置

侧边排版
可自行决定哪个项目需要显示，可决定位置，也可以设置不显示侧边栏。

配置` butterfly.yml`

```yml
aside:
  enable: true
  mobile: true # 手机页面（ 显示宽度 < 768px ）是否显示aside内容
  position: right # left or right
  card_author:
    enable: true
    description:
  card_announcement:
    enable: true
    content: This is my Blog
  card_recent_post:
    enable: true
    limit: 5 # if set 0 will show all
  card_categories:
    enable: true
    limit: 8 # if set 0 will show all
  card_tags:
    enable: true
    limit: 40 # if set 0 will show all
    color: false
  card_archives:
    enable: true
    type: monthly # yearly or monthly
    format: MMMM YYYY # eg: YYYY年MM月
    order: -1 # Sort of order. 1, asc for ascending; -1, desc for descending
    limit: 8 # if set 0 will show all
  card_webinfo: true
```

## 侧边栏在左边

```yml
position: left
```

## 侧边栏在右边

```yml
position: right
```

## 侧边栏标签

默认不是彩色

```yml
card_tags color: false
```

彩色

```yml
card_tags color: true
```

## 访问人数 busuanzi (UV 和 PV)

访问 busuanzi 的官方网站查看更多的介绍。

配置 `butterfly.yml`

```yml
busuanzi:
  site_uv: true
  site_pv: true
  page_pv: true
```

## 运行时间

网页已运行时间

配置 `butterfly.yml`

```yml
runtimeshow:
  enable: true
  start_date: 6/7/2018 00:00:00
  ##网页开通时间
  #格式: 月/日/年 时间
  #也可以写成 年/月/日 时间
```

## 标签外挂（Tag Plugins）

<div style="border-left: 4px solid #fa0;">
<p style="margin: 12px">标签外挂是 Hexo 独有的功能，并不是标准的 Markdown 格式。</p>

<p style="margin: 12px">以下的写法，只适用于 Butterfly 主题，用在其它主题上不会有效果，甚至可能会报错。使用前请留意</p>
</div>

## Note (Bootstrap Callout)

移植于 next 主题

配置 `butterfly.yml`

```yml
note:
  # Note tag style values:
  #  - simple    bs-callout old alert style. Default.
  #  - modern    bs-callout new (v2-v3) alert style.
  #  - flat      flat callout style with background, like on Mozilla or StackOverflow.
  #  - disabled  disable all CSS styles import of note tag.
  style: simple
  icons: false
  border_radius: 3
  # Offset lighter of background in % for modern and flat styles (modern: -12 | 12; flat: -18 | 6).
  # Offset also applied to label tag variables. This option can work with disabled note tag.
  light_bg_offset: 0
```

用法

```md
{% note [class] [no-icon] %}
Any content (support inline tags too.io).
{% endnote %}

All parameters are optional.
```

例如：

```md
{% note default %}
default 提示块标籤
{% endnote %}

{% note primary no-icon %}
primary 提示块标籤
{% endnote %}

{% note success %}
success 提示块标籤
{% endnote %}

{% note info %}
info 提示块标籤
{% endnote %}

{% note warning %}
warning 提示块标籤
{% endnote %}

{% note danger %}
danger 提示块标籤
{% endnote %}

{% note default %}
 ## default 
 提示块标籤
{% endnote %}

{% note default %}
 **default** 
 提示块标籤
{% endnote %}
```

> style: simple

{% note default %}
default 提示块标籤
{% endnote %}

{% note primary no-icon %}
primary 提示块标籤
{% endnote %}

{% note success %}
success 提示块标籤
{% endnote %}

{% note info %}
info 提示块标籤
{% endnote %}

{% note warning %}
warning 提示块标籤
{% endnote %}

{% note danger %}
danger 提示块标籤
{% endnote %}
{% note default %}

## default

提示块标籤
{% endnote %}

{% note default %}
**default**
提示块标籤
{% endnote %}

> style: modern

> style: flat

> style: disabled

## Gallery 相册图库（图库在之前已经说过，这里就不再细说）

# 评论

我使用的是 `Valine` 服务商。
如果你想使用其他服务器，请参考官方文档，选择对应服务商评论系统的搭建。
遵循 [Valine](https://github.com/xCss/Valine) 的指示去配置你的 LeanCloud 应用。以及查看相应的配置説明。

然后配置 `butterfly.yml`

```yml
valine:
  enable: false # if you want use valine,please set this value is true
  appId: # leancloud application app id
  appKey: # leancloud application app key
  notify: false # valine mail notify (true/false) Deprecated in v1.4.0+
  verify: false # valine verify code (true/false) Deprecated in v1.4.0+
  pageSize: 10 # comment list page size
  avatar: monsterid # gravatar style https://valine.js.org/#/avatar
  lang: en # i18n: zh-CN/zh-TW/en/ja
  placeholder: 评论或者留言的时候丶记得在 NickName 填写你的 QQ 号噢^_^ # valine comment input placeholder(like: Please leave your footprints )
  guest_info: nick,mail,link #valine comment header info
  recordIP: false # Record reviewer IP
  serverURLs: # This configuration is suitable for domestic custom domain name users, overseas version will be automatically detected (no need to manually fill in)
  emojiCDN: # emoji CDN
  enableQQ: true # enable the Nickname box to automatically get QQ Nickname and QQ Avatar
  requiredFields: nick,mail # required fields nick/mail/link
  bg: /img/comment_bg.png # valine background
  count: true # dispaly comment count in top_img
```

`Valine` 于 v1.4.5 开始支持自定义表情，如果你需要自行配置，请在 `emojiCDN` 配置表情 `CDN`。

同时在 `Hexo` 工作目录下的 `source/_data/` 创建一个 `json` 文件 `valine.json`, 等同于 `Valine` 需要配置的 `emojiMaps`，`valine.json` 配置方式可参考如下

valine.json

```json
{
"tv_doge": "6ea59c827c414b4a2955fe79e0f6fd3dcd515e24.png",
"tv_亲亲": "a8111ad55953ef5e3be3327ef94eb4a39d535d06.png",
"tv_偷笑": "bb690d4107620f1c15cff29509db529a73aee261.png",
"tv_再见": "180129b8ea851044ce71caf55cc8ce44bd4a4fc8.png",
"tv_冷漠": "b9cbc755c2b3ee43be07ca13de84e5b699a3f101.png",
"tv_发怒": "34ba3cd204d5b05fec70ce08fa9fa0dd612409ff.png",
"tv_发财": "34db290afd2963723c6eb3c4560667db7253a21a.png",
"tv_可爱": "9e55fd9b500ac4b96613539f1ce2f9499e314ed9.png",
"tv_吐血": "09dd16a7aa59b77baa1155d47484409624470c77.png",
"tv_呆": "fe1179ebaa191569b0d31cecafe7a2cd1c951c9d.png",
"tv_呕吐": "9f996894a39e282ccf5e66856af49483f81870f3.png",
"tv_困": "241ee304e44c0af029adceb294399391e4737ef2.png",
"tv_坏笑": "1f0b87f731a671079842116e0991c91c2c88645a.png",
"tv_大佬": "093c1e2c490161aca397afc45573c877cdead616.png",
"tv_大哭": "23269aeb35f99daee28dda129676f6e9ea87934f.png",
"tv_委屈": "d04dba7b5465779e9755d2ab6f0a897b9b33bb77.png",
"tv_害羞": "a37683fb5642fa3ddfc7f4e5525fd13e42a2bdb1.png",
"tv_尴尬": "7cfa62dafc59798a3d3fb262d421eeeff166cfa4.png",
"tv_微笑": "70dc5c7b56f93eb61bddba11e28fb1d18fddcd4c.png",
"tv_思考": "90cf159733e558137ed20aa04d09964436f618a1.png",
"tv_惊吓": "0d15c7e2ee58e935adc6a7193ee042388adc22af.png"
}
```

# 分享

我用的是 `Sharejs`

## Sharejs

如果你不知道 [sharejs](https://github.com/overtrue/share.js/)，看看它的说明。

配置 `butterfly.yml'

```yml
sharejs:
  enable: true
  sites: wechat,weibo,qq,facebook,twitter  #想要显示的内容
```

# 搜索系统

我使用的是本地搜索  `hexo-generator-search`

## 本地搜索

你需要安装 [hexo-generator-search](https://github.com/wzpan/hexo-generator-search). 根据它的文档去做相应配置。注意格式只支持 `xml`。

配置 `butterfly.yml`

```yml
local_search:
  enable: true
  labels:
    input_placeholder: Search for Posts
    hits_empty: "We didn't find any results for the search: ${query}" # if there are no result
```

# 分析统计

这里只说百度统计，其他统计，自行冲浪
百度统计
登录百度统计的[官方网站](https://tongji.baidu.com/web/welcome/login)

找到你百度统计的统计代码

```js
<script>
var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "//hm.baidu.com/hm.js?XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
</script>
```

配置 `butterfly.yml`

```yml
baidu_analytics: XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX # 你的代码
```

## 美化 / 特效

自定义主题色
可以修改大部分 `UI` 颜色

配置 `butterfly.yml`

```yml
theme_color:
  enable: true
  main: "#49B1F5"
  paginator: "#00c4b6"
  button_hover: "#FF7242"
  text_selection: "#00c4b6"
  link_color: "#99a9bf"
  meta_color: "#858585"
  hr_color: "#A4D8FA"
  code_foreground: "#F47466"
  code_background: "rgba(27, 31, 35, .05)"
  toc_color: "#00c4b6"
  blockquote_padding_color: "#49b1f5"
  blockquote_background_color: "#49b1f5"
```

# 网站背景

默认显示白色，可设置图片或者颜色

配置 `butterfly.yml`

```yml
# 图片格式 background: url(http://xxxxxx.com/xxx.jpg)
# 颜色 background: '#49B202'
# 留空 显示白色
background:
```

> 留意：如果你的网站根目录不是’/‘, 使用本地图片时，需加上你的根目录。
> 例如：网站是 `https://yoursite.com/blog`, 引用一张 `img/xx.png` 图片，则设置 `background` 为 `url (/blog/img/xx.png`)

## 颜色

```yml
background:’#49B202’
```

## 图片

```yml
background: url(/img/1.png)
```

# footer 背景

`footer` 的背景会与 `top_img` 的一致，当设置 `false` 时，将与主题色一致。

配置 `butterfly.yml`

```yml
# footer是否显示图片背景(与top_img一致)
footer_bg: true
```

# 打字效果

打字效果 [activate-power-mode](https://github.com/disjukr/activate-power-mode)

配置 `butterfly.yml`

```yml
# 打字效果
activate_power_mode:
  enable: false
  colorful: true # 冒光特效
  shake: false # 抖动特效
```

# 彩带

### 静止彩带

好看的綵带背景，可设置每次刷新更换綵带，或者每次点击更换綵带

配置 `butterfly.yml`

```yml
canvas_ribbon:
  enable: false
  size: 150
  alpha: 0.6
  zIndex: -1
  click_to_change: false  #设置是否每次点击都更换綵带
  mobile: false # false 手机端不显示 true 手机端显示
```

相关配置可查看 [canvas_ribbon](https://github.com/hustcc/ribbon.js)

## 动态彩带

好看的彩带背景，会飘动

配置 `butterfly.yml`

```yml
canvas_ribbon_piao:
  enable: true
  mobile: true # false 手机端不显示 true 手机端显示
```

# 爱心

配置 `butterfly.yml`

```yml
# 点击出现爱心
click_heart:
  enable: true
```

# 页面美化

会改变 ol、ul、h1-h5 的样式

`field` 配置生效的区域

1. post 只在文章页生效
2. site 在全站生效

配置 `butterfly.yml`

```yml
# 美化页面显示
beautify:
  enable: true
  field: site # site/post
  title-prefix-icon: '\f0c1'
  title-prefix-icon-color: "#F47466"
```

生效需要 `hexo clean`

```nginx
hexo clean
```

# 网站副标题

> 适用于 版本号 >= V1.2.0
> V2.0.0 开始增加一些第三方 api 调用

可设置主页中显示的网站副标题或者喜欢的座右铭。

配置 `butterfly.yml`

```yml
# 主页subtitle
subtitle:
  enable: true
  # 打字效果
  effect: true
  # 循环或者只打字一次
  loop: false
  # source调用第三方服务
  # source: false 关闭调用
  # source: 1  调用搏天api的随机语录（简体） https://api.btstu.cn/
  # source: 2  调用一言网的一句话（简体） https://hitokoto.cn/
  # source: 3  调用一句网（简体） http://yijuzhan.com/
  # source: 4  调用今日诗词（简体） https://www.jinrishici.com/
  # subtitle 会先显示 source , 再显示 sub 的内容
  source: false
  # (如果有英文逗号' , '，请使用转义字符 &#44;)
  # 如果关闭打字效果，subtitle只会显示sub的第一行文字
  sub:
    - 今日事&#44;今日毕
    - Never put off till tomorrow what you can do today
```

# 主页 top_img 显示大小

> 适用于 版本号 >= V1.2.0

默认的显示为全屏 site-info 的区域会居中显示，我自己的是直接默认。

```yml
# 主页设置
# 默认top_img全屏，site_info在中间
# 使用默认, 都无需填写（建议默认）
index_site_info_top: # 主页标题距离顶部距离  例如 300px/300em/300rem/10%
index_top_img_height:  #主页top_img高度 例如 300px/300em/300rem  不能使用百分比
```

注意：index_top_img_height 的值不能使用百分比。
2 个都不填的话，会使用默认值

# 图片大图查看模式

medium_zoom

配置 `butterfly.yml`

```yml
medium_zoom:
  enable: true
```

# Snackbar 弹窗

Snackbar 弹窗，根据自己爱好开启

配置 `butterfly.yml`

```yml
# Snackbar 弹窗
# https://github.com/polonel/SnackBar
# position 弹窗位置
# 可选 top-left / top-center / top-right / bottom-left / bottom-center / bottom-right
snackbar:
  enable: true
  position: bottom-left
  bg_light: '#49b1f5' #light mode时弹窗背景
  bg_dark: '#2d3035' #dark mode时弹窗背景
```

## 豆瓣电影插件（之前已经说过，不再细说）

很多人使用 [hexo-douban](https://github.com/mythsman/hexo-douban) 这款插件。但是该插件是直接生成相应的网页，而不会去读取对应的 `markdown` 文件。因此，可在设置里进行相应的配置。

配置 `butterfly.yml`

```yml
# 如果你有使用hexo-douban，可配置这个
douban:
  meta: true
  movies_img: https://jsdelivr.panbaidu.cn/gh/jerryc127/butterfly_cdn@2.1.0/top_img/movie.jpg
  books_img:
  games_img:
```

# Valine 评论扩展

## 优化

### 去除 Valine 的 Powered By 及版本号

`F12` 查看` Elements` 可以看到控制 `Valine` 的 `Powered By` 及版本号的 `div`，如果你懂点前端 `CSS` 的基础，那么你只需要将这个 `DIV`  display 掉即可。

添加如下配置：

```css
display: none;
```

# 评论邮件提醒及回复邮件提醒

## 第三方扩展

条件：
你或许可以根据第三方 开源地址内容的文档直接来部署。
地址：[Valine_Admin](https://github.com/zhaojun1998/Valine-Admin)

## 部署实例

1. 已备案的域名（建议使用二级域名），后边用于定时任务，也可用评论管理。
2. 建议给二级域名配置好  Https 访问（可选）。

> 首先我们先到 [Leancloud](https://leancloud.cn/dashboard/login.html#/signin) 登录自己的账号。

1. 登录后，进入自己的应用
2. 点击 云引擎 ——> WEB ——> 部署 —— > 在选择部署模式下选择 部署项目
3. 点击 Git 部署 ——> 配置 Git 部署。
   输入第三方 Git 地址

```css
https://github.com/zhaojun1998/Valine-Admin
```

4. 保存，提示配置成功。
5. 分支或提交选择 `master`
6. 点击下方的部署按钮，完成部署。（可以看到部署日志，等待部署成功，并等待实例启动成功）

## 配置 自定义环境变量

云引擎 ——> 设置 ，然后添加自定义环境变量。
分别添加如下环境变量：
我使用的是 腾讯 QQ 的邮件收发服务。

`SMTP_SERVICE` : 邮件服务提供商，支持 `QQ`、`163`、`126`、`Gmail`、`Yahoo`、...... ，全部支持请参考 : [Nodemailer Supported services](https://nodemailer.com/smtp/well-known/#supported-services)。

## 配置评论管理

1. 登录 `leancloud` 。
2. 点击 设置。
3. 域名绑定。
4. 根据提示，完成域名 `CNAME` 解析，并完成绑定。会自动验证 `ICP` 备案号和 `SSL HTTPS`。
5. 点击应用存储 ——> 结构化数据 ——> _User 表。
6. 点击添加行，输入 `password(密码)` 和 `username(用户名，一般为邮箱)` 。<span style = "color:red">
   注：此邮箱必须与之前建立环境变量时 `SMTP_USER` 评论收发邮件邮箱一致，否则登录评论管理系统的时候会导致无法登陆 </span>。

完成后，你就可以使用绑定的域名，直接访问评论系统了。

## 配置自动唤醒和邮件检查

> 免费版的 LeanCloud 容器，是有强制性休眠策略的，不能 24 小时运行：

每天必须休眠 6 个小时
30 分钟内没有外部请求，则休眠
休眠后如果有新的外部请求实例则马上启动（但激活时此次发送邮件会失败）。
分析了一下上方的策略，如果不想付费的话，最佳使用方案就设置定时器，目前基于 LeanCloud 自带定时器实现了两种云函数定时任务：

1. 自动唤醒，定时访问 Web APP 二级域名防止云引擎休眠（推荐）
2. 定时检查，每天定时检查 24 小时内漏发的邮件通知

方法：

配置定时任务，击 云引擎 ——> 定时任务

创建定时任务，名称任意，生产环境选择 self-wake 云函数，Cron 表达式填入 0 */20 7-23 * * ?，表示每天 7 - 23 点每 20 分钟访问一次，这样可以保持每天的绝大多数时间邮件服务是正常的。

配置定时检查：
创建定时任务，名称任意，生产环境选择 resend-mails 云函数，Cron 表达式填入 0 0 8 * * ?，表示每天早 8 点检查过去 24 小时内漏发的通知邮件并补发。

<span style="color:red;">注：修改 LeanCloud 实例配置后，必须要重启实例才能使更改生效。</span>

到此，`Valine` 扩展配置完成。

# 博文加密encrypt插件

你或许可以根据作者 GitHub 文档来安装和配置

作者开源地址：[作者 GitHub 开源地址](https://github.com/MikeCoder/hexo-blog-encrypt)

## 方法1

**添加如下代码：**

代码位置： `yourblog/themes/next/layout/custom/head.swig`

```js
<script>
    (function(){
        if('{{ page.password }}'){
            if (prompt('请输入密码') !== '{{ page.password }}'){
                alert('密码错误');
                history.back();
            }
        }
    })();
</script>
```

**优点：** 逻辑简洁、清晰明了；

**缺点：** 不安全。

**分析**

history.back()

back() 方法可加载历史列表中的前一个 URL（如果存在）。如果你的前一个URL就是这个文章的URL，这样就很容易破解。

hexo 本身就已经生成了静态页面，获取到静态页面，就可以停止当前页的JS操作。

这样看，刚说的优点“ 逻辑简洁、清晰明了” 还不是荡然无存了😑。

方法1，不推荐使用；

## 方法2

也就是开始给的开源插件 `encrypt`。

1. 安装 `hexo-blog-encrypt`

```
npm install --save hexo-blog-encrypt
```

2. 修改配置文件，启动插件

打开 hexo 配置文件 `_config.yml` 添加如下配置，启动该插件

```yml
# encrypt plugin
encrypt:
  enable: true
```

## 使用hexo-blog-encrypt加密blog

在你的博文头部添加上相应字段，如 `password` , `message` 。

**password** : 代表blog的访问密码

**message** : 当查看加密博文时，密码输入框上面的提示性文字,同时也会在博客文章列表显示.
**Front-matter**

```yml
---
title: 2020 intimate Basket
toc: true
toc_number: true
date: 2020-08-14 10:55:11
updated:
tags:
categories:
keywords:
description:
top_img:
comments:
cover:
copyright:
mathjax:
katex:
sticky: 
password: 123456
message: 此文章已加密，为私人计划、备忘录，请输入密码并 按 `Enter` 键访问。
---
```

# 更改过的页面

## icp-icon

默认的 icon 是 100% 显示，太大，模糊、不好看。

```css
/opt/hexo/public/css/index.css
```

### 复制文件到 `source` 目录

复制文件修改，而不是直接修改，其目的是为了 在我们 `hexo clean`  `hexo g` 的时候，自动生成静态页面，修改不被还原覆盖。

在 `source` 目录下 新建 `css` 文件夹

```nginx
mkdir -p /opt/hexo/source/css/
```

复制文件

```nginx
cp -r /opt/hexo/public/css/index.css /opt/hexo/source/css/index.css
```

```nginx
vim /opt/hexo/source/css/index.css
```

将

```css
#footer-wrap .icp-icon {
  padding: 0 4px;
  vertical-align: text-bottom;
}
```

修改如下

```css
#footer-wrap .icp-icon {
  padding: 0 4px;
  vertical-align: text-bottom;
  display: inline-block;
  width: 25px;
  height: 17px;
}
```

```nginx
hexo clean
hexo g
```

# 添加过的页面

## 社交 WeChat 页面

你应该有印象，在我之前说到过的 社交图标配置中

**/social/wechat/index.html 页面**

切确的说 应该说是 `./source/social/wechat/index.md` 页面。

### 新建文件夹及文件

也就是说，如果你按我的配置，那么你需要在 `Hexo` 工作目录的 `source` 目录下新建 `social` 目录 ，然后在 `social` 目录下新建 `wechat` 目录，并且在 `wechat` 目录下新建 `index.md` 文件。

```bash
mkdir /source/social/wechat/
```

然后新建 `index.md` 文件。

### 添加代码

在新建的 `index.md` 文件添加如下代码。
**代码如下**

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>微信添加</title>
    <style>
    /* a:link{text-decoration:none;}指正常的未被访问过的链接 */
    /* a:visited{text-decoration:none;}指已经访问过的链接 */
    /* a:hover{text-decoration:none;}指鼠标在链接 */
    /* a:active{text-decoration:none;}指正在点的链接 */
    a{
        text-decoration:none;
    }
    .wx{
        width: 90%;
        margin-left: 5%;
        font-size: 18px;
        color:white;
        text-align: center;
        background-color: #ff7f2e;
        border-radius: 5px;
        line-height: 40px;
    }
    .row a{
        font-size: 18px;
        color:white;
    }
    /*弹窗*/
    .tan{
        width:80%;
        height:180px;
        background-color:#e8e8e8;
        position:fixed;
        left:10%;
        top:40%;
        display:none;
        z-index: 200;
    }
    .kuang{
        height:120px;
        text-align:center;
        padding: 20px 0;
    }
    .txtcss{
        color:red;
        font-weight:800;
        font-size:20px;
    }
    .copy{
        font-size: 16px;
        float: left;
        background-color: #5AD700;
        padding: 5px 20px;
        margin-left: 25%;color: black;
        border-radius: 5px;
    }
    .copy a{color: white;}
    .guanbi{
        width:20px;
        height:20px;
        color:red;
        margin-top:-130px;
    }
    .explain{
        text-align: center;
        color: #ff0000;
        margin: 30px 0;
        font-size: 16px;
    }
</style>
</head>
<body>
 

<div class="explain">点击下方按钮</br>复制我的微信号并添加我的微信</div>
<div class="row">
    <a href="weixin://">
     <div class="wx" onclick="copywx()">
         <span id="copy_content">Dwtowen</span> 复制并跳转至微信
     </div>
    </a>
</div>
<div style="height:40px"></div>

</body>

</html>
```

你可以点击查看和体验 wechat添加页面的 Demo 效果 [Demo](https://blog.dwtowen.com/social/wechat/)

End Thanks！

最后修改：2020 年 09 月 29 日