feed-hub教程：内容规则-刹那烟雨

单独把内容规则提取出来，是因为内容规则可以不仅仅使用上面的取值规则，还可以通过模板的方式对内容进行重新排版

选项

自定义渲染：如果关闭，则内容就是上面的取值规则，如果开启，则根据渲染方式进行渲染
渲染方式：模板是插值，js函数式返回html字符串，下面会详细介绍
内容：根据上面两个选项，此处填写的内容也会不一样，下面会详细介绍

普通渲染

此时自定义内容渲染关闭，内容则填写取值规则，比如说我的博客，由于内容比较规范，所以就进行普通渲染

类型定义

在看模板渲染、js函数渲染前，首先需要了解函数定义，知道可以使用那些方法获取内容

export interface ParserEngine {

    /**
     * 根据规则解析为字符串
     * @param select 规则
     */
    parseToString(select: string): string;

    /**
     * 根据规则解析为引擎数组，每个元素为一个引擎实例
     * @param select 规则
     */
    parseToEngines(select: string): Array<ParserEngine>;

    /**
     * 解析正则列表
     * @param regex 正则表达式
     * @param selects 选择器列表
     * @deprecated 请使用 parseToString
     */
    parseRegexToStrings(regex: string, selects: Array<string | undefined>): Array<Array<string>>;

    /**
     * 将当前内容转为字符串
     */
    toString(): string;

    /**
     * 将当前内容转为 HTML 字符串，包含元素本身
     */
    toHTML(): string;

    /**
     * 将当前内容转为 HTML 字符串，不包含元素本身
     */
    toInnerHTML(): string;

}

在下面两种渲染模式中，可以获取一个root对象，该对象为初始html解析后获取到的对象，所有的操作都基于此

模板渲染

此时，自定义内容渲染打开，渲染方式选择模板

此种方式适合取值比较简单，但是样式需要自定义的情况。例如博客平台，各种文章、内容平台

比如说v2ex，具体语法为：

<div>{{root.parseToString('.topic_content@html') }} </div>
<style>
.fr {
    float: right;
    text-align: right;
}
.sep3 {
    height: 3px;
}
.badges {
    display: inline-flex;
    cursor: default;
}
.sep5 {
    height: 5px;
}
.reply_content {
    font-size: 14px;
    line-height: 1.6;
    word-break: break-word;
}
.cell {
    border-bottom: 1px solid #4b5052;
    padding: 10px;
}
.small.fade {
     display: inline-flex;
    line-height: 16px;
    height: 16px;
    overflow-y: hidden;
}
</style>
<div style="margin-top:  16px">{{root.parseToString('.box[4]@html') }} </div>

其中，内容为一段html代码，其中，可以使用{{ }}，在中间可以编写js代码，注意，此处不可换行

比如说v2ex，内容上比较简单，

js渲染

此时，自定义内容渲染打开，渲染方式选择js函数

顾名思义，此处的内容就不是上面模板渲染那样是一个html代码了，此处是一个js函数，需要返回一个html，可以使用

比如说猿聊，具体语法示例：

const engines = root.parseToEngines('.CommentPost.Post')
const list = [];
for (let engine of engines) {
    const username = engine.parseToString('.item-user@text');
    const body = engine.parseToString('.Post-body@html');
    const avatar = engine.parseToString('.Avatar@src');
    const time = engine.parseToString('.item-meta@.Dropdown-toggle@text');

    list.push(`<div role="listitem" class="arco-list-item no-padding">
        <div class="arco-list-item-main">
            <div class="arco-list-item-content">
                <div class="arco-list-item-meta">
                    <div class="arco-list-item-meta-avatar">
                        <div class="arco-avatar arco-avatar-square">
                            <span class="arco-avatar-image">
                                <img alt="avatar" src="${avatar}">
                            </span>
                        </div>
                    </div>
                    <div class="arco-list-item-meta-content">
                        <div class="arco-list-item-meta-title">
                            <span>${username}</span>
                            <span class="arco-tag arco-tag-size-medium arco-tag-arcoblue arco-tag-checked ml-8">${time}</span>
                        </div>
                        <div class="arco-list-item-meta-description">
                        </div>
                    </div>
                </div>
                <div>${body}</div>
            </div>
        </div>
    </div>`)
}

return `
<div class="arco-list-wrapper">
    <div class="arco-spin arco-list-spin">
        <div class="arco-scrollbar arco-scrollbar-type-embed">
            <div class="arco-scrollbar-container arco-list arco-list-medium arco-list-split">
                <div class="arco-list-content-wrapper">
                    <div role="list" class="arco-list-content">
                        ${list.join('\n')}
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<style>
.no-padding{
padding: 0 !important;
}
.ml-8 {
margin-left: 8px;
}
</style>
`

目录CONTENT

feed-hub教程：内容规则

选项

普通渲染

类型定义

模板渲染

js渲染

评论区