发表更新07archive / tech20 分钟读完 (大约3059个字)

博客搭建

原理

用hexo+github page搭建.
hexo生成静态网页HTML,GitHub page展示HTML

github page

每个仓库都有一个pages服务，可用来展示项目，通过简单的设置项目的index.html，并以此做为入口供用户参观访问.
当然也可以用来跑博客. ^dca042

hexo

  1. hexo g：生成静态文件。将我们的数据和主题相结合生成静态文件的过程。
  2. hexo d：部署文件。部署主要是根据在 _config.yml 中配置的 git 仓库或者 coding 的地址，将 public 文件上传至 github 或者 coding 中。然后再根据上面的 github 提供的 pages 服务呈现出页面。
    source储存md
    themes储存主题
    md+主题 生成静态HTML
    hexo_repo文件下还有一个public的文件夹.执行hexo clean,会清除public,执行hexo d会生成public.还会生成.deploy_git文件夹，这个文件夹就是我们部署到github或者gitee上面的文件.
    只有public的文件才会上传到github.如果github page的结果不对,可能是hexo没有执行好 hexo deploy命令.
    而hexo server执行,依赖的不是public文件内容.可能会导致localhost展示结果与github page不同.
    source -> public -> .deploy_git
    执行hexo generate，根据source，更新public。
    执行hexo deploy，根据public，更新.deploy_git。
    1
    2
    hexo clean
    hexo g -d
    是最优解
    详解Hexo搭建博客的底层原理

    搭建reference:

    ubuntu 安装hexo
    已经放弃,转windows hexo
    由于是在git bash里面操作,没区别…可以直接参考ubuntu系统下的安装

    域名绑定:

    https://blog.csdn.net/weixin_45961774/article/details/108402406
    cpolar + PHP study
    本地配置网站,再内网穿透到公网

不需要
我有ipv4

icarus修改

live2d

使用的是张书樵的live2d-widget
live2d模型添加
live2d模型库,超多色色
依赖cdn服务,直接从别人的服务器上拉取的live2d.所以hexo库里面并没有原生的live2d文件
好像要自己部署cdn服务,再调用api添加新的live2d模型
有点难度,暂时放弃,以后有机会接触到cdn,本地api部署再说

阅读更多
发表更新07archive / tech13 分钟读完 (大约1995个字)

前端

前段语言串讲

  1. HT

ML
骨架

  1. CSS
    表现
    1. JavaScript
      行为
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      26
      27
      28
      29
      30
      31
      32
      33
      34
      35
      36
      37
      38
      39
      40
      41
      42
      43
      44
      45
      46
      47
      48
      49
      50
      51
      52
      53
      54
      55
      56
      57
      58
      59
      60
      61
      62
      63
      64
      65
      66
      67
      68
      69
      70
      71
      72
      73
      74
      75
      76
      77
      78
      79
      80
      81
      82
      83
      84
      85
      86
      87
      88
      89
      90
      91
      92
      93
      94
      95
      96
      97
      98
      99
      100
      101
      102
      103
      104
      105
      106
      107
      108
      109
      110
      111
      112
      113
      114
      115
      116
      117
      118
      119
      120
      121
      122
      123
      124
      125
      126
      127
      128
      129
      130
      131
      132
      133
      134
      135
      136
      137
      138
      139
      140
      141
      142
      143
      144
      145
      146
      147
      148
      149
      150
      151
      152
      153
      154
      155
      156
      157
      158
      159
      160
      161
      162
      <!DOCTYPE html>
      <html lang="en">
      <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>My first web</title>
      </head>
      <body>
          my article
          <hr>
          <!-- 标题标签 -->
          <h1>head 1</h1>
          <h2>head 2</h2>
          <!-- 换行标签 -->
          this is (强制换行) <br> body <br>
          <!-- crtl + / 注释快捷键 -->
          分割线
          <hr>
          test
          <p>段落标签p1</p>
          <p>段落标签p2</p>
          <!-- 段落之间会有一个段落间距的空白 -->
      <b>加粗</b> <strong>强调加粗</strong>
      <u>下划线</u> <ins>强调下划线</ins>
      <i>斜线</i> <em>强调斜线</em>
      <s>删除线</s> <del>强调删除线</del>
      <hr>
      <h1>image tags</h1>
      <!-- width 与 height 会自适应 -->
      <img src="https://p.sda1.dev/12/bab6341cd5c384fbf70077b146d29da9/image.png" alt="load failed" title="it's a note and it appears when you put the cursor on the img" width="1920" height="800">
      <h1>audio tags</h1>
      <audio src="C:\Users\28763\Videos\Captures\这是27岁的老将枪法？绝境美队一滴血极限四杀1v4！_哔哩哔哩bilibili_精彩集锦 - Google Chrome 2023-03-19 00-11-16.mp4" controls >  </audio>
      <!-- autoplay 自动播放 loop 循环播放  仅仅支持MP3.Wav.Ogg-->
      <h1>video tags</h1>
      <video src="C:\Users\28763\Videos\Captures\这是27岁的老将枪法？绝境美队一滴血极限四杀1v4！_哔哩哔哩bilibili_精彩集锦 - Google Chrome 2023-03-19 00-11-16.mp4" controls autoplay muted></video>
      <!-- autoplay 自动播放(在chrome中要配合muted) loop 循环播放 MP4,WebM,Ogg-->
      <br>
      <h1>超链接</h1>
      <!-- a anchor -->
      <b><a href="https://www.bilibili.com" target="_blank">霹雳霹雳</a> </b>
      <br>
      <a href="./balnk.html" target="_self">跳转到blank.html</a>
      <br>
      <a href="#">空链接</a>
      <h1>列表</h1>
      <h2>有序</h2>
      <ol>
          <li>有序1</li>
          <li>有序2</li>
      </ol>
      <h2>无序</h2>
      <ul>
          <li>无序1</li>
          <li>无序2</li>
      </ul>
      <h2>自定义列表 definition list</h2>
      <dl>
          <dt>主题</dt>
          <dd>part1</dd>
          <dd>part2</dd>
      </dl>
      <h1>表格标签</h1>
      <table border="1">
          <caption>test</caption>
          <tr>
              <th>x\y</td>
              <td>y=1</td>
              <td>y=2</td>
          </tr>
          <tr>
              <td>x=1</td>
              <td>1,1</td>
              <td>1,2</td>
          </tr>
          <tr>
              <td>x=2</td>
              <td>2,1</td>
              <td>2,2</td>
          </tr>
      </table>
      <table border="1">
          <caption>test</caption>
          <thead>
              <td>x\y</td>
              <td>y=1</td>
              <td>y=2</td>
          </thead>
          <tbody>
          <tr>
              <td>x=1</td>
              <td>1,1</td>
              <td>1,2</td>
          </tr>
          <tr>
              <td>x=2</td>
              <td>2,1</td>
              <td>2,2</td>
          </tr>
      </tbody>
      <tfoot>
          <tr>
          <td>last line</td>
          <td>last line</td>
          <td>last line</td>
          </tr>
      </tfoot>
      </table>
      <br>
      <h1>input </h1>
      <h2>常规</h2>
      <p><input placeholder="请输入"> </p>
      <p><input type="text"> </p>
      <p><input type="date" min="2023-1-1"> </p>
      <p><textarea name="hello" id="world" cols="30" rows="10" >hello world </textarea> </p>
      <h2>多选</h2>
      <label ><input type="checkbox">option1</label>
      <label ><input type="checkbox">option2</label>
      <h2>单选</h2>
      <!-- 是通过name相同实现的 -->
       <input type="radio" name="sport">option1
       <input type="radio" name="sport">option2
       <!-- 无提示选择 -->
       <p>
          <select name="" id="">
              <option value="">op1</option>
              <option value="">op2</option>
          </select>
      </p>
      <p>
          <!-- 有提示选择 -->
          <input list="countries">
          <datalist> id="countries"
              <option value="">UK</option>
              <option value="">USA</option>
              <option value="">CN</option>
          </datalist>
      </p>
      <h1>引用</h1>
      <!-- 有 block ，cite ， q ，code-->
      <!-- block 长引用 -->
      <!-- cite 章节 作品名称 -->
      <!-- q 具体的话 会有引号-->
      <!-- code 代码引用 -->
      <blockquote cite="https://www.huxley.net/bnw/four.html">    
          <p>
              Words can be like X-rays, if you use them properly—they’ll go through anything. You read and you’re pierced.
              <p>
                  <q>
                      test
                  </q>
              </p>
              <p>
                  <code lang="C">
                      i=10；
                      i=i++;
                  </code>
              </p>
          </p>
          <footer>—Aldous Huxley, <cite>Brave New World</cite></footer>
      </blockquote>
      </body>
      </html>s

      前端入门 - 基础语言篇

      HTML

      hyper text markup language hyper text 指的是图片标题链接表格 markup language指的是标记语言
      语义化的html语言
  • html中的元素，属性以及属性值都有某些含义

    CSS

    cascading style sheets 层叠样式

    引入方式

  1. 嵌入式 写在head标签的style标签中
  2. 外链式 写在单独的css中，用 link标签引入
  3. 内联式 经常配合div使用，直接在标签里面写
    同时存在内联与外联的情况下，还是能够同时生效。谁在后面，谁决定结果

    选择器

    渲染规则


    种类

  • 标签选择器/类型选择器 
    1
    2
    3
    4
    5
    6
    7
     p{
                color: red;
                font-size: 30px;
                background-color: aqua;
                width: 100px;
                height: 300px;
            }
  • id选择器
    1
    2
    3
    4
    5
    6
    7
    8
    #first {
                color: black;
            }
    <body>
        <p id="first">
            test
        </p>
    </body>
  • 类选择器(class)
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <style>
        .done {
                text-decoration: line-through;
            }
    </style>
    <body>
    <ul>
            <li class="done">task1</li>
            <li class="done">task2</li>
        </ul>
    </body>
  • 属性选择器
    1
    2
    3
    4
    5
    6
    7
    8
    <style>
      a[href$=".jpg"]{
                color: blue;
            }
    </style>
    <body>
     <a href="a.jpg">this is a jpg</a>
    </body>
  • 状态伪类
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    /* 对于a不同的状态进行选择 */
    a:link{
                color: blue;
            }
            a:visited{
                color: cornflowerblue;
            }
            a:hover{
                color: bisque;
            }
            a:active{
                color: orange;
            }
  • 结构伪类
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
            /* 结构伪类 */
            li{
                border-bottom: 1px solid;
            }
            li:first-child{
                color: antiquewhite;
            }
            li:last-child{
                padding: 0.5em;
                border-bottom: none;
            }
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
  • 组合选择器
    image.png
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<article>
  <h1>拉森火山国家公园</h1>
  <p>拉森火山国家公园是位于...</p>
  <section>
    <h2>气候</h2>
    <p>因为拉森火山国家公园...</p>
    <p>高于这个高度，气候非常寒冷...</p>
  </section>
</article>
<style>
/*article 中的所有子p*/
  article p {
    color: black;
  }
/*article直接的p标签*/
  article > p {
    color: blue;
  }
/*h2紧跟的p标签*/
  h2 + p {
    color: red; 
  }
</style>
  • 选择器组
    1
    2
    3
    4
     /* 选择器组 */
            h1 , h2{
                font: 100;
            }

    特异度

  • 计算规则
    选择器生效的情况是看选择器的特异度(specificity),特异度高决定css样式
    (A,B,C)
    A:ID选择器 B:类选择器、属性选择器和伪类 C:类型选择器和伪元素
    优先级的计算，从A级开始到C级结束，如果到C级是两个选择器的优先级还是相等的那么有限选择靠后的选择器
选择器 优先级 (A, B, C)
.class.class (0, 2, 0)
.class (0, 1, 0)
阅读更多
关注我

标签

#linux2
anki1
bazel1
cmake1
code4
dn111
docker4
firewall1
games4
hexo1
icarus1
istore1
linux7
minio1
openwrt2
rss1
rsshub1
scoop1
ssh3
tutorial1
ubuntu1
vim1
vpn1
windows1
wireguard1
前端2
图形学4
服务器1
编译2
计网10
软路由3

分类

归档

×