Mr丶冷文

文章 分类 评论
115 10 5698

站点介绍

冷文学习者(KEVINLU98.COM),记录一个北漂小码农的日常业余生活
友链申请地址(直接评论即可): 传送门

(十七)文章详情页的展示

MR丶冷文 2022-10-13 163 1条评论 个人博客项目视频教程 javaspringboot个人博客博客系统

首页 / 正文
Freewind主题v1.5版本已发布,下载请移步Freewind 1.5,同时还有主题伴生插件Freewind Markdown,下载请移步 Freewind Markdown,有问题请在留言板,交换友链请直接在友链留言,我创建了一个主题交流群,有兴趣可以加下: 点此加入
报毒我说明一下,是因为我把主题的版权信息做了加密,其中用了eval,杀毒软件认为eval函数是一个危险的操作,这点介意的话请勿下载,我也没有强迫任何人去下载,也没有向大家收取一分钱的主题费用,所以也犯不着因为这些事情来喷我,喜欢就用,不喜欢就不用,就这么简单

发布于2022-10-28

说明

我们列表展示区域的内容基本已经做完了,我们的站点前台就只差文章页面的部分功能,我们这节课先把文章的渲染展示做一下

第三方

  • 排版:本来页面的排版是想用Typo.css来排版的,后来觉得那个排版与我们博客的主体不搭,就自己写了版的css,文章排版其实就是把那些markdown渲染的html代码出现的标签加个样式就行了
  • 代码高亮:这里用的是prism,其实还有很多,只是这个用起来比较简单,导入一下就行了,不需要手动渲染
  • markdown解析:我们用的是commonmark-java这个包,而其它java的markdown解析也基本都用的是它,但它只能支持一些比较简单的markdown语法,稍微复杂一点就不能支持了,但官我给我们很多扩展选项,对我们来说它的基本功能再加上表格的支持就够了

详情页的展示

  • 导入依赖
<dependency>
    <groupId>org.commonmark</groupId>
    <artifactId>commonmark-ext-gfm-tables</artifactId>
    <version>0.18.1</version>
</dependency>
<dependency>
    <groupId>org.commonmark</groupId>
    <artifactId>commonmark-ext-gfm-tables</artifactId>
    <version>0.18.1</version>
</dependency>
  • 我们创建一个MarkdownUtil的工具类用于解析markdown
package cn.kevinlu98.utils;

import org.commonmark.Extension;
import org.commonmark.ext.gfm.tables.TablesExtension;
import org.commonmark.node.Heading;
import org.commonmark.node.Link;
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;

import java.util.Arrays;
import java.util.Collections;
import java.util.List;
import java.util.Map;
import java.util.UUID;

/**
 * Author: Mr丶冷文
 * Date: 2022/10/13 14:08
 * Email: kevinlu98@qq.com
 * Description:
 */
public interface MarkdownUtil {

    List<Extension> EXTENSIONS = Collections.singletonList(TablesExtension.create());
    Parser parser = Parser.builder()
            .extensions(EXTENSIONS)
            .build();
    HtmlRenderer renderer = HtmlRenderer.builder()
            .extensions(EXTENSIONS)
            .attributeProviderFactory(attributeProviderContext -> (node, tagName, attributes) -> {
                if (node instanceof Link) {
                    attributes.put("target", "_blank");
                }
                if (node instanceof Heading) {
                    attributes.put("id", UUID.randomUUID().toString().replace("-", ""));
                    attributes.put("class", "lw-title-toc");
                }
            })
            .build();

    /**
     * 将markdown代码解析成html
     *
     * @param markdown markdown源码
     * @return html代码
     */
    static String parse(String markdown) {
        Node document = parser.parse(markdown);
        return renderer.render(document);
    }
}
  • Article中定义一个showHtml()的方法用于将content转化为html代码
public String showHtml() {
  return MarkdownUtil.parse(this.content);
}
  • 定义路由并查询文章详情
@GetMapping("/{id}.html")
public String detail(@PathVariable Integer id, Model model) {
  Article article = articleService.detail(id);
  //todo 当文章不存在时的处理
  model.addAttribute("article", article);
  return "detail";
}
  • 页面展示并引入prism
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="en">
  <head th:replace="common::header(~{::title},~{::link},~{})">
    <title th:text="${ article.title +' - '+@webSite.title}"></title>
    <link rel="stylesheet" href="/static/css/detail.css">
    <link rel="stylesheet" href="/static/plugin/prism/prism.css">
  </head>
  <body>
    <th:block th:include="common::nav"></th:block>

    <div class="lw-container lw-main lw-posr">
      <div class="lw-left-list">
        <div class="lw-article-list">
          <ol class="breadcrumb lw-crumb">
            <li><a href="/">首页</a></li>
            <li><a th:href="@{/category/{id}.html(id=${article.category.id})}" th:text="${article.category.name}"></a></li>
            <li class="active">正文</li>
          </ol>
          <div class="lw-article">
            <div class="lw-article-title">
              <h1 th:text="${article.title}"></h1>
              <p>
                <i class="fa fa-clock-o lw-mr5"></i>
                <th:block th:text="${#dates.format(article.created,'yyyy-MM-dd HH:mm')}"></th:block>
                <i class="fa fa-eye lw-mr5 lw-ml10"></i>
                <th:block th:text="${article.views}"></th:block>
                <i class="fa fa-comment lw-ml10 lw-mr5"></i>
                <th:block th:text="${article.commentCount}"></th:block>
                <i class="fa fa-folder  lw-ml10 lw-mr5"></i> <a th:href="@{/category/{id}.html(id=${article.category.id})}" th:text="${article.category.name}"></a></a>
            <i class="fa fa-tags  lw-ml10 lw-mr5"></i> <a th:each="tag:${article.tags}" th:href="@{/tag/{id}.html(id=${tag.id})}" th:text="${tag.name}"></a>
            </p>
        </div>
        <div class="lw-article-content" id="lw-article-content" th:utext="${article.showHtml()}"></div>
        <ul class="lw-article-right">
          <li>
            <svg t="1664366825703" class="icon" viewBox="0 0 1024 1024" version="1.1"
                 xmlns="http://www.w3.org/2000/svg" p-id="919" width="200" height="200">
              <path d="M512 512m-448 0a448 448 0 1 0 896 0 448 448 0 1 0-896 0Z" fill="#FB3A83"
                    p-id="920"></path>
              <path d="M676.5 701c-9 0-16.6-6.3-18.1-15-1.1-6-2.5-11.6-4.2-16.7l-0.1-0.2-0.1-0.2c-9.1-31.5-29.1-59-56.6-78-26.2 13.2-55.6 20.1-85.3 20.1-29.8 0-59.2-7-85.5-20.2-27.6 19-47.7 46.5-56.8 78.1-0.2 0.7-2.1 7.9-4.8 18.5-2 8.1-9.3 13.7-17.8 13.7h-10.7c-4.8 0-9.4-2-12.5-5.6-3.1-3.5-4.6-8.2-4-12.8 8.1-60.2 46.2-113.1 101.7-141.5l5.4-2.8 5.1 3.4c23.5 15.9 51.1 24.3 79.8 24.3 28.7 0 56.2-8.4 79.7-24.2l5.1-3.4 5.4 2.8c55.4 28.4 93.4 81.3 101.5 141.4 0.6 4.6-0.8 9.3-4 12.8s-7.7 5.6-12.5 5.6h-10.7zM512.2 526.3c-74.5 0-135-60-135-133.6S437.7 259 512.2 259s135 60 135 133.6c0 73.7-60.5 133.7-135 133.7z m0-222.4c-49.6 0-89.9 39.8-89.9 88.8s40.3 88.8 89.9 88.8c49.6 0 89.9-39.8 89.9-88.8s-40.3-88.8-89.9-88.8z"
                    fill="#FFFFFF" p-id="921"></path>
            </svg>
            <span>版权所属: <a href="https://kevinlu98.cn/">冷文学习者</a></span>
          </li>
          <li>
            <svg t="1664366893739" class="icon" viewBox="0 0 1024 1024" version="1.1"
                 xmlns="http://www.w3.org/2000/svg" p-id="1067" width="200" height="200">
              <path d="M512 512m-448 0a448 448 0 1 0 896 0 448 448 0 1 0-896 0Z" fill="#FA5151"
                    p-id="1068"></path>
              <path d="M610.2 324c22.6 20.5 33.8 49 33.8 85.2 0 26.6-7.5 50.2-22.4 70.7-5.6 6.9-22.2 22.4-49.6 46.5-12.5 10.5-21.8 21.4-27.8 32.6-7.7 12.9-11.5 27.8-11.5 44.7v13.9h-49v-13.9c0-20.1 3.8-37.7 11.5-52.6 7.3-17.3 27.6-40.7 61-70.1 8.1-8.1 14.9-15.3 20.5-21.8 11.7-15.3 17.5-31.2 17.5-47.7 0-24.2-6.6-42.9-19.9-56.2-14.1-14.1-34.1-21.2-59.8-21.2-29.8 0-52.2 9.9-67.1 29.6-12.9 17.3-19.3 40.5-19.3 69.5h-48.4c0-41.9 11.9-75.7 35.7-101.5 25-26.6 58.8-39.9 101.5-39.9 39.7 0.2 70.7 10.9 93.3 32.2z m-75.5 346.4c6.8 6.9 10.3 15.3 10.3 25.4 0 10.5-3.4 19.1-10.3 26-7.7 6.9-16.3 10.3-26 10.3-10.5 0-19.1-3.4-26-10.3-7.3-7.3-10.9-15.9-10.9-26 0-10.5 3.6-18.9 10.9-25.4 6.4-6.8 15.1-10.3 26-10.3 10.4 0 19.1 3.4 26 10.3z"
                    fill="#FFFFFF" p-id="1069"></path>
            </svg>
            <span>本文链接: <a href="https://kevinlu98.cn/archives/101.html">https://kevinlu98.cn/archives/101.html</a></span>
          </li>
          <li>
            <svg t="1664366925081" class="icon" viewBox="0 0 1024 1024" version="1.1"
                 xmlns="http://www.w3.org/2000/svg" p-id="1215" width="200" height="200">
              <path d="M800.3 205.1L534.8 116c-16-5.4-33.3-5.3-49.2 0.2l-264.5 92.3c-29.3 10-49 37.5-49.1 68.4l1.7 265.4c0.7 81 31.1 158.9 85.6 218.9 25 27.7 56.9 51.5 97.8 72.7l144 74.6c9 4.7 19.7 4.6 28.7-0.2L672.5 832c40.4-21.6 72.2-45.7 96.9-73.8 53.6-60.6 83-138.9 82.6-219.8l-1.7-265.6c-0.5-30.9-20.5-58.1-50-67.7z"
                    fill="#FFC300" p-id="1216"></path>
              <path d="M512 597c-13.9 0-25.2-11.3-25.2-25.2V345.2c0-13.9 11.3-25.2 25.2-25.2 13.9 0 25.2 11.3 25.2 25.2v226.6c0 13.9-11.3 25.2-25.2 25.2z"
                    fill="#FFFFFF" p-id="1217"></path>
              <path d="M512 674.1m-29.9 0a29.9 29.9 0 1 0 59.8 0 29.9 29.9 0 1 0-59.8 0Z" fill="#FFFFFF"
                    p-id="1218"></path>
            </svg>
            <span>协议授权: <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh">《署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0)》</a></span>
          </li>
        </ul>
      </div>
      <div class="lw-comment-box row lw-m0">
        <h2>评论(6)</h2>
        <form action="">
          <div class="col-md-12 lw-p0" style="padding-right: 10px;">
            <textarea placeholder="请输入你的评论..."></textarea>
          </div>
          <div class="col-md-4 col-xs-12 lw-comment-input lw-posr">
            <input type="text" placeholder="请输入昵称...">
            <i class="fa fa-user  lw-comment-input  lw-posa"></i>
          </div>
          <div class="col-md-4 col-xs-12   lw-comment-input lw-posr">
            <input type="email" placeholder="请输入电子邮件...">
            <i class="fa fa-envelope lw-posa"></i>
          </div>
          <div class="col-md-4 col-xs-12  lw-comment-input  lw-posr">
            <input type="url" placeholder="请输入主页地址...">
            <i class="fa fa-link fa-link lw-posa"></i>
          </div>

        </form>
      </div>
    </div>


    <div class="lw-comment-list">
      <ul>
        <li class="lw-posr">
          <div class="lw-comment-avatar lw-posa">
            <img src="https://kevinlu98.cn/freecdn-1.4/image/avatar/22.png" alt="">
          </div>
          <div class="lw-comment-content">
            <p><b>xpboy</b> <span>2022-06-03 18:32</span> <a href="">回复</a></p>
            <p class="lw-comment-info">
              已经解决,问题是后台的的永久链接--重写功能,一定要开启成功,我是开启没有成功,但是可以使用,部分功能受限,如点赞、登录、注册等。我是windows
              iis,添加web.config放到网站根目录就可以了,希望踩坑的朋友注意了。具体的web.config伪静态规则代码,可以联系我免费提供哦
              qq24985536,希望帮助到大家</p>
          </div>
          <ul>
            <li class="lw-posr">
              <div class="lw-comment-avatar lw-posa">
                <img src="https://q1.qlogo.cn/g?b=qq&nk=1518228633&s=100" alt="">
              </div>
              <div class="lw-comment-content">
                <p><b>VOODOO</b> <span>2022-09-28 19:53</span> <a href="">回复</a></p>
                <p class="lw-comment-info">
                  @xpboy
                  <br>
                  谢谢</p>
              </div>
            </li>
          </ul>
        </li>
        <li class="lw-posr">
          <div class="lw-comment-avatar lw-posa">
            <img src="https://q1.qlogo.cn/g?b=qq&nk=68159424&s=100" alt="">
          </div>
          <div class="lw-comment-content">
            <p><b>anle</b> <span>2022-06-03 18:32</span> <a href="">回复</a></p>
            <p class="lw-comment-info">
              您好~我是俺没偷前端的运营,关注了您在分享的技术文章,觉得您的这套模板很棒,我们诚挚邀请您加入俺没偷前端CP主计划。完整福利和详细介绍请见:https://anlenotes.com/cp
              我们会给作者提供包括流量、创作分成等, 我们诚挚的邀请您并期待您的加入~</p>
          </div>
        </li>
        <li class="lw-posr">
          <div class="lw-comment-avatar lw-posa">
            <img src="https://q1.qlogo.cn/g?b=qq&nk=602314742&s=100" alt="">
          </div>
          <div class="lw-comment-content">
            <p><b>王伟忘记使自己快乐</b> <span>2022-06-03 18:32</span> <a href="">回复</a></p>
            <p class="lw-comment-info">
              你好,请问一下,搭建的网页,在本地访问一点问题都没有,通过互联网域名访问,打开很慢,而且显示不正常,电脑手机都是一样的,是什么问题呢</p>
          </div>
        </li>
        <li class="lw-posr">
          <div class="lw-comment-avatar lw-posa">
            <img src="https://q1.qlogo.cn/g?b=qq&nk=545431&s=100" alt="">
          </div>
          <div class="lw-comment-content">
            <p><b>小布丁</b> <span>2022-06-03 18:32</span> <a href="">回复</a></p>
            <p class="lw-comment-info">
              为什么启用这个主题 后,评论用不了了,报错。</p>
          </div>
        </li>
      </ul>
    </div>


    <ul class="lw-pagenation">
      <li><a href="">首页</a></li>
      <li><a href="">1</a></li>
      <li><a href="">2</a></li>
      <li><a href="">3</a></li>
      <li><a href="">4</a></li>
      <li><a href="">5</a></li>
      <li><a href="">尾页</a></li>
    </ul>
    </div>
  <div class="lw-right-list lw-md-show lw-posa">
    <th:block th:include="common::right"></th:block>
  </div>
  </div>

<th:block th:include="common::footer"></th:block>
<script src="/static/plugin/prism/prism.js"></script>
</body>
</html>
  • 文章目录处理

    • h标签加上id
    • 取到所有的h标签
    • 生成a标签,href#hid
$(function () {
  let offset = [10, 20, 30, 40, 50, 60]

  let hTag = $('#lw-article-content .lw-title-toc')
  let hMax = 6;
  hTag.each((i, ele) => {
    hMax = Math.min(ele.tagName.charAt(1), hMax)
  })
  for (let i = 0; i < offset.length; i++) {
    offset[i] -= (hMax - 1) * 10
  }
  hTag.each((index, element) => {
    let level = element.tagName.charAt(1)
    let left = offset[level - 1]
    $('#lw-article-toc').append(`<li><a style="padding-left: ${left}px;" href="#${$(element).attr('id')}">${$(element).text()}</a></li>`)
  })
})

附件下载

  • 来源:冷文的分享小站
    提取密码:暂无
  • 来源:蓝奏云
    提取密码:暂无

评论(1)

  1. 寻路。 游客 2022-10-21 21:02 回复

    你好

最新评论

  •  hh

  •  hh

  • 蝌蚪

    支持大佬

  • SURELY

    下载支持一下大佬

  • SURELY

    大佬支持啊,下载了试一下

日历

2022年12月

    123
45678910
11121314151617
18192021222324
25262728293031

文章目录

站点公告
Freewind主题v1.5版本已发布,下载请移步Freewind 1.5,同时还有主题伴生插件Freewind Markdown,下载请移步 Freewind Markdown,有问题请在留言板,交换友链请直接在友链留言,我创建了一个主题交流群,有兴趣可以加下: 点此加入
报毒我说明一下,是因为我把主题的版权信息做了加密,其中用了eval,杀毒软件认为eval函数是一个危险的操作,这点介意的话请勿下载,我也没有强迫任何人去下载,也没有向大家收取一分钱的主题费用,所以也犯不着因为这些事情来喷我,喜欢就用,不喜欢就不用,就这么简单
点击小铃铛关闭