【网站项目经验汇总】2022.3.25 模板页面无法找到等问题

最新推荐文章于 2024-05-17 03:46:58 发布

明目先生

最新推荐文章于 2024-05-17 03:46:58 发布

阅读量306

点赞数

分类专栏：我的项目文章标签：面试 java 算法

本文链接：https://blog.csdn.net/qq_43398404/article/details/123735840

版权

我的项目专栏收录该内容

1 篇文章 0 订阅

订阅专栏

开发网站项目经验汇总

解决问题：error resolving template [/post-no-sidebar], template might not exist or might not be accessible by any of the configured template resolvers

视图解析器无法找到对应的模板页面渲染

thymeleaf:
  prefix: classpath:/templates/  #prefix：指定模板所在的目录
  check-template-location: true  #check-tempate-location: 检查模板路径是否存在
  cache: false  #cache: 是否缓存，开发模式下设置为false，避免改了模板还要重启服务器，线上设置为true，可以提高性能。
  suffix:  .html
  #encoding: UTF-8
  #content-type: text/html
  mode: HTML5

一定要记住路径拼接是否正确，尤其是对于斜杠的处理，比如前缀设置为

 prefix: classpath:/templates/  #prefix：指定模板所在的目录

那么controller返回视图前面就不要带 / 斜杠。

实现顶部导航透明（bootstrap）

style的代码

<nav class="navbar navbar-expand-lg" style="top: 0;position: absolute 可以选择固定fixed;right: 0;left: 0;z-index: 1030 ;
    display: -ms-flexbox;
    color: white;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding: .5rem 1rem;
         background-color: transparent;设置透明
         padding: 15px 15px;
         -webkit-box-shadow: 0 2px 5px 0 rgb(0 0 0 / 16%), 0 2px 10px 0 rgb(0 0 0 /12%);控制悬浮边灰度
         -webkit-transition: all 0.5s ease-in-out;
         transition: all 0.5s ease-in-out;">

实现字体敲打动画（有遗留问题）

官方typejs案例

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
    <meta charset="utf-8">
    <title></title>
    <script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.9"></script>
</head>
<body>
<div><div class="element"></div></div>


<script type="text/javascript">
    window.onload = function () {
        var typed = new Typed(".element", {
            /**
             * @property {array} strings 要键入的字符串
             * @property {string} stringsElement 包含字符串子元素的元素的ID
             */
            strings: ['These are the default values...', 'You know what you should do?', 'Use your own!', 'Have a great day!'],
            stringsElement: null,

            /**
             * @property {number} typeSpeed 输入速度，以毫秒为单位
             */
            typeSpeed: 100,

            /**
             * @property {number} startDelay 键入之前的时间以毫秒开始
             */
            startDelay: 0,

            /**
             * @property {number} backSpeed 退格速度，以毫秒为单位
             */
            backSpeed: 100,

            /**
             * @property {boolean} smartBackspace 是否只退格与前一个字符串不匹配的内容
             */
            smartBackspace: true,

            /**
             * @property {boolean} shuffle 是否洗牌
             */
            shuffle: false,

            /**
             * @property {number} backDelay 退回之前的时间，以毫秒为单位
             */
            backDelay: 700,

            /**
             * @property {boolean} fadeOut 是否用淡出替代空格
             * @property {string} fadeOutClass 用于淡入淡出动画的css类
             * @property {boolean} fadeOutDelay 以毫秒为单位淡出延迟
             */
            fadeOut: false,
            fadeOutClass: 'typed-fade-out',
            fadeOutDelay: 500,

            /**
             * @property {boolean} loop 是否循环字符串
             * @property {number} loopCount 循环次数
             */
            loop: false,
            loopCount: Infinity,

            /**
             * @property {boolean} showCursor 是否显示光标
             * @property {string} cursorChar 光标的字符
             * @property {boolean} autoInsertCss 是否将光标和fadeOut的CSS插入HTML <head>
             */
            showCursor: true,
            cursorChar: '|',
            autoInsertCss: true,

            /**
             * @property {string} attr 输入属性
             * 例如：输入占位符，值或仅HTML文本
             */
            attr: null,

            /**
             * @property {boolean} bindInputFocusEvents 如果el是文本输入，则绑定到焦点和模糊
             */
            bindInputFocusEvents: false,

            /**
             * @property {string} contentType 明文的'html'或'null'
             */
            contentType: 'html',

            /**
             * 所有打字都已完成调用的回调函数
             * @param {Typed} self
             */
            onComplete: (self) => {
                console.log('所有打字都已完成调用的回调函数', self);
            },

            /**
             * 在键入每个字符串之前调用的回调函数
             * @param {number} arrayPos
             * @param {Typed} self
             */
            preStringTyped: (arrayPos, self) => {
                console.log('在键入每个字符串之前调用的回调函数', arrayPos, self);
            },

            /**
             * 输入每个字符串后调用的回调函数
             * @param {number} arrayPos
             * @param {Typed} self
             */
            onStringTyped: (arrayPos, self) => {
                console.log('输入每个字符串后调用的回调函数', arrayPos, self);
            },

            /**
             * 在循环期间，在键入最后一个字符串之后调用的回调函数
             * @param {Typed} self
             */
            onLastStringBackspaced: (self) => {
                console.log('在循环期间，在键入最后一个字符串之后调用的回调函数', self);
            },

            /**
             * 打字已经停止调用的回调函数
             * @param {number} arrayPos
             * @param {Typed} self
             */
            onTypingPaused: (arrayPos, self) => {
                console.log('打字已经停止调用的回调函数', arrayPos, self);
            },

            /**
             * 停止后开始键入调用的回调函数
             * @param {number} arrayPos
             * @param {Typed} self
             */
            onTypingResumed: (arrayPos, self) => {
                console.log('停止后开始键入调用的回调函数', arrayPos, self);
            },

            /**
             * 重置后调用的回调函数
             * @param {Typed} self
             */
            onReset: (self) => {
                console.log('重置后调用的回调函数', self);
            },

            /**
             * 停止后调用的回调函数
             * @param {number} arrayPos
             * @param {Typed} self
             */
            onStop: (arrayPos, self) => {
                console.log('停止后调用的回调函数', arrayPos, self);
            },

            /**
             * 开始后调用的回调函数
             * @param {number} arrayPos
             * @param {Typed} self
             */
            onStart: (arrayPos, self) => {
                console.log('开始后调用的回调函数', arrayPos, self);
            },

            /**
             * 销毁后调用的回调函数
             * @param {Typed} self
             */
            onDestroy: (self) => {
                console.log('销毁后调用的回调函数', self);
            }
        });
    }
</script>
</body>
</html>

我的使用：不知道问什么失效了

<div class="container text-center text-white fadeInUp">
                                    <span class="h2" id="subtitle">Write code , Write life&nbsp;</span>
                                    <span class="typed-cursor h2 typed-cursor--blink">_</span>


                                </div>

js代码

<script>

    var typed = new Typed('#subtitle', {
        strings: [

            "Write the Code. Change the World.&nbsp;",
        ],
        cursorChar: "_",
        typeSpeed: 70,
        loop: false,
    });
    typed.start();

</script>

另外注意这些都声明在body当中

明目先生

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【网站项目经验汇总】2022.3.25 模板页面无法找到等问题

开发网站项目经验汇总解决问题：error resolving template [/post-no-sidebar], template might not exist or might not be accessible by any of the configured template resolvers视图解析器无法找到对应的模板页面渲染thymeleaf: prefix: classpath:/templates/ #prefix：指定模板所在的目录 check-template-l
复制链接

扫一扫