Использование css для дублирования элементов html

Я передавал дизайн веб-страницы, которую я пытаюсь реализовать правильно. Этот дизайн содержит элементы навигации, которые частично или полностью дублируются по всей странице - в частности, ссылки на основные 3 категории для навигации присутствуют на странице не менее 4 раз.

Я не эксперт по веб-дизайну, но мне не нравится идея иметь тот же контент, который дублируется в html. Могу ли я использовать CSS, чтобы мой html содержал единственный список ссылок навигации в нормальном формате, но стандартный просмотр браузера содержит несколько частичных дубликатов?

(Кроме того, если предположить, что это возможно, это хорошая идея? или мне лучше просто привыкнуть к идее, что мой html будет содержать те же ссылки 4 раза?)

РЕДАКТИРОВАТЬ: На самом деле генерация навигационных ссылок не является проблемой; Я пытался очистить выходной html

ОТВЕТЫ

Ответ 1

Выбор возможного, но все еще не уверен, что вы хотите

И создает некоторые серьезные проблемы, которые варьируются в зависимости от контекста.

Одна из проблем заключается в том, что ваша заявленная цель заключается в уменьшении помех и избыточности html. Однако, чтобы иметь ссылку, вам все равно необходимо иметь элемент привязки (<a></a>) в качестве корня для ссылки.

Тем не менее, в один конец вы могли бы сделать что-то подобное с сегодняшними браузерами (теперь, когда псевдоэлементы в большей степени поддерживаются) заключается в том, чтобы развести текст из a, который оставляет пустой якорь в ваш код. Таким образом, вы по-прежнему имеете HTML a в коде, но исключает любой избыточный текст. Насколько это действительно полезно? Не моя мысль. Особенно, если вы имеете дело со встроенными ссылками, которые являются частью текста, потому что то, что вы сделаете, - это добавить текст к этим ссылкам через псевдоэлемент, например:

a[href='#oneUrl']:before {
    content: 'your anchor text';
}

Посмотрите этот пример скрипта.

Однако существует другой способ, который уменьшает HTML далее, но имеет некоторые другие серьезные ограничения. У вас могут быть ссылки в самом тексте (скажем), что позволяет в них вносить соответствующую реальную формулировку содержания. Тем не менее, каждый из них может иметь два (max в настоящее время) псевдоэлементов, которые могут "расширяться", чтобы быть отдельными ссылками в верхних и нижних колонтитулах и т.д. Посмотрите на этот пример скрипта. Очевидно, для этого требуется, чтобы вы смогли точно найти эти ссылки (возможно, используя position: fixed в качестве примера), что может быть сложным. Однако большая проблема заключается в том, что поисковые системы не собираются забирать эти дополнительные ссылки или их текст, а читатели экрана тоже не являются, поэтому ваша "основная навигация" фактически становится невидимой в некоторой степени. Это кажется мне нежелательным, но это действительно ограничивает вашу избыточность html.

Ответ 2

Короткий ответ: нет.

Длинный ответ: не очень,

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

IMHO, вероятно, неразумно хотеть сделать это, потому что стиль (и даже контент) может выглядеть так же, но нет гарантии, что это будет позже, кроме того, этот контент является содержимым и по праву принадлежит разметке, а не в стиле. Если вам не нравится модель на стороне сервера (это хорошо), я бы посмотрел на JS, чтобы помочь вам реплицировать разметку, возможно, и CSS, чтобы помочь вам стиль последовательно, но я думаю, что вы не обязательно идете по плодотворному пути.

Ответ 3

Короткий ответ no, в css вы не можете создавать контент или отображать его несколько раз. Обычно этот повторный контент обрабатывается через серверные технологии (PHP, JSP, ASPX) и т.д. Если ваш сайт является статическим контентом (без обработки на стороне сервера), тогда ваш лучший выбор - это просто копия и прошлое.

Было бы возможно сделать это с помощью javascript, но будет множество недостатков, лучше скопировать и вставить.

Ответ 4

ИМХО это невозможно. Моим решением было бы добавить небольшой PHP или другой движок, который автоматически отображает меню в тех местах, где это необходимо. Таким образом, ваш код DRY.

Ответ 5

Вы можете посмотреть серверная сторона, однако, как уже сообщал Germstorm, это, вероятно, лучше всего выполнит небольшой PHP script.

Ответ 6

Это не будет проблемой, если вы повторяете код для ссылок только в одном файле {используйте его как шаблон и динамически вставляете содержимое).

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

Кроме того, если вы случайно используете скриптов, вам повезло! Вы можете использовать Builder для динамически создавать элементы DOM.

Ответ 7

Как говорили другие, если вы можете использовать код на стороне сервера. Если по какой-либо причине нельзя использовать код на стороне сервера, лучше всего написать небольшую программу, которая читает на ваших уникальных страницах html и добавляет повторяющийся HTML. Это быстрее и проще, чем копирование и вставка вручную, особенно если у вас много страниц. Если вы добавите теги комментариев html со специальными строками идентификатора на свою страницу во время обработки, вы также можете использовать эти теги в будущем, чтобы быстро найти и заменить весь общий HTML, если вы когда-либо изменили структуру страницы.

Но предварительная обработка html-страниц, подобных этому, - это правильная боль, поэтому не делайте этого, если вы не можете сделать это на стороне сервера.

Ответ 8

Вы говорите, что хотите очистить выходной HTML. Но по какой причине? Я предполагаю, что вы либо хотите уменьшить размер HTML и размер полосы пропускания, либо сохранить HTML-код довольно, как исходный код.

Уменьшить размер HTML и размер полосы пропускания

Лучший способ добиться этого - работать с HTTP-сжатием. Большинство HTTP-серверов могут быть настроены таким образом, чтобы обслуживать контент. Проверьте документацию на сервере.

Сохранить HTML довольно

Возможно, вы хотите превратить свой HTML в шаблонный движок. Для этого есть несколько вариантов, например Mustache.js и Underscore. Тем не менее, вы понесете штраф за производительность, так как будет дополнительный шаг для обработки JS.

В любом случае, я думаю, вы приближаетесь к неправильной проблеме. Просто потому, что HTML [несколько] доступен для чтения, это не значит, что его следует рассматривать как исходный код. Я прошел через это, и в настоящее время я просто рассматриваю HTML как "код сборки" для браузеров. Использование лучших языков шаблонов, таких как Slim, помогает обеспечить выполнение этого POV.

Это не значит, что вы должны относиться к своему HTML как к мусору. Это просто означает, что его читаемость не является проблемой для программиста, вам следует беспокоиться о написании хороших и читаемых шаблонов просмотра, используя надежные механизмы шаблонов. В конце концов, вы хотите, чтобы HTML был наилучшим вариантом для браузера, чтобы он быстро представлялся. И если это означает дублирование кода и отсутствие пробелов, пусть будет так.

Ответ 9

Вы можете продублировать его, проецируя контент из атрибута в виде псевдоэлементов:

.duplicate::before {
    content:attr(title);
    display:block;
}
.duplicate::after {
    content:attr(title);
    display:block;
}
<div class="duplicate" title="text to duplicate"></div>

Ответ 10

Я думаю, вы будете использовать HTML-компоненты, а SSI или серверная часть включает в себя такие же методы на тех же страницах, это формат, который вы будете использовать. <!--#include virtual="path to file/include-file.html" -->, всегда включайте этот файл на все похожие страницы. просто перейдите по этой ссылке.. http://webdesign.about.com/od/ssi/a/aa052002a.htm