博客做出来的时候就想要把一些栏目和文章页都静态化处理,当时没啥时间搞,就一直没去弄。但是最近的工作就是做网站,用cms快速搭出了几个网站,cms搭建网站是真的方便啊 如果没有需要二次开发实现的功能,那基本不需要写后端代码的。而且做出来的还不错,怪不得看很多博主都是用cms搭建的博客。 我是用的FreeCMS,展示层就有用Free Marker来做。 然后就参考这个cms的源码 把自己博客的文章页静态化了下。

原文连接:ZJBLOG

静态化主要是为了提高网页打开的速度,然后还有利于SEO,更容易被搜索引擎识别收录,而且比较稳定和安全。

free marker静态化原理是用模板+数据模型=输出html网页。

freemarker并不关心数据的来源,只是根据模板的内容,将数据模型在模板中显示并输出文件(通常为html,也可以生成其它格式的文本文件)

首先引入jar包

Free marker的jar包和文档

链接:https://pan.baidu.com/s/1GZNvnOT6wbb2S6646c7cSQ 密码:q0af

maven依赖

<!-- freemarker -->
<dependency>
<groupId>org.freemarker</groupId>
<artifactId>freemarker</artifactId>
<version>2.3.23</version>
</dependency>

代码

根据模板文件和数据模型创建html的方法

private void createHtml(String templetPath, String siteInfoPath, HashMap<String, Object> map) throws Exception {
// ①创建配置对象(创建一个Configuration对象,直接new一个对象。构造方法的参数就是freemarker对于的版本号。)
Configuration cfg = new Configuration(Configuration.getVersion());// 注意:这里需要传递一个版本 // ②读取模板文件夹
cfg.setDirectoryForTemplateLoading(new File(templetPath));// 设置要加载的模板文件的路径,这里的templetPath就是模板的路径webapp/templet/
// ③设置模板的编码格式
cfg.setDefaultEncoding("UTF-8"); // ④获取模板对象
Template template = cfg.getTemplate("info.html");// info.html是模板名称 // ⑥将模板和数据模型合并 --> 输出模板,生成文件
// 静态页面路径
File htmlFile = new File(siteInfoPath); //siteInfoPath是静态化生成的html存放的路径,webapp/site/info/2019-11-30(文章日期)/文章id.html(根据自己的需要来设置)
if (!htmlFile.getParentFile().exists()) {
htmlFile.getParentFile().mkdirs(); //文章不存在则创建
}
PrintWriter pw = new PrintWriter(htmlFile);
template.process(map, pw);// 合并 map:数据模型 pw:输出流对象 map中存的是模板文件中需要的数据文章列表等,在模板文件中用${..}获取,可参考free marker文档
pw.close();// 关闭流
}

  

   

静态化文章页的方法

 /**
* 静态化文章页
*
* @param articleId
* @throws IOException
*/
@RequestMapping({"/toCrea****"})
public String toCreate****(HttpServletRequest request, Long articleId) throws Exception { LOGGER.info("静态化文章方法开始"); //查询要静态化的文章信息
Article article = new Article();
article.setArticleId(articleId);
Article articleDetail = articleService.selectByKeyWords(article);
//文章发布的时间,用于将静态化的文章网页放在对应时间的文件夹中
String articleTime = Tools.getStrDateTime(articleDetail.getCreationtime(), "yyyy-MM-dd"); // 给文章添加访问路径(发布一篇文章后静态化该文章,静态化时将该文章的静态化后路径添加至数据库)
String pageUrl = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
+ request.getContextPath() + "/site/info" + articleId + ".html";
articleDetail.setPageUrl(pageUrl);
articleService.upArticle(articleDetail); // 创建数据模型(这里使用map类型) --[数据模型可以是List、Map对象 注意:Map类型的key必须是String类型]
HashMap<String, Object> map = new HashMap<>();
map.put("contextPathNo", request.getSession().getServletContext().getContextPath());// 项目名称,用于生成后html页面的静态资源调用css,img等
// 文章信息
......//其他信息代码省略。。。 map.put("info", articleDetail);
...... //模板所在的路径
String templetPath = request.getSession().getServletContext().getRealPath("/templet");
//静态化生成的html路径
String siteInfoPath = request.getSession().getServletContext()
.getRealPath("/site/info/" + articleTime + "/" + articleId + ".html"); createHtml(templetPath, siteInfoPath, map); return "success";
}

  

模板文件info.html(省略了很多代码,仅作为示例)

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>${info.articleTitle }</title>
<link href="${contextPathNo}/css/details.css" rel="stylesheet">
<script src="${contextPathNo}/js/jquery-1.7.2.min.js"></script>
</head>
<body>
<!-- 文章信息 -->
<h2 class="c_titile" style="font:'宋体', Arial, Helvetica, sans-serif;color: #756F71">${info.articleTitle}</h2>
<p class="box_c" style="font: 12px '宋体', Arial, Helvetica, sans-serif;color: #756F71">
<span class="d_time">发布时间:${info.creationtime?string('yyyy-MM-dd hh:mm') }</span> <!-- ?string将date类型时间转为字符串显示--> <span>编辑:${info.articleAuthor}</span>
阅读:<span id='ajaxInfoClickSpan'><img src='${contextPathNo}/images/ajax-loader.gif'/></span><!-- 文章点击量 需要动态展示 -->
<input type="hidden" value="${info.articleId?c}" id="articleIdinit"><!-- ?c将long类型文章id正常显示,不加?c会被,分割--> </p>
<ul class="infos">${info.articleDetail }
</ul> <!-- 其他的例如文章列表、判断等 --> <#if (info.parent==333)> <a class="n2" href="${contextPathNo}/toSharesss">程序人生</a> </#if>
<!-- 非空判断 frm没有null-->
<#if upArticle??>
<p>
上一篇:<a href="${contextPathNo}/toDetail}">${upArticle.articleTitle}</a>
</p>
</#if>
<!-- 遍历列表,if else 。获取长度需要?使用.没用-->
<ul class="rank">
<#list newTimeArticleList as newList>
<#if (newList.articleTitle?length>16)>
<li><a href="${contextPathNo}/toDetail"
title="${newList.articleTitle }" target="_blank">${newList.articleTitle?substring(0,16)}...</a></li>
<#else>
<li><a href="${contextPathNo}/toDetail"
title="${newList.articleTitle }" target="_blank">${newList.articleTitle}</a></li>
</#if>
</#list>
</ul> <!-- 大概的模板,更多的内容参考文档-->
</body> </html>

  

这样就能根据模板来生成一个html静态网页了。

需要注意的是,有些动态展示的内容 是不能直接静态化的,比如 文章的点击数和 右侧的最热文章,最新文章,底部的上一篇下一篇等。。。

暂时没有的解决方式 我就用了ajax来加载的。。

网站优化之使用Free marker静态化网站文章页的更多相关文章

  1. java自适应响应式 企业网站源码 SSM freemaker生成静态化 手机 平板 PC springmvc

    java 企业网站源码 前后台都有 静态模版引擎, 代码生成器大大提高开发效率 前台: 支持两套模版, 可以在后台切换 系统介绍: 1.网站后台采用主流的 SSM 框架 jsp JSTL,网站后台采用 ...

  2. 为什么网站URL需要设置为静态化

    http://www.wocaoseo.com/thread-95-1-1.html       为什么网站URL需要静态化?网站url静态化的好处是什么?现在很多网站的链接都是静态规的链接,但是网站 ...

  3. PHP静态化

    一.判断大型网站的标准 1.pv值(page views)网站浏览量: 概念:一个网站,所有的页面,在一天24小时内,被访问的总量,达到千万级别,或者几百万以上. 2.uv值(unique visit ...

  4. 网站优化不等于搜索引擎优化SEO

    对于SEO相信搞网络营销的人基本上都知道这个名词,英文全称为search engine optimization,中文一般叫搜索引擎优化,也有的叫搜索引擎定位(Search Engine Positi ...

  5. PHP实现HTML页面静态化

    随着网站的内容的增多和用户访问量的增多,无可避免的是网站加载会越来越慢,受限于带宽和服务器同一时间的请求次数的限制,我们往往需要在此时对我们的网站进行代码优化和服务器配置的优化.一般情况下会从以下方面 ...

  6. ThinkPHP5中如何实现模板完全静态化

    模板完全静态化,也就是通过模板完全生成纯静态的网页,相比动态页面和伪静态页面更安全更利于SEO访问更快.相比前二者各有利弊吧,现在稍微对这三种形式的优缺点对比一下,以及在ThinkPHP5项目中实现完 ...

  7. PHP 实现页面静态化

    PHP文件执行阶段:语法分析->编译->运行 静态html文件执行顺序:运行 动态程序: 连接数据库服务器或者缓存服务器->获取数据->填充到模板->呈现给用户 关于优化 ...

  8. Thymeleaf实现页面静态化

    如果用户所有的请求,都需要Thyleaf渲染后直接返回给用户,后台就存在大量的查询操作,数据库的压力就会骤然上升,请求的时间就会延长,带来极不好用户体验,现在市面上流行的就是页面的静态化处理,下面就来 ...

  9. SpringBoot2 整合FreeMarker模板,完成页面静态化处理

    本文源码:GitHub·点这里 || GitEE·点这里 一.页面静态化 1.动静态页面 静态页面 即静态网页,指已经装载好内容HTML页面,无需经过请求服务器数据和编译过程,直接加载到客户浏览器上显 ...

随机推荐

  1. Spring Boot集成JSON Web Token(JWT)

    一:认证 在了解JWT之前先来回顾一下传统session认证和基于token认证. 1.1 传统session认证 http协议是一种无状态协议,即浏览器发送请求到服务器,服务器是不知道这个请求是哪个 ...

  2. Elasticsearch 知识点整理 一

    极力推荐: 官网地址: https://www.elastic.co/guide/en/elasticsearch/reference/6.0 肺腑之言,学ES先学原生的语法,SpringData封装 ...

  3. http和Https简介、详解

    目录 引用 一.HTTP和HTTPS的基本概念 二.HTTP与HTTPS有什么区别? 三.HTTPS的工作原理 四.HTTPS的优点 五.HTTPS的缺点 六.http切换到HTTPS 引用 超文本传 ...

  4. phpStorm //todo 的用途

    用phpstorm看到别人的代码使用了注释//todo,且todo是彩色的 我想这个应该是有点用的吧,于是百度了下,大概是可能由于某些原因,导致部分代码没有写.但又怕忘了, 用//todo就可以做提示 ...

  5. 使用asp.net core 3.0 搭建智能小车1

    跟随.net core 3.0 一起发布的System.Device.Gpio 1.0已经可以让我们用熟悉的C#原汁原味的开发莓派上面的GPIO了.并且在 Iot.Device.Bindings这个包 ...

  6. Splash API 调用

    render.html render.html 接口用于获取 JavaScript 渲染的页面的 HTML 代码,接口地址就是 Splash 的运行地址加此接口名称,例如http://localhos ...

  7. 前端技术之:通过plop生成Controller的方法与步骤

    # Controller的生成 开发者可以通过plop命令生成各种类型的控制器类(Normal.Restful.View), 以下是示例生成步骤. 1. 执行以下命令: plop controller ...

  8. 自闭版节奏大C

    1,2,3,4打碟 #include <bits/stdc++.h> #include <conio.h> #include <windows.h> using n ...

  9. 『题解』LibreOJ6277 数列分块入门 1

    更好的阅读体验 Portal Portal1: LibreOJ Description 给出一个长为\(n\)的数列,以及\(n\)个操作,操作涉及区间加法,单点查值. Input 第一行输入一个数字 ...

  10. 简单搭建syslog-ng server记录log

    ### 简单搭建syslog-ng server记录log 安装syslog-ng apt-get install syslog-ng 安装syslog-ng 配置syslog-ng vim /etc ...