Loading... # 快速安装 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 ``` ## 命令解释: |命令|说明| |:-:|:-| |hexo clean |清空 hexo,主要删除 Hexo 根目录下的 public 文件夹| |hexo g|重新生成 public 文件夹内容 |hexo s|启动本地 hexo 服务| |hexo d|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: --- ``` |写法|说明| |:-:|:-| |title|【必需】 文章标题| |date|【必需】 文章创建日期| |tags|【可选】 文章标签| |categories|【可选】 文章分类| |keywords|【可选】 文章关键字| |description|【可选】 文章描述| |top_img|【可选】 文章顶部图片| |cover|【可选】 文章缩略图 (如果没有设置 top_img, 文章页顶部将显示缩略图,可设为 false / 图片地址 / 留空)| |comments|【可选】 显示文章评论模块 (默认 true)| | sticky|【可选】在文章的 front-matter 区域里添加 sticky: 1 属性来把这篇文章置顶。数值越大,置顶的优先级越大| # 标签页 前往你的 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> ``` 解释: |参数|说明| |:-:|:-| |name|图库名字| |description|图库描述| |link|图库对应的相册地址| |img-url|图库封面的地址| 以一个相册为例: ```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 %}           {% 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 ``` |写法|说明| |:-:|-| |user|你的豆瓣 ID. 打开豆瓣,登入账户,然后在右上角点击 "个人主页" ,这时候地址栏的 URL 大概是这样:"https://www.douban.com/people/xxxxxx/" ,其中的"xxxxxx"就是你的个人 ID 了。| |builtin|是否将生成页面的功能嵌入 hexo s 和 hexo g 中,默认是 false, 另一可选项为 true(1.x.x 版本新增配置项)。| |title|该页面的标题。| |quote|写在页面开头的一段话,支持 html 语法。| |timeout|爬取数据的超时时间,默认是 10000ms , 如果在使用时发现报了超时的错 (ETIMEOUT) 可以把这个数据设置的大一点。| > 如果只想显示某一个页面(比如 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 文章页 |写法|解释| |:-:|:-| |date_type|created or updated or both 文章页日期是创建日或者更新日或都显示| |categories|true or false 文章页是否显示分类| | tags|true or false 文章页是否显示标签| # 文章版权 为你的博客文章展示文章版权和许可协议。 配置 `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 %} [class] : default | primary | success | info | warning | danger. [no-icon] : Disable icon in note. 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 # (如果有英文逗号' , ',请使用转义字符 ,) # 如果关闭打字效果,subtitle只会显示sub的第一行文字 sub: - 今日事,今日毕 - 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 的邮件收发服务。 |变量|示例|说明| |:-:|:-:|:-| |ADMIN_URL|lcb.dwtowen.com|【如你想使用评论管理,必填】 用于管理评论系统和 `Leancloud` 唤醒服务| |SENDER_NAME|Dwtowen blog 评论提醒|【可选】 发件人,可以是博客名| |SITE_NAME|Dwtowen blog|【必填】 网站博客名称| |SITE_URL|http://blog.dwtowen.com|【必填】 网站博客地址,最后不能加 `/`| |SMTP_PASS|xxxxxxxxx|【必填】 SMTP 登录密码,一般为 `POP3/SMTP` 服务授权码,而不是邮箱的登陆密码,请自行查询对应邮件服务商的获取方式| |SMTP_SERVICE|QQ|【必填】 这里填写的是 `QQ` , 而不是服务商收发服务地址`smtp.qq.com`| |SMTP_USER|xxx@xxx.com|【必填】 收发件邮箱| |TEMPLATE_NAME|rainbow|【可选】 主题模板| `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 页面 你应该有印象,在我之前说到过的 社交图标配置中 ```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 ``` **/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> <!-- 点击后出现弹框,复制并跳转微信界面 --> <!-- <div class="row"> <div class="wx" onclick="showwx()">点击添加微信</div> </div> --> <!--弹窗--> <!-- <div id='myshow' class="tan"> <div class="kuang"> 添加微信, <span id="copy_content" class="txtcss">Dwtowen</span> </div> <div style="height: 10px;"></div> <p onclick="copywx()" class="copy"><a href="weixin://">复制并跳转微信</a></p> <div onclick="closeshow()" class="closeshow pull-right guanbi">x</div> </div> --> </body> <script> /*点击复制微信号*/ function copywx(){ const range = document.createRange(); range.selectNode(document.getElementById('copy_content')); const selection = window.getSelection(); if(selection.rangeCount > 0) selection.removeAllRanges(); selection.addRange(range); document.execCommand('copy'); alert("复制成功!"); } /*点击出现弹框*/ function showwx(){ var ss=document.getElementById('myshow'); ss.style.display='block'; } /*关闭弹窗*/ function closeshow(){ var ss=document.getElementById('myshow'); ss.style.display='none'; } </script> </html> ``` 你可以点击查看和体验 wechat添加页面的 Demo 效果 [Demo](https://blog.dwtowen.com/social/wechat/) End Thanks! 最后修改:2020 年 09 月 29 日 © 允许规范转载 打赏 赞赏作者 支付宝微信 赞 0 如果觉得我的文章对你有用,请随意赞赏