DAY08 - Emmet与PUG简介

在那个用记事本写HTML的年代 (讲古时间)

大叔我在1996年五专入学念资管系，一年级就接触到网页设计
当时就是用Windows 95里面的记事本写html网页的(後来用UltraEdit)
刚开始写网页时，就觉得为什麽html的标签要有<>符号...

html的结构如下:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

每次打开记事本，上面的结构就的从头写一次...後来是把这种档案存一份当范本，每次要写网页，就复制一份新档，不过html的标签问题还是没有解决， 标签<>要按着shift+<> 害我好几次按到手抽筋...<0><0><0>

直到下学期，系上进了新的office校园版，里面有一个软件叫FrontPage97
这真是一个跨时代的发明!!!(当时小时候觉得)

Imgur
(上面的图是网路上抓的，当时已经有中文版了)

Imgur
当时跟我一样不喜欢写HTML标签的人应该不在少数

写网页就跟打Word一样，不用再打html标签!!!(手不会再按到抽筋了!!!)
所以当时一试就成老主顾，一路用到2003版
听说後来FrontPage变成国中电脑课里一个必学?的软件

Imgur
熟悉的编辑画面!!!

FrontPage虽然好用到炸天，但也是有不少缺点的，其中最大条的应该是写出来的网页
只能给IE开如果给网景(Netscape)开，画面出错的机率可能 >87%
不过当时已经是IE快要进入独霸的阶段，寄生在Windows 95底下的不公平竞争...
(Windows 98一出就再无悬念...)
讲古时间最後，提一下我最喜欢的FrontPage的一样功能

Imgur

如上图，FrontPage可以直接把网站的组织图给画出来，这功能即使到现在，我还是想要在写网页的时候有这个功能。
上面的讲古时间，纯属回忆，如果时序或内容有误的，请指正

2021-08-23补充:
暗黑破坏神2 重制版在 8/21~8/24 开放3天免预购公测
我也就暂时放下铁人赛，去玩这个当年我错过的游戏
玩游戏首先要去找攻略，就找到从2003活到现在的骨董级网站【易牙居】
Imgur

Imgur

Imgur
这网站看起来就像是FrontPage做的，检视原始码果然就是FrontPage写的 XDD
当年我记得我已经在玩金庸群侠传，我也有在做攻略网站
当时我也是用FrontPage，但自认美术天分不佳的我
也懂得表格用实线会比预设空心的美观 XDD

讲了那麽多，就是铺陈为了接下来要介绍的Emmet

Emmet

emmet

维基百科
Emmet（以前名为Zen Coding[1]）是一套面向文字编辑器的外挂程序，它允许通过内容辅助高速度的编写和编辑HTML、XML、XSL和其他结构化的代码格式。此专案2008年由Vadim Makeev发起[2]，并由Sergey Chikuyonok和其他Emmet使用者基於Zen Coding 2.0的概念继续积极开发。[3]这套工具已经被一些高阶的文字编辑器采纳，以及存在於Emmet团队开发或其他人独立实现的外挂程序中。不过，Emmet独立於任何文字编辑器，它的引擎可以直接处理文字，而无需与任何特定软件相关。

从记不住语法，到没有Emmet就无法写网页

我是去年要重新开始学网页，才从Amos大大的金鱼都能懂的网页设计入门 - 金鱼都能懂了你还怕学不会吗
看到Emmet这个玩意，不过当时并没有意识到这个工具的好用之处
还觉得...又要记一些语法...好讨厌...没办法我是金鱼脑里面脑容量低於平均值的那种... XDD
要到Amos大大讲到CSS的部分，才惊觉Emmet能帮我做什麽
主要是class 与 id 这两个部分，大叔的时代，最多只会在表单上用到id至於class 实在没什麽印象
现在的html里面充斥着大量的class，如果写网页还是照我古早之前的写法，应该写不到两天就放弃，转去学别的 XDD
Emmet有很进阶的写法，可以写巢状、变数、表格
但对菜鸡大叔我来说，html标签+class 或id的速写已经足够目前学习。
花了两个星期来熟悉用Emmet来写HTML，最後一试成主顾，在也离不开Emmet了!

补充: 当初学习Bootstrap，一看到标签里面，塞了一堆class
并不是很喜欢这种作法，即使当时已经很习惯用Emmet来写
但看了Amos大大的 金鱼都能懂的Bootstrap5网页框架开发入门
了解Bootstrap运作的方式後，就没那麽排斥了

PUG

Imgur
Pug是我在hahow购买的前端课程中，讲师在范例中所使用的网页模板!
pug最大的特色是用缩排来取代HTML的 <0></0>
这也是最吸引我的点，整篇文章看下来，应该就知道我有多讨厌写HTML的标签写法...
用缩排来控制程序区块，恰好跟我在用的Python一样
(当初会学Python也是因为其他语言也有类似的问题，大括号、分号...常常漏写又没编辑器帮忙补正)

Imgur
当时发现PUG这款屌炸天的神器

Pug程序码范例:

.container
    .row
        .col-md-6.col-lg-3
            .card 
                img(src='https://picsum.photos/900/600?random=1').card-img-top.img-fluid
                .card-body
                    h5.card-title Card Title
                    p.card-text Lorem ipsum dolor, sit amet consectetur adipisicing elit. Minima optio quidem reiciendis harum repudiandae quisquam illo, fuga deleniti debitis nihil! 
                    button.btn.btn-info Go somewhere!
        .col-md-6.col-lg-3
            .card 
                img(src='https://picsum.photos/900/600?random=2').card-img-top.img-fluid
                .card-body
                    h5.card-title Card Title
                    p.card-text Lorem ipsum dolor, sit amet consectetur adipisicing elit. Minima optio quidem reiciendis harum repudiandae quisquam illo, fuga deleniti debitis nihil! 
                    button.btn.btn-info Go somewhere!
        .col-md-6.col-lg-3
            .card 
                img(src='https://picsum.photos/900/600?random=3').card-img-top.img-fluid
                .card-body
                    h5.card-title Card Title
                    p.card-text Lorem ipsum dolor, sit amet consectetur adipisicing elit. Minima optio quidem reiciendis harum repudiandae quisquam illo, fuga deleniti debitis nihil! 
                    button.btn.btn-info Go somewhere!
        .col-md-6.col-lg-3
            .card 
                img(src='https://picsum.photos/900/600?random=4').card-img-top.img-fluid
                .card-body
                    h5.card-title Card Title
                    p.card-text Lorem ipsum dolor, sit amet consectetur adipisicing elit. Minima optio quidem reiciendis harum repudiandae quisquam illo, fuga deleniti debitis nihil! 
                    button.btn.btn-info Go somewhere!

画面:
Imgur
这边要介绍如何在 VS Code里使用Pug !
我在网路上爬文，想要在本机端使用Pug 的方法跟 在Codepen相比
真的差很多...最常看到解答:

  1. 使用 Gulp
  2. 使用 Vue Cli 建立一个专案
  3. 使用 Prepros

以上除了2&3日後，比较有机会用到外，Gulp不太符合我的使用习惯
这里就介绍我目前所使用的方法:

在VS Code里面安装下面的套件:
Sass/Less/Stylus/Pug/Jade/Typescript/Javascript Compile Hero Pro
连结里就有示范用法了，这边就不灌水填版面了 XDDD
文章最後说一下这个套件的优缺点:

优点:

  1. 可以同时live检视 pug 跟sass

缺点:

  1. 安装後，VS Code启动时会明显变慢...不用时最好关掉!!!
  2. 无法用专案的模式，如webpack或vue cli (应该是我不会用)

以上就是铁人赛第八天的内容 :)


<<:  Day 6 - 产生内文加密所需的 IV 值

>>:  Day20-Props

[火锅吃到饱-8] 鲜友火锅 Shian-Yeou Hot Pot - 台中太平店

鲜友的供餐方式很适合家庭聚餐。 太平店除了火锅之外，是可以将火锅更换成排餐的，选择排餐一样是可以享用...

Day 11：合并排序(mergesort)

合并排序(merge sort 或 mergesort)是另一种采用分治法的排序演算法。 它的步骤是...

第二十天：Gradle task graph

Gradle 的其中一个强大特点，就是它了解任务间的相依性，可以在核心建立出图或树。这对於开发者来说...

RDS Deadlock

有Transaction就有可能会发生Deadlock. 在RDS上发生的时候就可从LOG里看出发生...

[Golang]变数重声明与重名变数

一、整理变数重声明与重名变数的描述。 变数重声明，对已经声明过的变数，再次声明。 前提条件如下: 变...