记录备忘更改主题Handsome

博主：时光假寐
发布时间：2021 年 01 月 18 日
1257 次浏览
暂无评论
1030字数
分类：建站日志

### MAC风格代码框

插件下载&食用方法：[链接](https://github.com/Xcnte/Code-Prettify-for-typecho)
</div>

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

```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下载地址: [链接](https://layer.layui.com/)
</div>

1. 解压后把`layer`文件夹丢进alioss`/`下
2. 添加自定义javascript

```javascript
document.body.oncopy = function() {layer.msg('复制成功,转载请保留原文链接！');};
```

3. 添加尾部HTML代码

```html
<script src="alioss/layer/layer.js"></script>
```

### 自定义左侧栏

有一定风险，修改前一定要先备份
</div>
文件路径 `/usr/themes/handsome/component/aside.php`，大概在85行~212行，替换 `<div class="line dk hidden-folded"></div>`到 `<?php endif; ?>`之间的内容：

```php
<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)) : ?>
    
    <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>
    
    <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>
            
            <?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; ?>
```

导航模板：

```php
<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灯笼

```html
<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文件

```html

<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

```html

<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`增加

<div class="hideContent">此处内容需要评论回复后（审核通过）方可阅读。</div>

### 版权防君子

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

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

```html

<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

```php
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还是本地加载

```php
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

```php
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

```php
//差不多结束的地方
 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的配置文件

---

<div class="hideContent">此处内容需要评论回复后（审核通过）方可阅读。</div>

* 增加pio回调函数

```javascript
pio.init(true)
```

* 增加隐藏和显示

```css
#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;
}

```

```js

<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>
```

```html

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 日

如果觉得我的文章对你有用，请随意赞赏

发表评论取消回复
使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

评论 *

私密评论

名称 *

🎲

邮箱 *

地址

记录备忘更改主题Handsome

时光假寐 • 2021 年 01 月 18 日

### MAC风格代码框

插件下载&食用方法：[链接](https://github.com/Xcnte/Code-Prettify-for-typecho)
</div>

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

### 复制后提示

layer下载地址: [链接](https://layer.layui.com/)
</div>

1. 解压后把`layer`文件夹丢进alioss`/`下
2. 添加自定义javascript

```javascript
document.body.oncopy = function() {layer.msg('复制成功,转载请保留原文链接！');};
```

3. 添加尾部HTML代码

```html
<script src="alioss/layer/layer.js"></script>
```

### 自定义左侧栏

导航模板：

```php
<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灯笼

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

```html

<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

```html

<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`增加

<div class="hideContent">此处内容需要评论回复后（审核通过）方可阅读。</div>

### 版权防君子

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

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

```html

<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

* `/usr/plugins/CodePrettify/Plugin.php`里`public static function footer()`更改引入js URL
* 后来发现这个js必须和html同源,所以只能本地, 不然报错, JS还是本地加载

**Pio看板娘**

* 复制整个插件目录到阿里云oss
* `/usr/plugins/Pio/Plugin.php`里`public static function header()`更改引入css URL
* 需要调用API，已取消上oss

* // 读取模型文件夹 更改地址
* // 生成载入器 更改地址
* `/usr/plugins/CodePrettify/Plugin.php`里`public static function footer()`更改引入js URL

* 增加了pio的配置文件

---

<div class="hideContent">此处内容需要评论回复后（审核通过）方可阅读。</div>

* 增加pio回调函数

```javascript
pio.init(true)
```

* 增加隐藏和显示

```

记录备忘更改主题Handsome

发表评论取消回复
使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

揭秘亚马逊Amazon最新A+页面添加apng动态图片

[爬虫]亚马逊amazon产品、评论、ASIN详情爬虫，产品调研

亚马逊关键词推荐和查找工具Amazon Keyword Suggestion Tool

Awesome amazon seller tools - 亚马逊运营工具

统计亚马逊商品历史价格历史排名插件

Opencart支持WebP图片格式插件

在openwrt或群晖中用docker快速部署宝塔面板

CSS背景图片和背景颜色融合

Docker一个node容器后，使用puppeteer爬虫框架时遇到的坑

亚马逊站外引流 - Deal系列（2）- [Kinja Deals]

记录备忘更改主题Handsome

发表评论 取消回复 使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

记录备忘更改主题Handsome

发表评论取消回复
使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款