Landing pages are a specialized type of page that serve as the starting pages for various New Relic products. For example, you'll see landing pages for Application monitoring (APM) and Browser monitoring.
重要
This landing page information does not apply to the docs home page.
If you need to create a new landing page, you can either copy an existing landing page, or you can modify the sample landing page shown at the bottom.
The next sections look at what you need to include for each landing page.
Front matter
When you insert the front matter, be sure to designate the type
as landingPage
. Here's an example:
---title: APMtype: landingPage---
ヒント
In the front matter, the following are optional: tags
, translate
, and redirects
. So, you can leave them out if they don't have any values.
Introduction section
Following the front matter, the first content section is a two-column introduction (also called the hero section). This includes the following:
- A
<LandingPageHero>
component wrapping all the introductory content. - A
<HeroContent>
component wrapping the text portion of the introduction (the content in the left column). - An image or video (appears in the right column).
- A caption (optional), which is wrapped by the
<figcaption>
component.
Here's an example of the hero section that shows you where to insert your content:
<LandingPageHero>
<HeroContent>
INSERT_PARAGRAPHS_FOR_YOUR_INTRODUCTION
</HeroContent>
![INSERT_ALT-TEXT_HERE](./images/INSERT_IMAGE_FILE_NAME.png "INSERT_THE_IMAGE_TITLE_HERE")
<figcaption>
INSERT_OPTIONAL_CAPTION_USING_SAME_INDENTATION_AS_IMAGE
</figcaption>
</LandingPageHero>
Tiles
Tiles are a series of boxes after the introduction. They contain the main subject areas for your product. You should just list these in order you want them to appear, and the cascading style sheet will render them across the page.
Here's an example of a tile:
<LandingPageTileGrid>
<LandingPageTile
title="INSERT_YOUR_BOX_TITLE_HERE."
href="/docs/INSERT_THE_DIRECTORY_PATH_TO_THE_TARGET_LANDING_PAGE_INDEX.HTML"
icon="fe-INSERT_THE_ICON_NAME"
>
INSERT_TILE_CONTENT_HERE...
</LandingPageTile>
...
For each tile, do the following:
- Insert a value for
title
that explains the purpose of the category. - Insert a value for
href
that links to the target landing page. If the target landing page isindex.html
, you can just include the directory path with no filename sinceindex.html
is the default (it doesn't cause any problems if you includeindex.html
). - Insert a value for
icon
by prefixing the icon name withfe-
(Feather icons),logo-
(third-party logos), ornr-
(New Relic logos). For example, here is the format for a feather icon:fe-alert-triangle
).ヒント
For more details about icons, see Embed images. - Between the
LandingPageTile
tags, insert text, such as a bullet list with links to product documentation.
Button for viewing all docs in the category
After your tiles, you should have a single button that offers to take users to all the documentation for that category.
The table of contents page that gets linked here is always at the same path as the landing page, but with /table-of-contents
appended to it. These table of contents pages get built automatically for every landing page. For example, if this landing page was located at /docs/apm
, this link should be /docs/apm/table-of-contents
.
Here's an example:
<ButtonLink
role="button"
to="INSERT_LINK_TO_DIRECTORY_WITH_ALL_THESE_DOCS/table-of-contents"
variant="normal"
>
View all INSERT_YOUR_CATEGORY_HERE docs
</ButtonLink>
Code sample
Here's a sample landing page you could modify to suit your needs:
---
title: INSERT_YOUR_TITLE_HERE
type: landingPage
---
<LandingPageHero>
<HeroContent>
INSERT_PARAGRAPHS_FOR_YOUR_INTRODUCTION
</HeroContent>
![INSERT_ALT-TEXT_HERE](./images/INSERT_IMAGE_FILE_NAME.png "INSERT_THE_IMAGE_TITLE_HERE")
<figcaption>
INSERT_OPTIONAL_CAPTION_USING_SAME_INDENTATION_AS_IMAGE
</figcaption>
</LandingPageHero>
<LandingPageTileGrid>
<LandingPageTile
title="INSERT_YOUR_BOX_TITLE_HERE"
icon="fe-INSERT_ICON_NAME_HERE"
>
* [INSERT_LINK_NAME](INSERT_LINK_URL) Aliquam auctor mattis nisl ut iaculis.
* [INSERT_LINK_NAME](INSERT_LINK_URL) Suspendisse pharetra elit sit amet risus euismod, a consectetur tortor vulputate.
</LandingPageTile>
<LandingPageTile
title="INSERT_YOUR_BOX_TITLE_HERE"
icon="fe-INSERT_ICON_NAME_HERE"
>
* Use [INSERT_LINK_NAME](INSERT_LINK_URL) to lectus diam, ornare vitae dui suscipit, laoreet ultrices lacus.
* Mauris tempor massa ac augue mattis, nec pharetra quam mollis [INSERT_LINK_NAME](INSERT_LINK_URL).
</LandingPageTile>
<LandingPageTile
title="INSERT_YOUR_BOX_TITLE_HERE"
icon="fe-INSERT_ICON_NAME_HERE"
>
* Use [INSERT_LINK_NAME](INSERT_LINK_URL) rhoncus tortor vitae libero laoreet feugiat.
* Donec dui elit, fermentum vel faucibus sed, rhoncus in felis [INSERT_LINK_NAME](INSERT_LINK_URL).
</LandingPageTile>
<LandingPageTile
title="INSERT_YOUR_BOX_TITLE_HERE"
icon="fe-INSERT_ICON_NAME_HERE"
>
* Use [INSERT_LINK_NAME](INSERT_LINK_URL) uspendisse pharetra elit sit amet risus euismod.
* Pellentesque finibus magna vitae hendrerit gravida [INSERT_LINK_NAME](INSERT_LINK_URL).
</LandingPageTile>
<LandingPageTile
title="INSERT_YOUR_BOX_TITLE_HERE"
icon="fe-INSERT_ICON_NAME_HERE"
>
* Use [INSERT_LINK_NAME](INSERT_LINK_URL) Etiam imperdiet felis eu ipsum consequat tristique.
* Etiam imperdiet felis eu ipsum consequat tristique [INSERT_LINK_NAME](INSERT_LINK_URL).
</LandingPageTile>
<LandingPageTile
title="INSERT_YOUR_BOX_TITLE_HERE"
icon="fe-INSERT_ICON_NAME_HERE"
>
* Use [INSERT_LINK_NAME](INSERT_LINK_URL) Quisque hendrerit, dolor sed sodales aliquet.
* Vestibulum varius lectus ac velit euismod [INSERT_LINK_NAME](INSERT_LINK_URL).
</LandingPageTile>
</LandingPageTileGrid>
<ButtonLink
role="button"
to="INSERT_LINK_TO_DIRECTORY_WITH_ALL_THESE_DOCS/table-of-contents"
variant="normal"
>
View all INSERT_YOUR_CATEGORY_HERE docs
</ButtonLink>
その他のヘルプ
さらに支援が必要な場合は、これらのサポートと学習リソースを確認してください:
- Explorers Hubでは、コミュニティからのサポートを受けたり、ディスカッションに参加したりすることができます。
- 当社サイトで答えを見つけて、サポートポータルの使用方法を確認してください。
- Linux、Windows、およびmacOS向けトラブルシューティングツールであるNew Relic Diagnosticsを実行してください。
- New Relicの とandドキュメント をご確認ください。