Chen-Chih Blog

Tech Note

0%

Posted on Edited on In

Emmet

我想分享一些最常用到的Emmet和VScode相關指令。如果會Emmet我們可以提高我們在編寫HTML的時間。我們不需要打麼長的與法。

1. html初始结構

指令:！ =>tab or enter

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
</body>
</html>

2. CSS連結

指令: link:css =>tab or enter
在裡面加

1
<link rel="stylesheet" href="style.css">

3.隱式TAG , id（#）,class（.）

  • div tag:.name

    指令: .test

    1
    <div class="test"></div>

  • list tag:

    指令: ul>.test$*3

    1
    2
    3
    4
    5
    <ul>
        <li class="test1"></li>
        <li class="test2"></li>
        <li class="test3"></li>
    </ul>

  • id指令：#

    Ｓyntax:div.idname

    指令:div#test

    1
    <div id="test"></div>

  • class指令.

    Ｓyntax: div.classname

    指令:div.test

    1
    <div class="test"></div>

  • em 和 span :

    Ｓyntax:tag>.class

    指令:em>.class

    1
    <em><span class></span></em>

  • 表格 table

    指令:table>.row>.col 

    1
    2
    3
    4
    5
    <table>
        <tr class="row">
            <td class="col"></td>
        </tr>
    </table>

  • option

    Ｓyntax: select>classname

    指令:select>.test$*5 

    1
    2
    3
    4
    5
    6
    7
    <select name="" id="">
        <option class="test1"></option>
        <option class="test2"></option>
        <option class="test3"></option>
        <option class="test4"></option>
        <option class="test5"></option>
    </select>
Read more »

Posted on Edited on In

＃ 如何使用 Hexo + GitHub Pages 架設個人網誌

什麼是 Hexo？

  • HEXO 是一套 Static Site Generators(SSG)網誌框架工具，只要把建立和編寫 markdown就可以變成轉成靜態網頁。一般都用在架自己的部捼洛客，不用花很多時間設計排版等等。目前最有名的 SSG 有包括: Hexo(node.js 語言)，HUGO(go 語言)，Jekyll(ruby 語言) 等等。
  • 其實就是一個基於 Node.js 開發的網誌框架。具有下列幾項特點：
    • NODE.JS
    • 能夠支援 Markdown 語法解析文章，並透過主題渲染靜態檔案
    • 具有豐富的外掛套件
    • 支援一鍵部署到 GitHub Pages 或 Heroku 等支援靜態網頁的空間

前置作業

安裝需要工具

在開始安裝 Hexo 之前，必須先在電腦安裝下列工具:

  • Node.js

    npm 來安裝所需的套件。你可以把 npm 當作是 linux 的 apt 或 yum。他主要是幫我們安裝 JS 等套件。
  • Linux (Ubuntu, Debian)：

    sudo apt-get install -y nodejs

  • git

    是專們做版本控制的工具。外面有多版本控制，我選用 github，因為他比較多人用，還有他有 GitHub Page 可以幫我們架設網站，又是免費。window 可以用這個 git-bash 來下載git-for-window
  • Linux (Ubuntu, Debian)：

    $ sudo apt-get install git-core

Read more »

Posted on Edited on In ,

Flex Layout 排版 (CSS 格線佈局)

CSS排版有很多不同的排版工具，今天我想介紹FlexBox，也可以叫做flexible。Flexbox 是屬於one dimention ，也就去說你只有一個軸，你不是選擇用row or colomn。我會介紹以下的內容：

  • 父元素/容器属性：
    • flex-direction:
      • row (default)
      • row-reverse
      • column
      • column-reverse
    • flex container(display):
      • flex
      • inline-flex
    • flex-wrap:
      • wrap
      • nowrap (default)
    • justify-content
      • flex-start
      • flex-end
      • center
      • space-around
      • space-between
      • space-evenly
    • align-item
      • stretch
      • lex-start
      • flex-end
      • center
    • Align-Content
      • flex-start
      • flex-end
      • stretch
      • space-around
      • space-between
  • Flex 內元件屬性/子元素：
    • flex-item:
      • flex-grow
      • flex-shrink
      • flex-basis
      • flex (縮寫)
    • order
    • align-self

part 1 基本FLEX相關知識

FlexBox 就是flexible Box，顧名思義就是彈性的盒子。早期我們在排版都是用float，但用起來沒有FlexBox好用。我們有幾個CSS layout，如float,display,Positioning, Flexbox, and grid等等。

Container and items 的差別

  • Container: 就是外容器，你也可以想成它是盒子的外面，或是我喜歡稱他為Parent容器。
  • Items: 就是內容器，你也可以想成它是盒子的裡面，或是我喜歡稱他為Child容器。
    我們來看一下圖你們更了解，這兩個差別:外面綠色就是container(外容器)，裡面橘色就是items()內容器)

這非常重要，這樣你才知道要用那一個容器的元屬性，然後也很好去記，卻步用去蓓背他。

AXIS軸

Read more »

Posted on Edited on In

今天我想在這文章中介紹最常用到的 git 指令。我會介紹我最常用到的指令有：

  • git init
  • git add .
  • git commit -m “message”
  • git push
    以上是我最常用到的。我還想介紹一些關於 git remote 等指令。

基本指令

1. git init 初始化 git

Step1: 建立一個資料夾如：$mkdir test

Step2: 進去目錄 cd test

Step3: 執行 git init就會初始化 git。如果你下 ls-al就可以看所有資料，會有一個 .git 隱藏檔

2. git add 把檔案進索引 index

Step1: 建立檔案 touch hello.py
Step2: 編輯檔案

  • (linux) vim hello.py
  • (window) notepad hello.py
    就加 print("hello world")
    Step3: 把檔案加進索引 git add .
    Step4: 看 git status git status
    他會顯示 stage
Read more »

Posted on Edited on In ,

GRID Layout 排版 (CSS 格線佈局)

  • 現在我們在做網頁排版，最流行都是用 GRID and Flex。想要分享GRID相關設定和用法，在早期都是用position 或float等等來做排版。
  • GRID 是二維CSS格線排版(row and colulmn)，反之Flex只能選用一維(row or colulmn)。

以下是所有GRID Properties ，我整理好分類，這樣才懂或記。如果有學會或用過GRID，會更好理解。

  • Grid Container(parent Properties)
    • 1.display (enable grid propertis 啟動GRID)
    • 2.grid-template
      • grid-template-column
      • grid-template-row
      • grid-template
      • grid-template-areas
    • 3.grid-auto-flow
      • grid-auto-column
      • grid-auto-rows
      • grid-auto-flow

    • 4.gap
      • column-gap
      • row-gap
      • gap
    • 5.Alignment & Spacing
      • within grid cell
        • justify-items
        • align-items
        • place-items
      • within grid container
        • justify-content
        • align-content
        • place-content
  • Grid item(Child Properties)
    • Grid-column-start
    • Grid-column-end
    • Grid-row-start
    • Grid-row-end
    • Grid-column (shorthand)
    • Grid-row (shorthand)
  • Alignment item within Cell
    • Justify-self: alignment along the row axis
    • Align-self: alignment along the column axis
    • Place-self: shorthand for

Part 1: GRID 架構 Structure & Terminology

Container 和 Items 差別：

Grid Container: 盒子的最外層Parent
Grid items: 盒子內層Children
其實跟Flex一樣，都需要有container and items

container and items of GRID

Read more »

Posted on Edited on

Welcome to Hexo! This is your very first post. Check documentation for more info. If you get any problems when using Hexo, you can find the answer in troubleshooting or you can ask me on GitHub.

Quick Start

Create a new post

1
$ hexo new "My New Post"

More info: Writing

Run server

1
$ hexo server

More info: Server

Generate static files

1
$ hexo generate
Read more »

Posted on Edited on

Welcome to Hexo! This is your very first post. Check documentation for more info. If you get any problems when using Hexo, you can find the answer in troubleshooting or you can ask me on GitHub.

Quick Start

Create a new post

1
$ hexo new "My New Post"

More info: Writing

Run server

1
$ hexo server

More info: Server

Generate static files

1
$ hexo generate
Read more »