Joe主题新增文章引用段代码[post]

Typecho教程 2021-01-20 96℃ 1 2

用了Joe主题发现没有文章引用短代码故 Diy 一下

新增用于段代码的获取缩略图代码

用编辑器打开core/core.php
找到showThumbnail函数,在这个函数之后新增

function getThumbnail($widget) {
    $random = 'https://cdn.jsdelivr.net/npm/typecho_joe_theme/assets/img/random/' . rand(1, 25) . '.webp';
    if (Helper::options()->Jmos) {
        $moszu = explode("\r\n", Helper::options()->Jmos);
        $random = $moszu[array_rand($moszu, 1)] . "?jrandom=" . mt_rand(0, 1000000);
    }
    $pattern = '/\<img.*?src\=\"(.*?)\"[^>]*>/i';
    $patternMD = '/\!\[.*?\]\((http(s)?:\/\/.*?(jpg|jpeg|gif|png|webp))/i';
    $patternMDfoot = '/\[.*?\]:\s*(http(s)?:\/\/.*?(jpg|jpeg|gif|png|webp))/i';
    $t = preg_match_all($pattern, $widget->content, $thumbUrl);
    $img = $random;
    if ($widget->fields->thumb) {
        $img = $widget->fields->thumb;
    } elseif ($t) {
        $img = $thumbUrl[1][0];
    } elseif (preg_match_all($patternMD, $widget->content, $thumbUrl)) {
        $img = $thumbUrl[1][0];
    } elseif (preg_match_all($patternMDfoot, $widget->content, $thumbUrl)) {
        $img = $thumbUrl[1][0];
    }
    return $img;
}

新增用于获取 Widget 对象的代码

同样是core/core.php,随便找个位置新增一个函数

/**
 * 根据 ID 返回 Widget
 *
 * @param mixed $id
 * @return Widget_Abstract_Contents
 */
function widgetById($id)
{
    $className = "Widget_Abstract_Contents";
    $db = Typecho_Db::get();
    $widget = new $className(Typecho_Request::getInstance(), Typecho_Widget_Helper_Empty::getInstance(), null);
    $db->fetchRow(
        $widget->select()->where("cid = ?", $id)->limit(1),
        array($widget, 'push')
    );
    return $widget;
}

这个函数返回一个 Widget,可以使用$widget->title这样的语法获取文章信息。

新增 post 短代码识别

同样是core/core.php,找到function ParseCode($text),把整个函数修改为

function ParseCode($text)
{
    /* 相关文章短代码 */
    $text = Short_Post($text);
    /* 初始化图片为懒加载 */
    $text = Short_Lazyload($text);
    /* 图片短代码 */
    $text = Short_Photo($text);
    /* tag标签短代码 */
    $text = Short_Tag($text);
    /* 按钮短代码 */
    $text = Short_Button($text);
    /* 提示短代码 */
    $text = Short_Alt($text);
    /* 线短代码 */
    $text = Short_Line($text);
    /* tabs短代码 */
    $text = Short_Tabs($text);
    /* 默认卡片短代码 */
    $text = Short_Card_default($text);
    /* 展开隐藏短代码 */
    $text = Short_Collapse($text);
    /* 时间线短代码 */
    $text = Short_Time_line($text);
    /* 复制短代码 */
    $text = Short_Copy($text);
    /* 打字机短代码 */
    $text = Short_Typing($text);
    /* 链接卡片短代码 */
    $text = Short_Card_Nav($text);
    /* dplayer短代码 */
    $text = Short_Dplayer($text);
    /* 音乐短代码 */
    $text = Short_Music($text);
    /* 音乐列表短代码 */
    $text = Short_Music_List($text);
    /* 视频列表短代码 */
    $text = Short_Video_List($text);
    return $text;
}

然后在这个函数后新增 post 短代码识别

function Short_Post($text) {
    $text = preg_replace_callback('/\(.*?)\[\/post\]/ism', function ($text) {
        $widget = widgetById($text[1]);
        return '<div class="j-card-default linked-post"><a href="' . $widget->permalink . '" title="'. $widget->title .'"><div class="cover"><img src="' . getThumbnail($widget) . '"/></div><div class="content"><h3>'. $widget->title  .'</h3></div></a></div>';
    }, $text);
    return $text;
}

2021.1.21 更新 增加编辑器按钮

同样是core/core.php,找到<li class="wmd-button custom" id="j-wmd-reply" title="回复可见">
在这段代码前插入按钮代码

<li class="wmd-button" id="wmd-post-button" style="" title="调用其他文章">
                        <svg t="1575180991563" class="icon" style="width: 1em; height: 1em;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="15507"><path d="M805.202 33.28H218.798c-80.84 0-146.6 65.654-146.6 146.278v675.103c0 80.666 65.76 146.299 146.6 146.299h586.404c80.84 0 146.6-65.633 146.6-146.299V179.558c-0.004-80.624-65.76-146.278-146.6-146.278zM272.835 261.166H525.66c18.678 0 33.802 15.12 33.802 33.787 0 18.621-15.119 33.74-33.802 33.74H272.835c-18.683 0-33.808-15.119-33.808-33.74 0-18.668 15.12-33.787 33.808-33.787z m478.325 511.97H272.835c-18.683 0-33.808-15.166-33.808-33.808 0-18.647 15.12-33.761 33.808-33.761H751.16c18.688 0 33.89 15.114 33.89 33.761 0 18.642-15.202 33.807-33.89 33.807z m0-222.244H272.835c-18.683 0-33.808-15.074-33.808-33.762 0-18.642 15.12-33.761 33.808-33.761H751.16c18.688 0 33.89 15.12 33.89 33.761 0 18.683-15.202 33.762-33.89 33.762z" p-id="15508" fill="#8a8a8a"/></svg>
                    </li>

找到`function insertAtCursor(myValue, myField = $('#text')[0]) {这一行 在前面插入按钮事件代码(需要把下面代码中的[@修改为[`)

$(document).on('click', '#wmd-post-button', function() {
                    $('body').append(
                        '<div id="postPanel">' +
                        '<div class="wmd-prompt-background" style="position: fixed; top: 0px; z-index: 1000; opacity: 0.5; height: 100%; left: 0px; width: 100%;"></div>' +
                        '<div class="wmd-prompt-dialog">' +
                        '<div>' +
                        '<p><b>调用其他文章</b></p><p>你可以在当前文章中调用另一篇文章,达到文章之间的交流体验。</p>' +
                        '<labe>输入文章cid</labe><input type="text" name="cid" placeholder="必填"></input></p>' +
                        '</div>' +
                        '<form>' +
                        '<button type="button" class="btn btn-s primary" id="post_ok">确定</button>' +
                        '<button type="button" class="btn btn-s" id="post_cancel">取消</button>' +
                        '</form>' +
                        '</div>' +
                        '</div>');
                });
                $(document).on('click', '#post_ok', function() {
                    var cid = $('.wmd-prompt-dialog input[name = "cid"]').val() + '"';
                    var textContent = '[@post]' + cid + '[@/post]';
                    insertAtCursor(textContent, $('#text')[0] , '#postPanel');
                });

                $(document).on('click', '#post_cancel', function() {
                    $('#postPanel').remove();
                    $('#text').focus();
                });

并将insertAtCursor函数替换为

function insertAtCursor(myValue, myField = $('#text')[0], modelId = null) {
                    if($(modelId)) {
                        $(modelId).remove();
                    }
                    if (document.selection) {
                        myField.focus();
                        sel = document.selection.createRange();
                        sel.text = myValue;
                        sel.select();
                    } else if (myField.selectionStart || myField.selectionStart == '0') {
                        var startPos = myField.selectionStart;
                        var endPos = myField.selectionEnd;
                        var restoreTop = myField.scrollTop;
                        myField.value = myField.value.substring(0, startPos) + myValue + myField.value.substring(endPos, myField.value.length);
                        if (restoreTop > 0) {
                            myField.scrollTop = restoreTop;
                        }
                        myField.focus();
                        myField.selectionStart = startPos + myValue.length;
                        myField.selectionEnd = startPos + myValue.length;
                    } else {
                        myField.value += myValue;
                        myField.focus();
                    }
                }

这样就可以快捷添加调用其他文章了

评论 (1)

  • 现在5.0以上的新版本要怎么弄?

    回复
Top