MENU

Typecho搭建参考资料

March 5, 2020 • Read: 5988 • 记录

⚠️此文章用于展示博客正在或将要使用的相关代码、插件、技术资源,同时方便下次使用,混合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>
<!-- 知心结束-->

➤二、插件相关

➤➤Typecho-fans/plugins

➤➤Access

➤➤AccessBmob

➤➤ActivatePowerMode

➤➤AMP

➤➤APlayer

➤➤BaiduSubmit

➤➤BaiduTextCensor

➤➤bmob

➤➤CodePrettify

➤➤Comment2Telegram

➤➤CopyCopyright

➤➤DoubanBoard

➤➤ExSearch

➤➤Gravatar

➤➤LoveKKComment

➤➤Pio

➤➤Sitemap

➤➤SmartSpam

➤➤Snow

➤➤Sticky

➤➤TePostViews

➤➤TongJi

➤➤TopLamuLeimu

➤➤UploadPlugin

➤➤UserAgent

➤➤WordCount

➤➤XmlRpcAid

➤➤YoduPlayer

➤➤YoduPlayerApi

➤➤zhai-music

➤➤typecho_bangumi_bili

➤➤HoerMouse

➤➤SimonH/typecho-gitwidget

➤三、技术相关

宝塔linux面板命令大全:
https://www.bt.cn/btcode.html

Typecho开启伪静态并隐藏index.php:
https://www.typechodev.com/theme/478.html

Typecho 开启全站化 Https(SSL)小绿锁:
https://jocket.top/411.html

腾讯云SSL证书免费申请及配置方法:
https://cloud.tencent.com/developer/article/1505907

Mirages使用帮助文档:
https://mirages.docs.get233.com/#/

短代码-Mirages帮助文档:
https://get233.com/archives/mirages-shortcode-docs.html

任意站点开启链接预加载:
https://logi.im/blog/turning-on-instance-page-for-any-website.html

网站底部统计运行时间代码设计:
https://blog.csdn.net/keylion_/article/details/81812973

博客里插入自适应B站视频的方法:
https://cloudguest.cn/archives/258/

为 Typecho 的 Code Block 添加 Copy 按钮:
https://logi.im/blog/adding-copy-btn-to-typecho-code-block.html

YoduPlayer 配置生成器:
https://logi.im/yoduplayer.html

Typecho开启Gzip,感受火箭般速度:
https://blog.zwying.com/archives/20.html

B站来源的Typecho追番页插件:
https://www.bwsl.wang/csother/85.html

Typecho 追番统计插件发布:
https://www.wikimoe.com/?post=136

教你在 Typecho 中添加 “我的追番” 界面:
https://blog.ixfish.cn/index.php/archives/23/

Typecho 主流音乐插件及 Youdu Player 完全配置指南:
https://logi.im/blog/introduction-to-major-music-plugins-for-typecho.html

给typecho加上心知天气-博客美化:
https://www.n-1.cn/109.html

Sticky 置顶插件美化
https://www.qqstop.cn/archives/308.html

单文件实现的PHP二维码API
https://github.com/yhf7952/QrCodeApi

CommentFilter for Typecho强势魔改升级
https://qqdie.com/archives/typecho-CommentFilter.html

Typecho智能评论过滤插件:SmartSpam
http://www.yovisun.com/archive/typecho-plugin-smartspam.html

禁止通过IP直接访问网站
http://wanlimm.com/77201908257469.html

使 Typecho 支持 emoji 的显示😂😂😂
https://get233.com/archives/show-emoji-in-typecho.html

魔改 Mriages 主题导航栏
https://www.fjdc.xyz/xxcd/145.html

Typecho 插入二维码的简单方法
https://logi.im/blog/insert-qrcode-to-typecho.html

Github Action部署acme.sh全自动批量签发多域名证书教程
https://www.ioiox.com/archives/104.html

如何防止小人对你的网站进行反向代理
https://www.qian.blue/archives/prevent_reverse_proxy.html

Typecho更换数据库将MySQL转换成SQLite详细教程
https://www.mvpsky.com/2112.html

……待添加

结尾
【1】上标

本文作者:七米蓝
本文标题:《Typecho搭建参考资料》
本文链接:https://www.chirmyram.top/archives/refer
版权声明:本博客文章均采用CC BY-NC-SA 4.0许可协议,转载请注明出处!

Last Modified: April 26, 2023
Archives QR Code Tip
QR Code for this page
Tipping QR Code
Leave a Comment

6 Comments
  1. 九凌网络 九凌网络   Windows 10 x64 Edition  Google Chrome 86.0.4240.198

    原来是这样实现的

  2. kaki kaki   Windows 10 x64 Edition  Chromium Edge 105.0.1343.42

    这个UserAgent 我用了无效@(心碎)

  3. 飞进的船 飞进的船   Android 10  WebView 4.0

    同款主题,以后常来,借鉴借鉴!!@(呵呵)

    1. ChirmyRam ChirmyRam   Android 10  WebView 4.0

      @飞进的船感谢支持@(你懂的)

  4. 子鱼 子鱼   Windows Vista  Opera 12.14

    大佬六六六@(大拇指)

    1. ChirmyRam ChirmyRam   Windows 10 x64 Edition  Chromium Edge 83.0.467.0

      @子鱼还行@(呵呵)