Daphne 前端開發學習日記

這是Daphne分享自己前端的學習過程

發表於

Codepen 測試

我的電腦是 Windows 11 的版本，而我的電腦 ( Chrome、Firefox、Windows Edge ) 瀏覽器們的 DevTools 皆在 992px 斷點時乖乖從三排區塊文字變成兩排區塊文字，但是在斷點 767px 時發生問題，它會變成在 766px 才會從兩排區塊文字變成滿版的區塊文字 ，奇怪的是其他人在同一份資料 ( VScode、Codepen ) 操作的情況下是可以在 767px 的斷點時乖乖變成滿版區塊文字。

操作影片：
影片一

影片二

解決方法:

將斷點 767px 改成 767.99px 畫面即可在該斷點成功呈現想要的效果

參考文獻

成功後的畫面效果
影片二

解決方法:

將斷點 767px 改成 767.99px 畫面即可在該斷點成功呈現想要的效果

參考文獻

成功後的畫面效果

發表於

架設網站前的準備工作

Node.js官網

  1. 載入最新的node.js 和 npm
  2. 檢查 node.js 是否成功下載，那就是查詢下載的版本
  3. 輸入 $ node -v 只要版本數字是跟你下載官網上顯示的版本相同即是下載完成
  4. 輸入$ npm -v 看到版本數字及是下載完成

HEXO 網站架設第一步

HEXO官網

  1. 打開終端機輸入指令
  2. $ npm install hexo-cli -g
  3. 輸入 hexo init blog 載入部落格套件
  4. 終端機輸入指令進入 cd blog
  5. 可以開啟伺服器 hexo server 看看你的網頁是否架設成功

新增部落格新的文章

  1. 輸入 hexo new + 新貼文標題

  2. 撰寫內容

  3. 連接 Github new repository

  4. 更改 _config.yml 下方 URL 的現有資料，並新增以下組態:

    ## Set your site url here. For example, if you use GitHub Page, set url as 'https://username
github.io/project'
url: https://(username).github.io/(project)

  5. 在 GitHub Pages 上部署 Hexo
    部屬連結

  6. 安裝 hexo-deployer-git.

  7. 清空 _config.yml 下方 deploy 的現有資料，並新增以下組態:

    type: git
repo: https://github.com/<username>/<project>
# example, https://github.com/hexojs/hexojs.github.io
branch: gh-pages

  8. 將你的 github 名稱和 repository 檔名輸入上去

  9. hexo clean

  10. hexo deploy

發表於

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

More info: Generating

Deploy to remote sites

1
$ hexo deploy

More info: Deployment

0%