Pug, CSS를 이용한 심플한 뷰 구현

우선 원하는 형태의 레이아웃을 결정하고 그 형태를 따라 Pug 파일을 작성해줍니다.

현재 블로그에서 빨간 박스가 표시된 부분은 페이지가 바뀌어도 변하지 않습니다.

따라서 Pug에서 지원하는 block-extends를 이용해 top-layout->layout->일반 페이지 형식으로 UI를 구성합니다.

top-layout.pug

doctype html
html
  head
      title Cloudlesslakitu의 블로그
  body
      .Logo
        a(href = '/')
          h1 This is logo
    block content

layout.pug

extends top-layout

block content
  .category-navbar
    ul
      each category in categories
        li.category-navbar-list
          a(href='/category/' + category.url)= category.name

  block main

category.pug

extends layout

block main
  .Body
    div
      h1.BodyTitle= selectedCategory
      ul
        each post in posts
          li
            a(href=`/post/${post.id}`)= post.title

이제 res.render를 통해 필요한 데이터를 브라우저로 넘겨줘야합니다.

우선 layout.pug에서 항상 categories를 요구하므로 middleware 폴더에 navigationbar.js를 생성하고 아래 코드를 입력합니다.

middleware/navigationbar.js

module.exports = function(req, res, next){
  req.database.query("SELECT * FROM category;", (err, categories) => {
    if (err) throw err;
    req.categories = categories;
    next();
  })
}

그 후 app.js에서 이 미들웨어를 사용해줍니다. app.js(sql middleware 아래)

// get categories
app.use(require('./middleware/navigationbar'));

이 이후로는 req.categories를 통해 카테고리 전체 목록에 접근이 가능합니다. 그리고 index.js를 아래와 같이 바꿔주고

index.js

var express = require('express');
var router = express.Router();

/* GET home page. */
router.get('/category/:name', function(req, res, next) {
  let category = req.params.name;

  req.database.query(`SELECT * FROM post join category on post.category=category.name WHERE url = '${category}'`, (err, rows) => {
    if(err) throw err;

    req.database.query(`SELECT * FROM category WHERE url = '${category}';`, (err, cat) => {
      if(err) throw err;
      console.log(cat[0])

      res.render('category', {
        session: req.session,
        posts: rows,
        selectedCategory: cat[0].name,
        categories: req.categories
      })
    })
  })
});

module.exports = router;

localhost:3000/category/<카테고리 이름>으로 접속하면 아래와 같은 창이 뜹니다.

이제 원하는 형태로 보여주기 위해서 css를 만들어줘야 합니다.

top-layout head에 링크를 걸어주고 아래 css를 적용시키면 됩니다. 프론트엔드 프레임워크 없이 하려니깐 엄청 더러운데 최대한 빨리 적용시킬 예정입니다...

top-layout.pug->head 태그 내부에

link(rel='stylesheet', href='/stylesheets/style.css')

public/stylesheets/style.css

body {
  font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
  background: lightgray;
  margin: 0;
}

a {
  color: #000000;
  text-decoration: solid;
}

a:hover {
  text-decoration: underline;
}

li {
  list-style-type: none;
}

.Top {
  background: black;

  height: 60px;
}

#Logo img {
  float: left;

  margin-left: 20px;

  height: 100%;
}

#Logo h1 {
  float: left;

  margin-left: 20px;

  margin-bottom: 0;

  color: white;
}

.Login {
  float: right;

  padding-top: 18px;

  padding-right: 20px;
}

.Login a {
  font-size: 16px;

  color: white;
}

.Content {
  float: right;

  max-width: 1600px;

  width: 100%;

  padding: 0;
}

.Body {
  float: left;

  max-width: 1200px;

  min-width: 250px;

  width: 70%;

  background: white;

  box-sizing: border-box;

  padding:0px 20px;

  margin-top: 25px;
}

.category-navbar {
  float: left;

  margin-left: 25px;

  margin-top: 25px;

  line-height: 2em;

  width: 25%;

  min-height: 200px;

  padding: 10px;

  border: 1px lightgray solid;

  background: white;

  font-size: 16px;

  box-sizing: border-box;
}

#write-button {
  position: absolute;

  background-color: teal;

  padding: 2px;

  right: 20px;

  bottom: 20px;
}

#write-button>a {
  color: white;
}

.category-list {
  color: gray;

  border-bottom: 1px solid lightgray;

  font-size: 24px;
}

.category-list-text {
  font-size: 18px;

  margin: 0;
}

.input-text {
  width: 90%;
}

#category-settings {
  display: inline-block;

  border: none;

  background: none;
}

#category-settings:hover {
  cursor: pointer;
}

#category-settings:focus {
  border: none;
}

#category-settings-icon {
  width: 16px;

  height: 16px;
}.posts-list {
  border-top: 1px solid lightgray;

  padding: 10px;
}

.posts-list h3 {
  display: inline;
}

.posts-list small {
  float: right;
}

.posts-list p {
  color: #999999;
}.BodyDateTime {
  display: block;

  text-align: right;

  color: gray;

  padding-bottom: 10px;

  border-bottom: 1px solid lightgray;
}

.BodyTitle {
  display: block;

  font-size: 2em;

  margin-block-start: 0.67em;

  margin-block-end: 0.67em;

  margin-inline-start: 0px;

  margin-inline-end: 0px;

  font-weight: bold;
}

.BodyText {
  white-space: pre-wrap;
}

.delete-container {
  padding-left: 20px;
}

.delete-text {
  color: lightgray;
}

.deletenedit {
  text-align: right;

  margin: 10px;
}

.deletenedit > form {
  display: inline;
}

사실 아직 안쓰이는 코드가 많은데 나중에 쓰기 귀찮으므로 그냥 현재 적용되고 있는 css 다 올렸습니다..그러면 아래와 같이 스타일이 적용된 있는 블로그가 나옵니다.

다음에는 session을 이용한 로그인 기능을 만들겁니다.