终于在这博客模板上解决点击图片放大高亮效果，虽然还有点小问题，但是在这上面花了很多时间，不在纠结了。作为一个
Android+Java开发不懂js+css还是挺尴尬的。我要吐槽下这个博客项目的
spring boot，实在忍受不了。再找找spring boot热部署方面的资料，如果还真的不能热部署，下次修改重点方向就是将它改成springMVC。
效果
作为一个博客网站，如果一篇文章中有图片，我希望点击图片可以看到放大的、高亮的、清晰的图片，并且是在该文章网页内，不是将图片新开一个网页。可以点击如下图片看看效果—胜利女神在微笑~~
图片全失效，并且博客也换主题了，但是功能做法没问题，想实现可继续看下面
实现图片高亮
1、分析
首先我去该博客模板来源中 issues 中搜了下，没看到有此需求的。
竟然没看到类似需求的，没办法自己看看博客代码，一路找。
首先找到该网页的请求入口
/**
* 文章页
*
* @param request 请求
* @param cid 文章主键
* @return
*/
@GetMapping(value = {"article/{cid}", "article/{cid}.html"})
public String getArticle(HttpServletRequest request, @PathVariable String cid) {
ContentVo contents = contentService.getContents(cid);
if (null == contents || "draft".equals(contents.getStatus())) {
return this.render_404();
}
request.setAttribute("article", contents);
request.setAttribute("is_post", true);
completeArticle(request, contents);
if (!checkHitsFrequency(request, cid)) {
updateArticleHit(contents.getCid(), contents.getHits());
}
return this.render("post");
}
看到其中两个重要代码
request.setAttribute("article", contents);
return this.render("post");
这里找到post.html代码。
主要关键代码在这
<p class="post-tags" th:utext="${commons.show_tags(article.tags)}"></p>
<th:block th:utext="${commons.article(article.content)}"/>
关键在这commons.article(article.content)e，好了这里很明显，找到这个方法。
/**
* 显示文章内容，转换markdown为html
*
* @param value
* @return
*/
public static String article(String value) {
if (StringUtils.isNotBlank(value)) {
value = value.replace("<!--more-->", "\r\n");
return TaleUtils.mdToHtml(value);
}
return "";
}
原来如此，我开始还在想这种博客网页是怎么实现的，原来直接将markdown转成 html。
在点进去，进入方法
/**
* markdown转换为html
* @param markdown
* @return
*/
public static String mdToHtml(String markdown) {
if (StringUtils.isBlank(markdown)) {
return "";
}
java.util.List<Extension> extensions = Arrays.asList(TablesExtension.create());
Parser parser = Parser.builder().extensions(extensions).build();
Node document = parser.parse(markdown);
HtmlRenderer renderer = HtmlRenderer.builder().extensions(extensions).build();
String content = renderer.render(document);
content = Commons.emoji(content);
return content;
}
好像到这里也没啥用，看不出什么东西，只能通过debug看到通过这个方法，数据内容已经变了，变成html标签了。这几个类都不认识，所以看导包。
import org.commonmark.Extension;
import org.commonmark.ext.gfm.tables.TablesExtension;
import org.commonmark.node.Node;
import org.commonmark.parser.Parser;
import org.commonmark.renderer.html.AttributeProvider;
import org.commonmark.renderer.html.AttributeProviderContext;
import org.commonmark.renderer.html.AttributeProviderFactory;
import org.commonmark.renderer.html.HtmlRenderer;
全都有commonmark ，搜了下这是啥东西。原来是一个将markdown转成html的框架。
好像到这里就卡住了，所以没办法了。去tale提了个my issues，其中一位老铁说使用zoom.js插件。红框标错
所以又去搜了下关于这个插件的使用，github zoom.js。发现使用条件比较简单，其中一条需要图片标签中含有自定义的属性data-action="zoom"。
<img src="img/blog_post_featured.png" data-action="zoom">
太巧了！！这个commonmark中提供了单独改变某个节点标签的方法。change elements
好了，解决这问题有希望了。
2、解决步骤
2.1 修改图片标签
新建一个类ImageAttributeProvider，代码如下
public class ImageAttributeProvider implements AttributeProvider {
@Override
public void setAttributes(Node node, String s, Map<String, String> map) {
if(node instanceof Image){
map.put("data-action", "zoom");
}
}
}
找到utils-->TaleUtils-->mdToHtml()，修改成如下代码
/**
* markdown转换为html
*
* @param markdown
* @return
*/
public static String mdToHtml(String markdown) {
if (StringUtils.isBlank(markdown)) {
return "";
}
java.util.List<Extension> extensions = Arrays.asList(TablesExtension.create());
Parser parser = Parser.builder().extensions(extensions).build();
Node document = parser.parse(markdown);
HtmlRenderer renderer = HtmlRenderer.builder().extensions(extensions)
.attributeProviderFactory(new AttributeProviderFactory() {
public AttributeProvider create(AttributeProviderContext context) {
return new ImageAttributeProvider();
}
})
.build();
//HtmlRenderer renderer = HtmlRenderer.builder().extensions(extensions).build();
String content = renderer.render(document);
content = Commons.emoji(content);
return content;
}
2.2 复制 .js .css文件到项目中，并引入
post.html--<body>中引入，如果地址不一样，自行修改
<script th:src="@{/admin/js/zoom.js}"></script>
<script th:src="@{/admin/js/transition.js}"></script>
header.html--<head>中引入
<link th:href="@{/user/css/zoom.css}" rel="stylesheet" type="text/css"/>
好的，到这里差不多已经解决了，点击图片有效果。但是貌似zoom.css样式没起作用。
如果有谁知道或者解决，麻烦吱一声 🙂
解决这个问题花了点时间，如果帮到你 star 支持一波可好
本文由老郭种树原创，转载请注明：https://guozh.net/youhuataleboke-dianjitupianfangdagaoliang/