공유를 위한 간단한 링크 목록 만들기

14394 단어 jekyllshowdevjavascript
나는 원래 my own blog에 약간의 차이를 두고 이것을 게시했습니다.

귀하의 사이트에 대한 링크 페이지가 필요합니다!



홈페이지로 이동하거나 게시물을 기반으로 자신의 사이트에서 가장 관심 있는 위치로 이동하는 빠른 방법을 포함하지 않는 개발자를 위한 Instagram 약력을 많이 봅니다. 지난 5월에 나는 Jekyll과 EJS의 두 웹사이트에 대한 링크 목록을 코딩했습니다. 제 블로그에 기본 코드와 모양을 공유했는데, 이제 다른 개발자들에게 도움이 되고자 이곳에서 공유하고자 합니다.

왜 다른 페이지인가요?



나도 알아, 그렇지? 다른 페이지. 우리는 이미 navbar와 footer를 가지고 있고 얼마나 많은 다른 페이지가 있는지 알고 있습니다. 그러나 점점 더 모바일화되는 웹에서 공유하기 위한 간단한 탐색을 만드는 데는 좋으며 Instagram에는 거의 필수적입니다. 좋아, Instagram 때문에 이 작업을 시작하려는 동기가 완전히 생겼지만 다른 잠재적인 용도를 보았습니다.

여기서 우리가 만들고 있는 것은 사람들이 당신에 대해 다른 것을 본 후에 자기 주도하기를 원할 가능성이 있는 사이트의 주요 영역에 대한 몇 개의 링크가 있는 페이지일 뿐입니다. Instagram 피드라고 가정하겠습니다. Instagram 약력에 웹 사이트로 코딩하는 모든 링크를 배치하기만 하면 됩니다. 여기에서 동일한 아이디어를 사용하여 할인, 현재 블로그 게시물 또는 사람들이 찾고 있는 모든 것에 대한 임시 링크를 추가하십시오. 😃

코딩하는 방법



나는 Jekyll의 내 블로그와 EJS 및 Express를 사용하는 다른 사이트의 두 사이트에 대해 이것을 채찍질했습니다. 둘 다 설정이 매우 간단하지만 매우 다르기 때문에 여기에서 두 가지를 모두 공유하겠습니다.

최종 결과는 모바일에서 다음과 같이 보입니다.



지킬 마크다운



내 블로그는 markdown과 함께 jekyll로 작성되었습니다. 깨끗한 링크 페이지를 설정하려면 새 레이아웃과 새 페이지를 만들어야 했습니다.

모든 것을 페이지 중앙에 배치하고 일반적인 페이지의 머리글과 바닥글을 인쇄하지 않는 기존 레이아웃이 없었기 때문에 새 레이아웃이 필요했습니다. 머리글과 바닥글이 없는 plain이라는 새 레이아웃을 만들었습니다.

/layouts/plain.html

<!DOCTYPE html>
<html>
  {% include head.html %}
  <body>
    <div class="page-content">
      <div class="wrapper">
          <header class="post-header center">
            <h1 class="post-title">{{ page.title }}</h1>
            <h5 class="post-description">{{ page.description }}</h5>
          </header>
          <div class="center">
            {{ content }}
          </div>
      </div>
    </div>
  </body>
</html>


마크다운은 우리가 새로운 일반 레이아웃, 제목, 링크 및 설명을 사용하고 있음을 나타내기 위해 YAML을 포함해야 합니다. 페이지가 이제 기본 탐색에 표시되어야 하는 경우 false인 nav 태그도 있습니다. 그것이 필요한지 여부는 navbar와 헤더가 이미 코딩된 방식에 따라 다릅니다.

/페이지/links.md

--------
layout: plain
title: Welcome
permalink: /links/
description: I can see you - just kidding
nav: false
--------

[About]({{site.url}}/){: .button .mylink}

[Code]({{site.url}}/code){: .button .mylink}

[Travel]({{site.url}}/travel){: .button .mylink}

[Projects]({{site.url}}/projects){: .button .mylink}

[Blog]({{site.url}}/blog){: .button .mylink}


후행{:} 코드 블록은 .css를 마크다운에 넣는 방법입니다. 마크다운 페이지에는 일반적으로 css가 없지만 css를 추가하지 않고는 원하는 버튼 모양을 얻을 수 없습니다. jekyll 사이트에서 버튼을 더 자주 사용하거나 계획하고 있다면 이 링크 페이지는 각 링크를 반복하는 레이아웃으로 이동하고 대신 버튼을 생성할 수 있습니다. 여기에 있는 정확한 CSS 설정은 다음과 같습니다.

/* in /_sass/basscss/_base-buttons.scss */

button,
.button {
  font-family: $button-font-family;
  font-size: $button-font-size;
  font-weight: $button-font-weight;
  text-decoration: none;
  cursor: pointer;
  display: inline-block;
  box-sizing: border-box;
  line-height: $button-line-height;
  padding: $button-padding-y $button-padding-x;
  margin: 0;
  height: auto;
  border: 1px solid transparent;
  vertical-align: middle;
  -webkit-appearance: none;
}

::-moz-focus-inner {
  border: 0;
  padding: 0;
}

.button:hover {
  text-decoration: none;
}

/* in /_sass/_me.scss */

.mylink {
    background: $theme-color;
    color: #fff;
    font-size: 1.5em;
    width: 75%;
    align-self: center;
    text-align: center;
}


EJS/HTML/익스프레스



EJS로 Gifts Done 사이트를 유지하고 Express로 HTML을 관리합니다. 이를 위한 코드는 다른 종류의 간단했습니다. 먼저 링크 페이지를 만듭니다. 보기 및 페이지와 함께 EJS를 사용하고 있습니다. 긴headernonav 파일은 올리지 않겠지만 그냥 head 메타와 body 태그의 시작 부분입니다. 이 사이트에서는 부트스트랩 4를 사용하고 있으므로 특별한 스타일을 설정하지 않았고 링크는 목록 그룹의 일부일 뿐입니다.

/views/pages/links.ejs

<% include ../partials/headernonav %>

<div class="tall">
    <div class="px-3 py-3 pt-md-5 pb-md-4 mx-auto text-center">
        <a class="navbar-brand brand-logo" href="/">
        <img src="/images/gifts-done-name.png" alt="gifts-done logo"/></a>
        <p class="lead">Automate your Gifting!</p>
        <div class="container list-group py-3">
            <a href="/" class="list-group-item list-group-item-action">Learn More</a>
            <a href="/about" class="list-group-item list-group-item-action">About Us</a>
            <a href="/users/login" class="list-group-item list-group-item-action">Log In</a>
            <a href="/suppliers" class="list-group-item list-group-item-action">Become a Supplier</a>
            <a href="http://blog.gifts-done.com" class="list-group-item list-group-item-action">Our Blog, The Wrap </a>
            <a href="/faq" class="list-group-item list-group-item-action">FAQs</a>
            <a href="/contact" class="list-group-item list-group-item-action">Contact Us</a>
        </div>
    </div>
</div>

<!-- footer -->
<% include ../partials/footer %>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" ></script>
</body>
</html>


이 상황에서 기억해야 할 점은 페이지를 그냥 만들 수 없다는 것입니다. 또한 누군가가 http://yoursite/links/에 갈 때 서버가 귀하가 만든 링크 페이지를 제공하기를 원한다는 것을 알 수 있도록 경로를 추가해야 합니다.

// routes/index.js
const express = require('express');
const router = express.Router();
const controller = require('../controllers/index');
// IG LINKS
router.get('/links', controller.show_links)
// .. a bunch of other router stuff

// controllers/index.js
// .. other controller stuff
exports.show_links = (req, res, next) => {
    res.render('pages/linkpage',{ page: 'landing'} );
};


Happy Listing - 내 약력에서 이 코드가 작동하는 것을 볼 수 있습니다.

사이트의 링크에만 국한되지 않습니다. 사용자 정의 링크 목록 페이지에는 github의 포트폴리오, codepen의 컬렉션, 여기에 있는 가장 최근 기사 등 상상할 수 있는 모든 것이 포함될 수 있습니다.

이 코드를 확장하는 방법을 알려주십시오. 당신의 작품을 보고 싶습니다!
마우스 위로 이동하여 드롭다운 보이기, 드롭다운 숨기기
animateBackground-plugin

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage