我就是 copy 怪hhh，大部分样式来自 Hexo 版本

文章归档

所有移植都要从文章归档页面开始说起，看到 Hexo 版本的文章归档页面感觉很好看，于是就开始移植了。 先用 chrome 的F12看下折影大佬站上的有关样式 全部Copy下来 nexmoe-1.png 其实最主要的就是 ::before 样式，其它的抄来也用不了啊hhh 然后整理下需要用到的样式，留下来了这些。

    .nexmoe-archives li {
        position: relative;
        padding: 10px 0;
    }
    .nexmoe-archives li::before {
        content: "";
        width: 14px;
        height: 14px;
        background: #ff4e6a;
        display: inline-block;
        vertical-align: middle;
        margin-top: -2px;
        margin-right: 11px;
        border-radius: 100%;
        border: 3px solid #fff;
        z-index: 100;
        position: relative;
    }
    .nexmoe-archives ul {
        list-style: none;
        padding-left: 0!important;
    }
    .nexmoe-archives li::after {
        content: "";
        height: 100%;
        width: 2px;
        background: rgba(255,78,106,.2);
        position: absolute;
        left: 6px;
        top: 20px;
    }
    .nexmoe-archives span {
        margin-right: 15px;
    }

有了样式了，接下来就是创建归档模板了

<?php 
/**
 * 归档页面
 *
 * @package custom
 */
if (!defined('__TYPECHO_ROOT_DIR__')) exit;
$this-&gt;need('layout/_partial/head.php'); 
?>

然后全部复制 page.php的内容粘贴到下边，删除掉这些

            <div class="nexmoe-post-cover mdui-ripple"> 
                <?php if ($this->fields->Cover){ ?>
                    <img src="<?php echo $this->fields->Cover ?>">
                <?php }  else{ ?>
                    <img src="<?php echo $this->options->background ?>">
                <?php } ?>
                <h1><?php $this->title() ?></h1>
            </div>
            <div class="nexmoe-post-meta">
                <a><i class="nexmoefont icon-calendar-fill"></i><?php $this->date('Y年n月d日');?></a>
                <a><?php artCount($this->cid);?> 汉字</a>
                <a><?php post_view($this);?> 围观</a>
                <a><?php $this->commentsNum('%d'); ?> 评论</a>
            </div>

然后再把调用评论删掉

 <div id="comments">
                <?php $this->need('comments.php'); ?>
            </div>

这样我们就得到了个空的页面模板，加入typecho的归档，并仿照 Hexo 的日期输出方式进行修改，得到以下代码



              <?php 
    $this->widget('Widget_Contents_Post_Recent', 'pageSize=10000')->to($archives);   
    $year=0; $mon=0; $i=0; $j=0;   
    $output = '<div id="archives">';   
    while($archives->next()):   
        $year_tmp = date('Y',$archives->created);   
        $mon_tmp = date('m',$archives->created);   
        $y=$year; $m=$mon;   
        if ($mon != $mon_tmp && $mon > 0) $output .= '</ul></li>';   
        if ($year != $year_tmp && $year > 0) $output .= '</ul>';   
        if ($year != $year_tmp) {   
            $year = $year_tmp;   
            $output .= '<h2 >'. $year .' 年</h2><ul class="article1">'; //输出年份   
        }   
        $output .= '<li><span>'.date('n月d日    ',$archives->created).'</span><a href="'.$archives->permalink .'">'. $archives->title .'</a></li>'; //输出文章日期和标题   
    endwhile;   
    $output .= '</ul></li></ul></div>';
    echo $output;
?>

P.S 这里是把 <?php $this->content(''); ?>替换掉

## 友情链接

这项功能是从原先的Catui上直接搞来的，实现其实很简单，就是把原先 catui 有关 link-area 的样式全都 copy 来，再把页面内的输出也改成 catui 友情链接的输出方式即可。 但是使用后就发现，图片大小太小了。 使用 F12 就可以看到是原先的样式定义了 max-width ，于是在 link-area 的样式上也加一行max-width:115px;

图片是变大了，但发现在手机端时，所有友情链接都会出现偏左的现象。

    
@media screen and (max-width: 850px)
    .link-area a {
        width: calc(33.333333333333336% - 8px);
    }

加一段自适应即可。 但在写本博文时，发现了在 ipad 这种宽屏设备下出现了bug nexmoe-2.png 于是为了省事，就直接放弃原先的样式，准备从Hexo版本直接Copy，但是输出部分还是需要修改成这样

    <pre>`                                                    <?php
                            $str = preg_replace('#<li>(.*?)</li>#','<li>$1</li>', $this->content);
                          $str = preg_replace('#<li></li>#','<li>$1<a href="$2"><p>$3</p></a>',$str);
                            $str = preg_replace('#<ul>#','<ul>', $str);
                            $str = preg_replace('#</ul>#','</ul>', $str);
                         
                            $str = preg_replace('#<a href="(.*?)">(.*?)</a>#','<a href="$1" class="link-p" target="_blank" >$2</a>',$str);
                            echo $str;
                            ?>

然后在页面顶部增加修改后的样式

<style>
article ul li {
    transition: all .03s;
    width: calc(12.5% - 10px);
    margin: 5px;
    border-radius: 4px;
    border: 1px solid #eee;

    overflow: hidden;
}
.link-p {
 top: 10px;
    font-size: 15px;
    color: #606266;
    -webkit-transition: none;
    transition: none;
 margin-bottom: 5px;
    display: block;
    position: relative;
    width: 100%;
    border: none;
height:30px;
    margin-top: -2px;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

article ul {
    list-style-type: none;
    padding: 0;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin: -5px;
}

article ul li img {
  height:110px;
    width: 100%;
    border-radius: 0;
    border: none;
    display: block;
}
@media screen and (max-width: 768px) {
article ul li {
    width: calc(33.3333333333% - 10px);
}
</style>

然后就大功告成啦

社交小部件

搞完页面就该搞小部件了，首先可以看到这个主题设计思路很棒hhh，它是用这种方式调用侧边栏小部件的


<aside id="nexmoe-sidebar">
	
  <?php 
    $widget = explode(",",$this->options->widget);
    foreach($widget as $item){
        $this->need('layout/_widget/'.$item.'.php');
    }
  ?>
</aside>

我们只需要在layout/_widget/文件夹新建一个 social.php 文件即可。 代码就直接 Copy Hexo版本的就行了

  <div class="nexmoe-widget nexmoe-social"><a class="mdui-ripple" href="https://space.bilibili.com/20238211" target="_blank" mdui-tooltip="{content: '哔哩哔哩'}" style="color:#e76a8d;background-color:rgba(231,106,141,.1)" rel="external nofollow noopener noreferrer"><i class="nexmoefont icon-bilibili"></i> </a><a class="mdui-ripple" href="https://github.com/nexmoe/" target="_blank" mdui-tooltip="{content: 'GitHub'}" style="color:#191717;background-color:rgba(25,23,23,.1)" rel="external nofollow noopener noreferrer"><i class="nexmoefont icon-github"></i> </a><a class="mdui-ripple" href="https://www.zhihu.com/people/chainwon/" target="_blank" mdui-tooltip="{content: '知乎'}" style="color:#1e88e5;background-color:rgba(30,136,229,.1)" rel="external nofollow noopener noreferrer"><i class="nexmoefont icon-zhihu"></i> </a><a class="mdui-ripple" href="https://t.me/nexmoe" target="_blank" mdui-tooltip="{content: 'Telegram'}" style="color:#27a7e5;background-color:rgba(39,167,229,.1)" rel="external nofollow noopener noreferrer"><i class="nexmoefont icon-telegram"></i> </a><a class="mdui-ripple" href="https://twitter.com/nexmoe" target="_blank" mdui-tooltip="{content: 'Twitter'}" style="color:#1da1f2;background-color:rgba(29,161,242,.1)" rel="external nofollow noopener noreferrer"><i class="nexmoefont icon-twitter"></i> </a><a class="mdui-ripple" href="https://steamcommunity.com/id/nexmoe" target="_blank" mdui-tooltip="{content: 'Steam'}" style="color:#0e47a1;background-color:rgba(14,71,161,.1)" rel="external nofollow noopener noreferrer"><i class="nexmoefont icon-steam"></i> </a><a class="mdui-ripple" href="JavaScript:void(0)" target="_blank" mdui-tooltip="{content: '折影轻梦#5789'}" style="color:#3c57a4;background-color:rgba(60,87,164,.1)"><i class="nexmoefont icon-battlenet"></i> </a><a class="mdui-ripple" href="https://nexmoe.com/atom.xml" target="_blank" mdui-tooltip="{content: 'RSS'}" style="color:#f78422;background-color:rgba(247,132,34,.1)"><i class="nexmoefont icon-rss"></i></a></div>

但这乱七八糟的，没法动，格式化后插入从后台设置的调用

```html

社交按钮


但这些调用实际上是不存在的，所以要去 functions.php 增加以下代码

  ```php
  $bilibili = new Typecho_Widget_Helper_Form_Element_Text('bilibili', NULL, NULL, _t('哔哩哔哩地址'), _t('社交按钮部件-哔哩哔哩'));
    $form->addInput($bilibili); 
      
    $github = new Typecho_Widget_Helper_Form_Element_Text('github', NULL, NULL, _t('github地址'), _t('社交按钮部件-github'));
    $form->addInput($github); 
        
    $zhihu = new Typecho_Widget_Helper_Form_Element_Text('zhihu', NULL, NULL, _t('知乎地址'), _t('社交按钮部件-知乎'));
    $form->addInput($zhihu); 
        
     $telegram = new Typecho_Widget_Helper_Form_Element_Text('telegram', NULL, NULL, _t('telegram地址'), _t('社交按钮部件-telegram'));
        $form->addInput($telegram); 
        
     $twitter = new Typecho_Widget_Helper_Form_Element_Text('twitter', NULL, NULL, _t('推特地址'), _t('社交按钮部件-推特'));
        $form->addInput($twitter); 
        
         $steam = new Typecho_Widget_Helper_Form_Element_Text('steam', NULL, NULL, _t('steam地址'), _t('社交按钮部件-steam'));
        $form->addInput($steam); 
    
     $game = new Typecho_Widget_Helper_Form_Element_Text('game', NULL, NULL, _t('游戏ID'), _t('社交按钮部件-游戏ID'));
        $form->addInput($game);

最后的RSS调用，就直接以调用本站链接/feed的方式实现了。 但是运行后发现，rss的图标消失了，我去mdui的图标库并没有找到和 Hexo 版本一样的RSS图标，所以判定是调用了第三方资源。 最后在 Hexo 版本的代码中找到以下代码

@font-face {
      font-family:nexmoefont;src:url(iconfont.eot?t=1581230946722);src:url(iconfont.eot?t=1581230946722#iefix) format('embedded-opentype'),url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAABHUAAsAAAAAIAgAABGEAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCHGAqreKJaATYCJAN4Cz4ABCAFhQUHgmEbYRoz0nLSCgzZf33AjaGQg/oFDojEIHSYKLYXCbYWSTWcwd4bduI62MfahwVbTuryt2hbF/yz2YvgaT9z3t8NwRHKU1GngR0WJKKqcVWtNHUyYVmC4Wmb/+7ecSCod4j2YEpauWFjnahgAOrWp66CzVUgFi6NqD+XHS5++ItGPzdXb+U0vzYAxb8HZvgHlsZleWVfRsVzuq+Ah+EQGtoBy7xtb5HWE2pvgFRsTB2pymlNucAVrpGq/t8Rd0J29mRQ4G0uA5xqufzdc7WqBggYwMHk/mqttDsBQEWwLsKQMO/kzR7ObR/08z7x3gV2Q0BGId3xA7IKsAK0ETYVJaLlx0UYHx/2bu2BFeSiWWqzPP07yydQt80bcra7uKsqY+bABu/o5WPVRJhcMjZUrWVDvrkcn5RUiw/FZYWP3uePqbIbVQqlhGV78+L8maMB9mQy/De4pzm660lY5UdCD5ApesbU2AED1vPEuikW8yvJXOmvvjlIG1re8KiEBbWq7cOzw9nwa/9SUtOaTm+FosnAfzM1ybaQk+EXMmeA8cCwK4ceJ74hAwUTuRjxhnmv4xvGWiErKat07n/i1dQ1NbR0dHHZ4LFlx54DR05cgCij6zch3pEVW8AAkzyJAYdnHRgQ2nJwANoEUOBpMxTyFAyDeDLDVagE2AZUBmwHqgDOAlUBH4EC8AmoBvgMVAf8AmoCfgdqAP4FT4uRkqfDSM3TBUZaNAeYDjQPmAO0AJgLtAjQAy0BVgAtA4xAK4BCoFVAEXjWgMnAVjYAbOt89gDvKH+m2leYZeY5kqw677WTWUqCs3SILStAcmwhSWeoKE/3tgmlQmcXOqmYKErPyYZqzg6LSqiqIFvN5+YXq+osrIA3S2WngGyqxoiazy4mUVygQrXAIi87n8zNzDy5RM3O1u3L1LmuqUxEF4SuUAjUrCmHtMgiv/y0tIV53sfgs/8l/NRMpyAMEkaszRIA+JgjJNguJrruF7DkoqX+FV/doWjfc+eMyoPPaPMv338NA+3wLbFsJtpinxMofPPgSmd1ZRTTu/TpVTzryxXHixhC80xNxbOBlXwx35F1BC6VFSOxUdLLPclBpjRH2ms11q7GOru/4GpkRSFjeFJaw0Inkdn1aP8NiUlf1/R6zy0V2yn1Y/tDcfBUrSfnjsRzu8bgPOnEgqVJTN91XBM6i8xRadJpnRYV2aMX6q8nSgZbuTk+9dSa6MG8F1crlUVuOj3FxVRuHXu6QXYvSxgzj5lDhUUuFnqUyZWC5RsfKZtJuVGg72LxhvF7RbGWiQK4eL6Wdbh0qCjri9yBzxviO/jHvPqxNIonrP5P68UV/u/c+FIh68ffpza7HSAJrFePjv1diHYX0PY1aYDd02HSTwRTFiRaCtURx6nMzU1nRpJL4/IkwL7VqlSfaaYta0IUQN3cYErBvWmUFyZBpp/4PRegS9unbV6KpQ/WIgALm6MgLi+GqXlNOY2vbqhEU6gV1cztWMICrW1q+B5CKXmpKHzgt0GAnBQI/MTgl2JKATAVdrb/1MGIAjy9vc1VU9zJ/d/AY2Abyc5POQC+0RHq5l8vVC+49qF10ZI1w91c7cscSxVsv9riaNXB4NrlNf+0VqeTT8z73r4+uNW9ca+0ru/mEtskY/PsXnDdMmLYDKRyjKiuWNSxnzM1Px8Ce0coqqd9fVZgCfeuGhAF9SjKCTkYgCNVJY+noww74Vigk4COkA+/+vGbv4+qrqKvZ21v0wRAt2bksZa+YKQ7Wdi9RdkT9/0H4T3vbmsnBzXM7K6Rh9PeVJDw23fYn04E8zaDGVufPirD3oQUvI/pfsJsIoHRwoCP80Kd/paGLAelV0FzDUxFTVA6qLigp8eAvaMl2AjG5o3NFA5FhUQjOp3EmD+oQNawwta6+xRbNHRRK+yKTpHuhRTfkGuvrLUwHy0H9qLBEgR6zhvuQLktZ27ultlXGoG4xJ7YPvayaPwzUaKFva8XPJCACj2Unc+zbEYcfnWBEsVm19XrAxduXOveSQhjnFPaettsekfuv55HurrHMR+f7vacunM/3pe03xDMXkp8aRKDhmrG8JUViahvfeDBEeN+ZH6MMrz5j3xui7TjOhJL5LdQ/x41ZFgcp4pBqyRKjR5ih+NQfzYX9gAp7c4MTZpKiKX9cEfObUEvV3i4kaNQP05DzoxyBnhLDSvyXbVOLGE+D/XpcKnenHra1I+eWH7uUVP3P0OymgLf5oMl3C8eKIcMatVjY9qmm9uux0G07nZ8fcFEK1lfNNyvR8t3km8WonERyhfzw/nfruzF8Eq7+rqmtKmX667Cq8EGXpnrC5ixIHG5fMDpfxQ+8R8HD5v92pS60TbFa8nfiT/rERaLzZ7zxbJ7yEfNYUia6Fhzt0C2ysfj0jlX9oKxn7WmoFwU2dozHRF9I/21m2yoFj0buwZZQkWvrX+vsy1B/Fg33izte7gufLOw76MLHf63U2kmtBPzxk6yp1vwciylkhI9bMOBtYdcrLQs6xtw4Vydwbm3ufWao85jmo7JiK/opqPrD0/J1GXlZKsS6Gps6/eL1/Ta94t7DzrX2jfJupu+uqu+bS4NWyR9Aw51dWLzGjvlal/zWPM4+VSK84lErto61srSuP+A0fK6iFCTB00EHIv3qAoKVL1eYwmK1BBx1oylk590djyevIxpHUxkkPEEWsMkl965vZQL5MYgZ7W6Y7s61dlFrd7R4TTHnlf8OFMwn/ixb6dIY+WlFZ1IcBHFytz5waa4B6eQpJycJDUGyc1pdtE2MER9INsyhcHSCUlJE6TBQ3uYKTNzVAiFTNESscbg35+Mbr/8suMdnF1ZPhvl/8aVlUAec1ihZMfm0BRdU6mvEmRoIpGm5PWNHxfb+kcuP6W2ojj8Pi/o26URjAcKNTKL9yaKlqyyorC5HvmizOxWhtYOBn5Pd9u3rgqL5r5UyWxsE6fXH/gdnGWG5AjTJopRq3A1qPXIXjkz2403FVWMDR0ZyV6Vn1zJoKjx0oD5eKzQRZJZoWsXhbOd+RqU+RBak+MQJ3GaDYzJPXVj4qIp9C2MUwU69DpZEvd0kvRjUU2A1iJKeU2jips8UxNPa8pry7OCp8QlfrFS4TYmvksk5CjPOyzzWSdOk0c+A/oV8baG2bA8RHQFBsdumXvk2TjhNrHW24qgb46cG84p2rKtJj8gKA9NzdAmjGstsQHxO01VQg8NGY9Lqcb9QQ9hFanE93LxfWRilZuJcxuTiO/Lbu/anAR+J3CFiiPYv/9iynRkSWGMNuG88muBN25AmFooxS7UOdwfbnLnW1GF/jRO4jR1CUYapm3X47Scxrc73GCN5fgchSON78YrA2/cXLFcpzt82Aa24yAYKgzWXGuF1HvFhXly/wu5XGP12/i31UZubnT1qOZ4+QThvXlU9Xv/e5cNNO6P0/RUvD3WQiA8oNRY0GByNjU1CRlBwzyp3ZSXS3zIumz9Zf2DpVTja+4UbrtUvG6k6Hl67hr8V39yYmAhQ83STXV0FDqWmlEYmFl1QABu9YSHHyj1AuTG5ySNK3Ban4bPiS0pd4BQ9LjyhUWanBPuTNb6w1bO/OrPzzoiKEwE7wzLs6Y64HcQFLGIrztKrmQn22e8U6Z43JRnjLOqbau/WbJz8MPmubPKVKBXvVjGn43X9iwWYrxeU/+5YWocmEv0Ansu1+p2NfP6FT0YoQAe6zdFb3fdru8KRqCD/kwTU54J35g6r9qNpV7AP6v1xNfBwa8EzXK1W++lEOEHDrjKI9uSkdxcRJmSKYUxKhkI69jDl3PAdjmfIbx1Kytr5kwhy19L9DWlPWgEzw68nL50qRA6+bjs8HGCQuIlPkGt1q12+iK9jGw9OIu1cdOnf/kcr1sUEuzsvL96XW0ICEOfT0LBU06YFfZLR+hUn+GG4XQZFIpBcENkhCM1nSqKTBkMTwlEbbo28XcWo/FwaiGwkBa3P3L9q2rGcWQ+s3VrwtvhSQYllGYW95HkrtOXQkGmo2A9KbiKOfaVeY6ufhqkPKENTNfvUFDCziJZaVuKzd5idOay9BK/NpYVAkBQhcvuN6LRcMPSw4WwBC4+Ctclivtmt0MGksT6GagUS6SZhQtn5fD3ILaY7AZ+zorJhdJMiThQ+ZOFJIHzdArtsXKiWBdDT/OaH+Clnb6uPUWgV4QLNspDbp8OX3HaebuSj+4KDV/b36o/s3Mn5b3zRh81dklVd97VrfnCgZNvxo6/UZ/hGBFHas9H7OufqQaO9gvP3i6oT9alj58C4lxIbVR5kDm3LUqreRy7Qs6YeW/JOrADu1GPZpFD8d6zWU0ZFokw0TRnFmcOqzH90NuY0jQb7MAtDLa5W1cuR8rQvXXoPKuwqSHFHAx9i2IWBsyNcs8rZwTw9eRWETq1d038KBuT2CRZIl5yOjMQuEt52zb/LBSdULdqPupotIZo16VE/Nb6YyxthxuuY6KHUciCN4mg4TQproeIU0wg/1rAHH38chZxiUzgOfImE4dJ3eVhASqnpTPGU7Eaz1nOWcZiMMtylpPGKyHeb5TTYlWpZmLEPB9roThriOXPfFkQV/qWm1euyrMx5HFT2tTuV4Oc08khtnrcvAjNRNNQdjQlEf6MuqVlxGYyan+4Nu+my6Kp7KD62BdDWe9PFFaddRVPE4pLTtffvnf15K+9TYsyWBK5RONErnIPXLCAK9TfwBwdMWK6saQwRn30wmdnAopByutNvFnsIoeeBYHzpq5LnjZxrs+InLGlWyY7nPFfgbaMLRkxsV7yiHCzy1vW0KBjMtz+Ibt8eD/zhUdbQ8a4yzd2/uNGDVQZfL0WemyJnOr53Kl8pETS5ZE/xbLK8Yz1qPEVIHTnBGgVko5ZzmC2jYwJVDP7fGKTwOjEZaPiHDKnIhl/LQd7fPpkVKLu/IoqttMm7pIZU01bBk23h7spVheEgxGaOwMqVaNTkFOD0WgQWby1rqJG1Dc9bUCJ0DSS+BtC0ROViDPT2ofA18oEBRmX7ewT84sDE3MmqCrWO4s90e3suPZ15UHO/ibewlstRNptmSSd5E4LbzJgwbVlFeST5qWDBWV7UXsSg5ZhyNLn5cJbv7gGMgnhFSv0/Q5gtdn8L+YFVsORAJgvRLwZxgCunGHGDETsx3FRUSfWgD5P9qPXMt92FvqYtmWj/wEAoLe9UFhOKcbXo7c/JB05AID5WiYMvtZa5sFUDkkyXo8Ojj2Inp1xxwD0jD9i9T0tx4m0BB1C/FcZbeL3o2/L7B/NTD4WgbGQyw1CvTfjo58wZWV7Hpz0c9UX2F5m92EiEfE7i/MvbMbDyZdzCW3PjO8buxKAHyvCzoxshR+niBlKuCHj0cDCBdh+F3kkQ/LPAB0MAwGf51rTFyDwoY/JKADYPBEAM0m08fesFrvagmbshG41B8U0fA7EJiXYQP85DBxhc3BsCXPYvNwWzMFz0YTkEQDw9ObMQdh6n4OydolB08BPhmHg/xwG+0BMOEaGwxy2rJgXk0MaBTCOoQW5ys6KTAxWbCGDgJOPCKUHFB//Qzi1S/AhL+BEMajtapOz6gYBfK0c0qG4ErHKcvRqt6oYnIuq4vgKI6tSpLper62pBisTfW0gDgNNQE7JnPXixIgCO1YMZDjxh8FgD6sHL+w5GpfuFeTFyRI63riytbKpRW4E05H52dTJQeGKysJSUoP1I0/ZtZPAcWekVGZvr8AQK2ULuXJtTY5k64qrt7b4OcQA9oG9XYJAJVlRNd0wLdtxPR+XDR5bduw5cOTEmYth+ASGh+b7lNpJoH0/0yIOAdI9x73sMwwp2Lg0xMahrxnalPrVkL6JQTQFcKuMHm2mopSWg5WWR9iP9yFyDkbuKEkPzlGVKPUEDgVrPxPyuOBmS0vOjY2+Y1yuObGurqokkc3xPZz98aIL0oe0nO41uWzbl5LKfeP+vn0EZXGo6UOKkj+lU5Aosl7OlLHcHLpyJBFwLyNHMrRWAwAAAA==') format('woff2'),url(iconfont.woff?t=1581230946722) format('woff'),url(iconfont.ttf?t=1581230946722) format('truetype'),url(iconfont.svg?t=1581230946722#nexmoefont) format('svg')
  }

然后问题又来了，在小尺寸设备，侧边栏收起后的按钮排列方式不怎么好看，于是我进行了如下修改

```css

@media screen and (max-width:599px){ #nexmoe-header .nexmoe-social a { margin: 10px!important; width: 36px!important; height: 36px!important; line-height: 36px !important; } } @media screen and (max-width:1024px){ #nexmoe-header .nexmoe-social a { margin: 10px; width: 45px; height: 45px; line-height: 45px; } }


到这里，社交小部件的修改也算是大功告成了。

## 搜索小部件

这个挺简单的，Copy 下Hexo的样式再加入Typecho的代码即可实现

```css
        #nexmoe-header .nexmoe-search input {
        border: none!important;
        background-color: transparent;
        padding: 20px;
        box-sizing: border-box;
        outline: 0;
    }
    [type=search] {
        -webkit-appearance: textfield;
        outline-offset: -2px;
    }
    button, input {
        overflow: visible;
    }
    button, input, optgroup, select, textarea {
        margin: 0;
        font-family: inherit;
        font-size: 100%;
        line-height: 1.15;
    }
</style>
 <div class="nexmoe-widget-wrap">
	<div class="nexmoe-widget nexmoe-search">
	        <form class="search" method="post" action="./search" role="search" style="
    margin-bottom: 0px;
"> 
            <input type="search" placeholder="搜索" name="s" class="search-input" >
           </div></div></form>

文章目录

这个功能是做的最久的，毕竟太麻烦了。 弄 PHP 之前先把 html 搞来，得到以下代码

    .nexmoe-valign {
        display: -webkit-box!important;
        display: -webkit-flex!important;
        display: -ms-flexbox!important;
        display: flex!important;
        -webkit-box-align: center!important;
        -webkit-align-items: center!important;
        -ms-flex-align: center!important;
        align-items: center!important;
        height: 100%;
    }
        .mdui-tab-indicator {
            display: none;
        }
        .mdui-tab .mdui-tab-active {
        color: #fff;
        background: #f4a7b9;
        opacity: 1;
    }
    .nexmoe-post-right .nexmoe-toc {
        margin-left: 16px;
        width: 240px;
        margin-left: 0px;
        text-align: left;
    }
    .nexmoe-post-right .nexmoe-toc&gt;ol {
        padding-left: 0;
    }
        .nexmoe-post-right .nexmoe-fixed {
        position: fixed;
        z-index: 1000;
        height: 100vh;
        display: inline-block;
        top: 0;
    }
    .nexmoe-post-right {
        margin: 0 -25px;
        text-align: right;
    }
    .nexmoe-post-right .nexmoe-toc li {
        margin: 1em 0;
    }
    .nexmoe-toc a {
        color: rgba(0,0,0,.6);
    }
    .nexmoe-toc * {
        list-style-type: decimal;
        color: rgba(0,0,0,.6);

    }

然后我觉得再去把百度的Typecho目录弄来就ok了，但谁能想到那代码有Bug，还找不到其它的了，于是就自己改了改，具体方法已经写在上篇文章了Typecho无插件实现目录树

function createCatalog($obj) {
    $obj = preg_replace_callback('/<h([1-6])(.*?)>(.*?)<\/h\1>/i', function ($obj) {
        global $catalog;
        global $catalog_count;
        $catalog_count++;
        $catalog[] = array('text' => trim(strip_tags($obj[3])), 'depth' => $obj[1], 'count' => $catalog_count);
        return '<h'.$obj[1].$obj[2].'>'.$obj[3].'</h'.$obj[1].'>';
    }, $obj);
    return $obj;
}

function getCatalog() {
    global $catalog;
    $index = '';
    if ($catalog) {
        $index = '<ul>' . "\n";
        $prev_depth = '';
        $to_depth = 0;
        foreach ($catalog as $catalog_item) {
            $catalog_depth = $catalog_item['depth'];
            if ($prev_depth) {
                if ($catalog_depth == $prev_depth) {
                    $index .= '</li>' . "\n";
                } elseif ($catalog_depth > $prev_depth) {
                    $to_depth++;
                    $index .= '<ul>' . "\n";
                } else {
                    $to_depth2 = ($to_depth > ($prev_depth - $catalog_depth)) ? ($prev_depth - $catalog_depth) : $to_depth;
                    if ($to_depth2) {
                        for ($i = 0; $i < $to_depth2; $i++) {
                            $index .= '</li>' . "\n" . '</ul>' . "\n";
                            $to_depth--;
                        }
                    }
                    $index .= '</li>';
                }
            }
            $index .= '<li><a href="#'. $catalog_item['text'] .'">' . $catalog_item['text'] . '</a>';
            $prev_depth = $catalog_item['depth'];
        }
        for ($i = 0; $i <= $to_depth; $i++) {
            $index .= '</li>' . "\n" . '</ul>' . "\n";
        }
       
            
    }
    echo $index;
}

然后Post.php中进行如下修改

<?php
$content = preg_replace('#<h(.*?)>(.*?)</h(.*?)>#','<h$1 id="$2">$2</h$3>',$this->content);
echo $content;
?>

上文提到的百度上的这个版本我使用的时候添加锚点的地方出现了bug，所以就进行了这些修改。

美化代码高亮

这个代码高亮太丑了，真的太丑了…但是换成prism还要大改，于是就先加了一行

hljs {
      font-family: Consolas,Monaco,'Andale Mono','Ubuntu Mono',monospace;
  }

图片灯箱&相册

这个是Catui的功能，毕竟以前是付费主题，所以就没直接开源放出来，我就先自用啦hhh

预览

预览