mirror of
https://github.com/n8n-io/n8n-docs.git
synced 2026-03-27 09:28:43 +07:00
feat(footer): add sub-footer with ref links (#2557)
This commit is contained in:
Bartek Zienkiewicz
committed by
GitHub
GitHub
parent
3c7a965601
commit
b661fa97ac
@@ -41,7 +41,8 @@
|
||||
{% endif %}
|
||||
</nav>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
{% include "partials/sub-footer.html" %}
|
||||
<div class="md-footer-meta md-typeset">
|
||||
<div class="md-footer-meta__inner md-grid">
|
||||
<!-- n8n CUSTOM: More links to the main website -->
|
||||
|
||||
333
_overrides/partials/sub-footer.html
Normal file
333
_overrides/partials/sub-footer.html
Normal file
@@ -0,0 +1,333 @@
|
||||
<div id="subFooter" class="sub-footer">
|
||||
<div class="sub-footer-container">
|
||||
<div class="footer-columns">
|
||||
<div>
|
||||
<div class="column-name">Popular integrations</div>
|
||||
<ul class="col-links">
|
||||
<li>
|
||||
<a href="https://n8n.io/integrations/google-sheets/" class="footer-link"> Google Sheets </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://n8n.io/integrations/telegram/" class="footer-link"> Telegram </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://n8n.io/integrations/mysql/" class="footer-link"> MySQL </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://n8n.io/integrations/slack/" class="footer-link"> Slack </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://n8n.io/integrations/discord/" class="footer-link"> Discord </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://n8n.io/integrations/postgres/" class="footer-link"> Postgres </a>
|
||||
</li>
|
||||
<li class="hidden-link">
|
||||
<a href="https://n8n.io/integrations/notion/" class="footer-link"> Notion </a>
|
||||
</li>
|
||||
<li class="hidden-link">
|
||||
<a href="https://n8n.io/integrations/gmail/" class="footer-link"> Gmail </a>
|
||||
</li>
|
||||
<li class="hidden-link">
|
||||
<a href="https://n8n.io/integrations/airtable/" class="footer-link"> Airtable </a>
|
||||
</li>
|
||||
<li class="hidden-link">
|
||||
<a href="https://n8n.io/integrations/google-drive/" class="footer-link"> Google Drive </a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="bottom-link hidden-link">
|
||||
<a href="https://n8n.io/integrations/" class="footer-link">
|
||||
Show more integrations
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 10" width="7px" height="7px">
|
||||
<g clip-path="url(#a)">
|
||||
<path
|
||||
fill="#111010"
|
||||
fill-rule="evenodd"
|
||||
d="M7.678 1.36H.481V0H10v9.52H8.64v-7.2L.962 10 0 9.038 7.678 1.36Z"
|
||||
clip-rule="evenodd"></path>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="a">
|
||||
<path fill="#fff" d="M0 0h10v10H0z"></path>
|
||||
</clipPath>
|
||||
</defs></svg
|
||||
></a>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
class="footer-link footer-link--more"
|
||||
onclick="document.getElementById('subFooter').classList.toggle('sub-footer--full')"></button>
|
||||
</div>
|
||||
<div>
|
||||
<div class="column-name">Trending combinations</div>
|
||||
<ul class="col-links">
|
||||
<li>
|
||||
<a href="https://n8n.io/integrations/hubspot/and/salesforce/" class="footer-link">
|
||||
HubSpot and Salesforce
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://n8n.io/integrations/twilio/and/whatsapp-business-cloud/" class="footer-link">
|
||||
Twilio and WhatsApp
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://n8n.io/integrations/github/and/jira-software/" class="footer-link">
|
||||
GitHub and Jira
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://n8n.io/integrations/asana/and/slack/" class="footer-link"> Asana and Slack </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://n8n.io/integrations/asana/and/salesforce/" class="footer-link">
|
||||
Asana and Salesforce
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://n8n.io/integrations/jira-software/and/slack/" class="footer-link">
|
||||
Jira and Slack
|
||||
</a>
|
||||
</li>
|
||||
<li class="hidden-link">
|
||||
<a href="https://n8n.io/integrations/jira-software/and/salesforce/" class="footer-link">
|
||||
Jira and Salesforce
|
||||
</a>
|
||||
</li>
|
||||
<li class="hidden-link">
|
||||
<a href="https://n8n.io/integrations/github/and/slack/" class="footer-link"> GitHub and Slack </a>
|
||||
</li>
|
||||
<li class="hidden-link">
|
||||
<a href="https://n8n.io/integrations/hubspot/and/quickbooks-online/" class="footer-link">
|
||||
HubSpot and QuickBooks
|
||||
</a>
|
||||
</li>
|
||||
<li class="hidden-link">
|
||||
<a href="https://n8n.io/integrations/hubspot/and/slack/" class="footer-link"> HubSpot and Slack </a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="bottom-link hidden-link">
|
||||
<a href="https://n8n.io/integrations/" class="footer-link">
|
||||
Show more integrations
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 10" width="7px" height="7px">
|
||||
<g clip-path="url(#a)">
|
||||
<path
|
||||
fill="#111010"
|
||||
fill-rule="evenodd"
|
||||
d="M7.678 1.36H.481V0H10v9.52H8.64v-7.2L.962 10 0 9.038 7.678 1.36Z"
|
||||
clip-rule="evenodd"></path>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="a">
|
||||
<path fill="#fff" d="M0 0h10v10H0z"></path>
|
||||
</clipPath>
|
||||
</defs></svg
|
||||
></a>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
class="footer-link footer-link--more"
|
||||
onclick="document.getElementById('subFooter').classList.toggle('sub-footer--full')"></button>
|
||||
</div>
|
||||
<div>
|
||||
<div class="column-name">Top integration categories</div>
|
||||
<ul class="col-links">
|
||||
<li>
|
||||
<a href="https://n8n.io/integrations/categories/development/" class="footer-link"> Development </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://n8n.io/integrations/categories/communication/" class="footer-link">
|
||||
Communication
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://n8n.io/integrations/categories/langchain/" class="footer-link"> Langchain </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://n8n.io/integrations/categories/ai/" class="footer-link"> AI </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://n8n.io/integrations/categories/data-and-storage/" class="footer-link">
|
||||
Data & Storage
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://n8n.io/integrations/categories/marketing/" class="footer-link"> Marketing </a>
|
||||
</li>
|
||||
<li class="hidden-link">
|
||||
<a href="https://n8n.io/integrations/categories/productivity/" class="footer-link">
|
||||
Productivity
|
||||
</a>
|
||||
</li>
|
||||
<li class="hidden-link">
|
||||
<a href="https://n8n.io/integrations/categories/sales/" class="footer-link"> Sales </a>
|
||||
</li>
|
||||
<li class="hidden-link">
|
||||
<a href="https://n8n.io/integrations/categories/utility/" class="footer-link"> Utility </a>
|
||||
</li>
|
||||
<li class="hidden-link">
|
||||
<a href="https://n8n.io/integrations/categories/miscellaneous/" class="footer-link">
|
||||
Miscellaneous
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="bottom-link hidden-link">
|
||||
<a href="https://n8n.io/integrations/" class="footer-link">
|
||||
Explore more categories
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 10" width="7px" height="7px">
|
||||
<g clip-path="url(#a)">
|
||||
<path
|
||||
fill="#111010"
|
||||
fill-rule="evenodd"
|
||||
d="M7.678 1.36H.481V0H10v9.52H8.64v-7.2L.962 10 0 9.038 7.678 1.36Z"
|
||||
clip-rule="evenodd"></path>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="a">
|
||||
<path fill="#fff" d="M0 0h10v10H0z"></path>
|
||||
</clipPath>
|
||||
</defs></svg
|
||||
></a>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
class="footer-link footer-link--more"
|
||||
onclick="document.getElementById('subFooter').classList.toggle('sub-footer--full')"></button>
|
||||
</div>
|
||||
<div>
|
||||
<div class="column-name">Trending templates</div>
|
||||
<ul class="col-links">
|
||||
<li>
|
||||
<a href="https://n8n.io/workflows/1750-creating-an-api-endpoint/" class="footer-link">
|
||||
Creating an API endpoint
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://n8n.io/workflows/1954-ai-agent-chat/" class="footer-link">
|
||||
AI agent chat
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://n8n.io/workflows/1951-scrape-and-summarize-webpages-with-ai/" class="footer-link">
|
||||
Scrape and summarize webpages with AI
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://n8n.io/workflows/1700-very-quick-quickstart/" class="footer-link">
|
||||
Very quick quickstart
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://n8n.io/workflows/1748-pulling-data-from-services-that-n8n-doesnt-have-a-pre-built-integration-for/" class="footer-link">
|
||||
Pulling data from services that n8n doesn’t have a pre-built integration for
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://n8n.io/workflows/1747-joining-different-datasets/" class="footer-link">
|
||||
Joining different datasets
|
||||
</a>
|
||||
</li>
|
||||
<li class="hidden-link">
|
||||
<a href="https://n8n.io/workflows/1534-back-up-your-n8n-workflows-to-github/" class="footer-link">
|
||||
Back Up Your n8n Workflows To Github
|
||||
</a>
|
||||
</li>
|
||||
<li class="hidden-link">
|
||||
<a href="https://n8n.io/workflows/1862-openai-gpt-3-company-enrichment-from-website-content/" class="footer-link">
|
||||
OpenAI GPT-3: Company Enrichment from website content
|
||||
</a>
|
||||
</li>
|
||||
<li class="hidden-link">
|
||||
<a href="https://n8n.io/workflows/2006-ai-agent-that-can-scrape-webpages/" class="footer-link">
|
||||
AI agent that can scrape webpages
|
||||
</a>
|
||||
</li>
|
||||
<li class="hidden-link">
|
||||
<a href="https://n8n.io/workflows/1435-convert-json-to-an-excel-file/" class="footer-link">
|
||||
Convert JSON to an Excel file
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="bottom-link hidden-link">
|
||||
<a href="https://n8n.io/workflows/" class="footer-link">
|
||||
Explore 800+ workflow templates
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 10" width="7px" height="7px">
|
||||
<g clip-path="url(#a)">
|
||||
<path
|
||||
fill="#111010"
|
||||
fill-rule="evenodd"
|
||||
d="M7.678 1.36H.481V0H10v9.52H8.64v-7.2L.962 10 0 9.038 7.678 1.36Z"
|
||||
clip-rule="evenodd"></path>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="a">
|
||||
<path fill="#fff" d="M0 0h10v10H0z"></path>
|
||||
</clipPath>
|
||||
</defs></svg
|
||||
></a>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
class="footer-link footer-link--more"
|
||||
onclick="document.getElementById('subFooter').classList.toggle('sub-footer--full')"></button>
|
||||
</div>
|
||||
<div>
|
||||
<div class="column-name">Top guides</div>
|
||||
<ul class="col-links">
|
||||
<li>
|
||||
<a href="https://blog.n8n.io/telegram-bots/" class="footer-link"> Telegram bots </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://blog.n8n.io/open-source-chatbot/" class="footer-link"> Open-source chatbot </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://blog.n8n.io/open-source-llm/" class="footer-link"> Open-source LLM </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://blog.n8n.io/open-source-low-code-platforms/" class="footer-link"> Open-source low-code platforms </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://blog.n8n.io/free-zapier-alternatives/" class="footer-link"> Zapier alternatives </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://blog.n8n.io/make-vs-zapier/" class="footer-link"> Make vs Zapier </a>
|
||||
</li>
|
||||
<li class="hidden-link">
|
||||
<a href="https://blog.n8n.io/ai-agents/" class="footer-link"> AI agents </a>
|
||||
</li>
|
||||
<li class="hidden-link">
|
||||
<a href="https://blog.n8n.io/ai-coding-assistants/" class="footer-link"> AI coding assistants </a>
|
||||
</li>
|
||||
<li class="hidden-link">
|
||||
<a href="https://blog.n8n.io/create-chatgpt-discord-bot/" class="footer-link"> ChatGPT Discord bot </a>
|
||||
</li>
|
||||
<li class="hidden-link">
|
||||
<a href="https://blog.n8n.io/best-ai-chatbot/" class="footer-link"> Best AI chatbot </a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="bottom-link hidden-link">
|
||||
<a href="https://blog.n8n.io/" class="footer-link">
|
||||
Show guides
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 10" width="7px" height="7px">
|
||||
<g clip-path="url(#a)">
|
||||
<path
|
||||
fill="#111010"
|
||||
fill-rule="evenodd"
|
||||
d="M7.678 1.36H.481V0H10v9.52H8.64v-7.2L.962 10 0 9.038 7.678 1.36Z"
|
||||
clip-rule="evenodd"></path>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="a">
|
||||
<path fill="#fff" d="M0 0h10v10H0z"></path>
|
||||
</clipPath>
|
||||
</defs></svg
|
||||
></a>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
class="footer-link footer-link--more"
|
||||
onclick="document.getElementById('subFooter').classList.toggle('sub-footer--full')"></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -368,4 +368,106 @@
|
||||
.grid-cards-vertical.cards>:is(ul,ol)>li {
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
||||
.sub-footer {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding: 44px 0;
|
||||
}
|
||||
|
||||
.sub-footer a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.sub-footer-container {
|
||||
max-width: 61rem;
|
||||
margin: auto;
|
||||
padding: 0 .8rem;
|
||||
}
|
||||
|
||||
.sub-footer .footer-columns {
|
||||
display: grid;
|
||||
gap: 16px;
|
||||
grid-template-columns: repeat(1, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
@media screen and (min-width: 300px) {
|
||||
.sub-footer .footer-columns {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1024px) {
|
||||
.sub-footer .footer-columns {
|
||||
grid-template-columns: repeat(5, minmax(0, 1fr));
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 300px) {
|
||||
.sub-footer .footer-columns > div:last-child {
|
||||
grid-column: span 2 / span 2;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1024px) {
|
||||
.sub-footer .footer-columns > div:last-child {
|
||||
grid-column: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.sub-footer .column-name {
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
line-height: 24px;
|
||||
margin-bottom: 16px;
|
||||
color: #101330;
|
||||
}
|
||||
|
||||
.sub-footer .col-links {
|
||||
list-style: none;
|
||||
margin: 0 0 10px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.sub-footer .col-links li {
|
||||
margin-bottom: 6px;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
line-height: 1.5;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.sub-footer .footer-link {
|
||||
color: #101330;
|
||||
font-size: 14px;
|
||||
line-height: 22px;
|
||||
border: none;
|
||||
background: 0 0;
|
||||
}
|
||||
|
||||
.sub-footer:not(.sub-footer--full) .hidden-link {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.sub-footer .footer-link--more {
|
||||
padding: 0;
|
||||
border-bottom: 1px solid #101330;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.sub-footer .footer-link--more:before {
|
||||
content: 'Show more';
|
||||
}
|
||||
|
||||
.sub-footer.sub-footer--full .footer-link--more:before {
|
||||
content: 'Show less';
|
||||
}
|
||||
|
||||
.bottom-link {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.bottom-link .footer-link {
|
||||
color: #20b69e;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user