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

Typecho教程 2021-02-23 231℃ 4 0

有人求 Joe 5.X 主题集成这个功能,花了20分钟整好了,主要花时间在调试CSS上。

调用方式

同时兼容两种格式,记得去掉@

[@post]文章 ID[@/post]

{@post cid="文章 ID" /}

添加自定义 JS

你想放到哪里都可以

.linked-post {
    padding: 20px;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid var(--classC);
    margin: 20px 0;
}
.linked-post a {
    display: flex !important;
    color: var(--main) !important;
    padding-top: 5px;
}
.linked-post a span {
    width: 100%;
    min-width: 260px;
    height: 130px;
    display: flex;
}
.linked-post a span img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.linked-post a .content {
    height: 130px;
    overflow: hidden;
    margin-left: 10px;
    transition: transform 0.35s, box-shadow 0.35s, -webkit-transform 0.35s;
}
.linked-post a .content h5 {
    margin-bottom: 5px;
}
.linked-post a .content p {
    height: 100px;
    line-height: 25px;
    overflow: hidden;
    margin-bottom: 0;
}
.linked-post a:hover:after{
    display: none !important;
}
.linked-post a:hover span img {
    transform: translateY(-5px);
}
.linked-post a:hover .content {
    transform: translateY(-5px);
}

@media (max-width:768px) {
    .linked-post a {
        flex-wrap: wrap;
    }
    .linked-post a span {
        max-width: unset;
    }
    .linked-post a .content {
        margin-top: 10px;
        margin-left: 0;
    }
}

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

用编辑器打开core/function.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/short.php,在最后的echo $content加入解析函数

    /* 过滤复制粘贴功能 */
    if (strpos($content, '[/post]') !== false) {
        // 兼容以前弄的
        $content = preg_replace_callback('/\(.*?)\[\/post\]/ism', function ($text) {
            $widget = _getWidgetById($text[1]);
            return '<div class="linked-post"><a href="' . $widget->permalink . '" title="' . $widget->title . '"><img class="cover" src="' . _getThumbnails($widget)[0] . '"/><div class="content"><h5>' . $widget->title  . '</h5><p>' . _getAbstract($widget, false)  . '</p></div></a></div>';
        }, $content);
    }
    if (strpos($content, '{post') !== false) {
        $content = preg_replace_callback(
            "/\{post\s*cid="(.*)"\s*\/\}/sSU",
            function ($matches) {
                $widget = _getWidgetById($matches[1]);
                return '<div class="linked-post"><a href="' . $widget->permalink . '" title="' . $widget->title . '"><img class="cover" src="' . _getThumbnails($widget)[0] . '"/><div class="content"><h5>' . $widget->title  . '</h5><p>' . _getAbstract($widget, false)  . '</p></div></a></div>';
            },
            $content
        );
    }

编辑器增加快速插入按钮

编辑器打开typecho/editor/joe.editor.js,找到wmd-copy-button,在break后面,加入下面的代码

            case 'wmd-post-button':
                var cid = "文章ID";
                $(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() {
                    cid = $('.wmd-prompt-dialog input[name = "cid"]').val();
                    $('#text').insertContent(`{post cid="${cid}"}`);
                    $('#postPanel').remove();
                });

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

代码位置示意:
Joe主题5.X新增文章引用段代码Joe主题5.X新增文章引用段代码 1

下载

附我修改过的文件,5.4.5版本

Joe_Mod_post_5.4.5.zip
文件大小:16.98kB 下载次数:14

评论 (4)

  • $widget->author 会提示 Object of class Widget_Users_Author could not be converted to string 错误

    回复
    • 没记错应该是$widget->author->screenName

      回复
      • OK
        那这些 '.$created.' 日期 '.$post_views.' 阅读 评论什么的是要怎么什么写呢?

Top