前言

前段时间经常有小伙伴来问本站Handsome是如何美化的 特此在这里写一个集合笔记


预览


评论展示

教程


顶栏天气

教程


组成栏添加选项

教程

1.需修改文件usr/themes/handsome/component/aside.php

2.在注释 <!--独立页面pages-->上方或者合适位置添加以下代码即可(以下代码为我的博客的示例代码,请注意修改)

<!--站点分类-->
<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>
    <i class="glyphicon glyphicon-cog"></i>
    <span>站点</span></a>
  <ul class="nav nav-sub dk">
    <li class="nav-sub-header">
      <a data-no-instant="">
        <span>站点</span></a>
    </li>
    <!--网站-->
    <li>
      <a href="https://img.5sir.cn">
        <i class="glyphicon glyphicon-picture icon text-md"></i>
        <span>图床</span></a>
    </li>
    <li>
      <a href="https://download.5sir.cn">
        <i class="glyphicon glyphicon-paperclip"></i>
        <span>资源</span></a>
    </li>
    <li>
      <a href="https://5sir.cn/funny/">
        <i class="glyphicon glyphicon-ice-lolly-tasted"></i>
        <span>滑稽</span></a>
    </li>
  </ul>
</li>
<!--站点分类-->

背景动画

教程

1.下载JS文件放入你网站目录

传送门:canvas-nest.js

2.Handsome主题后台--更改外观--设置外观--开发者设置--自定义输出body尾部的HTML代码内添加以下代码即可(注意地址改成自己的引入链接)

<script type="text/javascript" color="128,128,128" src="https://5sir.cn/js/canvas-nest.js"></script>

一言居中 删除网站名称

教程

1.删除约33行的以下代码

<h1 class="m-n font-thin h3 text-black l-h"><?php $this->options->title(); ?></h1>

2.将<header class="bg-light lter b-b wrapper-md">修改为<header class="bg-light lter b-b wrapper-md" style="text-align:center">即可


最后修改:2019 年 05 月 05 日 02 : 55 PM
如果觉得我的文章对你有用,请随意赞赏