MENU

Typecho搭建参考资料

March 5, 2020 • Read: 1083 • 记录

⚠️此文章用于展示博客正在或将要使用的相关代码、插件、技术资源,同时方便下次使用,混合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/baidu_sitemap.xml"target="_blank">Baidu sitemap </a> • 
    <a href="https://www.chirmyram.top/mip_sitemap.xml"target="_blank">MIP sitemap </a> • 
    <a href="https://www.chirmyram.top/sitemap.xml"target="_blank">Google sitemap </a> • 
    <a href="https://www.chirmyram.top/amp_sitemap.xml"target="_blank">AMP sitemap </a> • 
    <a href="https://www.chirmyram.top/ampindex"target="_blank">AMP index</a> • 
    <a href="https://www.chirmyram.top/feed"target="_blank">Feed</a> • 
    <a href="https://travellings.now.sh/" target="blank" title="开往-友链接力"><img src="https://cdn.jsdelivr.net/gh/volfclub/travellings/assets/logo.gif" alt="开往-友链接力" width="2.5%" height="25%" align="center"></a> •    
    <a href="https://www.upyun.com/?utm_source=lianmeng&utm_medium=referral"target="_blank"><img src="https://up.chirmyram.top/index/uplogo.png!webp" width="2.5%" height="25%" align="center"></a> • 
    <script type="text/javascript" src="//quote.51.la/q?id=20692543&mb=4"></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>

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

新建空白网站并设置ip为域名,nginx配置文件添加:

server
{
    listen 80;
    listen 443;
    server_name ip;
    return 1;
}

➤➤smtp配置

发信接口:SMTP
发件/回复/smtp用户地址:chirmyram@qq.com
SMTP地址:smtp.qq.com
SMTP端口:587
生成授权码、SMTP验证、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://up.chirmyram.top/edgedoc/image001.png!webp#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>

➤➤主题自定义扩展

➤➤➤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

➤➤CodePrettify

➤➤CopyCopyright

➤➤DoubanBoard

➤➤ExSearch

➤➤Gravatar

➤➤LoveKKComment

➤➤Pio

➤➤Sitemap

➤➤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

……待添加

结尾
【1】上标

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

Last Modified: August 23, 2020
Archives QR Code Tip
QR Code for this page
Tipping QR Code
Leave a Comment

4 Comments
  1. 飞进的船 飞进的船   Android 10  WebView 4.0

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

    1. ChirmyRam ChirmyRam   Android 10  WebView 4.0

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

  2. 子鱼 子鱼   Windows Vista  Opera 12.14

    大佬六六六@(大拇指)

    1. ChirmyRam ChirmyRam   Windows 10 x64 Edition  ChromiumEdge 83.0.467.0

      @子鱼还行@(呵呵)