Squarespace - Как отображать описание/пользовательский текст на миниатюре указателя на hover

Question

В принципе, я хочу, чтобы иметь возможность показывать заголовок и некоторый текст при наведении курсора на все мои миниатюры индекса, такие как этот сайт. http://www.timboelaars.nl/

Однако в текущем шаблоне квадратов, который я использую (я считаю, что это называется Йорк), разметка только захватывает заголовок страницы и, следовательно, отображает заголовок страницы при наведении. (См ниже блок кода, вы можете увидеть заголовок страницы там, что это единственное, что шаблон отображается при наведении курсора мыши)

<div class="index-item-text-wrapper"> 
        <h2 class="index-item-title"> 
         <a class="index-item-title-link" href="/google-shopping/" data-ajax-loader="ajax-loader-binded"><span class="index-item-title-text">**PAGE TITLE**</span></a> 
        </h2> 
       </div> 

Там нет поля для меня, чтобы поместить любой HTML, так что я ищу помощь в использовании javascript, чтобы вручную вводить пользовательскую разметку HTML для каждого миниатюры, а затем показывать их при наведении.

TL; DR Я хочу иметь возможность отображать на моих миниатюрах больше, чем просто заголовок (в идеале - мою собственную разметку HTML, чтобы я мог настроить стиль), но это не поддерживается шаблоном.

Вот мой сайт http://shensamuel.com/

Я очень слаб в Javascript, и я искал решение для этой проблемы довольно долго. Любая помощь будет высоко ценится!

Спасибо!

Answer 1

Следующий Javascript может быть использован для вставки текста для каждой плитки на странице. Код будет вставлен с использованием footer code injection area (если вы не используете режим разработчика, в этом случае вы должны вставить его вместе с остальными вашими сценариями).

<script> 
(function() { 
    var tiles = document.getElementsByClassName('index-section'); 
    var thisTile; 
    var titleText; 
    var description; 
    var parent; 
    var i, I; 

    for (i=0, I=tiles.length; i<I; i++) { 
     thisTile = tiles[i]; 
     titleText = thisTile.getElementsByClassName('index-item-title-text')[0]; 
     parent = thisTile.getElementsByClassName('index-item-text-wrapper')[0]; 
     description = document.createElement('span'); 
     description.className = 'index-item-description-text'; 
     switch(titleText.innerHTML.toLowerCase()) { 
      case "google shopping": 
       description.innerHTML = "Some custom text."; 
       break; 
      case "hana": 
       description.innerHTML = "More text that's custom."; 
       break; 
      case "wali": 
       description.innerHTML = "Custom text here."; 
       break; 
      case "cypress": 
       description.innerHTML = "Type anything you want."; 
       break; 
      case "ryde": 
       description.innerHTML = "Just another bit of text."; 
       break; 
      default: 
       description.innerHTML = ""; 
     } 
     parent.appendChild(description); 
    } 
})(); 
</script> 

Обратите внимание на шаблон в коде, чтобы добавить новые плитки или изменить существующие. Вы увидите, что скрипт пытается сопоставить (в нижнем регистре) текст «title», а затем вставляет текст на основе каждого заголовка. Это позволяет вам добавить больше в будущем, повторяя этот шаблон «case». Конечно, если вы когда-либо измените название плитки, вам придется соответствующим образом изменить этот код Javascript.

Затем вы можете вписать описание, вставив CSS через Squarespace CSS Editor (или через файл base.less, если используете режим разработчика). Например:

.index-item-description-text { 
    display: block; 
    font-size: 1.2em; 
    color: #FFFFFF 
} 

Обратите внимание, что в то время как существует альтернативный метод, который будет использовать соответствующий URL-адрес каждой плитки, чтобы сделать запрос AJAX и получить мета-данные о каждом проекте (и, следовательно, позволяет использовать контент-менеджер Squarespace для вставки это «описание»), этот метод кажется излишне сложным для вашего случая.

---

Обновление 8/17/2016: Что касается AJAX и как отключить AJAX загрузчик в Squarespace: Джейсон Бароне предложил добавить этот фрагмент кода в код инъекций> Footer, чтобы отключить «AJAX» pageloader. Он отметил, что он отключит плавные переходы AJAX между страницами, но позволит обычным Javascript, как обычно.

<script> 
    //Credit: Jason Barone, http://jasonbarone.com/ 
    window.Template.Constants.AJAXLOADER = false; 
</script> 

Кроме того, некоторые шаблоны имеют возможность отключить AJAX в редакторе стилей (Изображение кредита: SSSUPERS):

Обновление 9/28/2016: Это было сообщил, что приведенный выше код больше не отключает AJAX. Однако некоторые новые шаблоны добавили параметр «Включить загрузку AJAX», который можно отключить.