handsome主题魔改教程

Raiot

April 27, 2019

2055views

No comments

453 words

技术宅

![demo1][1]

![demo2][2]

改过了之后感觉界面太杂，于是改回来了～

这里使用的是[神代綺凜][3]制作的css。

教程参考[handsome主题魔改教程][4]，笔者对其中css文件进行了更新以及背景图片方面的修改。

## 魔改教程

### Step 1

下载css

<button class="btn m-b-xs btn-primary btn-addon" onclick='window.open("https://kirain.me/usr/themes/handsome/assets/css/handsome.css","_blank")'><i class="glyphicon glyphicon-download-alt"></i>CSS下载</button>

将文件放在 /usr/themes/handsome/assets/css中,文件名为 handsome.css

### Step 2

打开 /usr/themes/handsome/component/header.php,在""下多加一行

修改后：

<link rel="stylesheet" href="<?php echo STATIC_PATH; ?>css/handsome.css?v=1.6.1" type="text/css">
    <link rel="stylesheet" href="<?php echo STATIC_PATH; ?>css/function.min.css?v=<?php echo Handsome::$version.Handsome::$versionTag ?>" type="text/css" />
    <link rel="stylesheet" href="<?php echo STATIC_PATH; ?>css/handsome.min.css?v=<?php echo Handsome::$version.Handsome::$versionTag ?>" type="text/css" />

然后保存。

### Step 3

打开 /usr/themes/handsome/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">

### 大功告成

## 设置魔改背景图片

编辑/usr/themes/handsome/assets/css/handsome.css

在里面替换所注释的链接

[1]: https://images.raiot.me/images/2020/01/28/IMG_20190427_152411.jpg
  [2]: https://images.raiot.me/images/2020/01/28/3629756096.png
  [3]: https://moe.best
  [4]: https://www.caixiaojing.com/Tech-Otakus/handsome.html

Last modification：February 14th, 2020 at 07:23 pm

原创不易，请我杯奶茶吧~

handsome主题魔改教程