• 本文章说实话全是从其他地方抄的,主要是想保留在自己的博客,到时候方便找。
  • 文章尾部会添加抄的原博客信息。

1:IIS开启伪静态

给博客做的第一个修改就是给Windows服务器用IIS的博客整了个伪静态

以前的链接都是xxx.com/index.php/archives/uid/的格式,伪静态可以伪装成xxx.com/uid.html

这样就会显得更美观,更好看,也更方便收录(虽然也不会被收录)

IIS有一个URL重写的插件,需要安装这个插件,再开启静态。(该程序支持IIS7-IIS10)

安装完插件在这里,双击进去


选择导入规则,把下面的规则导入进去

<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule ^(.*)$ index.php [L]
</IfModule>

把规则导入应用后,在后台设置开启伪静态就行了。

2:鼠标经过头像转动并放大

  • 将以下代码加入自定义CSS
/*头像呼吸光环和鼠标悬停旋转放大*/
.img-full {
    width: 100px;
    border-radius: 50%;
    animation: light 4s ease-in-out infinite;
    transition: 0.5s;
}
.img-full:hover {
    transform: scale(1.15) rotate(720deg);
}

@keyframes light {
    0% {
        box-shadow: 0 0 4px #f00;
    }

    25% {
        box-shadow: 0 0 16px #0f0;
    }

    50% {
        box-shadow: 0 0 4px #00f;
    }

    75% {
        box-shadow: 0 0 16px #0f0;
    }

    100% {
        box-shadow: 0 0 4px #f00;
    }
}

3:Mac风格代码高亮

插件最新更新时间:2020/07/23(修复跨域请求、代码优化、新增多种语言支持

插件下载

handsome.min.css更新时间:2020/07/23(更新至handsome主题7.0

第 1 步:下载本插件,解压,放到 usr/plugins/ 目录中;

第 2 步:文件夹名改为 CodePrettify

第 3 步:登录管理后台,激活插件
(请勿与其它同类插件同时启用,以免互相影响)

第 4 步:设置:选择主题风格,是否显示行号等。

第 5 步:修改(替换)/usr/themes/handsome/assets/css/下的handsome.min.css文件

文件替换

由于handsome主题最新加入授权,旧版本必须更新至最新版,所以这里就不提供旧版 css文件,从5.3.1版本开始

Handsome 7.0.0 版本:
提取码:1122

Handsome 6.0.0 版本:
提取码:1122

Handsome 5.3.1 版本:
提取码:a0d8

Pjax

如果你的网站有开启Pjax(handsome主题默认开启)

请把以下代码添加到回调函数的地方,在你使用的主题设置里看看

Handsome主题为例:

  1. 主题 --> 设置外观 --> Pjax --> PJAX回调函数
if (typeof Prism !== 'undefined') {
var pres = document.getElementsByTagName('pre');
                for (var i = 0; i < pres.length; i++){
                    if (pres[i].getElementsByTagName('code').length > 0)
                        pres[i].className  = 'line-numbers';}
Prism.highlightAll(true,null);}

若插件里设置不显示行号,PJAX函数要改为

if (typeof Prism !== 'undefined') {
Prism.highlightAll(true,null);}

使用方法

\```php(语言类型选填)
<?php echo 'hello jrotty!'; ?>
\```
删除上边代码中的\

若不填写语言类型
效果如下:

<?php echo 'hello jrotty!'; ?>  //此代码高亮样式可在 主题外观设置-->代码高亮的风格里自行设置

插件说明

可设置项
1. 选择高亮主题风格 (官方提供的 6 种风格切换,本人自己新增了三种(Mac风格))

  • coy.css
  • dark.css
  • BlackMac.css(黑色Mac风格)
  • GrayMac.css (默认选中:Mac风格(灰色))
  • WhiteMac.css(白色Mac风格)
  • twilight.css
  • tomorrow-night.css

2. 是否在代码左侧显示行号 (默认开启)

4:底部页脚标签样式

  • 将以下代码添加至后台主题设置自定义CSS
/*底部页脚*/
.github-badge {
  display: inline-block;
  border-radius: 4px;
  text-shadow: none;
  font-size: 12px;
  color: #fff;
  line-height: 15px;
  background-color: #abbac3;
  margin-bottom: 5px
}

.github-badge .badge-subject {
display: inline-block;
background-color: #4d4d4d;
padding: 4px 4px 4px 6px;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px
}

.github-badge .badge-value {
display: inline-block;
padding: 4px 6px 4px 4px;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px
}

.github-badge .bg-blue {
background-color: #007ec6
}

.github-badge .bg-orange {
background-color: #ffa500
}

.github-badge .bg-red {
background-color: #f00
}

.github-badge .bg-green {
background-color: #3bca6e
}

.github-badge .bg-purple {
background-color: #ab34e9
}
  • 将以下代码添加至后台主题设置博客底部左侧信息,信息修改成自己的
<div class="github-badge">
<a href="./" title="©2019 Alvin">
<span class="badge-subject">Copyright</span><span class="badge-value bg-blue">©2019 Alvin</span>
</a>
</div>
 | 
<div class="github-badge">
<a href="http://www.miitbeian.gov.cn/" target="_blank" title="粤ICP备 18135867号" style="cursor: url("/usr/plugins/HoerMouse/static/image/dew/link.cur"), pointer;">
<span class="badge-subject">粤ICP备</span><span class="badge-value bg-green">18135867号</span>
</a>
</div>
  • 将以下代码添加至后台主题设置 博客底部右侧信息
<div class="github-badge">
<a href="http://www.typecho.org" target="_blank" title="由 Typecho 强力驱动" style="cursor: url("/usr/plugins/HoerMouse/static/image/dew/link.cur"), pointer;">
<span class="badge-subject">Powered</span><span class="badge-value bg-blue">Typecho</span>
</a>
</div>
 |  
<div class="github-badge">
<a href="https://www.ihewro.com/archives/489/" target="_blank" title="站点使用 handsome 主题,作者:友人C" style="cursor: url("/usr/plugins/HoerMouse/static/image/dew/link.cur"), pointer;">
<span class="badge-subject">Theme</span><span class="badge-value bg-orange">Handsome</span>
</a>
</div>
  • 添加完成后,需要去 handsome\component\footer.php删除原有声明代码,以下为删除完后的效果(大概1~12行)
<?php if (!defined('__TYPECHO_ROOT_DIR__')) exit; ?>
<?php Content::outputCommentJS($this, $this->security); ?>
</div><!-- /content -->
  <footer id="footer" class="app-footer" role="footer">
    <div class="wrapper bg-light">
      <span class="pull-right hidden-xs text-ellipsis">
      <?php $this->options->BottomInfo(); ?>
  
      </span>
        <span class="text-ellipsis"><?php
            $this->options->BottomleftInfo(); ?></span>
    </div>
      <!--可以去除主题版权信息,最好保留版权信息或者添加主题信息到友链,谢谢你的理解-->

5:炫彩鼠标插件

  • 下载本插件,解压放到usr/plugins/目录中
  • 登录管理后台,激活并设置插件

HoerMouse:

6:评论获取用户信息插件

  • 下载本插件,解压到usr/plugins/目录中
  • 进入网站后台-控制台-插件-激活插件
  • 此插件只适用于Handsome主题,未对其它主题优化!!!
  • 修改component/comments.php文件,大概第60~80行处添加代码
<?php UserAgent_Plugin::get_useragent($comments->agent,$comments->ip); ?>

修改前

<span class="comment-author vcard">
    <b class="fn"><?php echo $author; ?></b><?php echo $Identity; ?>
</span>

修改后

<span class="comment-author vcard">
    <b class="fn"><?php echo $author; ?></b><?php echo $Identity; ?><?php UserAgent_Plugin::get_useragent($comments->agent,$comments->ip); ?>
</span>

Typecho开启CDN后,可能无法获取访客真实IP,只能取得CDN节点IP,为此可以在网站的根目录的config.inc.php插入下面的代码:

/** 防止CDN造成无法获取客户真实IP地址 */
if(isset($_SERVER['HTTP_X_FORWARDED_FOR'])) 
{
    $list = explode(',',$_SERVER['HTTP_X_FORWARDED_FOR']);
    $_SERVER['REMOTE_ADDR'] = $list[0];
}

UserAgent:

7:博主介绍闪字特效

  • 复制下方代码添加至后台主题设置博主的介绍即可
  • 介绍文字请在代码中修改
<!--博主介绍的闪字特效-->
<span class="text-muted text-xs block"><div id="chakhsu"></div> <script> var chakhsu = function (r) {function t() {return b[Math.floor(Math.random() * b.length)]} function e() {return String.fromCharCode(94 * Math.random() + 33)} function n(r) {for (var n = document.createDocumentFragment(), i = 0; r > i; i++) { var l = document.createElement("span"); l.textContent = e(), l.style.color = t(), n.appendChild(l) } return n}function i() {var t = o[c.skillI]; c.step ? c.step-- : (c.step = g, c.prefixP < l.length ? (c.prefixP >= 0 && (c.text += l[c.prefixP]), c.prefixP++) : "forward" === c.direction ? c.skillP < t.length ? (c.text += t[c.skillP], c.skillP++) : c.delay ? c.delay-- : (c.direction = "backward", c.delay = a) : c.skillP > 0 ? (c.text = c.text.slice(0, -1), c.skillP--) : (c.skillI = (c.skillI + 1) % o.length, c.direction = "forward")), r.textContent = c.text, r.appendChild(n(c.prefixP < l.length ? Math.min(s, s + c.prefixP) : Math.min(s, t.length - c.skillP))), setTimeout(i, d) } /*以下内容自定义修改*/ var l = "", o = ["牛逼的人,不需要介绍。" ].map(function (r) {return r + ""}), a = 2, g = 1, s = 5, d = 75, b = ["rgb(110,64,170)", "rgb(150,61,179)", "rgb(191,60,175)", "rgb(228,65,157)", "rgb(254,75,131)", "rgb(255,94,99)", "rgb(255,120,71)", "rgb(251,150,51)", "rgb(226,183,47)", "rgb(198,214,60)", "rgb(175,240,91)", "rgb(127,246,88)", "rgb(82,246,103)", "rgb(48,239,130)", "rgb(29,223,163)", "rgb(26,199,194)", "rgb(35,171,216)", "rgb(54,140,225)", "rgb(76,110,219)", "rgb(96,84,200)"], c = {text: "", prefixP: -s, skillI: 0, skillP: 0, direction: "forward", delay: a, step: g}; i() }; chakhsu(document.getElementById('chakhsu')); </script> </span> </span>

8:AliceStyle美化插件

这个插件里面有一些功能和上面的有重复,做了上面那些也可以用,但是要记得关闭一些功能。

插件地址:

以上信息有借鉴博客

Last modification:July 24th, 2020 at 12:52 am
如果觉得我的文章对你有用,请随意赞赏