Typecho前台主题Butterfly

友链如何使用
你需要去独立页面选择友情链接模块，标题取名为友链
如何生成butterfly的友链效果？

你可以去主题后台按照提示设置友链(它会渲染在文章的最上面)
你可以在友链的独立页面模块中直接写入友链div的html代码(自定义程度更高)
如何在typecho使用html不被md解析? 你只需使用 !!! 收尾包裹住html既可以
注意:主题1.7.0(包括)之前的部分版本友链模块存在bug，请更新到1.7.0之后再配合下面的示例使用
下面的示例效果如图所示

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
## <i class="fas fa-check-double" style="color:#f66;padding-right:.4rem"></i> 这是html友链示例

!!!
<div class="flink-list">

  <div class="flink-list-item">
    <a href="修改网址" title="修改标题" target="_blank">
      <div class="flink-item-icon">
        <img src="修改图标" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="修改标题"> 
      </div>
      <div class="flink-item-name">修改标题</div>
      <div class="flink-item-desc" title="修改描述">修改描述</div></a>
  </div>

  <div class="flink-list-item">
    <a href="修改网址" title="修改标题" target="_blank">
      <div class="flink-item-icon">
        <img src="修改图标" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="修改标题2"> 
      </div>
      <div class="flink-item-name">修改标题2</div>
      <div class="flink-item-desc" title="修改描述">修改描述2</div></a>
  </div>

</div>
!!!


## <i class="fas fa-fan" style="color:#0cc;padding-right:.4rem"></i> 这是html友链示例第二个分组

!!!
<div class="flink-list">

  <div class="flink-list-item">
    <a href="修改网址" title="修改标题" target="_blank">
      <div class="flink-item-icon">
        <img src="修改图标" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="修改标题"> 
      </div>
      <div class="flink-item-name">修改标题</div>
      <div class="flink-item-desc" title="修改描述">修改描述</div></a>
  </div>

  <div class="flink-list-item">
    <a href="修改网址" title="修改标题" target="_blank">
      <div class="flink-item-icon">
        <img src="修改图标" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="修改标题分组2"> 
      </div>
      <div class="flink-item-name">修改标题2</div>
      <div class="flink-item-desc" title="修改描述">修改描述分组2</div></a>
  </div>

</div>
!!!


[note type="success flat no-icon"]你好啊，想申请友链按如下格式填写
...网站名称
...网站链接
...网站头像
[/note]

原主题：hexo-butterfly

Demo：WeHao‘s Blog

使用文档：使用文档

💻安装

你最好从Release 页面下载，code页下载代码可能更新遗漏或者更新提前导致页面出错
下载好后放进博客usr/theme内解压即可

⭐帮助主题发展(加快更新)

  • 如果你发现主题bug或者建议可以去issues提交反馈
  • 如果你一定能力可以向主题提交PR来丰富主题
  • 如果你只是一个普通是使用者，你可以在右上角给主题点一个star来鼓励作者来加快更新

✌️移植特色

  1. 方便原hexo的博文转移，因为都是md文档
  2. 原butterfly的用户可以直接使用原版butterfly主题的css文件，拥有原先同样的效果
  3. 注意：移植并非为最新版butterfly,你的index.css可能会在本主题出现bug
  4. 由于使用动态博客，大部分功能可以让程序去实现，不用借助第三方api(可在主题外观设置中自定义)
  5. 在线编辑文档
  6. 搜索、加密和置顶文章可以直接使用(相比hexo无需太多额外配置)
  7. 相比hexo，程序安装更加方便，使用更加高效
  8. 网站咨询显示同时在线人数(某些虚拟主机似乎无法使用)
  9. 可在后台设置侧边栏信息以及侧边栏的隐藏和显示
  10. 后续将开发更多功能

🎉已实现的功能

  • [x] 支持评论区谷歌人机验证、hcaptcha人机验证
  • [x] 全站加密或禁止访问
  • [x] 一键开启魔改主题
  • [x] 单独设置文章过期提醒
  • [x] 文章加密（博客程序自带）
  • [x] 后台设置需要置顶文章
  • [x] 后台设置友链并可以使html自定义友链
  • [x] 文章内可设置回复可见
  • [x] 卡片化设计
  • [X] 支持二级目录
  • [x] 双栏设计
  • [x] 响应式主题
  • [x] 夜间模式
  • [x] Pjax
  • [x] 文章阅读模式
  • [x] 简体和繁体转换
  • [X] 电脑和手机都可查看TOC目录
  • [ ] 内置多种代码配色（darker/pale night/light/ocean/mac/mac light），可自定义代码配色
  • [X] 代码块显示代码语言/关闭或展开代码块/代码复制/代码自动换行
  • [ ] 可关闭文字复制/可开启内容复制增加版权信息）
  • [X] 本地搜索
  • [ ] Mathjax 和 Katex
  • [x] 内置404页面
  • [x] 显示字数统计
  • [x] 显示相关文章
  • [x] 过期文章提醒
  • [ ] 多种在线聊天（Chatra/Tidio/Daovoice/Gitter/Crisp）
  • [x] 谷歌广告/手动广告位置
  • [x] 修改网站配色
  • [ ] 打字特效 activate_power_mode
  • [ ] 多种背景特效（静止彩带/动态彩带/Canvas Nest）
  • [x] 多种鼠标点击特效（烟花/爱心）
  • [ ] 内置一种 Preloader 加载动画
  • [x] Fancybox大图模式
  • [ ] 照片墙
  • [x] 图片懒加载
  • [x] Snackbar弹窗
  • [ ] PWA

详情看：

博客说明