Typecho搭建参考资料

⚠️此文章用于展示博客正在或将要使用的相关代码、插件、技术资源，同时方便下次使用，混合html、markdown、插件代码等语言，含有大量解析渲染内容因此打开速度较慢。因为有大量相似搬运文章就不再重复造轮子了。为防止编辑器对命令解析生效造成内容混乱，部分代码第二个字符插入了@字符，使用时需删掉@，代码中第一个字符是@的不需要删掉。

➤一、代码相关

➤➤模板修改

➤➤➤归档

Mirages/post.php第68行去掉.html

➤➤➤评论UA

Mirages/lib/Comments.php第123行添加

<?php UserAgent_Plugin::render($this->agent); ?>

即以下两行代码之间：

        $singleCommentOptions->afterAuthor(); ?></cite>
  </div>

➤➤➤国内源头像

根目录config.inc.php添加：

/** 国内Gravatar服务*/
define('__TYPECHO_GRAVATAR_PREFIX__', 'https://cdn.v2ex.com/gravatar/');

➤➤➤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];
}

➤➤➤导航栏天气

Mirages/component/navbar.php第105行添加：

<div id="tp-weather-widget"></div>

➤➤➤追番页面

复制主题page.php文件并重命名为bangumi.php；
文件头部增加：

<?php
/**
 * 追番列表
 *
 * @package custom
 */
?>

加了以上代码后，第36行加入：

<?php BiliBangumi_Plugin::output(); ?>

即以下两行代码之间：

            <?php echo Content::parse($this->content) ?>
        </div>

独立页面不可与追番文件同名，即不能为bangumi，否则报错403.

➤➤➤页脚显示

Mirages/component/footer.php第76行添加：

Code

<span style="font-size:10px;">
    <a href="https://www.chirmyram.top/sitemap.xml"target="_blank">Sitemap </a> • 
    <a href="https://www.chirmyram.top/feed"target="_blank">Feed</a> • 
    <script id="LA-DATA-WIDGET" crossorigin="anonymous" charset="UTF-8" src="https://v6-widget.51.la/v6/JIIPzl7HnG53b9uu/quote.js?theme=,,#000000,#000000,,,12&f=12&display=0,0,0,0,0,0,0,1"></script>
 • 
    <font color="#1abc9c">网站已运行：</font><span id="run_time" style="color:#1abc9c;">
<script>
   function runTime() {
      var d = new Date(), str = '';
      BirthDay = new Date("March 09,2020");
      today = new Date();
      timeold = (today.getTime() - BirthDay.getTime());
      sectimeold = timeold / 1000
      secondsold = Math.floor(sectimeold);
      msPerDay = 24 * 60 * 60 * 1000
      msPerYear = 365 * 24 * 60 * 60 * 1000
      e_daysold = timeold / msPerDay
      e_yearsold = timeold / msPerYear
      daysold = Math.floor(e_daysold);
      yearsold = Math.floor(e_yearsold);
      //str = yearsold + "年";
      str += daysold + "天";
      str += d.getHours() + '时';
      str += d.getMinutes() + '分';
      str += d.getSeconds() + '秒';
      return str;
    }
    setInterval(function () { $('#run_time').html(runTime()) }, 1000);
</script>

即以下两行代码之间：

  </div>
</footer>

➤➤➤评论区

网站填写提示：
Mirages/component/comments.php第39行改为：

输入评论（敏感及广告会被删评）

Mirages/component/comments.php第44行添加：

（敏感及广告站会被删评）

算术验证：
Mirages/component/comments.php第56行添加：

<?php spam_protection_math();?>

即以下两行代码之间：

 </p>
<p><input type="submit" value="<?php _me('提交评论'); ?>"

Mirages/function.php第109行添加：

Code

    $comment = spam_protection_pre($comment, $post, $result);
}
function spam_protection_math(){
    $num1=rand(1,9);
    $num2=rand(1,9);
    echo "<label for=\"math\">请输入<code>$num1</code>+<code>$num2</code>的计算结果：</label>\n";
    echo "<input type=\"text\" name=\"sum\" class=\"text\" value=\"\" size=\"25\" tabindex=\"4\" style=\"width:218px\" placeholder=\"计算验证码：\">\n";
    echo "<input type=\"hidden\" name=\"num1\" value=\"$num1\">\n";
    echo "<input type=\"hidden\" name=\"num2\" value=\"$num2\">";
}
function spam_protection_pre($comment, $post, $result){
    $sum=$_POST['sum'];
    switch($sum){
        case $_POST['num1']+$_POST['num2']:
        break;
        case null:
        throw new Typecho_Widget_Exception(_t('请输入计算验证码！<a href="javascript:history.back(-1)"></a>','评论失败'));
        break;
        default:
        throw new Typecho_Widget_Exception(_t('计算验证码错误，请<a href="javascript:history.back(-1)">重试！</a>','评论失败'));
    }
    return $comment;

即函数themeInit最后一个花括号｝之前。

➤➤Ubuntu18永久修改DNS

修改/etc/systemd/resolved.conf：

DNS=120.53.53.223 121.4.4.137 2402:4e00:0::2c5b:a51a 2402:4e00:1::2c5b:a51a

启用：

systemctl restart systemd-resolved && systemctl enable systemd-resolved && rm /etc/resolv.conf && ln -s /run/systemd/resolve/resolv.conf /etc/

➤➤禁止通过IP直接访问网站

新建空白网站并设置任意域名，设置强制https，网站nginx配置文件server_name添加域名和ip，return到1：

server_name domain ip;
return 1;

➤➤smtp配置

发信接口：SMTP
发件/回复/smtp用户地址：[email protected]
SMTP地址：smtp.office365.com
SMTP端口：587
服务器需要验证、TLS加密

➤➤Sticky置顶插件美化

插件设置填写置顶标题的html：

Code

<div class="wrap"><span class="wraps">置顶</span></div>
<style type="text/css">
.wrap {
width: 100%;
height: 100%;
position: absolute;
top: -8px;
left: 8px;
overflow: hidden;
font-size: 17px;
font-weight: 400;
color: #fff;
opacity: 0.5;
-webkit-transition: .3s ease all;
-moz-transition: .3s ease all;
-ms-transition: .3s ease all;
-o-transition: .3s ease all;
transition: .3s ease all;
}
.wrap:hover {
opacity: 0.9;
}
.wraps {
display: inline-block;
text-align: center;
width: 200px;
height: 30px;
line-height: 27px;
position: absolute;
top: 30px;
right: -50px;
z-index: 2;
overflow: hidden;
transform: rotate(45deg);
-ms-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-o-transform: rotate(45deg);
border: 1px dashed;
box-shadow: 0 0 0 1px #000, 0px 21px 5px -18px rgba(0,0,0,0.6);
background: red;
}
</style>

➤➤Yodu自定义css

Code

/* 高度 */
#bgmpanel, span.bgmbuttom {
    height: 60px;
}

/* 进度条颜色 */
#jindu {
    background-color: #1abc9c;
}

/* 歌名与作者间距 */
.artist {
    float: initial !important;
    margin-left: 5px;
}

/* Chrome 隐藏滚动条 */
.yd-lib::-webkit-scrollbar {
    display: none !important;
}

.yd-lib {
    /* 歌曲上下间距 */
    margin: 5px 0;

    /* 歌曲信息超出不换行 */
    white-space: nowrap;
    overflow-x: scroll;

    /* 火狐隐藏滚动条 */
    overflow: -moz-hidden-unscrollable;
    scrollbar-width: none;
    
    /* IE、EDGE 隐藏滚动条 */
    -ms-overflow-style: none !important;
}

➤➤多级目录

一级：#
二级：##
……

➤➤代码高亮

`@``
代码内容
`@``

效果：

代码内容

➤➤##换行字符

<br />

➤➤中文缩进

放入首行文字前实现中文缩进两个字符。

&#8195;&#8195;

效果：
中文缩进

➤➤页面内跳转

文字不必一致，数字id一致即可跳转。

[离开文字](#1)
<a id="1">到达文字</a>

效果：结尾

➤➤上标页内跳转

上标<sup>[【1】](#1)</sup>
<a id="1">【1】</a>上标

效果：上标^【1】

➤➤超链接跳转

实现新标签页打开超链接。

<a href="https://www.microsoft.com/en-us/edge"target="_blank">正式版官网</a>

效果：正式版官网

➤➤表格整体靠左

!!!
<div style="padding-right: 300px;">
</div>
!!!

➤➤图片形式变换

添加阴影、宽高按比例缩小、左对齐、多次换行。

<img src="https://img.chirmyram.com/d/rep/Image/blogpic/edgedoc/image001.png#shadow" width="50%" height="50%" align="left"><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />

效果：

➤➤文字改变颜色

多个颜色则多段代码放在一起。

!!!
<font color="red">红</font><font color="blue">蓝</font>
!!!

效果：

红蓝

➤➤高级选项版权声明

<blockquote>
本文作者：<a target="_blank" href="https://www.chirmyram.top">七米蓝</a><br>
本文标题：《{{title}}》<br>
本文链接：<a target="_blank" href="{{link}}">{{link}}</a><br>
版权声明：本博客文章均采用<a href="https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh"target="_blank">CC BY-NC-SA 4.0</a>许可协议，转载请注明出处！
</blockquote>

➤➤mysql连接

mysql启用本地连接：

mysqld_safe --skip-grant-tables --skip-networking &
mysql -uroot -p
use mysql;
select Host from user where User='root';
Update user set Host='%' where Host='localhost';
flush privileges;

mysql启用远程连接：

mysql -uroot -p
use mysql;
select Host from user where User='root';
grant all privileges  on *.* to root@'%' identified by "密码";
flush privileges;

➤➤主题自定义扩展

➤➤➤head 头部 (meta 元素后)：

Code

<script>
    // 在代码块右上角添加复制按钮
    document.addEventListener('DOMContentLoaded', initCodeCopyButton);
    function initCodeCopyButton() {
        function initCSS(callback) {
            const css = `
                .btn-code-copy {
                    position: absolute;
                    line-height: .6em;
                    top: .2em;
                    right: .2em;
                    color: rgb(87, 87, 87);
                }
                .btn-code-copy:hover {
                    color: rgb(145, 145, 145);
                    cursor: pointer;
                }
                `;
            const styleId = btoa('btn-code-copy').replace(/[=+\/]/g, '');
            const head = document.getElementsByTagName('head')[0];
            if (!head.querySelector('#' + styleId)) {
                const style = document.createElement('style');
                style.id = styleId;
                if (style.styleSheet) {
                    style.styleSheet.cssText = css;
                } else {
                    style.appendChild(document.createTextNode(css));
                }
                head.appendChild(style);
            }
            callback();
        };
        function copyTextContent(source) {
            let result = false;
            const target = document.createElement('pre');
            target.style.opacity = '0';
            target.textContent = source.textContent;
            document.body.appendChild(target);
            try {
                const range = document.createRange();
                range.selectNode(target);
                window.getSelection().removeAllRanges();
                window.getSelection().addRange(range);
                document.execCommand('copy');
                window.getSelection().removeAllRanges();
                result = true;
            } catch (e) { console.log('copy failed.'); }
            document.body.removeChild(target);
            return result;
        };
        function initButton(pre) {
            const code = pre.querySelector('code');
            if (code) {
                const preParent = pre.parentElement;
                const newPreParent = document.createElement('div');
                newPreParent.style = 'position: relative';
                preParent.insertBefore(newPreParent, pre);
                const copyBtn = document.createElement('div');
                copyBtn.innerHTML = 'copy';
                copyBtn.className = 'btn-code-copy';
                copyBtn.addEventListener('click', () => {
                    copyBtn.innerHTML = copyTextContent(code) ? 'success' : 'failure';
                    setTimeout(() => copyBtn.innerHTML = 'copy', 250);
                });
                newPreParent.appendChild(copyBtn);
                newPreParent.appendChild(pre);
            }
        };
        const pres = document.querySelectorAll('pre');
        if (pres.length !== 0) {
            initCSS(() => pres.forEach(pre => initButton(pre)));
        }
    };
</script>

PJAX回调函数：

initCodeCopyButton();

➤➤➤head 尾部 (head 标签结束前):

<link rel="stylesheet" href="<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/ChirmyRam/cssstore/blackcat.css" type="text/css">" type="text/css">

➤➤➤在 body 标签结束前：

Code

<script type="text/javascript" src="//cdn.jsdelivr.net/gh/ChirmyRam/cssstore/51laStatistics.js"></script>

<!-- 知心天气-->
    <div id="tp-weather-widget"></div>
<script>(function(T,h,i,n,k,P,a,g,e){g=function(){P=h.createElement(i);a=h.getElementsByTagName(i)[0];P.src=k;P.charset="utf-8";P.async=1;a.parentNode.insertBefore(P,a)};T["ThinkPageWeatherWidgetObject"]=n;T[n]||(T[n]=function(){(T[n].q=T[n].q||[]).push(arguments)});T[n].l=+new Date();if(T.attachEvent){T.attachEvent("onload",g)}else{T.addEventListener("load",g,false)}}(window,document,"script","tpwidget","//widget.seniverse.com/widget/chameleon.js"))</script>
<script>tpwidget("init", {
    "flavor": "slim",
    "location": "WX4FBXXFKE4F",
    "geolocation": "enabled",
    "language": "auto",
    "unit": "c",
    "theme": "chameleon",
    "container": "tp-weather-widget",
    "bubble": "enabled",
    "alarmType": "badge",
    "color": "black",
    "uid": "PG3xZ8rARlel6JXp2",
    "hash": "S3TaN8s-io0ZEpKQh"
});
tpwidget("show");</script>
<!-- 知心结束-->