Typecho搭建和美化

果子猫

概述

Typecho是一款轻量级的开源PHP博客系统，它简单易用，界面整洁，性能高效，主题、插件众多。我使用的是腾讯云轻量服务器，Typecho的应用模版，一键安装环境。构建自己的博客网站，记录生活、分享经验。
购买域名、备案、申请SSL

这样在之后创建完typecho服务器，就会在nginx中直接添加对应域名的https的配置。
若没有域名也没问题，使用 ip+port 的形式访问。
购买云服务器

获取服务器相关账号密码

1. # 应用管理 -> 管理员密码 -> 复制 -> 登录 -> 粘贴 -> ⏎
2. # 获取以下账号和密码，保存好
3. # typecho_username = xxx
4. # typecho_password = xxx
5. # mariadb_password = xxx
7. # 若远程连接MariaDB，报错1130，说明在MariaDB上没有为 Navicat 运行的主机 IP 授予数据库访问权限
8. # 将navicat提示的报错ip替换下面"IP"，将上述记录的数据库密码替换下面"Password"。进入服务器数据库，执行
9. mysql -uroot -p
10. GRANT ALL PRIVILEGES ON *.* TO 'root'@'IP' IDENTIFIED BY 'Password' WITH GRANT OPTION;

复制代码

Typecho主题的使用以及美化

以下包括Jasmine主题的基本配置，个人优化。
使用主题

1. # 参考文档：https://gitee.com/LiaoChunping/Jasmine/wikis/Home
2. # 将主题下载，并放到下面目录中
3. cd /usr/local/lighthouse/softwares/typecho/usr/themes
5. # 解压
6. unzip jasmine.zip
8. # 登录后台管理页面 http://xxx.xx.xx.xxx/admin
9. # 控制台 -> 外观 ，就能看到新增的主题
10. # 点击 设置外观 Tab, 按下面步骤说明操作

复制代码

设置网站地址栏图标

1. cd /usr/local/lighthouse/softwares/typecho
2. # 复制一个 favicon.ico 文件上去，浏览器清理缓存，再刷新查看

复制代码

设置站点logo地址

1. # png格式，我这里是使用腾讯云的对象存储来保存图片

复制代码

左侧菜单栏

首先需要创建对应独立页面，归档、随机菜单，创建时，需要选择“自定义模版”

2. [
3.   {
4.     "name": "关于",
5.     "icon": "bi bi-person-circle",
6.     "url": "/about.html",
7.     "newTab": false
8.   },
9.   {
10.     "name": "首页",
11.     "icon": "bi bi-house-door-fill",
12.     "url": "/",
13.     "newTab": false
14.   },
15.   {
16.     "name": "归档",
17.     "icon": "bi bi-archive-fill",
18.     "url": "/archive.html",
19.     "newTab": false
20.   },
21. {
22.     "name": "下载",
23.     "icon": "bi bi-cloud-arrow-down-fill",
24.     "url": "/download.html",
25.     "newTab": false
26.   },
27.   {
28.     "name": "随机",
29.     "icon": "bi bi-cursor-fill",
30.     "url": "/random.html",
31.     "newTab": false
32.   }
33. ]

复制代码

中间头部分类

1. # 点击 管理 -> 分类，创建多个分类，依次点击查看地址栏中的"mid"值是多少
2. 1 || 2 || 3 || 4

复制代码

给左下角添加发送邮件的按钮

1. # /Jasmine/inc/components/left-sidebar.php，在最下方 ul 中添加一个li
3. <li >
4.   
5.     <i ></i>
6.   
7. </li>
10. # /Jasmine/assets/jasmine/jasmine.js，在下面添加这段代码
12. // mailToMe
13. $('#mailToMe').on('click', function () {
14.   window.location.href = 'mailto:975942219@qq.com'; // 发送邮件
15. })

复制代码

最下方添加访问量统计

1. # 下载插件(https://github.com/51la/51la-Analysis-Typecho-Plugin)，重命名为LaAnalysis，复制到下面路径中，开启插件
2. cd /usr/local/lighthouse/softwares/typecho/usr/plugins
4. # 登录网站 https://v6.51.la/ ，添加应用，复制统计ID中的掩码ID，粘贴到 typecho后台管理 -> 插件 -> 设置 -> MaskId
5. # 登录网站 https://v6.51.la/，查看应用，点击配置，选择 数据挂件Tab，编辑完挂件样式，复制下面代码
7. # 找到 footer.php 文件，最下方添加这段代码
8. cd /usr/local/lighthouse/softwares/typecho/usr/themes/jasmine
10. <p>
11.    
12. </p>

复制代码

最下方添加备案图标

1. # 找到 footer.php 文件，最下方添加这段代码
4. <p >
5.   
6.   <svg t="1620356167087"  viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7694" width="20" height="20"><path d="M778.24 163.84c-76.8-40.96-165.888-61.44-269.312-61.44s-192.512 20.48-269.312 61.44h-133.12l23.552 337.92c8.192 113.664 67.584 217.088 162.816 280.576l215.04 144.384 215.04-144.384c96.256-63.488 155.648-166.912 163.84-280.576l23.552-337.92H778.24z m47.104 333.824c-7.168 94.208-56.32 181.248-135.168 233.472l-181.248 120.832L327.68 731.136c-78.848-53.248-129.024-139.264-135.168-233.472L173.056 225.28h136.192v-26.624c58.368-23.552 124.928-34.816 199.68-34.816s141.312 12.288 199.68 34.816V225.28H844.8l-19.456 272.384z" fill="#0649D0" p-id="7695"></path><path d="M685.056 328.704v-46.08H455.68c2.048-4.096 6.144-9.216 11.264-15.36 5.12-7.168 9.216-12.288 11.264-15.36L419.84 240.64c-31.744 46.08-75.776 87.04-133.12 123.904 4.096 4.096 10.24 11.264 18.432 21.504l17.408 17.408c23.552-15.36 45.056-31.744 63.488-50.176 26.624 25.6 49.152 43.008 67.584 51.2-46.08 15.36-104.448 27.648-175.104 35.84 2.048 5.12 6.144 13.312 9.216 24.576 4.096 11.264 6.144 19.456 7.168 24.576l39.936-7.168v218.112H389.12V680.96h238.592v19.456h54.272V481.28H348.16c60.416-12.288 114.688-27.648 163.84-46.08 49.152 19.456 118.784 34.816 210.944 46.08 5.12-17.408 10.24-34.816 17.408-51.2-62.464-4.096-116.736-12.288-161.792-24.576 38.912-20.48 74.752-46.08 106.496-76.8z m-150.528 194.56h94.208v41.984h-94.208v-41.984z m0 78.848h94.208v41.984h-94.208v-41.984z m-144.384-78.848h94.208v41.984H390.144v-41.984z m0 78.848h94.208v41.984H390.144v-41.984zM424.96 326.656h182.272c-26.624 22.528-57.344 41.984-94.208 57.344-31.744-15.36-61.44-34.816-88.064-57.344z" fill="#0649D0" p-id="7696"></path></svg>
8.   <a href="https://beian.miit.gov.cn/" target="_blank"><?php $this->options->icpCode(); ?></a>
9. </p>

复制代码

添加文章浏览次数统计

1. # 参考文档 https://www.cnblogs.com/outsrkem/p/12182275.html
3. # 控制台 -> 编辑当前外观 -> 找到 functions.php 文件，添加代码
5. /**
6. * 文章添加浏览次数统计
7. */
8. function Postviews($archive) {
9.     $db = Typecho_Db::get();
10.     $cid = $archive->cid;
11.     if (!array_key_exists('views', $db->fetchRow($db->select()->from('typecho_contents')))) {
12.         $db->query('ALTER TABLE `'.$db->getPrefix().'typecho_contents` ADD `views` INT(10) DEFAULT 0;');
13.     }
14.     $exist = $db->fetchRow($db->select('views')->from('typecho_contents')->where('cid = ?', $cid))['views'];
15.     if ($archive->is('single')) {
16.         $cookie = Typecho_Cookie::get('contents_views');
17.         $cookie = $cookie ? explode(',', $cookie) : array();
18.         if (!in_array($cid, $cookie)) {
19.             $db->query($db->update('typecho_contents')
20.                 ->rows(array('views' => (int)$exist+1))
21.                 ->where('cid = ?', $cid));
22.             $exist = (int)$exist+1;
23.             array_push($cookie, $cid);
24.             $cookie = implode(',', $cookie);
25.             Typecho_Cookie::set('contents_views', $cookie);
26.         }
27.     }
28.     echo $exist == 0 ? ' 暂无阅读' :$exist.' 人浏览';
29. }
32. # 调用方式。我是用的 Jasmine 主题，所以文章浏览页面是 middle-single.php，添加代码(大约在35行左右)
33. # 这个页面是必加的，否则不能实现计数功能。其他页面还需调用则添加同样代码
34. # 查看所有文章概况时，也可添加上 (default-item.php)
38. <?php Postviews($this); ?>

复制代码

添加友链功能

1. # 添加友链独立页面 link.html,粘贴如下代码
3. <table>
5.    
6.       
7.          
8.             
9.                <img  src="https://cdn.jsdelivr.net/gh/hvnobug/assets/common/avatar.png" />
10.                
11.                   
12.                      <a target="_blank" href="https://blog.hvnobug.com/">Emil’s blog</a>
13.                   
14.                   这是一个分享IT技术的小站。
15.                
16.             
17.             
18.                <img  src="https://blog-images-1301001018.cos.ap-beijing.myqcloud.com/favicon.png" />
19.                
20.                   
21.                      <a target="_blank" href="https://yingwiki.top">越行勤's Blog</a>
22.                   
23.                   努力学习的小菜鸟
24.                
25.             
26.          
27.       
28.    
30. </table>
33. # 主图外观中，左边菜单栏添加如下代码
35. {
36.     "name": "友链",
37.     "icon": "bi bi-people-fill",
38.     "url": "/link.html",
39.     "newTab": false
40.   }
43. # 主图外观中，自定义样式添加如下代码
45. .links-content {
46.     margin-top: 1rem
47. }
49. .link-navigation::after {
50.     content: " ";
51.     display: block;
52.     clear: both
53. }
55. .card {
56.     width: 45%;
57.     font-size: 1rem;
58.     padding: 10px 30px;
59.     border-radius: 4px;
60.     transition-duration: 0.15s;
61.     margin-bottom: 1rem;
62.     display: flex;
63.     border-style:none;
64. }
66. .card:nth-child(odd) {
67.     float: left
68. }
70. .card:nth-child(even) {
71.     /* float: right */
72. }
74. .card:hover {
75.     transform: scale(1.1);
76.     box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.12), 0 0 6px 0 rgba(0, 0, 0, 0.04)
77. }
79. .card a {
80.     border: none
81. }
83. .card .ava {
84.     width: 3rem !important;
85.     height: 3rem !important;
86.     margin: 0 !important;
87.     margin-right: 1em !important;
88.     border-radius: 4px
89. }
91. .card .card-header {
92.     font-style: italic;
93.     overflow: hidden;
94.     width: 100%
95. }
97. .card .card-header a {
98.     font-style: normal;
99.     color: #2bbc8a;
100.     font-weight: bold;
101.     text-decoration: none
102. }
104. .card .card-header a:hover {
105.     color: #d480aa;
106.     text-decoration: none
107. }
109. .card .card-header .info {
110.     font-style: normal;
111.     color: #a3a3a3;
112.     font-size: 14px;
113.     min-width: 0;
114.     overflow: hidden;
115.     white-space: nowrap
116. }

复制代码

1. # 以后每次添加友链复制一份，手动修改内容
3. # 名称 {name}
4. # 链接 {link}
5. # 头像 https://www.cnblogs.com/{avatarurl}
6. # 简介 {description}
9.    <img  src="https://www.cnblogs.com/{avatarurl}" />
10.    
11.       
12.          <a target="_blank" href="https://www.cnblogs.com/{link}">{name}</a>
13.       
14.       {description}
15.    

复制代码

手动配置SSL，并使用域名访问

如果在安装Typecho应用模版前，没有购买域名、备案、申请SSL，通过以下内容，手动配置。

• 添加域名(hupifeng.cn)，申请对应域名的证书，右侧下载Nginx证书
  
• 将 hupifeng.cn_bundle.crt，hupifeng.cn.key 两个文件拷贝到此目录/local/lighthouse/softwares/nginx/certificates)
  
• 查看 /usr/local/lighthouse/softwares/nginx/conf/include 路径下 hupifeng.cn.conf（如果没有对应域名的配置文件，手动添加）
  

1. # https hupifeng.cn.conf 的配置
2. # "hupifeng.cn"相关的五个地方需要手动修改成自己的域名
4. server {
5.   listen 443 ssl;
6.   server_name hupifeng.cn;
7.   server_tokens off;
8.   keepalive_timeout 10;
9.   ssl_certificate /usr/local/lighthouse/softwares/nginx/certificates/hupifeng.cn_bundle.crt;
10.   ssl_certificate_key /usr/local/lighthouse/softwares/nginx/certificates/hupifeng.cn.key;
11.   ssl_session_timeout 5m;
12.   ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
13.   ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:HIGH:!aNULL:!MD5:!RC4:!DHE;
14.   ssl_prefer_server_ciphers on;
16.   index index.php index.html;
18.   root /usr/local/lighthouse/softwares/typecho;
19.   if (!-e $request_filename) {
20.     rewrite ^(.*)$ /index.php$1 last;
21.   }
23.   location ~ .*\.php(\/.*)*$ {
24.     include fastcgi.conf;
25.     fastcgi_pass 127.0.0.1:9000;
26.   }
28.   # 禁 止 访 问 的 文 件 或 目 录
29.   location ~ ^/(\.user.ini|\.htaccess|\.git|\.svn|\.project|LICENSE|README.md) {
30.     return 404;
31.   }
33.   location ~ \.well-known {
34.     allow all;
35.   }
37.   access_log "logs//hupifeng.cn.log";
38.   error_log "logs//hupifeng.cn.error.log";
39. }

复制代码

设置 HTTP 请求自动跳转 HTTPS

1. # 作用，下次打开http链接会自动转到https
2. # 在 hupifeng.cn.conf 文件后继续追加如下内容
4. server {
5.     listen 80;
6.     #请 填 写 绑 定 证 书 的 域 名
7.     server_name hupifeng.cn;
8.     #把 http的 域 名 请 求 转 成 https
9.     return 301 https://$host$request_uri;
10. }

复制代码

启用、重启nginx

1. # 查看Nginx进程运行状态
2. ps -ef | grep nginx

复制代码

1. # 开启、停止、重启
2. cd /usr/local/lighthouse/softwares/nginx/sbin
4. ./nginx
6. ./nginx -s stop
8. ./nginx -s reload

复制代码

1. # 或者一条命令重启
2. /usr/local/lighthouse/softwares/nginx/sbin/nginx -s reload

复制代码

来源:https://www.cnblogs.com/DotNeter-Hpf/p/17420874.html
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！