适用本款的条件标签由 Tex4ht 生成

Question

作为一般规则，您需要在打开块元素（例如<figure>或）之前关闭当前段落<div>。如果块元素本身可以包含多个段落，这一点尤其重要。如果它包含段落，您还需要在结束标记之前关闭它们。

我将按以下方式编辑您的配置文件：

\Preamble{3,charset=utf-8,html5,refcaption,sec-filename,sections+,svg,xhtml}

\DeclareGraphicsExtensions{.svg,.png,.jpg}

\def\myendpar{\ifvmode\IgnorePar\fi\EndP}
\Configure{maketitle}
    {\myendpar\HCode{<section class="page-title"><div class="container-fluid text-center py-3">}\NoFonts}
    {\EndNoFonts\HCode{</div></section>}}
    {\HCode{<h1 class="title text-center">}}
    {\HCode{</h1>}
}

\Configure{@HEAD}
    {\HCode{
        <link rel="stylesheet" type="text/css" href="assets/css/bootstrap.min.css"/>\Hnewline
        <link rel="stylesheet" type="text/css" href="assets/css/custom.css"/>\Hnewline
    }}

\Configure{@BODY}
    {\myendpar\HCode{% container
        <article class="page-content">
            <div class="container-fluid py-3">\Hnewline
                <div class="row">\Hnewline
                    <div class="col-md-2"></div>\Hnewline
                    <div class="col-md-8">\Hnewline
    }}

\Configure{@/BODY}
    {\myendpar\HCode{
                    </div>\Hnewline
                    <div class="col-md-2"></div>\Hnewline
                </div>\Hnewline
            </div>\Hnewline
        </article>
    }}

\Configure{@/BODY}
    {\myendpar\HCode{
        <footer class="page-footer">
            <div class="container-fluid text-center py-3">
                Copyright &copy; 2019 &hyphen; Cinematic Color Authors &hyphen;
                <a href="mailto:[email protected]">
                    [email protected]</a
                >
            </div>
        </footer>
    }}

\Configure{@/BODY}
    {\HCode{
        <script src="assets/js/jquery.min.js"></script>\Hnewline
        <script src="assets/js/popper.min.js"></script>\Hnewline
        <script src="assets/js/bootstrap.min.js"></script>\Hnewline
    }}

\ConfigureEnv{figure}
    {\myendpar\HCode{<figure class="figure border d-block my-3 p-3"\Hnewline>}\bgroup\Configure{float}{\ShowPar}{}{}}
    {\myendpar\egroup\HCode{</figure>}\ShowPar\par}
    {}
    {}

\Configure{IMG}
    {\HCode{<img class="figure-img img-fluid" src="}}
    {\HCode{" alt="}}
    {}
    {\HCode{"}}
    {\HCode{/>}}

\Configure{caption}
    {\myendpar\HCode{<figcaption class="figure-caption"><span class="caption-name">}}
    {:\HCode{</span> }}
    {}
    {\HCode{</figcaption>}}

\makeatletter
\Configure{graphics*}
    {svg}{
    {\Configure{Needs}{File: \[email protected]}\Needs{}}
    \Picture[\csname a:GraphicsAlt\endcsname]{{\[email protected]} \csname a:Gin-dim\endcsname}
}
\makeatother

\ConfigureEnv{lstlisting}
    {\myendpar\HCode{<div class="listing border d-block my-3 p-3">}}
    {\HCode{</div>}}
    {}
    {}

\begin{document}


\EndPreamble

你可以看到我定义了\myendpar宏，只是为了让事情变得简单一点。没有必要在每个段落中都使用它\Configure{@/BODY}，因为第一个段落已经关闭了。

这是我创建的示例文件的结果：

<!DOCTYPE html> 
<html lang="en-US" xml:lang="en-US" > 
<head>
   <title></title> 
<meta  charset="utf-8" /> 
<meta name="generator" content="TeX4ht (http://www.tug.org/tex4ht/)" /> 
<meta name="viewport" content="width=device-width,initial-scale=1" /> 
<link rel="stylesheet" type="text/css" href="sample.css" /> 
<meta name="src" content="sample.tex" /> 
 <link rel="stylesheet" type="text/css" href="assets/css/bootstrap.min.css"/> 
<link rel="stylesheet" type="text/css" href="assets/css/custom.css"/> 
</head><body 
>
   <article class="page-content"> <div class="container-fluid py-3"> 
<div class="row"> 
<div class="col-md-2"></div> 
<div class="col-md-8"> 
    <section class="page-title"><div class="container-fluid text-center py-3">


<h1 class="title text-center">Hello world</h1>
<div class="author" >Michal</div><br />
<div class="date" >January 20, 2019</div>

   </div></section>
<!--l. 9--><p class="indent" >   Some text
</p>
   <figure class="figure border d-block my-3 p-3" 
>


<!--l. 13--><p class="noindent" >text
</p><!--l. 15--><p class="noindent" >  <img class="figure-img img-fluid" src="beacon.svg" alt="PIC" 
/>
</p>
<figcaption class="figure-caption"><span class="caption-name"><a 
 id="x1-21">Figure 1</a>:</span> caption text</figcaption>
another text

   </figure>
<!--l. 20--><p class="indent" >   no par
</p><!--l. 22--><p class="indent" >   more text
</p>
    </div> 
<div class="col-md-2"></div> 
</div> 
</div> 
</article>  <footer class="page-footer"> <div class="container-fluid text-center py-3"> Copyright &copy; 2019 &hyphen; Cinematic Color Authors &hyphen; <a href="mailto:[email protected]"> [email protected]</a > </div> </footer>  <script src="assets/js/jquery.min.js"></script> 
<script src="assets/js/popper.min.js"></script> 
<script src="assets/js/bootstrap.min.js"></script> 

</body> 
</html>

TeX 来源：

\documentclass{article}

\usepackage{graphicx}
\title{Hello world}
\author{Michal}
\begin{document}
\maketitle

Some text

\begin{figure}

  text

  \includegraphics{beacon.svg}
  \caption{caption text}

  another text
\end{figure}
no par

more text

\end{document}

Answer 1