想用到但不熟悉的前端技术有以下几个，同时记录一下学习后的理解。

一、响应式布局

1.1 学习资料

布局实战——如何实现一套网页同时适配PC端和移动端布局？

1.2 核心点

主要是不同尺寸下，元素尺寸变化、布局变化、元素隐藏与否。
尽量使用 flex 布局，相对 html 尺寸 rem 单位。

二、pjax 刷新

2.1 学习资料

MoOx/pjax：在任何网站上轻松启用快速 Ajax 导航（使用 pushState + xhr） (github.com)

2.2 原理

基于 pushState 和 ajax，通过拦截 a 标签的网页跳转事件，并使用 ajax 的形式发起请求，然后将请求完成后网页中的对应选择器部分的元素，同时修改 url，来实现类似 SPA 单页面应用的效果。

2.3 优点

  1. 既实现了单页面应用的体验，又不影响 SEO。

    作为博客而言，它首先是所有者自我的记录，同时它也是包含所有者对知识、生活的分享欲的，求内修外，所以 SEO 是博客所有者需要考虑的一个重要因素。而现在的像 vue 之类框架所实现的单页面应用，它是不利于 SEO 的。

  2. 减少数据量的传输，增加访问体验。

    如果简单的使用 Pjax 来请求完整网页并更新到对应选择器上，其实这个过程所传输的请求数据量和非 Pjax 请求的数据量一样。但是，如果我们在后端对网页的请求方式进行判断，进而返回对应的部分数据，则可以大大节省传输数据量。例如，我们假设有一个博客，它是经典的左右侧边栏、中间正文栏这样的经典三栏设计，当后端判断是使用 html 的形式请求文章页面的时候，它应该返回的是一个包含三栏完整布局的网页；当后端判断是 Pjax 请求的方式请求文章页面的时候，我们只需要返回中间的正文部分内容即可，然后 Pjax 通过选择器的方式更新这单个部分的内容即可。既不影响 Pjax 更新，也缩减了数据传输量。
    在Dream 主题中，就通过在 layout 嵌套的布局中判断请求参数 _pjax 的有无，来判断返回整个布局还是单个正文内容。

    <th:block th:if="${!#strings.equals('',param._pjax)}">  
    <div class="column-main">
      <th:block th:replace="${content}"/>
    </div>
</th:block>
<th:block th:unless="${!#strings.equals('',param._pjax)}"
            th:with="stats = ${siteStatsFinder.getStats()}">
  <th:block th:replace="~{common/head :: head}"/>
  <body>
    <th:block th:replace="~{common/navbar}"/>
    <th:block th:replace="~{common/banner :: banner}"/>
    <th:block th:replace="${content}"/>
  </body>
</th:block>

  3. 更新部分元素的绑定事件失效。
    Pjax 原理是通过删除 DOM 中的特定元素，再添加 Ajax 请求渲染后的相应元素添加进去的形式实现的。这种方式会使原来的元素及其绑定的事件丢失，为了解决这个问题，常用的方案有 事件委托 和 在 Pjax 回调中再次绑定事件 [^1]

    拓展一下事件委托和直接绑定的应用场景：
    事件委托：频繁增删的动态内容（避免重新绑定事件）、多个相似元素、性能优化。
    直接绑定：静态内容、特定事件、简化逻辑。

三、前端自动构建打包工具

3.1 gulp

基于流式的前端自动构建打包工具

gulp 中文文档

3.2 webpack

配置处理文件入口 index.js 、出口，中间再通过 loader 进行处理，例如对依赖引用的处理。另外，还提供一些插件，用于满足更多样的自定义需求。例如常见的 webpackHtml 插件，用来处理 html 中的资源引用，引用内存中的数据，同时还提供自动重载刷新的功能。

3.3 vite

功能和 webpack 类似，不过它是自带了 web 服务的。我们只需要一个入口文件，假如是 main.js ，然后将需要使用的 less 资源引入到 js 中岂可，vite 会自动帮我们编译合并生成一个 style.css 的文件。

四、Thymeleaf 模板语法

五、tailwindcss

一个用类名来写 css 样式的工具，好处是不用额外取类名以供样式选择器使用，坏处是对于重复样式的代码会冗余，同时后期维护调试的时候不好定位类名。

六、对博客项目的理解

独立页面的选择模板 vs 瞬间这类插件提供的页面

两者本质上没有差别，都是给用户定制更灵活的网页，但主要区别是：

  • 前者是不涉及后端的，所引用的变量也只能是 singlePage 所导出的变量，当然也包括 finderAPI 所提供的接口，使用方式是在“页面”中创建路由并选择模板。可以粗浅的理解为，它是主题作者为引入的一些现成模板。例如，友链、关于、联系信息等。
  • 后者是设计后端，它是要在插件实现某个功能后导出一些专有变量，所以它能引用的变量除了 finderAPI 那些变量外，还会额外提供一些插件导出的变量。它的使用方式是只需要在“页面”中创建路由即可，默认是使用插件模板覆盖自定义模板的。

文章渲染的处理

post.html 中的文章数据通过 ${post.content.content} 变量引入，这个变量是在后端通过 默认富文本编辑器/ markdown 编译器等飞js渲染后的内容，是在后端已经完成的渲染。

<div class="main-content article"
     th:utext="${post.content.content}">
</div>

post.content.raw | 纯文本

=> 默认富文渲染器/Markdown渲染器 | html元素块

=> post.content.content | html元素块

=> highlightjs | 处理替换code块并添加样式

=> katex | 处理 katex 公式块

七、博客设计灵感记录

记录一些对博客设计的灵感和理解，随时补充

参考

自己想法

  1. 左侧栏和顶栏要么没有，要么固定，且需要与正文部分区分明显。左侧和上侧绝对是人阅读顺序中的两个关键位置，如果在阅读文章时，随着鼠标向下滑动，出现了左侧和顶部的显著变化，将会给人产生极大的不安全感。区分明显的考量主要是让阅读文章时自动忽略而不是杂糅进这些东西。

  2. 文章页面的三栏式，左侧是目录，中间是正文，右侧是脚注，用脚注的形式做批注。

  3. 设计成三栏式。
    左侧栏：顶部是水平分布的分类，下面部分为文章列表/正文目录切换。
    中间：正文
    右侧：脚注实现的注解。

    博客设计初稿.png

使用目的

根据我使用博客的目的，我会将它拆分成两部分，一部分自然是对知识、技术类文章的记录和输出，另一部分就是对生活的记录，记录生活成长路线。这其实就形成了两大分类，只要将文章对应分类就能实现筛选展示。

  • 文章分类
    如果仅此而已，似乎过于简单，也不是我想象中的样子，我需要的不仅仅是分类，而是需要不同的前端展示状态，就如瞬间微语这类页面一样，需要独立的展示方式。
  • 知识技术文章
    它的目的是记录和分享自己在学习和工作中所遇到的知识性、技术性文章，一般是需要向外展示，和向以后得自己展示，逻辑要严密，风格较严肃，一般包含问题描述、原因、原理性扩展、解决方法、知识性的抽象性总结、自我方面的复盘，例如从发现问题到解决问题过程中自己思考的方式、暴露出的不足、低效率的原因等等。
  • 思考人生
    我是一个比较爱向内求自我，思考自己的一个人，有点像王阳明“向外修，向内求”中的后者，可能会因为在生活中发生了某事件、看了某本书、听到某个故事后，会发出自己的一些感慨，同时又会把它抽象上升到人生感悟，这类文章常常会让我很矛盾，既希望被倾听，又不希望过于暴露自己的想法，这种矛盾必然会使得文字表达过程中对自己真实想法美化，在求内上不是件好事。它与破事水、流水账的“瞬间”区别就是，前者常常会用来表达一个观点，而不是单摆出一个事实、一种情绪。
    对于这类文章，我会觉得比较深刻和沉重，所以我不打算和“知识技术类”文章混在一起，我会设计独立的 UI,就像我要切换自己的另一面去表达和面对。

瞬间

这个页面的话，就会用来记录某时某刻的心情、感受、想法、灵感，我其实一直在思考的一个问题是“如何保持一种感受”，一直没有找到答案，也许遗忘感受是人的某种生物性机制吧，但发动态这样一个做法会让我在时间的流逝中留下痕迹，或许在某个时刻又能透过文字重拾当时那种感受，让自己更有厚度一点。
可能我在设计的时候，不会用额外插件去实现，而是会使用一般的文章页面，这样根据通用性。

暂时写到这，我要吃饭了

(2024年10月8日19:30:46)

(2024年10月13日19:35:28)

灵感记录

文档：模板路由 | Halo 文档

我想设计成两个部分，一个工作，一个生活，双击翻转。

（2024年10月14日01:34:11）

2024年10月20日10:57:22

阅读文档

设计

  1. 自定义模板支持独立页面、分类归档、文章。
    在发布文章、文章分类、新建独立页面三个位置，是可以选择自定义模板的。例如，我们可以使用独立页面去设计一个路由 /xxx 对应一个自定义网页模板 xxx.html。同时，也可以对不同的分类页面和其下的文章使用不同的模板，例如我想设计的工作和生活两个模块，就可以设计成一个便于查看的效率页面和阅读起来更美观的生活页面。
    一般情况下，两者不能太割裂，不然整体设计感太差，但是也可以借助分类设置中的“在列表隐藏”选项，将二者彻底分割。
  2. 似乎所有页面都是采用的注入形式，也就是说自定义的页面只是自定义了页面的一部分，例如分类页面，它也只包含了 分类那一个区域，像菜单和边栏似乎不属于它的部分。

八、问题记录

pnpm 环境配置

定位了很久才找到这个问题，也不是没安装，而是不知道前面用了什么安装方式，导致安装的 pnpm 目录下没有 pnpm.cmd 文件，进而导致的一系列问题。
复盘的几个点：

  • 定位问题的耐心
    遇到问题的时候，要仔细查看日志，不能一味的自以为是，推倒重来，虽然后者确实容易解决问题，但似乎仍无法定位问题，了解问题原因、解决方法，以应对之后同样的问题。再一个就是生成环境不总都是允许如此推倒重来，效率也比较低下。
  • 每个经手操作不能一知半解
    自己输入的指令，做的操作，不要求完全记一下，但得知道是做什么的，有什么作用，有一个大概印象，遇到问题解决问题，不能搁置后移，尤其是当你遇到不是自己领域的知识，这种时序的扰乱会让你很难快速定位问题，解决问题，不能一味求快。
  • win 环境变量配置规范问题
    每次出现奇奇怪怪的环境变量问题，真的头痛，究其原因还是自己平时添加环境变量过于随意，有时候系统环境变量有一个 JAVA_HOME 目录，用户环境变量又有一个，如果再杂糅绝对路径进去，在多个 jdk 版本的切换中会更加杂乱。
    建议按规范、习惯去定义环境变量别名，例如 JAVA_HOME，再以相对路径配置 PATH，例如 %JAVA_HOME%/bin。
License

本文由 holwell 原创，采用 CC BY-NC-SA 4.0 许可协议，转载请注明出处。

Share