Typecho搭建和美化

来源:https://www.cnblogs.com/DotNeter-Hpf/archive/2023/05/22/17420874.html
-Advertisement-
Play Games

# 概述 Typecho是一款輕量級的開源PHP博客系統，它簡單易用，界面整潔，性能高效，主題、插件眾多。我使用的是騰訊雲輕量伺服器，Typecho的應用模版，一鍵安裝環境。構建自己的博客網站，記錄生活、分享經驗。 ## 購買功能變數名稱、備案、申請SSL 這樣在之後創建完typecho伺服器，就會在ngi ...


概述

Typecho是一款輕量級的開源PHP博客系統，它簡單易用，界面整潔，性能高效，主題、插件眾多。我使用的是騰訊雲輕量伺服器，Typecho的應用模版，一鍵安裝環境。構建自己的博客網站，記錄生活、分享經驗。

購買功能變數名稱、備案、申請SSL

這樣在之後創建完typecho伺服器，就會在nginx中直接添加對應功能變數名稱的https的配置。
若沒有功能變數名稱也沒問題，使用 ip+port 的形式訪問。

購買雲伺服器

userlmn_6a26d3e033ca83ec9603915d34a9ec46

獲取伺服器相關賬號密碼

# 應用管理 -> 管理員密碼 -> 複製 -> 登錄 -> 粘貼 -> ⏎
# 獲取以下賬號和密碼，保存好
# typecho_username = xxx
# typecho_password = xxx
# mariadb_password = xxx

# 若遠程連接MariaDB，報錯1130，說明在MariaDB上沒有為 Navicat 運行的主機 IP 授予資料庫訪問許可權
# 將navicat提示的報錯ip替換下麵"IP"，將上述記錄的資料庫密碼替換下麵"Password"。進入伺服器資料庫，執行
mysql -uroot -p
GRANT ALL PRIVILEGES ON *.* TO 'root'@'IP' IDENTIFIED BY 'Password' WITH GRANT OPTION;
userlmn_511c9c8d24b0bb19bc92a119bc63fdd5

Typecho主題的使用以及美化

以下包括Jasmine主題的基本配置，個人優化。

使用主題

# 參考文檔：https://gitee.com/LiaoChunping/Jasmine/wikis/Home
# 將主題下載，並放到下麵目錄中
cd /usr/local/lighthouse/softwares/typecho/usr/themes

# 解壓
unzip jasmine.zip

# 登錄後臺管理頁面 http://xxx.xx.xx.xxx/admin
# 控制台 -> 外觀 ，就能看到新增的主題
# 點擊 設置外觀 Tab, 按下麵步驟說明操作

設置網站地址欄圖標

cd /usr/local/lighthouse/softwares/typecho
# 複製一個 favicon.ico 文件上去，瀏覽器清理緩存，再刷新查看

設置站點logo地址

# png格式，我這裡是使用騰訊雲的對象存儲來保存圖片

左側菜單欄

首先需要創建對應獨立頁面，歸檔、隨機菜單，創建時，需要選擇“自定義模版”

 
[
  {
    "name": "關於",
    "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
  }
]

中間頭部分類

# 點擊 管理 -> 分類，創建多個分類，依次點擊查看地址欄中的"mid"值是多少
1 || 2 || 3 || 4

給左下角添加發送郵件的按鈕

# /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:[email protected]'; // 發送郵件
})

最下方添加訪問量統計

# 下載插件(https://github.com/51la/51la-Analysis-Typecho-Plugin)，重命名為LaAnalysis，複製到下麵路徑中，開啟插件
cd /usr/local/lighthouse/softwares/typecho/usr/plugins

# 登錄網站 https://v6.51.la/ ，添加應用，複製統計ID中的掩碼ID，粘貼到 typecho後臺管理 -> 插件 -> 設置 -> MaskId
# 登錄網站 https://v6.51.la/，查看應用，點擊配置，選擇 數據掛件Tab，編輯完掛件樣式，複製下麵代碼

# 找到 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.51.la/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>

最下方添加備案圖標

# 找到 footer.php 文件，最下方添加這段代碼


<p style="display: inline-flex; align-items: center;">
  <!--版權圖標-->
  <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 href="https://beian.miit.gov.cn/" target="_blank"><?php $this->options->icpCode(); ?></a>
</p>

添加文章瀏覽次數統計

# 參考文檔 https://www.cnblogs.com/outsrkem/p/12182275.html

# 控制台 -> 編輯當前外觀 -> 找到 functions.php 文件，添加代碼

/**
 * 文章添加瀏覽次數統計
 */
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.' 人瀏覽';
}


# 調用方式。我是用的 Jasmine 主題，所以文章瀏覽頁面是 middle-single.php，添加代碼(大約在35行左右)
# 這個頁面是必加的，否則不能實現計數功能。其他頁面還需調用則添加同樣代碼
# 查看所有文章概況時，也可添加上 (default-item.php)

<!-- 添加頁面瀏覽次數統計 -->
<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 href="https://blog.hvnobug.com/">Emil’s blog</a>
                  </div>
                  <div class="info">這是一個分享IT技術的小站。</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 href="https://yingwiki.top">越行勤's Blog</a>
                  </div>
                  <div class="info">努力學習的小菜鳥</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
}

# 以後每次添加友鏈複製一份，手動修改內容

# 名稱 {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應用模版前，沒有購買功能變數名稱、備案、申請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（如果沒有對應功能變數名稱的配置文件，手動添加）
# https hupifeng.cn.conf 的配置
# "hupifeng.cn"相關的五個地方需要手動修改成自己的功能變數名稱

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";
}

設置 HTTP 請求自動跳轉 HTTPS

# 作用，下次打開http鏈接會自動轉到https
# 在 hupifeng.cn.conf 文件後繼續追加如下內容

server {
    listen 80;
    #請 填 寫 綁 定 證 書 的 域 名
    server_name hupifeng.cn;
    #把 http的 域 名 請 求 轉 成 https
    return 301 https://$host$request_uri;
}

啟用、重啟nginx

# 查看Nginx進程運行狀態
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

您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 在Winform中一分鐘入門使用好看性能還好的Blazor Hybrid
    # 在Winform中一分鐘入門使用好看性能還好的Blazor Hybrid ## 安裝模板 ```shell dotnet new install Masa.Template::1.0.0-rc.2 ``` ## 創建 Winform的Blazor Hybrid項目 ```shell dotnet ...
  • XAF Excel Importer
    #### 開源項目地址：https://gitee.com/easyxaf/excel-importer ### 前言 在XAF中有Excel導出，但沒有Excel導入，一開始不理解，難道Excel導入很難實現嗎，當我自己去實現Excel導入功能時，才發現難的不是技術，而是要有足夠的靈活性，在不同的 ...
  • WPF入門教程系列二十五——DataGrid使用示例(2)
    🥑本篇為學習博客園大佬聖殿騎士的《WPF基礎到企業應用系列》以及部分DotNet菜園的《WPF入門教程系列》所作筆記，對應聖殿騎士《WPF基礎到企業應用系列》第 1 - 6 章之間內容，包括 WPF 項目結構、程式的啟動和關閉、程式的生命周期、繼承關係以及常見的佈局控制項及其應用。文章有問題的話歡迎... ...
  • ARM64啟動彙編和記憶體初始化(上) --- (一)
    文章代碼分析基於linux-5.19.13，架構基於aarch64（ARM64）。 涉及頁表代碼分析部分： （1）假設頁表映射層級是4，即配置CONFIG_ARM64_PGTABLE_LEVELS=4； （2）虛擬地址寬度是48，即配置CONFIG_ARM64_VA_BITS=48； （3）物理地址 ...
  • STM32為何在諸多的單片機中脫穎而出？
    ​1、前言 在STM32之前，都是老大頭51，帶著它的“小弟們” MSP430、AVR、PIC在單片機界呼風喚雨。那個時候，市場上遍佈8位機，大學教材用51入門，個人、企業學單片機基本上也都在用51。 雖然AVR也有一些8位機市場，但與stc帶領下的51單片機是完全不能相比的。當然，這個時候也有16 ...
  • VMware虛擬機聯網詳述
    # VMware虛擬機聯網詳述 > 網路上東西都是虛擬的，你把握不住 ## 1. 虛擬網路組件 * **虛擬機**（Virtual Machine） 在物理電腦上通過虛擬化技術創建的一臺虛擬電腦。它具有自己的操作系統、應用程式和網路配置，可以獨立運行和管理。 * **虛擬化軟體**（Virtua ...
  • 痞子衡嵌入式：MCUBootUtility v5.0發佈，初步支持i.MXRT1180
    -- 痞子衡維護的NXP-MCUBootUtility工具距離上一個大版本(v4.0.0)發佈過去4個多月了，期間痞子衡也做過兩個小版本更新，但不足以單獨介紹。這一次痞子衡為大家帶來了全新大版本v5.0.0，這次更新主要是想和大家特別聊聊恩智浦新一代 i.MXRT 旗艦 RT1180。 ### 一、 ...
  • [Linux學習]NAT模式下虛擬機和主機無法互相ping的問題解決
    主機操作系統：windows11 虛擬機操作系統：centos7、kali vmware版本：16 (27條消息) 超詳細虛擬機與主機網路連接以及互Ping不通問題的解決_虛擬機無法ping通主機_一隻傻陽陽的博客-CSDN博客 通過此連接中的教程，事實上幾乎沒有進行什麼配置，僅配置了centos7 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類