Перехресне посилання (назване якорем) у відмітці


Відповіді:


691
Take me to [pookie](#pookie)

повинен бути правильним синтаксисом розмітки, щоб перейти до точки прив’язки під назвою pookie.

Щоб вставити опорну точку цього імені, використовуйте HTML:

<a name="pookie"></a>

Маркдаун, здається, не проти, де ви поставите опорну точку. Корисне місце для його розміщення - в заголовку. Наприклад:

### <a name="tith"></a>This is the Heading

працює дуже добре. (Я б продемонстрував тут, але референт SO викреслює якір.)

Зверніть увагу на самозакриваються теги і id=протиname=

Більш рання версія цієї публікації пропонувала використовувати <a id='tith' />, використовуючи синтаксис, що закривається для XHTML, та використовувати idатрибут замість name.

XHTML дозволяє будь-якому тегу бути "порожнім" та "самозакритим". Тобто це <tag />скорочена <tag></tag>пара тегів з порожнім тілом. Більшість браузерів прийматимуть XHTML, а деякі - ні. Щоб уникнути проблем із переглядачем, закрийте тег, явно використовуючи <tag></tag>, як рекомендовано вище.

Нарешті, атрибут name=був застарілий у XHTML, тому я спочатку використовував id=, що всі визнають. Однак HTML5 тепер створює глобальну змінну в JavaScript під час використання id=, і це не обов'язково є тим, що ви хочете. Тож використання name=зараз, ймовірно, буде більш дружним.

(Завдяки Slipp Дугласа для пояснення XHTML мені, і цвяхів для вказуючи на HTML5 побічний ефект - дивіться коментарі та цвяхар «s відповідь більш докладно. , name=Здається, працює скрізь, хоча це не рекомендується в XHTML.)


1
Ви не можете бачити, як зв’язатись із демо-версією заголовка після того, як StackOverflow виведе HTML, оскільки їх відображення видаляє ваш <a> тег. Тобто ви не можете в StackOverflow Markdown.
Сліпп Д. Томпсон

2
Однак це спрацює в інших, більш ліберальних рендерах Markdown, але вам знадобиться закриваючий тег <a> ; <a> тег не дозволяє самозакривних. Крім того, я знайшов свій браузер, щоб пропустити повз заголовка, якщо тег <a> не знаходиться перед вмістом заголовка. Виправлення, внесені до ваших прикладів.
Сліпп Д. Томпсон

2
Тримайся там, ковбой. Тільки тому, що у вас немає будь-якого стилю на <a>href, не означає, що він закривається. Якщо я зовсім не змарнів, обидва з них: test-xhtml11 і [ sln.6bitt.com/public/test-html5.htmlSense(test-html5) перетворюють решту сторінки в тег <a>. Вперед і огляньте веб-інспектора на ваш вибір.
Сліпп Д. Томпсон

4
@Slipp: ОК, думаю, зараз я розумію. Ви кодували <a id="hi"/> rest of doc, але до цього ставились так <a id="hi"> rest of doc</a>. (І аналіз елементів сторінки показує це теж.) Моя помилка: я подивився на елементи, що відображаються не в необробленому джерелі. Як ви вважаєте, відповідь має бути змінена у світлі цього спостереження?
Стів Пауелл

3
nameАтрибут також створює глобальні змінні (див stackoverflow.com/questions/3434278 / ... ), так що ви можете також використовувати idатрибут в якості цільового фрагмента URL - ідентифікатора, як і передбачалося.
Боббі Джек

92

На bitbucket.org рішення, яке проголосувало, не працюватиме. Натомість, використовуючи заголовки (з ##), можна посилатися на них як анкери, префіксуючи їх як # markdown-header-my-header-name, де # markdown-header - неявний префікс, згенерований рендеріром, і решта - нижній регістр заголовка заголовка з тире, що замінює пробіли.

Приклад

## My paragraph title

створить неявний якор, як цей

#markdown-header-my-paragraph-title

Вся URL-адреса перед кожним посиланням на якір є необов'язковою, тобто

[Some text](#markdown-header-my-paragraph-title)

еквівалентно

[Some text](https://bitbucket.org/some_project/some_page#markdown-header-my-paragraph-title) 

за умови, що вони знаходяться на одній сторінці.

Джерело: https://bitbucket.org/tutorials/markdowndemo/overview (відредагуйте джерело цього .md-файлу та подивіться, як зроблені якіри).


1
Це також може бути добре. Відповідно до цього: confluence.atlassian.com/bitbucket/… , bitbucket підтримує розширення Зміст, який може автоматично генерувати посилання та прив’язки на основі заголовків документів. Розширення TOC задокументовано тут: pythonhosted.org/Markdown/extensions/toc.html Додайте текст "[TOC]" до початку документа для його створення.
Бінарний Філі

8
У Github ## My paragraph titleбуде зроблено наступний якір user-content-my-paragraph-title, тож ви можете посилатися на нього з [Some text] (# user-content-my-section-title). Однак офіційної документації на це я не знайшов.
toto_tico

Це допомогло мені і на Bitbucket - працює як шарм.
Скотт Байєрс

1
Це корисна інформація; Дякую тобі. Однак рендері для розмітки без розширень не будуть генерувати ці якорі для вас, і зіткнення імен заголовка призведе до зіткнення ідентифікаційних якорів якоря (або якогось неприємного розрізнення, наприклад, достатності кількості). Явні ідентифікатори якоря є кращими, більш керованими, не піддаються випадковим змінам через оновлення тексту (див. Трюк вище) та корисні для прив’язки більше, ніж просто заголовки. Обидві методи потрібні загалом.
Стів Пауелл

На stackedit.io [linky](#header) був достатнім якорем, і працював, коли його публікували також у Gist.
Феліпе Альварес

67

Використовуйте a name. Використання idне потрібного в HTML 5 та створить глобальні змінні у вашому JavaScript

Див. Специфікацію HTML 5, 5.9.8 Навігація до ідентифікатора фрагмента - і те, idі nameвикористовується.

Важливо знати, що більшість браузерів все ще перетворюють ідентифікатори в глобальні змінні . Ось швидкий тест . Використання nameуникає створення глобальних та будь-яких конфліктів, які можуть призвести до цього.

Приклад використання імені:

Take me to [pookie](#pookie)

І місце призначення:

### <a name="pookie"></a>Some heading

5
Схильність Аргумент глобальної змінної слабкий, тому що ви не повинні (безпосередньо) визначати глобальні змінні у своєму JS, так що конфлікт не відбудеться. Також семантика nameі idє різною.
Marnen Laibow-Koser

9
@ MarnenLaibow-Koser Ніхто не обговорює визначення глобальних змінних у JS. Внесення ідентифікатора в HTML створює глобальний window.someid у більшості браузерів.
mikemaccana

14
@ MarnenLaibow-Koser Багато бібліотек (тобто не власний JS, а чужий) використовують один глобальний - наприклад, fineuploader. Якщо ви зробите елемент з ідентифікатором fineuploader, ви не зможете використовувати fineuploaderмодуль. Уникнення створення зайвих глобальних засобів допомагає уникнути цих конфліктів.
mikemaccana

5
Мені було б цікаво провести кілька тестів цього випадку і з'ясувати, який з них має перевагу. Я ціную теоретичну проблему, але за роки розвитку на стороні клієнта у мене ніколи не було переривання ідентифікації жодного JS на стороні клієнта (за умови, що HTML був дійсним). Я продовжуватиму їх використовувати, коли вони семантично доречні, поки не зіткнуться з актуальними проблемами.
Marnen Laibow-Koser

2
@ MarnenLaibow-Koser У мене (та у багатьох інших) HTML-коди зламали справжній JavaScript - є один дуже практичний приклад у коментарі, на який ви відповідаєте! Існує багато керівників стилів та компаній, які завжди використовують заняття, навіть для одиночних, і саме тому.
mikemaccana

17

Markdown Anchor підтримує хешмарк, тому посилання на якір на сторінці просто було б[Pookie](#pookie)

Генерування якоря насправді не підтримується в Gruber Markdown, але є в інших реалізаціях, таких як Markdown Extra .

У додатку Markdown Extra ідентифікатор якоря додається до заголовка або підзаголовка {#pookie}.

Github Flavored Markdown на сторінках сховища Git (але не в Gists) автоматично генерує якір з декількома тегами розмітки у всіх заголовках (h1, h2, h3 тощо), включаючи:

  • id="user-content-HEADERTEXT"
  • class="anchor"
  • href="#HEADERTEXT"
  • aria-hidden="true" (це для піктограми посилання svg, яка відображається при переході миші)

Виключаючи значок aria / svg, коли пише:

  • # Header Title

Github генерує:

  • <h1><a id="user-content-header-title" class="anchor" href="#header-title">Header Title</a></h1>

Тому для створення заголовків посилань нічого не потрібно робити, і завжди можна посилатися на них за допомогою:

  • Посилання на [Header Title](#header-title)

16

У початковому синтаксисі Markdown немає доступного синтаксису, щоб це зробити, але Markdown Extra надає можливість принаймні присвоїти ідентифікатори заголовкам - з якими потім можна легко зв’язати. Зауважте також, що ви можете використовувати звичайний HTML як у Markdown, так і в Markdown Extra, і що nameатрибут був замінений idатрибутом в останніх версіях HTML.


9

Для всіх, хто шукає рішення цієї проблеми в GitBook. Ось як я змусив це працювати (в GitBook). Потрібно чітко позначити заголовок, наприклад:

# My Anchored Heading {#my-anchor}

Потім посилання на цей якір, як це

[link to my anchored heading](#my-anchor)

Рішення та додаткові приклади можна знайти тут: https://seadude.gitbooks.io/learn-gitbook/


Дякую! це працює! на це слід звернути увагу!
Декстер

Найкраща відповідь! Спасибі
invis

7

Пізно на вечірку, але я думаю, що це доповнення може бути корисним для людей, з якими працюють rmarkdown. В rmarkdownє вбудована підтримка для посилань на заголовки в документі.

Будь-який заголовок, визначений

# Header

на яку можна посилатися

get me back to that [header](#header)

Далі наведено мінімальний окремий .rmdфайл, який показує таку поведінку. Його можна в'язати до .pdfі .html.

---
title: "references in rmarkdown"
output:
  html_document: default
  pdf_document: default
---

# Header

Write some more text. Write some more text. Write some more text. Write some more text. Write some more text. Write some more text. Write some more text. Write some more text. Write some more text. Write some more text. Write some more text. 

Go back to that [header](#header).

4

Використовуючи останню версію Markdown, ви зможете використовувати такий синтаксис:

[](){:name='anchorName'}

Це має створити такий HTML:

<a name="anchorName"></a>

Якщо ви хочете, щоб на якорі був текст, просто додайте текст якоря в квадратні дужки:

[Some Text](){:name='anchorName'}


Здається, Marukuпро цей синтаксис відомо лише те. Дивіться марку.
Уліссе БН

3

Для найбільш поширених генераторів розмітки. У вас є простий якісно створений якір у кожному заголовку. Наприклад, з pandoc , згенерований якір буде кулею випадку шапки вашого заголовка.

 echo "# Hello, world\!" | pandoc
 # => <h1 id="hello-world">Hello, world!</h1>

Залежно від того, який синтаксичний аналізатор ви використовуєте, якір може змінюватися (візьміть приклад символіки та відповіді La muerte Peluda, вони різні!). Дивіться цю мітку, де ви можете бачити згенеровані якіри залежно від вашої реалізації розмітки .

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.