Блоггер JavaScript не загружает формат CSS - PullRequest
Новая
       24

Блоггер JavaScript не загружает формат CSS

0 голосов
/ 08 апреля 2019

У меня есть скрипт, который создает архив всех моих постов, с некоторой помощью нам удалось заставить его работать снова после смены доменного имени и перехода с https на https. Вы можете прочитать об этом здесь Блоггер javascript notработает http на 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, используя жирный шрифт для месяцев и дат, а также используя только одну строку на элемент, а не две.

1 Ответ

2 голосов
/ 08 апреля 2019

Оказывается, это не так уж и плохо с вашими 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>
...