atom.xml

<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
  <title>點燈坊</title>
  <icon>https://yabai.tw/icon.png</icon>
  
  <link href="https://yabai.tw/atom.xml" rel="self"/>
  
  <link href="https://yabai.tw/"/>
  <updated>2024-09-22T11:35:56.720Z</updated>
  <id>https://yabai.tw/</id>
  
  <author>
    <name>Sam Xiao</name>
    
  </author>
  
  <generator uri="https://hexo.io/">Hexo</generator>
  
  <entry>
    <title>Container 為 Widget 旋轉</title>
    <link href="https://yabai.tw/flutter/container/container/transform/"/>
    <id>https://yabai.tw/flutter/container/container/transform/</id>
    <published>2024-09-22T11:34:54.000Z</published>
    <updated>2024-09-22T11:35:56.720Z</updated>
    
    <content type="html"><![CDATA[<p><code>Container</code> 可替 Widget 加以 <code>旋轉</code>。</p><a id="more"></a><h2 id="Version"><a href="#Version" class="headerlink" title="Version"></a>Version</h2><p>Flutter 3.24</p><h2 id="Transform"><a href="#Transform" class="headerlink" title="Transform"></a>Transform</h2><p><img src="/images/flutter/container/container/transform/container01.webp" alt="container01"></p><ul><li><code>Hello World</code> 的 Container 有 <code>傾斜角度</code></li></ul><pre class="line-numbers highlight language-dart"><code class="language-dart"><span class="token keyword">import</span> <span class="token string">'package:flutter/material.dart'</span><span class="token punctuation">;</span><span class="token keyword">class</span> <span class="token class-name">Home</span> <span class="token keyword">extends</span> <span class="token class-name">StatelessWidget</span> <span class="token punctuation">{</span>  <span class="token keyword">const</span> <span class="token function">Home</span><span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token keyword">super</span><span class="token punctuation">.</span>key<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>  <span class="token metadata symbol">@override</span>  Widget <span class="token function">build</span><span class="token punctuation">(</span>BuildContext context<span class="token punctuation">)</span> <span class="token punctuation">{</span>    <span class="token keyword">return</span> <span class="token function">Scaffold</span><span class="token punctuation">(</span>        body<span class="token punctuation">:</span> <span class="token function">Center</span><span class="token punctuation">(</span>            child<span class="token punctuation">:</span> <span class="token function">Container</span><span class="token punctuation">(</span>                color<span class="token punctuation">:</span> Colors<span class="token punctuation">.</span>amber<span class="token punctuation">,</span>                transform<span class="token punctuation">:</span> Matrix4<span class="token punctuation">.</span><span class="token function">rotationZ</span><span class="token punctuation">(</span><span class="token number">0.2</span><span class="token punctuation">)</span><span class="token punctuation">,</span>                child<span class="token punctuation">:</span> <span class="token keyword">const</span> <span class="token function">Text</span><span class="token punctuation">(</span>                    style<span class="token punctuation">:</span> <span class="token function">TextStyle</span><span class="token punctuation">(</span>fontSize<span class="token punctuation">:</span> <span class="token number">30</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token string">'Hello World'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>  <span class="token punctuation">}</span><span class="token punctuation">}</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><ul><li>將 <code>Text</code> 包在 <code>Container</code> 內</li><li><code>transform</code>：設定旋轉角度</li></ul><h2 id="Conclusion"><a href="#Conclusion" class="headerlink" title="Conclusion"></a>Conclusion</h2><ul><li>若沒對 <code>Container</code> 設定 <code>有效</code> 屬性，Android Studio 會提出警告</li></ul>]]></content>
    
    
    <summary type="html">&lt;p&gt;&lt;code&gt;Container&lt;/code&gt; 可替 Widget 加以 &lt;code&gt;旋轉&lt;/code&gt;。&lt;/p&gt;</summary>
    
    
    
    
    <category term="Flutter" scheme="https://yabai.tw/tags/Flutter/"/>
    
  </entry>
  
  <entry>
    <title>Container 為 Widget 設定 Margin</title>
    <link href="https://yabai.tw/flutter/container/container/margin/"/>
    <id>https://yabai.tw/flutter/container/container/margin/</id>
    <published>2024-09-22T11:27:24.000Z</published>
    <updated>2024-09-22T11:28:27.811Z</updated>
    
    <content type="html"><![CDATA[<p><code>Container</code> 可替 Widget 設定 Margin。</p><a id="more"></a><h2 id="Version"><a href="#Version" class="headerlink" title="Version"></a>Version</h2><p>Flutter 3.24</p><h2 id="Margin"><a href="#Margin" class="headerlink" title="Margin"></a>Margin</h2><p><img src="/images/flutter/container/container/margin/container01.webp" alt="container03"></p><ul><li><code>Hello World</code> 對內除了保留有 padding 外，對外還保有 margin</li><li><code>Text</code> 並 <code>沒有</code> 提供屬性設定 <code>margin</code></li></ul><pre class="line-numbers highlight language-dart"><code class="language-dart"><span class="token keyword">import</span> <span class="token string">'package:flutter/material.dart'</span><span class="token punctuation">;</span><span class="token keyword">class</span> <span class="token class-name">Home</span> <span class="token keyword">extends</span> <span class="token class-name">StatelessWidget</span> <span class="token punctuation">{</span>  <span class="token keyword">const</span> <span class="token function">Home</span><span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token keyword">super</span><span class="token punctuation">.</span>key<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>  <span class="token metadata symbol">@override</span>  Widget <span class="token function">build</span><span class="token punctuation">(</span>BuildContext context<span class="token punctuation">)</span> <span class="token punctuation">{</span>    <span class="token keyword">return</span> <span class="token function">Scaffold</span><span class="token punctuation">(</span>        body<span class="token punctuation">:</span> <span class="token function">Center</span><span class="token punctuation">(</span>            child<span class="token punctuation">:</span> <span class="token function">Container</span><span class="token punctuation">(</span>                margin<span class="token punctuation">:</span> <span class="token keyword">const</span> EdgeInsets<span class="token punctuation">.</span><span class="token function">all</span><span class="token punctuation">(</span><span class="token number">20</span><span class="token punctuation">)</span><span class="token punctuation">,</span>                child<span class="token punctuation">:</span> <span class="token keyword">const</span> <span class="token function">Text</span><span class="token punctuation">(</span><span class="token string">'Hello World'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>  <span class="token punctuation">}</span><span class="token punctuation">}</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><ul><li>將 <code>Container</code> 包在 <code>Container</code> 內</li><li><code>margin</code>：設定 <code>Container</code> 對外的 margin</li></ul><h2 id="Conclusion"><a href="#Conclusion" class="headerlink" title="Conclusion"></a>Conclusion</h2><ul><li>若沒對 <code>Container</code> 設定 <code>有效</code> 屬性，Android Studio 會提出警告</li></ul>]]></content>
    
    
    <summary type="html">&lt;p&gt;&lt;code&gt;Container&lt;/code&gt; 可替 Widget 設定 Margin。&lt;/p&gt;</summary>
    
    
    
    
    <category term="Flutter" scheme="https://yabai.tw/tags/Flutter/"/>
    
  </entry>
  
  <entry>
    <title>Container 為 Widget 添加 Decoration</title>
    <link href="https://yabai.tw/flutter/container/container/decoration/"/>
    <id>https://yabai.tw/flutter/container/container/decoration/</id>
    <published>2024-09-22T11:22:04.000Z</published>
    <updated>2024-09-22T11:23:06.408Z</updated>
    
    <content type="html"><![CDATA[<p><code>Container</code> 可替 Widget 添加 Decoration。</p><a id="more"></a><h2 id="Version"><a href="#Version" class="headerlink" title="Version"></a>Version</h2><p>Flutter 3.24</p><h2 id="Decoration"><a href="#Decoration" class="headerlink" title="Decoration"></a>Decoration</h2><p><img src="/images/flutter/container/container/decoration/container01.webp" alt="container04"></p><ul><li><code>Hello World</code> 的四周圍除了有 padding 外，四個角還有弧度</li><li><code>Text</code> 並 <code>沒有</code> 提供屬性設定 <code>borderRadius</code></li></ul><pre class="line-numbers highlight language-dart"><code class="language-dart"><span class="token keyword">import</span> <span class="token string">'package:flutter/material.dart'</span><span class="token punctuation">;</span><span class="token keyword">class</span> <span class="token class-name">Home</span> <span class="token keyword">extends</span> <span class="token class-name">StatelessWidget</span> <span class="token punctuation">{</span>  <span class="token keyword">const</span> <span class="token function">Home</span><span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token keyword">super</span><span class="token punctuation">.</span>key<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>  <span class="token metadata symbol">@override</span>  Widget <span class="token function">build</span><span class="token punctuation">(</span>BuildContext context<span class="token punctuation">)</span> <span class="token punctuation">{</span>    <span class="token keyword">return</span> <span class="token function">Scaffold</span><span class="token punctuation">(</span>        body<span class="token punctuation">:</span> <span class="token function">Center</span><span class="token punctuation">(</span>            child<span class="token punctuation">:</span> <span class="token function">Container</span><span class="token punctuation">(</span>      decoration<span class="token punctuation">:</span> <span class="token function">BoxDecoration</span><span class="token punctuation">(</span>        color<span class="token punctuation">:</span> Colors<span class="token punctuation">.</span>amber<span class="token punctuation">,</span>        borderRadius<span class="token punctuation">:</span> <span class="token keyword">const</span> BorderRadius<span class="token punctuation">.</span><span class="token function">all</span><span class="token punctuation">(</span>Radius<span class="token punctuation">.</span><span class="token function">circular</span><span class="token punctuation">(</span><span class="token number">18.0</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">,</span>        border<span class="token punctuation">:</span> Border<span class="token punctuation">.</span><span class="token function">all</span><span class="token punctuation">(</span>width<span class="token punctuation">:</span> <span class="token number">1.0</span><span class="token punctuation">,</span> color<span class="token punctuation">:</span> Colors<span class="token punctuation">.</span>blue<span class="token punctuation">)</span><span class="token punctuation">,</span>      <span class="token punctuation">)</span><span class="token punctuation">,</span>      padding<span class="token punctuation">:</span> <span class="token keyword">const</span> EdgeInsets<span class="token punctuation">.</span><span class="token function">symmetric</span><span class="token punctuation">(</span>vertical<span class="token punctuation">:</span> <span class="token number">10</span><span class="token punctuation">,</span> horizontal<span class="token punctuation">:</span> <span class="token number">50</span><span class="token punctuation">)</span><span class="token punctuation">,</span>      child<span class="token punctuation">:</span> <span class="token keyword">const</span> <span class="token function">Text</span><span class="token punctuation">(</span><span class="token string">'Hello World'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>    <span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>  <span class="token punctuation">}</span><span class="token punctuation">}</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><ul><li>將 <code>Text</code> 包在 <code>Container</code> 內</li><li><code>decoration</code>：設定 <code>Container</code> 的 style<ul><li><code>borderRadius</code>：設定 border 的 <code>弧度</code></li><li><code>border</code>：設定 border 的 <code>寬度</code>、<code>顏色</code></li></ul></li></ul><h2 id="Conclusion"><a href="#Conclusion" class="headerlink" title="Conclusion"></a>Conclusion</h2><ul><li>若沒對 <code>Container</code> 設定 <code>有效</code> 屬性，Android Studio 會提出警告</li></ul>]]></content>
    
    
    <summary type="html">&lt;p&gt;&lt;code&gt;Container&lt;/code&gt; 可替 Widget 添加 Decoration。&lt;/p&gt;</summary>
    
    
    
    
    <category term="Flutter" scheme="https://yabai.tw/tags/Flutter/"/>
    
  </entry>
  
  <entry>
    <title>Container 為 Widget 設定背景顏色</title>
    <link href="https://yabai.tw/flutter/container/container/background-color/"/>
    <id>https://yabai.tw/flutter/container/container/background-color/</id>
    <published>2024-09-22T11:15:33.000Z</published>
    <updated>2024-09-22T11:17:00.863Z</updated>
    
    <content type="html"><![CDATA[<p><code>Container</code> 可替 Widget 設定 <code>背景顏色</code>。</p><a id="more"></a><h2 id="Version"><a href="#Version" class="headerlink" title="Version"></a>Version</h2><p>Flutter 3.24</p><h2 id="Background-Color"><a href="#Background-Color" class="headerlink" title="Background Color"></a>Background Color</h2><p><img src="/images/flutter/container/container/background-color/container01.webp" alt="container01"></p><ul><li><code>Hello World</code> 的 <code>背景色</code> 為 <code>土黃色</code></li><li><code>Text</code> 並 <code>沒有</code> 提供屬性設定 <code>backgroundColor</code></li></ul><pre class="line-numbers highlight language-dart"><code class="language-dart"><span class="token keyword">import</span> <span class="token string">'package:flutter/material.dart'</span><span class="token punctuation">;</span><span class="token keyword">class</span> <span class="token class-name">Home</span> <span class="token keyword">extends</span> <span class="token class-name">StatelessWidget</span> <span class="token punctuation">{</span>  <span class="token keyword">const</span> <span class="token function">Home</span><span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token keyword">super</span><span class="token punctuation">.</span>key<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>  <span class="token metadata symbol">@override</span>  Widget <span class="token function">build</span><span class="token punctuation">(</span>BuildContext context<span class="token punctuation">)</span> <span class="token punctuation">{</span>    <span class="token keyword">return</span> <span class="token function">Scaffold</span><span class="token punctuation">(</span>        body<span class="token punctuation">:</span> <span class="token function">Center</span><span class="token punctuation">(</span>            child<span class="token punctuation">:</span> <span class="token function">Container</span><span class="token punctuation">(</span>                color<span class="token punctuation">:</span> Colors<span class="token punctuation">.</span>amber<span class="token punctuation">,</span>                child<span class="token punctuation">:</span> <span class="token keyword">const</span> <span class="token function">Text</span><span class="token punctuation">(</span>                    style<span class="token punctuation">:</span> <span class="token function">TextStyle</span><span class="token punctuation">(</span>fontSize<span class="token punctuation">:</span> <span class="token number">30</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token string">'Hello World'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>  <span class="token punctuation">}</span><span class="token punctuation">}</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><ul><li>將 <code>Text</code> 包在 <code>Container</code> 內</li><li><code>color</code>：設定 <code>Container</code> 的顏色為 <code>Text</code> 的背景色</li></ul><h2 id="Conclusion"><a href="#Conclusion" class="headerlink" title="Conclusion"></a>Conclusion</h2><ul><li>若沒對 <code>Container</code> 設定 <code>有效</code> 屬性，Android Studio 會提出警告</li></ul>]]></content>
    
    
    <summary type="html">&lt;p&gt;&lt;code&gt;Container&lt;/code&gt; 可替 Widget 設定 &lt;code&gt;背景顏色&lt;/code&gt;。&lt;/p&gt;</summary>
    
    
    
    
    <category term="Flutter" scheme="https://yabai.tw/tags/Flutter/"/>
    
  </entry>
  
  <entry>
    <title>Container 為 Widget 設定 Alignment</title>
    <link href="https://yabai.tw/flutter/container/container/alignment/"/>
    <id>https://yabai.tw/flutter/container/container/alignment/</id>
    <published>2024-09-22T11:08:45.000Z</published>
    <updated>2024-09-22T11:11:11.771Z</updated>
    
    <content type="html"><![CDATA[<p><code>Container</code> 可設定 Widget 的 Alignment。</p><a id="more"></a><h2 id="Version"><a href="#Version" class="headerlink" title="Version"></a>Version</h2><p>Flutter 3.24</p><h2 id="Alignment"><a href="#Alignment" class="headerlink" title="Alignment"></a>Alignment</h2><p><img src="/images/flutter/container/container/alignment/container01.webp" alt="container07"></p><ul><li><code>Hello World</code> 的位置 <code>垂直靠左</code></li><li><code>Text</code> 並 <code>沒有</code> 提供屬性設定 <code>alignment</code></li><li><code>Container</code> 的 <code>長寬</code> 受 <code>alignment</code> 影響，會自動研展成 <code>外層容器</code> 的 <code>長寬</code></li></ul><pre class="line-numbers highlight language-dart"><code class="language-dart"><span class="token keyword">import</span> <span class="token string">'package:flutter/material.dart'</span><span class="token punctuation">;</span><span class="token keyword">class</span> <span class="token class-name">Home</span> <span class="token keyword">extends</span> <span class="token class-name">StatelessWidget</span> <span class="token punctuation">{</span>  <span class="token keyword">const</span> <span class="token function">Home</span><span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token keyword">super</span><span class="token punctuation">.</span>key<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>  <span class="token metadata symbol">@override</span>  Widget <span class="token function">build</span><span class="token punctuation">(</span>BuildContext context<span class="token punctuation">)</span> <span class="token punctuation">{</span>    <span class="token keyword">return</span> <span class="token function">Scaffold</span><span class="token punctuation">(</span>        body<span class="token punctuation">:</span> <span class="token function">Center</span><span class="token punctuation">(</span>            child<span class="token punctuation">:</span> <span class="token function">Container</span><span class="token punctuation">(</span>                alignment<span class="token punctuation">:</span> Alignment<span class="token punctuation">.</span>centerLeft<span class="token punctuation">,</span>                color<span class="token punctuation">:</span> Colors<span class="token punctuation">.</span>amber<span class="token punctuation">,</span>                child<span class="token punctuation">:</span> <span class="token keyword">const</span> <span class="token function">Text</span><span class="token punctuation">(</span><span class="token string">'Hello World'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>  <span class="token punctuation">}</span><span class="token punctuation">}</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><ul><li>將 <code>Text</code> 包在 <code>Container</code> 內</li><li><code>alignment</code>：設定子元素對於 <code>Container</code> 的 alignment，但 Container 的 <code>width</code> 與 <code>height</code> 會被影響成為外層容器的 <code>width</code> 與 <code>height</code></li></ul><h2 id="Width、Height"><a href="#Width、Height" class="headerlink" title="Width、Height"></a>Width、Height</h2><p><img src="/images/flutter/container/container/alignment/container02.webp" alt="container06"></p><ul><li><code>Hello World</code> 的位置 <code>垂直靠左</code></li><li><code>Text</code> widget 並 <code>沒有</code> 提供屬性設定 <code>alignment</code></li><li>重新設定 Container 的 <code>width</code> 與 <code>height</code></li></ul><pre class="line-numbers highlight language-dart"><code class="language-dart"><span class="token keyword">import</span> <span class="token string">'package:flutter/material.dart'</span><span class="token punctuation">;</span><span class="token keyword">class</span> <span class="token class-name">Home</span> <span class="token keyword">extends</span> <span class="token class-name">StatelessWidget</span> <span class="token punctuation">{</span>  <span class="token keyword">const</span> <span class="token function">Home</span><span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token keyword">super</span><span class="token punctuation">.</span>key<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>  <span class="token metadata symbol">@override</span>  Widget <span class="token function">build</span><span class="token punctuation">(</span>BuildContext context<span class="token punctuation">)</span> <span class="token punctuation">{</span>    <span class="token keyword">return</span> <span class="token function">Scaffold</span><span class="token punctuation">(</span>        body<span class="token punctuation">:</span> <span class="token function">Center</span><span class="token punctuation">(</span>            child<span class="token punctuation">:</span> <span class="token function">Container</span><span class="token punctuation">(</span>                alignment<span class="token punctuation">:</span> Alignment<span class="token punctuation">.</span>centerLeft<span class="token punctuation">,</span>                color<span class="token punctuation">:</span> Colors<span class="token punctuation">.</span>amber<span class="token punctuation">,</span>                width<span class="token punctuation">:</span> <span class="token number">200</span><span class="token punctuation">,</span>                height<span class="token punctuation">:</span> <span class="token number">100</span><span class="token punctuation">,</span>                child<span class="token punctuation">:</span> <span class="token keyword">const</span> <span class="token function">Text</span><span class="token punctuation">(</span><span class="token string">'Hello World'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>  <span class="token punctuation">}</span><span class="token punctuation">}</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><ul><li>將 <code>Text</code> 包在 <code>Container</code> 內</li><li><code>alignment</code>：設定子元素對於 <code>Container</code> 的 alignment，但 Container 的 <code>width</code> 與 <code>height</code> 會被影響成為外層容器的 <code>width</code> 與 <code>height</code></li><li><code>width</code>：重新設定 Container 的 <code>width</code></li><li><code>height</code>：重新設定 Container 的 <code>height</code></li></ul><blockquote><p>雖然重新設定 width 與 height 可以解決 width 與 height 被 alignment 更改的事實，但寫死 width 與 height 顯然不是最好的方法，如此 <code>Container</code> 就長寬就無法根據內容 <code>自動改變</code></p></blockquote><h2 id="兩層-Container"><a href="#兩層-Container" class="headerlink" title="兩層 Container"></a>兩層 Container</h2><p><img src="/images/flutter/container/container/alignment/container03.webp" alt="container08"></p><ul><li><code>Hello World</code> 的位置 <code>垂直靠左</code>，且 Container 雖著 Hello World 的長寬而變，並沒有寫死 width 與 height</li></ul><pre class="line-numbers highlight language-dart"><code class="language-dart"><span class="token keyword">import</span> <span class="token string">'package:flutter/material.dart'</span><span class="token punctuation">;</span><span class="token keyword">class</span> <span class="token class-name">Home</span> <span class="token keyword">extends</span> <span class="token class-name">StatelessWidget</span> <span class="token punctuation">{</span>  <span class="token keyword">const</span> <span class="token function">Home</span><span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token keyword">super</span><span class="token punctuation">.</span>key<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>  <span class="token metadata symbol">@override</span>  Widget <span class="token function">build</span><span class="token punctuation">(</span>BuildContext context<span class="token punctuation">)</span> <span class="token punctuation">{</span>    <span class="token keyword">return</span> <span class="token function">Scaffold</span><span class="token punctuation">(</span>        body<span class="token punctuation">:</span> <span class="token function">Center</span><span class="token punctuation">(</span>            child<span class="token punctuation">:</span> <span class="token function">Container</span><span class="token punctuation">(</span>                alignment<span class="token punctuation">:</span> Alignment<span class="token punctuation">.</span>centerLeft<span class="token punctuation">,</span>                child<span class="token punctuation">:</span> <span class="token function">Container</span><span class="token punctuation">(</span>                    color<span class="token punctuation">:</span> Colors<span class="token punctuation">.</span>amber<span class="token punctuation">,</span> child<span class="token punctuation">:</span> <span class="token keyword">const</span> <span class="token function">Text</span><span class="token punctuation">(</span><span class="token string">'Hello World'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>  <span class="token punctuation">}</span><span class="token punctuation">}</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><ul><li>將 <code>Text</code> 包在 <code>Container</code> 內，並再次將 <code>Container</code> 包在 <code>Container</code> 內</li><li>外層 <code>Container</code> 負責 <code>alignment</code>，內層 <code>Container</code> 負責 <code>color</code></li></ul><h2 id="Conclusion"><a href="#Conclusion" class="headerlink" title="Conclusion"></a>Conclusion</h2><ul><li>若沒對 <code>Container</code> 設定 <code>有效</code> 屬性，Android Studio 會提出警告</li></ul>]]></content>
    
    
    <summary type="html">&lt;p&gt;&lt;code&gt;Container&lt;/code&gt; 可設定 Widget 的 Alignment。&lt;/p&gt;</summary>
    
    
    
    
    <category term="Flutter" scheme="https://yabai.tw/tags/Flutter/"/>
    
  </entry>
  
  <entry>
    <title>Container 為 Widget 設定 Padding</title>
    <link href="https://yabai.tw/flutter/container/container/padding/"/>
    <id>https://yabai.tw/flutter/container/container/padding/</id>
    <published>2024-09-22T09:21:25.000Z</published>
    <updated>2024-09-22T09:23:38.925Z</updated>
    
    <content type="html"><![CDATA[<p><code>Container</code> 可替 Widget 設定 Padding。</p><a id="more"></a><h2 id="Version"><a href="#Version" class="headerlink" title="Version"></a>Version</h2><p>Flutter 3.24</p><h2 id="Padding"><a href="#Padding" class="headerlink" title="Padding"></a>Padding</h2><p><img src="/images/flutter/container/container/padding/container01.webp" alt="container01"></p><ul><li><p><code>Hello World</code> 的四周圍保留有 padding</p></li><li><p><code>Text</code> 並 <code>沒有</code> 提供屬性設定 <code>padding</code></p></li></ul><pre class="line-numbers highlight language-dart"><code class="language-dart"><span class="token keyword">import</span> <span class="token string">'package:flutter/material.dart'</span><span class="token punctuation">;</span><span class="token keyword">class</span> <span class="token class-name">Home</span> <span class="token keyword">extends</span> <span class="token class-name">StatelessWidget</span> <span class="token punctuation">{</span>  <span class="token keyword">const</span> <span class="token function">Home</span><span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token keyword">super</span><span class="token punctuation">.</span>key<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>  <span class="token metadata symbol">@override</span>  Widget <span class="token function">build</span><span class="token punctuation">(</span>BuildContext context<span class="token punctuation">)</span> <span class="token punctuation">{</span>    <span class="token keyword">return</span> <span class="token function">Scaffold</span><span class="token punctuation">(</span>        body<span class="token punctuation">:</span> <span class="token function">Center</span><span class="token punctuation">(</span>            child<span class="token punctuation">:</span> <span class="token function">Container</span><span class="token punctuation">(</span>                padding<span class="token punctuation">:</span> <span class="token keyword">const</span> EdgeInsets<span class="token punctuation">.</span><span class="token function">all</span><span class="token punctuation">(</span><span class="token number">20</span><span class="token punctuation">)</span><span class="token punctuation">,</span>                child<span class="token punctuation">:</span> <span class="token keyword">const</span> <span class="token function">Text</span><span class="token punctuation">(</span><span class="token string">'Hello World'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>  <span class="token punctuation">}</span><span class="token punctuation">}</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><ul><li>將 <code>Text</code> 包在 <code>Container</code> 內</li><li><code>padding</code>：設定 <code>Container</code> 對內的 padding</li></ul><h2 id="Conclusion"><a href="#Conclusion" class="headerlink" title="Conclusion"></a>Conclusion</h2><ul><li>若沒對 <code>Container</code> 設定 <code>有效</code> 屬性，Android Studio 會提出警告</li></ul>]]></content>
    
    
    <summary type="html">&lt;p&gt;&lt;code&gt;Container&lt;/code&gt; 可替 Widget 設定 Padding。&lt;/p&gt;</summary>
    
    
    
    
    <category term="Flutter" scheme="https://yabai.tw/tags/Flutter/"/>
    
  </entry>
  
  <entry>
    <title>Center 使 Widget 水平垂直置中</title>
    <link href="https://yabai.tw/flutter/layout/alignment/center/"/>
    <id>https://yabai.tw/flutter/layout/alignment/center/</id>
    <published>2024-09-22T08:52:37.000Z</published>
    <updated>2024-09-22T08:57:24.817Z</updated>
    
    <content type="html"><![CDATA[<p><code>Center</code> 可將 Widget <code>水平垂直置中</code>。</p><a id="more"></a><h2 id="Version"><a href="#Version" class="headerlink" title="Version"></a>Version</h2><p>Flutter 3.24</p><h2 id="Flutter"><a href="#Flutter" class="headerlink" title="Flutter"></a>Flutter</h2><p><img src="/images/flutter/layout/alignment/center/center01.webp" alt="center01"></p><ul><li><code>Hello World</code> 在頁面 <code>水平垂直置中</code></li></ul><h2 id="Center"><a href="#Center" class="headerlink" title="Center"></a>Center</h2><pre class="line-numbers highlight language-dart"><code class="language-dart"><span class="token keyword">import</span> <span class="token string">'package:flutter/material.dart'</span><span class="token punctuation">;</span><span class="token keyword">class</span> <span class="token class-name">Home</span> <span class="token keyword">extends</span> <span class="token class-name">StatelessWidget</span> <span class="token punctuation">{</span>  <span class="token keyword">const</span> <span class="token function">Home</span><span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token keyword">super</span><span class="token punctuation">.</span>key<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>  <span class="token metadata symbol">@override</span>  Widget <span class="token function">build</span><span class="token punctuation">(</span>BuildContext context<span class="token punctuation">)</span> <span class="token punctuation">{</span>    <span class="token keyword">return</span> <span class="token keyword">const</span> <span class="token function">Scaffold</span><span class="token punctuation">(</span>      body<span class="token punctuation">:</span> <span class="token function">Center</span><span class="token punctuation">(</span>        child<span class="token punctuation">:</span> <span class="token function">Text</span><span class="token punctuation">(</span><span class="token string">'Hello World'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>      <span class="token punctuation">)</span><span class="token punctuation">,</span>    <span class="token punctuation">)</span><span class="token punctuation">;</span>  <span class="token punctuation">}</span><span class="token punctuation">}</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><p><strong>Line 6</strong></p><pre class="line-numbers highlight language-dart"><code class="language-dart"><span class="token metadata symbol">@override</span>Widget <span class="token function">build</span><span class="token punctuation">(</span>BuildContext context<span class="token punctuation">)</span> <span class="token punctuation">{</span>  <span class="token keyword">return</span> <span class="token keyword">const</span> <span class="token function">Scaffold</span><span class="token punctuation">(</span>    body<span class="token punctuation">:</span> <span class="token function">Center</span><span class="token punctuation">(</span>      child<span class="token punctuation">:</span> <span class="token function">Text</span><span class="token punctuation">(</span><span class="token string">'Hello World'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>    <span class="token punctuation">)</span><span class="token punctuation">,</span>  <span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token punctuation">}</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><ul><li><code>Center</code>：將內層 widget <code>垂直水平置中</code><ul><li><code>child</code>：設定內層 widget</li></ul></li></ul><h2 id="Conclusion"><a href="#Conclusion" class="headerlink" title="Conclusion"></a>Conclusion</h2><ul><li><code>Center</code> 可簡單將內層 widget <code>垂直水平置中</code>，且 <code>不受</code> 長寬限制</li></ul>]]></content>
    
    
    <summary type="html">&lt;p&gt;&lt;code&gt;Center&lt;/code&gt; 可將 Widget &lt;code&gt;水平垂直置中&lt;/code&gt;。&lt;/p&gt;</summary>
    
    
    
    
    <category term="Flutter" scheme="https://yabai.tw/tags/Flutter/"/>
    
  </entry>
  
  <entry>
    <title>我的 Karabiner 基本設定</title>
    <link href="https://yabai.tw/macos/setup/karabiner/"/>
    <id>https://yabai.tw/macos/setup/karabiner/</id>
    <published>2024-09-22T08:23:23.000Z</published>
    <updated>2024-09-22T08:57:24.781Z</updated>
    
    <content type="html"><![CDATA[<p>自從 M2 Macbook Air 重新將 <code>Fn</code> 鍵回歸取代 Touch Bar 後，如何善用 <code>Fn</code> 鍵就成為重要的課題，畢竟 macOS 不像 Windows 常常會使用到 <code>Fn</code> 鍵。我們可使用 Karabiner-Elements 重新定義 <code>Fn</code> 鍵取代 Touch Bar 切換 app，並保留 <code>⌘</code> + <code>Fn</code> 執行原本的功能。 </p><a id="more"></a><h2 id="Version"><a href="#Version" class="headerlink" title="Version"></a>Version</h2><p>Karabiner-Elements 14.12.0</p><h2 id="Installation"><a href="#Installation" class="headerlink" title="Installation"></a>Installation</h2><pre class="line-numbers highlight language-shell"><code class="language-shell">$ brew install --cask karabiner-elements<span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre><ul><li>使用 Homebrew 安裝 Karabiner</li></ul><h2 id="Fn-Keys"><a href="#Fn-Keys" class="headerlink" title="Fn Keys"></a>Fn Keys</h2><ul><li><code>F1</code>：<code>Safari</code></li><li><code>⌥ + F1</code>：<code>Arc</code> </li><li><code>F2</code>：<code>Android Studio</code> </li><li><code>F3</code>：<code>WebP Converter</code></li><li><code>F4</code>：<code>iTerm2</code></li><li><code>F5</code>：<code>Sublime Text</code></li><li><code>F6</code>：<code>FortLift</code></li><li><code>F7</code>：<code>Typora</code></li><li><code>F8</code>：<code>MOJi 辞書</code></li><li><code>F9</code>：<code>ChatGPT</code></li><li><code>F10</code>：<code>Gitfox</code></li><li><code>F11</code>：<code>WebStorm</code></li><li><code>F12</code>：<code>Firefox</code></li><li><code>⌥ F12</code>：<code>Chrome</code> </li><li><code>⌘ F1</code>：<code>Decrease Volumn</code></li><li><code>⌘ F2</code>：<code>Increase Volumn</code></li><li><code>⌘ F3</code>：<code>Mission Control</code></li><li><code>⌘ F4</code>：<code>Zoom</code></li><li><code>⌘ F5</code>：<code>Capture Text by TextSnipper</code></li><li><code>⌘ F6</code>：<code>Capture Screen by CleanShot X</code></li><li><code>⌘ F7</code>：<code>Record Screen by CleanShot X</code></li><li><code>⌘ F8</code>：<code>Play / Pause</code></li><li><code>⌘ F9</code>：<code>Measure by PixelSnap</code></li><li><code>⌘ F10</code>：<code>Mute</code></li><li><code>⌘ F11</code>：<code>Decrease Volumn</code></li><li><code>⌘ F12</code>：<code>Increase Volumn</code></li></ul><h2 id="Karabinar-Configuration"><a href="#Karabinar-Configuration" class="headerlink" title="Karabinar Configuration"></a>Karabinar Configuration</h2><p><strong>karabiner.json</strong></p><pre class="line-numbers highlight language-json"><code class="language-json"><span class="token punctuation">{</span>  <span class="token property">"global"</span><span class="token operator">:</span> <span class="token punctuation">{</span>    <span class="token property">"ask_for_confirmation_before_quitting"</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>    <span class="token property">"check_for_updates_on_startup"</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>    <span class="token property">"show_in_menu_bar"</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>    <span class="token property">"show_profile_name_in_menu_bar"</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>    <span class="token property">"unsafe_ui"</span><span class="token operator">:</span> <span class="token boolean">false</span>  <span class="token punctuation">}</span><span class="token punctuation">,</span>  <span class="token property">"profiles"</span><span class="token operator">:</span> <span class="token punctuation">[</span>    <span class="token punctuation">{</span>      <span class="token property">"complex_modifications"</span><span class="token operator">:</span> <span class="token punctuation">{</span>        <span class="token property">"parameters"</span><span class="token operator">:</span> <span class="token punctuation">{</span>          <span class="token property">"basic.simultaneous_threshold_milliseconds"</span><span class="token operator">:</span> <span class="token number">50</span><span class="token punctuation">,</span>          <span class="token property">"basic.to_delayed_action_delay_milliseconds"</span><span class="token operator">:</span> <span class="token number">500</span><span class="token punctuation">,</span>          <span class="token property">"basic.to_if_alone_timeout_milliseconds"</span><span class="token operator">:</span> <span class="token number">1000</span><span class="token punctuation">,</span>          <span class="token property">"basic.to_if_held_down_threshold_milliseconds"</span><span class="token operator">:</span> <span class="token number">500</span><span class="token punctuation">,</span>          <span class="token property">"mouse_motion_to_scroll.speed"</span><span class="token operator">:</span> <span class="token number">100</span>        <span class="token punctuation">}</span><span class="token punctuation">,</span>        <span class="token property">"rules"</span><span class="token operator">:</span> <span class="token punctuation">[</span>          <span class="token punctuation">{</span>            <span class="token property">"description"</span><span class="token operator">:</span> <span class="token string">"Use F1 to Open Safari"</span><span class="token punctuation">,</span>            <span class="token property">"manipulators"</span><span class="token operator">:</span> <span class="token punctuation">[</span>              <span class="token punctuation">{</span>                <span class="token property">"from"</span><span class="token operator">:</span> <span class="token punctuation">{</span>                  <span class="token property">"key_code"</span><span class="token operator">:</span> <span class="token string">"f1"</span>                <span class="token punctuation">}</span><span class="token punctuation">,</span>                <span class="token property">"to"</span><span class="token operator">:</span> <span class="token punctuation">[</span>                  <span class="token punctuation">{</span>                    <span class="token property">"shell_command"</span><span class="token operator">:</span> <span class="token string">"open -a '/Applications/Safari.app'"</span>                  <span class="token punctuation">}</span>                <span class="token punctuation">]</span><span class="token punctuation">,</span>                <span class="token property">"type"</span><span class="token operator">:</span> <span class="token string">"basic"</span>              <span class="token punctuation">}</span>            <span class="token punctuation">]</span>          <span class="token punctuation">}</span><span class="token punctuation">,</span>          <span class="token punctuation">{</span>            <span class="token property">"description"</span><span class="token operator">:</span> <span class="token string">"Use Option + F1 to Open Arc"</span><span class="token punctuation">,</span>            <span class="token property">"manipulators"</span><span class="token operator">:</span> <span class="token punctuation">[</span>              <span class="token punctuation">{</span>                <span class="token property">"from"</span><span class="token operator">:</span> <span class="token punctuation">{</span>                  <span class="token property">"key_code"</span><span class="token operator">:</span> <span class="token string">"f1"</span><span class="token punctuation">,</span>                  <span class="token property">"modifiers"</span><span class="token operator">:</span> <span class="token punctuation">{</span>                    <span class="token property">"mandatory"</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"option"</span><span class="token punctuation">]</span>                  <span class="token punctuation">}</span>                <span class="token punctuation">}</span><span class="token punctuation">,</span>                <span class="token property">"to"</span><span class="token operator">:</span> <span class="token punctuation">[</span>                  <span class="token punctuation">{</span>                    <span class="token property">"shell_command"</span><span class="token operator">:</span> <span class="token string">"open -a '/Applications/Arc.app'"</span>                  <span class="token punctuation">}</span>                <span class="token punctuation">]</span><span class="token punctuation">,</span>                <span class="token property">"type"</span><span class="token operator">:</span> <span class="token string">"basic"</span>              <span class="token punctuation">}</span>            <span class="token punctuation">]</span>          <span class="token punctuation">}</span><span class="token punctuation">,</span>          <span class="token punctuation">{</span>            <span class="token property">"description"</span><span class="token operator">:</span> <span class="token string">"Use Command + F1 to Decrease Brightness"</span><span class="token punctuation">,</span>            <span class="token property">"manipulators"</span><span class="token operator">:</span> <span class="token punctuation">[</span>              <span class="token punctuation">{</span>                <span class="token property">"from"</span><span class="token operator">:</span> <span class="token punctuation">{</span>                  <span class="token property">"key_code"</span><span class="token operator">:</span> <span class="token string">"f1"</span><span class="token punctuation">,</span>                  <span class="token property">"modifiers"</span><span class="token operator">:</span> <span class="token punctuation">{</span>                    <span class="token property">"mandatory"</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"command"</span><span class="token punctuation">]</span>                  <span class="token punctuation">}</span>                <span class="token punctuation">}</span><span class="token punctuation">,</span>                <span class="token property">"to"</span><span class="token operator">:</span> <span class="token punctuation">[</span>                  <span class="token punctuation">{</span>                    <span class="token property">"consumer_key_code"</span><span class="token operator">:</span> <span class="token string">"display_brightness_decrement"</span>                  <span class="token punctuation">}</span>                <span class="token punctuation">]</span><span class="token punctuation">,</span>                <span class="token property">"type"</span><span class="token operator">:</span> <span class="token string">"basic"</span>              <span class="token punctuation">}</span>            <span class="token punctuation">]</span>          <span class="token punctuation">}</span><span class="token punctuation">,</span>          <span class="token punctuation">{</span>            <span class="token property">"description"</span><span class="token operator">:</span> <span class="token string">"Use F2 to Open Android Studio"</span><span class="token punctuation">,</span>            <span class="token property">"manipulators"</span><span class="token operator">:</span> <span class="token punctuation">[</span>              <span class="token punctuation">{</span>                <span class="token property">"from"</span><span class="token operator">:</span> <span class="token punctuation">{</span>                  <span class="token property">"key_code"</span><span class="token operator">:</span> <span class="token string">"f2"</span>                <span class="token punctuation">}</span><span class="token punctuation">,</span>                <span class="token property">"to"</span><span class="token operator">:</span> <span class="token punctuation">[</span>                  <span class="token punctuation">{</span>                    <span class="token property">"shell_command"</span><span class="token operator">:</span> <span class="token string">"open -a '/Users/oomusou/Applications/Android Studio.app'"</span>                  <span class="token punctuation">}</span>                <span class="token punctuation">]</span><span class="token punctuation">,</span>                <span class="token property">"type"</span><span class="token operator">:</span> <span class="token string">"basic"</span>              <span class="token punctuation">}</span>            <span class="token punctuation">]</span>          <span class="token punctuation">}</span><span class="token punctuation">,</span>          <span class="token punctuation">{</span>            <span class="token property">"description"</span><span class="token operator">:</span> <span class="token string">"Use Command + F2 to Increase Brightness"</span><span class="token punctuation">,</span>            <span class="token property">"manipulators"</span><span class="token operator">:</span> <span class="token punctuation">[</span>              <span class="token punctuation">{</span>                <span class="token property">"from"</span><span class="token operator">:</span> <span class="token punctuation">{</span>                  <span class="token property">"key_code"</span><span class="token operator">:</span> <span class="token string">"f2"</span><span class="token punctuation">,</span>                  <span class="token property">"modifiers"</span><span class="token operator">:</span> <span class="token punctuation">{</span>                    <span class="token property">"mandatory"</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"command"</span><span class="token punctuation">]</span>                  <span class="token punctuation">}</span>                <span class="token punctuation">}</span><span class="token punctuation">,</span>                <span class="token property">"to"</span><span class="token operator">:</span> <span class="token punctuation">[</span>                  <span class="token punctuation">{</span>                    <span class="token property">"consumer_key_code"</span><span class="token operator">:</span> <span class="token string">"display_brightness_increment"</span>                  <span class="token punctuation">}</span>                <span class="token punctuation">]</span><span class="token punctuation">,</span>                <span class="token property">"type"</span><span class="token operator">:</span> <span class="token string">"basic"</span>              <span class="token punctuation">}</span>            <span class="token punctuation">]</span>          <span class="token punctuation">}</span><span class="token punctuation">,</span>          <span class="token punctuation">{</span>            <span class="token property">"description"</span><span class="token operator">:</span> <span class="token string">"Use F3 to Open Web Converter"</span><span class="token punctuation">,</span>            <span class="token property">"manipulators"</span><span class="token operator">:</span> <span class="token punctuation">[</span>              <span class="token punctuation">{</span>                <span class="token property">"from"</span><span class="token operator">:</span> <span class="token punctuation">{</span>                  <span class="token property">"key_code"</span><span class="token operator">:</span> <span class="token string">"f3"</span>                <span class="token punctuation">}</span><span class="token punctuation">,</span>                <span class="token property">"to"</span><span class="token operator">:</span> <span class="token punctuation">[</span>                  <span class="token punctuation">{</span>                    <span class="token property">"shell_command"</span><span class="token operator">:</span> <span class="token string">"open -a '/Applications/WebP Converter.app'"</span>                  <span class="token punctuation">}</span>                <span class="token punctuation">]</span><span class="token punctuation">,</span>                <span class="token property">"type"</span><span class="token operator">:</span> <span class="token string">"basic"</span>              <span class="token punctuation">}</span>            <span class="token punctuation">]</span>          <span class="token punctuation">}</span><span class="token punctuation">,</span>          <span class="token punctuation">{</span>            <span class="token property">"description"</span><span class="token operator">:</span> <span class="token string">"Use Command + F3 to Misson Control"</span><span class="token punctuation">,</span>            <span class="token property">"manipulators"</span><span class="token operator">:</span> <span class="token punctuation">[</span>              <span class="token punctuation">{</span>                <span class="token property">"from"</span><span class="token operator">:</span> <span class="token punctuation">{</span>                  <span class="token property">"key_code"</span><span class="token operator">:</span> <span class="token string">"f3"</span><span class="token punctuation">,</span>                  <span class="token property">"modifiers"</span><span class="token operator">:</span> <span class="token punctuation">{</span>                    <span class="token property">"mandatory"</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"command"</span><span class="token punctuation">]</span>                  <span class="token punctuation">}</span>                <span class="token punctuation">}</span><span class="token punctuation">,</span>                <span class="token property">"to"</span><span class="token operator">:</span> <span class="token punctuation">[</span>                  <span class="token punctuation">{</span>                    <span class="token property">"apple_vendor_keyboard_key_code"</span><span class="token operator">:</span> <span class="token string">"mission_control"</span>                  <span class="token punctuation">}</span>                <span class="token punctuation">]</span><span class="token punctuation">,</span>                <span class="token property">"type"</span><span class="token operator">:</span> <span class="token string">"basic"</span>              <span class="token punctuation">}</span>            <span class="token punctuation">]</span>          <span class="token punctuation">}</span><span class="token punctuation">,</span>          <span class="token punctuation">{</span>            <span class="token property">"description"</span><span class="token operator">:</span> <span class="token string">"Use F4 to Open iTerm"</span><span class="token punctuation">,</span>            <span class="token property">"manipulators"</span><span class="token operator">:</span> <span class="token punctuation">[</span>              <span class="token punctuation">{</span>                <span class="token property">"from"</span><span class="token operator">:</span> <span class="token punctuation">{</span>                  <span class="token property">"key_code"</span><span class="token operator">:</span> <span class="token string">"f4"</span>                <span class="token punctuation">}</span><span class="token punctuation">,</span>                <span class="token property">"to"</span><span class="token operator">:</span> <span class="token punctuation">[</span>                  <span class="token punctuation">{</span>                    <span class="token property">"shell_command"</span><span class="token operator">:</span> <span class="token string">"open -a '/Applications/iTerm.app'"</span>                  <span class="token punctuation">}</span>                <span class="token punctuation">]</span><span class="token punctuation">,</span>                <span class="token property">"type"</span><span class="token operator">:</span> <span class="token string">"basic"</span>              <span class="token punctuation">}</span>            <span class="token punctuation">]</span>          <span class="token punctuation">}</span><span class="token punctuation">,</span>          <span class="token punctuation">{</span>            <span class="token property">"description"</span><span class="token operator">:</span> <span class="token string">"Use Command + F4 to Zoom"</span><span class="token punctuation">,</span>            <span class="token property">"manipulators"</span><span class="token operator">:</span> <span class="token punctuation">[</span>              <span class="token punctuation">{</span>                <span class="token property">"from"</span><span class="token operator">:</span> <span class="token punctuation">{</span>                  <span class="token property">"key_code"</span><span class="token operator">:</span> <span class="token string">"f4"</span><span class="token punctuation">,</span>                  <span class="token property">"modifiers"</span><span class="token operator">:</span> <span class="token punctuation">{</span>                    <span class="token property">"mandatory"</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"command"</span><span class="token punctuation">]</span>                  <span class="token punctuation">}</span>                <span class="token punctuation">}</span><span class="token punctuation">,</span>                <span class="token property">"to"</span><span class="token operator">:</span> <span class="token punctuation">[</span>                  <span class="token punctuation">{</span>                    <span class="token property">"key_code"</span><span class="token operator">:</span> <span class="token string">"8"</span><span class="token punctuation">,</span>                    <span class="token property">"modifiers"</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"command"</span><span class="token punctuation">,</span> <span class="token string">"option"</span><span class="token punctuation">]</span>                  <span class="token punctuation">}</span>                <span class="token punctuation">]</span><span class="token punctuation">,</span>                <span class="token property">"type"</span><span class="token operator">:</span> <span class="token string">"basic"</span>              <span class="token punctuation">}</span>            <span class="token punctuation">]</span>          <span class="token punctuation">}</span><span class="token punctuation">,</span>          <span class="token punctuation">{</span>            <span class="token property">"description"</span><span class="token operator">:</span> <span class="token string">"Use F5 to Open Sublime Text"</span><span class="token punctuation">,</span>            <span class="token property">"manipulators"</span><span class="token operator">:</span> <span class="token punctuation">[</span>              <span class="token punctuation">{</span>                <span class="token property">"from"</span><span class="token operator">:</span> <span class="token punctuation">{</span>                  <span class="token property">"key_code"</span><span class="token operator">:</span> <span class="token string">"f5"</span>                <span class="token punctuation">}</span><span class="token punctuation">,</span>                <span class="token property">"to"</span><span class="token operator">:</span> <span class="token punctuation">[</span>                  <span class="token punctuation">{</span>                    <span class="token property">"shell_command"</span><span class="token operator">:</span> <span class="token string">"open -a '/Applications/Sublime Text.app'"</span>                  <span class="token punctuation">}</span>                <span class="token punctuation">]</span><span class="token punctuation">,</span>                <span class="token property">"type"</span><span class="token operator">:</span> <span class="token string">"basic"</span>              <span class="token punctuation">}</span>            <span class="token punctuation">]</span>          <span class="token punctuation">}</span><span class="token punctuation">,</span>          <span class="token punctuation">{</span>            <span class="token property">"description"</span><span class="token operator">:</span> <span class="token string">"Use Command + F5 to Capture Text"</span><span class="token punctuation">,</span>            <span class="token property">"manipulators"</span><span class="token operator">:</span> <span class="token punctuation">[</span>              <span class="token punctuation">{</span>                <span class="token property">"from"</span><span class="token operator">:</span> <span class="token punctuation">{</span>                  <span class="token property">"key_code"</span><span class="token operator">:</span> <span class="token string">"f5"</span><span class="token punctuation">,</span>                  <span class="token property">"modifiers"</span><span class="token operator">:</span> <span class="token punctuation">{</span>                    <span class="token property">"mandatory"</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"command"</span><span class="token punctuation">]</span>                  <span class="token punctuation">}</span>                <span class="token punctuation">}</span><span class="token punctuation">,</span>                <span class="token property">"to"</span><span class="token operator">:</span> <span class="token punctuation">[</span>                  <span class="token punctuation">{</span>                    <span class="token property">"key_code"</span><span class="token operator">:</span> <span class="token string">"1"</span><span class="token punctuation">,</span>                    <span class="token property">"modifiers"</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"command"</span><span class="token punctuation">,</span> <span class="token string">"shift"</span><span class="token punctuation">]</span>                  <span class="token punctuation">}</span>                <span class="token punctuation">]</span><span class="token punctuation">,</span>                <span class="token property">"type"</span><span class="token operator">:</span> <span class="token string">"basic"</span>              <span class="token punctuation">}</span>            <span class="token punctuation">]</span>          <span class="token punctuation">}</span><span class="token punctuation">,</span>          <span class="token punctuation">{</span>            <span class="token property">"description"</span><span class="token operator">:</span> <span class="token string">"Use F6 to Open ForkLift"</span><span class="token punctuation">,</span>            <span class="token property">"manipulators"</span><span class="token operator">:</span> <span class="token punctuation">[</span>              <span class="token punctuation">{</span>                <span class="token property">"from"</span><span class="token operator">:</span> <span class="token punctuation">{</span>                  <span class="token property">"key_code"</span><span class="token operator">:</span> <span class="token string">"f6"</span>                <span class="token punctuation">}</span><span class="token punctuation">,</span>                <span class="token property">"to"</span><span class="token operator">:</span> <span class="token punctuation">[</span>                  <span class="token punctuation">{</span>                    <span class="token property">"shell_command"</span><span class="token operator">:</span> <span class="token string">"open -a '/Applications/setapp/ForkLift.app'"</span>                  <span class="token punctuation">}</span>                <span class="token punctuation">]</span><span class="token punctuation">,</span>                <span class="token property">"type"</span><span class="token operator">:</span> <span class="token string">"basic"</span>              <span class="token punctuation">}</span>            <span class="token punctuation">]</span>          <span class="token punctuation">}</span><span class="token punctuation">,</span>          <span class="token punctuation">{</span>            <span class="token property">"description"</span><span class="token operator">:</span> <span class="token string">"Use Command + F6 to Capture Screen"</span><span class="token punctuation">,</span>            <span class="token property">"manipulators"</span><span class="token operator">:</span> <span class="token punctuation">[</span>              <span class="token punctuation">{</span>                <span class="token property">"from"</span><span class="token operator">:</span> <span class="token punctuation">{</span>                  <span class="token property">"key_code"</span><span class="token operator">:</span> <span class="token string">"f6"</span><span class="token punctuation">,</span>                  <span class="token property">"modifiers"</span><span class="token operator">:</span> <span class="token punctuation">{</span>                    <span class="token property">"mandatory"</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"command"</span><span class="token punctuation">]</span>                  <span class="token punctuation">}</span>                <span class="token punctuation">}</span><span class="token punctuation">,</span>                <span class="token property">"to"</span><span class="token operator">:</span> <span class="token punctuation">[</span>                  <span class="token punctuation">{</span>                    <span class="token property">"key_code"</span><span class="token operator">:</span> <span class="token string">"3"</span><span class="token punctuation">,</span>                    <span class="token property">"modifiers"</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"command"</span><span class="token punctuation">,</span> <span class="token string">"shift"</span><span class="token punctuation">]</span>                  <span class="token punctuation">}</span>                <span class="token punctuation">]</span><span class="token punctuation">,</span>                <span class="token property">"type"</span><span class="token operator">:</span> <span class="token string">"basic"</span>              <span class="token punctuation">}</span>            <span class="token punctuation">]</span>          <span class="token punctuation">}</span><span class="token punctuation">,</span>          <span class="token punctuation">{</span>            <span class="token property">"description"</span><span class="token operator">:</span> <span class="token string">"Use F7 to Open Typora"</span><span class="token punctuation">,</span>            <span class="token property">"manipulators"</span><span class="token operator">:</span> <span class="token punctuation">[</span>              <span class="token punctuation">{</span>                <span class="token property">"from"</span><span class="token operator">:</span> <span class="token punctuation">{</span>                  <span class="token property">"key_code"</span><span class="token operator">:</span> <span class="token string">"f7"</span>                <span class="token punctuation">}</span><span class="token punctuation">,</span>                <span class="token property">"to"</span><span class="token operator">:</span> <span class="token punctuation">[</span>                  <span class="token punctuation">{</span>                    <span class="token property">"shell_command"</span><span class="token operator">:</span> <span class="token string">"open -a '/Applications/Typora.app'"</span>                  <span class="token punctuation">}</span>                <span class="token punctuation">]</span><span class="token punctuation">,</span>                <span class="token property">"type"</span><span class="token operator">:</span> <span class="token string">"basic"</span>              <span class="token punctuation">}</span>            <span class="token punctuation">]</span>          <span class="token punctuation">}</span><span class="token punctuation">,</span>          <span class="token punctuation">{</span>            <span class="token property">"description"</span><span class="token operator">:</span> <span class="token string">"Use Command + F7 to Record Screen"</span><span class="token punctuation">,</span>            <span class="token property">"manipulators"</span><span class="token operator">:</span> <span class="token punctuation">[</span>              <span class="token punctuation">{</span>                <span class="token property">"from"</span><span class="token operator">:</span> <span class="token punctuation">{</span>                  <span class="token property">"key_code"</span><span class="token operator">:</span> <span class="token string">"f7"</span><span class="token punctuation">,</span>                  <span class="token property">"modifiers"</span><span class="token operator">:</span> <span class="token punctuation">{</span>                    <span class="token property">"mandatory"</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"command"</span><span class="token punctuation">]</span>                  <span class="token punctuation">}</span>                <span class="token punctuation">}</span><span class="token punctuation">,</span>                <span class="token property">"to"</span><span class="token operator">:</span> <span class="token punctuation">[</span>                  <span class="token punctuation">{</span>                    <span class="token property">"key_code"</span><span class="token operator">:</span> <span class="token string">"7"</span><span class="token punctuation">,</span>                    <span class="token property">"modifiers"</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"command"</span><span class="token punctuation">,</span> <span class="token string">"shift"</span><span class="token punctuation">]</span>                  <span class="token punctuation">}</span>                <span class="token punctuation">]</span><span class="token punctuation">,</span>                <span class="token property">"type"</span><span class="token operator">:</span> <span class="token string">"basic"</span>              <span class="token punctuation">}</span>            <span class="token punctuation">]</span>          <span class="token punctuation">}</span><span class="token punctuation">,</span>          <span class="token punctuation">{</span>            <span class="token property">"description"</span><span class="token operator">:</span> <span class="token string">"Use F8 to Open MOJisho"</span><span class="token punctuation">,</span>            <span class="token property">"manipulators"</span><span class="token operator">:</span> <span class="token punctuation">[</span>              <span class="token punctuation">{</span>                <span class="token property">"from"</span><span class="token operator">:</span> <span class="token punctuation">{</span>                  <span class="token property">"key_code"</span><span class="token operator">:</span> <span class="token string">"f8"</span>                <span class="token punctuation">}</span><span class="token punctuation">,</span>                <span class="token property">"to"</span><span class="token operator">:</span> <span class="token punctuation">[</span>                  <span class="token punctuation">{</span>                    <span class="token property">"shell_command"</span><span class="token operator">:</span> <span class="token string">"open -a '/Applications/MOJisho.app'"</span>                  <span class="token punctuation">}</span>                <span class="token punctuation">]</span><span class="token punctuation">,</span>                <span class="token property">"type"</span><span class="token operator">:</span> <span class="token string">"basic"</span>              <span class="token punctuation">}</span>            <span class="token punctuation">]</span>          <span class="token punctuation">}</span><span class="token punctuation">,</span>          <span class="token punctuation">{</span>            <span class="token property">"description"</span><span class="token operator">:</span> <span class="token string">"Use Command + F8 to Play/Pause"</span><span class="token punctuation">,</span>            <span class="token property">"manipulators"</span><span class="token operator">:</span> <span class="token punctuation">[</span>              <span class="token punctuation">{</span>                <span class="token property">"from"</span><span class="token operator">:</span> <span class="token punctuation">{</span>                  <span class="token property">"key_code"</span><span class="token operator">:</span> <span class="token string">"f8"</span><span class="token punctuation">,</span>                  <span class="token property">"modifiers"</span><span class="token operator">:</span> <span class="token punctuation">{</span>                    <span class="token property">"mandatory"</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"command"</span><span class="token punctuation">]</span>                  <span class="token punctuation">}</span>                <span class="token punctuation">}</span><span class="token punctuation">,</span>                <span class="token property">"to"</span><span class="token operator">:</span> <span class="token punctuation">[</span>                  <span class="token punctuation">{</span>                    <span class="token property">"consumer_key_code"</span><span class="token operator">:</span> <span class="token string">"play_or_pause"</span>                  <span class="token punctuation">}</span>                <span class="token punctuation">]</span><span class="token punctuation">,</span>                <span class="token property">"type"</span><span class="token operator">:</span> <span class="token string">"basic"</span>              <span class="token punctuation">}</span>            <span class="token punctuation">]</span>          <span class="token punctuation">}</span><span class="token punctuation">,</span>          <span class="token punctuation">{</span>            <span class="token property">"description"</span><span class="token operator">:</span> <span class="token string">"Use F9 to Open ChatGPT"</span><span class="token punctuation">,</span>            <span class="token property">"manipulators"</span><span class="token operator">:</span> <span class="token punctuation">[</span>              <span class="token punctuation">{</span>                <span class="token property">"from"</span><span class="token operator">:</span> <span class="token punctuation">{</span>                  <span class="token property">"key_code"</span><span class="token operator">:</span> <span class="token string">"f9"</span>                <span class="token punctuation">}</span><span class="token punctuation">,</span>                <span class="token property">"to"</span><span class="token operator">:</span> <span class="token punctuation">[</span>                  <span class="token punctuation">{</span>                    <span class="token property">"shell_command"</span><span class="token operator">:</span> <span class="token string">"open -a '/Applications/ChatGPT.app'"</span>                  <span class="token punctuation">}</span>                <span class="token punctuation">]</span><span class="token punctuation">,</span>                <span class="token property">"type"</span><span class="token operator">:</span> <span class="token string">"basic"</span>              <span class="token punctuation">}</span>            <span class="token punctuation">]</span>          <span class="token punctuation">}</span><span class="token punctuation">,</span>                    <span class="token punctuation">{</span>            <span class="token property">"description"</span><span class="token operator">:</span> <span class="token string">"Use Command + F9 run PixelSnap"</span><span class="token punctuation">,</span>            <span class="token property">"manipulators"</span><span class="token operator">:</span> <span class="token punctuation">[</span>              <span class="token punctuation">{</span>                <span class="token property">"from"</span><span class="token operator">:</span> <span class="token punctuation">{</span>                  <span class="token property">"key_code"</span><span class="token operator">:</span> <span class="token string">"f9"</span><span class="token punctuation">,</span>                  <span class="token property">"modifiers"</span><span class="token operator">:</span> <span class="token punctuation">{</span>                    <span class="token property">"mandatory"</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"command"</span><span class="token punctuation">]</span>                  <span class="token punctuation">}</span>                <span class="token punctuation">}</span><span class="token punctuation">,</span>                <span class="token property">"to"</span><span class="token operator">:</span> <span class="token punctuation">[</span>                  <span class="token punctuation">{</span>                    <span class="token property">"key_code"</span><span class="token operator">:</span> <span class="token string">"f"</span><span class="token punctuation">,</span>                    <span class="token property">"modifiers"</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"command"</span><span class="token punctuation">,</span> <span class="token string">"shift"</span><span class="token punctuation">]</span>                  <span class="token punctuation">}</span>                <span class="token punctuation">]</span><span class="token punctuation">,</span>                <span class="token property">"type"</span><span class="token operator">:</span> <span class="token string">"basic"</span>              <span class="token punctuation">}</span>            <span class="token punctuation">]</span>          <span class="token punctuation">}</span><span class="token punctuation">,</span>          <span class="token punctuation">{</span>            <span class="token property">"description"</span><span class="token operator">:</span> <span class="token string">"Use F10 to Open Gitfox"</span><span class="token punctuation">,</span>            <span class="token property">"manipulators"</span><span class="token operator">:</span> <span class="token punctuation">[</span>              <span class="token punctuation">{</span>                <span class="token property">"from"</span><span class="token operator">:</span> <span class="token punctuation">{</span>                  <span class="token property">"key_code"</span><span class="token operator">:</span> <span class="token string">"f10"</span>                <span class="token punctuation">}</span><span class="token punctuation">,</span>                <span class="token property">"to"</span><span class="token operator">:</span> <span class="token punctuation">[</span>                  <span class="token punctuation">{</span>                    <span class="token property">"shell_command"</span><span class="token operator">:</span> <span class="token string">"open -a '/Applications/setapp/Gitfox.app'"</span>                  <span class="token punctuation">}</span>                <span class="token punctuation">]</span><span class="token punctuation">,</span>                <span class="token property">"type"</span><span class="token operator">:</span> <span class="token string">"basic"</span>              <span class="token punctuation">}</span>            <span class="token punctuation">]</span>          <span class="token punctuation">}</span><span class="token punctuation">,</span>          <span class="token punctuation">{</span>            <span class="token property">"description"</span><span class="token operator">:</span> <span class="token string">"Use Command + F10 to Mute"</span><span class="token punctuation">,</span>            <span class="token property">"manipulators"</span><span class="token operator">:</span> <span class="token punctuation">[</span>              <span class="token punctuation">{</span>                <span class="token property">"from"</span><span class="token operator">:</span> <span class="token punctuation">{</span>                  <span class="token property">"key_code"</span><span class="token operator">:</span> <span class="token string">"f10"</span><span class="token punctuation">,</span>                  <span class="token property">"modifiers"</span><span class="token operator">:</span> <span class="token punctuation">{</span>                    <span class="token property">"mandatory"</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"command"</span><span class="token punctuation">]</span>                  <span class="token punctuation">}</span>                <span class="token punctuation">}</span><span class="token punctuation">,</span>                <span class="token property">"to"</span><span class="token operator">:</span> <span class="token punctuation">[</span>                  <span class="token punctuation">{</span>                    <span class="token property">"consumer_key_code"</span><span class="token operator">:</span> <span class="token string">"mute"</span>                  <span class="token punctuation">}</span>                <span class="token punctuation">]</span><span class="token punctuation">,</span>                <span class="token property">"type"</span><span class="token operator">:</span> <span class="token string">"basic"</span>              <span class="token punctuation">}</span>            <span class="token punctuation">]</span>          <span class="token punctuation">}</span><span class="token punctuation">,</span>          <span class="token punctuation">{</span>            <span class="token property">"description"</span><span class="token operator">:</span> <span class="token string">"Use F11 to Open WebStorm"</span><span class="token punctuation">,</span>            <span class="token property">"manipulators"</span><span class="token operator">:</span> <span class="token punctuation">[</span>              <span class="token punctuation">{</span>                <span class="token property">"from"</span><span class="token operator">:</span> <span class="token punctuation">{</span>                  <span class="token property">"key_code"</span><span class="token operator">:</span> <span class="token string">"f11"</span>                <span class="token punctuation">}</span><span class="token punctuation">,</span>                <span class="token property">"to"</span><span class="token operator">:</span> <span class="token punctuation">[</span>                  <span class="token punctuation">{</span>                    <span class="token property">"shell_command"</span><span class="token operator">:</span> <span class="token string">"open -a '/Users/oomusou/Applications/WebStorm.app'"</span>                  <span class="token punctuation">}</span>                <span class="token punctuation">]</span><span class="token punctuation">,</span>                <span class="token property">"type"</span><span class="token operator">:</span> <span class="token string">"basic"</span>              <span class="token punctuation">}</span>            <span class="token punctuation">]</span>          <span class="token punctuation">}</span><span class="token punctuation">,</span>                    <span class="token punctuation">{</span>            <span class="token property">"description"</span><span class="token operator">:</span> <span class="token string">"Use Command + F11 to Decrease Volumn"</span><span class="token punctuation">,</span>            <span class="token property">"manipulators"</span><span class="token operator">:</span> <span class="token punctuation">[</span>              <span class="token punctuation">{</span>                <span class="token property">"from"</span><span class="token operator">:</span> <span class="token punctuation">{</span>                  <span class="token property">"key_code"</span><span class="token operator">:</span> <span class="token string">"f10"</span><span class="token punctuation">,</span>                  <span class="token property">"modifiers"</span><span class="token operator">:</span> <span class="token punctuation">{</span>                    <span class="token property">"mandatory"</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"command"</span><span class="token punctuation">]</span>                  <span class="token punctuation">}</span>                <span class="token punctuation">}</span><span class="token punctuation">,</span>                <span class="token property">"to"</span><span class="token operator">:</span> <span class="token punctuation">[</span>                  <span class="token punctuation">{</span>                    <span class="token property">"consumer_key_code"</span><span class="token operator">:</span> <span class="token string">"volume_decrement"</span>                  <span class="token punctuation">}</span>                <span class="token punctuation">]</span><span class="token punctuation">,</span>                <span class="token property">"type"</span><span class="token operator">:</span> <span class="token string">"basic"</span>              <span class="token punctuation">}</span>            <span class="token punctuation">]</span>          <span class="token punctuation">}</span><span class="token punctuation">,</span>          <span class="token punctuation">{</span>            <span class="token property">"description"</span><span class="token operator">:</span> <span class="token string">"Use F12 to Open FireFox"</span><span class="token punctuation">,</span>            <span class="token property">"manipulators"</span><span class="token operator">:</span> <span class="token punctuation">[</span>              <span class="token punctuation">{</span>                <span class="token property">"from"</span><span class="token operator">:</span> <span class="token punctuation">{</span>                  <span class="token property">"key_code"</span><span class="token operator">:</span> <span class="token string">"f12"</span>                <span class="token punctuation">}</span><span class="token punctuation">,</span>                <span class="token property">"to"</span><span class="token operator">:</span> <span class="token punctuation">[</span>                  <span class="token punctuation">{</span>                    <span class="token property">"shell_command"</span><span class="token operator">:</span> <span class="token string">"open -a '/Applications/Firefox.app'"</span>                  <span class="token punctuation">}</span>                <span class="token punctuation">]</span><span class="token punctuation">,</span>                <span class="token property">"type"</span><span class="token operator">:</span> <span class="token string">"basic"</span>              <span class="token punctuation">}</span>            <span class="token punctuation">]</span>          <span class="token punctuation">}</span><span class="token punctuation">,</span>          <span class="token punctuation">{</span>            <span class="token property">"description"</span><span class="token operator">:</span> <span class="token string">"Use Option + F12 to Open Chrome"</span><span class="token punctuation">,</span>            <span class="token property">"manipulators"</span><span class="token operator">:</span> <span class="token punctuation">[</span>              <span class="token punctuation">{</span>                <span class="token property">"from"</span><span class="token operator">:</span> <span class="token punctuation">{</span>                  <span class="token property">"key_code"</span><span class="token operator">:</span> <span class="token string">"f12"</span><span class="token punctuation">,</span>                  <span class="token property">"modifiers"</span><span class="token operator">:</span> <span class="token punctuation">{</span>                    <span class="token property">"mandatory"</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"option"</span><span class="token punctuation">]</span>                  <span class="token punctuation">}</span>                <span class="token punctuation">}</span><span class="token punctuation">,</span>                <span class="token property">"to"</span><span class="token operator">:</span> <span class="token punctuation">[</span>                  <span class="token punctuation">{</span>                    <span class="token property">"shell_command"</span><span class="token operator">:</span> <span class="token string">"open -a '/Applications/Google Chrome.app'"</span>                  <span class="token punctuation">}</span>                <span class="token punctuation">]</span><span class="token punctuation">,</span>                <span class="token property">"type"</span><span class="token operator">:</span> <span class="token string">"basic"</span>              <span class="token punctuation">}</span>            <span class="token punctuation">]</span>          <span class="token punctuation">}</span><span class="token punctuation">,</span>          <span class="token punctuation">{</span>            <span class="token property">"description"</span><span class="token operator">:</span> <span class="token string">"Use Command + F12 to Increase Volumn"</span><span class="token punctuation">,</span>            <span class="token property">"manipulators"</span><span class="token operator">:</span> <span class="token punctuation">[</span>              <span class="token punctuation">{</span>                <span class="token property">"from"</span><span class="token operator">:</span> <span class="token punctuation">{</span>                  <span class="token property">"key_code"</span><span class="token operator">:</span> <span class="token string">"f10"</span><span class="token punctuation">,</span>                  <span class="token property">"modifiers"</span><span class="token operator">:</span> <span class="token punctuation">{</span>                    <span class="token property">"mandatory"</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"command"</span><span class="token punctuation">]</span>                  <span class="token punctuation">}</span>                <span class="token punctuation">}</span><span class="token punctuation">,</span>                <span class="token property">"to"</span><span class="token operator">:</span> <span class="token punctuation">[</span>                  <span class="token punctuation">{</span>                    <span class="token property">"consumer_key_code"</span><span class="token operator">:</span> <span class="token string">"volume_increment"</span>                  <span class="token punctuation">}</span>                <span class="token punctuation">]</span><span class="token punctuation">,</span>                <span class="token property">"type"</span><span class="token operator">:</span> <span class="token string">"basic"</span>              <span class="token punctuation">}</span>            <span class="token punctuation">]</span>          <span class="token punctuation">}</span>        <span class="token punctuation">]</span>      <span class="token punctuation">}</span><span class="token punctuation">,</span>      <span class="token property">"devices"</span><span class="token operator">:</span> <span class="token punctuation">[</span>        <span class="token punctuation">{</span>          <span class="token property">"disable_built_in_keyboard_if_exists"</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>          <span class="token property">"fn_function_keys"</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>          <span class="token property">"identifiers"</span><span class="token operator">:</span> <span class="token punctuation">{</span>            <span class="token property">"is_keyboard"</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>            <span class="token property">"is_pointing_device"</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>            <span class="token property">"product_id"</span><span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span>            <span class="token property">"vendor_id"</span><span class="token operator">:</span> <span class="token number">0</span>          <span class="token punctuation">}</span><span class="token punctuation">,</span>          <span class="token property">"ignore"</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>          <span class="token property">"manipulate_caps_lock_led"</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>          <span class="token property">"simple_modifications"</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>          <span class="token property">"treat_as_built_in_keyboard"</span><span class="token operator">:</span> <span class="token boolean">false</span>        <span class="token punctuation">}</span><span class="token punctuation">,</span>        <span class="token punctuation">{</span>          <span class="token property">"disable_built_in_keyboard_if_exists"</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>          <span class="token property">"fn_function_keys"</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>          <span class="token property">"identifiers"</span><span class="token operator">:</span> <span class="token punctuation">{</span>            <span class="token property">"is_keyboard"</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>            <span class="token property">"is_pointing_device"</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>            <span class="token property">"product_id"</span><span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span>            <span class="token property">"vendor_id"</span><span class="token operator">:</span> <span class="token number">0</span>          <span class="token punctuation">}</span><span class="token punctuation">,</span>          <span class="token property">"ignore"</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>          <span class="token property">"manipulate_caps_lock_led"</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>          <span class="token property">"simple_modifications"</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>          <span class="token property">"treat_as_built_in_keyboard"</span><span class="token operator">:</span> <span class="token boolean">false</span>        <span class="token punctuation">}</span>      <span class="token punctuation">]</span><span class="token punctuation">,</span>      <span class="token property">"name"</span><span class="token operator">:</span> <span class="token string">"Default profile"</span><span class="token punctuation">,</span>      <span class="token property">"parameters"</span><span class="token operator">:</span> <span class="token punctuation">{</span>        <span class="token property">"delay_milliseconds_before_open_device"</span><span class="token operator">:</span> <span class="token number">1000</span>      <span class="token punctuation">}</span><span class="token punctuation">,</span>      <span class="token property">"selected"</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>      <span class="token property">"simple_modifications"</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>      <span class="token property">"virtual_hid_keyboard"</span><span class="token operator">:</span> <span class="token punctuation">{</span>        <span class="token property">"country_code"</span><span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span>        <span class="token property">"indicate_sticky_modifier_keys_state"</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>        <span class="token property">"mouse_key_xy_scale"</span><span class="token operator">:</span> <span class="token number">100</span>      <span class="token punctuation">}</span>    <span class="token punctuation">}</span>  <span class="token punctuation">]</span><span class="token punctuation">}</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><p><code>karabiner.json</code> 位於 <code>/Users/oomosou/.config/karabiner</code> 目錄下。</p><h2 id="Shell-Command"><a href="#Shell-Command" class="headerlink" title="Shell Command"></a>Shell Command</h2><p><strong>Line 19</strong></p><pre class="line-numbers highlight language-json"><code class="language-json"><span class="token property">"rules"</span><span class="token operator">:</span> <span class="token punctuation">[</span><span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre><ul><li><strong>rules</strong>：若要使用 Complex Modification，要統一寫在 <code>rules</code> 下</li></ul><p><strong>Line 20</strong></p><pre class="line-numbers highlight language-json"><code class="language-json"><span class="token punctuation">{</span>  <span class="token property">"description"</span><span class="token operator">:</span> <span class="token string">"Use F1 to Open Safari"</span><span class="token punctuation">,</span>  <span class="token property">"manipulators"</span><span class="token operator">:</span> <span class="token punctuation">[</span>    <span class="token punctuation">{</span>      <span class="token property">"from"</span><span class="token operator">:</span> <span class="token punctuation">{</span>        <span class="token property">"key_code"</span><span class="token operator">:</span> <span class="token string">"f1"</span>      <span class="token punctuation">}</span><span class="token punctuation">,</span>      <span class="token property">"to"</span><span class="token operator">:</span> <span class="token punctuation">[</span>        <span class="token punctuation">{</span>          <span class="token property">"shell_command"</span><span class="token operator">:</span> <span class="token string">"open -a '/Applications/Safari.app'"</span>        <span class="token punctuation">}</span>      <span class="token punctuation">]</span><span class="token punctuation">,</span>      <span class="token property">"type"</span><span class="token operator">:</span> <span class="token string">"basic"</span>    <span class="token punctuation">}</span>  <span class="token punctuation">]</span><span class="token punctuation">}</span><span class="token punctuation">,</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><ul><li><strong>from.key_code</strong> : 設定 <code>Fn</code></li><li><strong>to.shell_command</strong> : 設定 <code>Fn</code> 要開啟的 app</li></ul><h2 id="Shortcut"><a href="#Shortcut" class="headerlink" title="Shortcut"></a>Shortcut</h2><p><strong>Line 184</strong></p><pre class="line-numbers highlight language-json"><code class="language-json"><span class="token punctuation">{</span>  <span class="token property">"description"</span><span class="token operator">:</span> <span class="token string">"Use Command + F5 to Capture Text"</span><span class="token punctuation">,</span>  <span class="token property">"manipulators"</span><span class="token operator">:</span> <span class="token punctuation">[</span>    <span class="token punctuation">{</span>      <span class="token property">"from"</span><span class="token operator">:</span> <span class="token punctuation">{</span>        <span class="token property">"key_code"</span><span class="token operator">:</span> <span class="token string">"f5"</span><span class="token punctuation">,</span>        <span class="token property">"modifiers"</span><span class="token operator">:</span> <span class="token punctuation">{</span>          <span class="token property">"mandatory"</span><span class="token operator">:</span> <span class="token punctuation">[</span>            <span class="token string">"command"</span>          <span class="token punctuation">]</span>        <span class="token punctuation">}</span>      <span class="token punctuation">}</span><span class="token punctuation">,</span>      <span class="token property">"to"</span><span class="token operator">:</span> <span class="token punctuation">[</span>        <span class="token punctuation">{</span>          <span class="token property">"key_code"</span><span class="token operator">:</span> <span class="token string">"1"</span><span class="token punctuation">,</span>          <span class="token property">"modifiers"</span><span class="token operator">:</span> <span class="token punctuation">[</span>            <span class="token string">"command"</span><span class="token punctuation">,</span>            <span class="token string">"shift"</span>          <span class="token punctuation">]</span>        <span class="token punctuation">}</span>      <span class="token punctuation">]</span><span class="token punctuation">,</span>      <span class="token property">"type"</span><span class="token operator">:</span> <span class="token string">"basic"</span>    <span class="token punctuation">}</span>  <span class="token punctuation">]</span><span class="token punctuation">}</span><span class="token punctuation">,</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><ul><li><strong>manipulators.from.key_code</strong>：設定 <code>Fn</code> 鍵</li><li><strong>manipulators.to.key_code</strong>：設定 shortcut 主鍵</li><li><strong>manipulators.to.modifiers</strong>：設定 shortcut 的輔助鍵</li><li><strong>manipulators.type</strong>：shortcut 一定要設定為 <code>basic</code></li></ul><h2 id="System-Function"><a href="#System-Function" class="headerlink" title="System Function"></a>System Function</h2><p><strong>Line 36</strong></p><pre class="line-numbers highlight language-json"><code class="language-json"><span class="token punctuation">{</span>  <span class="token property">"description"</span><span class="token operator">:</span> <span class="token string">"Use Command + F1 to Decrease Brightness"</span><span class="token punctuation">,</span>  <span class="token property">"manipulators"</span><span class="token operator">:</span> <span class="token punctuation">[</span>    <span class="token punctuation">{</span>      <span class="token property">"from"</span><span class="token operator">:</span> <span class="token punctuation">{</span>        <span class="token property">"key_code"</span><span class="token operator">:</span> <span class="token string">"f1"</span><span class="token punctuation">,</span>        <span class="token property">"modifiers"</span><span class="token operator">:</span> <span class="token punctuation">{</span>          <span class="token property">"mandatory"</span><span class="token operator">:</span> <span class="token punctuation">[</span>            <span class="token string">"command"</span>          <span class="token punctuation">]</span>        <span class="token punctuation">}</span>      <span class="token punctuation">}</span><span class="token punctuation">,</span>      <span class="token property">"to"</span><span class="token operator">:</span> <span class="token punctuation">[</span>        <span class="token punctuation">{</span>          <span class="token property">"consumer_key_code"</span><span class="token operator">:</span> <span class="token string">"display_brightness_decrement"</span>        <span class="token punctuation">}</span>      <span class="token punctuation">]</span><span class="token punctuation">,</span>      <span class="token property">"type"</span><span class="token operator">:</span> <span class="token string">"basic"</span>    <span class="token punctuation">}</span>  <span class="token punctuation">]</span><span class="token punctuation">}</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><ul><li><strong>manipulators.from.key_code</strong>：設定 <code>Fn</code></li><li><strong>manipulators.from.modifiers.mandatory</strong>：設定 <code>Fn</code> 的 modifier key</li><li><strong>manipulators.to.consumer_key_code</strong>：設定系統功能</li></ul><h2 id="Conclusion"><a href="#Conclusion" class="headerlink" title="Conclusion"></a>Conclusion</h2><ul><li>事實上 Karabiner-Elements 的功能非常複雜，本文只使用了最基本的重新定義 <code>Fn</code> 鍵</li><li><code>Fn</code> 鍵若要執行 shell command 可使用 <code>fn_function_keys</code> ，亦可使用 Complex Modification，本文統一使用 Complex Modification</li><li><code>F6</code> 與 <code>F7</code> 因為很少用到原本功能，因此重新定義成 Capture Text 與 Sleep</li><li><code>F3</code> 與 <code>F4</code> 目前能維持原本的 Mission Control 的 Spotlight，若將來有其他需求，亦可率先選擇這兩個按鍵自行定義</li><li>當 <code>Fn</code> 鍵可搭配 <code>⌘</code> 後，則可同時保留 <code>切換 app</code> 與 <code>原本功能</code>，若有更多的 app 要切換，可搭配 <code>⌥</code>，如此實用性已經可超越 Touch Bar</li></ul>]]></content>
    
    
    <summary type="html">&lt;p&gt;自從 M2 Macbook Air 重新將 &lt;code&gt;Fn&lt;/code&gt; 鍵回歸取代 Touch Bar 後，如何善用 &lt;code&gt;Fn&lt;/code&gt; 鍵就成為重要的課題，畢竟 macOS 不像 Windows 常常會使用到 &lt;code&gt;Fn&lt;/code&gt; 鍵。我們可使用 Karabiner-Elements 重新定義 &lt;code&gt;Fn&lt;/code&gt; 鍵取代 Touch Bar 切換 app，並保留 &lt;code&gt;⌘&lt;/code&gt; + &lt;code&gt;Fn&lt;/code&gt; 執行原本的功能。 &lt;/p&gt;</summary>
    
    
    
    
    <category term="Karabiner" scheme="https://yabai.tw/tags/Karabiner/"/>
    
  </entry>
  
  <entry>
    <title>我的 ForkLift 基本設定</title>
    <link href="https://yabai.tw/macos/setup/forklift/"/>
    <id>https://yabai.tw/macos/setup/forklift/</id>
    <published>2024-09-22T08:04:33.000Z</published>
    <updated>2024-09-22T08:57:24.707Z</updated>
    
    <content type="html"><![CDATA[<p>ForkLift 4.0</p><a id="more"></a><h2 id="Setapp"><a href="#Setapp" class="headerlink" title="Setapp"></a>Setapp</h2><p><img src="/images/macos/setup/forklift/forklift005.webp" alt="forklift005"></p><ul><li>使用 Setapp 安裝 ForkLift</li></ul><h2 id="Theme"><a href="#Theme" class="headerlink" title="Theme"></a>Theme</h2><p><img src="/images/macos/setup/forklift/forklift004.webp" alt="forklift004"></p><ul><li><code>Theme</code>：<code>Dark</code></li></ul><h2 id="Shortcuts"><a href="#Shortcuts" class="headerlink" title="Shortcuts"></a>Shortcuts</h2><ul><li><code>Back</code>：⌫</li><li><code>Open</code>：↩</li><li><code>Copy to</code>：⌘ ⌥ C</li><li><code>Move to</code>：⌘ ⌥ M</li><li><code>Rename</code>：⌘ ⌥ R</li><li><code>Move to Trash</code>：⌘ ⌫</li><li><code>Select First Tab</code>：⌃ 1</li><li><code>Select Second Tab</code>：⌃ 2</li><li><code>Select Third Tab</code>：⌃ 3</li><li><code>Select Fourth Tab</code>：⌃ 4</li></ul><h2 id="Transfers"><a href="#Transfers" class="headerlink" title="Transfers"></a>Transfers</h2><p><img src="/images/macos/setup/forklift/forklift001.webp" alt="forklift001"></p><ul><li><code>Replace policy</code>：<code>Replace</code></li></ul><h2 id="Two-Panes"><a href="#Two-Panes" class="headerlink" title="Two Panes"></a>Two Panes</h2><p><img src="/images/macos/setup/forklift/forklift002.webp" alt="forklift002"></p><ul><li><code>View</code><ul><li><code>Hide Sidebar</code></li><li><code>Hide Preview</code></li><li><code>Hide Devices</code></li><li><code>Hide Toolbar</code></li><li><code>Hide Title Bar</code></li><li><code>Show Pathbar</code></li></ul></li><li>左<ul><li><code>vocabulary</code>：<code>MyMarkdown/Nihonngo/vocabulary</code></li><li><code>Nihonngo</code>：<code>MyMarkdown/Nihonngo</code></li><li><code>_lecture</code>：<code>MyMarkdown/_lecture</code></li><li><code>_post</code>：<code>MyBlog/source/_posts</code></li></ul></li><li>右<ul><li><code>vacabulary</code>：<code>MyBlog/source/_posts/nihonngo/vocabulary</code></li><li><code>nihonngo</code>：<code>MyBlog/source/_posts/nihonngo</code></li><li><code>images</code>：<code>MyBlog/source/images</code></li><li><code>_template</code>：<code>MyMarkdown/_template</code></li></ul></li></ul><h2 id="View-Options"><a href="#View-Options" class="headerlink" title="View Options"></a>View Options</h2><p><img src="/images/macos/setup/forklift/forklift003.webp" alt="forklift003"></p><ul><li><code>Text Size</code>：<code>28</code></li><li><code>Size</code>：<code>Off</code></li><li><code>Date modified</code>：<code>Off</code></li></ul><h2 id="Conclusion"><a href="#Conclusion" class="headerlink" title="Conclusion"></a>Conclusion</h2><ul><li>因為 BetterTouchTool 使用了 TouchBar，所以 ForkLift 的 shortcut 以不使用 <code>fn</code> 為原則</li><li>ForkLift 最大的價值就在它的 Dual Pane，然而 Dual Pane 就是要用 Keyboard 才會發揮生產力，ForkLift 雖然內建 Finder 與 Command 兩套 Shortcut，但也可以修改成自己順手的方式</li></ul>]]></content>
    
    
    <summary type="html">&lt;p&gt;ForkLift 4.0&lt;/p&gt;</summary>
    
    
    
    
    <category term="ForkLift" scheme="https://yabai.tw/tags/ForkLift/"/>
    
  </entry>
  
  <entry>
    <title>我的 PixelSnap 基本設定</title>
    <link href="https://yabai.tw/macos/setup/pixelsnap/"/>
    <id>https://yabai.tw/macos/setup/pixelsnap/</id>
    <published>2024-09-22T07:55:08.000Z</published>
    <updated>2024-09-22T08:57:24.666Z</updated>
    
    <content type="html"><![CDATA[<p>本文記錄我的 PixelSnap 基本設定。</p><a id="more"></a><h2 id="Version"><a href="#Version" class="headerlink" title="Version"></a>Version</h2><p>PixelSnap 2.6</p><h2 id="General"><a href="#General" class="headerlink" title="General"></a>General</h2><p><img src="/images/macos/setup/pixelsnap/snap01.webp" alt="snap01"></p><ul><li><code>Language</code>：<code>English</code></li><li><code>Startup</code>：<code>Start at login</code></li><li><code>Menu Bar (Show icon)</code>：<code>Off</code></li></ul><p><img src="/images/macos/setup/pixelsnap/snap02.webp" alt="snap02"></p><ul><li><code>Global Hotkey</code>：⇧ ⌘ F</li></ul><h2 id="Conclusion"><a href="#Conclusion" class="headerlink" title="Conclusion"></a>Conclusion</h2><ul><li>PixelSnap 用來測量 Figma 的距離比例很好用</li></ul>]]></content>
    
    
    <summary type="html">&lt;p&gt;本文記錄我的 PixelSnap 基本設定。&lt;/p&gt;</summary>
    
    
    
    
    <category term="PixelSnap" scheme="https://yabai.tw/tags/PixelSnap/"/>
    
  </entry>
  
  <entry>
    <title>時(とき[2])、時(とき[1])</title>
    <link href="https://yabai.tw/nihonngo/comparison/noun/toki/"/>
    <id>https://yabai.tw/nihonngo/comparison/noun/toki/</id>
    <published>2024-09-21T12:15:11.000Z</published>
    <updated>2024-09-22T08:57:24.546Z</updated>
    
    <content type="html"><![CDATA[<p><code>時</code> 的 <code>重音</code>可以為 <code>2</code>、亦可為 <code>1</code>，端看之前的 <code>動詞</code> 的 <code>重音</code> 而定。</p><a id="more"></a><h2 id="単語"><a href="#単語" class="headerlink" title="単語"></a>単語</h2><ul><li>時(とき) [2]：<code>名</code> 時</li><li>時(とき) [1]：<code>名</code> 時</li></ul><h2 id="時-とき-2"><a href="#時-とき-2" class="headerlink" title="時(とき[2])"></a>時(とき[2])</h2><p><code>家を出る時、鍵を閉めたっけ…。</code></p><p>出門的時候，鑰匙是不是鎖上了來著？</p><blockquote><p><code>時</code> 前 <code>非0</code> 時，則 <code>時</code> 為 <code>2</code></p></blockquote><ul><li>家(いえ) [2]：<code>名</code> 家</li><li>を：<code>格助</code> 接受 <code>出る</code> 的 <code>賓語</code></li><li>出(で)る [1]：<code>動II</code> <code>自動</code> 離開</li><li>時(とき) [2]：<code>名</code> 時</li><li>鍵(かぎ)を閉(し)める [0]：<code>慣</code> 關鎖<ul><li>鍵を閉めた [0]：<code>た形</code> 關了鎖</li><li>鍵を閉めたっけ [0]：<code>自言自語</code> 是不是關了鎖來著？</li></ul></li></ul><h2 id="時-とき-2-1"><a href="#時-とき-2-1" class="headerlink" title="時(とき[2])"></a>時(とき[2])</h2><p><code>道を渡る時、車に気をつける。</code></p><p>過馬路時要注意車子。</p><blockquote><p><code>時</code> 前 <code>0</code> 時，則 <code>時</code> 為 <code>1</code></p></blockquote><ul><li>道(みち) [0]：<code>名</code> 馬路</li><li>を：<code>格助</code> 接受 <code>渡る</code> 的賓語</li><li>渡(わた)る [0]：<code>動I</code> <code>自動</code> 過</li><li>時(とき) [1]：<code>名</code> 時</li><li>車(くるま) [0]：<code>名</code> 車</li><li>に：<code>格助</code> 表 <code>動作對象</code></li><li>気(き)をつける [0]：<code>動II</code> <code>他動</code> 注意</li></ul>]]></content>
    
    
    <summary type="html">&lt;p&gt;&lt;code&gt;時&lt;/code&gt; 的 &lt;code&gt;重音&lt;/code&gt;可以為 &lt;code&gt;2&lt;/code&gt;、亦可為 &lt;code&gt;1&lt;/code&gt;，端看之前的 &lt;code&gt;動詞&lt;/code&gt; 的 &lt;code&gt;重音&lt;/code&gt; 而定。&lt;/p&gt;</summary>
    
    
    
    
    <category term="日本語" scheme="https://yabai.tw/tags/%E6%97%A5%E6%9C%AC%E8%AA%9E/"/>
    
    <category term="比較名詞" scheme="https://yabai.tw/tags/%E6%AF%94%E8%BC%83%E5%90%8D%E8%A9%9E/"/>
    
  </entry>
  
  <entry>
    <title>明日(あした)、明日(あす)</title>
    <link href="https://yabai.tw/nihonngo/comparison/noun/ashita-asu/"/>
    <id>https://yabai.tw/nihonngo/comparison/noun/ashita-asu/</id>
    <published>2024-09-21T12:13:21.000Z</published>
    <updated>2024-09-22T08:57:24.546Z</updated>
    
    <content type="html"><![CDATA[<p><code>明日</code> 可念成 <code>あした</code> 或 <code>あす</code>，<code>あす</code> 為 <code>あした</code> 更 <code>禮貌</code> 講法。</p><a id="more"></a><h2 id="単語"><a href="#単語" class="headerlink" title="単語"></a>単語</h2><ul><li>明日(あした) [3]：<code>名</code> 明天</li><li>明日(あす) [2]：<code>名</code> 明天</li></ul><h2 id="明日-あした"><a href="#明日-あした" class="headerlink" title="明日(あした)"></a>明日(あした)</h2><p><code>明日寒いと思う。</code></p><p>我想明天會很冷。</p><ul><li>明日(あした) [3]：<code>名</code> 明天</li><li>寒(さむ)い [2]：<code>い形容</code> 寒冷的</li><li>と：<code>格助</code> 表 <code>內容</code></li><li>思(おも)う [2]：<code>動I</code> <code>他動</code> 想</li></ul><h2 id="明日-あす"><a href="#明日-あす" class="headerlink" title="明日(あす)"></a>明日(あす)</h2><p><code>明日お伺い致します。</code></p><p>明天拜訪您去。</p><ul><li>明日(あす) [2]：<code>名</code> 明天</li><li>行(い)く [0]：<code>動I</code> <code>自動</code> <code>辞書形</code> 去<ul><li>伺(うかが)う [0]：<code>謙譲語</code> 去　</li><li>伺います [5]：<code>ます形</code> 去</li><li>お伺いする [0]：<code>謙譲語</code> 去</li><li>お伺い致(いた)す [0]：<code>謙譲語</code> 去</li><li>お伺い致します [9]：<code>ます形</code> 去</li></ul></li></ul>]]></content>
    
    
    <summary type="html">&lt;p&gt;&lt;code&gt;明日&lt;/code&gt; 可念成 &lt;code&gt;あした&lt;/code&gt; 或 &lt;code&gt;あす&lt;/code&gt;，&lt;code&gt;あす&lt;/code&gt; 為 &lt;code&gt;あした&lt;/code&gt; 更 &lt;code&gt;禮貌&lt;/code&gt; 講法。&lt;/p&gt;</summary>
    
    
    
    
    <category term="日本語" scheme="https://yabai.tw/tags/%E6%97%A5%E6%9C%AC%E8%AA%9E/"/>
    
    <category term="比較名詞" scheme="https://yabai.tw/tags/%E6%AF%94%E8%BC%83%E5%90%8D%E8%A9%9E/"/>
    
  </entry>
  
  <entry>
    <title>今日(きょう)、今日(こんじつ)</title>
    <link href="https://yabai.tw/nihonngo/comparison/noun/kyou-konnjitsu/"/>
    <id>https://yabai.tw/nihonngo/comparison/noun/kyou-konnjitsu/</id>
    <published>2024-09-21T12:09:31.000Z</published>
    <updated>2024-09-22T08:57:24.546Z</updated>
    
    <content type="html"><![CDATA[<p><code>今日</code> 可念成 <code>きょう</code> 或 <code>こんじつ</code>，<code>こんじつ</code> 為 <code>きょう</code> 更 <code>正式</code> 講法。</p><a id="more"></a><h2 id="単語"><a href="#単語" class="headerlink" title="単語"></a>単語</h2><ul><li>今日(きょう) [1]：<code>名</code> 今天</li><li>今日(こんじつ) [1]：<code>名</code> 今天</li></ul><h2 id="今日-きょう"><a href="#今日-きょう" class="headerlink" title="今日(きょう)"></a>今日(きょう)</h2><p><code>今日お弁当を持って来る。</code></p><p>今天帶著便當來。</p><blockquote><p><code>きょう</code> 適合 <code>口語</code> 與 <code>非正式場合</code> </p></blockquote><ul><li>今日(きょう) [1]：<code>名</code> 今天</li><li>お弁当(べんとう) [0]：<code>名</code> 便當</li><li>を：<code>格助</code> 接受 <code>持つ</code> 的 <code>賓語</code></li><li>持つ [1]：<code>動I</code> <code>他動</code> <code>辞書形</code> 帶<ul><li>持って [1]：<code>て形</code> 帶</li></ul></li><li>来(く)る [1]：<code>動III</code> <code>自動</code> 來</li></ul><h2 id="今日-こんじつ"><a href="#今日-こんじつ" class="headerlink" title="今日(こんじつ)"></a>今日(こんじつ)</h2><p><code>今日はご来店いただき、誠にありがとうございます。</code></p><p>非常感謝您今天光臨本店。</p><blockquote><p><code>こんじつ</code> 適合 <code>禮貌</code> 與 <code>正式場合</code> </p></blockquote><ul><li>今日(こんじつ) [1]：<code>名</code> 今天</li><li>は：<code>副助</code> 表 <code>主題</code></li><li>ご：<code>接頭</code> 表 <code>尊敬</code></li><li>来店(らいてん) [0]：<code>名</code> 光臨本店</li><li>いただく [0]：<code>動I</code> <code>他動</code> <code>得到</code>、<code>もらう</code> 的 <code>謙讓語</code><ul><li>いただきます [0]：<code>ます形</code> 得到</li><li>いただき [0]：<code>接續</code> 得到</li></ul></li><li>誠(まこと) [0]：<code>な形容</code> 真誠的<ul><li>誠に [0]：<code>副</code> 真誠地</li></ul></li><li>ありがとうございます [9]：<code>慣</code> 非常感謝</li></ul>]]></content>
    
    
    <summary type="html">&lt;p&gt;&lt;code&gt;今日&lt;/code&gt; 可念成 &lt;code&gt;きょう&lt;/code&gt; 或 &lt;code&gt;こんじつ&lt;/code&gt;，&lt;code&gt;こんじつ&lt;/code&gt; 為 &lt;code&gt;きょう&lt;/code&gt; 更 &lt;code&gt;正式&lt;/code&gt; 講法。&lt;/p&gt;</summary>
    
    
    
    
    <category term="日本語" scheme="https://yabai.tw/tags/%E6%97%A5%E6%9C%AC%E8%AA%9E/"/>
    
    <category term="比較名詞" scheme="https://yabai.tw/tags/%E6%AF%94%E8%BC%83%E5%90%8D%E8%A9%9E/"/>
    
  </entry>
  
  <entry>
    <title>今日</title>
    <link href="https://yabai.tw/nihonngo/vocabulary/kyo/kyou/"/>
    <id>https://yabai.tw/nihonngo/vocabulary/kyo/kyou/</id>
    <published>2024-09-21T11:23:41.000Z</published>
    <updated>2024-09-22T08:57:24.566Z</updated>
    
    <content type="html"><![CDATA[<p>きょう [1]：<code>名</code> 今天。</p><a id="more"></a><h2 id="例文"><a href="#例文" class="headerlink" title="例文"></a>例文</h2><p><code>今日デパートは休み？</code></p><p>今天百貨公司休息嗎？</p><ul><li>今日(きょう) [1]：<code>名</code> 今天</li><li>デパート [2]：<code>名</code> department store、百貨公司</li><li>は：<code>副助</code> 表 <code>主題</code></li><li>休(やす)み [3]：<code>名</code> 休息</li></ul><p><code>今日お弁当を持って来る。</code></p><p>今天帶著便當來。</p><ul><li>今日(きょう) [1]：<code>名</code> 今天</li><li>お弁当(べんとう) [0]：<code>名</code> 便當</li><li>を：<code>格助</code> 接受 <code>持つ</code> 的 <code>賓語</code></li><li>持つ [1]：<code>動I</code> <code>他動</code> <code>辞書形</code> 帶<ul><li>持って [1]：<code>て形</code> 帶</li></ul></li><li>来(く)る [1]：<code>動III</code> <code>自動</code> 來</li></ul>]]></content>
    
    
    <summary type="html">&lt;p&gt;きょう [1]：&lt;code&gt;名&lt;/code&gt; 今天。&lt;/p&gt;</summary>
    
    
    
    
    <category term="日本語" scheme="https://yabai.tw/tags/%E6%97%A5%E6%9C%AC%E8%AA%9E/"/>
    
    <category term="名詞" scheme="https://yabai.tw/tags/%E5%90%8D%E8%A9%9E/"/>
    
  </entry>
  
  <entry>
    <title>今日</title>
    <link href="https://yabai.tw/nihonngo/vocabulary/ko/konnjitsu/"/>
    <id>https://yabai.tw/nihonngo/vocabulary/ko/konnjitsu/</id>
    <published>2024-09-21T03:23:17.000Z</published>
    <updated>2024-09-22T08:57:24.566Z</updated>
    
    <content type="html"><![CDATA[<p>こんじつ [1]：<code>名</code> 今天。</p><a id="more"></a><h2 id="例文"><a href="#例文" class="headerlink" title="例文"></a>例文</h2><p><code>今日はご来店いただき、誠にありがとうございます。</code></p><p>非常感謝您今天光臨本店。</p><ul><li>今日(こんじつ) [1]：<code>名</code> 今天</li><li>は：<code>副助</code> 表 <code>主題</code></li><li>ご：<code>接頭</code> 表 <code>尊敬</code></li><li>来店(らいてん) [0]：<code>名</code> 光臨本店</li><li>いただく [0]：<code>動I</code> <code>他動</code> <code>得到</code>、<code>もらう</code> 的 <code>謙讓語</code><ul><li>いただきます [0]：<code>ます形</code> 得到</li><li>いただき [0]：<code>接續</code> 得到</li></ul></li><li>誠(まこと) [0]：<code>な形容</code> 真誠的<ul><li>誠に [0]：<code>副</code> 真誠地</li></ul></li><li>ありがとうございます [9]：<code>慣</code> 非常感謝</li></ul>]]></content>
    
    
    <summary type="html">&lt;p&gt;こんじつ [1]：&lt;code&gt;名&lt;/code&gt; 今天。&lt;/p&gt;</summary>
    
    
    
    
    <category term="日本語" scheme="https://yabai.tw/tags/%E6%97%A5%E6%9C%AC%E8%AA%9E/"/>
    
    <category term="名詞" scheme="https://yabai.tw/tags/%E5%90%8D%E8%A9%9E/"/>
    
  </entry>
  
  <entry>
    <title>テレホン、電話</title>
    <link href="https://yabai.tw/nihonngo/comparison/noun/terehonn-dennwa/"/>
    <id>https://yabai.tw/nihonngo/comparison/noun/terehonn-dennwa/</id>
    <published>2024-09-20T14:26:01.000Z</published>
    <updated>2024-09-21T14:56:23.491Z</updated>
    
    <content type="html"><![CDATA[<p><code>テレホン</code> 與 <code>電話</code> 都可表示 <code>電話</code>，但用法有些 <code>差異</code>。</p><a id="more"></a><h2 id="単語"><a href="#単語" class="headerlink" title="単語"></a>単語</h2><ul><li>テレホン [1]：<code>名</code> telephone、電話</li><li>電話(でんわ) [0]：<code>名</code> 電話</li></ul><h2 id="テレホン"><a href="#テレホン" class="headerlink" title="テレホン"></a>テレホン</h2><p><code>テレホンサービスを利用して、予約を取りました。</code></p><p>我使用電話服務取得預約了。</p><blockquote><p>外來語，通常用於特定的商業或技術領域，如 <code>テレホンサービス</code>、<code>テレホンカード</code></p></blockquote><ul><li>テレホン [1]：<code>名</code> telephone、電話</li><li>サービス [1]：<code>名</code> service、服務</li><li>を：<code>格助</code> 接受 <code>取る</code> 的 賓語</li><li>利用(りよう) [0]：<code>名</code> 利用<ul><li>利用する [0]：<code>動III</code> <code>他動</code> <code>辞書形</code> 利用</li><li>利用して [0]：<code>て形</code> 利用</li></ul></li><li>予約(よやく) [0]：<code>名</code> 預約</li><li>を：<code>格助</code> 接受 <code>取る</code> 的 <code>賓語</code></li><li>取(と)る [1]：<code>動I</code> <code>他動</code> <code>辞書形</code> 取得<ul><li>取ります [3]：<code>ます形</code> 取得</li><li>取りました [3]：<code>た形</code> 取得</li></ul></li></ul><h2 id="電話"><a href="#電話" class="headerlink" title="電話"></a>電話</h2><p><code>毎日彼に電話する。</code></p><p>每天打電話給他。</p><blockquote><p>这是日常生活中最常用的词汇，指“电话”这个设备或打电话的行为<br>日常生活最常用的詞彙，只 <code>電話</code> 這個 <code>設備</code> 或 <code>打電話</code>的行為</p></blockquote><ul><li>毎日(まいにち) [1]：<code>名詞</code> 每天</li><li>彼(かれ) [1]：<code>代</code> 他</li><li>に：<code>格助</code> 表 <code>動作對象</code></li><li>電話(でんわ)する [0]：<code>動III</code> <code>他動</code> 打電話</li></ul>]]></content>
    
    
    <summary type="html">&lt;p&gt;&lt;code&gt;テレホン&lt;/code&gt; 與 &lt;code&gt;電話&lt;/code&gt; 都可表示 &lt;code&gt;電話&lt;/code&gt;，但用法有些 &lt;code&gt;差異&lt;/code&gt;。&lt;/p&gt;</summary>
    
    
    
    
    <category term="日本語" scheme="https://yabai.tw/tags/%E6%97%A5%E6%9C%AC%E8%AA%9E/"/>
    
    <category term="比較名詞" scheme="https://yabai.tw/tags/%E6%AF%94%E8%BC%83%E5%90%8D%E8%A9%9E/"/>
    
  </entry>
  
  <entry>
    <title>電話</title>
    <link href="https://yabai.tw/nihonngo/vocabulary/de/dennwa/"/>
    <id>https://yabai.tw/nihonngo/vocabulary/de/dennwa/</id>
    <published>2024-09-20T14:18:24.000Z</published>
    <updated>2024-09-21T14:56:23.507Z</updated>
    
    <content type="html"><![CDATA[<p>でんわ [0]：<code>名</code> 電話。</p><a id="more"></a><h2 id="例文"><a href="#例文" class="headerlink" title="例文"></a>例文</h2><p><code>メールを送ってから、電話する。</code></p><p>寄送電子郵件之後再打電話。</p><ul><li>メール [0]：<code>名</code> 郵件</li><li>送(おく)る [0]：<code>動I</code> <code>他動</code> <code>辞書形</code> 寄送 <ul><li>送って [0]：<code>て型</code> 寄送</li></ul></li><li>電話(でんわ)する [5]：<code>動III</code> <code>他動</code> 打電話</li></ul><p><code>毎日彼に電話する。</code></p><p>每天打電話給他。</p><ul><li>毎日(まいにち) [1]：<code>名詞</code> 每天</li><li>彼(かれ) [1]：<code>代</code> 他</li><li>に：<code>格助</code> 表 <code>動作對象</code></li><li>電話(でんわ)する [0]：<code>動III</code> <code>他動</code> 打電話</li></ul><p><code>駅に着いたら、電話をください。</code></p><p>到車站之後，請打電話給我。</p><ul><li>駅(えき) [1]：<code>名</code> 車站</li><li>に：<code>格助</code> 表 <code>目的地</code></li><li>着(つ)く [1]：<code>動I</code> <code>自動</code> <code>辞書形</code> 到達<ul><li>着いた [1]：<code>た形</code> 到達</li><li>着いたら [1]：<code>之後</code> 到達之後</li></ul></li><li>電話(でんわ) [0]：<code>名</code> 電話</li><li>を：<code>格助</code> 接受 <code>ください</code> 的 <code>賓語</code></li><li>ください [0]：<code>慣</code> 請</li></ul>]]></content>
    
    
    <summary type="html">&lt;p&gt;でんわ [0]：&lt;code&gt;名&lt;/code&gt; 電話。&lt;/p&gt;</summary>
    
    
    
    
    <category term="日本語" scheme="https://yabai.tw/tags/%E6%97%A5%E6%9C%AC%E8%AA%9E/"/>
    
    <category term="名詞" scheme="https://yabai.tw/tags/%E5%90%8D%E8%A9%9E/"/>
    
  </entry>
  
  <entry>
    <title>利用</title>
    <link href="https://yabai.tw/nihonngo/vocabulary/ri/riyou/"/>
    <id>https://yabai.tw/nihonngo/vocabulary/ri/riyou/</id>
    <published>2024-09-20T14:06:09.000Z</published>
    <updated>2024-09-21T14:56:23.516Z</updated>
    
    <content type="html"><![CDATA[<p>りよう [0]：<code>名</code> 利用。</p><a id="more"></a><h2 id="例文"><a href="#例文" class="headerlink" title="例文"></a>例文</h2><p><code>このサービスを利用するには、アカウントの登録が必要だ。</code></p><p>如果要使用這個網站服務的話，得先註冊帳戶。</p><ul><li>この [0]：<code>連体</code> 這個</li><li>サービス [1]：<code>名</code> service、服務</li><li>を：<code>格助</code> 接受 <code>利用する</code> 的 <code>賓語</code></li><li>利用(りよう)する [0]：<code>動III</code> <code>他動</code> 利用</li><li>には [0]：<code>副助</code> 輕微假設</li><li>アカウント [2]：<code>名</code> account、帳號</li><li>の：<code>格助</code> 以 <code>名詞</code> 形容 <code>名詞</code></li><li>登録(とうろく) [0]：<code>名</code> 註冊</li><li>が：<code>格助</code> 表 <code>主語</code></li><li>必要(ひつよう) [0]：<code>な形容</code> 必須的 </li><li>だ：<code>助動</code> 是</li></ul><p><code>テレホンサービスを利用して、予約を取りました。</code></p><p>我使用電話服務取得預約了。</p><ul><li>テレホン [1]：<code>名</code> telephone、電話</li><li>サービス [1]：<code>名</code> service、服務</li><li>を：<code>格助</code> 接受 <code>取る</code> 的 賓語</li><li>利用(りよう) [0]：<code>名</code> 利用<ul><li>利用する [0]：<code>動III</code> <code>他動</code> <code>辞書形</code> 利用</li><li>利用して [0]：<code>て形</code> 利用</li></ul></li><li>予約(よやく) [0]：<code>名</code> 預約</li><li>を：<code>格助</code> 接受 <code>取る</code> 的 <code>賓語</code></li><li>取(と)る [1]：<code>動I</code> <code>他動</code> <code>辞書形</code> 取得<ul><li>取ります [3]：<code>ます形</code> 取得</li><li>取りました [3]：<code>た形</code> 取得</li></ul></li></ul>]]></content>
    
    
    <summary type="html">&lt;p&gt;りよう [0]：&lt;code&gt;名&lt;/code&gt; 利用。&lt;/p&gt;</summary>
    
    
    
    
    <category term="日本語" scheme="https://yabai.tw/tags/%E6%97%A5%E6%9C%AC%E8%AA%9E/"/>
    
    <category term="名詞" scheme="https://yabai.tw/tags/%E5%90%8D%E8%A9%9E/"/>
    
  </entry>
  
  <entry>
    <title>テレホン</title>
    <link href="https://yabai.tw/nihonngo/vocabulary/te/terehonn/"/>
    <id>https://yabai.tw/nihonngo/vocabulary/te/terehonn/</id>
    <published>2024-09-20T14:02:52.000Z</published>
    <updated>2024-09-21T14:56:23.521Z</updated>
    
    <content type="html"><![CDATA[<p>テレホン [1]：<code>名</code> telephone、電話。</p><a id="more"></a><h2 id="例文"><a href="#例文" class="headerlink" title="例文"></a>例文</h2><p><code>テレホンサービスを利用して、予約を取りました。</code></p><p>我使用電話服務取得預約了。</p><ul><li>テレホン [1]：<code>名</code> telephone、電話</li><li>サービス [1]：<code>名</code> service、服務</li><li>を：<code>格助</code> 接受 <code>取る</code> 的 賓語</li><li>利用(りよう) [0]：<code>名</code> 利用<ul><li>利用する [0]：<code>動III</code> <code>他動</code> <code>辞書形</code> 利用</li><li>利用して [0]：<code>て形</code> 利用</li></ul></li><li>予約(よやく) [0]：<code>名</code> 預約</li><li>を：<code>格助</code> 接受 <code>取る</code> 的 <code>賓語</code></li><li>取(と)る [1]：<code>動I</code> <code>他動</code> <code>辞書形</code> 取得<ul><li>取ります [3]：<code>ます形</code> 取得</li><li>取りました [3]：<code>た形</code> 取得</li></ul></li></ul>]]></content>
    
    
    <summary type="html">&lt;p&gt;テレホン [1]：&lt;code&gt;名&lt;/code&gt; telephone、電話。&lt;/p&gt;</summary>
    
    
    
    
    <category term="日本語" scheme="https://yabai.tw/tags/%E6%97%A5%E6%9C%AC%E8%AA%9E/"/>
    
    <category term="名詞" scheme="https://yabai.tw/tags/%E5%90%8D%E8%A9%9E/"/>
    
  </entry>
  
  <entry>
    <title>使用 background 顯示圖片</title>
    <link href="https://yabai.tw/css/backgrounds/background/"/>
    <id>https://yabai.tw/css/backgrounds/background/</id>
    <published>2024-09-20T13:09:29.000Z</published>
    <updated>2024-09-21T14:56:23.485Z</updated>
    
    <content type="html"><![CDATA[<p><code>background</code> 本質雖然是定義背景圖片，但也可用來取代 <code>&lt;img&gt;</code>，讓我們以 CSS 設定圖片。</p><a id="more"></a><h2 id="Version"><a href="#Version" class="headerlink" title="Version"></a>Version</h2><p>CSS 3<br>Vue 3.4</p><h2 id="img"><a href="#img" class="headerlink" title="img"></a>img</h2><p><img src="/images/css/backgrounds/background/img01.webp" alt="bgimg000"></p><p>傳統欲顯示圖片會使用 <code>&lt;img&gt;</code>。</p><pre class="line-numbers highlight language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">></span></span>  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>https://picsum.photos/300/200/?random<span class="token punctuation">=</span>10<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">></span></span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span></span></code></pre><p><code>&lt;img&gt;</code> 為 HTML tag，需使用 <code>src</code> attribute 設定圖片位置。</p><blockquote><p>傳統必須在 HTML 設定圖片位置，是否能在 CSS 設定呢 ?</p></blockquote><h2 id="div"><a href="#div" class="headerlink" title="div"></a>div</h2><pre class="line-numbers highlight language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">></span></span>  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>scenery<span class="token punctuation">"</span></span><span class="token punctuation">/></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span> <span class="token attr-name">scoped</span><span class="token punctuation">></span></span><span class="token style language-css"><span class="token selector"><span class="token class">.scenery</span> </span><span class="token punctuation">{</span>  <span class="token property">background</span><span class="token punctuation">:</span> <span class="token url">url('https://picsum.photos/320/240/?random=10')</span><span class="token punctuation">;</span>  <span class="token property">width</span><span class="token punctuation">:</span> <span class="token number">320</span>px<span class="token punctuation">;</span>  <span class="token property">height</span><span class="token punctuation">:</span> <span class="token number">240</span>px<span class="token punctuation">;</span><span class="token punctuation">}</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">></span></span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><p><strong>Line 2</strong></p><pre class="line-numbers highlight language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>scenery<span class="token punctuation">"</span></span><span class="token punctuation">/></span></span><span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre><p>雖然顯示圖片，但卻使用 <code>&lt;div&gt;</code>。</p><p><strong>Line 6</strong></p><pre class="line-numbers highlight language-css"><code class="language-css"><span class="token selector"><span class="token class">.scenery</span> </span><span class="token punctuation">{</span>  <span class="token property">background</span><span class="token punctuation">:</span> <span class="token url">url('https://picsum.photos/320/240/?random=10')</span><span class="token punctuation">;</span>  <span class="token property">width</span><span class="token punctuation">:</span> <span class="token number">320</span>px<span class="token punctuation">;</span>  <span class="token property">height</span><span class="token punctuation">:</span> <span class="token number">240</span>px<span class="token punctuation">;</span><span class="token punctuation">}</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span></span></code></pre><ul><li><code>background</code>：使用 <code>url()</code> 定義 <code>&lt;div&gt;</code> 所使用圖片，重點在於能在 CSS 定義圖片</li><li><code>width</code> 與 <code>height</code>：<code>background-image</code> 與 <code>&lt;img&gt;</code> 不同，並無法自行撐出 width 與 height，而是由 element 決定，因此要自行定義 width 與 height</li></ul><h2 id="no-repeat"><a href="#no-repeat" class="headerlink" title="no-repeat"></a>no-repeat</h2><pre class="line-numbers highlight language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">></span></span>  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>scenery<span class="token punctuation">"</span></span><span class="token punctuation">/></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span> <span class="token attr-name">scoped</span><span class="token punctuation">></span></span><span class="token style language-css"><span class="token selector"><span class="token class">.scenery</span> </span><span class="token punctuation">{</span>  <span class="token property">background</span><span class="token punctuation">:</span> <span class="token url">url(https://picsum.photos/320/240/?random=10)</span> no-repeat<span class="token punctuation">;</span>  <span class="token property">height</span><span class="token punctuation">:</span> <span class="token number">240</span>px<span class="token punctuation">;</span><span class="token punctuation">}</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">></span></span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><p>若不想指定 width，則要使用另外一種寫法。</p><p>10 行</p><pre class="line-numbers highlight language-css"><code class="language-css"><span class="token selector"><span class="token class">.scenery</span> </span><span class="token punctuation">{</span>  <span class="token property">background</span><span class="token punctuation">:</span> <span class="token url">url(https://picsum.photos/320/240/?random=10)</span> no-repeat<span class="token punctuation">;</span>  <span class="token property">height</span><span class="token punctuation">:</span> <span class="token number">240</span>px<span class="token punctuation">;</span><span class="token punctuation">}</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span></span></code></pre><ul><li><code>background</code>：加特別上 <code>no-repeat</code></li><li><code>height</code>：因為 <code>&lt;div&gt;</code> 為 block element，其 width 為一整列，但 height 由 content 決定，目前 <code>&lt;div&gt;</code> 沒有 content，必須指定 height 才能顯示 <code>background</code> 所指定圖片</li></ul><h2 id="img-1"><a href="#img-1" class="headerlink" title="img"></a>img</h2><pre class="line-numbers highlight language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">></span></span>  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>img</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>scenery<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span> <span class="token attr-name">scoped</span><span class="token punctuation">></span></span><span class="token style language-css"><span class="token selector"><span class="token class">.scenery</span> </span><span class="token punctuation">{</span>  <span class="token property">background</span><span class="token punctuation">:</span> <span class="token url">url(https://picsum.photos/320/240/?random=10)</span><span class="token punctuation">;</span>  <span class="token property">width</span><span class="token punctuation">:</span> <span class="token number">320</span>px<span class="token punctuation">;</span>  <span class="token property">height</span><span class="token punctuation">:</span> <span class="token number">240</span>px<span class="token punctuation">;</span><span class="token punctuation">}</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">></span></span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><p>其實 <code>background</code> 也可套用在 <code>&lt;img&gt;</code>。</p><p>第 6 行</p><pre class="line-numbers highlight language-css"><code class="language-css"><span class="token selector"><span class="token class">.scenery</span> </span><span class="token punctuation">{</span>  <span class="token property">background</span><span class="token punctuation">:</span> <span class="token url">url(https://picsum.photos/320/240/?random=10)</span><span class="token punctuation">;</span>  <span class="token property">width</span><span class="token punctuation">:</span> <span class="token number">320</span>px<span class="token punctuation">;</span>  <span class="token property">height</span><span class="token punctuation">:</span> <span class="token number">240</span>px<span class="token punctuation">;</span><span class="token punctuation">}</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span></span></code></pre><ul><li><code>background</code>：<code>&lt;img&gt;</code> 也使用 <code>background</code></li><li><code>width</code> 與 <code>height</code>：<code>&lt;img&gt;</code> 為 inline element，並不像 <code>&lt;div&gt;</code> 有 width，因此 <code>width</code> 與 <code>height</code> 都要設定</li></ul><h2 id="Conclusion"><a href="#Conclusion" class="headerlink" title="Conclusion"></a>Conclusion</h2><ul><li><code>&lt;img&gt;</code> 可根據圖片自行撐出 width 與 height，但 <code>background</code> 則必須由 element 指定 <code>width</code> 與 <code>height</code></li><li><code>background</code> 可用於 <code>&lt;div&gt;</code> 與 <code>&lt;img&gt;</code>，唯 <code>&lt;div&gt;</code> 是 block element，因此可不用設定 <code>width</code>，但 <code>&lt;img&gt;</code> 是 inline element，需同時指定 <code>width</code> 與 <code>height</code></li></ul><h2 id="Reference"><a href="#Reference" class="headerlink" title="Reference"></a>Reference</h2><p><a href="https://developer.mozilla.org/en-US/" target="_blank" rel="noopener">MDN</a>, <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/background" target="_blank" rel="noopener">background</a></p>]]></content>
    
    
    <summary type="html">&lt;p&gt;&lt;code&gt;background&lt;/code&gt; 本質雖然是定義背景圖片，但也可用來取代 &lt;code&gt;&amp;lt;img&amp;gt;&lt;/code&gt;，讓我們以 CSS 設定圖片。&lt;/p&gt;</summary>
    
    
    
    
    <category term="Vue" scheme="https://yabai.tw/tags/Vue/"/>
    
    <category term="CSS" scheme="https://yabai.tw/tags/CSS/"/>
    
  </entry>
  
</feed>