Blogger javascript 未加载 css 格式

Question

我有一个脚本可以创建我所有 post 的存档，在一些帮助下我们设法在更改域名并从 https 转到 https 后使其再次工作，您可以在这里阅读

现在的问题是没有加载文本格式，输出的文本看起来很难看。

尝试将 css 作为单独的脚本，但这没有任何区别（也没有意义）。

这是纸条所在的页面：https://www.tecnoriales.com/p/sitemap.html

脚本的样式部分可以在下面的末尾找到

<script>
  var LoadTheArchive = function(TotalFeed) {
    var PostTitles = new Array();
    var PostURLs = new Array();
    var PostYears = new Array();
    var PostMonths = new Array();
    var PostDays = new Array();
    if ("entry" in TotalFeed.feed) {
      var PostEntries = TotalFeed.feed.entry.length;
      for (var PostNum = 0; PostNum < PostEntries; PostNum++) {
        var ThisPost = TotalFeed.feed.entry[PostNum];
        PostTitles.push(ThisPost.title.$t);
        PostYears.push(ThisPost.published.$t.substring(0, 4));
        PostMonths.push(ThisPost.published.$t.substring(5, 7));
        PostDays.push(ThisPost.published.$t.substring(8, 10));
        var ThisPostURL;
        for (var LinkNum = 0; LinkNum < ThisPost.link.length; LinkNum++) {
          if (ThisPost.link[LinkNum].rel == "alternate") {
            ThisPostURL = ThisPost.link[LinkNum].href;
            break
          }
        }
        PostURLs.push(ThisPostURL);
      }
    }
    DisplaytheTOC(PostTitles, PostURLs, PostYears, PostMonths, PostDays);
  }

  var DisplaytheTOC = function(PostTitles, PostURLs, PostYears, PostMonths, PostDays) {
    var MonthNames = ["Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre"];
    var NumberOfEntries = PostTitles.length;

    var currentMonth = "";
    var currentYear = "";

    for (var EntryNum = 0; EntryNum < NumberOfEntries; EntryNum++) {
      NameOfMonth = MonthNames[parseInt(PostMonths[EntryNum], 10) - 1]

      if (currentMonth != NameOfMonth || currentYear != PostYears[EntryNum]) {
        currentMonth = NameOfMonth;
        currentYear = PostYears[EntryNum];

        document.write("<div class='dateStyle'><br />" + currentMonth + " " + currentYear + " </div>");
      }

      document.write('<a href ="' + PostURLs[EntryNum] + '"><div class=dayStyle>' + parseInt(PostDays[EntryNum], 10) + ":&nbsp;&nbsp;</div>" + PostTitles[EntryNum] + "</a><br />");
    }
  }
</script>

<script src="https://tecnoriales.com/feeds/posts/default?max-results=500&amp;alt=json-in-script&amp;callback=LoadTheArchive" />
<script src="https://tecnoriales.com/feeds/posts/default?max-results=150&start-index=151&alt=json-in-script&callback=LoadTheArchive" />
<script src="https://tecnoriales.com/feeds/posts/default?max-results=150&start-index=301&alt=json-in-script&callback=LoadTheArchive" />
<script src="https://tecnoriales.com/feeds/posts/default?max-results=150&start-index=451&alt=json-in-script&callback=LoadTheArchive" />
<script src="https://tecnoriales.com/feeds/posts/default?max-results=150&start-index=601&alt=json-in-script&callback=LoadTheArchive" />
<script src="https://tecnoriales.com/feeds/posts/default?max-results=150&start-index=851&alt=json-in-script&callback=LoadTheArchive" />
<script src="https://tecnoriales.com/feeds/posts/default?max-results=150&start-index=1001&alt=json-in-script&callback=LoadTheArchive" />

<!--CUSTOMIZATION-->
<style type="text/css">
  .dateStyle {
    color: #000;
    font-weight: bold;
    font-size: 15px;
    font-family: Trebuchet MS, sans-serif;
    margin: 0;
  }

  .dayStyle {
    color: #000;
    font-weight: bold;
    font-family: Trebuchet MS, sans-serif;
    display: inline-block;
  }
</style>

它应该加载带有 Trebuchet MS 字体的格式化文本，使用粗体表示月份和日期，并且每个项目只使用一行，而不是两行。

Answer 1

事实证明，这与我所怀疑的 CSS 声明或类似内容没有任何问题。问题出在您的提要脚本调用上。不要在每个末尾使用 />，而是使用 ></script>，如下面的代码示例所示。

因为这些被错误地调用，它也阻止了你的 CSS 正常工作，因为它是在脚本下面定义的。

<script>
  var LoadTheArchive = function(TotalFeed) {
    var PostTitles = new Array();
    var PostURLs = new Array();
    var PostYears = new Array();
    var PostMonths = new Array();
    var PostDays = new Array();
    if ("entry" in TotalFeed.feed) {
      var PostEntries = TotalFeed.feed.entry.length;
      for (var PostNum = 0; PostNum < PostEntries; PostNum++) {
        var ThisPost = TotalFeed.feed.entry[PostNum];
        PostTitles.push(ThisPost.title.$t);
        PostYears.push(ThisPost.published.$t.substring(0, 4));
        PostMonths.push(ThisPost.published.$t.substring(5, 7));
        PostDays.push(ThisPost.published.$t.substring(8, 10));
        var ThisPostURL;
        for (var LinkNum = 0; LinkNum < ThisPost.link.length; LinkNum++) {
          if (ThisPost.link[LinkNum].rel == "alternate") {
            ThisPostURL = ThisPost.link[LinkNum].href;
            break
          }
        }
        PostURLs.push(ThisPostURL);
      }
    }
    DisplaytheTOC(PostTitles, PostURLs, PostYears, PostMonths, PostDays);
  }

  var DisplaytheTOC = function(PostTitles, PostURLs, PostYears, PostMonths, PostDays) {
    var MonthNames = ["Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre"];
    var NumberOfEntries = PostTitles.length;

    var currentMonth = "";
    var currentYear = "";

    for (var EntryNum = 0; EntryNum < NumberOfEntries; EntryNum++) {
      NameOfMonth = MonthNames[parseInt(PostMonths[EntryNum], 10) - 1]

      if (currentMonth != NameOfMonth || currentYear != PostYears[EntryNum]) {
        currentMonth = NameOfMonth;
        currentYear = PostYears[EntryNum];

        document.write("<div class='dateStyle'><br />" + currentMonth + " " + currentYear + " </div>");
      }

      document.write('<a href ="' + PostURLs[EntryNum] + '"><div class=dayStyle>' + parseInt(PostDays[EntryNum], 10) + ":&nbsp;&nbsp;</div>" + PostTitles[EntryNum] + "</a><br />");
    }
  }
</script>

<script src="https://tecnoriales.com/feeds/posts/default?max-results=500&amp;alt=json-in-script&amp;callback=LoadTheArchive"></script>
<script src="https://tecnoriales.com/feeds/posts/default?max-results=150&start-index=151&alt=json-in-script&callback=LoadTheArchive"></script>
<script src="https://tecnoriales.com/feeds/posts/default?max-results=150&start-index=301&alt=json-in-script&callback=LoadTheArchive" ></script>
<script src="https://tecnoriales.com/feeds/posts/default?max-results=150&start-index=451&alt=json-in-script&callback=LoadTheArchive" ></script>
<script src="https://tecnoriales.com/feeds/posts/default?max-results=150&start-index=601&alt=json-in-script&callback=LoadTheArchive" ></script>
<script src="https://tecnoriales.com/feeds/posts/default?max-results=150&start-index=851&alt=json-in-script&callback=LoadTheArchive" ></script>
<script src="https://tecnoriales.com/feeds/posts/default?max-results=150&start-index=1001&alt=json-in-script&callback=LoadTheArchive" ></script>

<!--CUSTOMIZATION-->
<style type="text/css">
  .dateStyle {
    color: #000;
    font-weight: bold;
    font-size: 15px;
    font-family: Trebuchet MS, sans-serif;
    margin: 0;
  }

  .dayStyle {
    color: #000;
    font-weight: bold;
    font-family: Trebuchet MS, sans-serif;
    display: inline-block;
  }
</style>

Blogger javascript 未加载 css 格式

Blogger javascript not loading css format

javascript

css

format

blogger