MAC风格代码框

插件下载&食用方法：链接

更改css /usr/themes/handsome/assets/css/handsome.min.css

#post-content pre code { /*Mac风格代码框*/
    display:block;
    overflow-x:auto;
    position:relative;
    margin:0;
    padding-left:50px;
}
pre code {  /*Mac风格代码框*/
    position:relative;
    display:block;
    overflow-x:auto;
    margin:4.4px 0.px .4px 1px;
    padding:0;
    max-height:500px;
    padding-left:3.5em
}
.theme-dark code { /*黑暗模式下的行内代码颜色更改*/
    color: #7b7b7b;
    background-color: #3a3a3a;
}

复制后提示

layer下载地址: 链接

  1. 解压后把layer文件夹丢进alioss/下
  2. 添加自定义javascript
document.body.oncopy = function() {layer.msg('复制成功,转载请保留原文链接！');};
  1. 添加尾部HTML代码
<script src="alioss/layer/layer.js"></script>

自定义左侧栏

有一定风险，修改前一定要先备份

文件路径 /usr/themes/handsome/component/aside.php，大概在85行~212行，替换 <div class="line dk hidden-folded"></div>到 <?php endif; ?>之间的内容：

<div class="line dk hidden-folded"></div>
<li class="hidden-folded padder m-t m-b-sm text-muted text-xs">
    <span><?php _me("导航") ?></span>
</li>
<?php
$hideHomeItem = false;
if (!empty(Typecho_Widget::widget('Widget_Options')->asideItems)) {
    $json = '[' . Utils::remove_last_comma(Typecho_Widget::widget('Widget_Options')->asideItems) . ']';
    $asideItems = json_decode($json);
    $asideItemsOutput = "";
    foreach ($asideItems as $asideItem) {
        @$itemName = $asideItem->name;
        @$itemStatus = $asideItem->status;
        @$itemSub = $asideItem->sub;
        if ($itemName === 'home' && strtoupper($itemStatus) === 'HIDE') {
            $hideHomeItem = true;
            continue; //本次循环结束，不再执行下面内容
        }
        $haveSub = false;
        $subListHtml = "";
        //                      print_r($itemSub);
        if (is_array($itemSub)) {
            $haveSub = true;
            $subListHtml .= '<ul class="nav nav-sub dk">';
            foreach ($itemSub as $subItem) {
                $subListHtml .= Content::returnLeftItem($subItem, false, "");
            }
            $subListHtml .= '</ul>';
        }
        $asideItemsOutput .= Content::returnLeftItem($asideItem, $haveSub, $subListHtml);
    }
}
?>
<?php if (!$hideHomeItem) : ?>
    <!--主页-->
    <li>
        <a href="<?php $this->options->rootUrl(); ?>/" class="auto">
            <span class="nav-icon"><i data-feather="home"></i></span>
            <span><?php _me("博客首页") ?></span>
        </a>
    </li>
    <!-- /主页 -->
<?php endif; ?>
<?php echo @$asideItemsOutput ?>
<?php if (@!in_array('component', $this->options->asideSetting)) : ?>
    <!--分类category-->
    <li>
        <a href="https://chrxw.com" class="auto">
            <span class="nav-icon"><i data-feather="gift"></i></span>
            <span><?php _me("一级分类") ?></span>
        </a>
    </li>
    <li <?php echo $class; ?>>
        <a class="auto">
            <span class="pull-right text-muted">
                <i class="fontello icon-fw fontello-angle-right text"></i>
                <i class="fontello icon-fw fontello-angle-down text-active"></i>
            </span>
            <span class="nav-icon"><i data-feather="grid"></i></span>
            <span><?php _me("更多分类") ?></span>
        </a>
        <ul class="nav nav-sub dk">
            <li class="nav-sub-header">
                <a>
                    <span><?php _me("分类") ?></span>
                </a>
            </li>
            <!--二级分类-->
            <li>
                <a href="https://chrxw.com/" class="auto">
                    <span class="nav-icon"><i data-feather="gift"></i></span>
                    <span><?php _me("二级分类") ?></span>
                </a>
            </li>
        </ul>
    </li>
    <!--独立页面pages-->
    <li class="hidden-folded padder m-t m-b-sm text-muted text-xs">
        <span><?php _me("页面") ?></span>
    </li>
    <li class="nav-sub-header">
        <a data-no-instant>
            <span><?php _me("页面") ?></span>
        </a>
    </li>
    <!--友情链接-->
    <li>
        <a class="auto">
            <span class="pull-right text-muted">
                <i class="fontello icon-fw fontello-angle-right text"></i>
                <i class="fontello icon-fw fontello-angle-down text-active"></i>
            </span>
            <span class="nav-icon"><i data-feather="link"></i></span>
            <span><?php _me("友链墙") ?></span>
        </a>
        <ul class="nav nav-sub dk">
            <li class="nav-sub-header">
                <a data-no-instant>
                    <span><?php _me("友链") ?></span>
                </a>
            </li>
            <!--使用links插件，输出全站友链-->
            <?php $mypattern1 = "<li data-original-title=\"{title}\" data-toggle=\"tooltip\" 
data-placement=\"top\"><a href=\"{url}\" target=\"_blank\"><span>{name}</span></a></li>";
            Handsome_Plugin::output($mypattern1, 0, "ten"); ?>
        </ul>
    </li>
    <li>
        <a href="https://chrxw.com/" class="auto">
            <span class="nav-icon"><i data-feather="gift"></i></span>
            <span><?php _me("独立页面") ?></span>
        </a>
    </li>
<?php endif; ?>

导航模板：

<li>
    <a href="链接" class="auto">
        <span class="nav-icon"><i data-feather="图标"></i></span>
        <span><?php _me("名称") ?></span>
    </a>
</li>

挂灯笼,头像优化(合并的css)

上传了 dl.css到 /usr/themes/handsome/assets/css

编辑 /usr/themes/handsome/component/header.php <body>后插入2个div灯笼

<div class="deng-box" id="deng-box">
    <div class="deng">
        <div class="xian"></div>
        <div class="deng-a">
            <div class="deng-b"><div class="deng-t">福</div></div>
        </div>
        <div class="shui shui-a"><div class="shui-c"></div><div class="shui-b"></div></div>
    </div>
</div>
<div class="deng-box1" id="deng-box1">
     <div class="deng">
        <div class="xian"></div>
        <div class="deng-a">
            <div class="deng-b"><div class="deng-t">福</div></div>
        </div>
        <div class="shui shui-a"><div class="shui-c"></div><div class="shui-b"></div></div>
    </div>
</div>

本地css静态资源引入css文件

<!-- 灯笼 -->
<link rel="stylesheet" href="<?php echo STATIC_PATH; ?>css/CDN/dl.css?v=<?php echo Handsome::version . Handsome::$versionTag ?>" type="text/css"/>

点击出心

上传了 heart.js到 /usr/themes/handsome/assets/js

编辑 /usr/themes/handsome/component/footer.php 引入js

<!--爱心js-->
<script src="<?php echo STATIC_PATH ?>js/<?php Utils::getFileName("heart.js") ?>?v=<?php echo Handsome::version.Handsome::$versionTag
    ?>"></script>

用自定义字段增加关键词

文章添加keywords自定义字段

编辑 /usr/themes/handsome/component/header.php增加

此处内容需要评论回复后（审核通过）方可阅读。

版权防君子

上传了 copyright.js到 /usr/themes/handsome/assets/js

编辑 /usr/themes/handsome/component/footer.php 引入js

<!--防嫖js-->
<script src="<?php echo STATIC_PATH ?>js/<?php Utils::getFileName("copyright.js") ?>?v=<?php echo Handsome::version.Handsome::$versionTag
    ?>"></script>

全站资源ALIOSS引入

mac代码风格

  • 复制整个插件目录到阿里云oss
  • /usr/plugins/CodePrettify/Plugin.php里public static function header()更改引入css URL
public static function header() {
       $style = Helper::options()->plugin('CodePrettify')->code_style;
       // $cssUrl = Helper::options() -> rootUrl . '/usr/plugins/CodePrettify/static/styles/' . $style;
       $cssUrl = 'https://silencetime.oss-cn-guangzhou.aliyuncs.com/usr/plugins/CodePrettify/static/styles/' . $style;
       echo '<link rel="stylesheet" type="text/css" href="' . $cssUrl . '" />';
   }
  • /usr/plugins/CodePrettify/Plugin.php里public static function footer()更改引入js URL
  • 后来发现这个js必须和html同源,所以只能本地, 不然报错, JS还是本地加载
public static function footer() {
       // $jsUrl = Helper::options() -> rootUrl . '/usr/plugins/CodePrettify/static/prism.js';
       // $jsUrl_clipboard = Helper::options() -> rootUrl . '/usr/plugins/CodePrettify/static/clipboard.min.js';
       $jsUrl = 'https://silencetime.oss-cn-guangzhou.aliyuncs.com/usr/plugins/CodePrettify/static/prism.js';
       $jsUrl_clipboard = 'https://silencetime.oss-cn-guangzhou.aliyuncs.com/usr/plugins/CodePrettify/static/clipboard.min.js';
       $showLineNumber = Helper::options()->plugin('CodePrettify')->showLineNumber;

Pio看板娘

  • 复制整个插件目录到阿里云oss
  • /usr/plugins/Pio/Plugin.php里public static function header()更改引入css URL
  • 需要调用API，已取消上oss
public static function header(){
      // echo("<link href='" . Helper::options() -> pluginUrl . "/Pio/static/pio.css' rel='stylesheet' type='text/css'/>\n");
      echo("<link href='https://silencetime.oss-cn-guangzhou.aliyuncs.com/usr/plugins/Pio/static/pio.css' rel='stylesheet' type='text/css'/>\n");
  }
  • // 读取模型文件夹 更改地址
  • // 生成载入器 更改地址
  • /usr/plugins/CodePrettify/Plugin.php里public static function footer()更改引入js URL
//差不多结束的地方
 echo "<script src='https://silencetime.oss-cn-guangzhou.aliyuncs.com/usr/plugins/Pio/static/l2d.js'></script>" . "\n";
 echo "<script src='https://silencetime.oss-cn-guangzhou.aliyuncs.com/usr/plugins/Pio/static/pio.js'></script>" . "\n";
 echo $loader;
  • 增加了pio的配置文件

此处内容需要评论回复后（审核通过）方可阅读。

  • 增加pio回调函数
pio.init(true)
  • 增加隐藏和显示
#hide-l2d-btn {
    display: inline-block;
    position: absolute;
    top: 25px;
    right: 25px;
    font-size: 1em;
    line-height: 1em;
    border: 1px solid #777;
    padding: 4px 6px;
    border-radius: 50%;
    color: #1d1d1d;
    background: #cccccc;
    opacity: 0;
    cursor: pointer;
}
.pio-container:hover #hide-l2d-btn {
    opacity: 1;
}
#show-l2d-btn {
    position: fixed;
    bottom: 0;
    right: 20px;
    padding: 4px 6px;
    background: #000;
    color: #cacaca;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    cursor: pointer;
}

<!--增加隐藏看板娘-->
<div id="show-l2d-btn" style="display:none;">显示看板娘</div>
<script>
    $(document).ready(function(){
        $("#hide-l2d-btn").click(function(){
            $(".pio-container").hide(1000);
            $("#show-l2d-btn").show(1000);
        });
        $("#show-l2d-btn").click(function(){
            $(".pio-container").show(1000);
            $("#show-l2d-btn").hide();
        });
    });
</script>
<!--主配置文件Plugin.php 大约181行 更改为 -->
echo str_replace(array("{position}", "{canvas}"), array($position, $canvas),
            '<div class="pio-container{position}"><div class="pio-action"></div>{canvas}<span id="hide-l2d-btn"><i data-feather="x"></i></span></div>'
        );
最后修改：2021 年 02 月 05 日
© 允许规范转载
如果觉得我的文章对你有用，请随意赞赏