Quasar SSR: добавление HTML содержимого в индекс. html с использованием загрузочного файла - PullRequest
Новая
       4

Quasar SSR: добавление HTML содержимого в индекс. html с использованием загрузочного файла

2 голосов
/ 16 января 2020

У меня есть приложение Quasar SSR, которое мне нужно для динамического внедрения содержимого HTML в элемент <div id="q-app"> (ie. Пользовательский заголовок и содержимое нижнего колонтитула) при отображении страницы на сервере. Содержимое HTML, о котором идет речь, будет извлечено из других файлов фрагментов, хранящихся на сервере.

Я попытался добавить содержимое к ssrContext из загрузочного файла, а затем вставить его в index.template. html с использованием тегов {{ }}, но это приводит к выводу HTML:

В whitelabeltemplate. js (загрузочный файл): 

export default ({ app, ssrContext }) => {
    ssrContext.templateHeaderHTML = '<div>This is the header</div>'
}

В index.template . html: 

<body>
    <% if (htmlWebpackPlugin.options.ctx.mode.ssr) { %>{{ templateHeaderHTML }}<% } %>
    <!-- DO NOT touch the following DIV -->
    <div id="q-app"></div>
</body>

Результат: 

<body class="desktop no-touch body--light" >
    &lt;div&gt;This is the header&lt;/div&gt;
    <!-- DO NOT touch the following DIV -->
    <div id="q-app" ...
        ...
</body>

Существует ли альтернативный способ внедрения этого содержимого, чтобы избежать экранирования?

1 Ответ

0 голосов
/ 06 февраля 2020

Да, атрибут v- html служит именно этой цели: 

<body>
    <div id="q-app">
        <% if (htmlWebpackPlugin.options.ctx.mode.ssr) { %>
            <div v-html="templateHeaderHTML"></div>
        <% } %>
        <!-- DO NOT touch the following DIV -->
        <div id="content"></div>
    </div>
</body>

Вам нужен тег, чтобы можно было использовать v- html, поэтому я предлагаю удалить div-обертка от фактического содержимого для вставки.

EDIT

Так как нам не разрешено работать внутри div q-app, давайте восстановим начальный HTML, с поворотом: 

<body onload="unescapeHTML();">
    <script type="text/javascript">
    function htmlDecode(input){
        var e = document.createElement('textarea');
        e.innerHTML = input;
        // handle case of empty input
        return e.childNodes.length === 0 ? "" : e.childNodes[0].nodeValue;
    }

    function unescapeHTML() {
        //Let's select the divs where we want this unescape to occur
        //At this point there is a single element with this property, but
        //let's support plurality
        var divs = document.querySelectorAll("body > div:nth-child(1)");
        for (let div of divs) div.innerHTML = htmlDecode(div.innerHTML);
    }
    </script>
    <% if (htmlWebpackPlugin.options.ctx.mode.ssr) { %>{{ templateHeaderHTML }}<% } %>
    <!-- DO NOT touch the following DIV -->
    <div id="q-app"></div>
</body>

Вдохновленный отсюда: Unescape HTML сущностей в Javascript?

...