markdown 文章标签

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_19558705/article/details/52265947


markdown 文章标签



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>

这样基本完成了。











展开阅读全文

没有更多推荐了,返回首页