内容管理系统相关文章的显示-优快云博客

本文介绍了一种使用Solr搜索引擎的morelikethis功能，通过自定义的HTML模板和JavaScript方法，实现了一个在内容管理系统中展示与当前文章相似内容的组件。详细解释了如何在页面上插入加载中指示符、引入必要的脚本文件，并通过Solr查询获取相关文章。此方法适用于提升用户阅读体验，增加网站内导航效率。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

2019独角兽企业重金招聘Python工程师标准>>>

“相关文章”的显示技术其实超越了大部分开发者技术能力（本人承认没有这个能力）。我只能借助已有的解决方案，将它们拼凑起来，设计成一个组件，供美工人员使用，这是本篇所要介绍的内容。（注：模块仅适用于诗篇内容管理系统，但原理类同）。先贴代码：

1、在页面上的模板，可以放在任何位置，约定外围格式。

<div id="mlt-c">
	<span>加载中....</span>
	<script type="text/x-template"> 
		<% Y.Array.each(this.articles,function(one){ %>
			<a href="/showobject/?id=<%= one.id %>"><%= one.title%></a>
		<% }); %>
	</script>
</div>

说明：

容器，可以用任意标签，但必须指定ID或者css selector可以选到
加载过程中显示的内容，一般是loading图片。
这是js模板，参考：http://yuilibrary.com/yui/docs/template/，提一下文章还有一个one.getTitle(15,"...")这样一个函数。

2、引入脚本，最好放在页面的底部。

<script type="text/javascript" src="${yuiSeed}"></script>
<script type="text/javascript"><#include "more-like-this-page.js"></script>
<script type="text/javascript">
	_MORE_LIKE_THIS({
            siteId: ${site.id?c},
            articleId: ${article.id?c},
            searchHost: "${searchHost}",
            container: 'mlt-c',
            mltcount: 10
	});
</script>

第一行是yui种子文件，如果页面已经已经引入就不必再次引入。
第二行是freemark引入，定义了_MORE_LIKE_THIS方法。
呼叫方法。

下面的内容和使用者无关！！

原理就是使用solr搜索引擎的morelikethis。下面是源代码：

/**
 * moreLikeThis内容块。只要用户提供根据约定格式书写的一段html的Id或者node，就能显示与当前文件相似的文章。
 * 常见于内容管理系统的”相似文章“。
 * <div id="容器ID">
 *      这里是喜欢的加载中图形。
 *      <img src="/neverchange/icons/spinner.gif" style="margin:auto;" class="mlt-loading"/>
 *      <script type="text/x-template" id="search-header-template">
 *          这里是html模板内容，详见：http://yuilibrary.com/yui/docs/template/
 *      </script>
 * </div>
 * 
 */

var Lang = Y.Lang;

var MoreLikeThisView = Y.Base.create('moreLikeThisView',
    Y.View,[],{
        events: {
        },
        initializer: function (){
            var container = this.get('container'),
                autoFetch = this.get('autoFetch'),
                template;

            if (!container) {
                alert("请指定容器！");
                return;
            }
            
            template = container.one('script');
            
            if (!template) {
                alert("请指定html模板！");
                return;
            }
            
            this.template = Y.Template.Micro.compile(template.getHTML());
            
            this.after('articlesChange',function() {
                this.render();
            });
            
            if (autoFetch) {
                this.fetchMlt();
            }
        },
        render: function () {
            var container = this.get('container'),
                articles = this.get('articles');
            
            if (Lang.isNull(articles)) {
                return this;
            }
            
            container.setHTML(this.template({articles:articles}));
            return this;
        },
        fetchMlt: function(cb) {
            var articleId = this.get('articleId'),
                siteId = this.get('siteId'),
                mltcount = this.get('mltcount'),
                searchHost = this.get('searchHost'),
                self = this,
                solrq = new Y.M3958.Solr.Solrq({
                    siteId:siteId,
                    q:"*:*",
                    id: articleId,
                    fl: "id,title",
                    mlt: true,
                    "mlt.fl": "title,content",
                    "mlt.count": mltcount
                }),
                ds = Y.M3958.Solr.DsFactory.create(searchHost + "/solr-numberone/select?wt=json&"),
                reqUrl = solrq.toString() + "&" + Y.QueryString.stringify({rows:10,start:0});
            
            ds.sendRequest({
                request: reqUrl,
                on:{
                    success: function(e){
                        var resp = e.response,
                            article = null,
                            articles = [];
                        
                        if (resp.results && resp.results.length > 0) {
                            article = new Y.M3958.WebPage.ClientArticle(resp.results[0],
                                    resp.meta.moreLikeThis);
                            articles = article.getMoreLikeThis();
                        }
                        
                        // for test use
                        if (cb) {
                            cb.call(self,article);
                        } else {
                            self.set('articles',articles);
                        }
                    }
                }
            });
        }
    },
    {
        ATTRS: {
            container: {
                setter: function(v) {
                    if (Lang.isString(v)) {
                        if (v.indexOf('#') === 0 || v.indexOf('.') === 0) {
                            return Y.one(v);
                        } else {
                            return Y.one('#' + v);
                        }
                    } else {
                        return v;
                    }
                }
            },
            articles: {
                value: null
            },
            articleId: {
                value: null
            },
            siteId: {
                value: null
            },
            searchHost: {
                value: null
            },
            mltcount: {
                value: 10
            },
            autoFetch: {
                value: true
            }
        }
    }
);

Y.namespace("M3958.WebPage").MoreLikeThis = MoreLikeThisView;

转载于:https://my.oschina.net/jianglibo/blog/171004