2022-01-04
flexbox的轴线
#
- 使用flex布局时，flex有两根轴线：主轴和交叉轴，主轴由flex-direction定义，另一根轴垂直于它。
主轴
#
- 主轴由flex-direction定义，有四个值：
- row
- row-reverse
- column
- column-reverse
- 当选择了row或者row-reverse，主轴将沿着水平方向延伸。
- 当选择了column或者column-reverse，主轴就会沿着上下方向延伸。
交叉轴
#
起始线和终止线
#
- 如果flex-direction是row，那么主轴的起始线是左边，终止线是右边。
flex容器
#
- 采用了flexbox的区域就叫做flex容器，通过将一个标签的display属性改为
flex或inline-flex来创建一个flex容器，这样容器内的直系子元素就会变成flex元素。所有的css属性都会有一个初始行为（假设元素未设置width、height、margin等属性）：
- 元素排列成一行（flex-direction属性的初始值为row）。
- 元素从主轴线的起始线开始。
- 元素不会在主轴方向不会被拉伸，但可能会缩小。
- 元素会被拉伸来填充交叉轴的大小。
- flex-basis的属性为auto。
- flex-wrap属性为nowrap。
flex-wrap实现多行flex容器
#
- 当项目太大而无法全部显示在一行中，添加
flex-wrap:wrap，项目就会换行显示。这样每一行都相当于是一个新的flex容器，在该行上发生的空间分布不会影响其他行。
- 当
flew-wrap设置为unwrap，所有的flex元素都不会换行，它们将缩小以适配容器。如果项目的子元素无法缩小，使用nowrap会导致溢出。
flex-flow
#
flex-direction和flex-wrap可以组合简写为属性flex-flow第一个值为flex-direction，第二个值为flex-wrap。如flex-flow: row wrap。
align-items
#
align-items设置元素在交叉轴方向上对齐，默认值为stretch。- 相应的值：
stretch 拉伸以贴到交叉轴的起始线和终止线。flex-start 贴着交叉轴的起始线。flex-end 贴着交叉轴的终止线。center 交叉轴方向上居中。baseline
图中flex-direction: row。
justify-content
#
justify-content属性用来使元素在主轴方向上对齐，默认值是flex-start。- 相应的值：
stretchflex-start 沿着主轴的起始线对齐。flex-end 沿着主轴的终止线对齐。center 主轴方向上居中space-around 使每个元素的左右空间相等，第一个和最后一个元素距离起始线和终止线的距离是其他元素间隔的1/2。space-between 使每个元素的左右空间相等，第一个和最后一个元素贴上起始线和终止线。
图中flex-direction: row。
flex元素
#
- flex容器里除了元素所占的空间以外的空间就是可用空间。
flex-basis
#
- flex-basis定义了该元素的空间大小，该属性的默认值是元素内容的尺寸（auto）。
flex-grow
#
flex-shrink
#
- 处理flex元素在主轴上收缩的问题。
- 如果容器中没有足够排列flex元素的空间，就可以设置flex-shrink属性为正整数来缩小它占用的空间到flex-shrink以下。
- 给flex-shrink属性更大的数值可以比赋值小数值的同级元素收缩程度更大。
flex属性的简写
#
flex-grow、flex-shrink、flex-basis可以简写为flex，顺序也是flex-grow、flex-shrink、flex-basis。flex有预定义的简写形式：
flex:initial 相当于flex: 0 1 auto ，flex-grow的值为0，所以flex元素不会超过他们的flex-basis尺寸，flex-shrink为1，可以缩小flex元素来防止他们溢出。flex: auto 相当于flex: 1 1 auto，和上面的flex: initial基本相同，但是flex元素在需要的时候既可以拉伸也可以伸缩。flex: none 相当于flex: 0 0 auto，元素既不能拉伸也不能收缩。flex: 1或flex: 2 相当于flex: 1 1 0。
align-self
#
align-self设置元素在交叉轴方向上的排列方式，会覆盖已有的align-items元素。- 值：
auto设置为父元素的align-items的值stretch 拉伸贴上交叉轴的起始线和终止线。center 交叉轴方向上居中。flex-start 贴上交叉轴起始线。flex-end 贴上交叉轴终止线。
参考链接：
flex 布局的基本概念 - CSS（层叠样式表） | MDN (mozilla.org)
参考链接：
Flex 布局教程：语法篇 - 阮一峰的网络日志 (ruanyifeng.com)
2022-01-03
-
hugo使用go的"html/template"和"text/template"库作为模板的基础。
-
go模板是添加了变量和函数的html文件。他们都被包裹在{{}}中。
-
一个预定义的变量可以是已存在在当前的作用域中或者是一个自定义的变量。
-
多个函数的参数可以使用空格分开，类似与{{ add 1 2 }}（add函数接收1和2这两个参数）。
-
方法和函数可以通过.来访问访问。如获取在文章front matter中定义的bar{{ .Params.bar }}
-
圆括号可以用来将items组合在一起{{ if or (isset .Params "alt") (isset .Params "caption") }} Caption {{ end }}
-
原始字符可以包含换行。
变量
#
- 在hugo中，每个模板都有一个Page对象，.Title是Page的一个元素之一。当Page是模板的默认作用域时，title可以通过
.直接来带哦用{{.Title }}。
- 自定义变量需要有
$前缀。
- 变量可以存储在自定义变量中并在稍后被引用。
{{ $address := "123 Main St."}}
{{ $address }}
{{ $var := "Hugo Page" }}
{{ if .IsHome }}
{{ $var = "Hogo Home" }}
{{ end }}
Var is {{ $var }}
函数
#
- go模板只提供了一些基本的函数，但也提供了扩展原始集的机制。
- 调用函数使用他们的名字跟上需要的参数，参数需要用空格隔开。
{{ add 1 2 }}
<!--数字求和，输出3-->
{{ lt 1 2 }}
<!--比较大小，输出true-->
includes
#
- 一个模板中包含另一个模板。
- hugo中的模板位置都是在
layouts/目录开始。
partial函数用来包含部分模板
<!--包含layouts/partials/header.html-->
{{ partial "header.html" . }}
template函数用来在老版本的hugo中包含模板和用来调用内部模板。
{{ template "_indernal/opengraph.html" . }}
logic
#
{{ range $array }}
<!--.代表$aray的一个元素-->
{{ . }}
{{ end }}
<!--将数组的元素的值赋值给变量-->
{{ range $elem_val := $array }}
{{ $elem_val }}
{{ end }}
<!--将数组的元素的下标和值都复制给变量-->
{{ range $elem_index, $elem_val := $array }}
{{ $elem_index }} -- {{ $elem_val }}
{{ end }}
2021-12-22
snmpd.conf
#
#建立一个从community到security name的映射，source可以是default、一个IP、一个主机名、或者一个子网（如10.10.10.0/24），source以!开头表示拒绝此source的请求。
com2sec -[-Cn CONTEXT] SECNAME SOURCE COMMUNITY
#建立从security name到group的一个映射，多个group指令可以指定相同的group名，
group GROUP {v1|v2c|usm|tsm|ksm} SECNAME
#定义一个view name，type可以是included或者excluded。
view VNAME TYPE OID [MASK]
#建立一个从group到三个view之一的映射，
#LEVEL是noauth、auth或priv之一
#PREFX指定CONTEXT如何被请求匹配，可以是exact、prefix
#READ和WRITE指定用于GET、SET和TRAP/INFORM 请求的view。
access GROUP CONTEXT {any|v1|v2c|usm|tsm|ksm} LEVEL PREFX READ WRITE NOTIFY
连接命令
#-v版本 -c community
snmpwalk -c nsag -v2c 10.0.1.81 1.3.6.1.2.1.1.1.0
2021-12-11
- 每个vue应用都是通过
createApp函数创建一个新的应用实例开始的。
模板语法和指令
#
- Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层组件实例的数据。
插值{{ msg }}
#
{{msg}}会被替代为对应组件实例中 msg 的值。当绑定的组件实例上 msg 发生了改变，插值处的内容都会更新。
- 通过使用 v-once 指令，也能执行一次性地插值，当数据改变时，插值处的内容不会更新。
<span v-once>{{ msg }}</span>
v-html
#
- 双大括号会将数据解释为普通文本，为了输出真正的 HTML，需要使用
v-html 指令。
<div id="example1">
<p>{{ rawHtml }}</p>
<span v-html="rawHtml"></span>
</div>
<script>
const RenderHtmlApp = {
data() {
return {
rawHtml: '<span style="color: red">This should be red.</span>'
}
}
}
Vue.createApp(RenderHtmlApp).mount('#example1')
</script>
v-bind
#
<div v-bind:id="dynamicId"></div>
<!--等同于-->
<div :id="dynamicId"></div>
- 如果绑定的值是
null 或 undefined，那么该 attribute 将不会被包含在渲染的元素上。
动态参数
#
<a v-bind:[attributeName]="url"> ... </a>
- 这里的
attributeName 会被作为一个 JavaScript 表达式进行动态求值。如果组件实例有一个 data property attributeName，其值为 "href"，那么这个绑定将等价于 v-bind:href。
- 动态参数预期会求出一个字符串，
null 例外, null 值可以用于显式地移除绑定。任何其它非字符串类型的值都将会触发一个警告。
- 需要避免使用大写字符来命名键名，因为浏览器会把 attribute 名全部强制转为小写。
JavaScript 表达式
#
- Vue.js 提供了完全的 JavaScript 表达式支持。
{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
<div v-bind:id="'list-' + id"></div>
v-on
#
v-on 指令，它用于监听 DOM 事件。- 修饰符 (modifier) 是以
. 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()。
<a v-on:click="doSomething"> ... </a>
<!--等同于-->
<a @click="doSomething"> ... </a>
<form v-on:submit.prevent="onSubmit">...</form>
<!-- 只有在key是Enter时调用submit()方法-->
<input @keyup.enter="submit" />
v-if
#
- 可以配合
v-else、v-else-if使用。
v-if是真正的条件渲染，在切换的过程中，子组件会被销毁和重建。- 不推荐v-if和v-for一起使用。v-if比v-for有更高的优先级。
<!--条件为真时才被渲染-->
<div v-if="type === 'A'">
A
</div>
<div v-else-if="type === 'B'">
B
</div>
<div v-else-if="type === 'C'">
C
</div>
<div v-else>
Not A/B/C
</div>
v-show
#
<h1 v-show="ok">Hello!</h1>
v-for
#
<!--遍历数组-->
<ul id="array-rendering">
<li v-for="item in items">
<!--items: [{ message: 'Foo' }, { message: 'Bar' }]-->
{{ item.message }}
</li>
</ul>
<!--遍历对象-->
<li v-for="(value, name) in myObject">
{{ name }}: {{ value }}
</li>
<!--把模板重复10次数-->
<div id="range" class="demo">
<span v-for="n in 10" :key="n">{{ n }} </span>
</div>
v-model
#
- v-model 指令在表单
<input>、<textarea> 及 <select> 元素上创建双向数据绑定。
v-model 会忽略表单元素的 value、checked、selected 属性的初始值，可以在data中声明初始值。- 多个复选框可以绑定到一个数组上。
- 自动过滤用户输入的首尾空白字符，可以给v-model添加
trim。<input v-model.trim="msg" />。
data属性
#
- 组件的
data 选项是一个函数，Vue 会在创建新组件实例的过程中调用此函数。它应该返回一个对象，然后 Vue 会通过响应性系统将其包裹起来，并以 $data 的形式存储在组件实例中。为了方便，该对象的任何顶级 property 也会直接通过组件实例暴露出来。
const app = Vue.createApp({
data() {
return { count: 4 }
}
})
const vm = app.mount('#app')
console.log(vm.$data.count) // => 4
console.log(vm.count) // => 4
// 修改 vm.count 的值也会更新 $data.count
vm.count = 5
vm.$data.count = 6
- 这些实例 property 仅在实例首次创建时被添加，所以你需要确保它们都在
data 函数返回的对象中。必要时，要对尚未提供所需值的 property 使用 null、undefined 或其他占位的值。
methods
#
const app = Vue.createApp({
data() {
return { count: 4 }
},
methods: {
increment() {
// `this` 指向该组件实例
this.count++
}
}
})
const vm = app.mount('#app')
console.log(vm.count) // => 4
vm.increment()
console.log(vm.count) // => 5
- 在定义
methods 时应避免使用箭头函数，因为这会阻止 Vue 绑定恰当的 this 指向。
- 这些
methods 和组件实例的其它所有 property 一样可以在组件的模板中被访问。在模板中，它们通常被当做事件监听使用。
<!--点击 <button> 时，会调用 increment 方法。-->
<button @click="increment">Up vote</button>
class和style的绑定
#
class
#
<!--isActive为true或false决定了是否应用此样式-->
<div :class="{ active: isActive }"></div>
<!--class可以和:class共存，:class中可以添加多个字段-->
<div class="static" :class="{ active: isActive, 'text-danger': hasError }"></div>
<!--绑定的数据对象可以在data中定义-->
<div :class="classObject"></div>
data() {
return {
classObject: {
active: true,
'text-danger': false
}
}
}
<!--可以传递一个数组-->
<div :class="[{ active: isActive }, errorClass]"></div>
data() {
return {
isActive: true
errorClass: 'text-danger'
}
}
style
#
<div :style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
data() {
return {
activeColor: 'red',
fontSize: 30
}
}
<!--直接绑定一个样式对象-->
<div :style="styleObject"></div>
data() {
return {
styleObject: {
color: 'red',
fontSize: '13px'
}
}
}
<!--将多个样式对象以数组的形式应用到一个元素上-->
<div :style="[baseStyles, overridingStyles]"></div>
2021-11-15
- linux上的图形用户接口GUI被称为X或者X11。
- X11是一个软件，利用网络构架来进行图形接口的执行与绘制。
X11
#
- X Server是管理硬件，X Client则是应用程序。X Client应用程序将所想要呈现的画面告诉X Server，X Server将结果透过他管理的硬件绘制出来。
X Server 硬件管理、屏幕绘制与字符提供功能
#
- X Server管理的设备主要与输入/输出有关，包括键盘、鼠标、手写板、显示器、屏幕分辨率与颜色深度、显示是配置与显示的字符等。
- 每台客户端主机都需要安装X Server，而服务器则是提供X Client软件，以提供客户端绘图所需要的数据。
- X Server和X Client的互动并非只有client–>server，两者实际上是有互动的，X Server会将来自输入设备（键盘、鼠标等）的动作告知X Client。
X Client 负责X Server要求的事件处理
#
- X Client也可以叫X Application。
- X Server管理显示接口与在屏幕上绘图，同时将输入设备的行为告知X Client，此时X Client会依据这个输入设备的行为来开始处理，再将结果传回X Server，X Server再根据X Client传回来的绘图资料将它描述在自己的屏幕上，来得到显示的结果。
X Window Manager 特殊的X Client，负责管理所有的X Client
#
- 窗口管理员提供许多的控制元素，包括任务栏、桌面背景的设定等等；管理虚拟桌面；提供窗口控制参数，包括窗口的大小、窗口的重叠显示、窗口的移动、窗口的最小化等等。
Display Manager 提供登入需求
#
- gdm全称GNOME Display Manager；一般通过图形界面登入系统的那个登录界面就是Display Manager。
X Window的启动
#
- 通过startx启动：
startx [X client参数] -- [X server参数]，startx是一个shell脚本。
- startx最重要的任务是找出用户或者系统默认的X server和X client配置文件，它可以直接启动，也可以外接参数启动。
- startx的X server参数的优先级如下：①通过命令行传递的参数；②~/.xserverc；③/etc/X11/xinit/xserverrc；④单纯执行/usr/bin/X（X server执行文件）。
- startx的X client参数优先级如下：①startx后面跟的参数；②~/.xinitrc；③/etc/X11/xinit/xinitrc；④单纯执行xterm。
- 当startx找到需要的设定值后，就呼叫xinit来启动X。
xinit [client option] -- [server or display option]。
- 当单纯执行xinit的时候，默认执行的命令为
xinit xterm -geogmetry _1_1 -n login -display :0 -- X :0。-display:0表示这个虚拟机是第:0号的X显示接口。一般会使用startx来启动xwindow，因为startx会自动找到对应的参数。
- xserverrc
- 在启动X server时，Xorg会去读取/etc/X11/xorg.conf这个配置文件。linux通过执行
X来启动X server，linux可以同时启动多个X，第一个X的画面在:0即tty2，第二个X是:1即tty3。
- 在文字接口下启动X时，直接使用startx来找到X Server和X client的参数或者配置文件，然后再呼叫xinit来启动X窗口系统。xinit现在如X server到预设的:0这个显示接口，然后再加载X client到这个X显示接口上。X client通常就是GNOME或者KDE。
- X Server理论上要启动一个6000端口来和X client通信，但是在同一台机器上时，会使用socket来通信。在X Window System环境下，我们称port 6000为第0个显示接口，即hostname:0，可以简写为:0。
#X启动
#启动X server，这个时候会跳转到tty2（也可能是别的，下面以tty2举例），但是啥都没有，用ctrl+alt+F1跳回到tty1
X :1 &
#启动X Client，这个时候tty2会变白，通过ctrl+alt+F2跳到tty2
xterm -display :1 &
#在tty2执行
xclock -display :1 &
xeyes -display :1 &
#切换到tty1，安装twm
apt install twm
#启动twm，再切换到tty2就能拖动窗口了
twm -display :1 &
2021-11-02
总览
#
configuration 配置
properties 属性settings 设置typeAliases 类型别名typeHandlers 类型处理器objectFactory 对象工厂plugins 插件environments 环境变量
environment
transactionManager 事务管理器dataSource 数据源
databaseIdProvider 数据库标识mappers 映射器
属性properties
#
- 设置好的属性可以在整个配置文件中使用。
- 通过方法参数传递的属性优先级最高，resource/url属性中指定的位置文件次之，properties元素中指定的属性优先级最低。
<properties resource="org/mybatis/example/config.properties">
<property name="username" value="dev_user"/>
<!-- 启用默认值设置，使用方式为${username:prod_user} -->
<property name="org.apache.ibatis.parsing.PropertyParser.enable-default-value" value="true"/>
</properties>
类型别名typeAliases
#
- 指定类型别名
- 内建的一些类型别名，如：string、long、integer、float、map、arraylist、date等
<typeAliases>
<typeAlias alias="author" type="domain.blog.Author"/>
<!-- 每一个在包domain.blog中的类，会默认使用该类的首字母小写的类名作为它的别名 -->
<package name="domain.blog"/>
</typeAliases>
环境变量environments
#
<environments default="development">
<!-- type用来指定数据源，内建了三种数据源UNPOOLED|POOLED|JNDI，可以通过实现接口DataSourceFactory来使用第三方数据源 -->
<dataSource type="">
<property name="driver" value="${driver}"/>
<property name="url" value="${url}"/>
<property name="username" value="${username}"/>
<property name="password" value="${password}"/>
</dataSource>
</environment>
</environments>
数据库标识databaseIdProvider
#
- mybatis可以根据不同的数据库厂商执行不同的语句。
<databaseIdProvider type="DB_VENDOR">
<property name="SQL Server" value="sqlserver"/>
<property name="DB2" value="db2"/>
<property name="MySQL" value="mysql" />
</databaseIdProvider>
<select id="select" resultType="map" databaseId="mysql">
select * from mysql
</select>
映射器
#
<mappers>
<mapper resource="org/mybatis/builder/AuthorMapper.xml"/>
<mapper url="file:///var/mappers/PostMapper.xml"/>
<mapper class="org.mybatis.builder.PostMapper"/>
<package name="org.mybatis.builder"/>
</mappers>
