仿造 lolico.moe 主题小记

复制并使用魔改handsome主题的CSS文件

1. 在 moe.best 主页打开console - Elements，可查询到作者的魔改CSS文件 handsome.css?v=1.5.7 
2. 打开CSS文件，将其格式化并全部复制下来，保存为 handsome-hack.css 。
3. 上传至服务器 /app/blog_27/usr/themes/handsome/assets/css 目录。
4. 在博客后台的handsome主题设置页，引入该外联样式。

<link rel="stylesheet" type="text/css" href="https://277.nyaasu.top/usr/themes/handsome/assets/css/handsome-hack.css" />

原外观的一些微调

1. 关闭炫酷透明模式
2. 关闭盒子模型
3. 头图样式选择大头图
4. 主题色调选择 info-info-dark

侧边栏的颜色修改-black~dark

外观设置内文字修改

打开主题根目录下的 functions.php，找到183行，将 '11' => 的black改为dark，如下所示。

$themetype = new Radio('themetype',
    array(
        '0' => _t('1. black-white-black   '),
        '1' => _t('2. dark-white-dark &emsp;&emsp;</br>'),
        '2' => _t('3. white-white-black &emsp;&emsp;'),
        '3' => _t('4. primary-white-dark &emsp;&emsp;</br>'),
        '4' => _t('5. info-white-black &emsp;&emsp;'),
        '5' => _t('6. success-white-dark &emsp;&emsp;</br>'),
        '6' => _t('7. danger-white-dark &emsp;&emsp;</br>'),
        '7' => _t('8. black-black-white &emsp;&emsp;</br>'),
        '8' => _t('9. dark-dark-light &emsp;&emsp;'),
        '9' => _t('10. info-info-light &emsp;&emsp;</br>'),
        '10' => _t('11. primary-primary-dark &emsp;&emsp;'),
        '11' => _t('12. info-info-dark &emsp;&emsp;</br>'),
        '12' => _t('13. success-success-dark &emsp;&emsp;'),
        '13' => _t('14. danger-danger-dark &emsp;&emsp;</br>')
    ),

（以上方法通过是通过VSCode在主题文件夹内全文搜索 'info-info' 发现此文件并实现）

实际效果修改

打开主题 ./lib 目录下的 content.php，找到199行，将 case 11 的bg-black改为bg-dark，如下所示。

public static function selectAsideStyle(){
    $html = "";
    $options = mget();
    switch($options->themetype){
        case 0: $html .= '<aside id="aside" class="app-aside hidden-xs bg-black">';break;
        case 1: $html .= '<aside id="aside" class="app-aside hidden-xs bg-dark">';break;
        case 2: $html .= '<aside id="aside" class="app-aside hidden-xs bg-black">';break;
        case 3: $html .= '<aside id="aside" class="app-aside hidden-xs bg-dark">';break;
        case 4: $html .= '<aside id="aside" class="app-aside hidden-xs bg-black">';break;
        case 5: $html .= '<aside id="aside" class="app-aside hidden-xs bg-dark">';break;
        case 6: $html .= '<aside id="aside" class="app-aside hidden-xs bg-dark">';break;
        case 7: $html .= '<aside id="aside" class="app-aside hidden-xs bg-white b-r">';break;
        case 8: $html .= '<aside id="aside" class="app-aside hidden-xs bg-light">';break;
        case 9: $html .= '<aside id="aside" class="app-aside hidden-xs bg-light dker b-r">';break;
        case 10: $html .= '<aside id="aside" class="app-aside hidden-xs bg-dark">';break;
        case 11: $html .= '<aside id="aside" class="app-aside hidden-xs bg-dark">';break;
        case 12: $html .= '<aside id="aside" class="app-aside hidden-xs bg-dark">';break;
        case 13: $html .= '<aside id="aside" class="app-aside hidden-xs bg-dark">';break;

    }
    return $html;
}

（以上方法通过是通过VSCode在主题文件夹内全文搜索 'selectAsideStyle()' 发现此文件并实现）

背景修改

加入背景div块

打开主题 ./component 目录下的 headnav.php，在第一行后加一行，加入 <div id="bg"></div> ，如下所示。

<?php if (!defined('__TYPECHO_ROOT_DIR__')) exit; ?>
<div id="bg"></div>
<header id="header" class="app-header navbar" role="menu">

（以上方法通过是通过阅读lolico.moe网站源码，并用VSCode在主题文件夹内全文搜索 '' 发现此文件并实现）

更改背景文件与样式

打开刚才创建的 hangsome-hack.css，全文搜索 'http' 。替换掉原地址即可。
两个图片链接分别对应PC和移动端适应模式的背景。

字体颜色修改

全文件搜索 '#58666e' ，在handsome.min.css内找到body对应的 color: #58666e ，替换为 '#24292e' 。

主页跳转bug修改

（必须要点击标题才能跳转文章内容的bug）

全文件搜索 '' ， 在 ./lib 目录下的 content.php 的 879行 下回车加入一行链接，如下所示

</div><!--text-muted-->
<a href="{$parameterArray['linkUrl']}" class="ahover"></a>
</div><!--post-meta wrapper-lg-->