Typecho Joe主题 修改过的其他功能

Typecho 修改过的其他功能

作者BLOG

Joe 主题

1. 修复搜索结果不显示分类名等问题

​ 来自GitHub用户 cnhongv 的 提交

  1. 修改 archive.php 文件的内容

    <span>篇与</span>
<span class="muted ellipsis"><?php echo $this->_keywords; ?></span>
<span>的结果</span>

    修改为：

    <?php
    $sp='<span class="muted ellipsis"> %s </span>';
    $this->archiveTitle(array(
        'category' => '分类为'.$sp.'的文章',
        'search' => '包含关键字'.$sp.'的文章',
        'tag' => '标签为'.$sp.'的文章',
        'author' => $sp.'发布的文章')
        , '', '');
?>

2. 修复空格在页面不显示的问题

  1. 在 core/short.php 文件的 _parseContent 函数末尾加入以下内容
// 修复首行空格不显示的情况
$content = preg_replace_callback('/<p.*?>.*?<\/p>/S', static function ($match) {
    return preg_replace('/\s{4}/', "&emsp;", $match[0]);
}, $content);

3. 添加普通样式标签云（有修改）

​ 来自GitHub用户 zenonux 的提交

  1. 修改 functions.php 文件中的内容

    $JAside_3DTag = new Typecho_Widget_Helper_Form_Element_Select(
    'JAside_3DTag',
    array(
        'off' => '关闭（默认）',
        'on' => '开启'
    ),
    'off',
    '是否开启3D云标签 - PC',
    '介绍：用于设置侧边栏是否显示3D云标签'
);
$JAside_3DTag->setAttribute('class', 'joe_content joe_aside');
$form->addInput($JAside_3DTag->multiMode());

    修改为：

    $JAside_Tag = new Typecho_Widget_Helper_Form_Element_Select(
    'JAside_Tag',
    array(
        'off' => '关闭（默认）',
        '1' => '3D云标签',
        '2' => '普通标签',
    ),
    'off',
    '是否开启标签 - PC',
    '介绍：用于设置侧边栏是否显示标签'
);
$JAside_Tag->setAttribute('class', 'joe_content joe_aside');
$form->addInput($JAside_Tag->multiMode());

  2. 修改 public/aside.php 文件中的内容

    <?php if ($this->options->JAside_3DTag === 'on') : ?>

    修改为：

    <?php if ($this->options->JAside_Tag !== 'off') : ?>

  3. 修改 public/aside.php 文件中的内容

    <div class="tag"></div>
<ul class="list" style="display: none;">
    <?php while ($tags->next()) : ?>
        <li data-url="<?php $tags->permalink(); ?>" data-label="<?php $tags->name(); ?>"></li>
    <?php endwhile; ?>
</ul>

    修改为：

    <?php if ($this->options->JAside_Tag === '1') : ?>
    <div class="tag"></div>
    <ul class="list" style="display: none;">
        <?php while ($tags->next()) : ?>
            <li data-url="<?php $tags->permalink(); ?>" data-label="<?php $tags->name(); ?>"></li>
        <?php endwhile; ?>
    </ul>
<?php endif; ?>
<?php if ($this->options->JAside_Tag === '2') : ?>
    <div class="common-tags">
        <?php while ($tags->next()) : ?>
            <a class="common-tag" href="<?php $tags->permalink(); ?>"
               title="<?php $tags->name(); echo ' ('; $tags->count(); echo ')'; ?>">
                <?php $tags->name(); ?>
            </a>
        <?php endwhile; ?>
    </div>
<?php endif; ?>

  4. 加入 SCSS 样式信息

    在 joe.global.min.scss 文件中的的关键词 &.flatterer 下方加入以下SCSS样式信息并编译该文件

    .common-tag {
  height: 30px;
  font-size: 12px;
  border-radius: 5px;
  display: block;
  line-height: 30px;
  overflow: hidden;
  text-overflow: ellipsis;
  background: var(--classD);
  color: var(--routine);
  padding: 0 5px;
  text-align: center;
}

.common-tag:hover {
  background: var(--theme);
  color: #fff;
}

.common-tags {
  display: grid;
  grid-row-gap: 8px;
  grid-column-gap: 8px;
  grid-template-columns: repeat(3, calc((100% - 16px) / 3));
}

  5. 修改 public/include.php 文件中的内容

    <?php if ($this->options->JAside_3DTag === 'on') : ?>

    修改为：

    <?php if ($this->options->JAside_Tag !== 'off') : ?>

4. 添加页面加载时间

  1. 在 public/footer.php 文件中的 <div class="item run"> 标签中添加子元素

    <span>页面加载耗时:
    <strong style="font-weight: 500;color: var(--theme);" id="load_time"><?php _endCountTime(); ?></strong>
</span>

5. MathJax公式支持

  1. 在 functions.php 文件中的全站评论开关前增加以下内容

    $JMathJax = new Typecho_Widget_Helper_Form_Element_Select(
    'JMathJax',
    array(
        'on' => '开启（默认）',
        'off' => '关闭'
    ),
    'on',
    '开启或关闭全站 MathJax 支持',
    '介绍：开启后，全站支持 MathJax 公式渲染 <br />
     说明：MathJax 是一个 JavaScript 库，用于在网页上显示数学公式 <br />
     其他：MathJax 官网 <a target="_blank" href="//www.mathjax.org">www.mathjax.org</a>'
);
$JMathJax->setAttribute('class', 'joe_content joe_global');
$form->addInput($JMathJax->multiMode());

  2. 在 post.php 文件的head标签中添加以下内容

    <?php if ($this->options->JMathJax !== 'off') : ?>
    <script>
        window.MathJax = {
            tex: {
                inlineMath: [ ["$", "$"]],
                displayMath: [ ["$$","$$"]],
                processEscapes: true,
                processEnvironments: true
            },
            options: {
                skipHtmlTags: ['script', 'noscript', 'style', 'textarea', 'pre'],
                ignoreHtmlClass: 'tex2jax_ignore',
                processHtmlClass: 'tex2jax_process'
            }
        };
    </script>
    <script src="https://cdn.lhjjjlxays.top/npm/mathjax@3/es5/tex-chtml.js" async></script>
<?php endif; ?>

6. 添加 markdown 扩展语法

扩展内容包括 下标 (例: H~ 2~O )；上标 (例: X^ 2^ )；高亮 (例: == key== )

  1. 修改 functions.php 文件中的以下内容

    $JGrammarExtension = new Typecho_Widget_Helper_Form_Element_Select(
    'JGrammarExtension',
    array('off' => '关闭（默认）', 'on' => '开启'),
    'off',
    '打开 markdown 扩展语法',
    '注意：扩展符号中间不能与空白符号相邻 <br />
     下标 (例: H~2~O ) <br />
     上标 (例: X^2^ ) <br />
     高亮 (例: ==key== )'
);
$JGrammarExtension->setAttribute('class', 'joe_content joe_other');
$form->addInput($JGrammarExtension);

  2. 在 core/function.php 文件中添加函数，替换这些特殊内容

    function _grammarExtension($html) {
    return preg_replace_callback('/<p.*?>.*?<\/p>/S', static function ($match) {
        $new_html = preg_replace_callback('/==(.*?)==/s', static function ($match) {
            $tag = $match[0];
            $text = $match[1];
            if (strlen(trim($text)) !== strlen($text) || preg_match('/(<\/?[^>]+>)|\\$/i', $text)) {
                return $tag;
            }
            return "<mark>" . $text . "</mark>";
        }, $match[0]);
        $new_html = preg_replace_callback('/~(.*?)~/s', static function ($match) {
            $tag = $match[0];
            $text = $match[1];
            if (strlen(trim($text)) !== strlen($text) || preg_match('/(<\/?[^>]+>)|\\$/i', $text)) {
                return $tag;
            }
            return "<sub>" . $text . "</sub>";
        }, $new_html);
        $new_html = preg_replace_callback('/\^(.*?)\^/s', static function ($match) {
            $tag = $match[0];
            $text = $match[1];
            if (strlen(trim($text)) !== strlen($text) || preg_match('/(<\/?[^>]+>)|\\$/i', $text)) {
                return $tag;
            }
            return "<sup>" . $text . "</sup>";
        }, $new_html);

        // 解决首行空格不显示的情况
        return preg_replace('/\s{4}/', "&emsp;", $new_html);
    }, $html);
}

  3. 在 core/core.php 文件的 themeInit 函数中解析这些特殊内容

    # 当前载入的是文章阅读页面
if ($self->is('single')) {
    //...

    /* 打开双等号,上标下标等 markdown扩展语法设置 */
    if (Helper::options()->JGrammarExtension === "on") {
        $self->content = _grammarExtension($self->content);
    }
}

7. 随机获取昵称功能

  1. 在 functions.php 文件中加入 随机获取配置

    $JNickNameUrl = new Typecho_Widget_Helper_Form_Element_Text(
    'JNickNameUrl',
    NULL,
    NULL,
    '全站评论中的随机昵称请求网址',
    '介绍：填写可以随机获取网名的网址 <br>
     注意：必须开启全站评论才生效，昵称返回必须纯文本'
);
$JNickNameUrl->setAttribute('class', 'joe_content joe_global');
$form->addInput($JNickNameUrl->multiMode());

  2. 在 plulic/comment.php 文件中的 placeholder="请输入昵称..." 的 input 框后追加以下代码

    <?php if ($this->options->JNickNameUrl) : ?>
    <a class="joe_comment__respond-nick-name" href="javascript:" title="随机获取一个昵称"
       data-href="<?php echo $this->options->JNickNameUrl; ?>">
        <svg t="1658389677936" class="icon" viewBox="0 0 1024 1024" version="1.1"
             xmlns="http://www.w3.org/2000/svg" p-id="3364" width="24" height="24"
        <path d="M421.376 481.28s117.248 24.576 175.104-8.704c0 0-89.6 70.144-89.6 166.4 0.512-0.512-8.192-121.344-85.504-157.696zM438.784 969.216s68.608 6.656 68.608-80.896c0 0 3.072 88.576 65.024 78.336 0 0.512-50.688 22.016-133.632 2.56zM161.28 238.08s-30.208 65.536 11.264 91.648c0 0-67.072-17.408-81.408 37.376 0 0 8.704-82.944 70.144-129.024zM857.6 227.328s49.152 50.176 1.024 81.408c0 0 58.88-18.432 66.56 36.352 0 0 5.12-69.632-67.584-117.76z"
              p-id="3365" fill="#fff"></path>
        <path d="M443.392 970.752c-5.632 0-10.752-1.024-15.36-3.072l-270.848-157.184-1.536-1.024s-1.024-1.024-4.608-2.56c-51.2-29.184-62.976-94.208-65.536-120.832V386.56c0-3.072 0.512-7.168 1.024-11.264l0.512-3.584 1.024-2.56c19.456-50.688 76.8-51.2 103.936-44.032l-1.536 5.632 4.096-6.144L476.16 486.4l18.944 37.888c20.992 36.864 29.184 77.824 32.768 99.84v258.048c-4.608 56.32-36.864 76.288-55.808 82.944-1.024 0.512-15.36 5.632-28.672 5.632z m-262.144-196.096l263.168 152.576c12.288-0.512 36.864-6.656 40.448-48.128v-250.368c-4.608-31.744-20.992-103.936-72.192-128L322.56 445.44l1.536 3.072-142.336-82.432c-2.048-0.512-40.448-9.216-52.736 15.872-0.512 2.56-0.512 4.608-0.512 6.144v294.4c1.536 16.896 9.728 67.072 43.52 86.528 3.584 2.048 6.656 4.096 9.216 5.632z"
              p-id="3366" fill="#fff"></path>
        <path d="M837.632 212.992c6.656 4.096 12.8 7.168 18.432 10.752l1.536 1.024 1.536 1.536c5.12 4.096 10.752 9.216 16.384 15.36 6.144 11.776 5.632 33.28 4.608 49.152-1.024 12.288-6.656 30.208-26.624 44.544l-1.024 0.512-247.808 156.672c-26.624 14.336-62.976 18.432-96.256 18.432-40.96 0-77.824-6.656-89.088-8.704l-3.072-0.512-245.248-142.336c-39.424-29.696-28.16-85.504-15.36-113.664l2.56-6.144 263.68-166.912c29.184-14.336 104.448-43.008 173.056-1.024 3.584 2.56 58.368 34.304 119.296 69.632M431.616 460.8c40.448 7.168 114.176 13.824 152.576-6.144l244.736-155.136c7.168-5.632 8.192-10.24 8.704-12.8 1.024-11.264-9.728-26.624-15.36-32.768-55.808-32.256-243.712-141.312-250.368-145.408-49.664-30.72-107.008-9.216-130.048 2.56L192.512 268.8c-4.096 12.288-12.288 42.496 3.584 55.808l235.52 136.192z"
              p-id="3367" fill="#fff"></path>
        <path d="M831.488 299.008c4.096-1.024 38.4-11.264 66.048 6.144 7.168 4.608 17.92 11.776 24.064 24.576 1.024 5.632 4.096 10.752 4.608 16.896v2.048l-1.024 323.072c-5.12 35.328-22.528 91.648-77.312 125.44l-5.12 3.584h-1.024l-262.144 165.888-4.608 0.512c-4.096 0.512-8.704 1.024-12.8 1.024-15.872 0-30.208-5.12-41.984-14.848-24.576-20.48-32.768-55.808-35.328-73.728l-1.024-252.928h1.536c6.144-96.768 88.576-164.864 96.768-171.008l-0.512-0.512L829.44 299.52m-301.056 567.808c0.512 10.24 5.12 41.472 19.968 53.76 3.072 2.56 7.68 5.632 16.384 5.12l264.704-167.936c56.32-38.4 53.76-115.712 53.76-116.224l-0.512-32.256 1.024-250.368h-0.512c-1.536-12.8-7.168-16.384-8.704-17.408-8.704-5.632-23.552-3.072-28.672-2.048l-235.52 148.992c-1.024 0.512-80.896 65.024-80.896 149.504h-1.536l0.512 228.864zM435.2 264.192c0 27.648 31.744 50.176 71.168 50.176s71.168-22.528 71.168-50.176-31.744-50.176-71.168-50.176S435.2 236.544 435.2 264.192z"
              p-id="3368" fill="#fff"></path>
        <path d="M663.552 782.848c0 30.72-22.528 67.072-49.664 80.384-27.648 13.824-50.176-0.512-50.176-31.232s22.528-67.072 50.176-80.384c27.136-13.824 49.664 0 49.664 31.232zM760.32 602.624c0 30.72-22.528 67.072-49.664 80.384-27.648 13.824-49.664-0.512-49.664-31.232s22.528-67.072 49.664-80.384c27.136-13.824 49.664 0.512 49.664 31.232zM867.84 428.032c0 30.72-22.528 67.072-49.664 80.384-27.648 13.824-50.176-0.512-50.176-31.232s22.528-67.072 50.176-80.384c27.136-13.824 49.664 0 49.664 31.232zM270.848 538.112c0 30.72-22.016 41.984-48.64 24.576-27.136-16.896-48.64-55.808-48.64-86.528 0-30.72 22.016-41.984 48.64-24.576 26.624 16.896 48.64 55.808 48.64 86.528zM432.128 823.296c0 30.72-22.016 41.984-48.64 24.576-26.624-17.408-48.64-55.808-48.64-86.528 0-30.72 22.016-41.984 48.64-24.576 26.624 16.896 48.64 55.808 48.64 86.528z"
              p-id="3369" fill="#fff"></path>
        </svg>
    </a>
<?php endif; ?>

  3. 加入 SCSS 样式信息

    在 joe.global.min.scss 文件中的的关键词 &__respond 后方加入以下SCSS样式信息并编译该文件

    &-nick-name {
  position: absolute;
  margin-top: 5px;
  margin-left: -35px;
  width: 30px;
  height: 30px;
  padding: 3px;
  cursor: pointer;
  border-radius: 3px;
  background: var(--theme);
}

  4. 修改 JS 样式信息

    在 joe.global.js 文件中的的关键词 if ($(“.joe_comment”).length) 后方加入以下 JS 并编译该文件

    $(".joe_comment__respond-nick-name").on("click", function () {
  const nickAction = $(".joe_comment__respond-nick-name").data("href");
  if (nickAction !== "") {
    $.get(nickAction, function (resp) {
      $(".joe_comment__respond-form .head input[name='author']").val(resp);
    }).fail(function (err) {
      Qmsg.error("请求失败，" + err.toString());
    });
  }
});

    修改下当评论的 Ajax 的错误回调，使提示更明确，修改为如下错误回调

    error(resp) {
  isSubmit = false;
  $(".joe_comment__respond-form .foot .submit button").html("发表评论");

  const text = resp.responseText;
  if (text.indexOf("特殊字符") > 0) {
    Qmsg.warning("昵称中存在特殊字符，请检查。");
  } else if (text.indexOf("已经被注册") > 0) {
    const arr = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890".split("");
    var result = "";
    for (var i = 0; i < 4; i++) {
      result += arr[Math.floor(Math.random() * arr.length)];
    }
    $(".joe_comment__respond-form .head input[name='author']").val(author + "_" + result);
    Qmsg.warning("昵称已存在，为你添加标识符，请重试。");
  } else if (text.indexOf("过于频繁") > 0) {
    Qmsg.warning("评论过于频繁，请等待30s。");
  } else {
    Qmsg.warning("发送失败，请刷新重试。");
  }
},

  5. 以下为我自己写的 api (可参考，放在typecho 根目录下)

    <?php
header("content-type:text/plain;charset=utf-8");

static $fileTime = 0;
static $nickNameArray = array();

nickName();

/**
 * 随机生成昵称
 */
function nickName() {
    _loadNickNames();
    global $nickNameArray;
    echo $nickNameArray[array_rand($nickNameArray)];
}

/**
 * 读取nickName.txt文件，一行为一个网名
 * 文件更新后会自动在新请求来时重新加载
 */
function _loadNickNames() {
    global $fileTime;
    global $nickNameArray;

    // fopen()打开文件并获得文件流
    $fp = fopen("nickName.txt", "r");
    // 对文件加锁，加锁成功读取
    if (flock($fp, LOCK_SH)) {
        $curTime = filectime("nickName.txt");
        if (empty($nickNameArray) || $fileTime != $curTime) {
            $fileTime = $curTime;
            $str = "";
            while (!feof($fp)) {
                $chr = fread($fp, 1);
                if ($chr === "\n") {
                    $nickNameArray[] = trim($str);
                    $str = "";
                } else {
                    $str .= $chr;
                }
            }
            $nickNameArray[] = trim($str);
            fclose($fp);
        }
        //解锁
        flock($fp, LOCK_UN);
    }
    //关闭文件流
    fclose($fp);
}
版权声明：本文为weixin_42095121原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。