经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置：技术经验 » HTML/CSS » CSS » 查看文章
Butterfly美化 - MoYu-zc
来源：cnblogs　　作者：MoYu-zc　　时间：2021/2/18 15:00:09　　对本文有异议

Butterfly美化

Hexo系列文章已经完成上传：
一、Hexo准备---Node.js、Vue
二、Hexo、主题、部署上线
三、Butterfly美化
四、Hexo之更换背景及透明度
五、Hexo-使用阿里iconfont图标
六、PicGo：搭建图床
七、Hexo-域名设置+收录

首先提示，本文量特别大哦！基本上有所有的美化，还在持续更新ing，谨慎入坑.........

主题配置文件修改

基础配置

最最最开始的，好不容易搭建了自己的个人博客，当然要写上自己的名字、签名......，证明身份。而且身为一个Chinese，还是中文舒服，所以主目录下_config.yml的配置文件：

  1. # Site
  2. title: FATE      #标题名字
  3. subtitle: ''
  4. description: ''  #签名
  5. keywords:
  6. author: MoYu-zc  #作者名字
  7. language: zh-CN  #默认en  可以改为这个
  8. timezone: ''

主题支持以下三种语言：

  • default(en)
  • zh-CN (简体中文)
  • zh-TW (繁体中文)
1 2

导航栏修改

主目录下\source\_data--butterfly.yml:

（如果没有这个文件夹，创建一个_data，把\themes\butterfly也就是主题文件夹下的_config.yml移动到_data文件夹下，重命名为butterfly.yml，以后只需要修改这个文件。这样为了留个备份，你搞坏了配置，还可以重新换成最开始的状态） ↓： 名称: /xxxx/ || 图标

  1. menu:
  2.   首页: / || fa fa-home
  3.   归档: /archives/ || fa fa-archive
  4.   标签: /tags/ || fa fa-tags
  5.   分类: /categories/ || fa fa-folder-open
  6.   留言板: /messageboard/ || fa fa-paper-plane
  7.   友链: /link/ || fa fa-link
  8.   日志: /timeline/ || fa fa-bell
  9.   菜单 || fa fa-list:
  10.     - 关于 || /about/ || fa fa-sitemap
  11.     - myself || /myself/ || fa fa-id-card
  12.     - butterfly主题 || https://github.com/jerryc127/hexo-theme-butterfly/ || fa fa-heart

3

代码块样式

主目录下/source/_data--butterfly.yml:

  1. ## 代码块样式
  2. highlight_theme: mac #default/darker/pale night/light/ocean/mac /false/  前面的参数任选一项为代码块显示效果
  3. highlight_copy: true # copy button  是否显示复制按钮
  4. highlight_lang: true # show the code language 是否显示代码块语言
  5. highlight_shrink: false #true:打开文章默认折叠代码块内容/false:打开文章默认展开代码块/none:关闭代码折叠按钮
  6. code_word_wrap: false  # 关闭滚动条

然后找到 Hexo 配置文件_config.yml，将line_number改成false:

  1. highlight:
  2.   enable: true
  3.   line_number: false # 改为false
  4.   auto_detect: false
  5.   tab_replace:

4

本地搜索

  1. # Local search 本地搜索
  2. local_search:
  3.   enable: true
  4.   labels:
  5.     input_placeholder: Search for Posts
  6.     hits_empty: "We didn't find any results for the search: ${query}" # 如果没有查到内容相关内容显示

需要安装插件，不然hexo g直接报错：

  1. npm install hexo-generator-search --save

5

分割线图标更换

本次修改基于Butterfly主题 3.0.0 ！

将图标更换为“太空飞船”。

修改butterfly主题配置文件_data--_config.yml ：

  1. hr_icon:
  2.   enable: true
  3.   icon: '\f197' # the unicode value of Font Awesome icon
  4.   icon-top: -10px

icon-top常用数值：

-20px：图标位于分割线上方

-10px：图标位于分割线中间

0px：图标位于分割线下方

6

创建标签文件夹

会在\source中创建对应的文件夹和index.md

1.归档

这个页面不用创建，自动已经带了

2.标签

命令行输入：

  1. hexo new page tags

出现source/tags/index.md文件：

  1. ---
  2. title: 标签
  3. date: 2018-01-05 00:00:00
  4. type: tags
  5. ---

以后上传文章的md文件中，可以在标题头中加入tags，包含 标签 文章的例子：

  1. ---
  2. title: 标签测试
  3. tags:
  4.   - 1111                 （这个就是文章的标签了）
  5.   - 2222              （这个就是文章的标签了）
  6. ---

3.分类

命令行输入：

  1. hexo new page categories

出现source/categories/index.md文件：

  1. ---
  2. title: 分类
  3. date: 2018-01-05 00:00:00
  4. type: categories
  5. ---

以后上传文章的md文件中，可以在标题头中加入categories，包含 分类 文章的例子：

  1. ---
  2. title: 分类测试
  3. categories:
  4.   - 1111                   （这个就是文章的分类了）
  5.   - 2222                   （这个就是文章的分类了）
  6. ---

4.留言板

命令行输入：

  1. hexo new page messageboard

出现source/messageboard/index.md文件：

  1. ---
  2. title: 留言板
  3. date: 2018-01-05 00:00:00
  4. type: messageboard
  5. ---

5.友链

5.1、创建友情链接页面

命令行输入：

  1. hexo new page link

出现source/link/index.md文件：

  1. ---
  2. title: 友链
  3. date: 2018-01-05 00:00:00
  4. type: link
  5. ---
5.2、友情链接添加

在Hexo目录中的source/_data，创建一个文件link.yml，内容如下：

  1. class:
  2.   class_name: 友情链接
  3.   link_list:
  4.     1:
  5.       name: 姓名
  6.       link: 链接
  7.       avatar: 图片
  8.       descr: 签名
  9.     2:
  10.       name: 姓名
  11.       link: 链接
  12.       avatar: 图片
  13.       descr: 签名

6.日志

命令行输入：

  1. hexo new page timeline

出现source/timeline/index.md文件：

  1. ---
  2. title: 日志
  3. date: 2018-01-05 00:00:00
  4. type: timeline
  5. ---

7.关于

命令行输入：

  1. hexo new page about

出现source/about/index.md文件：

  1. ---
  2. title: 关于
  3. date: 2018-01-05 00:00:00
  4. type: about
  5. ---

8.myself

命令行输入：

  1. hexo new page myself

出现source/myself/index.md文件：

  1. ---
  2. title: This is me
  3. date: 2018-01-05 00:00:00
  4. type: myself
  5. ---

标题样式

1.副标题设置

如果没设置副标题，上面的description：签名，就是显示在主页面。而设置的话，签名自动不显示，副标题出现。

在\source\_data中的butterfly.yml:

  1. subtitle:
  2.   enable: true
  4.  sub:
  5.     - 何其荣幸 何德何能
  6.     - 所有的不平凡都来自平凡

这个他们可以设置以下，打字效果可以开启，个人感觉不错，但是需要注意：

  1.  # 如果有英文逗号' , ',使用转义字元 ,
  2.  # 如果有英文双引号' " ',使用转义字元 "
  3.  # 开头不允許转义字元，如需要，請把整个句子用双引号包住
  4.  # 如果关闭打字效果，subtitle只会显示sub的第一行文字

我尝试了转义字符，但是会到“，”时，可能会有点卡，可以用空格代替。

7

2.副标题字体大小颜色

在\themes\butterfly\source\css\_layout中的head.styl:

  1. #site-subtitle
  2.     color: var(--white)   此处修改为白色
  3.     font-size: 1.05em     字体大小
  5.     +minWidth768()
  6.       font-size: 1.40em   字体大小

图片设置

图片可以使用网上的图片(即使用该图片链接)，也可以使用\themes\butterfly\source\img下的图片。

1.网站图标

  1. # Favicon（网站图标）
  2. favicon: /img/favicon.png

2.头像

  1. # Avatar (头像)
  2. avatar:
  3.   img: /img/tit.png
  4.   effect: false

3.主页面图片

  1. # The banner image of home page (主页的横幅图像)
  2. index_img: /img/index_img.jpg

4.子标签页图片

  1. # The banner image of archive page
  2. archive_img: /img/tag.jpg

5.推荐

  1. 主页的顶部图可以在butterfly.yml设置index_img
  2. ``archives页的顶部图可以在Butterfly.yml设置archive_img`
  3. 其他page页的顶部图可以在各自的md页面设置front-matter中的top_img
  1. favicon: /img/favicon.png
  2. avatar:
  3.   img: /img/tit.png
  4.   effect: false
  5. index_img: /img/index_img.jpg
  6. default_top_img: /img/tag.jpg #这个推荐：不加入可能部分标签页不出现图片
  7. archive_img: /img/tag.jpg
  8. tag_img: /img/tag.jpg
  9. category_img: /img/tag.jpg
8 9

6.文章列表图片

在\source\_data中的butterfly.yml修改：

  1. cover:
  2.   # display the cover or not (是否顯示文章封面)
  3.   index_enable: true
  4.   aside_enable: true
  5.   archives_enable: true
  6.   # the position of cover in home page (封面顯示的位置)
  7.   # left/right/both
  8.   position: both
  9.   default_cover:

文章封面设置：

一个:

  1.  default_cover: https://i.loli.net/2020/05/01/gkihqEjXxJ5UZ1C.jpg

多个:

此时会随机选择一张。

  1.   default_cover:
  2.      - https://i.loli.net/2020/05/01/gkihqEjXxJ5UZ1C.jpg
  3.      - https://upimage.alexhchu.com/2020/10/21/671e773d973ae.jpg
  4.      - https://upimage.alexhchu.com/2020/10/21/f5ac68ddaaf64.jpg
  5.      - https://upimage.alexhchu.com/2020/10/21/5fecb0b094b73.jpg

or文章内

10

7.图片查看大图

主目录下/source/_data--butterfly.yml:

这是两种方式，只能选择一个 或者 两个都不选

11

8.图片懒加载

1.新增hexo-lazyload-image模块

  1. npm install hexo-lazyload-image --save

2.在主目录配置文件_config.yml增加配置

  1. lazyload:
  2.   enable: true
  3.   loadingImg: /img/loading.gif

这个就是图片没加载出来的时候，出现一个动图转转转。

文章页样式

1.复制的内容后面加上版权信息

  1. # copy settings
  2. # copyright: Add the copyright information after copied content (复制的内容后面加上版权信息)
  3. copy:
  4.   enable: true

（↑这个相信大家都见过，不演示了）

2.文章版权信息

在底部会出现对应的作者、链接、声明

在\source\_data中的butterfly.yml修改：

  1. post_copyright:
  2.   enable: true
  3.   decode: true
  4.   license: CC BY-NC-SA 4.0
  5.   license_url: https://creativecommons.org/licenses/by-nc-sa/4.0/
12

3.TOC目录

在文章页，会有一个目录，用于顯示TOC。

在\source\_data中的butterfly.yml修改：

  1. # toc (目錄)
  2. toc:
  3.   enable: true
  4.   number: true
  5.   auto_open: true # auto open the sidebar
13

4.相关文章

在文章最下面，会出现相关信息文章的推送。

在\source\_data中的butterfly.yml修改：

  1. # Related Articles
  2. related_post:
  3.   enable: true
  4.   limit: 6 # Number of posts displayed  显示的文章数
  5.   date_type: created # or created or updated 文章日期顯示創建日或者更新日

5.打赏

在你每篇文章的結尾，可以添加打赏按鈕。对应二維碼可以自行配置。

没有提供二维码的，可配置icon图片，然后在link上添加相应的打赏链接。用户点击图片就会跳转到对应链接去。

link可以不写，会默认为图片的链接。

在\source\_data中的butterfly.yml修改：

  1. # Sponsor/reward
  2. reward:
  3.   enable: false
  4.   QR_code:
  5.      - img: /img/wechat.jpg
  6.        link:
  7.        text: wechat
  8.      - img: /img/alipay.jpg
  9.        link:
  10.        text: alipay
14

侧边框样式

1.侧边框出现位置

在\source\_data中butterfly.yml修改：

  1. # aside (側邊欄)
  2. # --------------------------------------
  3. aside:
  4.   enable: true
  5.   mobile: true # display on mobile
  6.   position: left # left or right

left：侧边框出现在左侧

right:：侧边框出现在右侧

15

2.Follow me信息修改

在\source\_data中butterfly.yml修改：

16

图中icon图标使用的阿里iconfont图标

具体可参考：本站文章--Hexo-使用阿里iconfont图标

3.公告

在\source\_data中butterfly.yml修改：

  1. card_announcement:
  2.     enable: true
  3.     content: This is my Blog  #修改此处

17

4.访问人數和运行时间

  1. # 訪問人數
  2. busuanzi:
  3.   site_uv: true
  4.   site_pv: true
  5.   page_pv: true
  6.   
  7.   # 網頁運行時間
  8. runtimeshow:
  9.   enable: true
  10.   publish_date: 10/11/2020 00:00:00
  11.   #格式: 月/日/年 時間
  12.   #也可以 年/月/日 時間

18

19

20

特效部分

1.鼠标点击特效

在\source\_data中butterfly.yml修改：

21

2.鼠标移动特效

在\themes\butterfly\source\css中创建一个css文件，将以下代码复制进去：

  1. (function fairyDustCursor() {
  3.   var possibleColors = ["#D61C59", "#E7D84B", "#1B8798"]
  4.   var width = window.innerWidth;
  5.   var height = window.innerHeight;
  6.   var cursor = {x: width/2, y: width/2};
  7.   var particles = [];
  9.   function init() {
  10.     bindEvents();
  11.     loop();
  12.   }
  14.   // Bind events that are needed
  15.   function bindEvents() {
  16.     document.addEventListener('mousemove', onMouseMove);
  17.     document.addEventListener('touchmove', onTouchMove);
  18.     document.addEventListener('touchstart', onTouchMove);
  20.     window.addEventListener('resize', onWindowResize);
  21.   }
  23.   function onWindowResize(e) {
  24.     width = window.innerWidth;
  25.     height = window.innerHeight;
  26.   }
  28.   function onTouchMove(e) {
  29.     if( e.touches.length > 0 ) {
  30.       for( var i = 0; i < e.touches.length; i++ ) {
  31.         addParticle( e.touches[i].clientX, e.touches[i].clientY, possibleColors[Math.floor(Math.random()*possibleColors.length)]);
  32.       }
  33.     }
  34.   }
  36.   function onMouseMove(e) {
  37.     cursor.x = e.clientX;
  38.     cursor.y = e.clientY;
  40.     addParticle( cursor.x, cursor.y, possibleColors[Math.floor(Math.random()*possibleColors.length)]);
  41.   }
  43.   function addParticle(x, y, color) {
  44.     var particle = new Particle();
  45.     particle.init(x, y, color);
  46.     particles.push(particle);
  47.   }
  49.   function updateParticles() {
  51.     for( var i = 0; i < particles.length; i++ ) {
  52.       particles[i].update();
  53.     }
  55.     for( var i = particles.length -1; i >= 0; i-- ) {
  56.       if( particles[i].lifeSpan < 0 ) {
  57.         particles[i].die();
  58.         particles.splice(i, 1);
  59.       }
  60.     }
  62.   }
  64.   function loop() {
  65.     requestAnimationFrame(loop);
  66.     updateParticles();
  67.   }
  69.   function Particle() {
  71.     this.character = "*";
  72.     this.lifeSpan = 120; //ms
  73.     this.initialStyles ={
  74.       "position": "fixed",
  75.       "top": "0", //必须加
  76.       "display": "block",
  77.       "pointerEvents": "none",
  78.       "z-index": "10000000",
  79.       "fontSize": "20px",
  80.       "will-change": "transform"
  81.     };
  83.     this.init = function(x, y, color) {
  85.       this.velocity = {
  86.         x:  (Math.random() < 0.5 ? -1 : 1) * (Math.random() / 2),
  87.         y: 1
  88.       };
  90.       this.position = {x: x - 10, y: y - 20};
  91.       this.initialStyles.color = color;
  92.       console.log(color);
  94.       this.element = document.createElement('span');
  95.       this.element.innerHTML = this.character;
  96.       applyProperties(this.element, this.initialStyles);
  97.       this.update();
  99.       document.body.appendChild(this.element);
  100.     };
  102.     this.update = function() {
  103.       this.position.x += this.velocity.x;
  104.       this.position.y += this.velocity.y;
  105.       this.lifeSpan--;
  107.       this.element.style.transform = "translate3d(" + this.position.x + "px," + this.position.y + "px,0) scale(" + (this.lifeSpan / 120) + ")";
  108.     }
  110.     this.die = function() {
  111.       this.element.parentNode.removeChild(this.element);
  112.     }
  114.   }
  116.   function applyProperties( target, properties ) {
  117.     for( var key in properties ) {
  118.       target.style[ key ] = properties[ key ];
  119.     }
  120.   }
  122.   init();
  123. })();

接着，在\source\_data的butterfly.yml引入：

  1.   bottom:
  2.      - <script type="text/javascript" src="/js/fairyDustCursor.js"></script>

22

忽略以下图片，可以自行尝试。

23

3.打字特效

在\source\_data中butterfly.yml修改：

24

4.页面特效

静态彩带

在\source\_data中butterfly.yml修改：

  1. # canvas_ribbon (靜止彩帶背景)
  2. # See: https://github.com/hustcc/ribbon.js
  3. canvas_ribbon:
  4.   enable: false
  5.   size: 150
  6.   alpha: 0.6
  7.   zIndex: -1
  8.   click_to_change: true
  9.   mobile: true

点击页面，彩带会进行变化。

动态彩带

在\source\_data中butterfly.yml修改：

  1. # Fluttering Ribbon (動態彩帶)
  2. canvas_fluttering_ribbon:
  3.   enable: true
  4.   mobile: true

这个彩带可以动态变换。

canvas_nest

在\source\_data中butterfly.yml修改：

  1. # canvas_nest
  2. # https://github.com/hustcc/canvas-nest.js
  3. canvas_nest:
  4.   enable: false
  5.   color: '0,0,255' #线条颜色, default: '0,0,0'; 
  6.   opacity: 0.7 # 线条的不透明度 (0~1), default: 0.5.
  7.   zIndex: -1 # z-index property of the background, default: -1.
  8.   count: 99 # 线条数量, default: 99.
  9.   mobile: false

这个可以鼠标自动吸附。

Snackbar 弹窗

在\source\_data中butterfly.yml修改：

  1. # Snackbar (Toast Notification 彈窗)
  2. # position 彈窗位置
  3. # 可選 top-left / top-center / top-right / bottom-left / bottom-center / bottom-right
  4. snackbar:
  5.   enable: true
  6.   position: top-right
  7.   bg_light: '#49b1f5' # light 背景下的样式
  8.   bg_dark: '#121212' # dark 背景下的样式

开启后，在你设置的位置会有可爱的小弹窗出现。

大家可以尝试一下，按个人爱好开启。

25

底部设置

在 butterfly.yml中配置：

  1. # Footer Settings
  2. # --------------------------------------
  3. footer:
  4.   owner:
  5.     enable: true
  6.     since: 2020
  7.   custom_text: 11111
  8.   copyright: true # false： Hexo那句不显示
  9.   ICP: # Chinese ICP License   #最后一句
  10.     enable: true
  11.     url: http://www.beian.gov.cn
  12.     text: 豫ICP备20001029号
  13.     icon: /img/icp.png

26

修改主题文件美化

添加404页面

1.找到自己心仪的404页面，这个网站很多很多呦。

https://404.life/

2.在\source中创建一个404文件夹和一个404.html

27

3.修改404.html内容

? 红线的地方，可以自行选择是否修改

? 红框的地方，必须修改 (可以按照图片中修改)

28 29

4.设置404跳过渲染，在主目录_config.yml中：

  1. skip_render:
  2.   - 404.html

5.butterfly.yml 可以关掉默认的404页面

  1. # A simple 404 page
  2. error_404:
  3.   enable: false  # 关闭
  4.   subtitle: 'Page Not Found'
  5.   background: https://i.loli.net/2020/05/19/aKOcLiyPl2JQdFD.png
30

修改滚动条

1.创建一个css文件移动到\themes\butterfly\source\css目录下。

31

2.引入方式

32

将以下代码复制到你所创建的css文件,引入即可。

  1. /* 滚动条 */
  2. ::-webkit-scrollbar {
  3.   width: 8px;
  4.   height: 8px;
  5. }
  6.  
  7. ::-webkit-scrollbar-track {
  8.   background-color: rgba(73, 177, 245, 0.2);
  9.   border-radius: 2em;
  10. }
  11.  
  12. ::-webkit-scrollbar-thumb {
  13.   background-color: #49b1f5;
  14.   background-image: -webkit-linear-gradient(
  15.     45deg,
  16.     rgba(255, 255, 255, 0.4) 25%,
  17.     transparent 25%,
  18.     transparent 50%,
  19.     rgba(255, 255, 255, 0.4) 50%,
  20.     rgba(255, 255, 255, 0.4) 75%,
  21.     transparent 75%,
  22.     transparent
  23.   );
  24.   border-radius: 2em;
  25. }
  26.  
  27. ::-webkit-scrollbar-corner {
  28.   background-color: transparent;
  29. }
  30.  
  31. ::-moz-selection {
  32.   color: #fff;
  33.   background-color: #49b1f5;
  34. }

页脚渐变

将以下代码复制到你所创建的css文件,引入即可。

可参考：修改滚动条部分中的引入方式

  1. /* 页脚footer */
  2. /* 渐变色滚动动画 */
  3. @-webkit-keyframes Gradient {
  4.     0% {
  5.         background-position: 0 50%;
  6.     }
  7.  
  8.     50% {
  9.         background-position: 100% 50%;
  10.     }
  11.  
  12.     100% {
  13.         background-position: 0 50%;
  14.     }
  15. }
  16.  
  17. @-moz-keyframes Gradient {
  18.     0% {
  19.         background-position: 0 50%;
  20.     }
  21.  
  22.     50% {
  23.         background-position: 100% 50%;
  24.     }
  25.  
  26.     100% {
  27.         background-position: 0 50%;
  28.     }
  29. }
  30.  
  31. @keyframes Gradient {
  32.     0% {
  33.         background-position: 0 50%;
  34.     }
  35.  
  36.     50% {
  37.         background-position: 100% 50%;
  38.     }
  39.  
  40.     100% {
  41.         background-position: 0 50%;
  42.     }
  43. }
  44. #footer {
  45.     background: linear-gradient(-45deg, #ee7752, #ce3e75, #23a6d5, #23d5ab);
  46.     background-size: 400% 400%;
  47.     -webkit-animation: Gradient 10s ease infinite;
  48.     -moz-animation: Gradient 10s ease infinite;
  49.     animation: Gradient 10s ease infinite;
  50.     -o-user-select: none;
  51.     -ms-user-select: none;
  52.     -webkit-user-select: none;
  53.     -moz-user-select: none;
  54.     user-select: none;
  55.     border-top-left-radius: 10px;
  56.     border-top-right-radius: 10px;
  57. }
  58. #footer:before {
  59.     background-color: rgba(0, 0, 0, 0);
  60. }

更换背景及透明度

1.透明度

将以下代码复制到你所创建的css文件,引入即可。

可参考：修改滚动条部分中的引入方式

  1. /* 文章页背景 */
  2. .layout_post>#post {
  3.     /* 以下代表白色透明度为0.3 */
  4.     background: rgba(255,255,255,.3);
  5. }
  7. /* 所有背景（包括首页卡片、文章页、页面页等） */
  8. #aside_content .card-widget, #recent-posts>.recent-post-item, .layout_page>div:first-child:not(.recent-posts), .layout_post>#page, .layout_post>#post, .read-mode .layout_post>#post{
  9.     /* 以下代表白色透明度为0.3 */
  10.     background: rgba(255,255,255,.3);
  11. }

2.更换背景

老规矩，复制到你所创建的css文件,引入即可。

  1. #web_bg {
  2. background-image: linear-gradient(to top, #fff1eb 0%, #ace0f9 100%);
  3. }

当然这是我的博客背景。

如果你想更改，具体可以参考本博客文章：Hexo之更换背景及透明度

移动端优化

\themes\butterfly\source\css\_third-party\normalize.min.css添加如下css代码：

  1. /*移动端优化：去除归档、标签、最新文章、公告、、只保留网站统计*/
  2. @media screen and (max-width: 800px) {
  3.     #aside_content
  4.     div:not(:last-child) {
  5.         display: none;
  6.         font-size: 13px;
  7.     }
  8. }

查看网页RSS

本次修改基于Butterfly主题 3.0.0 ！

实现：增加社交图标RSS，点击可查看网页RSS。

1.下载插件hexo-generator-feed

  1. npm install hexo-generator-feed --save

2.在hexo的主配置文件_config.yml中任意位置添加以下代码：

  1. feed:
  2.   type: atom
  3.   path: atom.xml
  4.   limit: 20
  5.   hub:
  6.   content:
  7.   content_limit: 140
  8.   content_limit_delim: ' '
  9.   order_by: -date
  10.   icon: icon.png
  11.   autodiscovery: true
  12.   template:

3.修改butterfly主题配置文件_config.yml ，添加RSS的图标：

  1. social:
  2.   fa fa-rss: /atom.xml || RSS链接

社交信息设置

在\source\_data中的butterfly.yml修改social：

(可以选择使用fa fa-xxx图标，也可以选择使用阿里iconfont图标)

具体可参考：本站文章--Hexo-使用阿里iconfont图标

33 34

此处要注意：

? 很多人不知道自己上方填的网址怎么找

? RSS上面有教程，Giuhub、Github、CSDN、bilibili直接个人主页网址就可以

? QQ：下方 xxxxxxx 填上对应的qq号码即可

  1. tencent://AddContact/?fromId=45&fromSubId=1&subcmd=all&uin=xxxxxxx&website=www.oicqzone.com

标签外挂

1.Note语法

? 移植于next主题：可以在\source\_data中的butterfly.yml修改：

  1. note:
  2.   # Note tag style values:
  3.   #  - simple    bs-callout old alert style. Default.
  4.   #  - modern    bs-callout new (v2-v3) alert style.
  5.   #  - flat      flat callout style with background, like on Mozilla or 
  6.   style: flat
  7.   icons: true        #是否开启图片
  8.   border_radius: 3
  9.   # Offset lighter of background in % for modern and flat styles (modern: -12 | 12; flat: -18 | 6).
  10.   # Offset also applied to label tag variables. This option can work with disabled note tag.
  11.   light_bg_offset: 0

? 该标签有两种使用方法。

? 默认模板：

  1. {% note [class] [no-icon] [style] %}
  2. Any content (support inline tags too.io).
  3. {% endnote %}
名称
用法
class 【可选】标识，不同的标识有不同的配色
（ default / primary / success / info / warning / danger ）
no-icon 【可选】不显示 icon
style 【可选】可以覆盖配置中的 style
（simple/modern/flat/disabled）

一、simple

  1. {% note simple %}
  2. 默认 提示块
  3. {% endnote %}
  5. {% note default simple %}
  6. default 提示块
  7. {% endnote %}
  9. {% note primary simple %}
  10. primary 提示块
  11. {% endnote %}
  13. {% note success simple %}
  14. success 提示块
  15. {% endnote %}
  17. {% note info simple %}
  18. info 提示块
  19. {% endnote %}
  21. {% note warning simple %}
  22. warning 提示块
  23. {% endnote %}
  25. {% note danger simple %}
  26. danger 提示块
  27. {% endnote %}

更多可以在我的个人博客观看

2.图片放置

可以根据图片长度自行排列

  1. {% gallery %}
  2. markdown 图片格式
  3. {% endgallery %}

例如：

  1. {% gallery %}
  2. ![](https://upimage.alexhchu.com/2020/10/21/f5ac68ddaaf64.jpg)
  3. ![](https://upimage.alexhchu.com/2020/10/21/0d1b78c7157d4.jpg)
  4. ![](https://upimage.alexhchu.com/2020/10/19/34446d0d37dde.jpg)
  5. {% endgallery %}

因为这个功能是用在Hexo美化中，在此博客效果不显示，具体可移步我的博客（最下方链接）

3.tag-hide

这个可以提供一个按钮，点击它，显示你隐藏的文字、图片等。

Inline

这个可以隐藏文字，仅限于此。( content不能包含英文逗號，可用&sbquo;)

  1. {% hideInline content,display,bg,color %}

  • content: 文本內容

  • display: 按钮显示的文字(可选)

  • bg: 按钮的背景颜色(可选)

  • color: 按钮文字的颜色(可选)

Demo

  1. 座右铭座右铭！！ {% hideInline 何其荣幸 何德何能,别点我,#FF7242,#fff %}
  3. 平平无奇。。。  {% hideInline 上面太花里胡哨了,上面真秀 %}

Block
这个也是提供一个按钮，而他可以隐藏文字、图片、代码块等。( dispaly不能包含英文逗號，可用&sbquo;)

  1. {% hideBlock display,bg,color %}
  2. content
  3. {% endhideBlock %}

  • content: 文本內容

  • display: 按钮显示的文字(可选)

  • bg: 按钮的背景颜色(可选)

  • color: 按钮文字的颜色(可选)

Demo

  1. 座右铭座右铭！！ 
  2. {% hideBlock  别点我,#FF7242,#fff %}
  3. 何其荣幸 何德何能
  4. {% endhideBlock %}
  5. 平平无奇。。。  
  6. {% hideBlock 上面真秀 %}
  7.  上面太花里胡哨了
  8. {% endhideBlock %}

Toggle
如果你需要展示的內容太多，可以把它隐藏在收缩框里，需要时再把它展开。

  1. {% hideToggle display,bg,color %}
  2. content
  3. {% endhideToggle %}

Demo

  1. {% hideToggle Wecome to my Blog %}
  2.  欢迎欢迎欢迎
  3.  MoYu‘s Blog
  4.  Gitee：https://moyu-zc.gitee.io/
  5.  Github：https://moyu-zc.github.io/
  6. {% endhideToggle %}

因为这个功能是用在Hexo美化中，在此博客效果不显示，具体可移步我的博客（最下方链接）

4.mermaid

mermaid标签不允许嵌套于一些隐藏属性的标签外挂

例如: tag-hide內的标签外挂和tabs标签外挂，也不能压缩代码

这会导致mermaid图示无法正常显示，使用时请留意。

使用mermaid标签可以绘制Flowchart（流程图）、Sequence diagram（时序图 ）、Class Diagram（类别图）、State Diagram（状态图）、Gantt（甘特图）和Pie Chart（圆形图），具体可以查看mermaid文檔
在\source\_data中的butterfly.yml中修改:

  1. mermaid:
  2.   enable: true
  3.   # built-in themes: default/forest/dark/neutral
  4.   theme: default

写法：

  1. {% mermaid %}
  2. 內容
  3. {% endmermaid %}

Demo

  1. {% mermaid %}
  2. pie
  3.    Test X
  4.     "A" : 50
  5.     "B" : 20
  6.     "C" : 10
  7.     "D" :  5
  8. {% endmermaid %}

因为这个功能是用在Hexo美化中，在此博客效果不显示，具体可移步我的博客（最下方链接）

5.Tabs

Demo1------默认方式

  1. {% tabs test1 %}
  2. <!-- tab -->
  3. **This is Tab 1.**
  4. <!-- endtab -->
  6. <!-- tab -->
  7. **This is Tab 2.**
  8. <!-- endtab -->
  10. <!-- tab -->
  11. **This is Tab 3.**
  12. <!-- endtab -->
  13. {% endtabs %}

Demo2------预设选择``tabs`

  1. {% tabs test2, 3 %}
  2. <!-- tab -->
  3. **This is Tab 1.**
  4. <!-- endtab -->
  6. <!-- tab -->
  7. **This is Tab 2.**
  8. <!-- endtab -->
  10. <!-- tab -->
  11. **This is Tab 3.**
  12. <!-- endtab -->
  13. {% endtabs %}

Demo3------没有预设

  1. {% tabs test3, -1 %}
  2. <!-- tab -->
  3. **This is Tab 1.**
  4. <!-- endtab -->
  6. <!-- tab -->
  7. **This is Tab 2.**
  8. <!-- endtab -->
  10. <!-- tab -->
  11. **This is Tab 3.**
  12. <!-- endtab -->
  13. {% endtabs %}

Demo4------自定义Tab名、 只有icon、icon和Tab名

  1. {% tabs test4 %}
  2. <!-- tab 第一個Tab -->
  3. **tab名字为第一个Tab**
  4. <!-- endtab -->
  6. <!-- tab @fab fa-bell -->
  7. **只有图标 没有Tab名字**
  8. <!-- endtab -->
  10. <!-- tab 身份证@fas fa-address-card -->
  11. **名字+icon**
  12. <!-- endtab -->
  13. {% endtabs %}

因为这个功能是用在Hexo美化中，在此博客效果不显示，具体可移步我的博客（最下方链接）

6.Button

模板：

  1. {% btn [url],[text],[icon],[color] [style] [layout] [position] [size] %}
  3. [url]         : 链接
  4. [text]        : 按钮文字
  5. [icon]        : [可选] 图标
  6. [color]       : [可选] 按钮背景颜色(默认style时）
  7.                       按鈕字體和邊框顔色(outline時)
  8.                       default/blue/pink/red/purple/orange/green
  9. [style]       : [可选] 按钮样式 默认实心
  10.                       outline/留空
  11. [layout]      : [可选] 按钮布局 默认为line
  12.                       block/留空
  13. [position]    : [可选] 按钮位置 前提是设置了layout為block 默认为左边
  14.                       center/right/留空
  15. [size]        : [可选] 按钮大小
  16.                       larger/留空
  1. {% btn 'https://moyu-zc.gitee.io/',MoYu,far fa-hand-point-right,block %}
  2. {% btn 'https://moyu-zc.gitee.io/',MoYu,far fa-hand-point-right,block center larger %}
  3. {% btn 'https://moyu-zc.gitee.io/',MoYu,far fa-hand-point-right,block right outline larger %}

More styles:

  1. {% btn 'https://moyu-zc.gitee.io/',MoYu,far fa-hand-point-right,larger %}
  2. {% btn 'https://moyu-zc.gitee.io/',MoYu,far fa-hand-point-right,blue larger %}
  3. {% btn 'https://moyu-zc.gitee.io/',MoYu,far fa-hand-point-right,pink larger %}
  4. {% btn 'https://moyu-zc.gitee.io/',MoYu,far fa-hand-point-right,red larger %}
  5. {% btn 'https://moyu-zc.gitee.io/',MoYu,far fa-hand-point-right,outline purple larger %}
  6. {% btn 'https://moyu-zc.gitee.io/',MoYu,far fa-hand-point-right,outline orange larger %}
  7. {% btn 'https://moyu-zc.gitee.io/',MoYu,far fa-hand-point-right,outline green larger %}

因为这个功能是用在Hexo美化中，在此博客效果不显示，具体可移步我的博客（最下方链接）

分享功能

分享功能有两种：

第一种：

如果你不知道 sharejs，可以查看说明

主目录下/source/_data--butterfly.yml中修改:

  1. sharejs:
  2.   enable: true
  3.   sites: facebook,twitter,wechat,weibo,qq  #想要显示的內容

35

第二种：

如果你不知道addtoany，可以查看说明

主目录下/source/_data--butterfly.yml中修改:

  1. addtoany:
  2.   enable: true
  3.   item: facebook,twitter,wechat,sina_weibo,facebook_messenger,email,copy_link
36

在线聊天

通用设置

在butterfly中，有几种内置的在线聊天工具。

简单的，打开chat_btn，在右下角开启小按钮。

  1. # Chat Button [recommend]
  2. # It will create a button in the bottom right corner of website, and hide the origin button
  3. chat_btn: true
37

为了不影响访客体验，可以开启chat_hide_show，开启后，只有向上滚动才会显示聊天按钮，向下滚动时会隐藏按钮。

  1. # The origin chat button is displayed when scrolling up, and the button is hidden when scrolling down
  2. chat_hide_show: true

如果使用工具自带的聊天按钮，位置可能会遮挡右下角图标，可以配置``rightside-bottom`调整右下角图标位置

chatra
在chatra中注册账号.

可以在Preferences中找到Public key

38

之后/source/_data--butterfly.yml中修改:

  1. # chatra
  2. # https://chatra.io/
  3. chatra:
  4.   enable: true
  5.   id:           #这个就是Public key

tidio

在tidio中注册账号。

可以在Preferences中找到Public key。

在设置中还可以设置样式。

39

之后/source/_data--butterfly.yml中修改:

  1. # tidio
  2. # https://www.tidio.com/
  3. tidio:
  4.   enable: true
  5.   public_key:    #这个就是Public key
40

daovoice

在daovoice中注册。

在应用设置----安装到网站 之中的app id

可在聊天设置里可以配置聊天按钮等样式

41

之后/source/_data--butterfly.yml中修改:

  1. # daovoice
  2. # http://daovoice.io/
  3. daovoice:
  4.   enable: true 
  5.   app_id:      #这个就是app id
42

gitter

在gitter中登录上账号。

创建一個community或者room,复制名称到设置去。

  1. # gitter
  2. # https://gitter.im/
  3. gitter:
  4.   enable: true
  5.   room: MoYuzc/community   #名称放这儿
43 44

crisp

打开crisp，注册账号。

在设置中，找到网站ID。

45

之后，在butterflt.yml中修改：

  1. # crisp
  2. # https://crisp.chat/en/
  3. crisp:
  4.   enable: true
  5.   website_id:    #网站ID填写这儿
46

评论功能

开启评论需要在butterfly.yml---comments---use中填写你需要的评论。

支持双评论显示，只需要配置两个评论（第一个为默认显示）

  1. comments:
  2.   use:
  3.    - Valine
  4.   # - Disqus    
  5.   text: true 
  6.   lazyload: false
  7.   count: false
参数 解释
use 使用的评论（填写的评论首字母需要大写。最多支持两个，不需要就留空）
text 是否显示评论服务商的名字
lazyload 是否为评论开启lazyload，开启后，只有滚动到评论位置时才会加载评论所需要的资源（开启lazyload后，评论数将不显示）
count 是否在文章顶部显示评论数
livere 和 utterances 不支持评论数显示

注意：双评论不能是 Disqus 和 Disqusjs 一起，由于其共用同一个 ID，会出错。

以下是举例的我在用的：Valine

1.在LeanCloud中注册账号，并进入。

47

2.创建应用，命名就随便啦

48

3.创建成功后，进入设置

49

4.进入应用Keys

应用Keys中有AppID和AppKey，这两个需要填写到你的butterfly.yml中

50

5.填写butterfly.yml

  1. # valine
  2. # https://valine.js.org
  3. valine:
  4.   appId:              #  app id
  5.   appKey:              # app key
  6.   pageSize: 10
  7.   avatar: monsterid 
  8.   lang: zh-CN 
  9.   placeholder: Please leave your footprints p
  10.   guest_info: nick,mail,link 
  11.   recordIP: true 
  12.   serverURLs: 
  13.   bg: 
  14.   emojiCDN: 
  15.   enableQQ: true 
  16.   requiredFields: nick,mail
52

? 持续更新ing~~

个人博客为：
MoYu's Github Blog
MoYu's Gitee Blog

原文链接：http://www.cnblogs.com/MoYu-zc/p/14395965.html

 友情链接：直通硅谷 　点职佳 　北美留学生论坛

CSS热门文章

  • CSS实现文字两端对齐
  • 【WEB基础】HTML & CSS 基础入门（6）超链接
  • Javascript 对象 - 数学对象
  • 对移动端兼容适配的分析
  • Element FORM结合Vue实现横向排列表单项
  • 如何让一个input输入框居中
  • CSS Grid 布局完全指南(图解 Grid 详细教程)
  • css常见的各种布局上（两列布局）
  • vue+element导入导出excel
  • WEB前端动态背景集

    • CSS推荐文章

  • CSS布局概念与技术教程
  • 15 分钟带你感受 CSS :has() 选择器的强大 - xingba-coder
  • 现代 CSS 解决方案：文字颜色自动适配背景色！
  • 脚踏esbuild祥云，胸怀tsx利刃，身披scss羽衣，追寻前端的本质
  • 深入解析css-笔记
  • CSS 还原拉斯维加斯球数字动画
  • 震惊！CSS 也能实现碰撞检测？
  • 前端开发如何更好的避免样式冲突？级联层(CSS@layer)
  • 现代 CSS 解决方案：CSS 原生支持的三角函数
  • 利用css var函数让你的组件样式输出规范样式API，可定制性更高；

    • 本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

    W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
    关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
    皖ICP备17017327号-2　皖公网安备34020702000426号