[Typecho]joe主题优化记录

宗同学
2025-03-03 / 0 评论 / 135 阅读 / 正在检测是否收录... / 搜一下
温馨提示:
本文最后更新于2025年03月04日,已超过57天没有更新,若内容或图片失效,请留言反馈。

表情 作为一个代码小白,优化全是靠腾讯云的 元宝AI 给我优化建议,下面我将给大家列出优化的文件及优化前后的代码。



听歌

m7sxohyx.png


优化的文件列表

  • config.php
  • include.php
  • friends.php

config.php

文件路径:/usr/themes/Joe/public

优化前的代码:

<script>
  localStorage.getItem("data-night") && document.querySelector("html").setAttribute("data-night", "night");
  window.Joe = {
    THEME_URL: `<?php Helper::options()->themeUrl() ?>`,
    BASE_API: `<?php echo $this->options->rewrite == 0 ? Helper::options()->rootUrl . '/index.php/joe/api' : Helper::options()->rootUrl . '/joe/api' ?>`,
    DYNAMIC_BACKGROUND: `<?php $this->options->JDynamic_Background() ?>`,
    WALLPAPER_BACKGROUND_PC: `<?php $this->options->JWallpaper_Background_PC() ?>`,
    IS_MOBILE: /windows phone|iphone|android/gi.test(window.navigator.userAgent),
    BAIDU_PUSH: <?php echo $this->options->JBaiduToken ? 'true' : 'false' ?>,
    DOCUMENT_TITLE: `<?php $this->options->JDocumentTitle() ?>`,
    LAZY_LOAD: `<?php _getLazyload() ?>`,
    BIRTHDAY: `<?php $this->options->JBirthDay() ?>`,
    MOTTO: `<?php _getAsideAuthorMotto() ?>`,
    PAGE_SIZE: `<?php $this->parameter->pageSize() ?>`
  }
</script>
<?php
$fontUrl = $this->options->JCustomFont;
if (strpos($fontUrl, 'woff2') !== false) $fontFormat = 'woff2';
elseif (strpos($fontUrl, 'woff') !== false) $fontFormat = 'woff';
elseif (strpos($fontUrl, 'ttf') !== false) $fontFormat = 'truetype';
elseif (strpos($fontUrl, 'eot') !== false) $fontFormat = 'embedded-opentype';
elseif (strpos($fontUrl, 'svg') !== false) $fontFormat = 'svg';
?>
<style>
  @font-face {
    font-family: 'Joe Font';
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    src: url('<?php echo $fontUrl ?>');
    <?php if ($fontFormat) : ?>src: url('<?php echo $fontUrl ?>') format('<?php echo $fontFormat ?>');
    <?php endif; ?>
  }

  body {
    <?php if ($fontUrl) : ?>font-family: 'Joe Font';
    <?php else : ?>font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
    <?php endif; ?>
  }

  body::before {
    background: <?php if (_isMobile()) {
                  echo $this->options->JWallpaper_Background_WAP ? "url(" . $this->options->JWallpaper_Background_WAP . ")" : "#f5f5f5";
                } else {
                  echo $this->options->JWallpaper_Background_PC ? "url(" . $this->options->JWallpaper_Background_PC . ")" : "#f5f5f5";
                } ?>;
    background-position: center 0;
    background-repeat: no-repeat;
    background-size: cover;
  }

  <?php $this->options->JCustomCSS() ?>
</style>

优化后的代码:

<?php
// short_open_tag短标签需开启
$options = $this->options;

// 方案 1:直接强制替换为 HTTPS
$rootUrl = preg_replace('/^http:/i', 'https:', $options->rootUrl);

// 或方案 2:动态判断协议(适合复杂环境)
// $isHttps = ... (上述动态判断逻辑)
// $rootUrl = ($isHttps ? 'https://' : 'http://') . parse_url($options->rootUrl, PHP_URL_HOST);

$apiPath = $this->options->rewrite == 0 ? '/index.php/joe/api' : '/joe/api';
$isMobile = _isMobile();

// 最终生成的 API 地址示例:https://www.nmssb.cn/joe/api
$apiUrl = $rootUrl . $apiPath;
// 字体处理优化
$fontUrl = $options->JCustomFont;
$fontFormat = '';
if ($fontUrl) {
    $extension = pathinfo($fontUrl, PATHINFO_EXTENSION);
    $formatMap = [
        'woff2' => 'woff2',
        'woff'  => 'woff',
        'ttf'   => 'truetype',
        'eot'   => 'embedded-opentype',
        'svg'   => 'svg'
    ];
    $fontFormat = $formatMap[strtolower($extension)] ?? '';
}

// 背景图处理优化
$backgroundImage = $isMobile 
    ? ($options->JWallpaper_Background_WAP ? "url({$options->JWallpaper_Background_WAP})" : "#f5f5f5")
    : ($options->JWallpaper_Background_PC ? "url({$options->JWallpaper_Background_PC})" : "#f5f5f5");
?>

<script>
//夜间模式处理
try {
    var nightMode = localStorage.getItem("data-night");
    if (nightMode) {
        document.documentElement.setAttribute('data-night', nightMode);
    }
} catch(e) { 
    console.error('LocalStorage error:', e); 
}

// 常量配置对象
window.Joe = {
    THEME_URL: `<?php echo $themeUrl ?>`,
    BASE_API: `<?php echo "{$rootUrl}{$apiPath}" ?>`,
    DYNAMIC_BACKGROUND: `<?php echo $options->JDynamic_Background() ?>`,
    WALLPAPER_BACKGROUND_PC: `<?php echo $options->JWallpaper_Background_PC() ?>`,
    IS_MOBILE: <?php echo $isMobile ? 'true' : 'false' ?>,
    BAIDU_PUSH: <?php echo $options->JBaiduToken ? 'true' : 'false' ?>,
    DOCUMENT_TITLE: `<?php echo $options->JDocumentTitle() ?>`,
    LAZY_LOAD: `<?php echo _getLazyload() ?>`,
    BIRTHDAY: `<?php echo $options->JBirthDay() ?>`,
    MOTTO: `<?php echo _getAsideAuthorMotto() ?>`,
    PAGE_SIZE: `<?php echo $this->parameter->pageSize() ?>`
};
</script>

<style>
/* 字体声明 */
<?php if ($fontUrl) : ?>
@font-face {
    font-family: 'Joe Font';
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    src: url('<?php echo $fontUrl ?>')<?php echo $fontFormat ? " format('{$fontFormat}')" : '' ?>;
}
<?php endif; ?>

/* 动态背景 */
body {
    font-family: <?php echo $fontUrl ? "'Joe Font'" : 
        "'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif" ?>;
}

body::before {
    background: <?php echo $backgroundImage ?>;
    background-position: center 0;
    background-repeat: no-repeat;
    background-size: cover;
}

/* 自定义CSS */
<?php echo $options->JCustomCSS() ?>
</style>


include.php

文件路径:/usr/themes/Joe/public

优化前代码:

<?php $this->need('public/config.php'); ?>
<meta charset="utf-8" />
<meta name="renderer" content="webkit" />
<meta name="format-detection" content="email=no" />
<meta name="format-detection" content="telephone=no" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, shrink-to-fit=no, viewport-fit=cover">
<link rel="shortcut icon" href="<?php $this->options->JFavicon() ?>" />
<title><?php $this->archiveTitle(array('category' => '分类 %s 下的文章', 'search' => '包含关键字 %s 的文章', 'tag' => '标签 %s 下的文章', 'author' => '%s 发布的文章'), '', ' - '); ?><?php $this->options->title(); ?></title>
<?php if ($this->is('single')) : ?>
  <meta name="keywords" content="<?php echo $this->fields->keywords ? $this->fields->keywords : htmlspecialchars($this->_keywords); ?>" />
  <meta name="description" content="<?php echo $this->fields->description ? $this->fields->description : htmlspecialchars($this->_description); ?>" />
  <?php $this->header('keywords=&description='); ?>
<?php else : ?>
  <?php $this->header(); ?>
<?php endif; ?>
<link href="<?php _getAssets('assets/css/joe.mode.min.css'); ?>" rel="stylesheet" />
<link href="<?php _getAssets('assets/css/joe.normalize.min.css'); ?>" rel="stylesheet" />
<link href="<?php _getAssets('assets/css/joe.global.min.css'); ?>" rel="stylesheet" />
<link href="<?php _getAssets('assets/css/joe.responsive.min.css'); ?>" rel="stylesheet" />
<link href="<?php _getAssets('assets/lib/qmsg/qmsg.min.css'); ?>" rel="stylesheet" />
<link href="<?php _getAssets('assets/lib/fancybox@3.5.7/fancybox.min.css'); ?>" rel="stylesheet" />
<link href="<?php _getAssets('assets/lib/animate.css@4.1.1/animate.min.css'); ?>" rel="stylesheet" />
<link href="<?php _getAssets('assets/lib/font-awesome@4.7.0/font-awesome.min.css'); ?>" rel="stylesheet" />
<link href="<?php _getAssets('assets/lib/APlayer@1.10.1/APlayer.min.css'); ?>" rel="stylesheet" />
<script src="<?php _getAssets('assets/lib/jquery@3.6.1/jquery.min.js'); ?>"></script>
<script src="<?php _getAssets('assets/lib/scroll/scroll.min.js'); ?>"></script>
<script src="<?php _getAssets('assets/lib/lazysizes@5.3.2/lazysizes.min.js'); ?>"></script>
<script src="<?php _getAssets('assets/lib/APlayer@1.10.1/APlayer.min.js'); ?>"></script>
<script src="<?php _getAssets('assets/lib/sketchpad/sketchpad.min.js'); ?>"></script>
<script src="<?php _getAssets('assets/lib/fancybox@3.5.7/fancybox.min.js'); ?>"></script>
<script src="<?php _getAssets('assets/lib/extend/extend.min.js'); ?>"></script>
<script src="<?php _getAssets('assets/lib/qmsg/qmsg.min.js'); ?>"></script>
<?php if ($this->options->JAside_3DTag === 'on') : ?>
  <script src="<?php _getAssets('assets/lib/3dtag/3dtag.min.js'); ?>"></script>
<?php endif; ?>
<script src="<?php _getAssets('assets/lib/smooth/smooth.min.js'); ?>" async></script>
<?php if ($this->options->JCursorEffects && $this->options->JCursorEffects !== 'off') : ?>
  <script src="<?php _getAssets('assets/cursor/' . $this->options->JCursorEffects); ?>" async></script>
<?php endif; ?>
<script src="<?php _getAssets('assets/js/joe.global.min.js'); ?>"></script>
<script src="<?php _getAssets('assets/js/joe.short.min.js'); ?>"></script>
<?php $this->options->JCustomHeadEnd() ?>

优化后的代码:

<?php $this->need('public/config.php'); ?>
<meta charset="utf-8" />
<meta name="renderer" content="webkit" />
<meta name="format-detection" content="email=no; telephone=no" />
<meta http-equiv="Cache-Control" content="no-transform">
<meta http-equiv="Cache-Control" content="no-siteapp">
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0">
<link rel="shortcut icon" href="<?php $this->options->JFavicon() ?>" />
<title><?php $this->archiveTitle(array('category' => '分类 %s 下的文章', 'search' => '包含关键字 %s 的文章', 'tag' => '标签 %s 下的文章', 'author' => '%s 发布的文章'), '', ' - '); ?><?php $this->options->title(); ?></title>
<?php if ($this->is('single')) : ?>
  <meta name="keywords" content="<?php echo $this->fields->keywords ? $this->fields->keywords : htmlspecialchars($this->_keywords); ?>" />
  <meta name="description" content="<?php echo $this->fields->description ? $this->fields->description : htmlspecialchars($this->_description); ?>" />
  <?php $this->header('keywords=&description='); ?>
<?php else : ?>
  <?php $this->header(); ?>
<?php endif; ?>
<link href="/usr/themes/Joe/assets/css/joe-index-ad.css" rel="stylesheet">
<link href="/usr/themes/Joe/assets/css/joe-statement.css" rel="stylesheet">
<link rel="preload" href="<?php _getAssets('assets/css/joe.mode.min.css'); ?>" as="style" onload="this.rel='stylesheet'" />
<link href="<?php _getAssets('assets/css/joe.normalize.min.css'); ?>" rel="stylesheet" />
<link rel="preload" href="<?php _getAssets('assets/css/joe.global.min.css'); ?>" as="style" onload="this.rel='stylesheet'" />
<link href="<?php _getAssets('assets/css/joe.responsive.min.css'); ?>" rel="stylesheet" />
<link href="<?php _getAssets('assets/lib/qmsg/qmsg.min.css'); ?>" rel="stylesheet" />
<link href="<?php _getAssets('assets/lib/fancybox@3.5.7/fancybox.min.css'); ?>" rel="stylesheet" />
<link href="<?php _getAssets('assets/lib/animate.css@4.1.1/animate.min.css'); ?>" rel="stylesheet" />
<link href="<?php _getAssets('assets/lib/font-awesome@4.7.0/font-awesome.min.css'); ?>" rel="stylesheet" />
<link href="<?php _getAssets('assets/lib/APlayer@1.10.1/APlayer.min.css'); ?>" rel="stylesheet" />
<script src="<?php _getAssets('assets/lib/jquery@3.7.1/jquery.min.js'); ?>"></script>
<script src="<?php _getAssets('assets/lib/scroll/scroll.min.js'); ?>"></script>
<script src="<?php _getAssets('assets/lib/lazysizes@5.3.2/lazysizes.min.js'); ?>"async></script>
<script rel="preload" src="<?php _getAssets('assets/lib/APlayer@1.10.1/APlayer.min.js'); ?>" as="script"></script>
<script src="<?php _getAssets('assets/lib/sketchpad/sketchpad.min.js'); ?>"></script>
<script src="<?php _getAssets('assets/lib/fancybox@3.5.7/fancybox.min.js'); ?>"></script>
<script src="<?php _getAssets('assets/lib/extend/extend.min.js'); ?>" defer></script>
<script src="<?php _getAssets('assets/lib/qmsg/qmsg.min.js'); ?>" defer></script>
<script src="<?php _getAssets('assets/js/joe-edit-button.js') ?>"></script>
<?php if ($this->options->JAside_3DTag === 'on') : ?>
  <script src="<?php _getAssets('assets/lib/3dtag/3dtag.min.js'); ?>"></script>
<?php endif; ?>
<script src="<?php _getAssets('assets/lib/smooth/smooth.min.js'); ?>" async></script>
<?php if ($this->options->JCursorEffects && $this->options->JCursorEffects !== 'off') : ?>
  <script src="<?php _getAssets('assets/cursor/' . $this->options->JCursorEffects); ?>" async></script>
<?php endif; ?>
<script src="<?php _getAssets('assets/js/joe.global.min.js'); ?>"></script>
<script src="<?php _getAssets('assets/js/joe.short.min.js'); ?>"></script>
<?php $this->options->JCustomHeadEnd() ?>


friends.php

文件路径:/usr/themes/Joe/

优化前的代码:

<?php

/**
 * 友链
 * 
 * @package custom 
 * 
 **/

?>

<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <?php $this->need('public/include.php'); ?>
  <?php if ($this->options->JPrismTheme) : ?>
    <link href="<?php $this->options->JPrismTheme() ?>" rel="stylesheet">
  <?php else : ?>
    <link href="<?php _getAssets('assets/lib/prism/prism.min.css'); ?>" rel="stylesheet">
  <?php endif; ?>
  <script src="<?php _getAssets('assets/lib/clipboard@2.0.11/clipboard.min.js'); ?>"></script>
  <script src="<?php _getAssets('assets/lib/prism/prism.min.js'); ?>"></script>
  <script src="<?php _getAssets('assets/js/joe.post_page.min.js'); ?>"></script>
</head>

<body>
  <div id="Joe">
    <?php $this->need('public/header.php'); ?>
    <div class="joe_container">
      <div class="joe_main">
        <div class="joe_detail" data-cid="<?php echo $this->cid ?>">
          <?php $this->need('public/batten.php'); ?>
          <?php $this->need('public/article.php'); ?>
          <?php
          $friends = [];
          $friends_color = [
            '#F8D800',
            '#0396FF',
            '#EA5455',
            '#7367F0',
            '#32CCBC',
            '#F6416C',
            '#28C76F',
            '#9F44D3',
            '#F55555',
            '#736EFE',
            '#E96D71',
            '#DE4313',
            '#D939CD',
            '#4C83FF',
            '#F072B6',
            '#C346C2',
            '#5961F9',
            '#FD6585',
            '#465EFB',
            '#FFC600',
            '#FA742B',
            '#5151E5',
            '#BB4E75',
            '#FF52E5',
            '#49C628',
            '#00EAFF',
            '#F067B4',
            '#F067B4',
            '#ff9a9e',
            '#00f2fe',
            '#4facfe',
            '#f093fb',
            '#6fa3ef',
            '#bc99c4',
            '#46c47c',
            '#f9bb3c',
            '#e8583d',
            '#f68e5f',
          ];
          $friends_text = $this->options->JFriends;
          if ($friends_text) {
            $friends_arr = explode("\r\n", $friends_text);
            if (count($friends_arr) > 0) {
              for ($i = 0; $i < count($friends_arr); $i++) {
                $name = explode("||", $friends_arr[$i])[0];
                $url = explode("||", $friends_arr[$i])[1];
                $avatar = explode("||", $friends_arr[$i])[2];
                $desc = explode("||", $friends_arr[$i])[3];
                $friends[] = array("name" => trim($name), "url" => trim($url), "avatar" => trim($avatar), "desc" => trim($desc));
              };
            }
          }
          ?>
          <?php if (sizeof($friends) > 0) : ?>
            <ul class="joe_detail__friends">
              <?php foreach ($friends as $item) : ?>
                <li class="joe_detail__friends-item">
                  <a class="contain" href="<?php echo $item['url']; ?>" target="_blank" rel="noopener noreferrer" style="background: <?php echo $friends_color[mt_rand(0, count($friends_color) - 1)] ?>">
                    <span class="title"><?php echo $item['name']; ?></span>
                    <div class="content">
                      <div class="desc"><?php echo $item['desc']; ?></div>
                      <img width="40" height="40" class="avatar lazyload" src="<?php _getAvatarLazyload(); ?>" data-src="<?php echo $item['avatar']; ?>" alt="<?php echo $item['name']; ?>" />
                    </div>
                  </a>
                </li>
              <?php endforeach; ?>
            </ul>
          <?php endif; ?>
          <?php $this->need('public/handle.php'); ?>
          <?php $this->need('public/copyright.php'); ?>
        </div>
        <?php $this->need('public/comment.php'); ?>
      </div>
      <?php $this->need('public/aside.php'); ?>
    </div>
    <?php $this->need('public/footer.php'); ?>
  </div>
</body>

</html>

优化后的代码:

<?php
/**
 * 友链
 * 
 * @package custom 
 **/
?>

<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <?php $this->need('public/include.php'); ?>
  <?php if ($this->options->JPrismTheme) : ?>
    <link href="<?php $this->options->JPrismTheme() ?>" rel="stylesheet">
  <?php else : ?>
    <link href="<?php _getAssets('assets/lib/prism/prism.min.css'); ?>" rel="stylesheet">
  <?php endif; ?>
  <script src="<?php _getAssets('assets/lib/clipboard@2.0.11/clipboard.min.js'); ?>"></script>
  <script src="<?php _getAssets('assets/lib/prism/prism.min.js'); ?>"></script>
  <script src="<?php _getAssets('assets/js/joe.post_page.min.js'); ?>"></script>
</head>

<body>
  <div id="Joe">
    <?php $this->need('public/header.php'); ?>
    <div class="joe_container">
      <div class="joe_main">
        <div class="joe_detail" data-cid="<?php echo $this->cid ?>">
          <?php $this->need('public/batten.php'); ?>
          <?php $this->need('public/article.php'); ?>
          <?php
          // 友链数据解析部分开始
          $friends = [];
          $friends_color = [
            '#F8D800','#0396FF','#EA5455','#7367F0','#32CCBC','#F6416C',
            '#28C76F','#9F44D3','#F55555','#736EFE','#E96D71','#DE4313',
            '#D939CD','#4C83FF','#F072B6','#C346C2','#5961F9','#FD6585',
            '#465EFB','#FFC600','#FA742B','#5151E5','#BB4E75','#FF52E5',
            '#49C628','#00EAFF','#F067B4','#F067B4','#ff9a9e','#00f2fe',
            '#4facfe','#f093fb','#6fa3ef','#bc99c4','#46c47c','#f9bb3c',
            '#e8583d','#f68e5f',
          ];
          
          if ($friends_text = $this->options->JFriends) {
            $friends_arr = explode("\r\n", $friends_text);
            foreach ($friends_arr as $line) {
              if (empty(trim($line))) continue; // 跳过空行
              $parts = array_map('trim', explode("||", $line));
              $friends[] = [
                'name'   => $parts[0] ?? '未命名友链',
                'url'    => $parts[1] ?? '#',
                'avatar' => $parts[2] ?? _getAvatarLazyload(),
                'desc'   => $parts[3] ?? '这个朋友很懒~'
              ];
            }
          }
          
          shuffle($friends); // 关键修改点:随机排序
          ?>
          <!-- 友链展示部分开始 -->
          <?php if (!empty($friends)) : ?>
            <ul class="joe_detail__friends">
              <?php foreach ($friends as $item) : ?>
                <li class="joe_detail__friends-item">
                  <a class="contain" 
                    href="<?php echo $item['url']; ?>" 
                    target="_blank" 
                    rel="noopener noreferrer" 
                    style="background: <?php echo $friends_color[array_rand($friends_color)] ?>">
                    <span class="title"><?php echo $item['name']; ?></span>
                    <div class="content">
                      <div class="desc"><?php echo $item['desc']; ?></div>
                      <img 
                        width="40" 
                        height="40" 
                        class="avatar lazyload" 
                        src="<?php _getAvatarLazyload(); ?>" 
                        data-src="<?php echo $item['avatar']; ?>" 
                        alt="<?php echo $item['name']; ?>" 
                      />
                    </div>
                  </a>
                </li>
              <?php endforeach; ?>
            </ul>
          <?php else : ?>
            <div class="joe_empty">暂无友链数据</div>
          <?php endif; ?>
          <!-- 友链展示部分结束 -->
          <?php $this->need('public/handle.php'); ?>
          <?php $this->need('public/copyright.php'); ?>
        </div>
        <?php $this->need('public/comment.php'); ?>
      </div>
      <?php $this->need('public/aside.php'); ?>
    </div>
    <?php $this->need('public/footer.php'); ?>
  </div>
</body>
</html>


补充

往期优化文章:


8

评论

博主关闭了所有页面的评论