优化Tale博客 点击图片放大高亮

终于在这博客模板上解决点击图片放大高亮效果,虽然还有点小问题,但是在这上面花了很多时间,不在纠结了。作为一个Android+Java开发不懂js+css还是挺尴尬的。

我要吐槽下这个博客项目的spring boot,实在忍受不了。再找找spring boot热部署方面的资料,如果还真的不能热部署,下次修改重点方向就是将它改成springMVC

效果

作为一个博客网站,如果一篇文章中有图片,我希望点击图片可以看到放大的、高亮的、清晰的图片,并且是在该文章网页内,不是将图片新开一个网页。可以点击如下图片看看效果—胜利女神在微笑~~

图片全失效,并且博客也换主题了,但是功能做法没问题,想实现可继续看下面

实现图片高亮

1、分析

首先我去该博客模板来源中 issues 中搜了下,没看到有此需求的。

13blog

tale

竟然没看到类似需求的,没办法自己看看博客代码,一路找。

首先找到该网页的请求入口

    /**
     * 文章页
     *
     * @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的框架。

Markdown format

好像到这里就卡住了,所以没办法了。去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 支持一波可好

博客的私人定制

一亩三分自留地

怎么说呢?不管有用没,还是想加上这句
老郭种树原创,转载请加上优化Tale博客 点击图片放大高亮
点赞

发表评论

电子邮件地址不会被公开。 必填项已用*标注