Проблемы с amp-list и nav-elements - PullRequest
Новая
       9

Проблемы с amp-list и nav-elements

0 голосов
/ 19 мая 2018

Поскольку я делаю многостраничный веб-сайт, я поместил навигацию по боковой панели в json-файл.Это отлично работает.Вот код: 

<amp-sidebar id="header-sidebar" class="ampstart-sidebar px3" layout="nodisplay">
  <div class="flex justify-start items-center ampstart-sidebar-header">
    <div role="button" aria-label="close sidebar" on="tap:header-sidebar.toggle" tabindex="0" class="ampstart-navbar-trigger items-start">✕</div>
  </div>
  <nav class="ampstart-sidebar-nav ampstart-nav">
      <ul class="list-reset m0 p0 ampstart-label">
          <amp-list width="auto"
                    height="400"
                    src="json/sidenav.json">
              <template type="amp-mustache"
                        id="amp-template-sidebar">
                  <li class="ampstart-nav-item "><a class="ampstart-nav-link" href="{{url}}">{{title}}</a></li>
              </template>
          </amp-list>
      </ul>
  </nav>
</amp-sidebar>

Но мне нужно установить высоту.Это правильный путь?Или можно / нужно установить более динамическую высоту?Возможно, я добавлю новые ссылки на json, сделав начальную высоту слишком маленькой, и поэтому мне нужно снова настроить все страницы.

Второй вопрос Я хочу показать те же ссылки в моемнижний колонтитул также.Я не могу заставить их показать.Работают ручные ссылки: 

  <footer class="ampstart-footer flex flex-column items-center px3 ">
      <nav class="ampstart-footer-nav">
          <ul class="list-reset flex flex-wrap mb3">
              <li class="px1"><a class="text-decoration-none ampstart-label" href="#">About</a></li>
              <li class="px1"><a class="text-decoration-none ampstart-label" href="#">Contact</a></li>
              <li class="px1"><a class="text-decoration-none ampstart-label" href="#">Terms</a></li>
          </ul>
      </nav>

Но при использовании json ссылки появляются только тогда, когда я изменяю ширину amp-list с auto на число.И тогда ссылки будут ниже друг друга (по вертикали), а не по горизонтали. 

<footer class="ampstart-footer flex flex-column items-center px3">
    <nav class="ampstart-footer-nav">
        <ul class="list-reset flex flex-wrap mb3">
            <amp-list width="auto"
                      height="100"
                      layout="responsive"
                      src="json/sidenav.json">
                <template type="amp-mustache"
                          id="amp-template-footer">
                        <li class="px1"><a class="text-decoration-none ampstart-label" href="{{url}}">{{title}}</a></li>
                </template>
            </amp-list>
        </ul>
    </nav>
</footer>

Как это исправить?

1 Ответ

0 голосов
/ 21 мая 2018

Первый вопрос:

amp-list не может получить высоту элементов самостоятельно (т.е. высота: 100%), к сожалению.Вы можете установить начальную высоту, используя небольшой код, хотя.Я использовал PHP для вывода количества элементов в массиве JSON и умножил его на высоту каждого элемента.Мое решение этой проблемы было примерно таким: 

<amp-list width="auto" height="<?php echo file_get_contents('ABSOLUTE DIRECTORY PATH/count.txt')*70; ?>" [height]="inventory.listSrc.length*70" layout="fixed-height" src="json/all.json" [src]="inventory.listSrc">

Немного странно, но у меня уже было количество элементов в цикле for, который создал мой файл JSON, поэтому я просто вывел свой счетчик цикла (+1 для учета, начиная с 0) в текстовый файл и захватил содержимое этого.Затем я использовал [высоту], чтобы изменить высоту событий изменения, которые у меня происходили на странице - похоже, это может не подходить для вашей ситуации.

Второй вопрос:

При использовании макета = "отзывчивый" ширина и высота должны быть определены как абсолютные, чтобы он знал, какое соотношение сторон настроить при масштабировании страницы.Если вы хотите использовать width = "auto", вы можете использовать другой тип макета, поддерживаемый amp-list: см. Поддерживаемые макеты здесь .

Что касается макета ссылокЯ предполагаю, что это просто проблема CSS.Я предполагаю, что вы применяете float: left к элементам, но, не видя вашего CSS, я не могу помочь вам.Я знаю, что amp-list может связываться с внутренними элементами, поэтому вы можете начать с ссылки на родительский объект вне списка amp-list, а затем ссылаться на элемент оттуда (то есть; ul.list-reset li {float: left;}).

...