前言:此篇博文极为粗糙,不建议新手参考。

1. Typecho 博客搭建教程

以下这两篇对照着看几遍就大概知道思路了

https://blog.csdn.net/qq_36923257/article/details/112688395

https://www.moeor.com/24.html

关于主题:去搜索你喜欢的主题下载,然后上传根目录/usr/themes/目录里面,在后台外观设置中更换。各主题教程以及配置教程都有主题文档。

关于插件:插件安装是将下载的插件上传根目录/usr/plugin/ 目录里面,在后台设置中启用插件,设置插件。

后台管理:你的后台面板地址就是你的域名/admin,用设置的用户名和密码登录即可。

建站不易,在此祝贺各位建站成功,加油!

以下为本站Handsome主题的特效魔改,版本为8.2.0,如果你还没有此主题,请自行购买。

2. 鼠标点击文字特效

将以下代码放在主题的handsome/component/footer.php中的</body>之前即可。

//字体自行修改
<script type="text/javascript"> 
/* 鼠标特效 */
var a_idx = 0; 
jQuery(document).ready(function($) { 
    $("body").click(function(e) { 
        var a = new Array("富强", "民主", "文明", "和谐", "自由", "平等", "公正" ,"法治", "爱国", "敬业", "诚信", "友善"); 
        var $i = $("<span/>").text(a[a_idx]); 
        a_idx = (a_idx + 1) % a.length; 
        var x = e.pageX, 
        y = e.pageY; 
        $i.css({ 
            "z-index": 999999999999999999999999999999999999999999999999999999999999999999999, 
            "top": y - 20, 
            "left": x, 
            "position": "absolute", 
            "font-weight": "bold", 
            "color": "#ff6651" 
        }); 
        $("body").append($i); 
        $i.animate({ 
            "top": y - 180, 
            "opacity": 0 
        }, 
        1500, 
        function() { 
            $i.remove(); 
        }); 
    }); 
}); 
</script>

本站使用点击爱心特效,代码直接放在后台-更改外观-设置外观-开发者设置-自定义JavaScript,代码如下:

// 点击爱心
! function (e, t, a) {
  function n() {
    c(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"), o(), r()
  }
  function r() {
    for (var e = 0; e < d.length; e++) d[e].alpha <= 0 ? (t.body.removeChild(d[e].el), d.splice(e, 1)) : (d[e].y--, d[e].scale += .004, d[e].alpha -= .013, d[e].el.style.cssText = "left:" + d[e].x + "px;top:" + d[e].y + "px;opacity:" + d[e].alpha + ";transform:scale(" + d[e].scale + "," + d[e].scale + ") rotate(45deg);background:" + d[e].color + ";z-index:99999");
    requestAnimationFrame(r)
  }
  function o() {
    var t = "function" == typeof e.onclick && e.onclick;
    e.onclick = function (e) {
      t && t(), i(e)
    }
  }
  function i(e) {
    var a = t.createElement("div");
    a.className = "heart", d.push({
      el: a,
      x: e.clientX - 5,
      y: e.clientY - 5,
      scale: 1,
      alpha: 1,
      color: s()
    }), t.body.appendChild(a)
  }
  function c(e) {
    var a = t.createElement("style");
    a.type = "text/css";
    try {
      a.appendChild(t.createTextNode(e))
    } catch (t) {
      a.styleSheet.cssText = e
    }
    t.getElementsByTagName("head")[0].appendChild(a)
  }
  function s() {
    return "rgb(" + ~~(255 * Math.random()) + "," + ~~(255 * Math.random()) + "," + ~~(255 * Math.random()) + ")"
  }
  var d = [];
  e.requestAnimationFrame = function () {
    return e.requestAnimationFrame || e.webkitRequestAnimationFrame || e.mozRequestAnimationFrame || e.oRequestAnimationFrame || e.msRequestAnimationFrame || function (e) {
      setTimeout(e, 1e3 / 60)
    }
  }(), n()
}(window, document);

3. 彩色标签云

打开后台-更改外观-设置外观-开发者设置-选择好需要的颜色粘贴至自定义JavaScript即可。

<!--纯黑标签云-->
let tags = document.querySelectorAll("#tag_cloud-2 a");
let colorArr = ["#000000", "#000000", "#000000", "#000000", "#000000", "#000000"];
tags.forEach(tag => {
    tagsColor = colorArr[Math.floor(Math.random() * colorArr.length)];
    tag.style.backgroundColor = tagsColor;
});

<!--银白标签云-->
let tags = document.querySelectorAll("#tag_cloud-2 a");
let colorArr = ["#C0C0C0", "#C0C0C0", "#C0C0C0", "#C0C0C0", "#C0C0C0", "#C0C0C0"];
tags.forEach(tag => {
    tagsColor = colorArr[Math.floor(Math.random() * colorArr.length)];
    tag.style.backgroundColor = tagsColor;
});

<!--淡蓝标签云-->
let tags = document.querySelectorAll("#tag_cloud-2 a");
let colorArr = ["#ADD8E6", "#ADD8E6", "#ADD8E6", "#ADD8E6", "#ADD8E6", "#ADD8E6"];
tags.forEach(tag => {
    tagsColor = colorArr[Math.floor(Math.random() * colorArr.length)];
    tag.style.backgroundColor = tagsColor;
});

<!--彩色标签云-->
let tags = document.querySelectorAll("#tag_cloud-2 a");
let colorArr = ["#428BCA", "#AEDCAE", "#ECA9A7", "#DA99FF", "#FFB380", "#D9B999"];
tags.forEach(tag => {
    tagsColor = colorArr[Math.floor(Math.random() * colorArr.length)];
    tag.style.backgroundColor = tagsColor;
});

<!--天蓝标签云-->
let tags = document.querySelectorAll("#tag_cloud-2 a");
let colorArr = ["#00BFFF", "#00BFFF", "#00BFFF", "#00BFFF", "#00BFFF", "#00BFFF"];
tags.forEach(tag => {
    tagsColor = colorArr[Math.floor(Math.random() * colorArr.length)];
    tag.style.backgroundColor = tagsColor;
});

3. 文章尾部添加版权信息

Handsome/post.php<?php echo Content::exportPayForAuthors(); ?><?php endif; ?>中添加以下内容(Handsome8.2.0版本在87行)

<!--版权声明开始-->
<div class="entry-content l-h-2x">
      <div style="border-top: 2px dotted #8e8e8e96;height: 0px;margin: 20px 0px;text-align: center;width: 100%;">
         <span style="background-color: #23b7e5;color: #fff;padding: 6px 10px;position: relative;top: -14px;border-radius: 14px;">END</span>
       </div>
        <div style="padding: 10px;background: rgba(220, 220, 220, 0.22);font-size: 13px;border-left: 3px solid;text-align: left;">
          <span>本文作者:<a href="<?php $this->author->permalink(); ?>" rel="author"> <?php $this->author(); ?></a><br></span>
         <span>文章标题:<a href="<?php $this->permalink() ?>"><?php $this->title() ?></a><br></span>
         <span>本文地址:<a href="<?php $this->permalink() ?>"><?php $this->permalink() ?></a><br></span>
        <span>版权说明:若无注明,本文皆<a href="<?php $this->options->siteUrl(); ?>" target="_blank" data-original-title="<?php $this->options->title() ?>"><?php $this->options->title() ?></a>原创,转载请保留文章出处。</span>
       </div>
  </div>
<!--版权声明结束-->

4. 页脚信息美化(等到备案出来后

删除Handsome/component/footer.php原来的底部版权 ,也就是删除如下代码:

Powered by <a target="_blank" href="http://www.typecho.org">Typecho</a> | Theme by <a target="_blank" href="https://www.ihewro.com/archives/489/">handsome</a>

以及下一行中的,不要删除多了

© <?php echo date("Y"); ?> Copyright

添加以下代码到主题设置->开发者设置->自定义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">
  <span class="badge-subject">Copyright</span>
  <a href="./" target="_blank">
    <span class="badge-value bg-blue">©2021 Dragon Add</span></a>
</div> | 
<div class="github-badge">
  <span class="badge-subject">XICP备</span>
  <a href="http://beian.miit.gov.cn/" target="_blank">
    <span class="badge-value bg-green">xxxxxxx号-1</span></a>
</div>

关于左侧信息,请认真阅读代码,自行修改属于自己的内容。

<!-- 博客底部右侧信息 -->
<div class="github-badge">
  <span class="badge-subject">Powered by</span>
  <a href="http://www.typecho.org" target="_blank">
    <span class="badge-value bg-blue">Typecho</span></a>
</div> | 
<div class="github-badge">
  <span class="badge-subject">Theme by</span>
  <a href="https://www.ihewro.com/" target="_blank">
    <span class="badge-value bg-orange">Handsome</span></a>
</div>

5. 博主自我介绍打字特效

后台-设置外观-初级设置-博客介绍添加以下代码:

<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 = ["Hello World"].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>

此特效在本站某些页面出现诡异效果,因此已停用。目前未在其他同类博客发现问题,各位客官自行尝试,发现问题就把代码删去即可,问题不大,多尝试。还挺好看的。

6. 搞怪可爱网页标题

代码直接放在后台-更改外观-设置外观-开发者设置-自定义JavaScript,代码如下:

//搞怪网页动态标题
var OriginTitile = document.title,
titleTime;
document.addEventListener("visibilitychange",
function() {
    if (document.hidden) {
        document.title = ">﹏<呜呜呜~";
        clearTimeout(titleTime)
    } else {
        document.title = "(^∀^●)好耶! " ;
        titleTime = setTimeout(function() {
            document.title = OriginTitile
        },
        2000)
    }
});

7. 文章回复文本框回复打字特效

代码直接放在后台-更改外观-设置外观-开发者设置-自定义输出body 尾部的HTML代码,代码如下:

<!--文本框打字机特效-->
<script type="text/javascript" src="https://www.mgxfd.club/usr/themes/handsome/assets/js/commentTyping.js"></script>

8. 底部左侧显示建站时间

将下列代码修改后分别填写到 主题设置->开发者设置->博客底部左侧信息中即可。

<!--建站时间-->
<span>
    | 本站已经运行了
</span>
<span id="span_dt_dt">
</span>
<script>
    /*建站时间*/
    function show_date_time() {
        window.setTimeout("show_date_time()", 1e3);
        var BirthDay = new Date("2021/07/25 18:30:41"),
        today = new Date,
        timeold = today.getTime() - BirthDay.getTime(),
        msPerDay = 864e5,
        e_daysold = timeold / msPerDay,
        daysold = Math.floor(e_daysold),
        e_hrsold = 24 * (e_daysold - daysold),
        hrsold = Math.floor(e_hrsold),
        e_minsold = 60 * (e_hrsold - hrsold),
        minsold = Math.floor(60 * (e_hrsold - hrsold)),
        seconds = Math.floor(60 * (e_minsold - minsold));
        span_dt_dt.innerHTML = daysold + "天" + hrsold + "小时" + minsold + "分" + seconds + "秒";
    }
    show_date_time();
</script>

本站弃用原因,好长,影响观感。自行尝试使用

9. 浏览器图标favicon.ico添加方法

1). 制作favicon.ico图片文件

先准备一张长宽比为1:1的图片文件,然后将图片上传到第三方ico生成网站。

favicon.ico图片在线生成网站

生成后的.ico后缀图片会自动下载到本地,将其更名为favicon.ico。

2). 将favicon.ico上传到Typecho主题目录下

使用FTP或其他方式,将刚刚生成的favicon.ico图片上传到你的Typecho主题目录下:

上传目录:/usr/themes/你的主题名字/

3). 找到主题文件目录下的header.php,在 link 标签或者head/title标签下,网上各个教程不一,本站handsome8.2.0是把34行代替为以下代码,请自行摸索,谨记先全部备份再修改。

<link rel="shortcut icon" href="/usr/themes/handsome/favicon.ico" type="image/x-icon" />

10. 使用html和css3给网站添加上春节灯笼挂件代码

1、复制下面的代码添加到主题 --> 设置外观 --> 开发者设置 --> 自定义输出head头部HTML代码

<!-- 灯笼 1 -->
<div class="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>
        <div class="shui shui-b"></div>
        <div class="shui shui-c"></div>
    </div>
</div>

<!-- 灯笼 2 -->
<div class="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>
        <div class="shui shui-b"></div>
        <div class="shui shui-c"></div>
    </div>
</div>
<body id="body" class="fix-padding">

2、复制下面的css代码添加到主题 --> 设置外观 --> 开发者设置 --> 自定义CSS

    @media (max-width: 1600px){.deng-box{display: none;}.deng-box1{display: none;}}  //手机端隐藏
    .xian {
    position: absolute;
    top: -20px;
    left: 60px;
    width: 2px;
    height: 20px;
    background: #dc8f03;
}
.deng-box {
    position: fixed;
    top: -30px;
    z-index: 999;
}
.deng-box1 {
    position: fixed;
    top: -30px;
    right: 60px;
    z-index: 999;
}
.deng-box1 .deng {
    position: relative;
    width: 120px;
    height: 90px;
    margin: 50px;
    background: #d8000f;
    background: rgba(216, 0, 15, 0.9);
    border-radius: 50% 50%;
    -webkit-transform-origin: 50% -100px;
    -webkit-animation: swing 5s infinite ease-in-out;
    box-shadow: -5px 5px 50px 4px rgba(250, 108, 0, 1);
}
.deng {
    position: relative;
    width: 120px;
    height: 90px;
    margin: 50px;
    background: #d8000f;
    background: rgba(216, 0, 15, 0.9);
    border-radius: 50% 50%;
    -webkit-transform-origin: 50% -100px;
    -webkit-animation: swing 3s infinite ease-in-out;
    box-shadow: -5px 5px 50px 4px rgba(250, 108, 0, 1);
}
.deng-a {
    width: 100px;
    height: 90px;
    background: #d8000f;
    background: rgba(216, 0, 15, 0.2);
    margin: 12px 8px 8px 8px;
    border-radius: 50% 50%;
    border: 2px solid #dc8f03;
}
.deng-b {
    width: 45px;
    height: 90px;
    background: #d8000f;
    background: rgba(216, 0, 15, 0.2);
    margin: -4px 8px 8px 26px;
    border-radius: 50% 50%;
    border: 2px solid #dc8f03;
}
.shui {
    width: 5px;
    height: 40px;
    background: #ffa500;
    border-radius: 0 0 5px 5px;
}
.shui-a {
    margin: -10px 0 0 40px;
    -webkit-animation: swing 4s infinite ease-in-out;
    -webkit-transform-origin: 50% -20px;
}
.shui-b {
    margin: -35px 0 0 59px;
    -webkit-animation: swing 4s infinite ease-in-out;
    -webkit-transform-origin: 50% -45px;
}
.shui-c {
    margin: -45px 0 0 77px;
    -webkit-animation: swing 4s infinite ease-in-out;
    -webkit-transform-origin: 50% -25px;
}
.deng:before {
    position: absolute;
    top: -7px;
    left: 29px;
    height: 12px;
    width: 60px;
    content: " ";
    display: block;
    z-index: 999;
    border-radius: 5px 5px 0 0;
    border: solid 1px #dc8f03;
    background: #ffa500;
    background: linear-gradient(to rightright, #dc8f03, #ffa500, #dc8f03, #ffa500, #dc8f03);
}
.deng:after {
    position: absolute;
    bottom: -7px;
    left: 10px;
    height: 12px;
    width: 60px;
    content: " ";
    display: block;
    margin-left: 20px;
    border-radius: 0 0 5px 5px;
    border: solid 1px #dc8f03;
    background: #ffa500;
    background: linear-gradient(to rightright, #dc8f03, #ffa500, #dc8f03, #ffa500, #dc8f03);
}
.deng-t {
    font-family: 华文行楷,Arial,Lucida Grande,Tahoma,sans-serif;
    font-size: 1.8rem;
    color: #dc8f03;
    font-weight: bold;
    line-height: 85px;
    text-align: center;
}
.night .deng-t,
.night .deng-box,
.night .deng-box1 {
    background: transparent !important;
}
@-moz-keyframes swing {
    0% {
        -moz-transform: rotate(-10deg)
    }
    50% {
        -moz-transform: rotate(10deg)
    }
    100% {
        -moz-transform: rotate(-10deg)
    }
}
@-webkit-keyframes swing {
    0% {
        -webkit-transform: rotate(-10deg)
    }
    50% {
        -webkit-transform: rotate(10deg)
    }
    100% {
        -webkit-transform: rotate(-10deg)
    }
}

保存完毕,刷新前台就可以看到效果了。

本步骤学习参考:https://www.xcnte.com/archives/805/

11. 使用宝塔网站加速插件来加速网站速度,优化网站

参见Zeruns's Blog的文章:点击学习

12. Typecho加密文章显示标题和文章加密方法

打开Typecho网站文件:var/Widget/Abstract/Contents.php

Typecho版本1.1(17.10.30)在744行左右,找到:

$value['title'] = _t('此内容被密码保护');

改成下面的这个,也就是注释注释掉这行就好了。

/** $value['title'] = _t('此内容被密码保护'); */

你会注释,用//单行注释符注释掉也可以,不会的直接复制我的也行。

参考来源:Typecho加密文章显示标题和文章加密方法

13. Typecho支持Emoji表情(采用utf8mb4编码)

1. 进入数据库的phpMyAdmin管理

在宝塔面板中打开phpMyAdmin,复制网址另外页面进入以下画面:

进入后,根据以上图片在SQL中输入以下命令并执行:

alter table typecho_comments convert to character set utf8mb4 collate utf8mb4_general_ci;
alter table typecho_contents convert to character set utf8mb4 collate utf8mb4_general_ci;
alter table typecho_fields convert to character set utf8mb4 collate utf8mb4_general_ci;
alter table typecho_metas convert to character set utf8mb4 collate utf8mb4_general_ci;
alter table typecho_options convert to character set utf8mb4 collate utf8mb4_general_ci;
alter table typecho_relationships convert to character set utf8mb4 collate utf8mb4_general_ci;
alter table typecho_users convert to character set utf8mb4 collate utf8mb4_general_ci;

注意:

  1. 如果无法打开phpMyAdmin链接,可能是服务器和宝塔面板没有放行888端口,请自行百度放行端口。
  2. phpMyAdmin的密码是你的数据库密码。自行翻阅笔记。

2. 服务器文件配置

在宝塔文件的网站(自己网站名)的根目录中,有一个config.inc.php的文件,点击编辑。

在大概60行的位置修改为'charset' => 'utf8mb4',示例如图:

值得注意的是,在此文件中可以知道你的数据库名字和密码,也就是user和password。

以上参考见:Typecho支持Emoji表情(采用utf8mb4编码)_Mr.zwX-程序员资料

14. Typecho下实现一键评论打卡功能

参考见:https://www.xcnte.com/archives/527/

最后修改:2021 年 11 月 28 日 01 : 58 AM
如果觉得我的文章对你有用,请随意赞赏