使用须知

1. typecho-butterfly使用php作为后端，部署需要服务器或者虚拟主机
2. 本主题虽然为移植，但只是移植前端样式，功能并没有原版的butterfly自定义层度高，本人因技术问题并且我并没有使用过butterfly所有的功能，目前只能实现原butterfly在我曾经个人使用时候的一些配置功能和一些其他设置
3. 关于主题以外的配置请查看typecho的使用教程，typecho-butterfly仅仅只是typecho的一个主题，你可以尝试寻找一些插件弥补主题的不足。

关于typecho程序的问题

你需要修改单独typecho程序的代码，并非是主题的代码

关于加密的文章(1.2.0已失效)：

使typecho加密的文章显示标题
你需要进入typecho的根目录
进入var/Widget/Abstract/Contents.php
然后找到
$value['title'] = _t('此内容被密码保护');
将这行代码注释掉即可

博客无法保存带有emoji的文章

这是由于typcho数据库编码的问题，或许开发版已经修复了此问题，如果你还在使用17年的稳定版按照下面的方式开始操作

打开博客根目录的 config.inc.php ，修改以下内容

/** 定义数据库参数 */
$db = new Typecho_Db('Pdo_Mysql', 'echo_');
$db->addServer(array (
  'host' => 'localhost',
  'user' => 'echo',
  'password' => 'password',
  'charset' => 'utf8mb4', // 修改这一参数
  'port' => '3306',
  'database' => 'echo',
), Typecho_Db::READ | Typecho_Db::WRITE);
Typecho_Db::set($db);

将'charset' => 'utf8'改为utf8mb4

1. 由于博客初始化的时候已经定义的数据库的编码格式，使用phpmyadmin执行以下语句

alter table typecho_comments convert to character set utf8mb4 collate utf8mb4_unicode_ci;
alter table typecho_contents convert to character set utf8mb4 collate utf8mb4_unicode_ci;
alter table typecho_fields convert to character set utf8mb4 collate utf8mb4_unicode_ci;
alter table typecho_metas convert to character set utf8mb4 collate utf8mb4_unicode_ci;
alter table typecho_options convert to character set utf8mb4 collate utf8mb4_unicode_ci;
alter table typecho_relationships convert to character set utf8mb4 collate utf8mb4_unicode_ci;
alter table typecho_users convert to character set utf8mb4 collate utf8mb4_unicode_ci;

主题导航栏排序

博客后台点击 管理 接着 独立页面
你可以通过鼠标拖拽修改独立页面的排序方式

主题如何更新

将下载好的主题压缩包放进 usr/themes 内解压即可，不过在更新前你最好在主题设置中备份主题数据，防止意外发生

启用主题500错误

一般在主题设置中关闭"是否显示在线人数"即可，如果还是错误可能是博客的问题了，比如安装了不兼容的插件、博客自身数据库错误导致

友链如何使用

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

1. 你可以去主题后台按照提示设置友链(它会渲染在文章的最上面)
2. 如何在typecho使用html不被md解析? 你只需使用 !!! 收尾包裹住html既可以
3. 注意:主题1.7.0(包括)之前的部分版本友链模块存在bug，请更新到1.7.0之后再配合下面的示例使用

下面的示例效果如图所示

# <i class="fas fa-check-double" style="color:#f66;padding-right:.4rem"></i> 这是html友链示例

!!!
<div class="flink-desc"><span style="font-style:italic">这里是描述，可不需要这段</span></div>
!!!

!!!
<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]

自定义导航栏链接

[note type="info modern"]此功能在1.4.0版本开始引入，目前采用html写法，具有极高的自定义程度[note]

使用说明：
你需要知道以下几点：

1. typecho会默认在导航栏自动生成独立页面链接。
2. 主题设置中「自定义导航栏链接」中的内容会在 程序自动生成链接 的后面渲染，也就是说，你可以让程序自动生成独立页面链接后再手动插入你想要的导航栏链接。
3. 你可以在主题设置中将「自动生成导航栏独立页面链接」 关闭 来手动创建整个导航栏中的链接。
4. 手动创建整个导航栏的便捷方法：

先关闭主题的pjax，进入主题后对导航栏任意链接查看其元素，接着找到 "

<div class="menus_item">
    <a class="site-page group" href="javascript:void(0);" rel="external nofollow noreferrer">
        <i class="fa-fw fas fa-compass"></i>
        <span>目录</span>
        <i class="fas fa-chevron-down"></i>
    </a>
    <ul class="menus_item_child">
        <li>
            <a class="site-page child" href="/archives.html">
                <i class="fa-fw fas fa-archive"></i>
                <span>归档</span></a>
        </li>
        <li>
            <a class="site-page child" href="/tags.html">
                <i class="fa-fw fas fa-tags"></i>
                <span>标签</span></a>
        </li>
        <li>
            <a class="site-page child" href="/categories.html">
                <i class="fa-fw fas fa-folder-open"></i>
                <span>分类</span></a>
        </li>
    </ul>
</div>
<div class="menus_item">
    <a class="site-page group" href="javascript:void(0);" rel="external nofollow noreferrer">
        <i class="far fa-file-alt"></i>
        <span>主题文档</span>
        <i class="fas fa-chevron-down"></i>
    </a>
    <ul class="menus_item_child">
        <li>
            <a class="site-page child" href="/archives/typecho-butterfly.html">
                <i class="fas fa-map-signs"></i>
                <span>使用说明</span></a>
        </li>
        <li>
            <a class="site-page child" href="/archives/tagplugins.html">
                <i class="fas fa-tag"></i>
                <span>标签外挂</span></a>
        </li>
    </ul>
</div>
<div class="menus_item">
    <a class="site-page" href="/friend.html" title="友链">
        <i class="fa-fw fas fa-link"></i>
        <span>友链</span>
    </a>
</div>
<div class="menus_item">
               <a class="site-page" href="/about.html">
                            <i class="fa-fw fas fa-user"></i>                         
       <span>关于</span>
                    </a>
              </div>
<div class="menus_item">
    <a class="site-page group" href="javascript:void(0);" rel="external nofollow noreferrer">
        <i class="fas fa-network-wired"></i>
        <span>其他站点</span>
        <i class="fas fa-chevron-down"></i>
    </a>
    <ul class="menus_item_child">
        <li>
            <a class="site-page child" href="https://www.haoi.net/" target="_BLANK">
                <i class="fas fa-globe-asia"></i>
                <span>WeHao’s Web</span></a>
        </li>
        <li>
            <a class="site-page child" href="https://file.haoi.net/" target="_BLANK">
                <i class="fas fa-share"></i>
                <span>WeHao‘s Share</span></a>
        </li>
    </ul>
</div>

location /usr/themes/butterfly/online.dat {
  return 404;
}

body { font-family: -apple-system,BlinkMacSystemFont,segoe ui,helvetica neue,Lato,Roboto,pingfang sc,microsoft yahei,sans-serif;}