文章/答案/技术大牛

发布

问在html中嵌入html？
EN

Stack Overflow用户

提问于 2022-05-17 02:14:49

回答 2查看 118关注 0票数 0

我正在用Google脚本为我在ES上运行的maker空间构建一个web应用程序，它正在慢慢地变得越来越长和更复杂。我没有多少HTML训练，但在OOP中，我可以通过创建函数和类来管理复杂性，而不仅仅是生成一个巨大的脚本。HTML中有类似的东西吗？我如何编写多个HTML文件，然后单独调用它们？

例如，我想添加这个粘纸条，但是当我将CSS和HTML堆到我的当前代码中时，它会增加很多行。是否有方法将此代码保存在单独的文件中，然后在主体中的a中调用它？我尝试将它保存为一个单独的HTML文件(称为stickyNote并使用<?!= include('stickyNote'); ?> )，但这是行不通的。

编辑:这是我的代码的简化版本。它有几个组件(我正在使用Google脚本)，但是它非常简单，我可以重新创建这个问题。实际程序还有另一个用于主HTML的CSS样式表和一个JavaScript文件，但该示例不需要：

主要代码(Code.gs)：

function doGet(e) {
  var htmlOutput = HtmlService.createTemplateFromFile('template');
  return htmlOutput.evaluate().setTitle('Sample');
}

function include(filename) {
  return HtmlService.createHtmlOutputFromFile(filename)
    .getContent();
}

主html脚本(称为“模板”)：

<!DOCTYPE html>
<html>

<head>
  <base target="_top">
</head>

<body>

  <div class="container" style="display: flex;">
    <div style="width:80%; background-color: green;">
      <p style="font-size: 36px;">all of the things</p>
    </div>

    <div style="flex-grow: 1; background-color: gray;">
      <?!= include('stickyNote'); ?>
    </div>

  </div>

</body>

</html>

stickyNote工作表的样式(称为StickyStyle)：

<style>
@import url('https://fonts.googleapis.com/css2?family=Kalam&display=swap');

/* Some positioning and ratios */
.sticky-container {
  max-width: 400px;
  position: relative;
}

.sticky-outer {
  display: flex;
  padding-top: 92.5925926%;
  position: relative;

  width: 100%;
}

.sticky {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

/* Shadow behind the sticky note */
.sticky:before {
  box-shadow: -2px 2px 15px 0 rgba(0, 0, 0, 0.5);
  background-color: rgba(0, 0, 0, 0.25);
  content: '';
  width: 90%;
  left: 5px;
  height: 75%;
  position: absolute;
  top: 30%;
}

/* The sticky note itself */
.sticky-content {
  background: linear-gradient(
    180deg,
    rgba(187, 235, 255, 1) 0%,
    rgba(187, 235, 255, 1) 12%,
    rgba(170, 220, 241, 1) 75%,
    rgba(195, 229, 244, 1) 100%
  );
  width: 100%;
  height: 100%;

  display: flex;
  justify-content: center;
  align-items: center;
  font-family: 'Kalam', cursive;
  font-size: 1.25rem;

  clip-path: url(#stickyClip);
}


/* Position the sticky nicely, so it looks better */
.sticky-note {
  height: 100%;
  margin: 0;
  font-size: 16px;
}

.container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.container-inner {
  width: 50%;
  margin: 25px;
}

/* Add responsiveness */
@media screen and (min-width: 640px) {
  .sticky-content {
    font-size: 1.5rem;
  }
  .container-inner {
    width: 50%;
  }
}

@media screen and (min-width: 768px) {
  .sticky-content {
    font-size: 1.5rem;
  }
  .container-inner {
    width: 50%;
  }
}

@media screen and (min-width: 1024px) {
  .sticky-content {
    font-size: 1.875rem;
  }
  .container-inner {
    width: 25%;
  }
}
</style>

以及HTML：

<html>

<head>
  <base target="_top">
  <?!= include('StickyStyle'); ?>
</head>

<body>
  <div class="container">
    <div class="container-inner">
      <div class="sticky-container">
        <div class="sticky-outer">
          <div class="sticky">
            <svg width="0" height="0">
              <defs>
                <clipPath id="stickyClip" clipPathUnits="objectBoundingBox">
                  <path d="M 0 0 Q 0 0.69, 0.03 0.96 0.03 0.96, 1 0.96 Q 0.96 0.69, 0.96 0 0.96 0, 0 0"
                    stroke-linejoin="round" stroke-linecap="square" />
                </clipPath>
              </defs>
            </svg>
            <div class="sticky-content">
              Hello! I'm a<br>
            sticky note!
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

我看到的是：

有什么建议吗？

google-apps-script

web-applications

回答 2

Stack Overflow用户

发布于 2022-05-17 04:44:11

更新include()方法以评估HTML。

function include(filename) {
  return HtmlService.createTemplateFromFile(filename).evaluate().getContent();
}

在doGet()中发生的计算不能正确地计算嵌套的HtmlOutput，因为它已经包含在HtmlOutput中(也就是说，“将不会”计算，而是以字符串的形式出现)。因此，在构建最终的模板文件时，需要单独评估嵌套元素。

票数 1

Stack Overflow用户

发布于 2022-05-17 04:51:35

建议

我已经复制了您的设置，并做了一些尝试和错误测试。似乎StickyStyle (css/样式表文件)只会在主html文件StickyStyle中生效。

我的工作是在template.html中添加了scriptlet 。

<!DOCTYPE html>
<html>

<head>
  <base target="_top">
  <?!= include('StickyStyle'); ?>
</head>

<body>

  <div class="container" style="display: flex;">
    <div style="width:80%; background-color: green;">
      <p style="font-size: 36px;">all of the things</p>
    </div>

    <div style="flex-grow: 1; background-color: gray;">
      <?!= include('stickyNote'); ?>
    </div>

  </div>

</body>

</html>

并删除了stickyNote.html中的脚本

<html>

<head>
</head>

<body>
  <div class="container">
    <div class="container-inner">
      <div class="sticky-container">
        <div class="sticky-outer">
          <div class="sticky">
            <svg width="0" height="0">
              <defs>
                <clipPath id="stickyClip" clipPathUnits="objectBoundingBox">
                  <path d="M 0 0 Q 0 0.69, 0.03 0.96 0.03 0.96, 1 0.96 Q 0.96 0.69, 0.96 0 0.96 0, 0 0"
                    stroke-linejoin="round" stroke-linecap="square" />
                </clipPath>
              </defs>
            </svg>
            <div class="sticky-content">
              Hello! I'm a<br>
            sticky note!
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

样本结果

资源：

我遵循了与关于将HTML、CSS和JavaScript分开的Apps脚本示例相同的结构

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/72267471

复制

相似问题

问在html中嵌入html？
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在html中嵌入html？EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在html中嵌入html？
EN