[分享]Typecho开启pjax后，游览器页面标题显示不正常！

天启Lv.1普通用户

2024-08-18 11:59:39

在 Typecho 中启用 PJAX（PushState + AJAX）可以提升页面切换的速度和用户体验，但有时可能会导致浏览器页面标题显示不正常。这通常是由于 PJAX 请求没有正确更新页面标题所致。以下是解决这一问题的详细步骤：
安装 PJAX 插件
首先，确保你已经正确安装并启用了 PJAX 插件。常用的 Typecho PJAX 插件包括 InstantClick 和 pjax.js。
修改模板文件
为了确保在使用 PJAX 时正确更新页面标题，你需要修改模板文件，添加 JavaScript 代码来处理页面标题更新。
2.1 在模板的部分添加一个元素来存储页面标题
在 header.php 或类似的模板文件中添加以下代码：

<head>
    <!-- 其他头部内容 -->
    <title><?php $this->archiveTitle(array(
            'category'  =>  _t('分类 %s 下的文章'),
            'search'    =>  _t('包含关键字 %s 的文章'),
            'tag'       =>  _t('标签 %s 下的文章'),
            'author'    =>  _t('%s 发布的文章')
        ), '', ' - '); ?><?php $this->options->title(); ?></title>
    <meta name="title" content="<?php $this->archiveTitle(array(
            'category'  =>  _t('分类 %s 下的文章'),
            'search'    =>  _t('包含关键字 %s 的文章'),
            'tag'       =>  _t('标签 %s 下的文章'),
            'author'    =>  _t('%s 发布的文章')
        ), '', ' - '); ?><?php $this->options->title(); ?>">
</head>

2.2 添加 PJAX JavaScript 代码来更新页面标题
在你的模板文件的底部（例如 footer.php）中，添加以下 JavaScript 代码：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.pjax/2.0.1/jquery.pjax.min.js"></script>
<script>
    $(document).ready(function() {
        $(document).pjax('a', 'body', {
            fragment: 'body',
            timeout: ***0
        });

        // PJAX 请求完成后更新页面标题
        $(document).on('pjax:success', function(event, data, status, xhr) {
            var newTitle = $(data).find('title').text();
            document.title = newTitle;
            $('meta[name="title"]').attr('content', newTitle);
        });
    });
</script>

2.3 确保页面内容和标题在 body 内部加载
确保你的页面内容和标题都在 body 标签内部加载，以便 PJAX 可以正确处理这些元素。
调试和测试
完成以上步骤后，刷新页面并测试是否正常更新页面标题。点击页面内的链接，观察浏览器标题是否随页面切换而正确更新。
额外注意事项
缓存问题：如果你的 Typecho 网站启用了缓存插件，请确保缓存设置不会干扰 PJAX 请求和页面标题更新。
插件兼容性：确保所有已启用的插件与 PJAX 兼容，避免因为插件冲突导致的问题。
SEO：确保 meta 标签中的标题也正确更新，以便搜索引擎可以正确抓取你的页面。
通过以上步骤，你应该能够解决 Typecho 在启用 PJAX 后浏览器页面标题显示不正常的问题。

天启

65 天前

签名 : 大运河向南是我家 48 0

免责声明 : 用户发表言论，签名内容均为会员个人观点，并不代表花趣站长网立场！