Chủ đề Blog Cá Nhân - new88066

Nhiều người đã hỏi tôi về cách cấu hình và thiết lập chủ đề blog, vì vậy hôm nay tôi sẽ viết một bài chi tiết để giới thiệu. Đồng thời, bài viết này cũng có thể coi như là một bản backup cho các thao tác của tôi.

Tôi đang sử dụng chương trình Typecho làm nền tảng blog, và chủ đề hiện tại được phát triển dựa trên chủ đề mặc định của Typecho với một số chỉnh sửa nhỏ.

1. Chỉnh sửa Font chữ

Trước hết, trong tập tin header.php của chủ đề, bạn cần thêm dòng sau:

<link rel="stylesheet" href="

Sau đó, mở file style.css và chỉnh sửa phần font-family cho các phần tử body và các thẻ tiêu đề từ h1 đến h6. Cụ thể như sau:

body {
  background-color: #FFF;
  color: #444;
  font-family: "LXGW WenKai Screen", "Droid Serif", Georgia, "Times New Roman", "PingFang SC", "Hiragino Sans GB", "Source Han Sans CN", "WenQuanYi Micro Hei", "Microsoft Yahei", serif;
  font-size: 100%;
}

h1, h2, h3, h4, h5, h6 {
  font-family: "LXGW WenKai Screen", "Droid Serif", Georgia, "Times New Roman", "PingFang SC", "Hiragino Sans GB", "Source Han Sans CN", "WenQuanYi Micro Hei", "Microsoft Yahei", serif;
}

Việc thay đổi font chữ giúp trang web trông chuyên nghiệp hơn và tăng trải nghiệm đọc new88066 cho người dùng.

2. Thêm thông tin vào chân trang (Footer)

Để hiển thị số ngày hoạt động của trang web cùng với số lượng bài viết và bình luận, bạn có thể thêm đoạn mã sau vào file footer.php:

<?php
$unixTime_1 = "1422748800"; // Thời gian bắt đầu hoạt động
$unixTime_2 = time(); // Thời gian hiện tại
$timediff = abs($unixTime_2 - $unixTime_1); // Tính khoảng cách thời gian
$days = intval($timediff / 86400); // Chuyển sang đơn vị ngày
echo "Trang web đã hoạt động trong " . $days . " ngày."; 
?>
<?php $stat = Typecho_Widget::widget('Widget_Stat');?>
Tổng cộng <?php echo $stat->PublishedPostsNum;?> bài viết và <?php echo $stat->publishedCommentsNum;?> bình luận.

Đoạn mã này không chỉ cung cấp thông tin hữu ích mà còn tạo điểm nhấn thú vị cho người ghé thăm.

3. Thêm chú thích cho hình ảnh

Để cải thiện khả năng mô tả hình ảnh, trước tiên bạn cần chỉnh sửa tập tin var/HyperDown.php. Thay thế phần mã HTML của hình ảnh bằng đoạn mã sau:

<figure>
  <img class=\"skyimg\" src=\" alt=\"{$escaped}\" title=\"{$escaped}\">
  <figcaption class=\"image-caption\">{$escaped}</figcaption>
</figure>

Tiếp theo, bổ sung các quy tắc CSS sau vào file style.css để đảm bảo hình ảnh hiển thị đẹp mắt:

figure {
    border-style: solid;
    border-width: 1px;
    border-color: #e7e7e7;
    padding: 2px;
}

.image-caption {
  color: #999999;
  text-align: center;
}

Những thay đổi trên sẽ giúp hình ảnh trên blog của bạn không chỉ nổi bật hơn mà còn dễ dàng hiểu ý nghĩa qua chú thích bên dưới.