markdown 文章标签

电玩女神 2022-09-25 11:21 183阅读 0赞

#     #

# markdown 文章标签 #

[markdown 操作文章][markdown]  ：[http://blog.csdn.net/qq\_19558705/article/details/52171181][markdown]

[markdown 发表文章][markdown 1]： [http://blog.csdn.net/qq\_19558705/article/details/52121321][markdown 1]

[markdown 页面编辑器][markdown 2]： [http://blog.csdn.net/qq\_19558705/article/details/51993884][markdown 2]

[  
][markdown 2]

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

[  
][markdown 2]

效果图：

勾选标签

![20160821223659942][]

首页3D云标签显示页面

![20160821223710114][]

文章页面标签显示

![20160821223716161][]

通过标签查询

![20160821223722130][]

如图所示，添加了文字标签的功能（点击标签找到对应标签的文字，其实和搜索是类似的），同时也添加了一个简单的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>

这样基本完成了。

[markdown]: http://blog.csdn.net/qq_19558705/article/details/52171181
[markdown 1]: http://blog.csdn.net/qq_19558705/article/details/52121321
[markdown 2]: http://blog.csdn.net/qq_19558705/article/details/51993884
[http_www.itit123.cn]: http://www.itit123.cn/
[20160821223659942]: /images/20220718/2c435368729847f0a162aff733cbe657.png
[20160821223710114]: /images/20220718/838f92be3dc04244ba6e68114e435200.png
[20160821223716161]: /images/20220718/1dc969b9332742a0a50dd5b55c0eabf2.png
[20160821223722130]: /images/20220718/5cec5cdc3ff54ea29723c44ca4ed6722.png