[移动开发] 【JavaScript】Hexo配置theme.dream.text文本EJS换行无效问题解决

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> 移动开发 -> 【JavaScript】Hexo配置theme.dream.text文本EJS换行无效问题解决 -> 正文阅读

[移动开发]【JavaScript】Hexo配置theme.dream.text文本EJS换行无效问题解决

在使用Hexo搭建GitHubPages时，我的模板是这样的：

在这里插入图片描述

笔者想要换成自己喜欢的内容，所以选择了TWICE的《Fancy》中的一段歌词：

?? ? I fancy you ??? ??? ??
Hey I love you
Love ya
?? ? I fancy you ??? ???? ?
Cause I need you
What
Fancy you ?? ?? ???? ??
Fancy you ?? ???? ??
Fancy

考虑到HTML的换行不是\n而是<br/>，所以在对应的_config.yml中如此填写：

fancy:
  enable: true
  showTitle: true
  title: Fancy @TWICE
  text: ?? ? I fancy you ??? ??? ??<br>Hey I love you<br>Love ya<br>?? ? I fancy you ??? ???? ?<br>Cause I need you<br>What<br>Fancy you ?? ?? ???? ??<br>Fancy you ?? ???? ??<br>Fancy

显示出的结果却是：

在这里插入图片描述

显然，问题出在了可能含HTML标签的文本被直接解析成了纯文本。

查看对应的EJS，使用的是<div>和<%= %>：

<div class="dream">
    <% if (theme.fancy.showTitle) { %>
    <div class="title center-align">
        <i class="far fa-lightbulb"></i>&nbsp;&nbsp;<%= theme.fancy.title %>
    </div>
    <% } %>
    <div class="row">
        <div class="col l8 offset-l2 m10 offset-m1 s10 offset-s1 center-align text">
            <%= theme.fancy.text %>
        </div>
    </div>
</div>

查看EJS官方文档：

在这里插入图片描述

将<%= %>改成<%- %>：

<div class="dream">
    <% if (theme.fancy.showTitle) { %>
    <div class="title center-align">
        <i class="far fa-lightbulb"></i>&nbsp;&nbsp;<%= theme.fancy.title %>
    </div>
    <% } %>
    <div class="row">
        <div class="col l8 offset-l2 m10 offset-m1 s10 offset-s1 center-align text">
            <%- theme.fancy.text %>
        </div>
    </div>
</div>