博客的搭建

SSL证书

  1. 阿里云购买免费SSL证书
  2. 证书申请，绑定到自己域名上
  3. 证书下载，选择Nginx类型对应的证书。

查看自己服务器类型方法：
浏览器 F12 -> network -> headers 字段的 server

  1. 进入宝塔，选择部署ssl，选择其他证书，将证书文件key和pem的内容复制进去即可。

开启伪静态

Typecho配置
  1. 登录typecho管理界面
  2. 设置
  3. 永久链接
  4. 启用地址重写功能
  5. 勾选仍然启动此功能
  6. 选择wordpress风格
  7. 保存设置
宝塔面板配置伪静态

宝塔面板分为LNMP和LAMP两种环境

设置LNMP环境

  1. 登录宝塔面板
  2. 网站
  3. 设置
  4. 伪静态
  5. 选择typecho
  6. 保存配置

又拍云CDN及云存储

通过又拍云联盟（www.upyun.com/league）获得免费cdn及云存储，云存储用于博客的备份。参考：www.cfanlost.com/。
自定义页面底部左侧

<a href="<https://www.upyun.com/?utm_source=lianmeng&utm_medium=referral>"><img src="/usr/uploads/2021/pic/ypylogo2.png" style="width: 50px;"></a>

自定义页面底部右侧为备案号

<a href="http://beian.miit.gov.cn/" target="_blank">鄂ICP备2021007308号-2</a>

又拍云https设置，上传ssl证书

主题的美化与修改

添加访客记录及响应耗时

首先将以下代码加到/usr/themes/handsome/libs/Content.php中，放在class Content{}之前

/*访问总量*/
function theAllViews(){
$db = Typecho_Db::get();
$row = $db->fetchAll('SELECT SUM(VIEWS) FROM `typecho_contents`');
echo number_format($row[0]['SUM(VIEWS)']);
}

/*响应时间*/
function timer_start() {
global $timestart;
$mtime = explode( ' ', microtime()  );
$timestart = $mtime[1] + $mtime[0];
return true;
}
timer_start();
function timer_stop( $display = 0, $precision = 3  ) {
global $timestart, $timeend;
$mtime = explode( ' ', microtime()  );
$timeend = $mtime[1] + $mtime[0];
$timetotal = number_format( $timeend - $timestart, $precision  );
$r = $timetotal < 1 ? $timetotal * 1000 . " ms" : $timetotal . " s";
if ( $display  ) {
echo $r;
}
return $r;
}

然后在/usr/themes/handsome/component/sidebar.php文件内，找到博客信息下面添加以下代码

<li class="list-group-item text-second"> <span class="blog-info-icons"> <i data-feather="users"></i></span>
<span class="badge
pull-right"><?php echo theAllViews();?></span><?php _me("访客总数") ?></li>
<li class="list-group-item text-second"> <span class="blog-info-icons"> <i data-feather="refresh-ccw"></i></span>
<span class="badge
pull-right"><?php echo timer_stop();?></span><?php _me("响应耗时") ?></li>

添加文章总字数

在component/sidebar.php的上方添加下述代码：

<?php
//字数统计
function allOfCharacters() {
    $chars = 0;
    $db = Typecho_Db::get();
    $select = $db ->select('text')->from('table.contents');
    $rows = $db->fetchAll($select);
    foreach ($rows as $row) { $chars += mb_strlen(trim($row['text']), 'UTF-8'); }
    $unit = '';
    if($chars >= 10000)     { $chars /= 10000; $unit = '万'; }
    else if($chars >= 1000) { $chars /= 1000;  $unit = '千'; }
    $out = sprintf('%.2lf %s',$chars, $unit);
    return $out;
}
?>

在博客信息的相关位置添加下述代码：

<li class="list-group-item text-second"><span class="blog-info-icons"><i data-feather="edit-2"></i></span> <span class="badge pull-right"><?php echo allOfCharacters(); ?></span><?php _me("全站字数") ?></li>

最后的博客信息完整内容为：

<li class="list-group-item text-second"><span class="blog-info-icons"> <i data-feather="award"></i></span> <span
      class="badge pull-right"><?php $stat->publishedPostsNum() ?></span><?php _me("文章数目") ?></li>
      <li class="list-group-item text-second"><span class="blog-info-icons"><i data-feather="edit-2"></i></span> <span class="badge pull-right"><?php echo allOfCharacters(); ?></span><?php _me("全站字数") ?></li>
      <li class="list-group-item text-second"> <span class="blog-info-icons"> <i data-feather="users"></i></span>
      <span class="badge pull-right"><?php echo theAllViews();?></span><?php _me("访客总数") ?></li>
      <?php if (COMMENT_SYSTEM == 0): ?>
      <li class="list-group-item text-second"> <span class="blog-info-icons"> <i data-feather="message-circle"></i></span><span class="badge pull-right"><?php $stat->publishedCommentsNum() ?></span><?php _me("评论数目") ?></li>
      <?php endif; ?>
      <li class="list-group-item text-second"><span class="blog-info-icons"> <i data-feather="calendar"></i></span>
      <span class="badge pull-right"><?php echo Utils::getOpenDays(); ?></span><?php _me("运行天数") ?></li>
      <li class="list-group-item text-second"><span class="blog-info-icons"> <i data-feather="activity"></i></span> <span class="badge pull-right"><?php echo Utils::getLatestTime($this); ?></span><?php _me("最后活动") ?></li>
      <li class="list-group-item text-second"> <span class="blog-info-icons"> <i data-feather="refresh-ccw"></i></span>
      <span class="badge pull-right"><?php echo timer_stop();?></span><?php _me("响应耗时") ?>

侧边栏图标颜色及彩色标签云

自定义JavaScript添加

<!--左侧图标颜色and彩色标签云-->
let tags = document.querySelectorAll("#tag_cloud-2 a");
let infos = document.querySelectorAll(".badge");
let colorArr = ["#428BCA", "#AEDCAE", "#ECA9A7", "#DA99FF", "#FFB380", "#D9B999"];
tags.forEach(tag => {
tagsColor = colorArr[Math.floor(Math.random() * colorArr.length)];
tag.style.backgroundColor = tagsColor;
});
infos.forEach(info => {
infosColor = colorArr[Math.floor(Math.random() * colorArr.length)];
info.style.backgroundColor = infosColor;
});
function addNumber(a) {
var length = document.getElementById("comment").value.length;
if(length> 0){
document.getElementById("comment").focus()
document.getElementById("comment").value += '\\n' + a + new Date
}else{
document.getElementById("comment").focus()
document.getElementById("comment").value += a + new Date
}
}
let leftHeader = document.querySelectorAll("span.nav-icon>svg,span.nav-icon>i");
let leftHeaderColorArr = ["#FF69B4", "#58c7ea", "#E066FF", "#FF69B4", "#FFA54F", "#90EE90"];
leftHeader.forEach(tag => {
tagsColor = leftHeaderColorArr[Math.floor(Math.random() * colorArr.length)];
tag.style.color = tagsColor;
});

后台pjax回调函数添加

let tags = document.querySelectorAll("#tag_cloud-2 a");
let infos = document.querySelectorAll(".badge");
let colorArr = ["#428BCA", "#AEDCAE", "#ECA9A7", "#DA99FF", "#FFB380", "#D9B999"];
tags.forEach(tag => {
tagsColor = colorArr[Math.floor(Math.random() * colorArr.length)];
tag.style.backgroundColor = tagsColor;
});
infos.forEach(info => {
infosColor = colorArr[Math.floor(Math.random() * colorArr.length)];
info.style.backgroundColor = infosColor;
});
function addNumber(a) {
var length = document.getElementById("comment").value.length;
if(length> 0){
document.getElementById("comment").focus()
document.getElementById("comment").value += '\\n' + a + new Date
}else{
document.getElementById("comment").focus()
document.getElementById("comment").value += a + new Date
}
}

文章标题下添加百度是否收录

编辑主题目录内的 /handsome/post.php 文件, 找到 <?php $this->category(' '); ?></span></li>(70行左右)
在下一行的<span> </span></ul>前添加以下代码

<li class="meta-baidu"><span class="post-icons"><i class="glyphicon glyphicon-refresh" id="baidu_icon"></i></span><span class="meta-value" id="baidu_result">加载中</span></li>

在typecho根目录下创建api文件夹，里面创建baidu.php。即/www/wwwroot/https://www.airyv.com/api/baidu/baidu.php。内容为：

<?php
/**
 * Baidu
 * @editer: Weifeng
 * @link: <https://wfblog.net>
 * @version: 1.0
 */

error_reporting(0);
header("Access-Control-Allow-Origin:*");
header('Content-type: application/json');

$domain = @$_GET['domain'];
if(!isset($domain) || empty($domain) || $domain==''){
    $data = array(
        "code" => false,
        "msg" => "未传入请求参数！"
    );
    echo json_encode($data,JSON_UNESCAPED_UNICODE);
    exit;
}
if(substr($domain, -1) == '/'){
    $domain = substr($domain,0,strlen($domain)-1);
}

$data = checkBaidu($domain);
echo json_encode($data,JSON_UNESCAPED_UNICODE);

function checkBaidu($url){
    $header = array(
        "Host:www.baidu.com",
        "Content-Type:application/x-www-form-urlencoded",//post请求
        "Connection: keep-alive",
        "Referer:<https://www.baidu.com>",
        "User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/80.0.3987.162 Safari/537.36"
    );
    $url = '<https://www.baidu.com/s?ie=UTF-8&wd='.urlencode($url).'&usm=3&rsv_idx=2&rsv_page=1>';
    $ch = curl_init();
    curl_setopt($ch, CURLOPT_URL, $url);
    curl_setopt ($ch, CURLOPT_HTTPHEADER, $header);
    curl_setopt($ch, CURLOPT_FOLLOWLOCATION,1);
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
    $output = curl_exec($ch);
    curl_close($ch);
    if(strpos($output, '没有找到') || strpos($output, '很抱歉')){
        $data = array(
            "code" => 403,
            "msg" => "该域名暂时未被百度收录！"
        );
    }else{
        $number = GetBetween($output,'<span class="nums_text">百度为您找到相关结果约','个</span>');
        if(empty($number) || $number == 0){
            $number = GetBetween($output,'<b>找到相关结果数约','个</b></p>');
            if(empty($number) || $number == 0){
                $data = array(
                    "code" => false,
                    "msg" => "获取百度收录失败！"
                );
                return $data;
            }
        }
        $data = array(
            "code" => 200,
            "msg" => "该域名已被百度收录！",
            "number" => str_replace(',','',$number)
        );
    }
    return $data;
}

function GetBetween($content,$start,$end){
    $r = explode($start, $content);
    if (isset($r[1])){
        $r = explode($end, $r[1]);
        return $r[0];
    }
}
?>

在主题设置-PJAX-PJAX回调函数中添加baidu_check();
在diy.js中添加

if ( $('#baidu_result').length >0){
        baidu_check()
}
在diy.js最后添加以下代码
function baidu_check(){
                //下方网址改为第一步创建的文件链接
        $.getJSON("<https://www.airyv.com/api/baidu/baidu.php?domain=>"+window.location.href,function(result){
            if (result.code == 200) {
                $('#baidu_icon').removeClass('glyphicon-refresh');
                $('#baidu_icon').addClass('glyphicon-ok-circle');
                $('#baidu_result').text('百度已收录');
            }else if(result.code == 403){
                $('#baidu_icon').removeClass('glyphicon-refresh');
                $('#baidu_icon').addClass('glyphicon-info-sign');
                $('#baidu_result').text('百度未收录');
            }else{
                $('#baidu_icon').removeClass('glyphicon-refresh');
                $('#baidu_icon').addClass('glyphicon-remove-circle');
                $('#baidu_result').text('查询收录失败');
            }
        });
    }

首页文章悬停上浮

修改css

/*首页文章悬停上浮*/
.blog-post .panel:not(article) {
    transition: all 0.3s;
}

.blog-post .panel:not(article):hover {
    transform: translateY(-10px);
    box-shadow: 0 8px 10px rgba(73, 90, 47, 0.47);
}

网站右侧滚动条样式

css

/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar {
    width: 8px;
    height: 6px
}
/*定义滚动条轨道*/
::-webkit-scrollbar-track {
    background-color: transparent;
    -webkit-border-radius: 2em;
    -moz-border-radius: 2em;
    border-radius: 2em
}
/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb {
    background-color: #30B07F;
    background-image: -webkit-linear-gradient(45deg,rgba(255,255,255,.4) 100%,transparent 100%,transparent 50%,rgba(255,255,255,.4) 50%,rgba(255,255,255,.4) 75%,transparent 75%,transparent);
    -webkit-border-radius: 2em;
    -moz-border-radius: 2em;
    border-radius: 2em
}

百度提交插件BaiduSubmit魔改

插件网址：https://minirizhi.com/104.html

百度站长平台查看收录情况：https://ziyuan.baidu.com/linksubmit/index

第二个插件地址：https://github.com/typecho-fans/plugins/tree/master/Sitemap

sitemap：https://www.airyv.com/sitemap.xml

左侧边栏导航

{"name":"仓库","class":"github","link":"https://www.airyv.com/project.html","target":"_self"},
{"name":"归档","class":"archive","link":"https://www.airyv.com/archives.html","target":"_self"},
{"name":"朋友","class":"heart","link":"https://www.airyv.com/links.html","target":"_self"},
{"name":"留言","class":"fontello fontello-edit","link":"https://www.airyv.com/message.html","target":"_self"},
{"name":"关于","class":"fontello fontello-user","link":"https://www.airyv.com/start-page.html","target":"_self"},

字体及颜色

修改正文颜色，css修改。

body, html{
    color: #000000;
}

评论头像

方形头像.jpg
QQ截图20220517140259.jpg

最后修改：2022 年 05 月 17 日
© 允许规范转载
如果觉得我的文章对你有用，请随意赞赏