[블로그 6] 19~끝 | 본문 내용을 ... read more로 줄여 새창으로 연결

블로그 만들기를 하고 있다. 

 

 

19. url에서 posts/day-1 눌렀을 때

새 페이지에 day-1 포스트 내용만 뜨게 하기 

 

아래와 같이 블로그 글이 있다. 

 

 

이 중에서 Day 1 글을 새 창에서 열어 보게 해보자. 

 

 

 

19-1 일단 post.ejs 파일을 만든다. 

 

header와 footer는 layouts을 사용하고

title 과 content로 나눠 제목과 본문을 렌더링한다. 

 

 

19-2 app.js 에서 if문 새롭게 채운다. 

만약 포스트 타이틀과 주소창 마지막 키워드가 일치 했을 때 

콘솔에 match 가 뜨게 하는 게 아니라 

post.ejs 파일이 render 되도록 한다.

 

56번 줄이 trigger 될 때 53번에 access 하게 된다. 

그 때 post가 true인지 false 인지 확인하는데

current post가 if문 안으로 들어가게된다.

그래서 post.title을 쓸 수 있다. 

 

 

 

아래와 같이 day 1, day 2를 입력하였고 

 

 

 

 

localhost:3000/posts/day-2 로 주소창에 쳤더니

Day 2 새 페이지가 열렸다.

 

 

 

 

20. 메인 화면에 내용이 다 나오는게 아니라 100글자만 나오고 나머지는 ... 표기하기 

 

구글에서 truncate string js를 검색하면

.substring(0, 100) 시작 포인트, 엔드 포인트를 적으라는 것을 찾을 수 있다. 

content 라인에 substring(0, 100) + " ..." 추가한다. 

<%- include('partials/header')%>

 

<h1>HOME</h1>

<p><%= startingContent %></p>

<% posts.forEach(function(post) { %>

<h1><%= post.title%></h1>

<p><%= post.content.substring(0, 100) + " ..."%></p>

<% }); %>

 

<%- include( 'partials/footer')%>

 

 

그러면 본문 내용이 100만 나오고 뒤는 ...으로 표시된다. 

 

 

21.  각 포스트에 read more 링크 연결하기 

 

home.ejs에서 <a>태그를 집어 넣어준다. 

url 주소에 타이틀이 들어가게 해준다.

home.ejs

 

 

read more를 누르면 해당 글 페이지로 이동한다.