Chen-Chih Blog

Tech Note

0%

Posted on Edited on In

今天我想寫關於 Markdown相關指令。想信大家都會常用MD或是markdown。

字體效果

斜體字 ==> *文字*
粗體字 ==> **文字**
斜粗體 ==> ***文字***
刪除線strikethrough ==> ~~文字~~
斜體2 ==> _文字_
斜粗2 ==> __文字__
正常^上標^ ==> 文字^string1^
正常下標 ==> 文字~string1~
++底線++ ==> ++文字++
==螢光標記== ==> ==文字==

color顏色

  • color ==> <font color="red">text </font>
  • Highlighted text => <mark style="background-color: #FFFF00">Highlighted text</mark>

    change mark or span/div

Font Size 大小

  • HTML ==> <font size=5> **HTML**</font>

Horizontal Rules

1
2
3
---
***
___
Read more »

Posted on Edited on In ,

前言

今天天想分享如何在terminal或終端機變成更有效率或是更美化。我們需要用到zsh 和 ohmysh。

本篇文章會安裝以下套件：

  • ubuntu 安裝和設定
    • 基本套件: zsh git wget curl
    • ohymysh套件
    • shell 設定
    • Oh My Zsh 安裝，主題設定
    • 安裝Powerlevel10k 主題，不然會怪怪

更新 ubuntu 套件

$ sudo apt-get update

安裝 zsh

檢查我們目前支援的shells

目前支援的shells
$cat /etc/shells

zsh-after

Read more »

Posted on Edited on In

在這篇教學，我想要分享HEXO簡易版本。我在之前有寫ㄧ篇是關於Hexo完整篇，文章太長。如果你不想看那一篇可以看這一篇。在這一篇，我只會分享一些基本指令。

安裝 git

可以到官網下載git:，或是你是Linux/MAC，可以輸入命令方式來安裝如下：

  • Linux (Ubuntu, Debian)：

    $ sudo apt-get install git-core

  • Linux (Fedora, Red Hat, CentOS)

    sudo yum install git-core

  • mac 安裝:

    brew install git

安裝 Hexo

先安裝 node.js

可以到官網下載Node.js，或是你是Linux/MAC，可以輸入命令方式來安裝如下：

  • MAC:

    $ brew update
    $ brew install node

  • Linux(ubuntu)

    $ sudo apt-get install -y nodejs

再安裝 Hexo

$ npm install -g hexo-cli # -g 全域安裝

Read more »

Posted on Edited on In

大家有用過自動安裝window 系統嗎？正常我們都用 ISO光碟片，USB和網路方法安裝OS。可這些方法我們可能要一直按下一步等等。今天我想分享如何用自動化安裝，不需要寫程式，只要把unattend.xml放進我們window ISO 或是USB的根目錄就可以。
這個自動化工具叫做unattend 如果有興趣可以在網路找相關內容。
我會教大家如何建立unattend.xml檔案，他可以幫我們自動建立帳號，切磁區等等。在這分享我沒有教如何分切磁區。

為什麼要做這個？
如果你長期在安裝windowOS我建議可以學會這個，非長方便。

Part 1 : 建立autounattend.xml 檔案。

1. 去windowsafg 網站

2. window 相關設定

用預設的設定即可。You can use the default setting, or use the same setting I set.

  • 我只設定，時間，鍵盤語言，和帳號
  • I only changed time tone, keyboard to US, and account to administrator
    account admin

3.下載autounattend.xml檔案

Download autounattend.xml file. 下載autounattend.xml檔案
downloadfile

Read more »

Posted on Edited on In

遠端桌面連線

我想分享如何設定無密碼，也可以做遠端桌面連線。正常都是我們電腦帳號如果設定無密碼但又想做遠端，需要作揖些設定。

Step1: 請在鍵盤輸入window + r

Step2: 請輸入gpedit.msc

Step3: disable Limit account use of blank password, to enable blank password

blank password

網路磁碟分享

我想分享如何設定無密碼，也可以做網路磁碟分享，這樣可以共享資料夾。

Step1: 建立一個資料夾

Step2: 把資料夾設定權限

Read more »

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 »