markdown 文章标签

markdown 文章标签

markdown 操作文章  ：http://blog.csdn.net/qq_19558705/article/details/52171181

markdown 发表文章： http://blog.csdn.net/qq_19558705/article/details/52121321

markdown 页面编辑器： http://blog.csdn.net/qq_19558705/article/details/51993884

个人主页：http://www.itit123.cn/ 更多干货等你来拿

效果图：

勾选标签

首页3D云标签显示页面

文章页面标签显示

通过标签查询

如图所示，添加了文字标签的功能（点击标签找到对应标签的文字，其实和搜索是类似的），同时也添加了一个简单的js特效。搜索js3D云标签就可以找到了。因为不同的设计有不同的思路，笔者主要谈谈通过标签去查询，直接上代码：

添加一个标签实体类 CustomTags：

@Getter
@Setter
@Entity
@Table(name = "xltag")
public class CustomTags extends IdEntity{
	
	private String tagName;

}

Blog 实体类添加字段：

private String tags;

crud就不多说了，之前的博客有提到。

3D云标签显示页面：

<div id="tagbox">
		<c:forEach items="${tags}" var="tag">
			<a href="${ctx}/blog/list?search_LIKE_tags=${tag.tagName}">${tag.tagName}</a> 
			<a href="${ctx}/blog/list?search_LIKE_tags=${tag.tagName}">${tag.tagName}</a> 
		</c:forEach>
	</div>

css样式：

#tagbox{position:relative;height:240px;}
#tagbox a{position:absolute;padding:3px 6px;color:#3a4954;top:0;left:0;font-weight:bold;text-decoration:none;}

引入相应的js和css就可以显示效果。一条数据显示两次，是为了方便点击。引入的3D云标签js代码需要稍微修改一下。在设置速度的地方加一个判断，不然会速度会很快，影响体验。还有一点就是js里面的id是固定的。

a = (-Math.min( Math.max( -mouseY, -size ), size ) / radius ) * tspeed;
		b = (Math.min( Math.max( -mouseX, -size ), size ) / radius ) * tspeed;
		a = a < - 0.98?-0.98:a;
		b = b < - 0.98?-0.98:b;

其他地方都是一样，

后台读取：

List<CustomTags> tags = tagsService.findAll(CustomTags.class);
		model.addAttribute("tags", tags);

前端展示：

<c:forEach items="${tags}" var="tag">
						<input type="checkbox" name="tags" value="${tag.tagName}"/>${tag.tagName}
					</c:forEach>

<%@ taglib  uri="http://java.sun.com/jsp/jstl/functions"   prefix="fn"%>
					<c:forEach items="${fn:split(blog.tags,',')}" var="tag">
					<label class="tag">${tag}</label>
					</c:forEach>

这样基本完成了。