id="liveToastBtn" x3 - это уже неправильно. Замените id на класс, например, js-toast-trigger. Далее повесьте обработчик на каждый элемент в цикле (да и нечего при каждом клике создавать новый экземпляр всплывающего окна, поэтому вынесем его наружу):const toastTriggers = document.querySelectorAll('.js-toast-trigger');
const toastLiveExample = document.getElementById('liveToast');
const toast = new bootstrap.Toast(toastLiveExample);
if (toastTriggers.length) {
toastTriggers.forEach(function(trigger) {
trigger.addEventListener('click', function() {
toast.show();
});
});
}const options = {
root: null,
rootMargin: '0px',
threshold: 0.05
};
const lazyload = function(entries, observer) {
entries.forEach(function(entry) {
const target = entry.target;
const dataset = target.dataset;
if (entry.isIntersecting) {
try {
if ('src' in dataset) {
target.src = dataset.src;
}
if ('bg' in dataset) {
target.style.backgroundImage = `url(${dataset.bg})`;
}
target.classList.add('lazyloaded');
observer.unobserve(target);
} catch (error) {
console.error(error);
}
}
});
};
const observer = new IntersectionObserver(lazyload, options);
document.querySelectorAll('.js-lazyload').forEach(elem => observer.observe(elem));<!-- Изображение без плейсхолдера -->
<img class="js-lazyload" data-src="path/to/image/elephant.jpg" alt="The pink elephant">
<!-- Изображение с плейсхолдером -->
<img class="js-lazyload" data-src="path/to/image/elephant.jpg" src="path/to/placeholder.jpg" alt="The pink elephant">
<!-- Ситуация, когда изображение надо задать как фон -->
<div class="js-lazyload" data-bg="path/to/image/elephant.jpg"></div>Можно ли так как-нибудь сделать силами SCSS
nth($list, $n). Например:@mixin font($font-size, $font-weight, $anotherValue: null) {
$length: length($font-size);
@if $length > 2 {
@warn "Too many values: #{$font-size}."
}
@if $length == 1 {
font-size: $font-size;
}
@if $length == 2 {
$size1: nth($font-size, 1);
$size2: nth($font-size, 2);
font-size: $size1;
@media (min-width: 768px) {
font-size: $size2;
}
}
font-weight: $font-weight;
}
// одно значение
.element1 {
@include font(24px, 700);
}
// два значения
.element2 {
@include font(24px 32px, 700);
// или если хочется разделить запятой:
@include font((24px, 32px), 700);
}import Nunjucks from './nunjucks'; // Импортируем Nunjucks из нашего файла конфигурации (см. ниже)
{
test: /\.njk$/,
use: {
loader: 'html-loader',
options: {
preprocessor: (content, loaderContext) => {
let result;
try {
loaderContext.addContextDependency(loaderContext.context);
loaderContext.addDependency(PATHS.njkConfig); // PATHS.njkConfig - путь к файлу конфигурации
result = Nunjucks.renderString(content); // или `Nunjucks.render(loaderContext.resourcePath)`
} catch (error) {
loaderContext.emitError(error);
return content;
}
return result;
},
minimize: false
}
}
}import Nunjucks from 'nunjucks';
// PATHS.pages - путь к папке с файлами Nunjucks
const env = Nunjucks.configure(PATHS.pages, {
noCache: true
});
// Тут можно задавать всякие фильтры и глобальные переменные, например:
// const isArray = value => Array.isArray(value);
// env.addFilter('isArray', isArray);
// env.addGlobal('projectName', 'mySuperProject');
export default Nunjucks;npm i -D globconst glob = require('glob');import Offcanvas from 'bootstrap/js/dist/offcanvas';
const offcanvasEl = document.getElementById('offcanvas');
const offcanvas = Offcanvas.getOrCreateInstance(offcanvasEl);
const links = offcanvasEl.querySelectorAll('.nav-link');
links.forEach(link => link.addEventListener('click', e => offcanvas.hide()));