概述
Typecho是一款輕量級的開源PHP博客系統(tǒng)，它簡單易用，界面整潔，性能高效，主題、插件眾多。我使用的是騰訊云輕量服務(wù)器，Typecho的應(yīng)用模版，一鍵安裝環(huán)境。構(gòu)建自己的博客網(wǎng)站，記錄生活、分享經(jīng)驗。
購買域名、備案、申請SSL
這樣在之后創(chuàng)建完typecho服務(wù)器，就會在nginx中直接添加對應(yīng)域名的https的配置。
若沒有域名也沒問題，使用 ip+port 的形式訪問。
購買云服務(wù)器
獲取服務(wù)器相關(guān)賬號密碼
# 應(yīng)用管理 -> 管理員密碼 -> 復(fù)制 -> 登錄 -> 粘貼 -> ?
# 獲取以下賬號和密碼，保存好
# typecho_username = xxx
# typecho_password = xxx
# mariadb_password = xxx
# 若遠(yuǎn)程連接MariaDB，報錯1130，說明在MariaDB上沒有為 Navicat 運行的主機 IP 授予數(shù)據(jù)庫訪問權(quán)限
# 將navicat提示的報錯ip替換下面"IP"，將上述記錄的數(shù)據(jù)庫密碼替換下面"Password"。進入服務(wù)器數(shù)據(jù)庫，執(zhí)行
mysql -uroot -p
GRANT ALL PRIVILEGES ON *.* TO 'root'@'IP' IDENTIFIED BY 'Password' WITH GRANT OPTION;
Typecho主題的使用以及美化
以下包括Jasmine主題的基本配置，個人優(yōu)化。
使用主題
# 參考文檔：https://gitee.com/LiaoChunping/Jasmine/wikis/Home
# 將主題下載，并放到下面目錄中
cd /usr/local/lighthouse/softwares/typecho/usr/themes
# 解壓
unzip jasmine.zip
# 登錄后臺管理頁面 http://xxx.xx.xx.xxx/admin
# 控制臺 -> 外觀 ，就能看到新增的主題
# 點擊 設(shè)置外觀 Tab, 按下面步驟說明操作
設(shè)置網(wǎng)站地址欄圖標(biāo)
cd /usr/local/lighthouse/softwares/typecho
# 復(fù)制一個 favicon.ico 文件上去，瀏覽器清理緩存，再刷新查看
設(shè)置站點logo地址
# png格式，我這里是使用騰訊云的對象存儲來保存圖片
左側(cè)菜單欄
首先需要創(chuàng)建對應(yīng)獨立頁面，歸檔、隨機菜單，創(chuàng)建時，需要選擇“自定義模版”文章來源：http://www.zghlxwxcb.cn/news/detail-454782.html
[
{
"name": "關(guān)于",
"icon": "bi bi-person-circle",
"url": "/about.html",
"newTab": false
},
{
"name": "首頁",
"icon": "bi bi-house-door-fill",
"url": "/",
"newTab": false
},
{
"name": "歸檔",
"icon": "bi bi-archive-fill",
"url": "/archive.html",
"newTab": false
},
{
"name": "下載",
"icon": "bi bi-cloud-arrow-down-fill",
"url": "/download.html",
"newTab": false
},
{
"name": "隨機",
"icon": "bi bi-cursor-fill",
"url": "/random.html",
"newTab": false
}
]
中間頭部分類
# 點擊 管理 -> 分類，創(chuàng)建多個分類，依次點擊查看地址欄中的"mid"值是多少
1 || 2 || 3 || 4
給左下角添加發(fā)送郵件的按鈕
# /Jasmine/inc/components/left-sidebar.php，在最下方 ul 中添加一個li
<li class="nav-item mb-2">
<span role="button" class="nav-link" id="mailToMe"
data-bs-toggle="tooltip"
data-bs-title="郵件Me我"
data-bs-placement="right"
title="郵件Me我">
<i class="bi bi-envelope-fill"></i>
</span>
</li>
# /Jasmine/assets/jasmine/jasmine.js，在下面添加這段代碼
// mailToMe
$('#mailToMe').on('click', function () {
window.location.href = 'mailto:975942219@qq.com'; // 發(fā)送郵件
})
最下方添加訪問量統(tǒng)計
# 下載插件(https://github.com/51la/51la-Analysis-Typecho-Plugin)，重命名為LaAnalysis，復(fù)制到下面路徑中，開啟插件
cd /usr/local/lighthouse/softwares/typecho/usr/plugins
# 登錄網(wǎng)站 https://v6.#/ ，添加應(yīng)用，復(fù)制統(tǒng)計ID中的掩碼ID，粘貼到 typecho后臺管理 -> 插件 -> 設(shè)置 -> MaskId
# 登錄網(wǎng)站 https://v6.#/，查看應(yīng)用，點擊配置，選擇 數(shù)據(jù)掛件Tab，編輯完掛件樣式，復(fù)制下面代碼
# 找到 footer.php 文件，最下方添加這段代碼
cd /usr/local/lighthouse/softwares/typecho/usr/themes/jasmine
<p>
<script id="LA-DATA-WIDGET" crossorigin="anonymous" charset="UTF-8" src="https://v6-widget.#/v6/K3UZ8NL244OguW9Q/quote.js?theme=#5E595A,#333333,#999999,#333333,#FFFFFF,#FD6591,12&f=12&display=0,0,1,1,0,0,1,1"></script>
</p>
最下方添加備案圖標(biāo)
# 找到 footer.php 文件，最下方添加這段代碼
<p style="display: inline-flex; align-items: center;">
<!--版權(quán)圖標(biāo)-->
<svg t="1620356167087" class="icon" 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>
<a target="_blank"><?php $this->options->icpCode(); ?></a>
</p>
添加文章瀏覽次數(shù)統(tǒng)計
# 參考文檔 https://www.cnblogs.com/outsrkem/p/12182275.html
# 控制臺 -> 編輯當(dāng)前外觀 -> 找到 functions.php 文件，添加代碼
/**
* 文章添加瀏覽次數(shù)統(tǒng)計
*/
function Postviews($archive) {
$db = Typecho_Db::get();
$cid = $archive->cid;
if (!array_key_exists('views', $db->fetchRow($db->select()->from('typecho_contents')))) {
$db->query('ALTER TABLE `'.$db->getPrefix().'typecho_contents` ADD `views` INT(10) DEFAULT 0;');
}
$exist = $db->fetchRow($db->select('views')->from('typecho_contents')->where('cid = ?', $cid))['views'];
if ($archive->is('single')) {
$cookie = Typecho_Cookie::get('contents_views');
$cookie = $cookie ? explode(',', $cookie) : array();
if (!in_array($cid, $cookie)) {
$db->query($db->update('typecho_contents')
->rows(array('views' => (int)$exist+1))
->where('cid = ?', $cid));
$exist = (int)$exist+1;
array_push($cookie, $cid);
$cookie = implode(',', $cookie);
Typecho_Cookie::set('contents_views', $cookie);
}
}
echo $exist == 0 ? ' 暫無閱讀' :$exist.' 人瀏覽';
}
# 調(diào)用方式。我是用的 Jasmine 主題，所以文章瀏覽頁面是 middle-single.php，添加代碼(大約在35行左右)
# 這個頁面是必加的，否則不能實現(xiàn)計數(shù)功能。其他頁面還需調(diào)用則添加同樣代碼
# 查看所有文章概況時，也可添加上 (default-item.php)
<!-- 添加頁面瀏覽次數(shù)統(tǒng)計 -->
<span class="middotDivider"></span>
<span><?php Postviews($this); ?></span>
添加友鏈功能
# 添加友鏈獨立頁面 link.html,粘貼如下代碼
<table>
<div class="post-body">
<div id="links">
<div class="links-content">
<div class="link-navigation">
<div class="card">
<img class="ava" src="https://cdn.jsdelivr.net/gh/hvnobug/assets/common/avatar.png" />
<div class="card-header">
<div>
<a >Emil’s blog</a>
</div>
<div class="info">這是一個分享IT技術(shù)的小站。</div>
</div>
</div>
<div class="card">
<img class="ava" src="https://blog-images-1301001018.cos.ap-beijing.myqcloud.com/favicon.png" />
<div class="card-header">
<div>
<a s Blog</a>
</div>
<div class="info">努力學(xué)習(xí)的小菜鳥</div>
</div>
</div>
</div>
</div>
</div>
</div>
</table>
# 主圖外觀中，左邊菜單欄添加如下代碼
{
"name": "友鏈",
"icon": "bi bi-people-fill",
"url": "/link.html",
"newTab": false
}
# 主圖外觀中，自定義樣式添加如下代碼
.links-content {
margin-top: 1rem
}
.link-navigation::after {
content: " ";
display: block;
clear: both
}
.card {
width: 45%;
font-size: 1rem;
padding: 10px 30px;
border-radius: 4px;
transition-duration: 0.15s;
margin-bottom: 1rem;
display: flex;
border-style:none;
}
.card:nth-child(odd) {
float: left
}
.card:nth-child(even) {
/* float: right */
}
.card:hover {
transform: scale(1.1);
box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.12), 0 0 6px 0 rgba(0, 0, 0, 0.04)
}
.card a {
border: none
}
.card .ava {
width: 3rem !important;
height: 3rem !important;
margin: 0 !important;
margin-right: 1em !important;
border-radius: 4px
}
.card .card-header {
font-style: italic;
overflow: hidden;
width: 100%
}
.card .card-header a {
font-style: normal;
color: #2bbc8a;
font-weight: bold;
text-decoration: none
}
.card .card-header a:hover {
color: #d480aa;
text-decoration: none
}
.card .card-header .info {
font-style: normal;
color: #a3a3a3;
font-size: 14px;
min-width: 0;
overflow: hidden;
white-space: nowrap
}
# 以后每次添加友鏈復(fù)制一份，手動修改內(nèi)容
# 名稱 {name}
# 鏈接 {link}
# 頭像 {avatarurl}
# 簡介 {description}
<div class="card">
<img class="ava" src="{avatarurl}" />
<div class="card-header">
<div>
<a href="{link}">{name}</a>
</div>
<div class="info">{description}</div>
</div>
</div>
手動配置SSL，并使用域名訪問
如果在安裝Typecho應(yīng)用模版前，沒有購買域名、備案、申請SSL，通過以下內(nèi)容，手動配置。文章來源地址http://www.zghlxwxcb.cn/news/detail-454782.html
- 添加域名(hupifeng.cn)，申請對應(yīng)域名的證書，右側(cè)下載Nginx證書
- 將 hupifeng.cn_bundle.crt，hupifeng.cn.key 兩個文件拷貝到此目錄/local/lighthouse/softwares/nginx/certificates)
- 查看 /usr/local/lighthouse/softwares/nginx/conf/include 路徑下 hupifeng.cn.conf（如果沒有對應(yīng)域名的配置文件，手動添加）
# https hupifeng.cn.conf 的配置
# "hupifeng.cn"相關(guān)的五個地方需要手動修改成自己的域名
server {
listen 443 ssl;
server_name hupifeng.cn;
server_tokens off;
keepalive_timeout 10;
ssl_certificate /usr/local/lighthouse/softwares/nginx/certificates/hupifeng.cn_bundle.crt;
ssl_certificate_key /usr/local/lighthouse/softwares/nginx/certificates/hupifeng.cn.key;
ssl_session_timeout 5m;
ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:HIGH:!aNULL:!MD5:!RC4:!DHE;
ssl_prefer_server_ciphers on;
index index.php index.html;
root /usr/local/lighthouse/softwares/typecho;
if (!-e $request_filename) {
rewrite ^(.*)$ /index.php$1 last;
}
location ~ .*\.php(\/.*)*$ {
include fastcgi.conf;
fastcgi_pass 127.0.0.1:9000;
}
# 禁 止 訪 問 的 文 件 或 目 錄
location ~ ^/(\.user.ini|\.htaccess|\.git|\.svn|\.project|LICENSE|README.md) {
return 404;
}
location ~ \.well-known {
allow all;
}
access_log "logs//hupifeng.cn.log";
error_log "logs//hupifeng.cn.error.log";
}
設(shè)置 HTTP 請求自動跳轉(zhuǎn) HTTPS
# 作用，下次打開http鏈接會自動轉(zhuǎn)到https
# 在 hupifeng.cn.conf 文件后繼續(xù)追加如下內(nèi)容
server {
listen 80;
#請 填 寫 綁 定 證 書 的 域 名
server_name hupifeng.cn;
#把 http的 域 名 請 求 轉(zhuǎn) 成 https
return 301 https://$host$request_uri;
}
啟用、重啟nginx
# 查看Nginx進程運行狀態(tài)
ps -ef | grep nginx
# 開啟、停止、重啟
cd /usr/local/lighthouse/softwares/nginx/sbin
./nginx
./nginx -s stop
./nginx -s reload
# 或者一條命令重啟
/usr/local/lighthouse/softwares/nginx/sbin/nginx -s reload
到了這里，關(guān)于Typecho搭建和美化的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
