mirror of
https://github.com/Sevichecc/Urara-Blog.git
synced 2025-04-30 18:49:31 +08:00
804 lines
No EOL
580 KiB
XML
804 lines
No EOL
580 KiB
XML
<?xml version='1.0' encoding='utf-8'?>
|
||
<feed xmlns="http://www.w3.org/2005/Atom">
|
||
<id>https://seviche.cc/</id>
|
||
<title><![CDATA[Seviche.cc]]></title>
|
||
<subtitle><![CDATA[Tech / Code / Random Life]]></subtitle>
|
||
<icon>https://seviche.cc/favicon.png</icon>
|
||
<link href="https://seviche.cc" />
|
||
<link href="https://seviche.cc/atom.xml" rel="self" type="application/atom+xml" />
|
||
<link href="https://pubsubhubbub.appspot.com" rel="hub"/>
|
||
<link href="https://bridgy-fed.superfeedr.com" rel="hub"/>
|
||
<updated>2022-08-13T11:58:11.635Z</updated>
|
||
<author>
|
||
<name><![CDATA[酸橘汁腌鱼]]></name>
|
||
</author>
|
||
<category term="Vue" scheme="https://seviche.cc/?tags=Vue" />
|
||
<category term="我在看什么" scheme="https://seviche.cc/?tags=%E6%88%91%E5%9C%A8%E7%9C%8B%E4%BB%80%E4%B9%88" />
|
||
<category term="JavsScript" scheme="https://seviche.cc/?tags=JavsScript" />
|
||
<category term="XSS" scheme="https://seviche.cc/?tags=XSS" />
|
||
<category term="Notes" scheme="https://seviche.cc/?tags=Notes" />
|
||
<category term="D3.js" scheme="https://seviche.cc/?tags=D3.js" />
|
||
<category term="数据可视化" scheme="https://seviche.cc/?tags=%E6%95%B0%E6%8D%AE%E5%8F%AF%E8%A7%86%E5%8C%96" />
|
||
<category term="CSS" scheme="https://seviche.cc/?tags=CSS" />
|
||
<category term="JavaScript" scheme="https://seviche.cc/?tags=JavaScript" />
|
||
<category term="animation" scheme="https://seviche.cc/?tags=animation" />
|
||
<category term="SQL" scheme="https://seviche.cc/?tags=SQL" />
|
||
<category term="Nginx" scheme="https://seviche.cc/?tags=Nginx" />
|
||
<category term="VPS" scheme="https://seviche.cc/?tags=VPS" />
|
||
<category term="Docker" scheme="https://seviche.cc/?tags=Docker" />
|
||
<category term="Vue3" scheme="https://seviche.cc/?tags=Vue3" />
|
||
<category term="BootStrap" scheme="https://seviche.cc/?tags=BootStrap" />
|
||
<category term="OSS" scheme="https://seviche.cc/?tags=OSS" />
|
||
<category term="Svelte" scheme="https://seviche.cc/?tags=Svelte" />
|
||
<category term="Open Source" scheme="https://seviche.cc/?tags=Open%20Source" />
|
||
<category term="Git" scheme="https://seviche.cc/?tags=Git" />
|
||
<category term="Logseq" scheme="https://seviche.cc/?tags=Logseq" />
|
||
<category term="Obsidian" scheme="https://seviche.cc/?tags=Obsidian" />
|
||
<category term="Self hosted" scheme="https://seviche.cc/?tags=Self%20hosted" />
|
||
<category term="CSS Trick" scheme="https://seviche.cc/?tags=CSS%20Trick" />
|
||
<category term="RSS" scheme="https://seviche.cc/?tags=RSS" />
|
||
<category term="Miniflux" scheme="https://seviche.cc/?tags=Miniflux" />
|
||
<category term="HTML" scheme="https://seviche.cc/?tags=HTML" />
|
||
<category term="实用技巧" scheme="https://seviche.cc/?tags=%E5%AE%9E%E7%94%A8%E6%8A%80%E5%B7%A7" />
|
||
<category term="Self-hosted" scheme="https://seviche.cc/?tags=Self-hosted" />
|
||
<category term="翻译" scheme="https://seviche.cc/?tags=%E7%BF%BB%E8%AF%91" />
|
||
<category term="《用户体验要素》" scheme="https://seviche.cc/?tags=%E3%80%8A%E7%94%A8%E6%88%B7%E4%BD%93%E9%AA%8C%E8%A6%81%E7%B4%A0%E3%80%8B" />
|
||
<category term="读书笔记" scheme="https://seviche.cc/?tags=%E8%AF%BB%E4%B9%A6%E7%AC%94%E8%AE%B0" />
|
||
<category term="UX" scheme="https://seviche.cc/?tags=UX" />
|
||
<category term="设计心理学1" scheme="https://seviche.cc/?tags=%E8%AE%BE%E8%AE%A1%E5%BF%83%E7%90%86%E5%AD%A61" />
|
||
<category term="Design Thinking" scheme="https://seviche.cc/?tags=Design%20Thinking" />
|
||
<entry>
|
||
<title type="html"><![CDATA[Vue.js 挑战练习]]></title>
|
||
<link href="https://seviche.cc/2022-08-12-vue-challenges" />
|
||
<id>https://seviche.cc/2022-08-12-vue-challenges</id>
|
||
<published>2022-08-12T00:00:00.000Z</published>
|
||
<updated>2022-08-13T08:21:08.878Z</updated>
|
||
<summary type="html"><![CDATA[我的答案以及相关知识点]]></summary>
|
||
<content type="html">
|
||
<![CDATA[<p>最近做了一下这个<a href="https://cn-vuejs-challenges.netlify.app/questions/14-dynamic-css-values/README.zh-CN.html" rel="nofollow noopener noreferrer external" target="_blank">Vue.js 挑战</a>，其中的题目大多出自<a href="https://staging-cn.vuejs.org/" rel="nofollow noopener noreferrer external" target="_blank">Vue3 文档</a>，都不是很难，但涉及到的知识点比较琐碎，用来复习挺好的。</p><p>然后这是我的答案和题目涉及到的知识点，除了<a href="###%E9%BC%A0%E6%A0%87%E6%8C%87%E9%92%88">鼠标指针</a>这个部分没通过单元测试之外，其他都都通过了，然后这个鼠标指针为什么没通过单元测试我也没弄明白，试了下其他人的也通过不了，好奇怪……</p><p>这里省去部分题目，主要写答案。</p><h2 id="built-ins"><a href="#built-ins">Built-ins</a></h2><h3 id="dom-传送门"><a href="#dom-传送门">DOM 传送门</a></h3><p>Vue.js 提供了一个内置组件，将其插槽内容渲染到另一个 DOM，成为该 DOM 的一部分。</p><!-- HTML_TAG_START --><pre class="shiki material-default" vue="true"><div class="language-id">vue</div><div class='code-container'><code><div class='line'><script setup></div><div class='line'>const msg = 'Hello World'</div><div class='line'></script></div><div class='line'><template></div><div class='line'> <teleport to="body"></div><div class='line'> <span>{{ msg }}</span></div><div class='line'> </teleport></div><div class='line'></template></div></code></div></pre><!-- HTML_TAG_END --><p>相关知识点 ：<a href="https://v3.cn.vuejs.org/guide/teleport.html#teleport" rel="nofollow noopener noreferrer external" target="_blank">Teleport | Vue.js</a></p><blockquote><p>有时组件模板的一部分逻辑上属于该组件，而从技术角度来看，最好将模板的这一部分移动到 DOM 中 Vue app 之外的其他位置<sup id="fnref-1"><a href="#fn-1" class="footnote-ref">1</a></sup>。</p></blockquote><ul><li>有点像传送门，将相应元素渲染到制定位置</li><li>to 后面写 css selector</li></ul><h3 id="优化性能的指令"><a href="#优化性能的指令">优化性能的指令</a></h3><p>Vue.js 提供了一个指令，以便只渲染一次元素和组件，并且跳过以后的更新。</p><!-- HTML_TAG_START --><pre class="shiki material-default" vue="true"><div class="language-id">vue</div><div class='code-container'><code><div class='line'><script setup></div><div class='line'>import { ref } from 'vue'</div><div class='line'></div><div class='line'>const count = ref(0)</div><div class='line'></div><div class='line'>setInterval(() => {</div><div class='line'> count.value++</div><div class='line'>}, 1000)</div><div class='line'></script></div><div class='line'></div><div class='line'><template></div><div class='line'> <span v-once>使它从不更新: {{ count }}</span></div><div class='line'></template></div></code></div></pre><!-- HTML_TAG_END --><p>相关知识点：<code>Vue-事件修饰符</code></p><h2 id="css-features"><a href="#css-features">CSS Features</a></h2><h3 id="动态-css"><a href="#动态-css">动态 CSS</a></h3><p>Vue 单文件组件 <code><style></code> 模块支持给 CSS 绑定动态值。</p><!-- HTML_TAG_START --><pre class="shiki material-default" vue="true"><div class="language-id">vue</div><div class='code-container'><code><div class='line'><script setup></div><div class='line'>import { ref } from 'vue'</div><div class='line'>const theme = ref('red')</div><div class='line'></div><div class='line'>const colors = ['blue', 'yellow', 'red', 'green']</div><div class='line'></div><div class='line'>setInterval(() => {</div><div class='line'> theme.value = colors[Math.floor(Math.random() * 4)]</div><div class='line'>}, 1000)</div><div class='line'></script></div><div class='line'></div><div class='line'><template></div><div class='line'> <p>hello</p></div><div class='line'></template></div><div class='line'></div><div class='line'><style scoped></div><div class='line'>/* Modify the code to bind the dynamic color */</div><div class='line'>p {</div><div class='line'> color: v-bind(theme);</div><div class='line'>}</div><div class='line'></style></div></code></div></pre><!-- HTML_TAG_END --><p>相关知识点：<code>v-bind</code> <code>Dynamic Styling动态绑定样式</code></p><h3 id="全局-css"><a href="#全局-css">全局 CSS</a></h3><p>给具有 CSS 作用域的 Vue 单文件组件设置全局 CSS 样式</p><!-- HTML_TAG_START --><pre class="shiki material-default" vue="true"><div class="language-id">vue</div><div class='code-container'><code><div class='line'><template></div><div class='line'> <p>Hello Vue.js</p></div><div class='line'></template></div><div class='line'></div><div class='line'><style scoped></div><div class='line'>p {</div><div class='line'> font-size: 20px;</div><div class='line'> color: red;</div><div class='line'> text-align: center;</div><div class='line'> line-height: 50px;</div><div class='line'>}</div><div class='line'></div><div class='line'>/* Make it work */</div><div class='line'>:global(body) {</div><div class='line'> width: 100vw;</div><div class='line'> height: 100vh;</div><div class='line'> background-color: burlywood;</div><div class='line'>}</div><div class='line'></style></div></code></div></pre><!-- HTML_TAG_END --><p>或者</p><!-- HTML_TAG_START --><pre class="shiki material-default" vue="true"><div class="language-id">vue</div><div class='code-container'><code><div class='line'><template></div><div class='line'> <p>Hello Vue.js</p></div><div class='line'></template></div><div class='line'></div><div class='line'><style scoped></div><div class='line'>p {</div><div class='line'> font-size: 20px;</div><div class='line'> color: red;</div><div class='line'> text-align: center;</div><div class='line'> line-height: 50px;</div><div class='line'>}</div><div class='line'></style></div><div class='line'><style></div><div class='line'>/* Make it work */</div><div class='line'>body {</div><div class='line'> width: 100vw;</div><div class='line'> height: 100vh;</div><div class='line'> background-color: burlywood;</div><div class='line'>}</div><div class='line'></style></div></code></div></pre><!-- HTML_TAG_END --><p>相关知识点：<a href="https://staging-cn.vuejs.org/api/sfc-css-features.html" rel="nofollow noopener noreferrer external" target="_blank">单文件组件 CSS 功能 | Vue.js</a></p><h2 id="components"><a href="#components">Components</a></h2><h3 id="dom-传送门-1"><a href="#dom-传送门-1">DOM 传送门</a></h3><p>见上面</p><h3 id="props-验证"><a href="#props-验证">Props 验证</a></h3><p>验证 Button 组件的 Prop 类型 ，使它只接收: primary | ghost | dashed | link | text | default ，且默认值为 default</p><!-- HTML_TAG_START --><pre class="shiki material-default" vue="true"><div class="language-id">vue</div><div class='code-container'><code><div class='line'><script setup></div><div class='line'>import Button from './Button.vue'</div><div class='line'>defineProps({</div><div class='line'> type: {</div><div class='line'> type: String,</div><div class='line'> default: 'default',</div><div class='line'> validator: value => {</div><div class='line'> ;['primary', 'ghost', 'dashed', 'link', 'text', 'default'].includes(value)</div><div class='line'> }</div><div class='line'> }</div><div class='line'>})</div><div class='line'></script></div><div class='line'></div><div class='line'><template></div><div class='line'> <Button type="dashed" /></div><div class='line'></template></div></code></div></pre><!-- HTML_TAG_END --><p>相关知识点：<a href="https://staging-cn.vuejs.org/guide/components/props.html#prop-validation" rel="nofollow noopener noreferrer external" target="_blank">Props | Vue.js</a></p><h3 id="函数式组件"><a href="#函数式组件">函数式组件</a></h3><p>这题我不是很懂，翻了一下大家的解决方案，感觉这个比较能看懂：<a href="https://github.com/webfansplz/vuejs-challenges/issues/322" rel="nofollow noopener noreferrer external" target="_blank">21 - functional component · Issue #322 · webfansplz/vuejs-challenges · GitHub</a></p><!-- HTML_TAG_START --><pre class="shiki material-default" vue="true"><div class="language-id">vue</div><div class='code-container'><code><div class='line'><script setup lang="ts"></div><div class='line'>import { ref, h } from 'vue'</div><div class='line'></div><div class='line'>/**</div><div class='line'> * Implement a functional component :</div><div class='line'> * 1. Render the list elements (ul/li) with the list data</div><div class='line'> * 2. Change the list item text color to red when clicked.</div><div class='line'> */</div><div class='line'>const ListComponent = (props, { emit }) =></div><div class='line'> h(</div><div class='line'> // 创建 ul</div><div class='line'> 'ul',</div><div class='line'> // 根据传入的props创建li</div><div class='line'> props.list.map((item: { name: string }, index: number) =></div><div class='line'> h(</div><div class='line'> 'li',</div><div class='line'> {</div><div class='line'> // 点击时处罚toggle。并将当前index作为参数传入toggle</div><div class='line'> onClick: () => emit('toggle', index),</div><div class='line'> // 将当前点击的li颜色设置为红色</div><div class='line'> style: index === props.activeIndex ? { color: 'red' } : null</div><div class='line'> },</div><div class='line'> // li 默认值</div><div class='line'> item.name</div><div class='line'> )</div><div class='line'> )</div><div class='line'> )</div><div class='line'>ListComponent.props = ['list', 'activeIndex']</div><div class='line'>ListComponent.emits = ['toggle']</div><div class='line'></div><div class='line'>const list = [</div><div class='line'> {</div><div class='line'> name: 'John'</div><div class='line'> },</div><div class='line'> {</div><div class='line'> name: 'Doe'</div><div class='line'> },</div><div class='line'> {</div><div class='line'> name: 'Smith'</div><div class='line'> }</div><div class='line'>]</div><div class='line'></div><div class='line'>const activeIndex = ref(0)</div><div class='line'></div><div class='line'>function toggle(index: number) {</div><div class='line'> activeIndex.value = index</div><div class='line'>}</div><div class='line'></script></div><div class='line'></div><div class='line'><template></div><div class='line'> <list-component :list="list" :active-index="activeIndex" @toggle="toggle" /></div><div class='line'></template></div></code></div></pre><!-- HTML_TAG_END --><p>相关知识点：</p><ul><li><a href="https://staging-cn.vuejs.org/guide/extras/render-function.html#functional-components" rel="nofollow noopener noreferrer external" target="_blank">渲染函数 & JSX | Vue.js</a></li><li><a href="https://staging-cn.vuejs.org/guide/extras/rendering-mechanism.html" rel="nofollow noopener noreferrer external" target="_blank">渲染机制 | Vue.js</a></li></ul><h3 id="渲染函数h"><a href="#渲染函数h">渲染函数[h()]</a></h3><blockquote><p>使用 h 渲染函数来实现一个组件。</p></blockquote><!-- HTML_TAG_START --><pre class="shiki material-default" vue="true"><div class="language-id">vue</div><div class='code-container'><code><div class='line'>import { defineComponent, h } from 'vue'; export default defineComponent({ name: 'MyButton', props: { disabled: { type: Boolean,</div><div class='line'>default: false, }, }, emits: ['custom-click'], setup(props, { emit, slots }) { return () => h( 'button', { disabled:</div><div class='line'>props.disabled, onClick: () => emit('custom-click'), }, slots.default?.() ); }, });</div></code></div></pre><!-- HTML_TAG_END --><h3 id="树组件"><a href="#树组件">树组件</a></h3><p>实现一个树组件</p><!-- HTML_TAG_START --><pre class="shiki material-default" vue="true"><div class="language-id">vue</div><div class='code-container'><code><div class='line'><script setup lang="ts"></div><div class='line'>import { defineComponent } from 'vue'</div><div class='line'>interface TreeData {</div><div class='line'> key: string</div><div class='line'> title: string</div><div class='line'> children: TreeData[]</div><div class='line'>}</div><div class='line'>defineProps<{ data: TreeData[] }>()</div><div class='line'></script></div><div class='line'></div><div class='line'><template></div><div class='line'> <ul v-for="node in data"></div><div class='line'> <li>{{ node.title }}</li></div><div class='line'> <template v-if="node.children && node.children.length"></div><div class='line'> // 用递归的方法来实现</div><div class='line'> <TreeComponent :data="node.children" /></div><div class='line'> </template></div><div class='line'> </ul></div><div class='line'></template></div></code></div></pre><!-- HTML_TAG_END --><p>参考：</p><ul><li><a href="https://github.com/webfansplz/vuejs-challenges/issues/659" rel="nofollow noopener noreferrer external" target="_blank">208 - Tree Component · Issue #659 · webfansplz/vuejs-challenges · GitHub</a></li><li><a href="https://www.digitalocean.com/community/tutorials/vuejs-recursive-components" rel="nofollow noopener noreferrer external" target="_blank">Creating a Recursive Tree Component in Vue.js | DigitalOcean</a>相关知识点：<a href="https://staging-cn.vuejs.org/api/sfc-script-setup.html#recursive-components" rel="nofollow noopener noreferrer external" target="_blank">单文件组件 <code><script setup></code> | Vue.js</a></li></ul><h2 id="composable-function"><a href="#composable-function">Composable Function</a></h2><p>本节相关知识点：<a href="https://staging-cn.vuejs.org/guide/reusability/composables.html" rel="nofollow noopener noreferrer external" target="_blank">组合式函数 | Vue.js</a></p><h3 id="切换器"><a href="#切换器">切换器</a></h3><p>尝试编写可组合函数</p><!-- HTML_TAG_START --><pre class="shiki material-default" vue="true"><div class="language-id">vue</div><div class='code-container'><code><div class='line'><script setup lang="ts"></div><div class='line'>import { ref } from 'vue'</div><div class='line'>/**</div><div class='line'> * Implement a composable function that toggles the state</div><div class='line'> * Make the function work correctly</div><div class='line'> */</div><div class='line'>function useToggle(init: boolean) {</div><div class='line'> const state = ref(init)</div><div class='line'> const toggle = () => (state.value = !state.value)</div><div class='line'> return [state, toggle]</div><div class='line'>}</div><div class='line'></div><div class='line'>const [state, toggle] = useToggle(false)</div><div class='line'></script></div><div class='line'></div><div class='line'><template></div><div class='line'> <p>State: {{ state ? 'ON' : 'OFF' }}</p></div><div class='line'> <p @click="toggle">Toggle state</p></div><div class='line'></template></div></code></div></pre><!-- HTML_TAG_END --><h3 id="计数器"><a href="#计数器">计数器</a></h3><p>实现一个计数器</p><!-- HTML_TAG_START --><pre class="shiki material-default" vue="true"><div class="language-id">vue</div><div class='code-container'><code><div class='line'><script setup lang="ts"></div><div class='line'>import { ref } from 'vue'</div><div class='line'></div><div class='line'>interface UseCounterOptions {</div><div class='line'> min?: number</div><div class='line'> max?: number</div><div class='line'>}</div><div class='line'></div><div class='line'>/**</div><div class='line'> * Implement the composable function</div><div class='line'> * Make sure the function works correctly</div><div class='line'> */</div><div class='line'>function useCounter(initialValue = 0, options: UseCounterOptions = {}) {</div><div class='line'> const count = ref(initialValue)</div><div class='line'></div><div class='line'> const inc = () => {</div><div class='line'> if (count.value < options.max) count.value++</div><div class='line'> }</div><div class='line'></div><div class='line'> const dec = () => {</div><div class='line'> if (count.value > options.min) count.value--</div><div class='line'> }</div><div class='line'></div><div class='line'> const reset = () => (count.value = initialValue)</div><div class='line'> return { count, inc, dec, reset }</div><div class='line'>}</div><div class='line'></div><div class='line'>const { count, inc, dec, reset } = useCounter(0, { min: 0, max: 10 })</div><div class='line'></script></div></code></div></pre><!-- HTML_TAG_END --><h3 id="实现本地存储函数"><a href="#实现本地存储函数">实现本地存储函数</a></h3><p>封装一个<code>localStorage</code>API</p><!-- HTML_TAG_START --><pre class="shiki material-default" vue="true"><div class="language-id">vue</div><div class='code-container'><code><div class='line'><script setup lang="ts"></div><div class='line'>import { ref, watchEffect } from 'vue'</div><div class='line'></div><div class='line'>/**</div><div class='line'> * Implement the composable function</div><div class='line'> * Make sure the function works correctly</div><div class='line'> */</div><div class='line'>function useLocalStorage(key: string, initialValue: any) {</div><div class='line'> const value = ref(localStorage.getItem(key) || initialValue)</div><div class='line'> watchEffect(() => {</div><div class='line'> localStorage.setItem(key, value.value)</div><div class='line'> })</div><div class='line'> return value</div><div class='line'>}</div><div class='line'></div><div class='line'>const counter = useLocalStorage('counter', 0)</div><div class='line'></div><div class='line'>// We can get localStorage by triggering the getter:</div><div class='line'>console.log(counter.value)</div><div class='line'></div><div class='line'>// And we can also set localStorage by triggering the setter:</div><div class='line'></div><div class='line'>const update = () => counter.value++</div><div class='line'></script></div><div class='line'></div><div class='line'><template></div><div class='line'> <p>Counter: {{ counter }}</p></div><div class='line'> <button @click="update">Update</button></div><div class='line'></template></div></code></div></pre><!-- HTML_TAG_END --><p>相关知识点：</p><ul><li><a href="https://staging-cn.vuejs.org/api/reactivity-core.html#watcheffect" rel="nofollow noopener noreferrer external" target="_blank">watchEffect()</a></li><li><a href="https://developer.mozilla.org/zh-CN/docs/Web/API/Window/localStorage" rel="nofollow noopener noreferrer external" target="_blank">Window.localStorage - Web API 接口参考 | MDN</a></li></ul><h3 id="鼠标坐标"><a href="#鼠标坐标">鼠标坐标</a></h3><p>这个没通过单元测试，不知道什么原因，试了下其他人的也没能通过……</p><!-- HTML_TAG_START --><pre class="shiki material-default" vue="true"><div class="language-id">vue</div><div class='code-container'><code><div class='line'><script setup lang="ts"></div><div class='line'>import { ref, onMounted, onUnmounted } from 'vue'</div><div class='line'>// Implement ...</div><div class='line'>function useEventListener(target, event, callback) {</div><div class='line'> onMounted(() => target.addEventListener(event, callback))</div><div class='line'> onUnmounted(() => target.removeEventListener(event, callback))</div><div class='line'>}</div><div class='line'></div><div class='line'>// Implement ...</div><div class='line'>function useMouse() {</div><div class='line'> const x = ref(0)</div><div class='line'> const y = ref(0)</div><div class='line'> useEventListener(window, 'mousemove', e => {</div><div class='line'> x.value = e.pageX</div><div class='line'> y.value = e.pageY</div><div class='line'> })</div><div class='line'> return { x, y }</div><div class='line'>}</div><div class='line'>const { x, y } = useMouse()</div><div class='line'></script></div><div class='line'></div><div class='line'><template>Mouse position is at: {{ x }}, {{ y }}</template></div></code></div></pre><!-- HTML_TAG_END --><h2 id="composition-api"><a href="#composition-api">Composition API</a></h2><h3 id="生命周期钩子"><a href="#生命周期钩子">生命周期钩子</a></h3><!-- HTML_TAG_START --><pre class="shiki material-default" vue="true"><div class="language-id">vue</div><div class='code-container'><code><div class='line'><script setup lang="ts"></div><div class='line'>import { onMounted, inject, onUnmounted } from 'vue'</div><div class='line'></div><div class='line'>const timer = inject('timer')</div><div class='line'>const count = inject('count')</div><div class='line'></div><div class='line'>onMounted(() => {</div><div class='line'> timer.value = window.setInterval(() => {</div><div class='line'> count.value++</div><div class='line'> }, 1000)</div><div class='line'>})</div><div class='line'>// 计时器要清除</div><div class='line'>onUnmounted(() => {</div><div class='line'> window.clearInterval(timer.value)</div><div class='line'>})</div><div class='line'></script></div><div class='line'></div><div class='line'><template></div><div class='line'> <div></div><div class='line'> <p>Child Component: {{ count }}</p></div><div class='line'> </div></div><div class='line'></template></div></code></div></pre><!-- HTML_TAG_END --><ul><li>相关知识点：<ul><li><a href="https://staging-cn.vuejs.org/api/composition-api-dependency-injection.html" rel="nofollow noopener noreferrer external" target="_blank">组合式 API：依赖注入 | Vue.js</a></li><li><a href="https://staging-cn.vuejs.org/api/composition-api-lifecycle.html#onunmounted" rel="nofollow noopener noreferrer external" target="_blank">组合式 API：生命周期钩子 | Vue.js</a></li></ul></li></ul><h3 id="ref-全家桶"><a href="#ref-全家桶">ref 全家桶</a></h3><!-- HTML_TAG_START --><pre class="shiki material-default" vue="true"><div class="language-id">vue</div><div class='code-container'><code><div class='line'><script setup lang="ts"></div><div class='line'>import { ref, Ref, reactive, isRef, unref, toRef } from 'vue'</div><div class='line'></div><div class='line'>const initial = ref(10)</div><div class='line'>const count = ref(0)</div><div class='line'></div><div class='line'>// Challenge 1: Update ref</div><div class='line'>function update(value) {</div><div class='line'> count.value = value</div><div class='line'>}</div><div class='line'></div><div class='line'>/**</div><div class='line'> * Challenge 2: Check if the `count` is a ref object.</div><div class='line'> * Make the output be 1</div><div class='line'> */</div><div class='line'>console.log(isRef(count) ? 1 : 0)</div><div class='line'></div><div class='line'>/**</div><div class='line'> * Challenge 3: Unwrap ref</div><div class='line'> * Make the output be true</div><div class='line'> */</div><div class='line'>function initialCount(value: number | Ref<number>) {</div><div class='line'> // Make the output be true</div><div class='line'> console.log(unref(value) === 10)</div><div class='line'>}</div><div class='line'></div><div class='line'>initialCount(initial)</div><div class='line'></div><div class='line'>/**</div><div class='line'> * Challenge 4:</div><div class='line'> * create a ref for a property on a source reactive object.</div><div class='line'> * The created ref is synced with its source property:</div><div class='line'> * mutating the source property will update the ref, and vice-versa.</div><div class='line'> * Make the output be true</div><div class='line'> */</div><div class='line'>const state = reactive({</div><div class='line'> foo: 1,</div><div class='line'> bar: 2</div><div class='line'>})</div><div class='line'>const fooRef = toRef(state, 'foo') // change the impl...</div><div class='line'></div><div class='line'>// mutating the ref updates the original</div><div class='line'>fooRef.value++</div><div class='line'>console.log(state.foo === 2)</div><div class='line'></div><div class='line'>// mutating the original also updates the ref</div><div class='line'>state.foo++</div><div class='line'>console.log(fooRef.value === 3)</div><div class='line'></script></div><div class='line'></div><div class='line'><template></div><div class='line'> <div></div><div class='line'> <p></div><div class='line'> <span @click="update(count - 1)">-</span></div><div class='line'> {{ count }}</div><div class='line'> <span @click="update(count + 1)">+</span></div><div class='line'> </p></div><div class='line'> </div></div><div class='line'></template></div></code></div></pre><!-- HTML_TAG_END --><p>相关知识点：</p><ul><li><a href="https://staging-cn.vuejs.org/api/reactivity-utilities.html#isref" rel="nofollow noopener noreferrer external" target="_blank">isRef()</a></li><li><a href="https://staging-cn.vuejs.org/api/reactivity-utilities.html#unref" rel="nofollow noopener noreferrer external" target="_blank">unref()</a></li><li><a href="https://staging-cn.vuejs.org/api/reactivity-utilities.html#toref" rel="nofollow noopener noreferrer external" target="_blank">toRef</a></li></ul><h3 id="响应性丢失"><a href="#响应性丢失">响应性丢失</a></h3><p>保证解构/扩展不丢失响应性</p><!-- HTML_TAG_START --><pre class="shiki material-default" vue="true"><div class="language-id">vue</div><div class='code-container'><code><div class='line'><script setup lang="ts"></div><div class='line'>import { reactive, toRefs } from 'vue'</div><div class='line'></div><div class='line'>function useCount() {</div><div class='line'> const state = reactive({</div><div class='line'> count: 0</div><div class='line'> })</div><div class='line'></div><div class='line'> function update(value: number) {</div><div class='line'> state.count = value</div><div class='line'> }</div><div class='line'></div><div class='line'> return {</div><div class='line'> state: toRefs(state),</div><div class='line'> update</div><div class='line'> }</div><div class='line'>}</div><div class='line'></div><div class='line'>// Ensure the destructured properties don't lose their reactivity</div><div class='line'>const {</div><div class='line'> state: { count },</div><div class='line'> update</div><div class='line'>} = useCount()</div><div class='line'></script></div><div class='line'></div><div class='line'><template></div><div class='line'> <div></div><div class='line'> <p></div><div class='line'> <span @click="update(count - 1)">-</span></div><div class='line'> {{ count }}</div><div class='line'> <span @click="update(count + 1)">+</span></div><div class='line'> </p></div><div class='line'> </div></div><div class='line'></template></div></code></div></pre><!-- HTML_TAG_END --><p>相关知识点：<a href="https://staging-cn.vuejs.org/api/reactivity-utilities.html#torefs" rel="nofollow noopener noreferrer external" target="_blank">toRefs</a></p><h3 id="可写的计算属性"><a href="#可写的计算属性">可写的计算属性</a></h3><!-- HTML_TAG_START --><pre class="shiki material-default" vue="true"><div class="language-id">vue</div><div class='code-container'><code><div class='line'><script setup lang="ts"></div><div class='line'>import { ref, computed } from 'vue'</div><div class='line'></div><div class='line'>const count = ref(1)</div><div class='line'>const plusOne = computed({</div><div class='line'> get() {</div><div class='line'> return count.value + 1</div><div class='line'> },</div><div class='line'> set(newValue) {</div><div class='line'> count.value = newValue - 1</div><div class='line'> }</div><div class='line'>})</div><div class='line'></div><div class='line'>/**</div><div class='line'> * Make the `plusOne` writable.</div><div class='line'> * So that we can get the result `plusOne` to be 3, and `count` to be 2.</div><div class='line'> */</div><div class='line'></div><div class='line'>plusOne.value++</div><div class='line'></script></div><div class='line'></div><div class='line'><template></div><div class='line'> <div></div><div class='line'> <p>{{ count }}</p></div><div class='line'> <p>{{ plusOne }}</p></div><div class='line'> </div></div><div class='line'></template></div></code></div></pre><!-- HTML_TAG_END --><p>相关知识点：<a href="https://staging-cn.vuejs.org/guide/essentials/computed.html#writable-computed" rel="nofollow noopener noreferrer external" target="_blank">可写的计算属性 </a></p><h3 id="watch-全家桶"><a href="#watch-全家桶">watch 全家桶</a></h3><!-- HTML_TAG_START --><pre class="shiki material-default" vue="true"><div class="language-id">vue</div><div class='code-container'><code><div class='line'><script setup lang="ts"></div><div class='line'>import { ref, watch } from 'vue'</div><div class='line'></div><div class='line'>const count = ref(0)</div><div class='line'></div><div class='line'>/**</div><div class='line'> * Challenge 1: Watch once</div><div class='line'> * Make sure the watch callback only triggers once</div><div class='line'> */</div><div class='line'>const watchOnce = watch(count, () => {</div><div class='line'> console.log('Only triggered once')</div><div class='line'> watchOnce()</div><div class='line'>})</div><div class='line'></div><div class='line'>count.value = 1</div><div class='line'>setTimeout(() => (count.value = 2))</div><div class='line'></div><div class='line'>/**</div><div class='line'> * Challenge 2: Watch object</div><div class='line'> * Make sure the watch callback is triggered</div><div class='line'> */</div><div class='line'>const state = ref({</div><div class='line'> count: 0</div><div class='line'>})</div><div class='line'></div><div class='line'>watch(</div><div class='line'> state,</div><div class='line'> () => {</div><div class='line'> console.log('The state.count updated')</div><div class='line'> },</div><div class='line'> { deep: true }</div><div class='line'>)</div><div class='line'></div><div class='line'>state.value.count = 2</div><div class='line'></div><div class='line'>/**</div><div class='line'> * Challenge 3: Callback Flush Timing</div><div class='line'> * Make sure visited the updated eleRef</div><div class='line'> */</div><div class='line'></div><div class='line'>const eleRef = ref()</div><div class='line'>const age = ref(2)</div><div class='line'>watch(</div><div class='line'> age,</div><div class='line'> () => {</div><div class='line'> console.log(eleRef.value)</div><div class='line'> },</div><div class='line'> {</div><div class='line'> flush: 'post'</div><div class='line'> }</div><div class='line'>)</div><div class='line'>age.value = 18</div><div class='line'></script></div><div class='line'></div><div class='line'><template></div><div class='line'> <div></div><div class='line'> <p></div><div class='line'> {{ count }}</div><div class='line'> </p></div><div class='line'> <p ref="eleRef"></div><div class='line'> {{ age }}</div><div class='line'> </p></div><div class='line'> </div></div><div class='line'></template></div></code></div></pre><!-- HTML_TAG_END --><p>相关知识点：<a href="https://staging-cn.vuejs.org/guide/essentials/watchers.html" rel="nofollow noopener noreferrer external" target="_blank">侦听器 | Vue.js</a></p><h3 id="浅层-ref"><a href="#浅层-ref">浅层 ref</a></h3><p>响应式 API: shallowRef</p><!-- HTML_TAG_START --><pre class="shiki material-default" vue="true"><div class="language-id">vue</div><div class='code-container'><code><div class='line'><script setup lang="ts"></div><div class='line'>import { shallowRef, watch } from 'vue'</div><div class='line'></div><div class='line'>const state = shallowRef({ count: 1 })</div><div class='line'></div><div class='line'>// Does NOT trigger</div><div class='line'>watch(</div><div class='line'> state,</div><div class='line'> () => {</div><div class='line'> console.log('State.count Updated')</div><div class='line'> },</div><div class='line'> { deep: true }</div><div class='line'>)</div><div class='line'></div><div class='line'>/**</div><div class='line'> * Modify the code so that we can make the watch callback trigger.</div><div class='line'> */</div><div class='line'>state.value = { count: 2 }</div><div class='line'></script></div><div class='line'></div><div class='line'><template></div><div class='line'> <div></div><div class='line'> <p></div><div class='line'> {{ state.count }}</div><div class='line'> </p></div><div class='line'> </div></div><div class='line'></template></div></code></div></pre><!-- HTML_TAG_END --><p>相关知识点：<a href="https://staging-cn.vuejs.org/api/reactivity-advanced.html#shallowref" rel="nofollow noopener noreferrer external" target="_blank">shallowRef()</a></p><h3 id="依赖注入"><a href="#依赖注入">依赖注入</a></h3><p>child.vue</p><!-- HTML_TAG_START --><pre class="shiki material-default" vue="true"><div class="language-id">vue</div><div class='code-container'><code><div class='line'><script setup lang="ts"></div><div class='line'>import { inject } from 'vue'</div><div class='line'>const count = inject('count')</div><div class='line'></script></div><div class='line'></div><div class='line'><template></div><div class='line'> {{ count }}</div><div class='line'></template></div></code></div></pre><!-- HTML_TAG_END --><p>相关知识点：<a href="https://staging-cn.vuejs.org/api/composition-api-dependency-injection.html" rel="nofollow noopener noreferrer external" target="_blank">组合式 API：依赖注入 | Vue.js</a></p><h3 id="effect-作用域-api"><a href="#effect-作用域-api">Effect 作用域 API</a></h3><!-- HTML_TAG_START --><pre class="shiki material-default" vue="true"><div class="language-id">vue</div><div class='code-container'><code><div class='line'><script setup lang="ts"></div><div class='line'>import { ref, computed, watch, watchEffect, effectScope } from 'vue'</div><div class='line'></div><div class='line'>const counter = ref(1)</div><div class='line'>const doubled = computed(() => counter.value * 2)</div><div class='line'></div><div class='line'>// use the `effectScope` API to make these effects stop together after being triggered once</div><div class='line'></div><div class='line'>const scope = effectScope()</div><div class='line'>scope.run(() => {</div><div class='line'> watch(doubled, () => console.log(doubled.value))</div><div class='line'> watchEffect(() => console.log(`Count: ${doubled.value}`))</div><div class='line'> counter.value = 2</div><div class='line'>})</div><div class='line'></div><div class='line'>setTimeout(() => {</div><div class='line'> counter.value = 4</div><div class='line'> scope.stop()</div><div class='line'>})</div><div class='line'></script></div><div class='line'></div><div class='line'><template></div><div class='line'> <div></div><div class='line'> <p></div><div class='line'> {{ doubled }}</div><div class='line'> </p></div><div class='line'> </div></div><div class='line'></template></div></code></div></pre><!-- HTML_TAG_END --><p>相关知识点：<a href="https://staging-cn.vuejs.org/api/reactivity-advanced.html#effectscope" rel="nofollow noopener noreferrer external" target="_blank">effectScope</a></p><h3 id="自定义-ref"><a href="#自定义-ref">自定义 ref</a></h3><!-- HTML_TAG_START --><pre class="shiki material-default" vue="true"><div class="language-id">vue</div><div class='code-container'><code><div class='line'><script setup></div><div class='line'>import { watch, customRef } from 'vue'</div><div class='line'></div><div class='line'>/**</div><div class='line'> * Implement the function</div><div class='line'> */</div><div class='line'>function useDebouncedRef(value, delay = 200) {</div><div class='line'> let timeout</div><div class='line'> return customRef((track, trigger) => {</div><div class='line'> return {</div><div class='line'> get() {</div><div class='line'> track()</div><div class='line'> return value</div><div class='line'> },</div><div class='line'> set(newValue) {</div><div class='line'> clearTimeout(timeout)</div><div class='line'> timeout = setTimeout(() => {</div><div class='line'> value = newValue</div><div class='line'> trigger()</div><div class='line'> }, delay)</div><div class='line'> }</div><div class='line'> }</div><div class='line'> })</div><div class='line'>}</div><div class='line'>const text = useDebouncedRef('hello')</div><div class='line'></div><div class='line'>/**</div><div class='line'> * Make sure the callback only gets triggered once when entered multiple times in a certain timeout</div><div class='line'> */</div><div class='line'>watch(text, value => {</div><div class='line'> console.log(value)</div><div class='line'>})</div><div class='line'></script></div><div class='line'></div><div class='line'><template></div><div class='line'> <input v-model="text" /></div><div class='line'></template></div></code></div></pre><!-- HTML_TAG_END --><p>相关知识点：<a href="https://staging-cn.vuejs.org/api/reactivity-advanced.html#customref" rel="nofollow noopener noreferrer external" target="_blank">customRef</a></p><h2 id="directives"><a href="#directives">Directives</a></h2><h3 id="大写"><a href="#大写">大写</a></h3><p>创建一个自定义的修饰符 <code>capitalize</code>，它会自动将 <code>v-model</code> 绑定输入的字符串值首字母转为大写：App.vue</p><!-- HTML_TAG_START --><pre class="shiki material-default" vue="true"><div class="language-id">vue</div><div class='code-container'><code><div class='line'><script setup></div><div class='line'>import { ref } from 'vue'</div><div class='line'>import Input from './Input.vue'</div><div class='line'></div><div class='line'>const value = ref('')</div><div class='line'></script></div><div class='line'></div><div class='line'><template></div><div class='line'> <Input type="text" v-model.capitalize="value" /></div><div class='line'></template></div></code></div></pre><!-- HTML_TAG_END --><p>Input.vue</p><!-- HTML_TAG_START --><pre class="shiki material-default" vue="true"><div class="language-id">vue</div><div class='code-container'><code><div class='line'><script setup></div><div class='line'>import { defineProps, defineEmits } from 'vue'</div><div class='line'>const props = defineProps({</div><div class='line'> modelValue: String,</div><div class='line'> modelModifiers: {</div><div class='line'> default: () => ({})</div><div class='line'> }</div><div class='line'>})</div><div class='line'></div><div class='line'>const emit = defineEmits(['update:modelValue'])</div><div class='line'>function emitValue(e) {</div><div class='line'> let value = e.target.value</div><div class='line'> if (props.modelModifiers.capitalize) {</div><div class='line'> value = value.charAt(0).toUpperCase() + value.slice(1)</div><div class='line'> }</div><div class='line'> emit('update:modelValue', value)</div><div class='line'>}</div><div class='line'></script></div><div class='line'></div><div class='line'><template></div><div class='line'> <input type="text" :value="modelValue" @input="emitValue" /></div><div class='line'></template></div></code></div></pre><!-- HTML_TAG_END --><p>相关知识点：<a href="https://staging-cn.vuejs.org/guide/components/events.html#usage-with-v-model" rel="nofollow noopener noreferrer external" target="_blank">处理 v-model 修饰符</a></p><h3 id="优化性能的指令-1"><a href="#优化性能的指令-1">优化性能的指令</a></h3><p>见上面。v-once</p><h3 id="切换焦点指令"><a href="#切换焦点指令">切换焦点指令</a></h3><!-- HTML_TAG_START --><pre class="shiki material-default" vue="true"><div class="language-id">vue</div><div class='code-container'><code><div class='line'><script setup lang="ts"></div><div class='line'>import { ref } from 'vue'</div><div class='line'></div><div class='line'>const state = ref(false)</div><div class='line'></div><div class='line'>/**</div><div class='line'> * Implement the custom directive</div><div class='line'> * Make sure the input element focuses/blurs when the 'state' is toggled</div><div class='line'> *</div><div class='line'> */</div><div class='line'></div><div class='line'>const VFocus = {</div><div class='line'> updated: (el, state) => (state.value ? el.focus() : el.blur())</div><div class='line'>}</div><div class='line'></div><div class='line'>setInterval(() => {</div><div class='line'> state.value = !state.value</div><div class='line'>}, 2000)</div><div class='line'></script></div><div class='line'></div><div class='line'><template></div><div class='line'> <input v-focus="state" type="text" /></div><div class='line'></template></div></code></div></pre><!-- HTML_TAG_END --><p>相关知识点：<a href="https://staging-cn.vuejs.org/guide/reusability/custom-directives.html" rel="nofollow noopener noreferrer external" target="_blank">自定义指令 | Vue.js</a></p><h3 id="防抖点击指令"><a href="#防抖点击指令">防抖点击指令</a></h3><p>尝试实现一个防抖点击指令</p><!-- HTML_TAG_START --><pre class="shiki material-default" vue="true"><div class="language-id">vue</div><div class='code-container'><code><div class='line'><script setup lang="ts"></div><div class='line'>/**</div><div class='line'> * Implement the custom directive</div><div class='line'> * Make sure the `onClick` method only gets triggered once when clicked many times quickly</div><div class='line'> * And you also need to support the debounce delay time option. e.g `v-debounce-click:ms`</div><div class='line'> *</div><div class='line'> */</div><div class='line'></div><div class='line'>function debounce(fn, delay) {</div><div class='line'> let timeout</div><div class='line'> let count = 0</div><div class='line'> return (...args) => {</div><div class='line'> if (count === 0) {</div><div class='line'> count++</div><div class='line'> fn(...args)</div><div class='line'> }</div><div class='line'> clearTimeout(timeout)</div><div class='line'> timeout = setTimeout(() => {</div><div class='line'> fn(...args)</div><div class='line'> }, delay)</div><div class='line'> }</div><div class='line'>}</div><div class='line'></div><div class='line'>const VDebounceClick = {</div><div class='line'> mounted: (el, binding) => {</div><div class='line'> const { value, arg } = binding</div><div class='line'> el.addEventListener('click', debounce(value, arg))</div><div class='line'> }</div><div class='line'>}</div><div class='line'></div><div class='line'>function onClick() {</div><div class='line'> console.log('Only triggered once when clicked many times quickly')</div><div class='line'>}</div><div class='line'></script></div><div class='line'></div><div class='line'><template></div><div class='line'> <button v-debounce-click:200="onClick">Click on it many times quickly</button></div><div class='line'></template></div></code></div></pre><!-- HTML_TAG_END --><p>相关知识点：<a href="https://staging-cn.vuejs.org/guide/reusability/custom-directives.html#introduce" rel="nofollow noopener noreferrer external" target="_blank">指令钩子</a></p><h3 id="激活的样式-指令"><a href="#激活的样式-指令">激活的样式-指令</a></h3><!-- HTML_TAG_START --><pre class="shiki material-default" vue="true"><div class="language-id">vue</div><div class='code-container'><code><div class='line'><script setup lang="ts"></div><div class='line'>import { ref, watchEffect } from 'vue'</div><div class='line'></div><div class='line'>/**</div><div class='line'> * Implement the custom directive</div><div class='line'> * Make sure the list item text color changes to red when the `toggleTab` is toggled</div><div class='line'> *</div><div class='line'> */</div><div class='line'>const VActiveStyle = {</div><div class='line'> mounted: (el, binding) => {</div><div class='line'> const [styles, fn] = binding.value</div><div class='line'> watchEffect(() => {</div><div class='line'> Object.keys(styles).map(key => (el.style[key] = fn() ? styles[key] : ''))</div><div class='line'> })</div><div class='line'> }</div><div class='line'>}</div><div class='line'></div><div class='line'>const list = [1, 2, 3, 4, 5, 6, 7, 8]</div><div class='line'>const activeTab = ref(0)</div><div class='line'>function toggleTab(index: number) {</div><div class='line'> activeTab.value = index</div><div class='line'>}</div><div class='line'></script></div><div class='line'></div><div class='line'><template></div><div class='line'> <ul></div><div class='line'> <li</div><div class='line'> v-for="(item, index) in list"</div><div class='line'> :key="index"</div><div class='line'> v-active-style="[{ color: 'red' }, () => activeTab === index]"</div><div class='line'> @click="toggleTab(index)"></div><div class='line'> {{ item }}</div><div class='line'> </li></div><div class='line'> </ul></div><div class='line'></template></div></code></div></pre><!-- HTML_TAG_END --><h3 id="实现简易版v-model指令"><a href="#实现简易版v-model指令">实现简易版<code>v-model</code>指令</a></h3><!-- HTML_TAG_START --><pre class="shiki material-default" vue="true"><div class="language-id">vue</div><div class='code-container'><code><div class='line'><script setup lang="ts"></div><div class='line'>import { ref } from 'vue'</div><div class='line'></div><div class='line'>/**</div><div class='line'> * Implement a custom directive</div><div class='line'> * Create a two-way binding on a form input element</div><div class='line'> *</div><div class='line'> */</div><div class='line'>const VOhModel = {</div><div class='line'> mounted: (el, binding) => {</div><div class='line'> el.value = binding.value</div><div class='line'> el.addEventListener('input', () => {</div><div class='line'> value.value = el.value</div><div class='line'> })</div><div class='line'> }</div><div class='line'>}</div><div class='line'></div><div class='line'>const value = ref('Hello Vue.js')</div><div class='line'></script></div><div class='line'></div><div class='line'><template></div><div class='line'> <input v-oh-model="value" type="text" /></div><div class='line'> <p>{{ value }}</p></div><div class='line'></template></div></code></div></pre><!-- HTML_TAG_END --><h2 id="event-handling"><a href="#event-handling">Event Handling</a></h2><h3 id="阻止事件冒泡"><a href="#阻止事件冒泡">阻止事件冒泡</a></h3><!-- HTML_TAG_START --><pre class="shiki material-default" vue="true"><div class="language-id">vue</div><div class='code-container'><code><div class='line'><script setup lang="ts"></div><div class='line'>const click1 = () => {</div><div class='line'> console.log('click1')</div><div class='line'>}</div><div class='line'></div><div class='line'>const click2 = e => {</div><div class='line'> console.log('click2')</div><div class='line'>}</div><div class='line'></script></div><div class='line'></div><div class='line'><template></div><div class='line'> <div @click="click1()"></div><div class='line'> <div @click.stop="click2()">click me</div></div><div class='line'> </div></div><div class='line'></template></div></code></div></pre><!-- HTML_TAG_END --><p>相关知识点：<a href="https://staging-cn.vuejs.org/guide/essentials/event-handling.html#event-modifiers" rel="nofollow noopener noreferrer external" target="_blank">事件修饰符</a></p><h3 id="按键修饰符"><a href="#按键修饰符">按键修饰符</a></h3><!-- HTML_TAG_START --><pre class="shiki material-default" vue="true"><div class="language-id">vue</div><div class='code-container'><code><div class='line'><template></div><div class='line'> <!-- Add key modifiers made this will fire even if Alt or Shift is also pressed --></div><div class='line'> <button @click.alt="onClick1" @click.shift="onClick1">A</button></div><div class='line'></div><div class='line'> <!-- Add key modifiers made this will only fire when Shift and no other keys are pressed --></div><div class='line'> <button @click.shift.exact="onCtrlClick">A</button></div><div class='line'></div><div class='line'> <!-- Add key modifiers made this will only fire when no system modifiers are pressed --></div><div class='line'> <button @click.exact="onClick2">A</button></div><div class='line'></template></div><div class='line'></div><div class='line'><script setup></div><div class='line'>function onClick1() {</div><div class='line'> console.log('onClick1')</div><div class='line'>}</div><div class='line'>function onCtrlClick() {</div><div class='line'> console.log('onCtrlClick')</div><div class='line'>}</div><div class='line'>function onClick2() {</div><div class='line'> console.log('onClick2')</div><div class='line'>}</div><div class='line'></script></div></code></div></pre><!-- HTML_TAG_END --><p>相关知识点：<a href="https://staging-cn.vuejs.org/guide/essentials/event-handling.html#key-modifiers" rel="nofollow noopener noreferrer external" target="_blank">按键修饰符</a></p><h2 id="global-apigeneral"><a href="#global-apigeneral">Global API:General</a></h2><h3 id="下一次-dom-更新"><a href="#下一次-dom-更新">下一次 DOM 更新</a></h3><p>在<code>Vue.js</code>中改变响应式状态时，DOM 不会同步更新。 <code>Vue.js</code> 提供了一个用于等待下一次 DOM 更新的方法</p><!-- HTML_TAG_START --><pre class="shiki material-default" vue="true"><div class="language-id">vue</div><div class='code-container'><code><div class='line'><script setup></div><div class='line'>import { ref, nextTick } from 'vue'</div><div class='line'></div><div class='line'>const count = ref(0)</div><div class='line'>const counter = ref(null)</div><div class='line'></div><div class='line'>async function increment() {</div><div class='line'> count.value++</div><div class='line'></div><div class='line'> /**</div><div class='line'> * DOM is not yet updated, how can we make sure that the DOM gets updated</div><div class='line'> * Make the output be true</div><div class='line'> */</div><div class='line'> await nextTick()</div><div class='line'> console.log(+counter.value.textContent === 1)</div><div class='line'>}</div><div class='line'></script></div><div class='line'></div><div class='line'><template></div><div class='line'> <button ref="counter" @click="increment"></div><div class='line'> {{ count }}</div><div class='line'> </button></div><div class='line'></template></div></code></div></pre><!-- HTML_TAG_END --><p>相关知识点：<a href="https://staging-cn.vuejs.org/api/general.html#nexttick" rel="nofollow noopener noreferrer external" target="_blank">nextTick()</a></p><h2 id="lifecycle"><a href="#lifecycle">Lifecycle</a></h2><h3 id="生命周期钩子-1"><a href="#生命周期钩子-1">生命周期钩子</a></h3><p><a href="#%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E9%92%A9%E5%AD%90">同上：生命周期钩子</a></p><h2 id="reactivityadvanced"><a href="#reactivityadvanced">Reactivity:Advanced</a></h2><h3 id="浅层-ref-1"><a href="#浅层-ref-1">浅层 ref</a></h3><p><a href="#%E6%B5%85%E5%B1%82-ref">同上：浅层 ref</a></p><h3 id="原始值-api"><a href="#原始值-api">原始值 API</a></h3><!-- HTML_TAG_START --><pre class="shiki material-default" vue="true"><div class="language-id">vue</div><div class='code-container'><code><div class='line'><script setup lang="ts"></div><div class='line'>import { reactive, isReactive, toRaw, markRaw } from 'vue'</div><div class='line'></div><div class='line'>const state = { count: 1 }</div><div class='line'>const reactiveState = toRaw(reactive(state))</div><div class='line'></div><div class='line'>/**</div><div class='line'> * Modify the code so that we can make the output be true.</div><div class='line'> */</div><div class='line'>console.log(reactiveState === state)</div><div class='line'></div><div class='line'>/**</div><div class='line'> * Modify the code so that we can make the output be false.</div><div class='line'> */</div><div class='line'>const info = markRaw({ count: 1 })</div><div class='line'>const reactiveInfo = reactive(info)</div><div class='line'></div><div class='line'>console.log(isReactive(reactiveInfo))</div><div class='line'></script></div><div class='line'></div><div class='line'><template></div><div class='line'> <div></div><div class='line'> <p></div><div class='line'> {{ reactiveState.count }}</div><div class='line'> </p></div><div class='line'> </div></div><div class='line'></template></div></code></div></pre><!-- HTML_TAG_END --><p>相关知识点：</p><ul><li><a href="https://staging-cn.vuejs.org/api/reactivity-advanced.html#toraw" rel="nofollow noopener noreferrer external" target="_blank">toRaw</a></li><li><a href="https://staging-cn.vuejs.org/api/reactivity-advanced.html#markraw" rel="nofollow noopener noreferrer external" target="_blank">markRaw</a></li></ul><h3 id="effect-作用域-api-1"><a href="#effect-作用域-api-1">Effect 作用域 API</a></h3><p><a href="#effect-%E4%BD%9C%E7%94%A8%E5%9F%9F-api">同上：Effect 作用域 API</a></p><h3 id="自定义-ref-1"><a href="#自定义-ref-1">自定义 ref</a></h3><p><a href="#%E8%87%AA%E5%AE%9A%E4%B9%89-ref">同上：自定义 ref</a></p><h2 id="reactivitycore"><a href="#reactivitycore">Reactivity:Core</a></h2><h3 id="ref-全家桶-1"><a href="#ref-全家桶-1">ref 全家桶</a></h3><p><a href="#ref-%E5%85%A8%E5%AE%B6%E6%A1%B6">同上：ref 全家桶</a></p><h3 id="可写的计算属性-1"><a href="#可写的计算属性-1">可写的计算属性</a></h3><p><a href="#%E5%8F%AF%E5%86%99%E7%9A%84%E8%AE%A1%E7%AE%97%E5%B1%9E%E6%80%A7">同上：可写的计算属性</a></p><h3 id="watch-全家桶-1"><a href="#watch-全家桶-1">watch 全家桶</a></h3><p><a href="#watch-%E5%85%A8%E5%AE%B6%E6%A1%B6">同上：watch 全家桶</a></p><h2 id="reactivityutilities"><a href="#reactivityutilities">Reactivity:Utilities</a></h2><h3 id="响应性丟失"><a href="#响应性丟失">响应性丟失</a></h3><p><a href="#%E5%93%8D%E5%BA%94%E6%80%A7%E4%B8%9F%E5%A4%B1">同上：响应性丟失</a></p><h2 id="utility-function"><a href="#utility-function">Utility Function</a></h2><h3 id="until"><a href="#until">until</a></h3><!-- HTML_TAG_START --><pre class="shiki material-default" vue="true"><div class="language-id">vue</div><div class='code-container'><code><div class='line'><script setup lang="ts"></div><div class='line'>import { ref } from 'vue'</div><div class='line'></div><div class='line'>const count = ref(0)</div><div class='line'></div><div class='line'>/**</div><div class='line'> * Implement the until function</div><div class='line'> */</div><div class='line'></div><div class='line'>function until(initial) {</div><div class='line'> function toBe(value) {</div><div class='line'> return new Promise(resolve => {</div><div class='line'> initial.value = value</div><div class='line'> resolve(initial.value)</div><div class='line'> })</div><div class='line'> }</div><div class='line'></div><div class='line'> return {</div><div class='line'> toBe</div><div class='line'> }</div><div class='line'>}</div><div class='line'></div><div class='line'>async function increase() {</div><div class='line'> count.value = 0</div><div class='line'> setInterval(() => {</div><div class='line'> count.value++</div><div class='line'> }, 1000)</div><div class='line'> await until(count).toBe(3)</div><div class='line'> console.log(count.value === 3) // Make sure the output is true</div><div class='line'>}</div><div class='line'></script></div><div class='line'></div><div class='line'><template></div><div class='line'> <p @click="increase">Increase</p></div><div class='line'></template></div></code></div></pre><!-- HTML_TAG_END --><h2 id="web-components"><a href="#web-components">Web Components</a></h2><h3 id="自定义元素"><a href="#自定义元素">自定义元素</a></h3><!-- HTML_TAG_START --><pre class="shiki material-default" vue="true"><div class="language-id">vue</div><div class='code-container'><code><div class='line'><script setup lang="ts"></div><div class='line'>import { onMounted, defineCustomElement } from 'vue'</div><div class='line'></div><div class='line'>/**</div><div class='line'> * Implement the code to create a custom element.</div><div class='line'> * Make the output of page show "Hello Vue.js".</div><div class='line'> */</div><div class='line'>const VueJs = defineCustomElement({</div><div class='line'> props: { message: String },</div><div class='line'> template: '<span>{{message}}</span>'</div><div class='line'>})</div><div class='line'></div><div class='line'>customElements.define('vue-js', VueJs)</div><div class='line'>onMounted(() => {</div><div class='line'> document.getElementById('app')!.innerHTML = '<vue-js message="Hello Vue.js"></vue-js>'</div><div class='line'>})</div><div class='line'></script></div><div class='line'></div><div class='line'><template></div><div class='line'> <div id="app"></div></div><div class='line'></template></div></code></div></pre><!-- HTML_TAG_END --><p>并且 vite.config.js 里要做相关设置相关知识点：<a href="https://staging-cn.vuejs.org/guide/extras/web-components.html" rel="nofollow noopener noreferrer external" target="_blank">Vue 与 Web Components | Vue.js</a></p>]]>
|
||
</content>
|
||
<category term="Vue" scheme="https://seviche.cc/?tags=Vue" />
|
||
</entry>
|
||
<entry>
|
||
<title type="html"><![CDATA[Monkey Patch]]></title>
|
||
<link href="https://seviche.cc/2022-08-06-notes" />
|
||
<id>https://seviche.cc/2022-08-06-notes</id>
|
||
<published>2022-08-06T00:00:00.000Z</published>
|
||
<updated>2022-08-07T04:36:02.907Z</updated>
|
||
<summary type="html"><![CDATA[猴子打补丁]]></summary>
|
||
<content type="html">
|
||
<![CDATA[<p><a href="https://en.wikipedia.org/wiki/Monkey%20patch" rel="nofollow noopener noreferrer external" target="_blank">Monkey Patch - Wikipedia</a></p><blockquote><p>A <strong>Monkey patch</strong> is a way for a program to extend or modify supporting system software locally (affecting only the running instance of the program).”</p></blockquote><p>也可以可以理解为基于原生功能（API）的一些自定义拓展？这个概念常在 Python 里面出现，也叫鸭子双关</p><p><a href="https://mmazzarolo.com/blog/2022-07-30-checking-if-a-javascript-native-function-was-monkey-patched/" rel="nofollow noopener noreferrer external" target="_blank">Checking if a JavaScript native function is monkey patched</a></p><blockquote><p>Monkey patching is a powerful but dangerous technique because the code you’re overriding is not in your control: future updates to the JavaScript engine may break some assumptions made in your patch and cause serious bugs.Additionally, by monkey patching code you don’t own, you might override some code that has already been monkey patched by another developer, introducing a potential conflict.</p></blockquote><p>对于 JS 来说，Monkey patch 的问题在于：如果 JS 引擎更新了，可能会带来一些难以预计的 bug，这篇文章说了几种怎么检测是否存在 monkey patch 函数的方法，比如用 toString、iframe、proxy 等等，但都不是很完美，可以根据使用场景来决定用哪种方法</p>]]>
|
||
</content>undefined
|
||
</entry>
|
||
<entry>
|
||
<title type="html"><![CDATA[我在看什么 · 7 月]]></title>
|
||
<link href="https://seviche.cc/2022-07-31-reading-7" />
|
||
<id>https://seviche.cc/2022-07-31-reading-7</id>
|
||
<published>2022-07-31T00:00:00.000Z</published>
|
||
<updated>2022-08-06T11:32:41.119Z</updated>
|
||
<summary type="html"><![CDATA[eval / CSP&XSS / Commonplace Book ……]]></summary>
|
||
<content type="html">
|
||
<![CDATA[<h2 id="前端"><a href="#前端">前端</a></h2><ul><li><p><strong>关于类型数组 TypedArray</strong></p><ul><li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/TypedArray" rel="nofollow noopener noreferrer external" target="_blank">TypedArray - JavaScript | MDN</a></li><li><a href="https://www.html5rocks.com/en/tutorials/webgl/typed_arrays/" rel="nofollow noopener noreferrer external" target="_blank">Typed arrays - Binary data in the browser</a></li></ul></li><li><p><a href="https://web.dev/structured-clone" rel="nofollow noopener noreferrer external" target="_blank">Deep-copying in JavaScript using structuredClone</a></p></li><li><p><a href="https://fettblog.eu/how-not-to-learn-typescript/" rel="nofollow noopener noreferrer external" target="_blank">How not to learn TypeScript</a></p><p>讲了 TypeScript 使用过程中经常犯的错误</p></li><li><p><a href="https://www.sitepoint.com/shorthand-javascript-techniques/" rel="nofollow noopener noreferrer external" target="_blank">25+ JavaScript Shorthand Coding Techniques</a></p><p><code>Math.floor</code> 的简写是<code>~~</code></p></li><li><p><strong>eval</strong></p><ul><li><p><a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/eval#don.27t_use_eval.21" rel="nofollow noopener noreferrer external" target="_blank">eval-MDN</a></p></li><li><p><a href="https://blog.csdn.net/yx_xuan/article/details/115342622" rel="nofollow noopener noreferrer external" target="_blank">Js 代替 eval 的方法</a></p><!-- HTML_TAG_START --><pre class="shiki material-default" js="true"><div class="language-id">js</div><div class='code-container'><code><div class='line'>const evalAlter = fn => {</div><div class='line'> const Fn = Function</div><div class='line'> return new Fn('return' + fn)()</div><div class='line'>}</div></code></div></pre><!-- HTML_TAG_END --></li></ul></li><li><p><strong>Vue 函数式组件</strong></p><ul><li><a href="https://staging-cn.vuejs.org/guide/extras/render-function.html#functional-components" rel="nofollow noopener noreferrer external" target="_blank">函数式组件</a></li><li><a href="https://juejin.cn/post/6867458052036624392" rel="nofollow noopener noreferrer external" target="_blank">Vue 函数式组件</a></li></ul></li><li><p><a href="https://www.yuexun.me/blog/how-the-notion-editor-is-implemented/" rel="nofollow noopener noreferrer external" target="_blank">Notion 编辑器是怎么实现的？</a></p></li><li><p><a href="https://www.ruanyifeng.com/blog/2016/09/csp.html" rel="nofollow noopener noreferrer external" target="_blank">Content Security Policy 入门教程</a></p><ul><li>CSP 是什么：<blockquote><p>CSP 的实质就是白名单制度，开发者明确告诉客户端，哪些外部资源可以加载和执行，等同于提供白名单。它的实现和执行全部由浏览器完成，开发者只需提供配置</p></blockquote></li><li>设置方法：<ol><li>在 http 头中声明</li><li>在 meta 标签中声明</li></ol></li><li>具体配置中：<ol><li>如果同一个限制选项使用多次，只有第一次会生效。</li><li><code>script-src</code>和<code>object-src</code>是必设的，除非设置了<code>default-src</code>。</li><li><code>script-src</code>不能使用<code>unsafe-inline</code>关键字（除非伴随一个<code>nonce</code>值），也不能允许设置<code>data:URL</code>。</li></ol></li><li>补充阅读：<ul><li><a href="https://infosec.mozilla.org/guidelines/web_security#content-security-policy" rel="nofollow noopener noreferrer external" target="_blank">Web Security</a></li><li><a href="https://web.dev/csp/" rel="nofollow noopener noreferrer external" target="_blank">Content security policy</a></li></ul></li></ul></li><li><p><a href="https://tech.meituan.com/2018/09/27/fe-security.html" rel="nofollow noopener noreferrer external" target="_blank">前端安全系列（一）：如何防止 XSS 攻击？ - 美团技术团队</a></p><p>严格的 CSP 在 XSS 的防范中可以起到以下的作用：</p><ul><li>禁止加载外域代码，防止复杂的攻击逻辑。</li><li>禁止外域提交，网站被攻击后，用户的数据不会泄露到外域。</li><li>禁止内联脚本执行（规则较严格，目前发现 GitHub 使用）。</li><li>禁止未授权的脚本执行（新特性，Google Map 移动版在使用）。</li><li>合理使用上报可以及时发现 XSS，利于尽快修复问题。</li></ul></li><li><p><a href="https://www.leavesongs.com/PENETRATION/xss-from-my-blog.html" rel="nofollow noopener noreferrer external" target="_blank">我自己博客的一个 XSS 的故事</a></p><blockquote><p>浏览器在渲染 JavaScript 伪协议地址的时候，会先进行 URL 解码，再执行 JavaScript。</p></blockquote><blockquote><p>因为浏览器在解析 URL 的时候会进行 URL 解码，那么用户的输入理应进行 URL 编码后再放进 URL 中。这就是我修复这个漏洞的方法，让用户的输入按照浏览器解析的顺序进行编码：<strong>先进行 unicode 编码再进行 url 编码。</strong></p></blockquote></li><li><p><a href="https://blog.logrocket.com/ladle-storybook-performance-project-sizes/" rel="nofollow noopener noreferrer external" target="_blank">Ladle vs. Storybook: Measuring performance across project sizes</a></p><p>这个博客的文章质量都很高</p></li><li><p><a href="https://www.youtube.com/watch?v=4boXExbbGCk" rel="nofollow noopener noreferrer external" target="_blank">a fresh new web framework is out</a></p></li></ul><h2 id="后端"><a href="#后端">后端</a></h2><ul><li><p><a href="https://www.cnblogs.com/sanduo1314/p/7458415.html" rel="nofollow noopener noreferrer external" target="_blank">Linux 入侵检测</a></p></li><li><p><a href="https://juejin.cn/post/6914846299607171080" rel="nofollow noopener noreferrer external" target="_blank">如何删除镜像、容器和数据卷？几个值得收藏的 docker 命令</a></p></li><li><p><a href="https://www.cnblogs.com/jiahm/p/12357503.html" rel="nofollow noopener noreferrer external" target="_blank">HTTP 413 错误解决方法</a></p><p>总结一下：413 错误是因为上传文件的大小超过了限制，需要调整 Nginx 设置，比如在 server 里面加</p><!-- HTML_TAG_START --><pre class="shiki material-default" yaml="true"><div class="language-id">yaml</div><div class='code-container'><code><div class='line'> client_max_body_size 8M; #配置请求体缓存区大小</div><div class='line'></div><div class='line'> client_body_buffer_size 128k; #设置客户端请求体最大值</div><div class='line'></div><div class='line'> fastcgi_intercept_errors on;</div></code></div></pre><!-- HTML_TAG_END --><p>今天在安装 WordPress 主题时遇到了这个问题，上次遇到好像是在 Mastodon 上传表情包的时候（不确定）</p></li><li><p><strong>关于 WordPress 上传限制这回事：</strong></p><ul><li><a href="https://blog.csdn.net/j84491135/article/details/105977073" rel="nofollow noopener noreferrer external" target="_blank">【docker】wordpress 修改文件上传限制</a></li><li><a href="https://techoverflow.net/2019/10/13/how-to-install-use-nano-in-a-running-docker-container/" rel="nofollow noopener noreferrer external" target="_blank">How to install & use nano in a running Docker container</a></li><li>这样方便一点：<a href="https://blog.csdn.net/sitebus/article/details/97648177" rel="nofollow noopener noreferrer external" target="_blank">如何修改 wordpress docker 容器的文件上传尺寸限制？</a></li></ul></li></ul><h2 id="什锦"><a href="#什锦">什锦</a></h2><ul><li><p><a href="https://mp.weixin.qq.com/s/HvDKWRPXZbFK4T8pXZTWNg" rel="nofollow noopener noreferrer external" target="_blank">折腾火狐</a></p></li><li><p><a href="https://xyzrank.com/" rel="nofollow noopener noreferrer external" target="_blank">中文博客榜</a></p></li><li><p><a href="https://dingxuewen.com/article/about-git-add/" rel="nofollow noopener noreferrer external" target="_blank">git add .，git add -A，git add -u，git add* 的区别与联系</a></p></li><li><p><a href="https://delightful.club/" rel="nofollow noopener noreferrer external" target="_blank">Delightful lists</a></p><blockquote><p>Delightful lists are an effort to help bring change to this trend. To make freedom more discoverable again. This top-level project will allow navigation to all high-quality curated delightful lists created and maintained all over the web.Anyone that wishes to do so can create their own list, and thus create an entrypoint to freedom.</p></blockquote></li><li><p><a href="https://homepage.cs.uri.edu/faculty/wolfe/book/Readings/Reading13.htm" rel="nofollow noopener noreferrer external" target="_blank">Computer Programming</a></p><p>偶然进入的网站，没有入口也没有出口，比较有年代感了</p><blockquote><p>A set of rules that provides a way of telling a computer what operations to perform is called a programming language. There is not, however, just one programming language; there are many. In this chapter you will learn about controlling a computer through the process of programming. You may even discover that you might want to become a programmer.</p></blockquote></li><li><p><a href="https://alearningaday.blog/2022/07/11/mentality/" rel="nofollow noopener noreferrer external" target="_blank">Mentality</a></p><p>一点点鸡汤<img src="https://alearningadayblog.files.wordpress.com/2022/07/image-2.png" alt="https://alearningadayblog.files.wordpress.com/2022/07/image-2.png" class="rounded-lg my-2" loading="lazy" decoding="async"></p></li><li><p><a href="https://mp.weixin.qq.com/s/6B8z5NJzsDNN54EIF9oRzQ" rel="nofollow noopener noreferrer external" target="_blank">白话开源和 Web3</a></p><p>原文：<a href="https://www.flyingpenguins.io/p/open-source-and-web3-simplified" rel="nofollow noopener noreferrer external" target="_blank">Open source and web3, simplified</a></p><blockquote><p>“并非所有这些平台本身都开源，但重要的是，与服务模式绑定的收益会直接反馈在其原生代币的价值上。有了这样的设定，随着时间的推移将源代码开放出来的激励是巨大的，因为它让开发者更具活力，让基于服务的生态系统得以存续，并让人们相信，项目将会以最符合网络利益的方式持续运作（因为倘若不这样，它可以被＂分叉＂，即容易被复制）”</p></blockquote><blockquote><p>“它也不仅仅是代码。想想维基百科、Facebook、Uber、Linux —— 所有这些项目都是由少数人定义平台的规则，然后大量的人参与价值构建。在这些社区中进行价值捕获和分配面临各种困境 ──Facebook 或 Uber 模式让少数人暴富，维基百科或 Linux 模式则几乎无利可图。我上面描述的结构能够让用户参与价值的创造和捕获，既适用于 Facebook 也可用于 Linux。”</p></blockquote></li><li><p><a href="https://flaviocopes.com/lazy-load-images-hugo/" rel="nofollow noopener noreferrer external" target="_blank">How to lazy load images in Hugo</a></p><blockquote><p>Create the file <code>layouts/_default/_markup/render-image.html</code> in your theme with this content:</p></blockquote><!-- HTML_TAG_START --><pre class="shiki material-default" html="true"><div class="language-id">html</div><div class='code-container'><code><div class='line'><img src="{{ .Destination | safeURL }}" alt="{{ .Text }}" loading="lazy" /></div><div class='line'>This makes the resulting HTML have the loading="lazy" attribute, which lazily loads images.</div></code></div></pre><!-- HTML_TAG_END --></li><li><p><a href="https://www.discovermagazine.com/planet-earth/how-do-dolphins-choose-their-name" rel="nofollow noopener noreferrer external" target="_blank">How Do Dolphins Choose Their Name?</a></p><blockquote><p>Dolphins identify themselves with a unique whistle that scientists have likened to a human name. Here’s how they decide what to call themselves.</p></blockquote></li></ul><h2 id="commonplace-book"><a href="#commonplace-book">Commonplace Book</a></h2><ul><li><a href="https://en.wikipedia.org/wiki/Commonplace_book" rel="nofollow noopener noreferrer external" target="_blank">Commonplace book-Method of knowledge compiling</a></li><li><a href="https://www.youtube.com/watch?v=NPqjgN-pNDw" rel="nofollow noopener noreferrer external" target="_blank">How To Keep A Commonplace Book - 2022 Edition</a></li></ul><ol><li><p>Intentionality</p><blockquote><p>every idea matters</p></blockquote><blockquote><p>just collect very succinct quotes from biographies that i’ve read from books that i’ve read or from articles from of the internet that i’ve read and over time i ended up with this collection of very succinct sentences that but basically every one of these sentences they mean something every one of these words they mean something every expression that i put into this book they’re all very deeply personal for me and also the act of writing for me is very personal because writing for me and journaling for me is a form of calming the brain because my brain does not shut up so point one keeping a commonplacebook on a physical notebook is a lot more deliberate</p></blockquote></li><li><p>better editing</p><blockquote><p>writing on the paper at leastfor me liberates me from that uh illusion ofperfection illusion of cleanliness that i get on a computer screen because i cancross everything out i can cross things out straight away and i can spotmistakes and you know weak sentences straight away</p></blockquote></li><li><p>Crossing Disciplines</p></li></ol>]]>
|
||
</content>
|
||
<category term="我在看什么" scheme="https://seviche.cc/?tags=%E6%88%91%E5%9C%A8%E7%9C%8B%E4%BB%80%E4%B9%88" />
|
||
</entry>
|
||
<entry>
|
||
<title type="html"><![CDATA[JS中的二进制数字]]></title>
|
||
<link href="https://seviche.cc/2022-07-27-bin" />
|
||
<id>https://seviche.cc/2022-07-27-bin</id>
|
||
<published>2022-07-27T00:00:00.000Z</published>
|
||
<updated>2022-08-11T17:12:21.128Z</updated>
|
||
<summary type="html"><![CDATA[0b/0B和paresInt]]></summary>
|
||
<content type="html">
|
||
<![CDATA[<p>参考：<a href="https://www.designcise.com/web/tutorial/how-to-represent-binary-numbers-in-javascript" rel="nofollow noopener noreferrer external" target="_blank">How to Represent Binary Numbers in JavaScript? - Designcise</a></p><h2 id="es6"><a href="#es6">ES6+</a></h2><p>在 ES6 之后的版本，在二进制数字前加<code>0b</code> 或者<code>0B</code>来标识这是一个二进制数字，比如：</p><!-- HTML_TAG_START --><pre class="shiki material-default" js="true"><div class="language-id">js</div><div class='code-container'><code><div class='line'>let number5 = ob101</div><div class='line'>let number5 = oB101</div></code></div></pre><!-- HTML_TAG_END --><h2 id="before-es6"><a href="#before-es6">Before ES6</a></h2><ul><li>通过字符串和 parseInt 来转换</li><li>parseInt 可以在字符串中提取数字，第一个参数是要提取的字符串，第二个是基准的计算进制</li></ul><!-- HTML_TAG_START --><pre class="shiki material-default" js="true"><div class="language-id">js</div><div class='code-container'><code><div class='line'>const number = '0101'</div><div class='line'></div><div class='line'>Number.parseInt(number, 2)</div></code></div></pre><!-- HTML_TAG_END --><p>相关：<a href="/2022-03-04-decbin">JavaScript · 十进制数转二进制</a></p>]]>
|
||
</content>
|
||
<category term="JavsScript" scheme="https://seviche.cc/?tags=JavsScript" />
|
||
</entry>
|
||
<entry>
|
||
<title type="html"><![CDATA[undefined]]></title>
|
||
<link href="https://seviche.cc/2022-07-23-notes-xss" />
|
||
<id>https://seviche.cc/2022-07-23-notes-xss</id>
|
||
<published>2022-07-26T00:00:00.000Z</published>
|
||
<updated>2022-08-11T17:39:51.841Z</updated>
|
||
<content type="html">
|
||
<![CDATA[<h3 id="xss-学习"><a href="#xss-学习">XSS 学习</a></h3><p>介绍文章：</p><ul><li><a href="https://tech.meituan.com/2018/09/27/fe-security.html" rel="nofollow noopener noreferrer external" target="_blank">前端安全系列（一）：如何防止 XSS 攻击？ - 美团技术团队</a></li><li><a href="https://developer.mozilla.org/zh-CN/docs/Glossary/Cross-site_scripting" rel="nofollow noopener noreferrer external" target="_blank">Cross-site scripting（跨站脚本攻击） - 术语表 | MDN</a></li></ul><p>练习：</p><ul><li><a href="https://prompt.ml/" rel="nofollow noopener noreferrer external" target="_blank">prompt(1) to win</a></li><li>解答：<a href="https://github.com/cure53/XSSChallengeWiki/wiki/prompt.ml#level-1" rel="nofollow noopener noreferrer external" target="_blank">prompt.ml</a></li></ul><p>相关文章：</p><ul><li><a href="https://www.leavesongs.com/PENETRATION/xss-from-my-blog.html" rel="nofollow noopener noreferrer external" target="_blank">我自己博客的一个 XSS 的故事 | 离别歌</a></li></ul>]]>
|
||
</content>
|
||
<category term="XSS" scheme="https://seviche.cc/?tags=XSS" />
|
||
<category term="Notes" scheme="https://seviche.cc/?tags=Notes" />
|
||
</entry>
|
||
<entry>
|
||
<title type="html"><![CDATA[D3.js 基础笔记]]></title>
|
||
<link href="https://seviche.cc/2022-07-23-d3" />
|
||
<id>https://seviche.cc/2022-07-23-d3</id>
|
||
<published>2022-07-23T00:00:00.000Z</published>
|
||
<updated>2022-08-01T03:03:33.463Z</updated>
|
||
<summary type="html"><![CDATA[即使是FreeCodeCamp也要做笔记]]></summary>
|
||
<content type="html">
|
||
<![CDATA[<p>内容出自：<a href="https://chinese.freecodecamp.org/learn/data-visualization" rel="nofollow noopener noreferrer external" target="_blank">FreeCodeCamp</a></p><blockquote><p>D3 或 D3.js 表示数据驱动文档。它是一个用于在浏览器中创建动态和交互式数据视觉化的 JavaScript 库。<sup id="fnref-1"><a href="#fn-1" class="footnote-ref">1</a></sup></p></blockquote><h2 id="学习资源"><a href="#学习资源">学习资源</a></h2><ul><li><a href="https://d3js.org/" rel="nofollow noopener noreferrer external" target="_blank">D3.js - Data-Driven Documents</a></li><li><a href="https://www.youtube.com/watch?v=xkBheRZTkaw&t=1s" rel="nofollow noopener noreferrer external" target="_blank">Data Visualization with D3 – Full Course for Beginners [2022] - YouTube</a><ul><li><a href="https://vizhub.com/forum/t/get-it-right-in-black-white-index/110/2" rel="nofollow noopener noreferrer external" target="_blank">Get it Right in Black & White Index - Get it Right in Black & White - VizHub Forum</a></li><li><a href="https://vizhub.com/blog/2021/02/20/new-livestream-series-get-it-right-in-black-and-white/" rel="nofollow noopener noreferrer external" target="_blank">New Livestream Series: Get it Right in Black and White</a></li><li><a href="https://vizhub.com/forum/t/get-it-right-in-black-white-index/110" rel="nofollow noopener noreferrer external" target="_blank">Get it Right in Black & White Index - Get it Right in Black & White - VizHub Forum</a></li></ul></li><li><a href="https://d3-graph-gallery.com/" rel="nofollow noopener noreferrer external" target="_blank">The D3 Graph Gallery – Simple charts made with d3.js</a></li><li><a href="https://www.d3indepth.com/introduction/" rel="nofollow noopener noreferrer external" target="_blank">Introduction to D3.js | D3 in Depth</a></li><li><a href="https://chinese.freecodecamp.org/learn/data-visualization/#data-visualization-with-d3" rel="nofollow noopener noreferrer external" target="_blank">数据可视化 认证 | freeCodeCamp.org</a></li><li><a href="https://wattenberger.com/blog/d3" rel="nofollow noopener noreferrer external" target="_blank">Amelia Wattenberger</a></li><li><a href="https://github.com/xswei/d3js_doc" rel="nofollow noopener noreferrer external" target="_blank">GitHub - xswei/d3js_doc: D3js 中文文档 D3 中文</a></li></ul><h2 id="基础操作"><a href="#基础操作">基础操作</a></h2><h3 id="修改元素"><a href="#修改元素">修改元素</a></h3><ul><li><code>select()</code> ：<ul><li>功能：从文档中选择一个元素。</li><li>参数：它接受你想要选择的元素的名字作为参数，并返回文档中第一个与名字匹配的 HTML 节点。</li></ul></li><li><code>selectAll()</code><ul><li>选择一组元素。 并以 HTML 节点数组的形式返回该文本中所有匹配所输入字符串的对象</li></ul></li><li><code>append()</code><ul><li>功能：将 HTML 节点附加到选定项目，并返回该节点的句柄。</li><li>参数：接收你希望添加到文档中的元素</li></ul></li><li><code>text()</code><ul><li>功能：设置所选节点的文本，也可以获取当前文本。 也可以用来添加标签</li><li>参数：字符串或者回调函数</li></ul></li></ul><!-- HTML_TAG_START --><pre class="shiki material-default" js="true"><div class="language-id">js</div><div class='code-container'><code><div class='line'>const anchor = d3.select('a')</div></code></div></pre><!-- HTML_TAG_END --><p>在 D3 中可以串联多个方法，连续执行一系列操作。->[[function chaining|链式调用]]</p><h3 id="使用数据"><a href="#使用数据">使用数据</a></h3><p><a href="https://github.com/xswei/d3-selection/blob/master/README.md#selection_data" rel="nofollow noopener noreferrer external" target="_blank">d3-selection</a></p><ul><li><code>data()</code>：<ul><li>将元素与数据绑定</li><li>不需要写 for 循环或者用 forEach() 迭代数据集中的对象。 data() 方法会解析数据集，任何链接在 data() 后面的方法都会为数据集中的每个对象运行一次。</li><li>可以使用方括号的方式，如 <code>d[0]</code>，来访问数组中的值。</li></ul></li><li><code>enter()</code>：获取需要插入的选择集(数据个数大于元素个数)的占位符.</li></ul><blockquote><p>当 enter() 和 data() 方法一起使用时，它把从页面中选择的元素和数据集中的元素作<strong>比较</strong>。 如果页面中选择的元素较少则创建缺少的元素。</p></blockquote><p>可以理解为管理仓库的，选择的元素是货架，数据是货，如果货架不够了，就再补几个货架，如果多了就不管</p><!-- HTML_TAG_START --><pre class="shiki material-default" html="true"><div class="language-id">html</div><div class='code-container'><code><div class='line'><body></div><div class='line'> <ul></ul></div><div class='line'> <script></div><div class='line'> const dataset = ['a', 'b', 'c']</div><div class='line'> d3.select('ul').selectAll('li').data(dataset).enter().append('li').text('New item')</div><div class='line'> </script></div><div class='line'></body></div></code></div></pre><!-- HTML_TAG_END --><h3 id="使用动态数据"><a href="#使用动态数据">使用动态数据</a></h3><p>text 中设置回调处理数据如：</p><ul><li><code>d3.json()</code>: 从指定的 input URL 获取 JSON 文件。如果指定了 init 则会将其传递给底层的 fetch 方法</li></ul><!-- HTML_TAG_START --><pre class="shiki material-default" html="true"><div class="language-id">html</div><div class='code-container'><code><div class='line'><body></div><div class='line'> <script></div><div class='line'> const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9]</div><div class='line'></div><div class='line'> d3.select('body')</div><div class='line'> .selectAll('h2')</div><div class='line'> .data(dataset)</div><div class='line'> .enter()</div><div class='line'> .append('h2')</div><div class='line'> .text(d => d + ' USD')</div><div class='line'> </script></div><div class='line'></body></div></code></div></pre><!-- HTML_TAG_END --><h3 id="给元素添加内联样式"><a href="#给元素添加内联样式">给元素添加内联样式</a></h3><ul><li><code>style()</code><ul><li>功能：在动态元素上添加内联 CSS 样式</li><li>参数：以用逗号分隔的键值对作为参数</li></ul></li></ul><!-- HTML_TAG_START --><pre class="shiki material-default" js="true"><div class="language-id">js</div><div class='code-container'><code><div class='line'>selection.style('color', 'blue')</div><div class='line'></div><div class='line'>//用回调过滤</div><div class='line'>selection.style('color', d => {</div><div class='line'> return d < 20 ? 'red' : 'green'</div><div class='line'>})</div><div class='line'>// 动态设置样式</div><div class='line'>selection.style('height', d => d + 'px') // 动态设置高度</div></code></div></pre><!-- HTML_TAG_END --><h3 id="添加-class"><a href="#添加-class">添加 Class</a></h3><ul><li><code>attr()</code><ul><li>功能：可以给元素添加任何 HTML 属性，包括 class 名称。</li><li>参数：<ul><li>attr() 方法和 style() 的使用方法一样。 它使用逗号分隔值，并且可以使用回调函数</li><li>可接收一个回调函数来动态设置属性。 这个回调函数有两个参数，一个是数据点本身（通常是 <code>d</code>），另一个是该数据点在数组中的下标 i， 这个参数是可选的</li></ul></li><li>当需要添加 class 时，class 参数保持不变，只有 container 参数会发生变化。</li></ul></li></ul><!-- HTML_TAG_START --><pre class="shiki material-default" js="true"><div class="language-id">js</div><div class='code-container'><code><div class='line'>selection.attr('class', 'container')</div><div class='line'>// 回调</div><div class='line'>selection.attr('property', (d, i) => {})</div><div class='line'></div><div class='line'>// 比如改变间距</div><div class='line'>svg</div><div class='line'> .selectAll('rect')</div><div class='line'> .data(dataset)</div><div class='line'> .enter()</div><div class='line'> .append('rect')</div><div class='line'> .attr('x', (d, i) => {</div><div class='line'> return i * 30 //改变间距</div><div class='line'> })</div><div class='line'> .attr('y', (d, i) => {</div><div class='line'> return d * 3 //改变高度</div><div class='line'> })</div><div class='line'> //悬停效果</div><div class='line'> .attr('class', 'bar')</div></code></div></pre><!-- HTML_TAG_END --><h3 id="标签"><a href="#标签">标签</a></h3><ul><li>和 rect 元素类似，text 元素也需要 x 和 y 属性来指定其放置在 SVG 画布上的位置， 它也需要能够获取数据来显示数据值。</li><li>标签样式<ul><li><code>fill</code> 属性为 text 节点设置文本颜色</li><li><code>style()</code> 方法设置其它样式的 CSS 规则，例如 font-family 或 font-size。</li></ul></li></ul><!-- HTML_TAG_START --><pre class="shiki material-default" js="true"><div class="language-id">js</div><div class='code-container'><code><div class='line'>//添加标签</div><div class='line'>svg</div><div class='line'> .selectAll('text')</div><div class='line'> .data(dataset)</div><div class='line'> .enter()</div><div class='line'> .append('text')</div><div class='line'> .attr('x', (d, i) => i * 30)</div><div class='line'> .attr('y', (d, i) => h - 3 * d - 3) // 高三个单位是减</div><div class='line'> .text(d => d)</div><div class='line'> // 添加样式</div><div class='line'> .attr('fill', 'red')</div><div class='line'> .style('font-size', '25px')</div><div class='line'> //悬停效果</div><div class='line'> .attr('class', 'bar')</div><div class='line'>/** css中</div><div class='line'> .bar:hover {</div><div class='line'> fill: brown;</div><div class='line'> }</div><div class='line'> **/</div></code></div></pre><!-- HTML_TAG_END --><h3 id="添加工具提示-tooltip"><a href="#添加工具提示-tooltip">添加工具提示 tooltip</a></h3><ul><li>当用户在一个对象上悬停时，提示框可以显示关于这个对象更多的信息</li></ul><ol><li>title</li></ol><!-- HTML_TAG_START --><pre class="shiki material-default" js="true"><div class="language-id">js</div><div class='code-container'><code><div class='line'>svg</div><div class='line'> .selectAll('rect')</div><div class='line'> .data(dataset)</div><div class='line'> .enter()</div><div class='line'> .append('rect')</div><div class='line'> .attr('x', (d, i) => i * 30)</div><div class='line'> .attr('y', (d, i) => h - 3 * d)</div><div class='line'> .attr('width', 25)</div><div class='line'> .attr('height', (d, i) => d * 3)</div><div class='line'> // 每个 rect 节点下附加 title 元素。 然后用回调函数调用 text() 方法使它的文本显示数据值。</div><div class='line'> .append('title')</div><div class='line'> .text(d => d)</div></code></div></pre><!-- HTML_TAG_END --><h2 id="svg"><a href="#svg">SVG</a></h2><ul><li>坐标系：坐标轴的原点在左上角。 x 坐标为 0 将图形放在 SVG 区域的左边缘， y 坐标为 0 将图形放在 SVG 区域的上边缘。 x 值增大矩形将向右移动， y 值增大矩形将向下移动。</li></ul><h3 id="创建-svg"><a href="#创建-svg">创建 SVG</a></h3><!-- HTML_TAG_START --><pre class="shiki material-default" js="true"><div class="language-id">js</div><div class='code-container'><code><div class='line'>//创建svg</div><div class='line'>selection.append('svg')</div></code></div></pre><!-- HTML_TAG_END --><h3 id="反转-svg-元素"><a href="#反转-svg-元素">反转 SVG 元素</a></h3><ul><li>为了使条形图向上，需要改变 y 坐标计算的方式</li></ul><blockquote><p>SVG 区域的高度为 100。 如果在集合中一个数据点的值为 0，那么条形将从 SVG 区域的最底端开始（而不是顶端）。 为此，y 坐标的值应为 100。 如果数据点的值为 1，你将从 y 坐标为 100 开始来将这个条形设置在底端， 然后需要考虑该条形的高度为 1，所以最终的 y 坐标将是 99。</p></blockquote><p>(高度从下面开始计算，坐标轴从上面开始)</p><ul><li>y 坐标为 <code>y = heightOfSVG - heightOfBar</code> 会将条形图向上放置。</li><li>通常，关系是 <code>y = h - m * d</code>，其中 m 是缩放数据点的常数。</li></ul><h3 id="更改-svg-元素的颜色"><a href="#更改-svg-元素的颜色">更改 SVG 元素的颜色</a></h3><ul><li>在 SVG 中， rect 图形用 <code>fill</code> 属性着色。 它支持十六进制代码、颜色名称、rgb 值以及更复杂的选项，比如渐变和透明。</li></ul><!-- HTML_TAG_START --><pre class="shiki material-default" js="true"><div class="language-id">js</div><div class='code-container'><code><div class='line'>svg</div><div class='line'> .selectAll('rect')</div><div class='line'> .data(dataset)</div><div class='line'> .enter()</div><div class='line'> .append('rect')</div><div class='line'> .attr('x', (d, i) => i * 30)</div><div class='line'> .attr('y', (d, i) => h - 3 * d)</div><div class='line'> .attr('width', 25)</div><div class='line'> .attr('height', (d, i) => 3 * d)</div><div class='line'> //将所有条形图的 fill 设置为海军蓝。</div><div class='line'> .attr('fill', 'navy')</div></code></div></pre><!-- HTML_TAG_END --><h3 id="svg-图形"><a href="#svg-图形">SVG 图形</a></h3><ul><li>SVG 支持多种图形，比如矩形和圆形， 并用它们来显示数据。</li></ul><h4 id="矩形"><a href="#矩形">矩形</a></h4><p>SVG 的 rect 有四个属性。 x 和 y 坐标指定图形放在 svg 区域的位置， height 和 width 指定图形大小</p><!-- HTML_TAG_START --><pre class="shiki material-default" js="true"><div class="language-id">js</div><div class='code-container'><code><div class='line'>const svg = d3</div><div class='line'> .select('body')</div><div class='line'> .append('svg')</div><div class='line'> .attr('width', w)</div><div class='line'> .attr('height', h)</div><div class='line'> .append('rect') //rect矩形</div><div class='line'> .attr('width', 25)</div><div class='line'> .attr('height', 100)</div><div class='line'> .attr('x', 0)</div><div class='line'> .attr('y', 0)</div></code></div></pre><!-- HTML_TAG_END --><h4 id="圆形"><a href="#圆形">圆形</a></h4><ul><li>SVG 用 circle 标签来创建圆形</li><li>circle 有三个主要的属性。<ul><li>cx 和 cy 属性是坐标。 它们告诉 D3 将图形的中心放在 SVG 画布的何处。</li><li>半径（ r 属性）给出 circle 的大小。</li></ul></li><li>和 rect 的 y 坐标一样，circle 的 cy 属性是从 SVG 画布的顶端开始测量的，而不是从底端。</li></ul><!-- HTML_TAG_START --><pre class="shiki material-default" js="true"><div class="language-id">js</div><div class='code-container'><code><div class='line'>svg</div><div class='line'> .selectAll('circle')</div><div class='line'> .data(dataset)</div><div class='line'> .enter()</div><div class='line'> .append('circle')</div><div class='line'> //散点图</div><div class='line'> .attr('cx', d => d[0])</div><div class='line'> .attr('cy', d => h - d[1])</div><div class='line'> .attr('r', '5')</div></code></div></pre><!-- HTML_TAG_END --><h2 id="比例尺"><a href="#比例尺">比例尺</a></h2><h3 id="创建线性比例"><a href="#创建线性比例">创建线性比例</a></h3><blockquote><p>条形图和散点图都直接在 SVG 画布上绘制数据。 但是，如果一组的高或者其中一个数据点比 SVG 的高或宽更大，它将跑到 SVG 区域外。</p></blockquote><blockquote><p>D3 中，比例尺可帮助布局数据。 scales 是函数，它告诉程序如何将一组原始数据点映射到 SVG 画布上。</p></blockquote><h4 id="线性缩放"><a href="#线性缩放">线性缩放</a></h4><ul><li>通常使用于定量数据</li><li>默认情况下，比例尺使用一对一关系（identity relationship）。 输入的值和输出的值相同。</li></ul><!-- HTML_TAG_START --><pre class="shiki material-default" js="true"><div class="language-id">js</div><div class='code-container'><code><div class='line'>const scale = d3.scaleLinear()</div></code></div></pre><!-- HTML_TAG_END --><p>例子</p><!-- HTML_TAG_START --><pre class="shiki material-default" js="true"><div class="language-id">js</div><div class='code-container'><code><div class='line'>const scale = d3.scaleLinear() // 在这里创建轴</div><div class='line'>const output = scale(50) // 调用 scale，传入一个参数</div><div class='line'>d3.select('body').append('h2').text(output)</div></code></div></pre><!-- HTML_TAG_END --><h4 id="按比例设置域和范围"><a href="#按比例设置域和范围">按比例设置域和范围</a></h4><ul><li>域 domain：假设有一个数据集范围为 50 到 480， 这是缩放的<strong>输入信息</strong>，也被称为域。</li><li>范围 range：沿着 x 轴将这些点映射到 SVG 画布上，位置介于 10 个单位到 500 个单位之间。 这是<strong>输出信息</strong>，也被称为范围。</li><li><code>domain()</code> 和 <code>range()</code> 方法设置比例尺的值， 它们都接受一个至少有两个元素的数组作为参数。<ul><li><code>domain()</code> 方法给比例尺传递关于散点图原数据值的信息</li><li><code>range()</code> 方法给出在页面上进行可视化的实际空间信息</li></ul></li></ul><p>例子：</p><!-- HTML_TAG_START --><pre class="shiki material-default" js="true"><div class="language-id">js</div><div class='code-container'><code><div class='line'>scale.domain([50, 480]); //域</div><div class='line'>scale.range([10, 500]); //范围</div><div class='line'>scale(50) //10</div><div class='line'>scale(480) //500</div><div class='line'>scale(325) //323.37</div><div class='line'>scale(750)。// 807.。67</div><div class='line'>d3.scaleLinear()</div></code></div></pre><!-- HTML_TAG_END --><p>按顺序，将在控制台中显示以下值：10、500、323.37 和 807.67。</p><p>注意，比例尺使用了域和范围之间的线性关系来找出给定数字的输出值。 域中的最小值（50）映射为范围中的最小值（10）。</p><p>（也就是给定范围，用线性关系缩小，比如图片放大缩小，给了原图大小和缩小后的图片大小，根据线性关系比例来计算每个像素的位置，元素的大小）</p><h4 id="最小值最大值"><a href="#最小值最大值">最小值最大值</a></h4><ul><li><code>d3.min</code>：最小值</li><li><code>d3.max</code>: 最大值</li><li><code>min()</code> 和 <code>max()</code> 都可以使用回调函数，下面例子中回调函数的参数 d 是当前的内部数组。</li><li><code>min()</code> 和 <code>max()</code> 方法在设置比例尺时十分有用</li></ul><p>例子：找到二维数组的最大值和最小值</p><!-- HTML_TAG_START --><pre class="shiki material-default" js="true"><div class="language-id">js</div><div class='code-container'><code><div class='line'>const locationData = [</div><div class='line'> [1, 7],</div><div class='line'> [6, 3],</div><div class='line'> [8, 3]</div><div class='line'>]</div><div class='line'>const minX = d3.min(locationData, d => d[0]) //查找在d[0]位置上最小的值</div></code></div></pre><!-- HTML_TAG_END --><h3 id="使用动态比例"><a href="#使用动态比例">使用动态比例</a></h3><ul><li>用<code>min()</code> 和 <code>max()</code> 来确定比例尺范围和域</li><li><code>padding</code> 将在散点图和 SVG 画布边缘之间添加空隙。</li><li>保持绘图在右上角。 当为 y 坐标设置 range 时，大的值（height 减去 padding）是第一个参数，小的值是第二个参数。</li></ul><!-- HTML_TAG_START --><pre class="shiki material-default" js="true"><div class="language-id">js</div><div class='code-container'><code><div class='line'>const dataset = [</div><div class='line'> [34, 78],</div><div class='line'> [109, 280],</div><div class='line'> [310, 120],</div><div class='line'> [79, 411],</div><div class='line'> [420, 220],</div><div class='line'> [233, 145],</div><div class='line'> [333, 96],</div><div class='line'> [222, 333],</div><div class='line'> [78, 320],</div><div class='line'> [21, 123]</div><div class='line'>]</div><div class='line'>const w = 500</div><div class='line'>const h = 500</div><div class='line'></div><div class='line'>const padding = 30</div><div class='line'>const xScale = d3</div><div class='line'> .scaleLinear()</div><div class='line'> .domain([0, d3.max(dataset, d => d[0])])</div><div class='line'> .range([padding, w - padding])</div></code></div></pre><!-- HTML_TAG_END --><h3 id="使用预定义的比例放置元素"><a href="#使用预定义的比例放置元素">使用预定义的比例放置元素</a></h3><ul><li>用比例尺函数为 SVG 图形设置坐标属性值。</li><li>当显示实际数据值时，不用使用比例尺，例如，在提示框或标签中的 <code>text()</code> 方法。</li></ul><!-- HTML_TAG_START --><pre class="shiki material-default" js="true"><div class="language-id">js</div><div class='code-container'><code><div class='line'>svg</div><div class='line'> .selectAll('circle')</div><div class='line'> .data(dataset)</div><div class='line'> .enter()</div><div class='line'> .append('circle')</div><div class='line'> .attr('cx', d => xScale(d[0]))</div><div class='line'> .attr('cy', d => yScale(d[1]))</div><div class='line'> .attr('r', '5')</div></code></div></pre><!-- HTML_TAG_END --><h3 id="添加坐标轴"><a href="#添加坐标轴">添加坐标轴</a></h3><ul><li>位置：<code>axisLeft()</code> 和 <code>axisBottom()</code>。</li><li>g 元素， g 是英文中组（group）的缩写，在渲染时，轴只是一条直线。 因为它是一个简单的图形，所以可以用 g</li><li>SVG 支持多种 transforms，但是定位轴需要使用 translate 属性</li></ul><p>例子：</p><!-- HTML_TAG_START --><pre class="shiki material-default" js="true"><div class="language-id">js</div><div class='code-container'><code><div class='line'>// X轴</div><div class='line'>const xAxis = d3.axisBottom(xScale)</div><div class='line'></div><div class='line'>svg</div><div class='line'> .append('g')</div><div class='line'> .attr('transform', 'translate(0, ' + (h - padding) + ')') // translate(0,x)</div><div class='line'> .call(xAxis) // x轴作为参数被传递给 call() 方法</div><div class='line'></div><div class='line'>// Y轴</div><div class='line'>const yAxis = d3.axisLeft(yScale)</div><div class='line'></div><div class='line'>svg</div><div class='line'> .append('g')</div><div class='line'> .attr('transform', 'translate(0,' + (h - padding) + ')')</div><div class='line'> .call(xAxis)</div><div class='line'>svg</div><div class='line'> .append('g')</div><div class='line'> .attr('transform', 'translate(' + padding + ',0)')</div><div class='line'> .call(yAxis)</div></code></div></pre><!-- HTML_TAG_END --><h2 id="常见图表"><a href="#常见图表">常见图表</a></h2><h3 id="散点图"><a href="#散点图">散点图</a></h3><blockquote><p>圆圈来映射数据点，每个数据点有两个值。 这两个值和 x 和 y 轴相关联，在可视化中用来给圆圈定位。</p></blockquote><!-- HTML_TAG_START --><pre class="shiki material-default" js="true"><div class="language-id">js</div><div class='code-container'><code><div class='line'>svg</div><div class='line'> .selectAll('circle')</div><div class='line'> .data(dataset)</div><div class='line'> .enter()</div><div class='line'> .append('circle')</div><div class='line'> .attr('cx', d => d[0])</div><div class='line'> //反转图像</div><div class='line'> .attr('cy', d => h - d[1])</div><div class='line'> .attr('r', '5')</div><div class='line'></div><div class='line'>// 散点图加标签</div><div class='line'>svg</div><div class='line'> .selectAll('text')</div><div class='line'> .data(dataset)</div><div class='line'> .enter()</div><div class='line'> .append('text')</div><div class='line'> // Add your code below this line</div><div class='line'></div><div class='line'> .attr('x', d => d[0] + 5)</div><div class='line'> .attr('y', d => h - d[1])</div><div class='line'> .text(d => d[0] + ', ' + d[1])</div></code></div></pre><!-- HTML_TAG_END --><div class="footnotes"><hr><ol><li id="fn-1"><a href="https://chinese.freecodecamp.org/learn/data-visualization/" rel="nofollow noopener noreferrer external" target="_blank">数据可视化 认证 | freeCodeCamp.org</a><a href="#fnref-1" class="footnote-backref">↩</a></li></ol></div>]]>
|
||
</content>
|
||
<category term="D3.js" scheme="https://seviche.cc/?tags=D3.js" />
|
||
<category term="数据可视化" scheme="https://seviche.cc/?tags=%E6%95%B0%E6%8D%AE%E5%8F%AF%E8%A7%86%E5%8C%96" />
|
||
</entry>
|
||
<entry>
|
||
<title type="html"><![CDATA[css和js两种方式实现div右移1000px动画]]></title>
|
||
<link href="https://seviche.cc/2022-07-20-animation" />
|
||
<id>https://seviche.cc/2022-07-20-animation</id>
|
||
<published>2022-07-20T00:00:00.000Z</published>
|
||
<updated>2022-08-01T03:03:33.463Z</updated>
|
||
<summary type="html"><![CDATA[用keyframes和timer]]></summary>
|
||
<content type="html">
|
||
<![CDATA[<iframe height="500" scrolling="no" title="css和js两种方式实现div右移1000px动画" src="https://codepen.io/sevichee/embed/BarRyRZ?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">See the Pen <a href="https://codepen.io/sevichee/pen/BarRyRZ">css和js两种方式实现div右移1000px动画</a> by Sowhere (<a href="https://codepen.io/sevichee">@sevichee</a>) on <a href="https://codepen.io">CodePen</a>.</iframe><p>参考：<a href="https://zh.javascript.info/js-animation" rel="nofollow noopener noreferrer external" target="_blank">JavaScript 动画</a></p>]]>
|
||
</content>
|
||
<category term="CSS" scheme="https://seviche.cc/?tags=CSS" />
|
||
<category term="JavaScript" scheme="https://seviche.cc/?tags=JavaScript" />
|
||
<category term="animation" scheme="https://seviche.cc/?tags=animation" />
|
||
</entry>
|
||
<entry>
|
||
<title type="html"><![CDATA[我在看什么 · 5月]]></title>
|
||
<link href="https://seviche.cc/2022-07-16-reading-5" />
|
||
<id>https://seviche.cc/2022-07-16-reading-5</id>
|
||
<published>2022-07-16T00:00:00.000Z</published>
|
||
<updated>2022-08-11T16:29:56.272Z</updated>
|
||
<summary type="html"><![CDATA[Anki / JSDoc / 蘑菇 / Music-Map ……]]></summary>
|
||
<content type="html">
|
||
<![CDATA[<h2 id="productivity"><a href="#productivity">Productivity</a></h2><ul><li><p><a href="https://learnoutlive.com/kindle-vocabulary-builder-anki-flashcards/" rel="nofollow noopener noreferrer external" target="_blank">How To Create ANKI Flashcards From Your Kindle Vocabulary Builder</a></p></li><li><p><a href="https://wiki.cheng-group.net/wiki/%E9%9B%86%E7%BE%A4%E4%BD%BF%E7%94%A8/ssh_note#ssh-%E4%BD%BF%E7%94%A8%E5%85%A5%E9%97%A8" rel="nofollow noopener noreferrer external" target="_blank">SSH 使用入门</a></p><p>SCP 部分写得很清楚</p></li><li><p><a href="https://mp.weixin.qq.com/s/PcHu-DeZDQCdtWjzb-QkBA" rel="nofollow noopener noreferrer external" target="_blank">如何使用 JSDoc 保证你的 Javascript 类型安全性</a></p></li><li><p><a href="https://juejin.cn/post/7072685382323830821" rel="nofollow noopener noreferrer external" target="_blank">你不知道的 JSDoc</a></p></li><li><p><a href="https://codecombat.cn/" rel="nofollow noopener noreferrer external" target="_blank">codecombat</a></p><p>哇哦，打游戏学编程</p></li><li><p><a href="http://jdev.tw/blog/6505" rel="nofollow noopener noreferrer external" target="_blank">讓有效學習更簡單！Markdown 匯出到 Anki | 使用 Flashcards 外掛</a></p></li><li><p><a href="https://ithelp.ithome.com.tw/articles/10280788?sc=iThomeR" rel="nofollow noopener noreferrer external" target="_blank">建立一套完整的筆記複習流程，使用 Obsidian 插件 Spaced Repetition</a></p></li><li><p><a href="https://web3caff.com/zh/archives/8304" rel="nofollow noopener noreferrer external" target="_blank">硬核必备：Web3 生存指南之防骗反诈安全手册（65 页）</a></p></li><li><p><a href="https://catcoding.me/p/writing-for-joy/" rel="nofollow noopener noreferrer external" target="_blank">写作 12 年，我的经验和技巧</a></p></li></ul><h2 id="有趣的"><a href="#有趣的">有趣的</a></h2><ul><li><p><a href="https://maggieappleton.com/" rel="nofollow noopener noreferrer external" target="_blank">Maggie Appleton</a></p><p>很喜欢的一个博客！设计很漂亮，博文图文结合读起来让人很愉悦，是我理想的博客样子</p></li><li><p><a href="https://mp.weixin.qq.com/s/YeLuBH9VZ1l-bltKdEqxsw" rel="nofollow noopener noreferrer external" target="_blank">科普|“朝菌”毛头鬼伞的菇事</a></p></li><li><p><a href="https://www.youtube.com/watch?v=7nL-kgbbcBA" rel="nofollow noopener noreferrer external" target="_blank">“I’m Not Like Other Girls”</a></p><blockquote><p><em>not like other girls</em> can also be used as an insult</p></blockquote></li><li><p><a href="https://www.youtube.com/watch?v=Wuu-2CR8btw" rel="nofollow noopener noreferrer external" target="_blank">Why Life Is So Boring (and why it’s a good thing)</a></p></li><li><p><a href="https://mp.weixin.qq.com/s/qrtfEJMRn3LH0W05nBIa5Q" rel="nofollow noopener noreferrer external" target="_blank">吃蘑菇前我都会跟它说会儿话，因为我知道它是活的</a></p><blockquote><p>「在期刊的原文中，阿达玛斯基写道：“我们不应该期望快速地得到一个结果，尽管我们与猫和狗生活了几个世纪，但我们还没有破译它们的语言，而对真菌的电子通讯的研究还处于纯粹的婴儿阶段。”</p><p>这么一想也不无道理，你甚至连自己家的猫猫狗狗在说什么都没搞明白，为什么一定要期待先跟一颗蘑菇对话呢？」</p></blockquote></li><li><p><a href="https://www.music-map.com/" rel="nofollow noopener noreferrer external" target="_blank">Music-Map</a></p></li></ul>]]>
|
||
</content>
|
||
<category term="我在看什么" scheme="https://seviche.cc/?tags=%E6%88%91%E5%9C%A8%E7%9C%8B%E4%BB%80%E4%B9%88" />
|
||
</entry>
|
||
<entry>
|
||
<title type="html"><![CDATA[我在看什么 · 6月]]></title>
|
||
<link href="https://seviche.cc/2022-07-15-reading-6" />
|
||
<id>https://seviche.cc/2022-07-15-reading-6</id>
|
||
<published>2022-07-15T00:00:00.000Z</published>
|
||
<updated>2022-08-06T11:32:41.091Z</updated>
|
||
<summary type="html"><![CDATA[Vue / 网页性能优化 / npm ……]]></summary>
|
||
<content type="html">
|
||
<![CDATA[<h2 id="编程相关"><a href="#编程相关">编程相关</a></h2><h3 id="前端"><a href="#前端">前端</a></h3><ol><li><p><a href="https://www.youtube.com/watch?v=cjIswDCKgu0" rel="nofollow noopener noreferrer external" target="_blank">Learn Debounce And Throttle In 16 Minutes</a></p><p>讲得挺好的一个视频。节流（debounce）和防抖（Throttle）是优化高频率执行代码的一种手段<sup id="fnref-1"><a href="#fn-1" class="footnote-ref">1</a></sup> 如果把执行代码比喻成下楼拿快递的话:</p><ul><li>不做任何处理时就是快递来了就下楼拿。</li><li>节流是不管快递来没来，每隔 10 分钟下一次楼。</li><li>防抖则是第一个快递来了，等上 10 分钟，要是在这个 10 分钟内第二个快递来了，就继续等 10 分钟看有没有第三个快递，如果 10 分钟内下一个快递没来就下楼拿前面的快递。</li></ul></li><li><p><a href="https://juejin.cn/post/6844904099704471559" rel="nofollow noopener noreferrer external" target="_blank">基于 Vue 实现一个简易 MVVM</a></p></li><li><p><a href="https://juejin.cn/post/6857716625764777991" rel="nofollow noopener noreferrer external" target="_blank">Websocket 原理及具体使用（ws+socket.io）</a></p></li><li><p><a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String/localeCompare" rel="nofollow noopener noreferrer external" target="_blank">String.prototype.localeCompare()</a></p><ul><li>一个用来比较字符串的方法，可以结合 sort 方法对字符串进行排序，因为 sort 方法是按 ASCII 值来排序的，很多时候使用表现并不好，结合<code>localeCompare</code>可以做到按大小写排序、对带有重音符号的字符排序……</li><li><code>localeCompare</code>接受三个参数：compareString、locales、options，其中 compareString（即用来比较的字符串）是必选的，其他为可选。</li><li><code>localeCompare</code>的返回值有三种，负数、正数、0，其中如果引用字符存在于比较字符之前则为负数; 如果引用字符存在于比较字符之后则为正数; 相等的时候返回 0 。</li></ul></li><li><p>Pinia 和 Optional API 的结合使用</p><ul><li><a href="https://vueschool.io/lessons/access-pinia-state-in-the-options-api" rel="nofollow noopener noreferrer external" target="_blank">Access Pinia State in the Options API</a></li><li><a href="https://pinia.vuejs.org/cookbook/options-api.html" rel="nofollow noopener noreferrer external" target="_blank">Usage without setup()</a></li></ul></li><li><p><a href="https://vueschool.io/articles/vuejs-tutorials/how-to-migrate-from-vue-cli-to-vite/" rel="nofollow noopener noreferrer external" target="_blank">How to Migrate from Vue CLI to Vite</a></p></li><li><p><a href="https://juejin.cn/post/7067801337076908068" rel="nofollow noopener noreferrer external" target="_blank">使用 pnpm 替换 npm 优化项目开发</a></p></li><li><p><a href="https://www.ruanyifeng.com/blog/2021/01/clipboard-api.html" rel="nofollow noopener noreferrer external" target="_blank">剪贴板操作 Clipboard API 教程</a></p></li><li><p><a href="https://juejin.cn/post/7039108357554176037" rel="nofollow noopener noreferrer external" target="_blank">如何做前端单元测试</a></p></li><li><p><a href="https://staging-cn.vuejs.org/guide/scaling-up/testing.html" rel="nofollow noopener noreferrer external" target="_blank">Vue-测试</a></p></li><li><p><a href="https://www.hsmus.top/202011210.html" rel="nofollow noopener noreferrer external" target="_blank">前后端加密（一）：前端请求加密封装</a></p></li><li><p><a href="https://mp.weixin.qq.com/s/ZTI-8RI0l314Ki9oBxqRWw" rel="nofollow noopener noreferrer external" target="_blank">深入浅出 npm & yarn & pnpm 包管理机制</a></p><blockquote><p>很多人认为 npm 是 node package manager 的缩写，其实不是，而且 npm 根本也不是任何短语的缩写。它的前身其实是名为 pm（pkgmakeinst） 的 bash 工具，它可以在各种平台上安装各种东西。硬要说缩写的话，也应该是 node pm 或者 new pm。</p></blockquote></li><li><p><a href="https://juejin.cn/post/7074759905197948935" rel="nofollow noopener noreferrer external" target="_blank">过度使用懒加载对 Web 性能的影响</a></p></li><li><p><a href="https://juejin.cn/post/6844903913410314247" rel="nofollow noopener noreferrer external" target="_blank">Vue 项目性能优化 — 实践指南（网上最全 / 详细）</a></p></li><li><p><a href="https://blog.csdn.net/zz00008888/article/details/119893222" rel="nofollow noopener noreferrer external" target="_blank">Vue 打包 chunk-vendors.js 文件过大解决方案（compression-webpack-plugin）</a></p></li><li><p><a href="https://blog.alanwei.com/blog/2021/03/30/npm-install-eresulve-error/" rel="nofollow noopener noreferrer external" target="_blank">解决 NPM 安装应用出现 ERESOLVE 错误</a></p></li><li><p><a href="https://mp.weixin.qq.com/s/gCn_QwuhiT4aSKZB6bDs6g" rel="nofollow noopener noreferrer external" target="_blank">Web 性能优化：FOUC</a></p></li><li><p><a href="https://juejin.cn/post/6844904034181070861" rel="nofollow noopener noreferrer external" target="_blank">傻傻分不清之 Cookie、Session、Token、JWT</a></p></li><li><p><a href="https://juejin.cn/post/7060399592298250270" rel="nofollow noopener noreferrer external" target="_blank">[译文]为什么 Angular 比 React 更适合企业级应用程序</a></p></li></ol><h3 id="后端"><a href="#后端">后端</a></h3><ol><li><a href="https://yeasy.gitbook.io/docker_practice/" rel="nofollow noopener noreferrer external" target="_blank">Docker 从入门到实践</a></li><li><a href="https://uzykj.com/_posts/javascript/nodejs/basic/2021-08-17-ubuntu-install-nodejs.html#%E5%A7%BF%E5%8A%BFa-%E6%BA%90%E7%A0%81%E7%BC%96%E8%AF%91%E5%AE%89%E8%A3%85" rel="nofollow noopener noreferrer external" target="_blank">Ubuntu 安装新版本 nodejs 的 5 种姿势</a></li><li><a href="https://askubuntu.com/questions/1382565/npm-does-not-support-node-js-v10-19-0" rel="nofollow noopener noreferrer external" target="_blank">npm does not support Node.js v10.19.0</a></li></ol><h2 id="其他"><a href="#其他">其他</a></h2><ol><li><a href="https://www.dnlab.net/archives/65/" rel="nofollow noopener noreferrer external" target="_blank">详细的全自动追番教程：Sonarr+Jackett+qBittorrent+Jellyfin</a></li><li><a href="https://www.opensourcealternative.to/" rel="nofollow noopener noreferrer external" target="_blank">Open Source Alternative to</a></li><li><a href="https://blog.walterlv.com/post/remove-personal-emails-from-public-repos.html" rel="nofollow noopener noreferrer external" target="_blank">在 GitHub 公开仓库中隐藏自己的私人邮箱地址</a></li><li><a href="https://devdocs.io/" rel="nofollow noopener noreferrer external" target="_blank">各种开发者文档的以往版本</a></li><li><a href="https://cloud.tencent.com/developer/article/1665810" rel="nofollow noopener noreferrer external" target="_blank">Github 删除某个文件的所有提交记录</a></li></ol><h2 id="互联网哲学"><a href="#互联网哲学">互联网哲学</a></h2><ol><li><p><a href="https://chuck.is/root/" rel="nofollow noopener noreferrer external" target="_blank">Who Actually Owns Your Device?</a></p><blockquote><p>What it means to truly own your device is having the power and ability to modify it at a system level should you choose to – even if you don’t know what you’re doing, you should have the right.</p></blockquote></li><li><p><a href="https://tyler.cafe/information_forest" rel="nofollow noopener noreferrer external" target="_blank">Information forest</a></p><p>在产品沉思录周刊看到的推荐</p><blockquote><p>What should the browser of the 2020s be?</p><p>What will a browser built for research, analysis, rabbit-hole exploration, messy thinking, and collaboration look like? These features are listed in the order I thought of them in, not necessarily by importance.</p><ol><li>Graph visualization and mind mapping.</li><li>Interactive history and version control.</li><li>Predictive search paths.</li><li>Super Command-F (Superf).</li><li>Collaboration</li><li>Automatic scraping and clusterin</li><li>Built in word processing.</li><li>Backlinks.</li><li>An infinitely zoomable interface (ZUI)</li></ol></blockquote><p>相关阅读：<a href="https://mp.weixin.qq.com/s/6vKJxVhXXqLvBqf_V1KCwQ" rel="nofollow noopener noreferrer external" target="_blank">Next Browser</a></p></li></ol><div class="footnotes"><hr><ol><li id="fn-1"><a href="https://vue3js.cn/interview/JavaScript/debounce_throttle.html#%E4%B8%80%E3%80%81%E6%98%AF%E4%BB%80%E4%B9%88" rel="nofollow noopener noreferrer external" target="_blank">什么是防抖和节流？有什么区别？如何实现？</a><a href="#fnref-1" class="footnote-backref">↩</a></li></ol></div>]]>
|
||
</content>
|
||
<category term="我在看什么" scheme="https://seviche.cc/?tags=%E6%88%91%E5%9C%A8%E7%9C%8B%E4%BB%80%E4%B9%88" />
|
||
</entry>
|
||
<entry>
|
||
<title type="html"><![CDATA[SQL 基础笔记]]></title>
|
||
<link href="https://seviche.cc/2022-07-13-sql" />
|
||
<id>https://seviche.cc/2022-07-13-sql</id>
|
||
<published>2022-07-13T00:00:00.000Z</published>
|
||
<updated>2022-08-01T03:03:33.359Z</updated>
|
||
<summary type="html"><![CDATA[关于增改删查的方式]]></summary>
|
||
<content type="html">
|
||
<![CDATA[<ul><li>课程：<a href="https://www.udemy.com/share/1013gG3@wP9ybulEki65OWpaP1-gXEeRPJl4aj8eZNX7YYjFOgXlrxBGQyU6NniyJf2PqDI1EA==/" rel="nofollow noopener noreferrer external" target="_blank">The Complete 2022 Web Development Bootcamp</a></li><li>工具：<a href="https://sqliteonline.com" rel="nofollow noopener noreferrer external" target="_blank">SQL Online Compiler - for Data Science</a></li><li>教程：<a href="https://www.runoob.com/sql/sql-tutorial.html" rel="nofollow noopener noreferrer external" target="_blank">SQL 教程 | 菜鸟教程</a></li></ul><h2 id="sql-vs-nosql"><a href="#sql-vs-nosql">SQL vs. NOSQL</a></h2><p><img src="https://usc1.contabostorage.com/cc0b816231a841b1b0232d5ef0c6deb1:image/2022/06/b67c213a42175acc16073cbad16acaf4.png" alt="https://usc1.contabostorage.com/cc0b816231a841b1b0232d5ef0c6deb1:image/2022/06/b67c213a42175acc16073cbad16acaf4.png" class="rounded-lg my-2" loading="lazy" decoding="async"></p><p><img src="https://usc1.contabostorage.com/cc0b816231a841b1b0232d5ef0c6deb1:image/2022/06/01b1f9ba940268cf5c4108d9a4a94dc0.png" alt="https://usc1.contabostorage.com/cc0b816231a841b1b0232d5ef0c6deb1:image/2022/06/01b1f9ba940268cf5c4108d9a4a94dc0.png" class="rounded-lg my-2" loading="lazy" decoding="async"></p><ul><li>SQL<ul><li>注重结构</li></ul></li><li>NOSQL<ul><li>更灵活，也更稳健</li><li>MoogoDB</li></ul></li></ul><h2 id="crud"><a href="#crud">CRUD</a></h2><h3 id="create"><a href="#create">Create</a></h3><!-- HTML_TAG_START --><pre class="shiki material-default" sql="true"><div class="language-id">sql</div><div class='code-container'><code><div class='line'>CREATE TABLE product(</div><div class='line'> id Int NOT NULL,</div><div class='line'> name STRING,</div><div class='line'> price MONEY,</div><div class='line'> PRIMARY KEY(id)</div><div class='line'> )</div></code></div></pre><!-- HTML_TAG_END --><ul><li><code>NOT NULL</code> 当此值为 null 时，不创建列</li><li><code>PRIMARY KEY(id)</code> 主键必须包含唯一的值，这个不能有重复的值</li></ul><p><strong>插入数值</strong>第一种形式无需指定要插入数据的列名，只需提供被插入的值即可</p><!-- HTML_TAG_START --><pre class="shiki material-default" sql="true"><div class="language-id">sql</div><div class='code-container'><code><div class='line'>INSERT INTO _table_name_</div><div class='line'>VALUES (_value1_,_value2_,_value3_,...);</div></code></div></pre><!-- HTML_TAG_END --><p>第二种形式需要指定列名及被插入的值：</p><!-- HTML_TAG_START --><pre class="shiki material-default" sql="true"><div class="language-id">sql</div><div class='code-container'><code><div class='line'>INSERT INTO _table_name_ (_column1_,_column2_,_column3_,...)</div><div class='line'>VALUES (_value1_,_value2_,_value3_,...);</div></code></div></pre><!-- HTML_TAG_END --><h3 id="read"><a href="#read">Read</a></h3><p>SELECT 语句用于从数据库中选取数据。</p><!-- HTML_TAG_START --><pre class="shiki material-default" sql="true"><div class="language-id">sql</div><div class='code-container'><code><div class='line'>SELECT _column_name_,_column_name_</div><div class='line'>FROM _table_name_;</div></code></div></pre><!-- HTML_TAG_END --><!-- HTML_TAG_START --><pre class="shiki material-default" sql="true"><div class="language-id">sql</div><div class='code-container'><code><div class='line'>SELECT * FROM _table_name_;</div></code></div></pre><!-- HTML_TAG_END --><p><code>*</code> 表示选择全部</p><p>可以用<code>WHERE</code> 筛选选择结果，如：</p><!-- HTML_TAG_START --><pre class="shiki material-default" sql="true"><div class="language-id">sql</div><div class='code-container'><code><div class='line'>SELECT _column_name_,_column_name_</div><div class='line'>FROM _table_name_</div><div class='line'>WHERE _column_name operator value_;</div></code></div></pre><!-- HTML_TAG_END --><h3 id="update"><a href="#update">Update</a></h3><!-- HTML_TAG_START --><pre class="shiki material-default" sql="true"><div class="language-id">sql</div><div class='code-container'><code><div class='line'>UPDATE _tablse_name_</div><div class='line'>SET _column1_=_value1_,_column2_=_value2_,...</div><div class='line'>WHERE _some_column_=_some_value_;</div></code></div></pre><!-- HTML_TAG_END --><p><strong>ALTER TABLE 语句用于在已有的表中添加、删除或修改列。</strong>如需在表中添加列，请使用下面的语法:</p><!-- HTML_TAG_START --><pre class="shiki material-default" sql="true"><div class="language-id">sql</div><div class='code-container'><code><div class='line'>ALTER TABLE table_name</div><div class='line'>ADD column_name datatype</div></code></div></pre><!-- HTML_TAG_END --><p>如需删除表中的列，请使用下面的语法（请注意，某些数据库系统不允许这种在数据库表中删除列的方式）：</p><!-- HTML_TAG_START --><pre class="shiki material-default" sql="true"><div class="language-id">sql</div><div class='code-container'><code><div class='line'>ALTER TABLE table_name</div><div class='line'>DROP COLUMN column_name</div></code></div></pre><!-- HTML_TAG_END --><h3 id="destory"><a href="#destory">Destory</a></h3><!-- HTML_TAG_START --><pre class="shiki material-default" sql="true"><div class="language-id">sql</div><div class='code-container'><code><div class='line'>DELETE FROM _table_name_</div><div class='line'>WHERE _some_column_=_some_value_;</div></code></div></pre><!-- HTML_TAG_END --><h2 id="understanding-sql-relationships-foreign-keys-and-inner-joins"><a href="#understanding-sql-relationships-foreign-keys-and-inner-joins">Understanding SQL Relationships, Foreign Keys and Inner Joins</a></h2><h3 id="foreign-key"><a href="#foreign-key">FOREIGN KEY</a></h3><ul><li>用<code>FOREIGN KEY</code> 来和外部表单链接</li><li>一个表中的 FOREIGN KEY 指向另一个表中的 UNIQUE KEY(唯一约束的键)。</li></ul><h3 id="inner-join"><a href="#inner-join">INNER JOIN</a></h3><p>选择相应列并合并表，<code>ON</code>后面写的是条件</p><!-- HTML_TAG_START --><pre class="shiki material-default" sql="true"><div class="language-id">sql</div><div class='code-container'><code><div class='line'>SELECT _column_name(s)_</div><div class='line'>FROM _table1_</div><div class='line'>INNER JOIN _table2_</div><div class='line'>ON _table1.column_name_=_table2.column_name_;</div></code></div></pre><!-- HTML_TAG_END --><p>或：</p><!-- HTML_TAG_START --><pre class="shiki material-default" sql="true"><div class="language-id">sql</div><div class='code-container'><code><div class='line'>SELECT _column_name(s)_</div><div class='line'>FROM _table1_</div><div class='line'>JOIN _table2_</div><div class='line'>ON _table1.column_name_=_table2.column_name_;</div></code></div></pre><!-- HTML_TAG_END -->]]>
|
||
</content>
|
||
<category term="SQL" scheme="https://seviche.cc/?tags=SQL" />
|
||
</entry>
|
||
<entry>
|
||
<title type="html"><![CDATA[一些设计作品]]></title>
|
||
<link href="https://seviche.cc/2022-07-13-work" />
|
||
<id>https://seviche.cc/2022-07-13-work</id>
|
||
<published>2022-07-13T00:00:00.000Z</published>
|
||
<updated>2022-08-01T03:03:33.433Z</updated>
|
||
<summary type="html"><![CDATA[logo / UI / 包装 / 儿童玩具 ……]]></summary>
|
||
<content type="html">
|
||
<![CDATA[<h2 id="二十四节气茶包"><a href="#二十四节气茶包">二十四节气茶包</a></h2><p><img src="2022-07-13-work/1.jpg" alt="2022-07-13-work/1.jpg" class="rounded-lg my-2" loading="lazy" decoding="async"><img src="2022-07-13-work/2.jpg" alt="2022-07-13-work/2.jpg" class="rounded-lg my-2" loading="lazy" decoding="async"><img src="2022-07-13-work/3.jpg" alt="2022-07-13-work/3.jpg" class="rounded-lg my-2" loading="lazy" decoding="async"><img src="2022-07-13-work/4.jpg" alt="2022-07-13-work/4.jpg" class="rounded-lg my-2" loading="lazy" decoding="async"></p><h2 id="ui-设计"><a href="#ui-设计">UI 设计</a></h2><p><img src="/2022-07-13-work/famic2.png" alt="/2022-07-13-work/famic2.png" class="rounded-lg my-2" loading="lazy" decoding="async"><img src="/2022-07-13-work/famic1.png" alt="/2022-07-13-work/famic1.png" class="rounded-lg my-2" loading="lazy" decoding="async"><img src="/2022-07-13-work/card.png" alt="/2022-07-13-work/card.png" class="rounded-lg my-2" loading="lazy" decoding="async"></p><h2 id="饼干包装"><a href="#饼干包装">饼干包装</a></h2><p>升级前<img src="/2022-07-13-work/%E5%8E%9F%E5%8C%85%E8%A3%85.JPG" alt="/2022-07-13-work/%E5%8E%9F%E5%8C%85%E8%A3%85.JPG" class="rounded-lg my-2" loading="lazy" decoding="async">升级后（面对年轻人重新设计<img src="/2022-07-13-work/after.png" alt="/2022-07-13-work/after.png" class="rounded-lg my-2" loading="lazy" decoding="async"></p><h2 id="logo"><a href="#logo">Logo</a></h2><p><img src="/2022-07-13-work/%E6%A0%B7%E6%9C%BA3.jpg" alt="/2022-07-13-work/%E6%A0%B7%E6%9C%BA3.jpg" class="rounded-lg my-2" loading="lazy" decoding="async"><img src="/2022-07-13-work/%E6%A0%B7%E6%9C%BA4.jpg" alt="/2022-07-13-work/%E6%A0%B7%E6%9C%BA4.jpg" class="rounded-lg my-2" loading="lazy" decoding="async"></p><h2 id="排版装帧"><a href="#排版装帧">排版装帧</a></h2><p><img src="/2022-07-13-work/book1.png" alt="/2022-07-13-work/book1.png" class="rounded-lg my-2" loading="lazy" decoding="async"><img src="/2022-07-13-work/book2.png" alt="/2022-07-13-work/book2.png" class="rounded-lg my-2" loading="lazy" decoding="async"><img src="/2022-07-13-work/book3.png" alt="/2022-07-13-work/book3.png" class="rounded-lg my-2" loading="lazy" decoding="async"><img src="/2022-07-13-work/book4.png" alt="/2022-07-13-work/book4.png" class="rounded-lg my-2" loading="lazy" decoding="async"></p><h2 id="儿童玩具"><a href="#儿童玩具">儿童玩具</a></h2><p><img src="/2022-07-13-work/game.webp" alt="/2022-07-13-work/game.webp" class="rounded-lg my-2" loading="lazy" decoding="async"></p><p>未完待续……（也不知道续不续）</p>]]>
|
||
</content>undefined
|
||
</entry>
|
||
<entry>
|
||
<title type="html"><![CDATA[VPS · Jellyfin结合Cloudreve开启线上影院]]></title>
|
||
<link href="https://seviche.cc/2022-06-15-jellyfin" />
|
||
<id>https://seviche.cc/2022-06-15-jellyfin</id>
|
||
<published>2022-06-15T00:00:00.000Z</published>
|
||
<updated>2022-08-06T11:32:41.091Z</updated>
|
||
<summary type="html"><![CDATA[基于 Docker 和 Nginx 的信心搭建过程]]></summary>
|
||
<content type="html">
|
||
<![CDATA[<p>昨天搭了一下 Pleroma，完全失败，完全没信心了，所以今天决定随便在<a href="https://selfhosted.libhunt.com/" rel="nofollow noopener noreferrer external" target="_blank">Awesome Self Hosted | LibHunt</a>找了一个排名很靠前的东西搭一下，给自己建立一点没有必要的信心……</p><p>刚好最近朋友找电影资源很犯难，所以我决定拿排在 Media 第一的<a href="https://jellyfin.org/" rel="nofollow noopener noreferrer external" target="_blank">Jellyfin</a>试试手。</p><h2 id="关于-jellyfin"><a href="#关于-jellyfin">关于 Jellyfin</a></h2><p>Jellyfin 是一个在线的流媒体影音库，对电影、音乐、有声书都有比较好的支持。除了在 web 端观看之外，它还支持很多的<a href="https://jellyfin.org/clients/" rel="nofollow noopener noreferrer external" target="_blank">客户端</a>，几乎是随处可用，目前我只试过安卓端的，其功能与网页端无异，适配得很好，体验流畅。</p><p>可以在这里试一下 Demo：<a href="https://demo.jellyfin.org/stable/web/index.html" rel="nofollow noopener noreferrer external" target="_blank">Jellyfin</a></p><p>（用户名 demo，密码留空）</p><p>下面是我的成果:-D<img src="https://usc1.contabostorage.com/cc0b816231a841b1b0232d5ef0c6deb1:image/2022/06/f83e0e4eca39ffd0304f847c6ad7b7e2.png" alt="https://usc1.contabostorage.com/cc0b816231a841b1b0232d5ef0c6deb1:image/2022/06/f83e0e4eca39ffd0304f847c6ad7b7e2.png" class="rounded-lg my-2" loading="lazy" decoding="async"></p><p><img src="https://usc1.contabostorage.com/cc0b816231a841b1b0232d5ef0c6deb1:image/2022/06/820aa9841a44a52a29436549463e3355.png" alt="https://usc1.contabostorage.com/cc0b816231a841b1b0232d5ef0c6deb1:image/2022/06/820aa9841a44a52a29436549463e3355.png" class="rounded-lg my-2" loading="lazy" decoding="async"></p><p><span class="spoiler">其实我也是搭完才知道它有什么功能的</span></p><h2 id="cloudrever"><a href="#cloudrever">Cloudrever</a></h2><p>Jellyfin 目前不支持 S3 存储，所以我需要一个网盘来存储和管理 VPS 上的媒体资源。看了塔塔的 <a href="https://mantyke.icu/2022/cloudreve-navidrome/" rel="nofollow noopener noreferrer external" target="_blank">音乐库搭建 </a> 文章后我决定试一下 <a href="https://cloudreve.org/" rel="nofollow noopener noreferrer external" target="_blank">Cloudreve</a> ，具体的搭建过程这里按下不表，是完全照着塔塔的教程和 <a href="https://docs.cloudreve.org/getting-started/install" rel="nofollow noopener noreferrer external" target="_blank">Cloudreve 文档</a> 做的</p><h3 id="反代"><a href="#反代">反代</a></h3><p>需要注意的是，配置 Nginx 反代时，与往常不同，需要设置一下最大的文件大小，以免后期上传失败：</p><!-- HTML_TAG_START --><pre class="shiki material-default with-title" bash="true" title="/etc/nginx/conf.d/jellyfin.conf"><div class='code-title'>/etc/nginx/conf.d/jellyfin.conf</div><div class="language-id">bash</div><div class='code-container'><code><div class='line dim'>location / {</div><div class='line dim'> proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;</div><div class='line dim'> proxy_set_header Host $http_host;</div><div class='line dim'> proxy_redirect off;</div><div class='line dim'> proxy_pass http://127.0.0.1:5212;</div><div class='line'></div><div class='line dim'> # 如果您要使用本地存储策略，请将下一行注释符删除，并更改大小为理论最大文件尺寸</div><div class='line highlight'> client_max_body_size 20000m;</div><div class='line dim'>}</div></code></div></pre><!-- HTML_TAG_END --><h3 id="一些配置"><a href="#一些配置">一些配置</a></h3><ol><li><p><strong>最大容量</strong></p><p>在 <code>管理面板-> 用户组</code> 里可修改<img src="https://usc1.contabostorage.com/cc0b816231a841b1b0232d5ef0c6deb1:image/2022/06/7aa6d1e4d5d539d725929075b4cf2c5a.png" alt="https://usc1.contabostorage.com/cc0b816231a841b1b0232d5ef0c6deb1:image/2022/06/7aa6d1e4d5d539d725929075b4cf2c5a.png" class="rounded-lg my-2" loading="lazy" decoding="async"></p></li><li><p><strong>配置离线下载</strong></p><p>配置好离线下载就可以用它在后台下载种子资源了。如果用的是 docker-compose 来安装，下面的应该这样配置：<img src="https://usc1.contabostorage.com/cc0b816231a841b1b0232d5ef0c6deb1:image/2022/06/4a316f6d84f90c58af4d7da1c2480447.png" alt="https://usc1.contabostorage.com/cc0b816231a841b1b0232d5ef0c6deb1:image/2022/06/4a316f6d84f90c58af4d7da1c2480447.png" class="rounded-lg my-2" loading="lazy" decoding="async"></p><ul><li><strong>[不可修改]</strong> RPC 服务器地址 => <code>http://aria2:6800</code></li><li><strong>[可修改, 需保持和 docker-compose.yml 文件一致]</strong> RPC 授权令牌 => <code>your_aria_rpc_token</code></li><li><strong>[不可修改]</strong> Aria2 用作临时下载目录的 节点上的绝对路径 => <code>/data</code></li></ul></li></ol><p>最后在 cloudreve 面板里创建一个用来存放 jelly 用的文件夹，比如 <code>jellyfin</code></p><h2 id="jellyfin"><a href="#jellyfin">Jellyfin</a></h2><h3 id="搭建"><a href="#搭建">搭建</a></h3><p>jellyfin 的搭建非常简单，给了我做人的很大信心（没有），我这里依旧选择用 docker-compose 来搭建。</p><p>官方文档：<a href="https://jellyfin.org/docs/general/administration/installing.html#docker" rel="nofollow noopener noreferrer external" target="_blank">Installing Jellyfin | Documentation - Jellyfin Project</a></p><p>首先创建一个配置文件夹并进入：</p><!-- HTML_TAG_START --><pre class="shiki material-default" bash="true"><div class="language-id">bash</div><div class='code-container'><code><div class='line'>sudo mkdir /opt/jellyfin && cd /opt/jellyfin</div></code></div></pre><!-- HTML_TAG_END --><p>创建配置文件</p><!-- HTML_TAG_START --><pre class="shiki material-default" bash="true"><div class="language-id">bash</div><div class='code-container'><code><div class='line'>sudo nano docker-compose.yml</div></code></div></pre><!-- HTML_TAG_END --><p>写入：</p><!-- HTML_TAG_START --><pre class="shiki material-default with-title" yaml="true" title="docker-compose.yml"><div class='code-title'>docker-compose.yml</div><div class="language-id">yaml</div><div class='code-container'><code><div class='line dim'>version: '3.5'</div><div class='line dim'>services:</div><div class='line dim'> jellyfin:</div><div class='line dim'> image: jellyfin/jellyfin</div><div class='line dim'> container_name: jellyfin</div><div class='line dim'> user: root</div><div class='line dim'> network_mode: 'host'</div><div class='line dim'> volumes:</div><div class='line dim'> - /path/to/config:/config</div><div class='line dim'> - /path/to/cache:/cache</div><div class='line highlight'> - /path/to/media:/media #修改为cloudreve的文件夹</div><div class='line highlight'> - /path/to/media2:/media2:ro #修改为cloudreve的文件夹</div><div class='line dim'> restart: 'unless-stopped'</div><div class='line dim'> # Optional - alternative address used for autodiscovery</div><div class='line dim'> environment:</div><div class='line dim'> - JELLYFIN_PublishedServerUrl=http://你的域名</div></code></div></pre><!-- HTML_TAG_END --><p>其中需要修改 <code>/path/to/media:/media</code> 的前半部分为 cloudreve 中在 VPS 中的存储路径，比如改为<code>/opt/drive/cloudreve/uploads/</code> ，如果有多个 cloudreve 用户则可以在后面加用户 id，比如 <code>/opt/drive/cloudreve/uploads/1</code> 这样</p><p>然后<code>/path/to/media2</code> 也是同样的修改，改为 <code>/opt/drive/cloudreve/uploads/</code></p><p>改完域名之后，执行 <code>sudo docker-compose up -d</code> 就可以在端口 <code>你的ip:8096</code> 看到界面了。</p><h3 id="反代-1"><a href="#反代-1">反代</a></h3><p>我用的是 Nginx 来进行反代，虽然每次都是一样的操作，但是直接写可以复制粘贴会比较简单，所以我现在准备说废话。</p><p>首先，创建配置文件：</p><!-- HTML_TAG_START --><pre class="shiki material-default" bash="true"><div class="language-id">bash</div><div class='code-container'><code><div class='line'>sudo nano /etc/nginx/conf.d/jellyfin.conf</div></code></div></pre><!-- HTML_TAG_END --><p>写入：</p><!-- HTML_TAG_START --><pre class="shiki material-default with-title" bash="true" title="/etc/nginx/conf.d/jellyfin.conf"><div class='code-title'>/etc/nginx/conf.d/jellyfin.conf</div><div class="language-id">bash</div><div class='code-container'><code><div class='line dim'>server {</div><div class='line dim'> listen 80;</div><div class='line highlight'> server_name 你的域名;</div><div class='line dim'> location / {</div><div class='line highlight'> proxy_pass http://127.0.0.1:8096;</div><div class='line dim'> proxy_set_header HOST $host;</div><div class='line dim'> proxy_set_header X-Forwarded-Proto $scheme;</div><div class='line dim'> proxy_set_header X-Real-IP $remote_addr;</div><div class='line dim'> proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;</div><div class='line dim'> }</div><div class='line dim'>}</div></code></div></pre><!-- HTML_TAG_END --><p>SSL/TLS 配置可以看我之前这篇：<a href="2022-06-12-cloudflare">配置 Cloudflare 的免费 SSL 证书</a>，或者用 certbot 配置</p><p>最后 <code>sudo nginx -t</code> 以及 <code>sudo systemctl reload nginx</code> 一下就可以在相应域名看到初始界面啦。</p><h3 id="媒体库路径"><a href="#媒体库路径">媒体库路径</a></h3><p>这个地方我摸了好一会才明白.</p><p>路径选择 media 或者 media2 下面的文件，然后后面的跟 cloudreve 里面的是一样的，比如在 cloudreve 中用户 1 创建的文件夹叫 jellyfin，则媒体库中路径为 <code>/media/1/jellyfin</code></p><p><img src="https://usc1.contabostorage.com/cc0b816231a841b1b0232d5ef0c6deb1:image/2022/06/6fc496318737b099af362731dc5958c6.png" alt="https://usc1.contabostorage.com/cc0b816231a841b1b0232d5ef0c6deb1:image/2022/06/6fc496318737b099af362731dc5958c6.png" class="rounded-lg my-2" loading="lazy" decoding="async"></p><h3 id="插件安装"><a href="#插件安装">插件安装</a></h3><p>Jellyfin 有很多实用的插件可以爬电影/音乐等元数据，可以在 <code>控制台-> 插件</code> 安装，需要注意的是，安装完插件需要重启一下才可以生效，也就是先<code>docker-compose down</code> 再 <code>docker-compose up -d</code></p><p>目前感觉比较好用的两个插件：</p><ul><li><a href="https://github.com/Libitum/jellyfin-plugin-douban" rel="nofollow noopener noreferrer external" target="_blank">Douban plugin for Jellyfin</a>： 可以抓豆瓣的元数据，需要通过链接安装</li><li>Open Subtitles：字幕资源，需要登录 <a href="https://www.opensubtitles.com/zh-CN" rel="nofollow noopener noreferrer external" target="_blank">opensubtitles.com</a>，并获取 API</li></ul><h3 id="主题和语言"><a href="#主题和语言">主题和语言</a></h3><p>可以在<code>display</code> 里面更改界面语言和主题，我比较喜欢的主题是 Purple Haze, 感觉是有些克制的赛博朋克风格</p>]]>
|
||
</content>
|
||
<category term="Nginx" scheme="https://seviche.cc/?tags=Nginx" />
|
||
<category term="VPS" scheme="https://seviche.cc/?tags=VPS" />
|
||
<category term="Docker" scheme="https://seviche.cc/?tags=Docker" />
|
||
</entry>
|
||
<entry>
|
||
<title type="html"><![CDATA[VPS · 配置 Cloudflare 的免费 SSL 证书]]></title>
|
||
<link href="https://seviche.cc/2022-06-12-cloudflare" />
|
||
<id>https://seviche.cc/2022-06-12-cloudflare</id>
|
||
<published>2022-06-12T00:00:00.000Z</published>
|
||
<updated>2022-08-01T03:03:33.353Z</updated>
|
||
<summary type="html"><![CDATA[关于如何为多个域名配置SSL证书的操作笔记]]></summary>
|
||
<content type="html">
|
||
<![CDATA[<p>声明：我不知道这样安不安全哈，It just works，个人笔记，操作有风险</p><p>参考：<a href="https://65536.io/2020/03/607.html" rel="nofollow noopener noreferrer external" target="_blank">申请 CloudFlare 免费 SSL 证书并应用到 nginx – 65536.io | 自娱自乐</a></p><p>先设置加密方式为<code>完全</code> ，否则之后可能会出现 526 错误</p><p><img src="https://usc1.contabostorage.com/cc0b816231a841b1b0232d5ef0c6deb1:image/2022/06/45ff9edefcc93a134b8478525bf6767b.png" alt="https://usc1.contabostorage.com/cc0b816231a841b1b0232d5ef0c6deb1:image/2022/06/45ff9edefcc93a134b8478525bf6767b.png" class="rounded-lg my-2" loading="lazy" decoding="async"></p><h2 id="1-创建证书"><a href="#1-创建证书">1. 创建证书</a></h2><p>首先将主域名绑定到 Cloudflare，然后在<code>SSL/TLS</code> 下的源服务器证书处，点击<code>创建证书</code><img src="https://usc1.contabostorage.com/cc0b816231a841b1b0232d5ef0c6deb1:image/2022/06/b693acbf458e0efaf1c18037e563060e.png" alt="https://usc1.contabostorage.com/cc0b816231a841b1b0232d5ef0c6deb1:image/2022/06/b693acbf458e0efaf1c18037e563060e.png" class="rounded-lg my-2" loading="lazy" decoding="async"></p><p>然后选择私钥和 CSR 生成方式，以及证书的有效期（也可以不改），点击<code>创建</code><img src="https://usc1.contabostorage.com/cc0b816231a841b1b0232d5ef0c6deb1:image/2022/06/6925f00b181e60af9b8c211942359b6d.png" alt="https://usc1.contabostorage.com/cc0b816231a841b1b0232d5ef0c6deb1:image/2022/06/6925f00b181e60af9b8c211942359b6d.png" class="rounded-lg my-2" loading="lazy" decoding="async"></p><p>将下面的证书和私钥暂时复制到某个安全的地方，点击确定<img src="https://usc1.contabostorage.com/cc0b816231a841b1b0232d5ef0c6deb1:image/2022/06/bc66277a7ebfce59a1cc67ab2947b948.png" alt="https://usc1.contabostorage.com/cc0b816231a841b1b0232d5ef0c6deb1:image/2022/06/bc66277a7ebfce59a1cc67ab2947b948.png" class="rounded-lg my-2" loading="lazy" decoding="async"></p><h2 id="2-密钥上传到-vps"><a href="#2-密钥上传到-vps">2. 密钥上传到 VPS</a></h2><p>连接 VPS 之后，创建一个文件夹存入密钥，我将其存到<code>/etc/nginx/cert/</code> 路径下</p><!-- HTML_TAG_START --><pre class="shiki material-default" bash="true"><div class="language-id">bash</div><div class='code-container'><code><div class='line'>sudo mkdir /etc/nginx/cert && cd /etc/nginx/cert</div></code></div></pre><!-- HTML_TAG_END --><p>写入证书,粘贴入刚刚保存的<code>证书</code> 栏里面的内容</p><!-- HTML_TAG_START --><pre class="shiki material-default" bash="true"><div class="language-id">bash</div><div class='code-container'><code><div class='line'>sudo nano public.pem</div></code></div></pre><!-- HTML_TAG_END --><p>修改权限</p><!-- HTML_TAG_START --><pre class="shiki material-default" bash="true"><div class="language-id">bash</div><div class='code-container'><code><div class='line'>sudo chmod 644 public.pem</div></code></div></pre><!-- HTML_TAG_END --><p>写入私钥，粘贴入刚刚保存的<code>私钥</code> 栏里面的内容</p><!-- HTML_TAG_START --><pre class="shiki material-default" bash="true"><div class="language-id">bash</div><div class='code-container'><code><div class='line'>sudo nano private.key</div></code></div></pre><!-- HTML_TAG_END --><p>修改权限</p><!-- HTML_TAG_START --><pre class="shiki material-default" bash="true"><div class="language-id">bash</div><div class='code-container'><code><div class='line'>sudo chmod 600 private.key</div></code></div></pre><!-- HTML_TAG_END --><h2 id="3-修改-nginx-配置"><a href="#3-修改-nginx-配置">3. 修改 Nginx 配置</a></h2><p>参考：<a href="https://phoenixnap.com/kb/redirect-http-to-https-nginx" rel="nofollow noopener noreferrer external" target="_blank">How to Redirect HTTP to HTTPS in Nginx</a></p><p>如果有用防火墙，请先打开 80 端口和 443 端口，不然可能会像我一样，卡在一个毫无意义的 522 Error 上 ^ ^</p><!-- HTML_TAG_START --><pre class="shiki material-default" bash="true"><div class="language-id">bash</div><div class='code-container'><code><div class='line'>sudo ufw allow 80</div><div class='line'>sudo ufw allow 443</div></code></div></pre><!-- HTML_TAG_END --><p>打开 Nginx 配置</p><!-- HTML_TAG_START --><pre class="shiki material-default" bash="true"><div class="language-id">bash</div><div class='code-container'><code><div class='line'>sudo nano /etc/nginx/nginx.conf</div></code></div></pre><!-- HTML_TAG_END --><p>在 http 块里面配置一个默认 server，将 http 重定向到 https</p><!-- HTML_TAG_START --><pre class="shiki material-default" bash="true"><div class="language-id">bash</div><div class='code-container'><code><div class='line'># 默认server</div><div class='line'>server {</div><div class='line'>listen 80 default_server;</div><div class='line'>server_name _;</div><div class='line'>return 301 https://$host$request_uri;</div><div class='line'>}</div><div class='line'></div><div class='line'># ssl配置</div><div class='line'>server {</div><div class='line'>listen 443 ssl default_server;</div><div class='line'>server_name *.example1.com;</div><div class='line'></div><div class='line'>ssl_certificate /etc/nginx/cert/public.pem;</div><div class='line'>ssl_certificate_key /etc/nginx/cert/private.key;</div><div class='line'>}</div><div class='line'></div><div class='line'># 如果有多个域名，可以这样配置，证书也要按之前的添加一下</div><div class='line'>server {</div><div class='line'>listen 443 ssl;</div><div class='line'>server_name *.example2.com;</div><div class='line'></div><div class='line'>ssl_certificate /etc/nginx/cert/example2/public.pem;</div><div class='line'>ssl_certificate_key /etc/nginx/cert/example2/private.key;</div><div class='line'>}</div></code></div></pre><!-- HTML_TAG_END --><p>然后<code>sudo nginx -t</code> 测试一下，没有问题的话就可以 Nginx 了：</p><!-- HTML_TAG_START --><pre class="shiki material-default" bash="true"><div class="language-id">bash</div><div class='code-container'><code><div class='line'>sudo systemctl reload nginx</div></code></div></pre><!-- HTML_TAG_END --><p>之后如果有域名要配置 ssl ，如 example.conf 中，可以直接将 <code>listen 80</code> 改为<code>listen 443 ssl</code></p><p>我常用的一个反代配置:</p><!-- HTML_TAG_START --><pre class="shiki material-default" conf="true"><div class='code-container'><code>server {listen 443 ssl;server_name 域名location / {proxy_pass http://127.0.0.1:反代端口;proxy_set_header HOST $host;proxy_set_header X-Forwarded-Proto $scheme;proxy_set_header X-Real-IP $remote_addr;proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;}}</code></div></pre><!-- Note from shiki-twoslash: the language conf was not set up for Shiki to use, and so there is no code highlighting --><!-- HTML_TAG_END -->]]>
|
||
</content>
|
||
<category term="Nginx" scheme="https://seviche.cc/?tags=Nginx" />
|
||
<category term="VPS" scheme="https://seviche.cc/?tags=VPS" />
|
||
</entry>
|
||
<entry>
|
||
<title type="html"><![CDATA[实现一个返回页面顶部的 Vue3 组件]]></title>
|
||
<link href="https://seviche.cc/2022-06-10-backtotop" />
|
||
<id>https://seviche.cc/2022-06-10-backtotop</id>
|
||
<published>2022-06-10T00:00:00.000Z</published>
|
||
<updated>2022-08-01T11:38:16.754Z</updated>
|
||
<summary type="html"><![CDATA[结合流畅的动画平滑滚动到页面顶部]]></summary>
|
||
<content type="html">
|
||
<![CDATA[<p>主要参考：<a href="https://adambailey.io/blog/scroll-to-top-button-vue/" rel="nofollow noopener noreferrer external" target="_blank">Simple Vue.js and Tailwind.css Scroll To Top Button | Adam Bailey</a></p><p>CSS 库：<a href="https://getbootstrap.com/docs/5.2/getting-started/introduction/" rel="nofollow noopener noreferrer external" target="_blank">Bootstrap V5.2</a></p><ul><li>按钮的布局方式为 sticky</li><li>因为可能需要频繁切换显示状态，所以用<code>v-show</code> 而不是 <code>v-if</code>来控制按钮可见性</li><li>使用 Vue 中内置的<code><transition></code>组件实现状态之间的平滑过渡</li></ul><!-- HTML_TAG_START --><pre class="shiki material-default with-title" vue="true" title="BackToTop.vue"><div class='code-title'>BackToTop.vue</div><div class="language-id">vue</div><div class='code-container'><code><div class='line'><template></div><div class='line'> <div class="position-sticky bottom-0 end-0 w-100 d-flex justify-content-end b-0 pb-3 pe-5"></div><div class='line'> <transition></div><div class='line'> <button class="btn btn-secondary btn-sm" v-show="isVisible" @click="scrollToTop" aria-label="scroll to top of the page"></div><div class='line'> <img src="../assets/to-top.min.svg" alt="an arrow point to top" /></div><div class='line'> </button></div><div class='line'> </transition></div><div class='line'> </div></div><div class='line'></template></div><div class='line'></div><div class='line'><script lang="ts"></div><div class='line'>import { defineComponent, ref, onMounted, onBeforeUnmount } from 'vue'</div><div class='line'></div><div class='line'>export default defineComponent({</div><div class='line'> name: 'BackToTop',</div><div class='line'> setup() {</div><div class='line'> const isVisible = ref(false)</div><div class='line'> const handleScroll = () => {</div><div class='line'> isVisible.value = window.scrollY > 0</div><div class='line'> }</div><div class='line'> const scrollToTop = () => {</div><div class='line'> window.scrollTo({</div><div class='line'> top: 0,</div><div class='line'> behavior: 'smooth'</div><div class='line'> })</div><div class='line'> }</div><div class='line'> onMounted(() => {</div><div class='line'> window.addEventListener('scroll', handleScroll)</div><div class='line'> })</div><div class='line'> onBeforeUnmount(() => {</div><div class='line'> window.removeEventListener('scroll', handleScroll)</div><div class='line'> })</div><div class='line'> return {</div><div class='line'> isVisible,</div><div class='line'> handleScroll,</div><div class='line'> scrollToTop</div><div class='line'> }</div><div class='line'> }</div><div class='line'>})</div><div class='line'></script></div><div class='line'></div><div class='line'><style></div><div class='line'>.v-enter-active,</div><div class='line'>.v-leave-active {</div><div class='line'> transition: opacity 0.2s ease;</div><div class='line'>}</div><div class='line'>.v-enter-from,</div><div class='line'>.v-leave-to {</div><div class='line'> opacity: 0;</div><div class='line'>}</div><div class='line'></style></div></code></div></pre><!-- HTML_TAG_END --><!-- HTML_TAG_START --><pre class="shiki material-default with-title" html="true" title="to-top.min.svg"><div class='code-title'>to-top.min.svg</div><div class="language-id">html</div><div class='code-container'><code><div class='line'><svg width="20" height="20" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"></div><div class='line'> <path</div><div class='line'> d="M24.008 14.1V42M12 26l12-12 12 12M12 6h24"</div><div class='line'> stroke="#fff"</div><div class='line'> stroke-width="4"</div><div class='line'> stroke-linecap="round"</div><div class='line'> stroke-linejoin="round" /></div><div class='line'></svg></div></code></div></pre><!-- HTML_TAG_END --><p>其他参考/实现方式：</p><ul><li><a href="https://blog.csdn.net/m0_46217225/article/details/117933815" rel="nofollow noopener noreferrer external" target="_blank">vue 返回顶部的组件 BackTop</a></li><li><a href="https://github.com/asdf1899/vue-simple-scroll-up/blob/master/src/ScrollToTop.vue" rel="nofollow noopener noreferrer external" target="_blank">vue-simple-scroll-up/ScrollToTop.vue · GitHub</a></li><li><a href="https://codepen.io/webty_mizusawa/pen/QWLMeqE" rel="nofollow noopener noreferrer external" target="_blank">Vue.js - Scroll Back To Top Button Without Library</a></li><li><a href="https://juejin.cn/post/6993729338843594783" rel="nofollow noopener noreferrer external" target="_blank">Vue3 从 0 到 1 组件开发-基础组件：BackTop 回顶 - 掘金</a></li><li><a href="https://juejin.cn/post/6873264845915947016" rel="nofollow noopener noreferrer external" target="_blank">vue 相同路径刷新怎么回到顶部 - 掘金</a></li></ul><p>题外话：<span class="spoiler">BootStrap 的文档写得好烂</span></p>]]>
|
||
</content>
|
||
<category term="Vue3" scheme="https://seviche.cc/?tags=Vue3" />
|
||
<category term="BootStrap" scheme="https://seviche.cc/?tags=BootStrap" />
|
||
</entry>
|
||
<entry>
|
||
<title type="html"><![CDATA[Contabo OSS + PicGo 图床配置]]></title>
|
||
<link href="https://seviche.cc/2022-05-30-contabo-oss" />
|
||
<id>https://seviche.cc/2022-05-30-contabo-oss</id>
|
||
<published>2022-05-30T00:00:00.000Z</published>
|
||
<updated>2022-08-01T03:03:33.353Z</updated>
|
||
<summary type="html"><![CDATA[OSS自建图床笔记]]></summary>
|
||
<content type="html">
|
||
<![CDATA[<h2 id="1-购买套餐"><a href="#1-购买套餐">1. 购买套餐</a></h2><p>在官网购买 OSS 套餐，按月付费：<a href="https://contabo.com/en/object-storage/" rel="nofollow noopener noreferrer external" target="_blank">Object Storage: S3-Compatible with Free Data Transfer</a></p><p>我没有修改设置，选的 250G 的容量，位于美国</p><h2 id="2-创建-bucket"><a href="#2-创建-bucket">2. 创建 Bucket</a></h2><p>进入控制面板：<a href="https://new.contabo.com/storage/object-storage/buckets" rel="nofollow noopener noreferrer external" target="_blank">Contabo Object Storage Panel</a>，然后点击<code>Create Bucket</code> 创建存储桶</p><p><img src="https://usc1.contabostorage.com/cc0b816231a841b1b0232d5ef0c6deb1:image/2022/05/114bf9578ffa81fb28c0010cd1d159f1.png" alt="https://usc1.contabostorage.com/cc0b816231a841b1b0232d5ef0c6deb1:image/2022/05/114bf9578ffa81fb28c0010cd1d159f1.png" class="rounded-lg my-2" loading="lazy" decoding="async">其中 <strong>Bucket Name</strong> 可以随便写，<strong>Select Region</strong> 不用选，默认是购买 OSS 时所选择的区域，如果换区域也可以另选<img src="https://usc1.contabostorage.com/cc0b816231a841b1b0232d5ef0c6deb1:image/2022/05/d7e982a6b2e8ff37b7354d3d9b49a415.png" alt="https://usc1.contabostorage.com/cc0b816231a841b1b0232d5ef0c6deb1:image/2022/05/d7e982a6b2e8ff37b7354d3d9b49a415.png" class="rounded-lg my-2" loading="lazy" decoding="async">创建好后如图：（这个 Public Access 应该默认是红色的，也就是没有打开，我这里打开了）<img src="https://usc1.contabostorage.com/cc0b816231a841b1b0232d5ef0c6deb1:image/2022/05/dc654d35fe384d2e999f7a70d31cfd07.png" alt="https://usc1.contabostorage.com/cc0b816231a841b1b0232d5ef0c6deb1:image/2022/05/dc654d35fe384d2e999f7a70d31cfd07.png" class="rounded-lg my-2" loading="lazy" decoding="async"></p><h2 id="3-安装-picgo-插件"><a href="#3-安装-picgo-插件">3. 安装 PicGo 插件</a></h2><p>在插件里面搜<code>s3</code>，然后安装第一个：<img src="https://usc1.contabostorage.com/cc0b816231a841b1b0232d5ef0c6deb1:image/2022/05/86c9fbcaf0882da8ae5c342dcbae1cad.png" alt="https://usc1.contabostorage.com/cc0b816231a841b1b0232d5ef0c6deb1:image/2022/05/86c9fbcaf0882da8ae5c342dcbae1cad.png" class="rounded-lg my-2" loading="lazy" decoding="async"></p><p>安装好后，在设置里选择打开，<img src="https://usc1.contabostorage.com/cc0b816231a841b1b0232d5ef0c6deb1:image/2022/05/e0e2ae2026b3182f65e9f6be6535050e.png" alt="https://usc1.contabostorage.com/cc0b816231a841b1b0232d5ef0c6deb1:image/2022/05/e0e2ae2026b3182f65e9f6be6535050e.png" class="rounded-lg my-2" loading="lazy" decoding="async"></p><h2 id="4-配置插件"><a href="#4-配置插件">4. 配置插件</a></h2><p><img src="https://usc1.contabostorage.com/cc0b816231a841b1b0232d5ef0c6deb1:image/2022/05/9ca1d257b19056becef07d604e388376.png" alt="https://usc1.contabostorage.com/cc0b816231a841b1b0232d5ef0c6deb1:image/2022/05/9ca1d257b19056becef07d604e388376.png" class="rounded-lg my-2" loading="lazy" decoding="async"></p><h3 id="应用密钥-id-和-应用密钥"><a href="#应用密钥-id-和-应用密钥">应用密钥 ID 和 应用密钥</a></h3><p>打开<a href="https://new.contabo.com/account/security" rel="nofollow noopener noreferrer external" target="_blank">Contabo Object Storage Panel</a>的 <strong>Acount</strong> > <strong>Security & Access</strong> 面板，找到最下面的 <strong>S3 Object Storage Credentials</strong></p><p>这里对应插件设置里的：</p><ul><li><strong>应用密钥 ID</strong> → <strong>Access Key</strong></li><li><strong>应用密钥</strong> → <strong>Secret Key</strong><img src="https://usc1.contabostorage.com/cc0b816231a841b1b0232d5ef0c6deb1:image/2022/05/f1370bd49b1b7b54022e1203e8937ff1.png" alt="https://usc1.contabostorage.com/cc0b816231a841b1b0232d5ef0c6deb1:image/2022/05/f1370bd49b1b7b54022e1203e8937ff1.png" class="rounded-lg my-2" loading="lazy" decoding="async"></li></ul><h3 id="桶--自定义节点-自定义域名"><a href="#桶--自定义节点-自定义域名">桶 / 自定义节点 /自定义域名</a></h3><ul><li><strong>桶</strong> → <strong>Bucket Name</strong></li><li><strong>自定义节点</strong> → Bucket URL 中桶名字前的部分，比如这里就是<code>https://usc1.contabostorage.com</code><img src="https://usc1.contabostorage.com/cc0b816231a841b1b0232d5ef0c6deb1:image/2022/05/53480cca5166e226dd804c5a1653b579.png" alt="https://usc1.contabostorage.com/cc0b816231a841b1b0232d5ef0c6deb1:image/2022/05/53480cca5166e226dd804c5a1653b579.png" class="rounded-lg my-2" loading="lazy" decoding="async"></li><li><strong>自定义域名</strong>，需要先点击 Quick Action 里面的 Share 标志，打开 Public Sharing，然后里面的链接对应的就是设置里的自定义域名：<img src="https://usc1.contabostorage.com/cc0b816231a841b1b0232d5ef0c6deb1:image/2022/05/5661c75dcb1fac89fff6d8bb2f9e8083.png" alt="https://usc1.contabostorage.com/cc0b816231a841b1b0232d5ef0c6deb1:image/2022/05/5661c75dcb1fac89fff6d8bb2f9e8083.png" class="rounded-lg my-2" loading="lazy" decoding="async"></li></ul><h3 id="其他设置"><a href="#其他设置">其他设置</a></h3><p>打开这两项：<img src="https://usc1.contabostorage.com/cc0b816231a841b1b0232d5ef0c6deb1:image/2022/05/94d2791b84b8a9c9b801e4b39753a125.png" alt="https://usc1.contabostorage.com/cc0b816231a841b1b0232d5ef0c6deb1:image/2022/05/94d2791b84b8a9c9b801e4b39753a125.png" class="rounded-lg my-2" loading="lazy" decoding="async"></p><p>然后文件路径对应的是 Bucket 里面存储文件的路径，具体的设置可以参照：<a href="https://github.com/wayjam/picgo-plugin-s3" rel="nofollow noopener noreferrer external" target="_blank">GitHub - wayjam/picgo-plugin-s3: PicGo S3 插件</a></p><h2 id="5-其他"><a href="#5-其他">5. 其他</a></h2><h3 id="obsidian-中的图床设置"><a href="#obsidian-中的图床设置">Obsidian 中的图床设置</a></h3><p>先安装这个<code>Image auto upload Plugin</code>插件：<img src="https://usc1.contabostorage.com/cc0b816231a841b1b0232d5ef0c6deb1:image/2022/05/567e38f40af9758fb155ff7408f9261f.png" alt="https://usc1.contabostorage.com/cc0b816231a841b1b0232d5ef0c6deb1:image/2022/05/567e38f40af9758fb155ff7408f9261f.png" class="rounded-lg my-2" loading="lazy" decoding="async"></p><p>然后在 PicGo 设置里面 → <strong>设置 Server</strong>→ 打开 Server 开关<img src="https://usc1.contabostorage.com/cc0b816231a841b1b0232d5ef0c6deb1:image/2022/05/815df1bbba1e0183518e0d7bb04589e5.png" alt="https://usc1.contabostorage.com/cc0b816231a841b1b0232d5ef0c6deb1:image/2022/05/815df1bbba1e0183518e0d7bb04589e5.png" class="rounded-lg my-2" loading="lazy" decoding="async"></p><p><img src="https://usc1.contabostorage.com/cc0b816231a841b1b0232d5ef0c6deb1:image/2022/05/bacd83f2375bdad673ce7ac98ebdfe96.png" alt="https://usc1.contabostorage.com/cc0b816231a841b1b0232d5ef0c6deb1:image/2022/05/bacd83f2375bdad673ce7ac98ebdfe96.png" class="rounded-lg my-2" loading="lazy" decoding="async"></p><p>然后 Obsidian 插件中这样设置：</p><p>PicGo Server ：<code>http://127.0.0.1:36677/upload</code></p><p>端口号不一定是 36677，只要一一对应就好。<img src="https://usc1.contabostorage.com/cc0b816231a841b1b0232d5ef0c6deb1:image/2022/05/eb921dee9017d358df5d3458cab43be6.png" alt="https://usc1.contabostorage.com/cc0b816231a841b1b0232d5ef0c6deb1:image/2022/05/eb921dee9017d358df5d3458cab43be6.png" class="rounded-lg my-2" loading="lazy" decoding="async"></p><p>设置好后，在后台保持 PicGo 开启，就可以在 Obsidian 里面粘贴一键上传图床了～</p><h3 id="更多-picgo-插件"><a href="#更多-picgo-插件">更多 PicGO 插件：</a></h3><p><a href="https://github.com/PicGo/Awesome-PicGo" rel="nofollow noopener noreferrer external" target="_blank">GitHub - PicGo/Awesome-PicGo: A collection of awesome projects using PicGo.</a></p><p>有图床备份、图片压缩、图床转移等插件，不过我都没有试过……</p>]]>
|
||
</content>
|
||
<category term="OSS" scheme="https://seviche.cc/?tags=OSS" />
|
||
</entry>
|
||
<entry>
|
||
<title type="html"><![CDATA[为博客写一个Project showcase 页面]]></title>
|
||
<link href="https://seviche.cc/2022-05-26-write-a-page-template" />
|
||
<id>https://seviche.cc/2022-05-26-write-a-page-template</id>
|
||
<published>2022-05-26T00:00:00.000Z</published>
|
||
<updated>2022-08-01T11:36:42.589Z</updated>
|
||
<summary type="html"><![CDATA[第一次Pull Request的经历]]></summary>
|
||
<content type="html">
|
||
<![CDATA[<p>这两天为博客写了一个 Project 的页面用来放我的作品，这里记录一下我是怎么写（模仿）的，我对 Svelte 语法的了解不多，没有特别深入学习，只是在官方看了下文档和用了下他们的 <a href="https://www.sveltejs.cn/tutorial/basics" rel="nofollow noopener noreferrer external" target="_blank">交互式教程</a> ，编码的过程是一边学习一边模仿慢慢摸索的，虽然最终没有 merge 到 repo 中，但我觉得整个过程都蛮兴奋的。</p><p>既然有了博客，那我肯定是要写一下这个过程的。</p><h2 id="1-分析需求"><a href="#1-分析需求">1. 分析需求</a></h2><p>我想要的是一个独立的 Page，而不是一个 Post 页面，最后把它放在导航栏里面。想要有以下这几个功能：</p><ul><li>技术栈分类</li><li>项目类别筛选</li><li>项目展示</li></ul><p>主要有这些信息的展示：</p><ul><li>项目标题</li><li>项目图片</li><li>项目描述</li><li>技术栈</li><li>项目类别</li></ul><h2 id="2-画原型图"><a href="#2-画原型图">2. 画原型图</a></h2><p>明确了需求后，参考了几个项目平台的布局，在 <a href="https://whimsical.com/" rel="nofollow noopener noreferrer external" target="_blank">Whimsical</a> 上画了原型图如下：<img src="https://s2.loli.net/2022/05/26/8kMa6LPrgUEC7Xb.png" alt="https://s2.loli.net/2022/05/26/8kMa6LPrgUEC7Xb.png" class="rounded-lg my-2" loading="lazy" decoding="async"></p><p>目前还没有做上面 Tag 的分类功能，之后可能会做吧</p><h2 id="2-创建组件样式-css"><a href="#2-创建组件样式-css">2. 创建组件样式 CSS</a></h2><p>为了统一风格，我在博客现有框架里四处搜寻可用的组件样式，想在这基础上修改，然后我找到了作者 藍 在 Tailwind Play 上的友链组件，感觉很适合，然后就直接在这个 Tailwind Play Demo 上进行了样式修改，不过此时填写的数据都是死数据，后面再进行修改。</p><p>因为我之前没有怎么用过 Tailwind，所以是一边对照 Tailwind 文档修改的，然后 Tailwind Play 上的代码提示功能真的很新手友好，hover CSS class 的时候会显示具体的 CSS 原始参数，很直观。</p><p><img src="https://s2.loli.net/2022/05/27/lFwQ8T5YUcdjDfe.png" alt="https://s2.loli.net/2022/05/27/lFwQ8T5YUcdjDfe.png" class="rounded-lg my-2" loading="lazy" decoding="async">最后我构建的 Demo 样式如下：<a href="https://play.tailwindcss.com/uQwYojgpuk?layout=horizontal" rel="nofollow noopener noreferrer external" target="_blank">Tailwind Play</a></p><p><img src="https://s2.loli.net/2022/05/27/g5aYxD9mzlqpj6c.png" alt="https://s2.loli.net/2022/05/27/g5aYxD9mzlqpj6c.png" class="rounded-lg my-2" loading="lazy" decoding="async"></p><h2 id="4-编写组件代码"><a href="#4-编写组件代码">4. 编写组件代码</a></h2><p>整个页面的构建跟 Friend 页面很像，我分析了 Friend 页面所涉及到的代码和结构，然后一点点模仿构建 Project 页面。</p><h3 id="数据"><a href="#数据">数据</a></h3><p>首先根据需求确定传入的数据及其格式，以便后面使用 TypeScript 的提示</p><ul><li>参考：<code>/src/lib/config/friends.ts</code></li><li>新建：<code>/src/lib/config/projects.ts</code></li></ul><!-- HTML_TAG_START --><pre class="shiki material-default with-title twoslash lsp" ts="true" title="/src/lib/config/friends.ts"><div class='code-title'>/src/lib/config/friends.ts</div><div class="language-id">ts</div><div class='code-container'><code><div class='line'>export interface <data-lsp lsp='interface FriendOld' >FriendOld</data-lsp> {</div><div class='line'> // hCard+XFN</div><div class='line'> <data-lsp lsp='(property) FriendOld.id: string' >id</data-lsp>: string // HTML id</div><div class='line'> <data-lsp lsp='(property) FriendOld.rel?: string | undefined' >rel</data-lsp>?: string // XFN, contact / acquaintance / friend</div><div class='line'> <data-lsp lsp='(property) FriendOld.link?: string | undefined' >link</data-lsp>?: string // URL</div><div class='line'> <data-lsp lsp='(property) FriendOld.html?: string | undefined' >html</data-lsp>?: string // HTML</div><div class='line'> <data-lsp lsp='(property) FriendOld.title?: string | undefined' >title</data-lsp>?: string // 标题</div><div class='line'> <data-lsp lsp='(property) FriendOld.descr?: string | undefined' >descr</data-lsp>?: string // 描述</div><div class='line'> <data-lsp lsp='(property) FriendOld.avatar?: string | undefined' >avatar</data-lsp>?: string // 头像</div><div class='line'> <data-lsp lsp='(property) FriendOld.name?: string | undefined' >name</data-lsp>?: string // backwards compatibility</div><div class='line'>}</div><div class='line'> </div><div class='line'>export type <data-lsp lsp='type Friend = { id: string; rel?: string | undefined; link?: string | undefined; html?: string | undefined; title?: string | undefined; name?: string | undefined; avatar?: string | undefined; descr?: string | undefined; class?: { ...; } | undefined; }' >Friend</data-lsp> = {</div><div class='line'> <data-lsp lsp='(property) id: string' >id</data-lsp>: string // HTML id</div><div class='line'> <data-lsp lsp='(property) rel?: string | undefined' >rel</data-lsp>?: string // XHTML Friends Network</div><div class='line'> <data-lsp lsp='(property) link?: string | undefined' >link</data-lsp>?: string // URL</div><div class='line'> <data-lsp lsp='(property) html?: string | undefined' >html</data-lsp>?: string // Custom HTML</div><div class='line'> </div><div class='line'> <data-lsp lsp='(property) title?: string | undefined' >title</data-lsp>?: string // 标题</div><div class='line'> <data-lsp lsp='(property) name?: string | undefined' >name</data-lsp>?: string // 人名</div><div class='line'> <data-lsp lsp='(property) avatar?: string | undefined' >avatar</data-lsp>?: string // 头像</div><div class='line'> <data-lsp lsp='(property) descr?: string | undefined' >descr</data-lsp>?: string // 描述</div><div class='line'> <data-lsp lsp='(property) class?: { avatar?: string | undefined; img?: string | undefined; } | undefined' >class</data-lsp>?: {</div><div class='line'> <data-lsp lsp='(property) avatar?: string | undefined' >avatar</data-lsp>?: string // 头像类名</div><div class='line'> <data-lsp lsp='(property) img?: string | undefined' >img</data-lsp>?: string // 图片类名</div><div class='line'> }</div><div class='line'>}</div><div class='line'> </div><div class='line'>export const <data-lsp lsp='const friends: Friend[]' >friends</data-lsp>: <data-lsp lsp='type Friend = { id: string; rel?: string | undefined; link?: string | undefined; html?: string | undefined; title?: string | undefined; name?: string | undefined; avatar?: string | undefined; descr?: string | undefined; class?: { ...; } | undefined; }' >Friend</data-lsp>[] = [</div><div class='line'> {</div><div class='line'> <data-lsp lsp='(property) id: string' >id</data-lsp>: 'id',</div><div class='line'> <data-lsp lsp='(property) rel?: string | undefined' >rel</data-lsp>: '',</div><div class='line'> <data-lsp lsp='(property) title?: string | undefined' >title</data-lsp>: '',</div><div class='line'> <data-lsp lsp='(property) name?: string | undefined' >name</data-lsp>: '',</div><div class='line'> <data-lsp lsp='(property) link?: string | undefined' >link</data-lsp>: '',</div><div class='line'> <data-lsp lsp='(property) descr?: string | undefined' >descr</data-lsp>: '',</div><div class='line'> <data-lsp lsp='(property) avatar?: string | undefined' >avatar</data-lsp>: ''</div><div class='line'> }</div><div class='line'>]</div></code></div></pre><!-- HTML_TAG_END --><!-- HTML_TAG_START --><pre class="shiki material-default with-title twoslash lsp" ts="true" title="/src/lib/config/projects.ts"><div class='code-title'>/src/lib/config/projects.ts</div><div class="language-id">ts</div><div class='code-container'><code><div class='line'>export type <data-lsp lsp='type Project = { id: string; name?: string | undefined; tags?: string[] | undefined; feature?: string | undefined; description?: string | undefined; img?: string | undefined; link?: string | undefined; }' >Project</data-lsp> = {</div><div class='line'> <data-lsp lsp='(property) id: string' >id</data-lsp>: string</div><div class='line'> <data-lsp lsp='(property) name?: string | undefined' >name</data-lsp>?: string</div><div class='line'> <data-lsp lsp='(property) tags?: string[] | undefined' >tags</data-lsp>?: string[]</div><div class='line'> <data-lsp lsp='(property) feature?: string | undefined' >feature</data-lsp>?: string</div><div class='line'> <data-lsp lsp='(property) description?: string | undefined' >description</data-lsp>?: string</div><div class='line'> <data-lsp lsp='(property) img?: string | undefined' >img</data-lsp>?: string</div><div class='line'> <data-lsp lsp='(property) link?: string | undefined' >link</data-lsp>?: string</div><div class='line'>}</div><div class='line'> </div><div class='line'>export const <data-lsp lsp='const projects: Project[]' >projects</data-lsp>: <data-lsp lsp='type Project = { id: string; name?: string | undefined; tags?: string[] | undefined; feature?: string | undefined; description?: string | undefined; img?: string | undefined; link?: string | undefined; }' >Project</data-lsp>[] = [</div><div class='line'> {</div><div class='line'> <data-lsp lsp='(property) id: string' >id</data-lsp>: 'coach',</div><div class='line'> <data-lsp lsp='(property) name?: string | undefined' >name</data-lsp>: 'Find a Coach',</div><div class='line'> <data-lsp lsp='(property) tags?: string[] | undefined' >tags</data-lsp>: ['Vue 3', 'Composition API'],</div><div class='line'> <data-lsp lsp='(property) feature?: string | undefined' >feature</data-lsp>: 'Vue3',</div><div class='line'> <data-lsp lsp='(property) description?: string | undefined' >description</data-lsp>:</div><div class='line'> '既然如何， 问题的关键究竟为何？ 要想清楚，科学和人文谁更有意义，到底是一种怎么样的存在。 普列姆昌德曾经提到过，希望的灯一旦熄灭，生活刹那间变成了一片黑暗。这启发了我， 那么， 我认为， 总结的来说，',</div><div class='line'> <data-lsp lsp='(property) img?: string | undefined' >img</data-lsp>: 'https://uneorange.oss-cn-guangzhou.aliyuncs.com/202205251801454.avif',</div><div class='line'> <data-lsp lsp='(property) link?: string | undefined' >link</data-lsp>: 'https://seviche.cc'</div><div class='line'> }</div><div class='line'>]</div></code></div></pre><!-- HTML_TAG_END --><h3 id="组件"><a href="#组件">组件</a></h3><p>将 CSS 复制进去，并注入数据</p><ul><li>参考：<code>/src/lib/components/extra/friend.svelte</code></li><li>新建：<code>/src/lib/components/extra/project.svelte</code></li></ul><!-- HTML_TAG_START --><pre class="shiki material-default with-title" html="true" title="/src/lib/components/extra/friend.svelte"><div class='code-title'>/src/lib/components/extra/friend.svelte</div><div class="language-id">html</div><div class='code-container'><code><div class='line'><script lang="ts"></div><div class='line'> import type { Friend } from '$lib/config/friends'</div><div class='line'> import Footer from '$lib/components/footer.svelte'</div><div class='line'> export let item: unknown</div><div class='line'> let friend = item as unknown as Friend</div><div class='line'></script></div><div class='line'></div><div class='line'>{#if friend.id === 'footer'}</div><div class='line'><footer rounded="{true}" class="p-4 md:p-8" /></div><div class='line'>{:else if friend.html}</div><div class='line'><a id="{friend.id}" rel="{friend.rel}" href="{friend.link}" class="h-card u-url">{@html friend.html}</a></div><div class='line'>{:else}</div><div class='line'><a</div><div class='line'> id="{friend.id}"</div><div class='line'> rel="{friend.rel}"</div><div class='line'> href="{friend.link}"</div><div class='line'> class="card bg-base-100 shadow-xl hover:shadow-2xl transition-shadow h-card u-url"></div><div class='line'> <div class="absolute text-4xl font-bold opacity-5 rotate-6 leading-tight top-4">{friend.name ?? ''}{friend.title ?? ''}</div></div><div class='line'> <div class="card-body p-4"></div><div class='line'> <div class="flex items-center gap-4"></div><div class='line'> {#if friend.avatar}</div><div class='line'> <div class="avatar {friend.class?.avatar} shrink-0 w-16 mb-auto"></div><div class='line'> <img class="{friend.class?.img ?? 'rounded-xl'} u-photo" src="{friend.avatar}" alt="{friend.title}" /></div><div class='line'> </div></div><div class='line'> {:else}</div><div class='line'> <div class="avatar {friend.class?.avatar} placeholder mb-auto"></div><div class='line'> <div class="{friend.class?.img ?? 'bg-neutral-focus text-neutral-content shadow-inner rounded-xl'} w-16"></div><div class='line'> <span class="text-3xl">{(friend.name ?? friend.title).charAt(0)}</span></div><div class='line'> </div></div><div class='line'> </div></div><div class='line'> {/if}</div><div class='line'> <div class="card-title flex-col gap-0 flex-1 items-end"></div><div class='line'> <span class="text-right p-name">{friend.name ?? ''}</span></div><div class='line'> <span class="opacity-50 text-right">{friend.title}</span></div><div class='line'> </div></div><div class='line'> </div></div><div class='line'> {#if friend.descr}</div><div class='line'> <div class="prose opacity-70 p-note">{friend.descr}</div></div><div class='line'> {/if}</div><div class='line'> </div></div><div class='line'></a></div><div class='line'>{/if}</div></code></div></pre><!-- HTML_TAG_END --><p>根据具体的页面效果修改了 Demo 中的 CSS 样式</p><!-- HTML_TAG_START --><pre class="shiki material-default with-title" html="true" title="/src/lib/components/extra/project.svelte"><div class='code-title'>/src/lib/components/extra/project.svelte</div><div class="language-id">html</div><div class='code-container'><code><div class='line'><script lang="ts"></div><div class='line'> import type { Project } from '$lib/config/projects'</div><div class='line'> import Footer from '$lib/components/footer.svelte'</div><div class='line'> export let item: unknown</div><div class='line'> let project = item as unknown as Project</div><div class='line'> let tags = project.tags</div><div class='line'></script></div><div class='line'></div><div class='line'>{#if project.id === 'footer'}</div><div class='line'><footer rounded="{true}" class="max-w-4xl mx-auto p-4 md:p-8" /></div><div class='line'>{:else}</div><div class='line'><a</div><div class='line'> id="{project.id}"</div><div class='line'> href="{project.link}"</div><div class='line'> class="card mx-auto max-w-4xl bg-base-100 shadow-xl transition-shadow mb-7 h-card u-url hover:shadow-2xl"></div><div class='line'> <div class="absolute text-5xl font-bold opacity-5 rotate-6 leading-tight top-2 right-0">{project.feature}</div></div><div class='line'> <div class="card-body p-4"></div><div class='line'> <div class="flex flex-col md:flex-row items-start gap-4"></div><div class='line'> <div class="mb-auto max-w-full shrink-0 md:max-w-xs"></div><div class='line'> <img class="rounded-md" src="{project.img}" alt="{project.description}" /></div><div class='line'> </div></div><div class='line'> <div class="card-title flex-1 flex-col items-start gap-4"></div><div class='line'> <div></div><div class='line'> <h2 class="p-name text-left text-2xl mb-2">{project.name}</h2></div><div class='line'> <div class="mb-3 text-base font-normal"></div><div class='line'> {#each tags as tag}</div><div class='line'> <span class="btn btn-sm btn-ghost normal-case border-dotted border-base-content/20 border-2 my-1 mr-1">{tag}</span></div><div class='line'> {/each}</div><div class='line'> </div></div><div class='line'> </div></div><div class='line'> <p class="text-left text-base font-normal opacity-70">{@html project.description}</p></div><div class='line'> </div></div><div class='line'> </div></div><div class='line'> </div></div><div class='line'></a></div><div class='line'>{/if}</div></code></div></pre><!-- HTML_TAG_END --><h3 id="页面"><a href="#页面">页面</a></h3><ul><li>参考：<code>/urara/friends/index.svelte</code></li><li>新建：<code>/urara/projects/index.svelte</code></li></ul><!-- HTML_TAG_START --><pre class="shiki material-default with-title" html="true" title="/urara/friends/index.svelte"><div class='code-title'>/urara/friends/index.svelte</div><div class="language-id">html</div><div class='code-container'><code><div class='line'><script lang="ts"></div><div class='line'> // @ts-nocheck</div><div class='line'> import Masonry from 'svelte-bricks'</div><div class='line'> import { Friend, friends as allFriends } from '$lib/config/friends'</div><div class='line'> import Head from '$lib/components/head.svelte'</div><div class='line'> import FriendComponent from '$lib/components/extra/friend.svelte'</div><div class='line'></div><div class='line'> const rnd = Math.random()</div><div class='line'> const fy = (a: Friend[], r = 0, c = a.length) => {</div><div class='line'> while (c) (r = (rnd * c--) | 0), ([a[c], a[r]] = [a[r], a[c]])</div><div class='line'> return a</div><div class='line'> }</div><div class='line'> let items: { id: string }[] = [...fy(allFriends as { id: string }[]), { id: 'footer' }]</div><div class='line'> let width: number, height: number</div><div class='line'></script></div><div class='line'></div><div class='line'><head /></div><div class='line'></div><div class='line'><Masonry</div><div class='line'> {items}</div><div class='line'> minColWidth="{384}"</div><div class='line'> maxColWidth="{384}"</div><div class='line'> gap="{32}"</div><div class='line'> let:item</div><div class='line'> class="mx-4 sm:mx-8 md:my-4 lg:mx-16 lg:my-8 xl:mx-32 xl:my-16"</div><div class='line'> bind:width</div><div class='line'> bind:height></div><div class='line'> <FriendComponent {item} /></div><div class='line'></Masonry></div></code></div></pre><!-- HTML_TAG_END --><p><strong>Projects 页面</strong></p><p>因为我没有用到瀑布流布局，所以删掉了一些组件和 function</p><!-- HTML_TAG_START --><pre class="shiki material-default with-title" html="true" title="/urara/projects/index.svelte"><div class='code-title'>/urara/projects/index.svelte</div><div class="language-id">html</div><div class='code-container'><code><div class='line'><script lang="ts"></div><div class='line'> import { projects as allProjects } from '$lib/config/projects'</div><div class='line'> import Head from '$lib/components/head.svelte'</div><div class='line'> import ProjectComponent from '$lib/components/extra/projects.svelte'</div><div class='line'></div><div class='line'> let items: { id: string }[] = [...(allProjects as { id: string }[]), { id: 'footer' }]</div><div class='line'></script></div><div class='line'></div><div class='line'><head /></div><div class='line'></div><div class='line'>{#each items as item}</div><div class='line'><ProjectComponent {item} /></div><div class='line'>{/each}</div></code></div></pre><!-- HTML_TAG_END --><h3 id="响应式布局"><a href="#响应式布局">响应式布局</a></h3><p>参考 <a href="https://tailwindcss.com/docs/responsive-design" rel="nofollow noopener noreferrer external" target="_blank">Tailwind 的响应式设计指南</a> ，修改了卡片<code>flex</code> 的方向，以及图片的宽度，以适应小尺寸屏幕。</p><h2 id="5-测试"><a href="#5-测试">5. 测试</a></h2><p>其实有错误的话 <code>pnpm dev</code> 以及 <code>pnpm build</code> 的时候都会提醒，但我后面发现也可以用 <code>pnpm check</code> 来检查。过程中我好像没有遇到什么 Bug。</p><h2 id="6-pull-request-到-github"><a href="#6-pull-request-到-github">6. Pull request 到 Github</a></h2><p>先看了一下 Repo 作者写的 <a href="https://github.com/importantimport/urara/blob/main/.github/CONTRIBUTING.md" rel="nofollow noopener noreferrer external" target="_blank">contributing docs</a>，了解 Contribute 的规范。</p><p>按照相应步骤做了之后，Google 了一下如何 pull request，照着 FreeCodeCamp 的这篇进行了操作：<a href="https://chinese.freecodecamp.org/news/how-to-make-your-first-pull-request-on-github/" rel="nofollow noopener noreferrer external" target="_blank">如何在 GitHub 提交第一个 pull request</a> ，然后成功 Pull 了一个 Request，但后面发现有的文件没有改，造成了 bug，就删除了原 Request 重新 Pull。</p><p>最后终于创建成功了我的第一个 Pull request！链接：<a href="https://github.com/importantimport/urara/pull/19" rel="nofollow noopener noreferrer external" target="_blank">feat: ✨ add project page by Sevichecc · Pull Request #19 · importantimport/urara · GitHub</a></p><h2 id="7-last-but-not-least"><a href="#7-last-but-not-least">7. Last but not least</a></h2><p>写一篇这样的博文，并发表到互联网。</p><p><span class="spoiler">好啦我知道这篇文章有点臭屁，但下次还敢……</span></p>]]>
|
||
</content>
|
||
<category term="Svelte" scheme="https://seviche.cc/?tags=Svelte" />
|
||
<category term="Open Source" scheme="https://seviche.cc/?tags=Open%20Source" />
|
||
</entry>
|
||
<entry>
|
||
<title type="html"><![CDATA[Git · 常用操作笔记]]></title>
|
||
<link href="https://seviche.cc/2022-05-25-git" />
|
||
<id>https://seviche.cc/2022-05-25-git</id>
|
||
<published>2022-05-25T00:00:00.000Z</published>
|
||
<updated>2022-08-01T03:03:33.322Z</updated>
|
||
<summary type="html"><![CDATA[每次更新博客进行的操作以及常见错误处理]]></summary>
|
||
<content type="html">
|
||
<![CDATA[<p><strong>资料：</strong></p><ul><li><a href="https://education.github.com/git-cheat-sheet-education.pdf" rel="nofollow noopener noreferrer external" target="_blank">GIT CHEAT SHEET</a></li><li><a href="https://mp.weixin.qq.com/s/BzdgZXyM1UaNCUCXySL9Rw" rel="nofollow noopener noreferrer external" target="_blank">45 个 Git 经典操作场景，专治不会合代码</a></li><li><a href="https://missing-semester-cn.github.io/2020/version-control/" rel="nofollow noopener noreferrer external" target="_blank">版本控制(Git) - 计算机教育中缺失的一课</a></li><li><a href="http://cbx33.github.io/gitt/intro.html" rel="nofollow noopener noreferrer external" target="_blank">战壕里面的 Git（Git In The Trenches）</a></li></ul><h2 id="每次更新博客进行的操作"><a href="#每次更新博客进行的操作">每次更新博客进行的操作</a></h2><h3 id="1-追踪所有文件"><a href="#1-追踪所有文件">1. 追踪所有文件</a></h3><p>(除了 gitignore 里面的)，也可以单独加</p><p><code>git add -A</code></p><h3 id="2-提交上传信息"><a href="#2-提交上传信息">2. 提交上传信息</a></h3><p><code>git commit -m '一些信息，如fixed something etc'</code></p><h3 id="3-push-到-github"><a href="#3-push-到-github">3. push 到 Github</a></h3><p><code>git push origin main</code></p><p>等待一会儿就好了，如果不行，换个网或者关掉 VPN 看看</p><h2 id="常用-git-操作"><a href="#常用-git-操作">常用 Git 操作</a></h2><ul><li><code>.gitignore</code>: 放不想传到 git repo 的文件/文件夹</li><li>当内容改动很多的时候，最好开一个 branch</li><li>VSCode 文件后面的字母：<ul><li>U：untrack</li><li>M: modified</li><li>A : on track</li></ul></li><li>一般不在<code>main</code> 或<code>master</code> 修改代码，而是开一个 branch，确定好后再 merge</li><li>下载叫做 pull，上传是 push</li></ul><div class="overflow-x-auto mb-4"><table class="table w-full"><thead><tr><th align="left">命令</th><th>作用</th></tr></thead><tbody><tr><td align="left"><code>git config --global user.name 名字</code></td><td>设置名字</td></tr><tr><td align="left"><code>git config --global user.email 邮箱</code></td><td>设置邮件</td></tr><tr><td align="left"><code>git init</code></td><td>初始化</td></tr><tr><td align="left"><code>git add -A</code></td><td>追踪所有文件(除了 gitignore 里面的)，也可以单独加</td></tr><tr><td align="left"><code>git commit -m</code></td><td>m 代表信息，后面要写 commit 相关信息</td></tr><tr><td align="left"><code>git status</code></td><td>查看 git 状态/信息</td></tr><tr><td align="left"><code>git log</code></td><td>查看 commit 日志，按 Q 才可以退出</td></tr><tr><td align="left"><code>git reset hard (commit的id）</code></td><td>回到特定版本</td></tr><tr><td align="left"><code>git reset hard --HEAD</code></td><td>返回上一次改动 （还没有 commit)</td></tr><tr><td align="left"><code>git branch</code></td><td>列出现在有的 branch,按 Q 退出</td></tr><tr><td align="left"><code>git branch （branch'name)</code></td><td>创建新 branch</td></tr><tr><td align="left"><code>git merge （branch'name)</code></td><td>合并 branch 到 main</td></tr><tr><td align="left"><code>git checkout (branch's name)</code></td><td>切换 branch</td></tr><tr><td align="left"><code>git remote add origin https://github.com/用户名/仓库名.git</code></td><td>链接到 remote repo</td></tr><tr><td align="left"><code>git pull</code></td><td>拉更新</td></tr><tr><td align="left"><code>git push origin (branch'name)</code></td><td>push 到 remote repo</td></tr></tbody></table></div><h2 id="常见问题"><a href="#常见问题">常见问题</a></h2><p>下面是一些我看过的文章</p><h3 id="版本回滚"><a href="#版本回滚">版本回滚</a></h3><ul><li><a href="https://mp.weixin.qq.com/s/MCtCQg7rcokf6IrZVINF4w" rel="nofollow noopener noreferrer external" target="_blank">项目中 git 怎么回退到之前的版本 & git 放弃本地修改，强制拉取更新</a></li><li><a href="https://mp.weixin.qq.com/s/98wEvWU6OYVkPauWn-XXng" rel="nofollow noopener noreferrer external" target="_blank">Git 学习笔记：版本回退</a></li><li><a href="https://mp.weixin.qq.com/s/FPiSyeivTKhoAgJmORZFog" rel="nofollow noopener noreferrer external" target="_blank">如果你还不会用 git 回滚代码，那你一定要来看看</a></li></ul><h3 id="报错处理"><a href="#报错处理">报错处理</a></h3><ul><li><a href="https://blog.csdn.net/qq_39416311/article/details/102219428" rel="nofollow noopener noreferrer external" target="_blank">git push 错误 failed to push some refs to 解决方法</a></li><li><a href="https://blog.csdn.net/jiandan1127/article/details/81205530" rel="nofollow noopener noreferrer external" target="_blank">git 上传忽略 node_modules</a></li></ul><h3 id="博客相关"><a href="#博客相关">博客相关</a></h3><ul><li><a href="https://blog.csdn.net/qq_29232943/article/details/52786603" rel="nofollow noopener noreferrer external" target="_blank">GitHub Pages 绑定来自阿里云的域名</a></li><li><a href="https://www.cnblogs.com/LandWind/articles/8269636.html" rel="nofollow noopener noreferrer external" target="_blank">Hexo 发布到 Github 丢失 readme 和 CNAME 解决方案</a></li><li><a href="https://www.freesion.com/article/37111127345/" rel="nofollow noopener noreferrer external" target="_blank">把 HUGO 博客托管到 GITHUB 上</a></li></ul><h3 id="其他"><a href="#其他">其他</a></h3><ul><li><a href="https://www.cnblogs.com/chenmingjun/p/8555906.html" rel="nofollow noopener noreferrer external" target="_blank">Github 上如何添加 LICENSE 文件？</a></li></ul>]]>
|
||
</content>
|
||
<category term="Git" scheme="https://seviche.cc/?tags=Git" />
|
||
</entry>
|
||
<entry>
|
||
<title type="html"><![CDATA[Hypothesis 使用小记]]></title>
|
||
<link href="https://seviche.cc/2022-05-25-hypothesis" />
|
||
<id>https://seviche.cc/2022-05-25-hypothesis</id>
|
||
<published>2022-05-25T00:00:00.000Z</published>
|
||
<updated>2022-08-01T03:03:33.353Z</updated>
|
||
<summary type="html"><![CDATA[Hypothesis同步到Obsidian / Logseq的方法]]></summary>
|
||
<content type="html">
|
||
<{% endif %}</div><div class='line'>- Title: {{title}}</div><div class='line'>{% if url %}- Reference: {{url}}{% endif %}</div><div class='line'>- Category: #source/article🗞{% endif %}</div><div class='line'>- Tags:</div><div class='line'></div><div class='line'>{% if is_new_article -%}## Highlights{%- endif %}</div><div class='line'>{% for highlight in highlights -%}- {{highlight.text}}</div><div class='line'>{% if highlight.tags | length %} - Tags: {% for tag in highlight.tags -%}#{{tag| replace(" ", "-")}} {%- endfor %}{%- endif %}</div><div class='line'>{% if highlight.annotation %} - Annotation: {{highlight.annotation}}{%- endif -%}{%- endfor -%}</div></code></div></pre><!-- HTML_TAG_END --><p>效果：<img src="/2022-05-25-hypothesis/Snipaste_2022-05-25_22-03-03.png" alt="/2022-05-25-hypothesis/Snipaste_2022-05-25_22-03-03.png" class="rounded-lg my-2" loading="lazy" decoding="async"></p><h3 id="4-更新笔记"><a href="#4-更新笔记">4. 更新笔记</a></h3><p>点击右边这个标志就可以更新笔记了～也可以在设置里打开启动时自动抓取的设置<img src="/2022-05-25-hypothesis/Snipaste_2022-05-25_22-04-44.png" alt="/2022-05-25-hypothesis/Snipaste_2022-05-25_22-04-44.png" class="rounded-lg my-2" loading="lazy" decoding="async"></p><h2 id="订阅-hypothesis-的-rss"><a href="#订阅-hypothesis-的-rss">订阅 Hypothesis 的 RSS</a></h2><ul><li>文档：<a href="https://web.hypothes.is/help/atom-rss-feeds-for-annotations/" rel="nofollow noopener noreferrer external" target="_blank">Atom & RSS Feeds for Annotations</a></li><li>工具：<a href="https://diegodlh.github.io/hfeed/" rel="nofollow noopener noreferrer external" target="_blank">Subscribe to Hypothesis web annotations</a></li></ul><h2 id="其他参考"><a href="#其他参考">其他参考</a></h2><ul><li><a href="https://catcoding.me/p/obsidian-for-programmer/" rel="nofollow noopener noreferrer external" target="_blank">我的 Obsidian 使用经验 - 程序员的喵</a></li></ul>]]>
|
||
</content>
|
||
<category term="Logseq" scheme="https://seviche.cc/?tags=Logseq" />
|
||
<category term="Obsidian" scheme="https://seviche.cc/?tags=Obsidian" />
|
||
</entry>
|
||
<entry>
|
||
<title type="html"><![CDATA[SQL · 在 Windows 10 上安装 sqlite]]></title>
|
||
<link href="https://seviche.cc/2022-05-23-win-sql" />
|
||
<id>https://seviche.cc/2022-05-23-win-sql</id>
|
||
<published>2022-05-23T00:00:00.000Z</published>
|
||
<updated>2022-08-01T03:03:33.303Z</updated>
|
||
<summary type="html"><![CDATA[写给计算机小白的 sqlite 安装笔记]]></summary>
|
||
<content type="html">
|
||
<![CDATA[<p>参考： <a href="https://www.runoob.com/sqlite/sqlite-installation.html" rel="nofollow noopener noreferrer external" target="_blank">Site Unreachable</a></p><h2 id="1-下载二进制文件"><a href="#1-下载二进制文件">1. 下载二进制文件</a></h2><ul><li>请访问 <a href="http://www.sqlite.org/download.html" rel="nofollow noopener noreferrer external" target="_blank">SQLite 下载页面</a>，从 Windows 区下载预编译的二进制文件。</li><li>您需要下载 <strong>sqlite-tools-win32-*.zip</strong> 和 <strong>sqlite-dll-win32-*.zip</strong> 压缩文件。</li></ul><p><img src="/2022-05-23-win-sql/2.png" alt="/2022-05-23-win-sql/2.png" class="rounded-lg my-2" loading="lazy" decoding="async"></p><h2 id="2-创建安装文件夹"><a href="#2-创建安装文件夹">2. 创建安装文件夹</a></h2><ul><li>在 C 盘内创建文件夹 sqlite（在别的地方应该也可以？），并在此文件夹下解压上面两个压缩文件，将得到 sqlite3.def、sqlite3.dll 和 sqlite3.exe 文件。如：<img src="/2022-05-23-win-sql/DMirANRL4FYs8Xx.png" alt="/2022-05-23-win-sql/DMirANRL4FYs8Xx.png" class="rounded-lg my-2" loading="lazy" decoding="async"></li></ul><h2 id="3-添加环境变量"><a href="#3-添加环境变量">3. 添加环境变量</a></h2><p>参考：<a href="https://blog.csdn.net/gymaisyl/article/details/108073278" rel="nofollow noopener noreferrer external" target="_blank">sqlite 在 windows 下载安装，配置环境变量</a></p><p>首先，打开控制面板，如果找不到的话，直接搜索，例如：<img src="/2022-05-23-win-sql/Bl1JjI2A6HnfQVZ.png" alt="/2022-05-23-win-sql/Bl1JjI2A6HnfQVZ.png" class="rounded-lg my-2" loading="lazy" decoding="async"></p><p>然后点击<strong>系统与安全</strong>，再点击 <strong>系统</strong><img src="/2022-05-23-win-sql/q7RaUdAYHz2lpC3.png" alt="/2022-05-23-win-sql/q7RaUdAYHz2lpC3.png" class="rounded-lg my-2" loading="lazy" decoding="async"><img src="/2022-05-23-win-sql/V87O1wdLscPbvTC.png" alt="/2022-05-23-win-sql/V87O1wdLscPbvTC.png" class="rounded-lg my-2" loading="lazy" decoding="async"></p><p>在新窗口中点击<strong>高级系统设置</strong> -> <strong>环境变量</strong><img src="/2022-05-23-win-sql/HSD6iy9nUxCEkcQ.png" alt="/2022-05-23-win-sql/HSD6iy9nUxCEkcQ.png" class="rounded-lg my-2" loading="lazy" decoding="async"></p><p><img src="/2022-05-23-win-sql/SnJePah46I7CyGF.png" alt="/2022-05-23-win-sql/SnJePah46I7CyGF.png" class="rounded-lg my-2" loading="lazy" decoding="async"></p><p>如上图所示，在蓝色区域新建一个环境变量，此处填写一开始创建 sqlite 文件的路径，比如这里就是<code>C:\sqlite</code></p><h2 id="4-命令提示符中查看-sqlite3-版本"><a href="#4-命令提示符中查看-sqlite3-版本">4. 命令提示符中查看 sqlite3 版本</a></h2><p><strong>什么是命令提示符？</strong></p><blockquote><p>命令提示符是大多数 Windows <a href="https://zhcn.eyewated.com/%E6%93%8D%E4%BD%9C%E7%B3%BB%E7%BB%9F/" rel="nofollow noopener noreferrer external" target="_blank">操作系统中</a>可用的<a href="https://zhcn.eyewated.com/%E4%BB%80%E4%B9%88%E6%98%AF%E5%91%BD%E4%BB%A4%E8%A1%8C%E8%A7%A3%E9%87%8A%E5%99%A8%EF%BC%9F/" rel="nofollow noopener noreferrer external" target="_blank">命令行解释器</a>应用程序。</p><p>命令提示符用于执行输入的<a href="https://zhcn.eyewated.com/%E4%BB%80%E4%B9%88%E6%98%AF%E8%AE%A1%E7%AE%97%E6%9C%BA%E5%91%BD%E4%BB%A4%EF%BC%9F/" rel="nofollow noopener noreferrer external" target="_blank">命令</a> 。 大多数这些命令用于通过脚本和<a href="https://zhcn.eyewated.com/%E4%BB%80%E4%B9%88%E6%98%AFbat%E6%96%87%E4%BB%B6%EF%BC%9F/" rel="nofollow noopener noreferrer external" target="_blank">批处理文件</a>自动执行任务，执行高级管理功能以及排除和解决某些类型的 Windows 问题。</p><p>命令提示符被正式称为<em>Windows 命令处理器，</em>但有时也被称为<em>命令外壳程序</em>或<em>cmd 提示符</em> ，甚至称其为文件名<em>cmd.exe</em> 。——<a href="https://zhcn.eyewated.com/%E5%91%BD%E4%BB%A4%E6%8F%90%E7%A4%BA%E7%AC%A6%EF%BC%9A%E5%AE%83%E6%98%AF%E4%BB%80%E4%B9%88%E4%BB%A5%E5%8F%8A%E5%A6%82%E4%BD%95%E4%BD%BF%E7%94%A8%E5%AE%83/" rel="nofollow noopener noreferrer external" target="_blank">命令提示符（它是什么以及如何使用它）</a></p></blockquote><p>我的理解就是用代码的方式操作电脑系统</p><p><strong>如何打开命令提示符：</strong><img src="/2022-05-23-win-sql/oL7n6rta35UAODl.png" alt="/2022-05-23-win-sql/oL7n6rta35UAODl.png" class="rounded-lg my-2" loading="lazy" decoding="async"></p><p>打开后输入<code>sqlite3</code> ，出现下面的文字就是安装成功了<img src="/2022-05-23-win-sql/qNgBIvzLQJX126b.png" alt="/2022-05-23-win-sql/qNgBIvzLQJX126b.png" class="rounded-lg my-2" loading="lazy" decoding="async"></p><h2 id="常用命令行"><a href="#常用命令行">常用命令行</a></h2><ul><li>需要在文件夹里运行</li><li><code>cd</code> 的时候按 tab 可以自动填充文件名 （VS Code 里面按 command）</li></ul><div class="overflow-x-auto mb-4"><table class="table w-full"><thead><tr><th>命令</th><th>功能</th></tr></thead><tbody><tr><td><code>ls</code>(win 用 <code>dir</code>)</td><td>展示当前文件夹文件</td></tr><tr><td><code>cd</code></td><td>改变当前文件夹（change directory) 按 tab 可以自动填充</td></tr><tr><td><code>cd..</code></td><td>去到上个层级的文件夹</td></tr><tr><td><code>clear</code></td><td>清除命令行记录</td></tr><tr><td><code>mkdir</code></td><td>创建新文件夹(make directory)</td></tr><tr><td><code>touch</code>(win 用 <code>edit</code>)</td><td>创建新文件（可以一次性创建多个）</td></tr><tr><td><code>mv</code></td><td>移动文件，第一个参数是要移动的文件，第二个是目的地，如 <code>mv index.html ../</code> 为移动到上一层级</td></tr><tr><td><code>rmdir</code></td><td>删除空文件夹(remove directory)</td></tr><tr><td><code>rm -R</code></td><td>删除文件夹(R-recursively)</td></tr><tr><td><code>pwd</code></td><td>当前所在位置</td></tr><tr><td><code>rm</code>(win 用 <code>del</code>)</td><td>删除文件</td></tr></tbody></table></div>]]>
|
||
</content>
|
||
<category term="SQL" scheme="https://seviche.cc/?tags=SQL" />
|
||
</entry>
|
||
<entry>
|
||
<title type="html"><![CDATA[JavaScript · 数组中的copyWithin方法]]></title>
|
||
<link href="https://seviche.cc/2022-05-09-copywithin" />
|
||
<id>https://seviche.cc/2022-05-09-copywithin</id>
|
||
<published>2022-05-08T17:13:47.671Z</published>
|
||
<updated>2022-08-01T03:03:33.294Z</updated>
|
||
<summary type="html"><![CDATA[一种数组内元素复制的方法]]></summary>
|
||
<content type="html">
|
||
<![CDATA[<blockquote><p><code>copyWithin()</code> 方法浅复制数组的一部分到同一数组中的另一个位置，并返回它，不会改变原数组的长度</p><p>—— MDN</p></blockquote><h2 id="简介"><a href="#简介">简介</a></h2><p>以下部分内容来自 <a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/copyWithin" rel="nofollow noopener noreferrer external" target="_blank">MDN</a></p><h3 id="语法"><a href="#语法">语法：</a></h3><!-- HTML_TAG_START --><pre class="shiki material-default" js="true"><div class="language-id">js</div><div class='code-container'><code><div class='line'> arr.copyWithin(target[, start[, end]])</div></code></div></pre><!-- HTML_TAG_END --><h2 id="参数"><a href="#参数">参数</a></h2><h3 id="target"><a href="#target">target</a></h3><p>0 为基底的索引，复制序列到该位置。</p><p>如果是负数，<code>target</code> 将从末尾开始计算。如果 <code>target</code> 大于等于 <code>arr.length</code>，将会不发生拷贝。如果 <code>target</code> 在 <code>start</code> 之后，复制的序列将被修改以符合 <code>arr.length</code>。</p><h3 id="start"><a href="#start">start</a></h3><p>0 为基底的索引，开始复制元素的起始位置。</p><p>如果是负数，<code>start</code> 将从末尾开始计算。如果 <code>start</code> 被忽略，<code>copyWithin</code> 将会从 0 开始复制。</p><h3 id="end"><a href="#end">end</a></h3><p>0 为基底的索引，开始复制元素的结束位置。</p><p><code>copyWithin</code> 将<strong>会拷贝到该位置，但不包括 <code>end</code> 这个位置的元素</strong>。</p><p>如果是负数， <code>end</code> 将从末尾开始计算。如果 <code>end</code> 被忽略，<code>copyWithin</code> 方法将会一直复制至数组结尾（默认为 <code>arr.length</code>）。</p><h2 id="例子"><a href="#例子">例子</a></h2><h3 id="源码"><a href="#源码">源码</a></h3><!-- HTML_TAG_START --><pre class="shiki material-default" js="true"><div class="language-id">js</div><div class='code-container'><code><div class='line'>const array1 = ['a', 'b', 'c', 'd', 'e']</div><div class='line'></div><div class='line'>// copy to index 0 the element at index 3</div><div class='line'>console.log(array1.copyWithin(0, 3, 4))</div><div class='line'>// expected output: Array ["d", "b", "c", "d", "e"]</div><div class='line'></div><div class='line'>// copy to index 1 all elements from index 3 to the end</div><div class='line'>console.log(array1.copyWithin(1, 3))</div><div class='line'>// expected output: Array ["d", "d", "e", "d", "e"]</div></code></div></pre><!-- HTML_TAG_END --><h3 id="可视化"><a href="#可视化">可视化</a></h3><svg width="511" height="544" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M57.693 31.748v-9.791c0-.75-.152-1.4-.457-1.951a2.991 2.991 0 00-1.336-1.3c-.597-.306-1.335-.458-2.215-.458-.82 0-1.54.14-2.162.422-.609.281-1.09.65-1.441 1.107-.34.457-.51.95-.51 1.477H46.32c0-.68.176-1.354.528-2.022.351-.668.855-1.271 1.511-1.81.668-.55 1.465-.985 2.391-1.3.938-.329 1.98-.493 3.129-.493 1.383 0 2.602.234 3.656.703 1.067.469 1.899 1.178 2.496 2.127.61.938.914 2.115.914 3.533v8.86c0 .632.053 1.306.158 2.021.118.715.288 1.33.51 1.846V35h-3.392c-.164-.375-.293-.873-.387-1.494a12.045 12.045 0 01-.14-1.758zm.563-8.28l.035 2.286h-3.287c-.926 0-1.752.076-2.479.228-.726.141-1.335.358-1.828.65a3.092 3.092 0 00-1.125 1.108c-.258.434-.387.944-.387 1.53 0 .597.135 1.142.405 1.634s.674.885 1.213 1.178c.55.281 1.224.422 2.021.422.996 0 1.875-.211 2.637-.633.762-.422 1.365-.937 1.81-1.547.457-.61.704-1.201.739-1.775l1.388 1.564c-.082.492-.304 1.037-.668 1.635-.363.598-.85 1.172-1.458 1.723-.598.539-1.313.99-2.145 1.353-.82.352-1.746.528-2.777.528-1.29 0-2.42-.252-3.393-.756-.96-.504-1.71-1.178-2.25-2.022-.527-.855-.791-1.81-.791-2.865 0-1.02.2-1.916.598-2.69a5.192 5.192 0 011.722-1.95c.75-.528 1.653-.926 2.707-1.196 1.055-.27 2.233-.404 3.534-.404h3.779zm11.056-4.5V35h-3.251V15.98h3.164l.088 2.989zm5.942-3.093l-.018 3.023a4.693 4.693 0 00-.773-.105 8.2 8.2 0 00-.809-.035c-.75 0-1.412.117-1.986.351a4.116 4.116 0 00-1.459.985 4.732 4.732 0 00-.95 1.511 7.262 7.262 0 00-.439 1.899l-.914.527c0-1.148.112-2.226.334-3.234.235-1.008.592-1.899 1.073-2.672.48-.785 1.09-1.395 1.828-1.828.75-.445 1.64-.668 2.671-.668.235 0 .504.03.81.088.304.047.515.1.632.158zm6.258 3.094V35H78.26V15.98h3.164l.088 2.989zm5.941-3.094l-.017 3.023a4.693 4.693 0 00-.774-.105 8.2 8.2 0 00-.809-.035c-.75 0-1.412.117-1.986.351a4.116 4.116 0 00-1.459.985 4.735 4.735 0 00-.949 1.511 7.262 7.262 0 00-.44 1.899l-.913.527c0-1.148.11-2.226.334-3.234.234-1.008.591-1.899 1.072-2.672.48-.785 1.09-1.395 1.828-1.828.75-.445 1.64-.668 2.672-.668.234 0 .504.03.808.088.305.047.516.1.633.158zm13.518 15.873v-9.791c0-.75-.153-1.4-.457-1.951a2.992 2.992 0 00-1.336-1.3c-.598-.306-1.336-.458-2.215-.458-.82 0-1.541.14-2.162.422-.61.281-1.09.65-1.442 1.107-.34.457-.51.95-.51 1.477h-3.251c0-.68.175-1.354.527-2.022.352-.668.856-1.271 1.512-1.81.668-.55 1.465-.985 2.39-1.3.938-.329 1.98-.493 3.13-.493 1.382 0 2.6.234 3.655.703 1.067.469 1.899 1.178 2.497 2.127.609.938.914 2.115.914 3.533v8.86c0 .632.052 1.306.158 2.021.117.715.287 1.33.51 1.846V35h-3.393c-.164-.375-.293-.873-.387-1.494a12.152 12.152 0 01-.14-1.758zm.562-8.28l.035 2.286h-3.287c-.925 0-1.752.076-2.478.228-.727.141-1.336.358-1.828.65a3.092 3.092 0 00-1.125 1.108c-.258.434-.387.944-.387 1.53 0 .597.135 1.142.404 1.634.27.492.674.885 1.213 1.178.55.281 1.225.422 2.022.422.996 0 1.875-.211 2.636-.633.762-.422 1.366-.937 1.811-1.547.457-.61.703-1.201.738-1.775l1.389 1.564c-.082.492-.305 1.037-.668 1.635-.363.598-.85 1.172-1.459 1.723-.598.539-1.313.99-2.145 1.353-.82.352-1.746.528-2.777.528-1.29 0-2.42-.252-3.393-.756-.96-.504-1.71-1.178-2.25-2.022-.527-.855-.79-1.81-.79-2.865 0-1.02.199-1.916.597-2.69a5.193 5.193 0 011.723-1.95c.75-.528 1.652-.926 2.707-1.196 1.054-.27 2.232-.404 3.533-.404h3.779zm12.867 9.563l5.291-17.05h3.481l-7.629 21.954c-.176.47-.41.973-.703 1.512a7.242 7.242 0 01-1.09 1.565c-.445.492-.984.89-1.617 1.195-.621.316-1.365.475-2.233.475-.257 0-.586-.035-.984-.106a9.578 9.578 0 01-.844-.176l-.017-2.636c.093.011.24.023.439.035.211.023.358.035.44.035.738 0 1.365-.1 1.88-.299.516-.187.95-.51 1.301-.967.364-.445.674-1.06.932-1.845l1.353-3.692zm-3.884-17.05l4.939 14.765.844 3.428-2.338 1.195-6.996-19.389h3.551zm25.927-6.715V35h-3.252V13.326l-6.556 2.39v-2.935l9.299-3.515h.509zm33.698 8.595v2.83H155.48v-2.83h14.661zm0 7.295v2.83H155.48v-2.83h14.661zM190.689 5.75v2.672h-3.357v29.39h3.357v2.672h-6.609V5.75h6.609zM195.523 8v1.934l-.369 6.468h-2.267l.017-6.17V8h2.619zm14.643 23.748v-9.791c0-.75-.152-1.4-.457-1.951a2.99 2.99 0 00-1.336-1.3c-.598-.306-1.336-.458-2.215-.458-.82 0-1.541.14-2.162.422-.609.281-1.09.65-1.441 1.107-.34.457-.51.95-.51 1.477h-3.252c0-.68.176-1.354.527-2.022.352-.668.856-1.271 1.512-1.81.668-.55 1.465-.985 2.391-1.3.937-.329 1.98-.493 3.129-.493 1.382 0 2.601.234 3.656.703 1.066.469 1.898 1.178 2.496 2.127.609.938.914 2.115.914 3.533v8.86c0 .632.053 1.306.158 2.021.117.715.287 1.33.51 1.846V35h-3.393c-.164-.375-.293-.873-.386-1.494a12.02 12.02 0 01-.141-1.758zm.563-8.28l.035 2.286h-3.287c-.926 0-1.752.076-2.479.228-.727.141-1.336.358-1.828.65a3.095 3.095 0 00-1.125 1.108c-.258.434-.387.944-.387 1.53 0 .597.135 1.142.404 1.634.27.492.674.885 1.213 1.178.551.281 1.225.422 2.022.422.996 0 1.875-.211 2.637-.633.761-.422 1.365-.937 1.81-1.547.457-.61.703-1.201.738-1.775l1.389 1.564c-.082.492-.305 1.037-.668 1.635-.363.598-.849 1.172-1.459 1.723-.598.539-1.312.99-2.144 1.353-.821.352-1.746.528-2.778.528-1.289 0-2.42-.252-3.392-.756-.961-.504-1.711-1.178-2.25-2.022-.528-.855-.791-1.81-.791-2.865 0-1.02.199-1.916.597-2.69a5.198 5.198 0 011.723-1.95c.75-.528 1.652-.926 2.707-1.196 1.055-.27 2.232-.404 3.533-.404h3.78zM219.324 8v1.934l-.369 6.468h-2.267l.017-6.17V8h2.619zm7.26 23.133v2.619c0 1.066-.27 2.191-.809 3.375a8.114 8.114 0 01-2.267 2.988l-1.846-1.283c.375-.516.692-1.043.949-1.582a7.473 7.473 0 00.58-1.652c.141-.563.211-1.16.211-1.793v-2.672h3.182zM241.648 8v1.934l-.369 6.468h-2.267l.017-6.17V8h2.619zm4.29 0h3.269v23.309L248.926 35h-2.988V8zm16.119 17.332v.37c0 1.382-.164 2.665-.493 3.849-.328 1.172-.808 2.191-1.441 3.058a6.717 6.717 0 01-2.32 2.022c-.914.48-1.963.72-3.147.72-1.207 0-2.267-.204-3.181-.615a6.258 6.258 0 01-2.286-1.81c-.621-.785-1.119-1.735-1.494-2.848-.363-1.113-.615-2.367-.756-3.762V24.7c.141-1.406.393-2.666.756-3.78.375-1.112.873-2.062 1.494-2.847a6.025 6.025 0 012.286-1.81c.902-.422 1.951-.633 3.146-.633 1.195 0 2.256.234 3.182.703a6.252 6.252 0 012.32 1.969c.633.855 1.113 1.88 1.441 3.076.329 1.184.493 2.502.493 3.955zm-3.27.37v-.37c0-.95-.088-1.84-.264-2.672-.175-.844-.457-1.582-.843-2.215a4.205 4.205 0 00-1.53-1.511c-.632-.375-1.412-.563-2.338-.563-.82 0-1.535.14-2.144.422a4.633 4.633 0 00-1.529 1.143 6.049 6.049 0 00-1.037 1.617 9.289 9.289 0 00-.581 1.863v4.236a9.05 9.05 0 00.915 2.373 5.519 5.519 0 001.722 1.846c.727.48 1.623.72 2.69.72.879 0 1.629-.175 2.25-.526a4.254 4.254 0 001.529-1.495c.398-.633.691-1.365.879-2.197.187-.832.281-1.723.281-2.672zM267.629 8v1.934l-.369 6.468h-2.268l.018-6.17V8h2.619zm7.26 23.133v2.619c0 1.066-.27 2.191-.809 3.375a8.106 8.106 0 01-2.268 2.988l-1.845-1.283a10.11 10.11 0 00.949-1.582 7.473 7.473 0 00.58-1.652c.141-.563.211-1.16.211-1.793v-2.672h3.182zM289.953 8v1.934l-.369 6.468h-2.268l.018-6.17V8h2.619zm10.863 24.68c.774 0 1.489-.158 2.145-.475a4.42 4.42 0 001.617-1.3 3.625 3.625 0 00.721-1.917h3.094c-.059 1.125-.44 2.174-1.143 3.147-.691.96-1.6 1.74-2.725 2.338-1.125.586-2.361.879-3.709.879-1.429 0-2.677-.252-3.744-.756a7.423 7.423 0 01-2.636-2.074 9.265 9.265 0 01-1.565-3.024 12.753 12.753 0 01-.51-3.639v-.738c0-1.277.17-2.484.51-3.621.352-1.148.873-2.162 1.565-3.041a7.423 7.423 0 012.636-2.074c1.067-.504 2.315-.756 3.744-.756 1.489 0 2.789.305 3.903.914 1.113.598 1.986 1.418 2.619 2.46.644 1.032.996 2.204 1.055 3.517h-3.094a4.686 4.686 0 00-.668-2.127 4.167 4.167 0 00-1.547-1.512c-.645-.387-1.4-.58-2.268-.58-.996 0-1.834.199-2.513.597a4.41 4.41 0 00-1.6 1.582 7.383 7.383 0 00-.844 2.198 12.09 12.09 0 00-.246 2.443v.738c0 .832.082 1.653.246 2.461a7.05 7.05 0 00.827 2.198 4.59 4.59 0 001.599 1.582c.68.386 1.524.58 2.531.58zM313.824 8v1.934l-.369 6.468h-2.267l.017-6.17V8h2.619zm7.26 23.133v2.619c0 1.066-.27 2.191-.809 3.375a8.114 8.114 0 01-2.267 2.988l-1.846-1.283c.375-.516.692-1.043.949-1.582a7.473 7.473 0 00.58-1.652c.141-.563.211-1.16.211-1.793v-2.672h3.182zM336.148 8v1.934l-.369 6.468h-2.267l.017-6.17V8h2.619zm15.241 23.309V8h3.269v27h-2.988l-.281-3.691zM338.592 25.7v-.369c0-1.453.176-2.771.527-3.955.363-1.195.873-2.22 1.529-3.076a6.92 6.92 0 012.373-1.969c.926-.469 1.958-.703 3.094-.703 1.196 0 2.239.21 3.129.633a6.021 6.021 0 012.285 1.81c.633.785 1.131 1.735 1.494 2.848.364 1.113.616 2.373.756 3.78v1.616c-.129 1.395-.381 2.649-.756 3.762-.363 1.113-.861 2.063-1.494 2.848a6.255 6.255 0 01-2.285 1.81c-.902.41-1.957.616-3.164.616-1.113 0-2.133-.24-3.059-.721a7.22 7.22 0 01-2.373-2.022c-.656-.867-1.166-1.886-1.529-3.058-.351-1.184-.527-2.467-.527-3.85zm3.269-.369v.37c0 .948.094 1.839.282 2.671.199.832.503 1.564.914 2.197.41.633.931 1.131 1.564 1.495.633.351 1.389.527 2.268.527 1.078 0 1.963-.229 2.654-.686a5.103 5.103 0 001.687-1.81c.422-.75.75-1.565.985-2.444v-4.236a9.447 9.447 0 00-.615-1.863 5.742 5.742 0 00-1.02-1.617c-.41-.48-.92-.862-1.529-1.143-.598-.281-1.307-.422-2.127-.422-.891 0-1.658.188-2.303.563a4.482 4.482 0 00-1.564 1.511c-.411.633-.715 1.371-.914 2.215a12.103 12.103 0 00-.282 2.672zM361.707 8v1.934l-.369 6.468h-2.268l.018-6.17V8h2.619zm7.26 23.133v2.619c0 1.066-.27 2.191-.809 3.375a8.114 8.114 0 01-2.267 2.988l-1.846-1.283a10.11 10.11 0 00.949-1.582 7.473 7.473 0 00.58-1.652c.141-.563.211-1.16.211-1.793v-2.672h3.182zM384.031 8v1.934l-.369 6.468h-2.267l.017-6.17V8h2.619zm11.145 27.352c-1.324 0-2.526-.223-3.604-.668a8.18 8.18 0 01-2.76-1.916c-.761-.82-1.347-1.793-1.757-2.918-.41-1.125-.616-2.356-.616-3.692v-.738c0-1.547.229-2.924.686-4.13.457-1.22 1.078-2.25 1.863-3.095a7.982 7.982 0 012.672-1.916 7.677 7.677 0 013.094-.65c1.359 0 2.531.234 3.516.703a6.41 6.41 0 012.443 1.969c.633.832 1.101 1.816 1.406 2.953.305 1.125.457 2.355.457 3.691v1.46h-14.203V23.75h10.951v-.246a8.104 8.104 0 00-.527-2.461 4.428 4.428 0 00-1.406-1.969c-.645-.515-1.524-.773-2.637-.773-.738 0-1.418.158-2.039.474-.621.305-1.154.762-1.6 1.372-.445.609-.791 1.353-1.037 2.232-.246.879-.369 1.892-.369 3.04v.74c0 .902.123 1.751.369 2.548a6.517 6.517 0 001.108 2.074 5.31 5.31 0 001.775 1.407c.703.34 1.5.51 2.391.51 1.148 0 2.121-.235 2.918-.704a7.225 7.225 0 002.091-1.88l1.969 1.564a9.118 9.118 0 01-1.564 1.775c-.633.563-1.412 1.02-2.338 1.371-.914.352-1.998.528-3.252.528zM408.113 8v1.934l-.369 6.468h-2.267l.017-6.17V8h2.619zm2.004.422V5.75h6.645v34.734h-6.645v-2.672h3.375V8.422h-3.375zM54.693 366.748v-9.791c0-.75-.152-1.4-.457-1.951a2.99 2.99 0 00-1.336-1.301c-.597-.305-1.335-.457-2.215-.457-.82 0-1.54.141-2.162.422-.609.281-1.09.65-1.441 1.107-.34.457-.51.95-.51 1.477H43.32c0-.68.176-1.354.528-2.022.351-.668.855-1.271 1.511-1.81.668-.551 1.465-.984 2.391-1.301.938-.328 1.98-.492 3.129-.492 1.383 0 2.602.234 3.656.703 1.067.469 1.899 1.178 2.496 2.127.61.937.914 2.115.914 3.533v8.86c0 .632.053 1.306.158 2.021.118.715.288 1.33.51 1.846V370h-3.392c-.164-.375-.293-.873-.387-1.494a12.048 12.048 0 01-.14-1.758zm.563-8.279l.035 2.285h-3.287c-.926 0-1.752.076-2.479.228-.726.141-1.335.358-1.828.651-.492.293-.867.662-1.125 1.107-.258.434-.387.944-.387 1.53 0 .597.135 1.142.405 1.634s.674.885 1.213 1.178c.55.281 1.224.422 2.021.422.996 0 1.875-.211 2.637-.633.762-.422 1.365-.937 1.81-1.547.457-.609.704-1.201.739-1.775l1.388 1.564c-.082.492-.304 1.037-.668 1.635-.363.598-.85 1.172-1.458 1.723-.598.539-1.313.99-2.145 1.353-.82.352-1.746.528-2.777.528-1.29 0-2.42-.252-3.393-.756-.96-.504-1.71-1.178-2.25-2.022-.527-.855-.791-1.81-.791-2.865 0-1.02.2-1.916.598-2.689a5.19 5.19 0 011.722-1.952c.75-.527 1.653-.925 2.707-1.195 1.055-.269 2.233-.404 3.534-.404h3.779zm11.056-4.5V370H63.06v-19.02h3.165l.088 2.989zm5.942-3.094l-.018 3.023a4.79 4.79 0 00-.773-.105 8.363 8.363 0 00-.809-.035c-.75 0-1.412.117-1.986.351a4.123 4.123 0 00-1.459.985 4.742 4.742 0 00-.95 1.511 7.269 7.269 0 00-.439 1.899l-.914.527c0-1.148.112-2.226.334-3.234.235-1.008.592-1.899 1.073-2.672.48-.785 1.09-1.395 1.828-1.828.75-.445 1.64-.668 2.671-.668.235 0 .504.029.81.088.304.047.515.099.632.158zm6.258 3.094V370H75.26v-19.02h3.164l.088 2.989zm5.941-3.094l-.017 3.023a4.79 4.79 0 00-.774-.105 8.363 8.363 0 00-.809-.035c-.75 0-1.412.117-1.986.351a4.123 4.123 0 00-1.459.985 4.745 4.745 0 00-.949 1.511 7.269 7.269 0 00-.44 1.899l-.913.527c0-1.148.11-2.226.334-3.234.234-1.008.591-1.899 1.072-2.672.48-.785 1.09-1.395 1.828-1.828.75-.445 1.64-.668 2.672-.668.234 0 .504.029.808.088.305.047.516.099.633.158zm13.518 15.873v-9.791c0-.75-.153-1.4-.457-1.951a2.99 2.99 0 00-1.336-1.301c-.598-.305-1.336-.457-2.215-.457-.82 0-1.541.141-2.162.422-.61.281-1.09.65-1.442 1.107-.34.457-.51.95-.51 1.477h-3.251c0-.68.175-1.354.527-2.022.352-.668.856-1.271 1.512-1.81.668-.551 1.465-.984 2.39-1.301.938-.328 1.98-.492 3.13-.492 1.382 0 2.6.234 3.656.703 1.066.469 1.898 1.178 2.496 2.127.609.937.914 2.115.914 3.533v8.86c0 .632.052 1.306.158 2.021.117.715.287 1.33.51 1.846V370h-3.393c-.164-.375-.293-.873-.387-1.494a12.062 12.062 0 01-.14-1.758zm.562-8.279l.035 2.285h-3.287c-.925 0-1.752.076-2.478.228-.727.141-1.336.358-1.828.651-.493.293-.868.662-1.125 1.107-.258.434-.387.944-.387 1.53 0 .597.135 1.142.404 1.634.27.492.674.885 1.213 1.178.55.281 1.225.422 2.022.422.996 0 1.875-.211 2.636-.633.762-.422 1.365-.937 1.81-1.547.458-.609.704-1.201.74-1.775l1.388 1.564c-.082.492-.305 1.037-.668 1.635-.364.598-.85 1.172-1.46 1.723-.597.539-1.312.99-2.144 1.353-.82.352-1.746.528-2.777.528-1.29 0-2.42-.252-3.393-.756-.96-.504-1.71-1.178-2.25-2.022-.527-.855-.79-1.81-.79-2.865 0-1.02.199-1.916.597-2.689a5.192 5.192 0 011.723-1.952c.75-.527 1.652-.925 2.707-1.195 1.054-.269 2.232-.404 3.533-.404h3.78zm12.867 9.562l5.291-17.051h3.481l-7.629 21.956c-.176.468-.41.972-.703 1.511a7.234 7.234 0 01-1.09 1.565c-.445.492-.984.89-1.617 1.195-.621.316-1.365.475-2.233.475-.257 0-.586-.036-.984-.106a9.41 9.41 0 01-.844-.176l-.017-2.636c.093.011.24.023.439.035.211.023.358.035.44.035.738 0 1.365-.1 1.88-.299.516-.187.95-.51 1.301-.967.364-.445.674-1.06.932-1.845l1.353-3.692zm-3.884-17.051l4.939 14.766.844 3.428-2.338 1.195-6.996-19.389h3.551zm25.927-6.714V370h-3.252v-21.674l-6.556 2.391v-2.936l9.299-3.515h.509zm33.698 8.595v2.83H152.48v-2.83h14.661zm0 7.295v2.83H152.48v-2.83h14.661zm20.548-19.406v2.672h-3.357v29.39h3.357v2.672h-6.609V340.75h6.609zm4.834 2.25v1.934l-.369 6.468h-2.267l.017-6.17V343h2.619zm14.643 23.748v-9.791c0-.75-.152-1.4-.457-1.951a2.99 2.99 0 00-1.336-1.301c-.598-.305-1.336-.457-2.215-.457-.82 0-1.541.141-2.162.422-.609.281-1.09.65-1.441 1.107-.34.457-.51.95-.51 1.477h-3.252c0-.68.176-1.354.527-2.022.352-.668.856-1.271 1.512-1.81.668-.551 1.465-.984 2.391-1.301.937-.328 1.98-.492 3.129-.492 1.382 0 2.601.234 3.656.703 1.066.469 1.898 1.178 2.496 2.127.609.937.914 2.115.914 3.533v8.86c0 .632.053 1.306.158 2.021.117.715.287 1.33.51 1.846V370h-3.393c-.164-.375-.293-.873-.386-1.494a12.024 12.024 0 01-.141-1.758zm.563-8.279l.035 2.285h-3.287c-.926 0-1.752.076-2.479.228-.727.141-1.336.358-1.828.651a3.096 3.096 0 00-1.125 1.107c-.258.434-.387.944-.387 1.53 0 .597.135 1.142.404 1.634.27.492.674.885 1.213 1.178.551.281 1.225.422 2.022.422.996 0 1.875-.211 2.637-.633.761-.422 1.365-.937 1.81-1.547.457-.609.703-1.201.738-1.775l1.389 1.564c-.082.492-.305 1.037-.668 1.635-.363.598-.849 1.172-1.459 1.723a7.871 7.871 0 01-2.144 1.353c-.821.352-1.746.528-2.778.528-1.289 0-2.42-.252-3.392-.756-.961-.504-1.711-1.178-2.25-2.022-.528-.855-.791-1.81-.791-2.865 0-1.02.199-1.916.597-2.689a5.197 5.197 0 011.723-1.952c.75-.527 1.652-.925 2.707-1.195 1.055-.269 2.232-.404 3.533-.404h3.78zM216.324 343v1.934l-.369 6.468h-2.267l.017-6.17V343h2.619zm7.26 23.133v2.619c0 1.066-.27 2.191-.809 3.375a8.117 8.117 0 01-2.267 2.988l-1.846-1.283c.375-.516.692-1.043.949-1.582a7.469 7.469 0 00.58-1.652c.141-.563.211-1.16.211-1.793v-2.672h3.182zM238.648 343v1.934l-.369 6.468h-2.267l.017-6.17V343h2.619zm4.29 0h3.269v23.309l-.281 3.691h-2.988v-27zm16.119 17.332v.369c0 1.383-.164 2.666-.493 3.85-.328 1.172-.808 2.191-1.441 3.058a6.716 6.716 0 01-2.32 2.022c-.914.48-1.963.721-3.147.721-1.207 0-2.267-.206-3.181-.616a6.26 6.26 0 01-2.286-1.81c-.621-.785-1.119-1.735-1.494-2.848-.363-1.113-.615-2.367-.756-3.762v-1.617c.141-1.406.393-2.666.756-3.779.375-1.113.873-2.063 1.494-2.848a6.02 6.02 0 012.286-1.81c.902-.422 1.951-.633 3.146-.633 1.195 0 2.256.234 3.182.703a6.247 6.247 0 012.32 1.969c.633.855 1.113 1.881 1.441 3.076.329 1.184.493 2.502.493 3.955zm-3.27.369v-.369a12.9 12.9 0 00-.264-2.672c-.175-.844-.457-1.582-.843-2.215a4.204 4.204 0 00-1.53-1.511c-.632-.375-1.412-.563-2.338-.563-.82 0-1.535.141-2.144.422a4.624 4.624 0 00-1.529 1.143 6.024 6.024 0 00-1.037 1.617 9.262 9.262 0 00-.581 1.863v4.236c.188.821.493 1.612.915 2.373a5.515 5.515 0 001.722 1.846c.727.481 1.623.721 2.69.721.879 0 1.629-.176 2.25-.528a4.25 4.25 0 001.529-1.494c.398-.632.691-1.365.879-2.197.187-.832.281-1.723.281-2.672zM264.629 343v1.934l-.369 6.468h-2.268l.018-6.17V343h2.619zm7.26 23.133v2.619c0 1.066-.27 2.191-.809 3.375a8.11 8.11 0 01-2.268 2.988l-1.845-1.283c.375-.516.691-1.043.949-1.582a7.469 7.469 0 00.58-1.652c.141-.563.211-1.16.211-1.793v-2.672h3.182zM286.953 343v1.934l-.369 6.468h-2.268l.018-6.17V343h2.619zm10.863 24.68c.774 0 1.489-.159 2.145-.475a4.415 4.415 0 001.617-1.301 3.623 3.623 0 00.721-1.916h3.094c-.059 1.125-.44 2.174-1.143 3.147-.691.961-1.6 1.74-2.725 2.338-1.125.586-2.361.879-3.709.879-1.429 0-2.677-.252-3.744-.756a7.426 7.426 0 01-2.636-2.075 9.251 9.251 0 01-1.565-3.023 12.75 12.75 0 01-.51-3.639v-.738c0-1.277.17-2.484.51-3.621.352-1.148.873-2.162 1.565-3.041a7.423 7.423 0 012.636-2.074c1.067-.504 2.315-.756 3.744-.756 1.489 0 2.789.305 3.903.914 1.113.598 1.986 1.418 2.619 2.461.644 1.031.996 2.203 1.055 3.516h-3.094a4.68 4.68 0 00-.668-2.127 4.166 4.166 0 00-1.547-1.512c-.645-.387-1.4-.58-2.268-.58-.996 0-1.834.199-2.513.597a4.412 4.412 0 00-1.6 1.582 7.392 7.392 0 00-.844 2.198 12.087 12.087 0 00-.246 2.443v.738c0 .832.082 1.653.246 2.461.164.809.44 1.541.827 2.198a4.596 4.596 0 001.599 1.582c.68.386 1.524.58 2.531.58zM310.824 343v1.934l-.369 6.468h-2.267l.017-6.17V343h2.619zm7.26 23.133v2.619c0 1.066-.27 2.191-.809 3.375a8.117 8.117 0 01-2.267 2.988l-1.846-1.283c.375-.516.692-1.043.949-1.582a7.469 7.469 0 00.58-1.652c.141-.563.211-1.16.211-1.793v-2.672h3.182zM333.148 343v1.934l-.369 6.468h-2.267l.017-6.17V343h2.619zm15.241 23.309V343h3.269v27h-2.988l-.281-3.691zm-12.797-5.608v-.369c0-1.453.176-2.771.527-3.955.363-1.195.873-2.221 1.529-3.076a6.914 6.914 0 012.373-1.969c.926-.469 1.958-.703 3.094-.703 1.196 0 2.239.211 3.129.633a6.017 6.017 0 012.285 1.81c.633.785 1.131 1.735 1.494 2.848.364 1.113.616 2.373.756 3.779v1.617c-.129 1.395-.381 2.649-.756 3.762-.363 1.113-.861 2.063-1.494 2.848a6.257 6.257 0 01-2.285 1.81c-.902.41-1.957.616-3.164.616-1.113 0-2.133-.241-3.059-.721a7.218 7.218 0 01-2.373-2.022c-.656-.867-1.166-1.886-1.529-3.058-.351-1.184-.527-2.467-.527-3.85zm3.269-.369v.369c0 .949.094 1.84.282 2.672.199.832.503 1.565.914 2.197a4.53 4.53 0 001.564 1.494c.633.352 1.389.528 2.268.528 1.078 0 1.963-.229 2.654-.686a5.101 5.101 0 001.687-1.81c.422-.75.75-1.565.985-2.444v-4.236a9.418 9.418 0 00-.615-1.863 5.72 5.72 0 00-1.02-1.617 4.4 4.4 0 00-1.529-1.143c-.598-.281-1.307-.422-2.127-.422-.891 0-1.658.188-2.303.563a4.482 4.482 0 00-1.564 1.511c-.411.633-.715 1.371-.914 2.215a12.106 12.106 0 00-.282 2.672zM358.707 343v1.934l-.369 6.468h-2.268l.018-6.17V343h2.619zm7.26 23.133v2.619c0 1.066-.27 2.191-.809 3.375a8.117 8.117 0 01-2.267 2.988l-1.846-1.283c.375-.516.691-1.043.949-1.582a7.469 7.469 0 00.58-1.652c.141-.563.211-1.16.211-1.793v-2.672h3.182zM381.031 343v1.934l-.369 6.468h-2.267l.017-6.17V343h2.619zm11.145 27.352c-1.324 0-2.526-.223-3.604-.668a8.184 8.184 0 01-2.76-1.916 8.536 8.536 0 01-1.757-2.918c-.41-1.125-.616-2.356-.616-3.692v-.738c0-1.547.229-2.924.686-4.131.457-1.219 1.078-2.25 1.863-3.094a7.998 7.998 0 012.672-1.916 7.686 7.686 0 013.094-.65c1.359 0 2.531.234 3.516.703a6.41 6.41 0 012.443 1.969c.633.832 1.101 1.816 1.406 2.953.305 1.125.457 2.355.457 3.691v1.459h-14.203v-2.654h10.951v-.246a8.104 8.104 0 00-.527-2.461 4.43 4.43 0 00-1.406-1.969c-.645-.515-1.524-.773-2.637-.773-.738 0-1.418.158-2.039.474-.621.305-1.154.762-1.6 1.371-.445.61-.791 1.354-1.037 2.233-.246.879-.369 1.892-.369 3.041v.738c0 .903.123 1.752.369 2.549a6.512 6.512 0 001.108 2.074 5.31 5.31 0 001.775 1.407c.703.339 1.5.509 2.391.509 1.148 0 2.121-.234 2.918-.703a7.232 7.232 0 002.091-1.881l1.969 1.565a9.104 9.104 0 01-1.564 1.775c-.633.563-1.412 1.02-2.338 1.371-.914.352-1.998.528-3.252.528zM405.113 343v1.934l-.369 6.468h-2.267l.017-6.17V343h2.619zm2.004.422v-2.672h6.645v34.734h-6.645v-2.672h3.375v-29.39h-3.375z" fill="#000"></path><path fill="#D66" fill-opacity=".32" d="M194 2h38v47h-38zM229 337h38v47h-38zM351 416h38v47h-38zM332 98h38v47h-38z"></path><path fill="#66DDD6" fill-opacity=".32" d="M332 0h38v47h-38zM329 335h86v47h-86z"></path><path stroke="#66DDD6" stroke-opacity=".32" stroke-width="5" d="M372.5 2.5h40v42h-40z"></path><path fill="#66DDD6" fill-opacity=".32" d="M275 497h109v47H275zM392 416h45v47h-45zM232 193h38v47h-38zM377 97h64v47h-64z"></path><path d="M57.693 128.748v-9.791c0-.75-.152-1.4-.457-1.951a2.99 2.99 0 00-1.336-1.301c-.597-.305-1.335-.457-2.215-.457-.82 0-1.54.141-2.162.422-.609.281-1.09.65-1.441 1.107-.34.457-.51.95-.51 1.477H46.32c0-.68.176-1.354.528-2.022.351-.668.855-1.271 1.511-1.81.668-.551 1.465-.984 2.391-1.301.938-.328 1.98-.492 3.129-.492 1.383 0 2.602.234 3.656.703 1.067.469 1.899 1.178 2.496 2.127.61.937.914 2.115.914 3.533v8.86c0 .632.053 1.306.158 2.021.118.715.288 1.33.51 1.846V132h-3.392c-.164-.375-.293-.873-.387-1.494a12.048 12.048 0 01-.14-1.758zm.563-8.279l.035 2.285h-3.287c-.926 0-1.752.076-2.479.228-.726.141-1.335.358-1.828.651-.492.293-.867.662-1.125 1.107-.258.434-.387.944-.387 1.53 0 .597.135 1.142.405 1.634s.674.885 1.213 1.178c.55.281 1.224.422 2.021.422.996 0 1.875-.211 2.637-.633.762-.422 1.365-.937 1.81-1.547.457-.609.704-1.201.739-1.775l1.388 1.564c-.082.492-.304 1.037-.668 1.635-.363.598-.85 1.172-1.458 1.723-.598.539-1.313.99-2.145 1.353-.82.352-1.746.528-2.777.528-1.29 0-2.42-.252-3.393-.756-.96-.504-1.71-1.178-2.25-2.022-.527-.855-.791-1.81-.791-2.865 0-1.02.2-1.916.598-2.689a5.19 5.19 0 011.722-1.952c.75-.527 1.653-.925 2.707-1.195 1.055-.269 2.233-.404 3.534-.404h3.779zm11.056-4.5V132h-3.251v-19.02h3.164l.088 2.989zm5.942-3.094l-.018 3.023a4.79 4.79 0 00-.773-.105 8.363 8.363 0 00-.809-.035c-.75 0-1.412.117-1.986.351a4.123 4.123 0 00-1.459.985 4.742 4.742 0 00-.95 1.511 7.269 7.269 0 00-.439 1.899l-.914.527c0-1.148.112-2.226.334-3.234.235-1.008.592-1.899 1.073-2.672.48-.785 1.09-1.395 1.828-1.828.75-.445 1.64-.668 2.671-.668.235 0 .504.029.81.088.304.047.515.099.632.158zm6.258 3.094V132H78.26v-19.02h3.164l.088 2.989zm5.941-3.094l-.017 3.023a4.79 4.79 0 00-.774-.105 8.363 8.363 0 00-.809-.035c-.75 0-1.412.117-1.986.351a4.123 4.123 0 00-1.459.985 4.745 4.745 0 00-.949 1.511 7.269 7.269 0 00-.44 1.899l-.913.527c0-1.148.11-2.226.334-3.234.234-1.008.591-1.899 1.072-2.672.48-.785 1.09-1.395 1.828-1.828.75-.445 1.64-.668 2.672-.668.234 0 .504.029.808.088.305.047.516.099.633.158zm13.518 15.873v-9.791c0-.75-.153-1.4-.457-1.951a2.991 2.991 0 00-1.336-1.301c-.598-.305-1.336-.457-2.215-.457-.82 0-1.541.141-2.162.422-.61.281-1.09.65-1.442 1.107-.34.457-.51.95-.51 1.477h-3.251c0-.68.175-1.354.527-2.022.352-.668.856-1.271 1.512-1.81.668-.551 1.465-.984 2.39-1.301.938-.328 1.98-.492 3.13-.492 1.382 0 2.6.234 3.655.703 1.067.469 1.899 1.178 2.497 2.127.609.937.914 2.115.914 3.533v8.86c0 .632.052 1.306.158 2.021.117.715.287 1.33.51 1.846V132h-3.393c-.164-.375-.293-.873-.387-1.494a12.155 12.155 0 01-.14-1.758zm.562-8.279l.035 2.285h-3.287c-.925 0-1.752.076-2.478.228-.727.141-1.336.358-1.828.651-.493.293-.868.662-1.125 1.107-.258.434-.387.944-.387 1.53 0 .597.135 1.142.404 1.634.27.492.674.885 1.213 1.178.55.281 1.225.422 2.022.422.996 0 1.875-.211 2.636-.633.762-.422 1.366-.937 1.811-1.547.457-.609.703-1.201.738-1.775l1.389 1.564c-.082.492-.305 1.037-.668 1.635-.363.598-.85 1.172-1.459 1.723-.598.539-1.313.99-2.145 1.353-.82.352-1.746.528-2.777.528-1.29 0-2.42-.252-3.393-.756-.96-.504-1.71-1.178-2.25-2.022-.527-.855-.79-1.81-.79-2.865 0-1.02.199-1.916.597-2.689a5.192 5.192 0 011.723-1.952c.75-.527 1.652-.925 2.707-1.195 1.054-.269 2.232-.404 3.533-.404h3.779zm12.867 9.562l5.291-17.051h3.481l-7.629 21.956c-.176.468-.41.972-.703 1.511a7.234 7.234 0 01-1.09 1.565c-.445.492-.984.89-1.617 1.195-.621.316-1.365.475-2.233.475-.257 0-.586-.036-.984-.106a9.41 9.41 0 01-.844-.176l-.017-2.636c.093.011.24.023.439.035.211.023.358.035.44.035.738 0 1.365-.1 1.88-.299.516-.187.95-.51 1.301-.967.364-.445.674-1.06.932-1.845l1.353-3.692zm-3.884-17.051l4.939 14.766.844 3.428-2.338 1.195-6.996-19.389h3.551zm25.927-6.714V132h-3.252v-21.674l-6.556 2.391v-2.936l9.299-3.515h.509zm9.967 24.011c0-.55.17-1.013.51-1.388.351-.387.855-.58 1.512-.58.656 0 1.154.193 1.494.58.351.375.527.838.527 1.388 0 .539-.176.996-.527 1.371-.34.375-.838.563-1.494.563-.657 0-1.161-.188-1.512-.563-.34-.375-.51-.832-.51-1.371zm17.051-.597c.773 0 1.488-.159 2.144-.475a4.41 4.41 0 001.618-1.301 3.613 3.613 0 00.72-1.916h3.094c-.058 1.125-.439 2.174-1.142 3.147-.692.961-1.6 1.74-2.725 2.338-1.125.586-2.361.879-3.709.879-1.43 0-2.678-.252-3.744-.756a7.42 7.42 0 01-2.637-2.075 9.249 9.249 0 01-1.564-3.023 12.75 12.75 0 01-.51-3.639v-.738c0-1.277.17-2.484.51-3.621a9.24 9.24 0 011.564-3.041 7.418 7.418 0 012.637-2.074c1.066-.504 2.314-.756 3.744-.756 1.488 0 2.789.305 3.902.914 1.114.598 1.987 1.418 2.619 2.461.645 1.031.997 2.203 1.055 3.516h-3.094a4.668 4.668 0 00-.668-2.127 4.163 4.163 0 00-1.546-1.512c-.645-.387-1.401-.58-2.268-.58-.996 0-1.834.199-2.514.597a4.401 4.401 0 00-1.599 1.582 7.392 7.392 0 00-.844 2.198 12.087 12.087 0 00-.246 2.443v.738c0 .832.082 1.653.246 2.461.164.809.439 1.541.826 2.198a4.608 4.608 0 001.6 1.582c.679.386 1.523.58 2.531.58zm10.371-6.979v-.404c0-1.371.199-2.643.598-3.815.398-1.183.972-2.209 1.722-3.076a7.696 7.696 0 012.725-2.039c1.066-.492 2.262-.738 3.586-.738 1.336 0 2.537.246 3.603.738a7.647 7.647 0 012.743 2.039c.761.867 1.341 1.893 1.74 3.076.398 1.172.597 2.444.597 3.815v.404c0 1.371-.199 2.643-.597 3.815a9.147 9.147 0 01-1.74 3.076 7.978 7.978 0 01-2.725 2.039c-1.055.48-2.25.721-3.586.721-1.336 0-2.537-.241-3.603-.721a8.154 8.154 0 01-2.743-2.039c-.75-.879-1.324-1.904-1.722-3.076-.399-1.172-.598-2.444-.598-3.815zm3.252-.404v.404c0 .949.111 1.846.334 2.69.223.832.557 1.57 1.002 2.214a5.065 5.065 0 001.705 1.53c.68.363 1.471.545 2.373.545.891 0 1.67-.182 2.338-.545a4.898 4.898 0 001.687-1.53 7.04 7.04 0 001.002-2.214 9.99 9.99 0 00.352-2.69v-.404a9.72 9.72 0 00-.352-2.654 6.826 6.826 0 00-1.019-2.233 4.844 4.844 0 00-1.688-1.547c-.668-.375-1.453-.562-2.355-.562-.891 0-1.676.187-2.356.562a5.059 5.059 0 00-1.687 1.547 7.078 7.078 0 00-1.002 2.233 10.21 10.21 0 00-.334 2.654zm21.393-5.66v22.675h-3.27V112.98h2.988l.282 3.657zm12.814 5.695v.369c0 1.383-.164 2.666-.492 3.85-.328 1.172-.809 2.191-1.442 3.058a6.554 6.554 0 01-2.302 2.022c-.914.48-1.963.721-3.147.721-1.207 0-2.273-.2-3.199-.598a6.316 6.316 0 01-2.355-1.74c-.645-.762-1.161-1.676-1.547-2.743-.375-1.066-.633-2.267-.774-3.603v-1.969c.141-1.406.405-2.666.791-3.779.387-1.113.897-2.063 1.53-2.848a6.268 6.268 0 012.337-1.81c.914-.422 1.969-.633 3.164-.633 1.196 0 2.256.234 3.182.703a6.398 6.398 0 012.338 1.969c.633.855 1.107 1.881 1.424 3.076.328 1.184.492 2.502.492 3.955zm-3.27.369v-.369c0-.949-.099-1.84-.298-2.672-.2-.844-.51-1.582-.932-2.215a4.433 4.433 0 00-1.582-1.511c-.645-.375-1.412-.563-2.303-.563-.82 0-1.535.141-2.144.422a4.628 4.628 0 00-1.53 1.143 6.073 6.073 0 00-1.037 1.617 9.324 9.324 0 00-.58 1.863v4.553c.235.82.563 1.593.985 2.32a5.088 5.088 0 001.687 1.74c.703.434 1.588.651 2.654.651.879 0 1.635-.182 2.268-.545a4.584 4.584 0 001.582-1.53 6.977 6.977 0 00.932-2.214c.199-.844.298-1.741.298-2.69zm12.551 7.33l5.291-17.051h3.481l-7.629 21.956c-.176.468-.41.972-.703 1.511a7.269 7.269 0 01-1.09 1.565c-.445.492-.984.89-1.617 1.195-.621.316-1.366.475-2.233.475-.258 0-.586-.036-.984-.106a9.332 9.332 0 01-.844-.176l-.017-2.636c.093.011.24.023.439.035.211.023.357.035.439.035.739 0 1.366-.1 1.881-.299.516-.187.95-.51 1.301-.967.363-.445.674-1.06.932-1.845l1.353-3.692zm-3.884-17.051l4.939 14.766.844 3.428-2.338 1.195-6.996-19.389h3.551zm22.816 11.286l5.08-17.86h2.461l-1.424 6.944-5.467 18.65h-2.443l1.793-7.734zm-5.256-17.86l4.043 17.508 1.213 8.086h-2.426l-6.205-25.594h3.375zm19.371 17.49l3.955-17.49h3.393L254.779 132h-2.425l1.265-8.104zm-6.205-17.49l4.94 17.86 1.792 7.734h-2.443l-5.273-18.65-1.442-6.944h2.426zm20.356 6.574V132h-3.27v-19.02h3.27zm-3.516-5.044c0-.528.158-.973.475-1.336.328-.364.808-.545 1.441-.545.621 0 1.096.181 1.424.545.34.363.51.808.51 1.336 0 .503-.17.937-.51 1.3-.328.352-.803.528-1.424.528-.633 0-1.113-.176-1.441-.528a1.911 1.911 0 01-.475-1.3zm16.699 5.044v2.497H270.67v-2.497h10.283zm-6.803-4.623h3.252v18.932c0 .645.1 1.131.299 1.459.199.328.457.545.774.65.316.106.656.159 1.019.159.27 0 .551-.024.844-.071.305-.058.533-.105.685-.14l.018 2.654a7.717 7.717 0 01-1.02.229c-.41.082-.908.123-1.494.123a5.072 5.072 0 01-2.197-.475c-.668-.316-1.201-.844-1.6-1.582-.386-.75-.58-1.758-.58-3.024v-18.914zM288.02 105v27h-3.252v-27h3.252zm-.774 16.77l-1.353-.053c.011-1.301.205-2.502.58-3.604.375-1.113.902-2.08 1.582-2.9a7.057 7.057 0 012.425-1.899c.95-.457 1.999-.685 3.147-.685.937 0 1.781.129 2.531.387.75.246 1.389.644 1.916 1.195.539.551.949 1.266 1.231 2.144.281.868.422 1.928.422 3.182V132h-3.27v-12.498c0-.996-.146-1.793-.439-2.391-.293-.609-.721-1.049-1.284-1.318-.562-.281-1.254-.422-2.074-.422-.808 0-1.547.17-2.215.51a5.303 5.303 0 00-1.705 1.406 7.055 7.055 0 00-1.107 2.057 7.507 7.507 0 00-.387 2.426zm20.883-8.79V132h-3.27v-19.02h3.27zm-3.516-5.044c0-.528.158-.973.475-1.336.328-.364.808-.545 1.441-.545.621 0 1.096.181 1.424.545.34.363.51.808.51 1.336 0 .503-.17.937-.51 1.3-.328.352-.803.528-1.424.528-.633 0-1.113-.176-1.441-.528a1.911 1.911 0 01-.475-1.3zm11.989 9.105V132h-3.252v-19.02h3.076l.176 4.061zm-.774 4.729l-1.353-.053c.011-1.301.205-2.502.58-3.604.375-1.113.902-2.08 1.582-2.9a7.057 7.057 0 012.425-1.899c.95-.457 1.999-.685 3.147-.685.937 0 1.781.129 2.531.387.75.246 1.389.644 1.916 1.195.539.551.949 1.266 1.231 2.144.281.868.422 1.928.422 3.182V132h-3.27v-12.498c0-.996-.146-1.793-.439-2.391-.293-.609-.721-1.049-1.284-1.318-.562-.281-1.254-.422-2.074-.422-.808 0-1.547.17-2.215.51a5.303 5.303 0 00-1.705 1.406 7.078 7.078 0 00-1.107 2.057 7.507 7.507 0 00-.387 2.426zm17.297 0v-.176c0-2.555.287-4.864.861-6.926.575-2.074 1.307-3.891 2.198-5.449.89-1.559 1.828-2.848 2.812-3.867.984-1.032 1.893-1.776 2.725-2.233l.685 2.145c-.691.527-1.394 1.254-2.109 2.179-.703.926-1.354 2.063-1.951 3.411-.586 1.347-1.061 2.912-1.424 4.693-.363 1.781-.545 3.785-.545 6.012v.246c0 2.226.182 4.236.545 6.029.363 1.781.838 3.352 1.424 4.711.597 1.359 1.248 2.514 1.951 3.463.715.961 1.418 1.722 2.109 2.285l-.685 1.969c-.832-.457-1.741-1.201-2.725-2.233-.984-1.019-1.922-2.308-2.812-3.867-.891-1.547-1.623-3.357-2.198-5.432-.574-2.074-.861-4.394-.861-6.96zm28.178-4.606v3.902c0 2.098-.188 3.868-.563 5.309-.375 1.441-.914 2.602-1.617 3.48-.703.879-1.553 1.518-2.549 1.916-.984.387-2.097.581-3.34.581-.984 0-1.892-.123-2.724-.37a6.466 6.466 0 01-2.25-1.177c-.656-.551-1.219-1.266-1.688-2.145-.468-.879-.826-1.945-1.072-3.199-.246-1.254-.369-2.719-.369-4.395v-3.902c0-2.098.187-3.855.562-5.273.387-1.418.932-2.555 1.635-3.411.703-.867 1.547-1.488 2.531-1.863.996-.375 2.11-.562 3.34-.562.996 0 1.91.123 2.742.369a6.191 6.191 0 012.25 1.142c.657.516 1.213 1.207 1.67 2.075.469.855.827 1.904 1.073 3.146s.369 2.701.369 4.377zm-3.27 4.43v-4.975c0-1.148-.07-2.156-.211-3.023-.129-.879-.322-1.629-.58-2.25-.258-.621-.586-1.125-.984-1.512a3.478 3.478 0 00-1.354-.844c-.504-.187-1.072-.281-1.705-.281-.773 0-1.459.146-2.056.439-.598.282-1.102.733-1.512 1.354-.399.621-.703 1.436-.914 2.443-.211 1.008-.317 2.233-.317 3.674v4.975c0 1.148.065 2.162.194 3.041.14.879.345 1.64.615 2.285.27.633.598 1.154.984 1.564.387.411.832.715 1.336.914a4.947 4.947 0 001.705.282c.797 0 1.495-.153 2.092-.457.598-.305 1.096-.78 1.494-1.424.41-.656.715-1.494.914-2.514.2-1.031.299-2.262.299-3.691zm10.758 6.539v2.619c0 1.066-.27 2.191-.809 3.375a8.107 8.107 0 01-2.267 2.988l-1.846-1.283c.375-.516.692-1.043.949-1.582a7.418 7.418 0 00.58-1.652c.141-.563.211-1.16.211-1.793v-2.672h3.182zm17.473-10.529h2.32c1.137 0 2.074-.188 2.812-.563.75-.387 1.307-.908 1.67-1.564.375-.668.563-1.418.563-2.25 0-.985-.164-1.811-.492-2.479a3.298 3.298 0 00-1.477-1.512c-.656-.34-1.488-.509-2.496-.509-.914 0-1.723.181-2.426.544a3.993 3.993 0 00-1.634 1.512c-.387.656-.581 1.43-.581 2.321h-3.252c0-1.301.329-2.485.985-3.551.656-1.067 1.576-1.916 2.76-2.549 1.195-.633 2.578-.949 4.148-.949 1.547 0 2.9.275 4.061.826a6.05 6.05 0 012.707 2.426c.644 1.066.966 2.396.966 3.99 0 .644-.152 1.336-.457 2.074-.293.727-.755 1.406-1.388 2.039-.621.633-1.43 1.154-2.426 1.565-.996.398-2.191.597-3.586.597h-2.777v-1.968zm0 2.671v-1.951h2.777c1.629 0 2.977.194 4.043.58 1.066.387 1.904.903 2.514 1.547.621.645 1.054 1.354 1.3 2.127.258.762.387 1.524.387 2.285 0 1.196-.205 2.256-.615 3.182a6.486 6.486 0 01-1.705 2.355 7.283 7.283 0 01-2.567 1.459c-.984.329-2.056.493-3.216.493-1.114 0-2.162-.159-3.147-.475a8.13 8.13 0 01-2.584-1.371 6.427 6.427 0 01-1.758-2.233c-.422-.89-.632-1.904-.632-3.041h3.251c0 .891.194 1.67.581 2.338.398.668.961 1.19 1.687 1.565.738.363 1.606.545 2.602.545.996 0 1.851-.17 2.566-.51a3.701 3.701 0 001.67-1.582c.398-.703.598-1.588.598-2.654 0-1.067-.223-1.94-.668-2.62-.446-.691-1.078-1.201-1.899-1.529-.808-.34-1.763-.51-2.865-.51h-2.32zm18.808 7.858v2.619c0 1.066-.269 2.191-.808 3.375a8.11 8.11 0 01-2.268 2.988l-1.846-1.283a10.14 10.14 0 00.95-1.582 7.52 7.52 0 00.58-1.652c.14-.563.211-1.16.211-1.793v-2.672h3.181zm30.024-4.746v2.672h-18.492v-1.916l11.46-17.737h2.655l-2.848 5.133-7.576 11.848h14.801zm-3.569-16.981V132h-3.252v-25.594h3.252zm14.362 15.188v.176c0 2.566-.287 4.886-.862 6.96-.574 2.075-1.306 3.885-2.197 5.432-.891 1.559-1.828 2.848-2.812 3.867-.985 1.032-1.893 1.776-2.725 2.233l-.686-1.969c.692-.527 1.389-1.266 2.092-2.215.703-.937 1.354-2.098 1.951-3.48.598-1.371 1.079-2.953 1.442-4.746.363-1.805.545-3.821.545-6.047v-.246c0-2.227-.194-4.237-.58-6.03-.387-1.804-.891-3.392-1.512-4.763-.609-1.371-1.266-2.526-1.969-3.463-.691-.949-1.347-1.682-1.969-2.198l.686-1.986c.832.457 1.74 1.201 2.725 2.233.984 1.019 1.921 2.308 2.812 3.867.891 1.558 1.623 3.375 2.197 5.449.575 2.062.862 4.371.862 6.926zM5.617 221.701v-.404c0-1.371.2-2.643.598-3.815.398-1.183.973-2.209 1.723-3.076a7.69 7.69 0 012.724-2.039c1.066-.492 2.262-.738 3.586-.738 1.336 0 2.537.246 3.604.738a7.652 7.652 0 012.742 2.039c.761.867 1.341 1.893 1.74 3.076.398 1.172.598 2.444.598 3.815v.404c0 1.371-.2 2.643-.598 3.815a9.127 9.127 0 01-1.74 3.076 7.973 7.973 0 01-2.725 2.039c-1.055.48-2.25.721-3.586.721-1.336 0-2.537-.241-3.603-.721a8.154 8.154 0 01-2.742-2.039c-.75-.879-1.325-1.904-1.723-3.076-.399-1.172-.598-2.444-.598-3.815zm3.252-.404v.404c0 .949.111 1.846.334 2.69a7.07 7.07 0 001.002 2.214 5.068 5.068 0 001.705 1.53c.68.363 1.47.545 2.373.545.89 0 1.67-.182 2.338-.545a4.905 4.905 0 001.688-1.53 7.069 7.069 0 001.002-2.214c.234-.844.351-1.741.351-2.69v-.404c0-.938-.117-1.822-.351-2.654a6.84 6.84 0 00-1.02-2.233 4.848 4.848 0 00-1.688-1.547c-.668-.375-1.453-.562-2.355-.562-.89 0-1.676.187-2.355.562a5.06 5.06 0 00-1.688 1.547 7.063 7.063 0 00-1.002 2.233 10.226 10.226 0 00-.334 2.654zm29.778 5.308V211.98h3.269V231h-3.111l-.158-4.395zm.615-4.007l1.353-.036c0 1.266-.135 2.438-.404 3.516-.258 1.067-.68 1.992-1.266 2.777-.586.786-1.353 1.401-2.302 1.846-.95.434-2.104.651-3.463.651-.926 0-1.776-.135-2.55-.405a5.08 5.08 0 01-1.968-1.248c-.55-.562-.978-1.295-1.283-2.197-.293-.902-.44-1.986-.44-3.252v-12.27h3.252v12.305c0 .856.094 1.565.282 2.127.199.551.463.99.79 1.318.34.317.715.54 1.126.668.421.129.855.194 1.3.194 1.383 0 2.479-.264 3.288-.791a4.509 4.509 0 001.74-2.162c.363-.914.545-1.928.545-3.041zm15.574-10.618v2.497H44.553v-2.497h10.283zm-6.803-4.623h3.252v18.932c0 .645.1 1.131.299 1.459.2.328.457.545.773.65a3.19 3.19 0 001.02.159c.27 0 .55-.024.844-.071.304-.058.533-.105.685-.14l.018 2.654a7.703 7.703 0 01-1.02.229c-.41.082-.908.123-1.494.123-.797 0-1.53-.159-2.197-.475-.668-.316-1.201-.844-1.6-1.582-.386-.75-.58-1.758-.58-3.024v-18.914zm13.87 8.28v22.675h-3.27V211.98h2.988l.281 3.657zm12.814 5.695v.369c0 1.383-.164 2.666-.492 3.85-.328 1.172-.809 2.191-1.442 3.058a6.557 6.557 0 01-2.302 2.022c-.915.48-1.963.721-3.147.721-1.207 0-2.273-.2-3.2-.598a6.323 6.323 0 01-2.355-1.74c-.644-.762-1.16-1.676-1.547-2.743-.375-1.066-.632-2.267-.773-3.603v-1.969c.14-1.406.404-2.666.791-3.779s.897-2.063 1.53-2.848a6.274 6.274 0 012.337-1.81c.914-.422 1.969-.633 3.164-.633 1.196 0 2.256.234 3.182.703a6.397 6.397 0 012.338 1.969c.633.855 1.107 1.881 1.424 3.076.328 1.184.492 2.502.492 3.955zm-3.27.369v-.369c0-.949-.1-1.84-.299-2.672-.199-.844-.51-1.582-.931-2.215a4.438 4.438 0 00-1.582-1.511c-.645-.375-1.412-.563-2.303-.563-.82 0-1.535.141-2.144.422a4.627 4.627 0 00-1.53 1.143 6.04 6.04 0 00-1.037 1.617 9.266 9.266 0 00-.58 1.863v4.553c.234.82.563 1.593.984 2.32a5.097 5.097 0 001.688 1.74c.703.434 1.588.651 2.654.651.88 0 1.635-.182 2.268-.545a4.59 4.59 0 001.582-1.53 6.96 6.96 0 00.931-2.214c.2-.844.3-1.741.3-2.69zm19.055 4.904V211.98h3.27V231H90.66l-.158-4.395zm.615-4.007l1.354-.036c0 1.266-.135 2.438-.405 3.516-.257 1.067-.68 1.992-1.265 2.777-.586.786-1.354 1.401-2.303 1.846-.95.434-2.104.651-3.463.651-.926 0-1.775-.135-2.549-.405a5.081 5.081 0 01-1.968-1.248c-.551-.562-.979-1.295-1.284-2.197-.293-.902-.44-1.986-.44-3.252v-12.27h3.253v12.305c0 .856.094 1.565.281 2.127.2.551.463.99.791 1.318.34.317.715.54 1.125.668.422.129.856.194 1.3.194 1.384 0 2.48-.264 3.288-.791a4.509 4.509 0 001.74-2.162c.364-.914.545-1.928.545-3.041zm15.574-10.618v2.497H96.408v-2.497h10.283zm-6.802-4.623h3.252v18.932c0 .645.099 1.131.298 1.459.2.328.457.545.774.65.316.106.656.159 1.019.159.27 0 .551-.024.844-.071.305-.058.533-.105.686-.14l.017 2.654a7.697 7.697 0 01-1.019.229c-.41.082-.908.123-1.494.123-.797 0-1.53-.159-2.198-.475-.668-.316-1.201-.844-1.599-1.582-.387-.75-.58-1.758-.58-3.024v-18.914zm10.476 21.92c0-.55.17-1.013.51-1.388.352-.387.855-.58 1.512-.58.656 0 1.154.193 1.494.58.351.375.527.838.527 1.388 0 .539-.176.996-.527 1.371-.34.375-.838.563-1.494.563-.657 0-1.16-.188-1.512-.563-.34-.375-.51-.832-.51-1.371zm.018-15.521c0-.551.17-1.014.51-1.389.351-.387.855-.58 1.511-.58.657 0 1.155.193 1.494.58.352.375.528.838.528 1.389 0 .539-.176.996-.528 1.371-.339.375-.837.562-1.494.562-.656 0-1.16-.187-1.511-.562-.34-.375-.51-.832-.51-1.371zm27.738-6.082L129.648 231h-3.462l9.755-25.594h2.233l-.053 2.268zM145.223 231l-8.491-23.326-.052-2.268h2.232L148.703 231h-3.48zm-.44-9.475v2.778h-14.379v-2.778h14.379zm10.108-6.556V231h-3.252v-19.02h3.164l.088 2.989zm5.941-3.094l-.018 3.023a4.779 4.779 0 00-.773-.105 8.36 8.36 0 00-.809-.035c-.75 0-1.412.117-1.986.351a4.13 4.13 0 00-1.459.985 4.745 4.745 0 00-.949 1.511 7.285 7.285 0 00-.44 1.899l-.914.527c0-1.148.112-2.226.334-3.234.235-1.008.592-1.899 1.073-2.672.48-.785 1.089-1.395 1.828-1.828.75-.445 1.64-.668 2.672-.668a4.3 4.3 0 01.808.088c.305.047.516.099.633.158zm6.258 3.094V231h-3.252v-19.02h3.164l.088 2.989zm5.941-3.094l-.017 3.023a4.805 4.805 0 00-.774-.105 8.354 8.354 0 00-.808-.035c-.75 0-1.412.117-1.987.351a4.13 4.13 0 00-1.459.985 4.745 4.745 0 00-.949 1.511 7.245 7.245 0 00-.439 1.899l-.914.527c0-1.148.111-2.226.334-3.234.234-1.008.591-1.899 1.072-2.672.48-.785 1.09-1.395 1.828-1.828.75-.445 1.641-.668 2.672-.668a4.3 4.3 0 01.808.088c.305.047.516.099.633.158zm13.518 15.873v-9.791c0-.75-.153-1.4-.457-1.951a2.99 2.99 0 00-1.336-1.301c-.598-.305-1.336-.457-2.215-.457-.82 0-1.541.141-2.162.422-.609.281-1.09.65-1.441 1.107-.34.457-.51.95-.51 1.477h-3.252c0-.68.176-1.354.527-2.022.352-.668.856-1.271 1.512-1.81.668-.551 1.465-.984 2.39-1.301.938-.328 1.981-.492 3.129-.492 1.383 0 2.602.234 3.657.703 1.066.469 1.898 1.178 2.496 2.127.609.937.914 2.115.914 3.533v8.86c0 .632.053 1.306.158 2.021.117.715.287 1.33.51 1.846V231h-3.393c-.164-.375-.293-.873-.387-1.494a12.155 12.155 0 01-.14-1.758zm.562-8.279l.035 2.285h-3.287c-.925 0-1.752.076-2.478.228-.727.141-1.336.358-1.828.651a3.096 3.096 0 00-1.125 1.107c-.258.434-.387.944-.387 1.53 0 .597.135 1.142.404 1.634.27.492.674.885 1.213 1.178.551.281 1.225.422 2.022.422.996 0 1.875-.211 2.636-.633.762-.422 1.366-.937 1.811-1.547.457-.609.703-1.201.738-1.775l1.389 1.564c-.082.492-.305 1.037-.668 1.635-.363.598-.85 1.172-1.459 1.723a7.877 7.877 0 01-2.145 1.353c-.82.352-1.746.528-2.777.528-1.289 0-2.42-.252-3.393-.756-.96-.504-1.71-1.178-2.25-2.022-.527-.855-.791-1.81-.791-2.865 0-1.02.2-1.916.598-2.689a5.197 5.197 0 011.723-1.952c.75-.527 1.652-.925 2.707-1.195 1.055-.269 2.232-.404 3.533-.404h3.779zm12.868 9.562l5.291-17.051h3.48l-7.629 21.956c-.176.468-.41.972-.703 1.511a7.234 7.234 0 01-1.09 1.565c-.445.492-.984.89-1.617 1.195-.621.316-1.365.475-2.232.475-.258 0-.586-.036-.985-.106a9.41 9.41 0 01-.844-.176l-.017-2.636c.094.011.24.023.439.035.211.023.358.035.44.035.738 0 1.365-.1 1.881-.299a2.84 2.84 0 001.3-.967c.364-.445.674-1.06.932-1.845l1.354-3.692zm-3.885-17.051l4.939 14.766.844 3.428-2.338 1.195-6.996-19.389h3.551zm31.236-10.23v2.672h-3.357v29.39h3.357v2.672h-6.609V201.75h6.609zm5.256 2.25v2.391l-.527 6.275h-1.952V204h2.479zm4.746 0v2.391l-.527 6.275h-1.951V204h2.478zm15.311 23.309V204h3.269v27h-2.988l-.281-3.691zm-12.797-5.608v-.369c0-1.453.175-2.771.527-3.955.363-1.195.873-2.221 1.529-3.076a6.914 6.914 0 012.373-1.969c.926-.469 1.957-.703 3.094-.703 1.195 0 2.238.211 3.129.633a6.017 6.017 0 012.285 1.81c.633.785 1.131 1.735 1.494 2.848.364 1.113.616 2.373.756 3.779v1.617c-.129 1.395-.381 2.649-.756 3.762-.363 1.113-.861 2.063-1.494 2.848a6.257 6.257 0 01-2.285 1.81c-.902.41-1.957.616-3.164.616-1.113 0-2.133-.241-3.059-.721a7.218 7.218 0 01-2.373-2.022c-.656-.867-1.166-1.886-1.529-3.058-.352-1.184-.527-2.467-.527-3.85zm3.269-.369v.369c0 .949.094 1.84.281 2.672.2.832.504 1.565.915 2.197a4.53 4.53 0 001.564 1.494c.633.352 1.389.528 2.268.528 1.078 0 1.962-.229 2.654-.686a5.11 5.11 0 001.687-1.81c.422-.75.75-1.565.985-2.444v-4.236a9.418 9.418 0 00-.615-1.863 5.72 5.72 0 00-1.02-1.617 4.4 4.4 0 00-1.529-1.143c-.598-.281-1.307-.422-2.127-.422-.891 0-1.658.188-2.303.563a4.482 4.482 0 00-1.564 1.511c-.411.633-.715 1.371-.915 2.215a12.168 12.168 0 00-.281 2.672zM263.383 204v2.391l-.528 6.275h-1.951V204h2.479zm4.746 0v2.391l-.527 6.275h-1.952V204h2.479zm7.33 23.133v2.619c0 1.066-.27 2.191-.809 3.375a8.117 8.117 0 01-2.267 2.988l-1.846-1.283c.375-.516.692-1.043.949-1.582a7.418 7.418 0 00.58-1.652c.141-.563.211-1.16.211-1.793v-2.672h3.182zM290.945 204v2.391l-.527 6.275h-1.951V204h2.478zm4.746 0v2.391l-.527 6.275h-1.951V204h2.478zm4.36 0h3.269v23.309l-.281 3.691h-2.988v-27zm16.119 17.332v.369c0 1.383-.164 2.666-.492 3.85-.328 1.172-.809 2.191-1.442 3.058a6.707 6.707 0 01-2.32 2.022c-.914.48-1.963.721-3.146.721-1.208 0-2.268-.206-3.182-.616a6.257 6.257 0 01-2.285-1.81c-.621-.785-1.119-1.735-1.494-2.848-.364-1.113-.616-2.367-.756-3.762v-1.617c.14-1.406.392-2.666.756-3.779.375-1.113.873-2.063 1.494-2.848a6.017 6.017 0 012.285-1.81c.902-.422 1.951-.633 3.146-.633 1.196 0 2.256.234 3.182.703a6.247 6.247 0 012.32 1.969c.633.855 1.114 1.881 1.442 3.076.328 1.184.492 2.502.492 3.955zm-3.27.369v-.369c0-.949-.088-1.84-.263-2.672-.176-.844-.457-1.582-.844-2.215a4.21 4.21 0 00-1.529-1.511c-.633-.375-1.412-.563-2.338-.563-.821 0-1.535.141-2.145.422a4.634 4.634 0 00-1.529 1.143 6.024 6.024 0 00-1.037 1.617 9.26 9.26 0 00-.58 1.863v4.236c.187.821.492 1.612.914 2.373a5.525 5.525 0 001.722 1.846c.727.481 1.624.721 2.69.721.879 0 1.629-.176 2.25-.528a4.233 4.233 0 001.529-1.494c.399-.632.692-1.365.879-2.197.188-.832.281-1.723.281-2.672zM322.164 204v2.391l-.527 6.275h-1.951V204h2.478zm4.746 0v2.391l-.527 6.275h-1.951V204h2.478zm7.33 23.133v2.619c0 1.066-.269 2.191-.808 3.375a8.11 8.11 0 01-2.268 2.988l-1.846-1.283a10.14 10.14 0 00.95-1.582 7.52 7.52 0 00.58-1.652c.14-.563.211-1.16.211-1.793v-2.672h3.181zM349.727 204v2.391l-.528 6.275h-1.951V204h2.479zm4.746 0v2.391l-.528 6.275h-1.951V204h2.479zm10.933 24.68c.774 0 1.489-.159 2.145-.475a4.415 4.415 0 001.617-1.301 3.623 3.623 0 00.721-1.916h3.093c-.058 1.125-.439 2.174-1.142 3.147-.692.961-1.6 1.74-2.725 2.338-1.125.586-2.361.879-3.709.879-1.429 0-2.677-.252-3.744-.756a7.43 7.43 0 01-2.637-2.075 9.249 9.249 0 01-1.564-3.023 12.75 12.75 0 01-.51-3.639v-.738c0-1.277.17-2.484.51-3.621a9.24 9.24 0 011.564-3.041 7.427 7.427 0 012.637-2.074c1.067-.504 2.315-.756 3.744-.756 1.489 0 2.789.305 3.903.914 1.113.598 1.986 1.418 2.619 2.461.644 1.031.996 2.203 1.054 3.516h-3.093a4.692 4.692 0 00-.668-2.127 4.166 4.166 0 00-1.547-1.512c-.645-.387-1.401-.58-2.268-.58-.996 0-1.834.199-2.513.597a4.404 4.404 0 00-1.6 1.582 7.392 7.392 0 00-.844 2.198 12.087 12.087 0 00-.246 2.443v.738c0 .832.082 1.653.246 2.461a7.08 7.08 0 00.826 2.198 4.608 4.608 0 001.6 1.582c.68.386 1.523.58 2.531.58zm13.43-24.68v2.391l-.527 6.275h-1.952V204h2.479zm4.746 0v2.391l-.527 6.275h-1.951V204h2.478zm7.33 23.133v2.619c0 1.066-.269 2.191-.808 3.375a8.12 8.12 0 01-2.268 2.988l-1.846-1.283c.375-.516.692-1.043.949-1.582a7.472 7.472 0 00.581-1.652c.14-.563.21-1.16.21-1.793v-2.672h3.182zM406.398 204v2.391l-.527 6.275h-1.951V204h2.478zm4.747 0v2.391l-.528 6.275h-1.951V204h2.479zm15.31 23.309V204h3.27v27h-2.989l-.281-3.691zm-12.797-5.608v-.369c0-1.453.176-2.771.528-3.955.363-1.195.873-2.221 1.529-3.076a6.914 6.914 0 012.373-1.969c.926-.469 1.957-.703 3.094-.703 1.195 0 2.238.211 3.129.633a6.017 6.017 0 012.285 1.81c.633.785 1.131 1.735 1.494 2.848.363 1.113.615 2.373.756 3.779v1.617c-.129 1.395-.381 2.649-.756 3.762-.363 1.113-.861 2.063-1.494 2.848a6.257 6.257 0 01-2.285 1.81c-.903.41-1.957.616-3.165.616-1.113 0-2.132-.241-3.058-.721a7.218 7.218 0 01-2.373-2.022c-.656-.867-1.166-1.886-1.529-3.058-.352-1.184-.528-2.467-.528-3.85zm3.27-.369v.369c0 .949.093 1.84.281 2.672.199.832.504 1.565.914 2.197.41.633.932 1.131 1.565 1.494.632.352 1.388.528 2.267.528 1.078 0 1.963-.229 2.654-.686a5.113 5.113 0 001.688-1.81c.422-.75.75-1.565.984-2.444v-4.236a9.29 9.29 0 00-.615-1.863 5.72 5.72 0 00-1.02-1.617 4.39 4.39 0 00-1.529-1.143c-.597-.281-1.306-.422-2.127-.422-.89 0-1.658.188-2.302.563a4.484 4.484 0 00-1.565 1.511c-.41.633-.715 1.371-.914 2.215a12.107 12.107 0 00-.281 2.672zM437.195 204v2.391l-.527 6.275h-1.951V204h2.478zm4.746 0v2.391l-.527 6.275h-1.951V204h2.478zm7.33 23.133v2.619c0 1.066-.269 2.191-.808 3.375a8.11 8.11 0 01-2.268 2.988l-1.845-1.283c.375-.516.691-1.043.949-1.582a7.469 7.469 0 00.58-1.652c.141-.563.211-1.16.211-1.793v-2.672h3.181zM464.758 204v2.391l-.528 6.275h-1.951V204h2.479zm4.746 0v2.391l-.527 6.275h-1.952V204h2.479zm11.215 27.352c-1.324 0-2.526-.223-3.604-.668a8.184 8.184 0 01-2.76-1.916 8.536 8.536 0 01-1.757-2.918c-.41-1.125-.616-2.356-.616-3.692v-.738c0-1.547.229-2.924.686-4.131.457-1.219 1.078-2.25 1.863-3.094a7.998 7.998 0 012.672-1.916 7.683 7.683 0 013.094-.65c1.359 0 2.531.234 3.515.703a6.406 6.406 0 012.444 1.969c.633.832 1.101 1.816 1.406 2.953.305 1.125.457 2.355.457 3.691v1.459h-14.203v-2.654h10.951v-.246a8.104 8.104 0 00-.527-2.461 4.43 4.43 0 00-1.406-1.969c-.645-.515-1.524-.773-2.637-.773-.738 0-1.418.158-2.039.474-.621.305-1.154.762-1.6 1.371-.445.61-.791 1.354-1.037 2.233-.246.879-.369 1.892-.369 3.041v.738c0 .903.123 1.752.369 2.549a6.512 6.512 0 001.108 2.074 5.3 5.3 0 001.775 1.407c.703.339 1.5.509 2.391.509 1.148 0 2.121-.234 2.917-.703a7.223 7.223 0 002.092-1.881l1.969 1.565a9.104 9.104 0 01-1.564 1.775c-.633.563-1.413 1.02-2.338 1.371-.914.352-1.998.528-3.252.528zM494.078 204v2.391l-.527 6.275H491.6V204h2.478zm4.746 0v2.391l-.527 6.275h-1.951V204h2.478zm2.074.422v-2.672h6.645v34.734h-6.645v-2.672h3.375v-29.39h-3.375z" fill="#000"></path><path d="M276.595 195.474a1.5 1.5 0 00.879 1.931l12.644 4.732a1.5 1.5 0 001.051-2.81l-11.238-4.206 4.206-11.239a1.5 1.5 0 00-2.81-1.051l-4.732 12.643zm112.783-51.839l-112 51 1.244 2.73 112-51-1.244-2.73zM397.298 98.326a1.5 1.5 0 002.028-.624l6.316-11.931a1.5 1.5 0 00-2.651-1.404l-5.615 10.605-10.605-5.614a1.5 1.5 0 00-1.404 2.651l11.931 6.317zM380.566 45.44l16 52 2.868-.882-16-52-2.868.882z" fill="#66DDD6" fill-opacity=".32"></path><path d="M339.509 98.411a1.5 1.5 0 00.902-1.92l-4.579-12.7a1.5 1.5 0 10-2.822 1.018l4.07 11.289-11.289 4.07a1.5 1.5 0 101.018 2.822l12.7-4.579zM238.362 51.358l100 47 1.276-2.716-100-47-1.276 2.715zM268.517 186.777a1.499 1.499 0 001.26 1.706l13.35 2.009a1.5 1.5 0 00.446-2.967l-11.867-1.785 1.786-11.867a1.5 1.5 0 00-2.967-.446l-2.008 13.35zm65.592-48.984l-65 48 1.782 2.414 65-48-1.782-2.414zM351.498 426.415a1.5 1.5 0 00.917-1.913l-4.479-12.735a1.5 1.5 0 00-2.83.995l3.981 11.321-11.32 3.981a1.5 1.5 0 00.995 2.83l12.736-4.479zm-99.147-47.063l98 47.001 1.298-2.705-98-47-1.298 2.704zM313.5 501.015a1.5 1.5 0 001.515 1.485l13.5-.139a1.5 1.5 0 00-.031-3l-12 .124-.123-12a1.5 1.5 0 00-3 .031l.139 13.499zm48.428-50.065l-48 49 2.144 2.1 48-49-2.144-2.1z" fill="#D66" fill-opacity=".32"></path><path d="M70.693 448.748v-9.791c0-.75-.152-1.4-.457-1.951a2.99 2.99 0 00-1.336-1.301c-.597-.305-1.336-.457-2.215-.457-.82 0-1.54.141-2.162.422-.609.281-1.09.65-1.441 1.107-.34.457-.51.95-.51 1.477H59.32c0-.68.176-1.354.528-2.022.351-.668.855-1.271 1.511-1.81.668-.551 1.465-.984 2.391-1.301.938-.328 1.98-.492 3.129-.492 1.383 0 2.602.234 3.656.703 1.067.469 1.899 1.178 2.496 2.127.61.937.914 2.115.914 3.533v8.86c0 .632.053 1.306.159 2.021.117.715.287 1.33.51 1.846V452H71.22c-.164-.375-.293-.873-.387-1.494a12.048 12.048 0 01-.14-1.758zm.563-8.279l.035 2.285h-3.287c-.926 0-1.752.076-2.479.228-.726.141-1.336.358-1.828.651-.492.293-.867.662-1.125 1.107-.258.434-.387.944-.387 1.53 0 .597.135 1.142.405 1.634s.674.885 1.213 1.178c.55.281 1.224.422 2.021.422.996 0 1.875-.211 2.637-.633.762-.422 1.365-.937 1.81-1.547.457-.609.704-1.201.739-1.775l1.388 1.564c-.082.492-.304 1.037-.667 1.635-.364.598-.85 1.172-1.46 1.723-.597.539-1.312.99-2.144 1.353-.82.352-1.746.528-2.777.528-1.29 0-2.42-.252-3.393-.756-.96-.504-1.71-1.178-2.25-2.022-.527-.855-.791-1.81-.791-2.865 0-1.02.2-1.916.598-2.689a5.19 5.19 0 011.722-1.952c.75-.527 1.653-.925 2.707-1.195 1.055-.269 2.233-.404 3.534-.404h3.779zm11.056-4.5V452h-3.251v-19.02h3.164l.088 2.989zm5.942-3.094l-.018 3.023a4.79 4.79 0 00-.773-.105 8.363 8.363 0 00-.809-.035c-.75 0-1.412.117-1.986.351a4.123 4.123 0 00-1.459.985 4.742 4.742 0 00-.95 1.511 7.269 7.269 0 00-.439 1.899l-.914.527c0-1.148.112-2.226.334-3.234.235-1.008.592-1.899 1.073-2.672.48-.785 1.09-1.395 1.828-1.828.75-.445 1.64-.668 2.671-.668.235 0 .504.029.81.088.304.047.515.099.632.158zm6.258 3.094V452H91.26v-19.02h3.164l.088 2.989zm5.941-3.094l-.017 3.023a4.803 4.803 0 00-.774-.105 8.363 8.363 0 00-.809-.035c-.75 0-1.412.117-1.986.351a4.123 4.123 0 00-1.459.985 4.745 4.745 0 00-.949 1.511 7.269 7.269 0 00-.44 1.899l-.913.527c0-1.148.11-2.226.334-3.234.234-1.008.591-1.899 1.072-2.672.48-.785 1.09-1.395 1.828-1.828.75-.445 1.64-.668 2.672-.668.234 0 .504.029.808.088.305.047.516.099.633.158zm13.518 15.873v-9.791c0-.75-.153-1.4-.457-1.951a2.994 2.994 0 00-1.336-1.301c-.598-.305-1.336-.457-2.215-.457-.82 0-1.541.141-2.162.422-.61.281-1.09.65-1.442 1.107-.339.457-.509.95-.509 1.477h-3.252c0-.68.175-1.354.527-2.022.352-.668.855-1.271 1.512-1.81.668-.551 1.465-.984 2.39-1.301.938-.328 1.981-.492 3.129-.492 1.383 0 2.602.234 3.656.703 1.067.469 1.899 1.178 2.497 2.127.609.937.914 2.115.914 3.533v8.86c0 .632.052 1.306.158 2.021.117.715.287 1.33.51 1.846V452h-3.393c-.164-.375-.293-.873-.387-1.494a12.155 12.155 0 01-.14-1.758zm.562-8.279l.035 2.285h-3.287c-.926 0-1.752.076-2.478.228-.727.141-1.336.358-1.828.651-.493.293-.868.662-1.125 1.107-.258.434-.387.944-.387 1.53 0 .597.135 1.142.404 1.634.27.492.674.885 1.213 1.178.551.281 1.225.422 2.022.422.996 0 1.875-.211 2.636-.633.762-.422 1.366-.937 1.811-1.547.457-.609.703-1.201.738-1.775l1.389 1.564c-.082.492-.305 1.037-.668 1.635-.363.598-.85 1.172-1.459 1.723a7.877 7.877 0 01-2.145 1.353c-.82.352-1.746.528-2.777.528-1.289 0-2.42-.252-3.393-.756-.961-.504-1.711-1.178-2.25-2.022-.527-.855-.791-1.81-.791-2.865 0-1.02.2-1.916.598-2.689a5.188 5.188 0 011.723-1.952c.75-.527 1.652-.925 2.707-1.195 1.054-.269 2.232-.404 3.533-.404h3.779zm12.867 9.562l5.291-17.051h3.481l-7.629 21.956c-.176.468-.41.972-.703 1.511a7.234 7.234 0 01-1.09 1.565c-.445.492-.984.89-1.617 1.195-.621.316-1.365.475-2.233.475-.257 0-.586-.036-.984-.106a9.41 9.41 0 01-.844-.176l-.017-2.636c.093.011.24.023.439.035.211.023.358.035.44.035.738 0 1.365-.1 1.88-.299.516-.187.95-.51 1.301-.967.364-.445.674-1.06.932-1.845l1.353-3.692zm-3.884-17.051l4.939 14.766.844 3.428-2.338 1.195-6.996-19.389h3.551zm25.927-6.714V452h-3.252v-21.674l-6.556 2.391v-2.936l9.299-3.515h.509zm9.967 24.011c0-.55.17-1.013.51-1.388.351-.387.855-.58 1.512-.58.656 0 1.154.193 1.494.58.351.375.527.838.527 1.388 0 .539-.176.996-.527 1.371-.34.375-.838.563-1.494.563-.657 0-1.161-.188-1.512-.563-.34-.375-.51-.832-.51-1.371zm17.051-.597c.773 0 1.488-.159 2.144-.475a4.41 4.41 0 001.618-1.301 3.613 3.613 0 00.72-1.916h3.094c-.058 1.125-.439 2.174-1.142 3.147-.692.961-1.6 1.74-2.725 2.338-1.125.586-2.361.879-3.709.879-1.43 0-2.678-.252-3.744-.756a7.42 7.42 0 01-2.637-2.075 9.249 9.249 0 01-1.564-3.023 12.75 12.75 0 01-.51-3.639v-.738c0-1.277.17-2.484.51-3.621a9.24 9.24 0 011.564-3.041 7.418 7.418 0 012.637-2.074c1.066-.504 2.314-.756 3.744-.756 1.488 0 2.789.305 3.902.914 1.114.598 1.987 1.418 2.619 2.461.645 1.031.997 2.203 1.055 3.516h-3.094a4.668 4.668 0 00-.668-2.127 4.163 4.163 0 00-1.546-1.512c-.645-.387-1.401-.58-2.268-.58-.996 0-1.834.199-2.514.597a4.401 4.401 0 00-1.599 1.582 7.392 7.392 0 00-.844 2.198 12.087 12.087 0 00-.246 2.443v.738c0 .832.082 1.653.246 2.461.164.809.439 1.541.826 2.198a4.608 4.608 0 001.6 1.582c.679.386 1.523.58 2.531.58zm10.371-6.979v-.404c0-1.371.199-2.643.598-3.815.398-1.183.972-2.209 1.722-3.076a7.696 7.696 0 012.725-2.039c1.066-.492 2.262-.738 3.586-.738 1.336 0 2.537.246 3.603.738a7.647 7.647 0 012.743 2.039c.761.867 1.341 1.893 1.74 3.076.398 1.172.597 2.444.597 3.815v.404c0 1.371-.199 2.643-.597 3.815a9.147 9.147 0 01-1.74 3.076 7.978 7.978 0 01-2.725 2.039c-1.055.48-2.25.721-3.586.721-1.336 0-2.537-.241-3.603-.721a8.154 8.154 0 01-2.743-2.039c-.75-.879-1.324-1.904-1.722-3.076-.399-1.172-.598-2.444-.598-3.815zm3.252-.404v.404c0 .949.111 1.846.334 2.69.223.832.557 1.57 1.002 2.214a5.065 5.065 0 001.705 1.53c.68.363 1.471.545 2.373.545.891 0 1.67-.182 2.338-.545a4.898 4.898 0 001.687-1.53 7.04 7.04 0 001.002-2.214 9.99 9.99 0 00.352-2.69v-.404a9.72 9.72 0 00-.352-2.654 6.826 6.826 0 00-1.019-2.233 4.844 4.844 0 00-1.688-1.547c-.668-.375-1.453-.562-2.355-.562-.891 0-1.676.187-2.356.562a5.059 5.059 0 00-1.687 1.547 7.078 7.078 0 00-1.002 2.233 10.21 10.21 0 00-.334 2.654zm21.393-5.66v22.675h-3.27V432.98h2.988l.282 3.657zm12.814 5.695v.369c0 1.383-.164 2.666-.492 3.85-.328 1.172-.809 2.191-1.442 3.058a6.554 6.554 0 01-2.302 2.022c-.914.48-1.963.721-3.147.721-1.207 0-2.273-.2-3.199-.598a6.316 6.316 0 01-2.355-1.74c-.645-.762-1.161-1.676-1.547-2.743-.375-1.066-.633-2.267-.774-3.603v-1.969c.141-1.406.405-2.666.791-3.779.387-1.113.897-2.063 1.53-2.848a6.268 6.268 0 012.337-1.81c.914-.422 1.969-.633 3.164-.633 1.196 0 2.256.234 3.182.703a6.398 6.398 0 012.338 1.969c.633.855 1.107 1.881 1.424 3.076.328 1.184.492 2.502.492 3.955zm-3.27.369v-.369c0-.949-.099-1.84-.298-2.672-.2-.844-.51-1.582-.932-2.215a4.433 4.433 0 00-1.582-1.511c-.645-.375-1.412-.563-2.303-.563-.82 0-1.535.141-2.144.422a4.628 4.628 0 00-1.53 1.143 6.073 6.073 0 00-1.037 1.617 9.324 9.324 0 00-.58 1.863v4.553c.235.82.563 1.593.985 2.32a5.088 5.088 0 001.687 1.74c.703.434 1.588.651 2.654.651.879 0 1.635-.182 2.268-.545a4.584 4.584 0 001.582-1.53 6.977 6.977 0 00.932-2.214c.199-.844.298-1.741.298-2.69zm12.551 7.33l5.291-17.051h3.481l-7.629 21.956c-.176.468-.41.972-.703 1.511a7.269 7.269 0 01-1.09 1.565c-.445.492-.984.89-1.617 1.195-.621.316-1.366.475-2.233.475-.258 0-.586-.036-.984-.106a9.332 9.332 0 01-.844-.176l-.017-2.636c.093.011.24.023.439.035.211.023.357.035.439.035.739 0 1.366-.1 1.881-.299.516-.187.95-.51 1.301-.967.363-.445.674-1.06.932-1.845l1.353-3.692zm-3.884-17.051l4.939 14.766.844 3.428-2.338 1.195-6.996-19.389h3.551zm22.816 11.286l5.08-17.86h2.461l-1.424 6.944-5.467 18.65h-2.443l1.793-7.734zm-5.256-17.86l4.043 17.508 1.213 8.086h-2.426l-6.205-25.594h3.375zm19.371 17.49l3.955-17.49h3.393L267.779 452h-2.425l1.265-8.104zm-6.205-17.49l4.94 17.86 1.792 7.734h-2.443l-5.273-18.65-1.442-6.944h2.426zm20.356 6.574V452h-3.27v-19.02h3.27zm-3.516-5.044c0-.528.158-.973.475-1.336.328-.364.808-.545 1.441-.545.621 0 1.096.181 1.424.545.34.363.51.808.51 1.336 0 .503-.17.937-.51 1.3-.328.352-.803.528-1.424.528-.633 0-1.113-.176-1.441-.528a1.911 1.911 0 01-.475-1.3zm16.699 5.044v2.497H283.67v-2.497h10.283zm-6.803-4.623h3.252v18.932c0 .645.1 1.131.299 1.459.199.328.457.545.774.65.316.106.656.159 1.019.159.27 0 .551-.024.844-.071.305-.058.533-.105.685-.14l.018 2.654a7.717 7.717 0 01-1.02.229c-.41.082-.908.123-1.494.123a5.072 5.072 0 01-2.197-.475c-.668-.316-1.201-.844-1.6-1.582-.386-.75-.58-1.758-.58-3.024v-18.914zM301.02 425v27h-3.252v-27h3.252zm-.774 16.77l-1.353-.053c.011-1.301.205-2.502.58-3.604.375-1.113.902-2.08 1.582-2.9a7.057 7.057 0 012.425-1.899c.95-.457 1.999-.685 3.147-.685.937 0 1.781.129 2.531.387.75.246 1.389.644 1.916 1.195.539.551.949 1.266 1.231 2.144.281.868.422 1.928.422 3.182V452h-3.27v-12.498c0-.996-.146-1.793-.439-2.391-.293-.609-.721-1.049-1.284-1.318-.562-.281-1.254-.422-2.074-.422-.808 0-1.547.17-2.215.51a5.303 5.303 0 00-1.705 1.406 7.055 7.055 0 00-1.107 2.057 7.507 7.507 0 00-.387 2.426zm20.883-8.79V452h-3.27v-19.02h3.27zm-3.516-5.044c0-.528.158-.973.475-1.336.328-.364.808-.545 1.441-.545.621 0 1.096.181 1.424.545.34.363.51.808.51 1.336 0 .503-.17.937-.51 1.3-.328.352-.803.528-1.424.528-.633 0-1.113-.176-1.441-.528a1.911 1.911 0 01-.475-1.3zm11.989 9.105V452h-3.252v-19.02h3.076l.176 4.061zm-.774 4.729l-1.353-.053c.011-1.301.205-2.502.58-3.604.375-1.113.902-2.08 1.582-2.9a7.057 7.057 0 012.425-1.899c.95-.457 1.999-.685 3.147-.685.937 0 1.781.129 2.531.387.75.246 1.389.644 1.916 1.195.539.551.949 1.266 1.231 2.144.281.868.422 1.928.422 3.182V452h-3.27v-12.498c0-.996-.146-1.793-.439-2.391-.293-.609-.721-1.049-1.284-1.318-.562-.281-1.254-.422-2.074-.422-.808 0-1.547.17-2.215.51a5.303 5.303 0 00-1.705 1.406 7.078 7.078 0 00-1.107 2.057 7.507 7.507 0 00-.387 2.426zm17.297 0v-.176c0-2.555.287-4.864.861-6.926.575-2.074 1.307-3.891 2.198-5.449.89-1.559 1.828-2.848 2.812-3.867.984-1.032 1.893-1.776 2.725-2.233l.685 2.145c-.691.527-1.394 1.254-2.109 2.179-.703.926-1.354 2.063-1.951 3.411-.586 1.347-1.061 2.912-1.424 4.693-.363 1.781-.545 3.785-.545 6.012v.246c0 2.226.182 4.236.545 6.029.363 1.781.838 3.352 1.424 4.711.597 1.359 1.248 2.514 1.951 3.463.715.961 1.418 1.722 2.109 2.285l-.685 1.969c-.832-.457-1.741-1.201-2.725-2.233-.984-1.019-1.922-2.308-2.812-3.867-.891-1.547-1.623-3.357-2.198-5.432-.574-2.074-.861-4.394-.861-6.96zm22.799-15.504V452h-3.252v-21.674l-6.557 2.391v-2.936l9.299-3.515h.51zm12.867 21.867v2.619c0 1.066-.27 2.191-.809 3.375a8.107 8.107 0 01-2.267 2.988l-1.846-1.283c.375-.516.692-1.043.949-1.582a7.418 7.418 0 00.58-1.652c.141-.563.211-1.16.211-1.793v-2.672h3.182zm17.473-10.529h2.32c1.137 0 2.074-.188 2.812-.563.75-.387 1.307-.908 1.67-1.564.375-.668.563-1.418.563-2.25 0-.985-.164-1.811-.492-2.479a3.298 3.298 0 00-1.477-1.512c-.656-.34-1.488-.509-2.496-.509-.914 0-1.723.181-2.426.544a3.993 3.993 0 00-1.634 1.512c-.387.656-.581 1.43-.581 2.321h-3.252c0-1.301.329-2.485.985-3.551.656-1.067 1.576-1.916 2.76-2.549 1.195-.633 2.578-.949 4.148-.949 1.547 0 2.9.275 4.061.826a6.05 6.05 0 012.707 2.426c.644 1.066.966 2.396.966 3.99 0 .644-.152 1.336-.457 2.074-.293.727-.755 1.406-1.388 2.039-.621.633-1.43 1.154-2.426 1.565-.996.398-2.191.597-3.586.597h-2.777v-1.968zm0 2.671v-1.951h2.777c1.629 0 2.977.194 4.043.58 1.066.387 1.904.903 2.514 1.547.621.645 1.054 1.354 1.3 2.127.258.762.387 1.524.387 2.285 0 1.196-.205 2.256-.615 3.182a6.486 6.486 0 01-1.705 2.355 7.283 7.283 0 01-2.567 1.459c-.984.329-2.056.493-3.216.493-1.114 0-2.162-.159-3.147-.475a8.13 8.13 0 01-2.584-1.371 6.427 6.427 0 01-1.758-2.233c-.422-.89-.632-1.904-.632-3.041h3.251c0 .891.194 1.67.581 2.338.398.668.961 1.19 1.687 1.565.738.363 1.606.545 2.602.545.996 0 1.851-.17 2.566-.51a3.701 3.701 0 001.67-1.582c.398-.703.598-1.588.598-2.654 0-1.067-.223-1.94-.668-2.62-.446-.691-1.078-1.201-1.899-1.529-.808-.34-1.763-.51-2.865-.51h-2.32zm23.343 1.319v.176c0 2.566-.287 4.886-.861 6.96-.574 2.075-1.307 3.885-2.197 5.432-.891 1.559-1.828 2.848-2.813 3.867-.984 1.032-1.892 1.776-2.724 2.233l-.686-1.969c.692-.527 1.389-1.266 2.092-2.215.703-.937 1.353-2.098 1.951-3.48.598-1.371 1.078-2.953 1.442-4.746.363-1.805.544-3.821.544-6.047v-.246c0-2.227-.193-4.237-.58-6.03-.386-1.804-.89-3.392-1.511-4.763-.61-1.371-1.266-2.526-1.969-3.463-.691-.949-1.348-1.682-1.969-2.198l.686-1.986c.832.457 1.74 1.201 2.724 2.233.985 1.019 1.922 2.308 2.813 3.867.89 1.558 1.623 3.375 2.197 5.449.574 2.062.861 4.371.861 6.926zm12.551 0v.176c0 2.566-.287 4.886-.861 6.96-.574 2.075-1.307 3.885-2.197 5.432-.891 1.559-1.829 2.848-2.813 3.867-.984 1.032-1.892 1.776-2.725 2.233l-.685-1.969c.691-.527 1.389-1.266 2.092-2.215.703-.937 1.353-2.098 1.951-3.48.598-1.371 1.078-2.953 1.441-4.746.364-1.805.545-3.821.545-6.047v-.246c0-2.227-.193-4.237-.58-6.03-.387-1.804-.89-3.392-1.512-4.763-.609-1.371-1.265-2.526-1.968-3.463-.692-.949-1.348-1.682-1.969-2.198l.685-1.986c.833.457 1.741 1.201 2.725 2.233.984 1.019 1.922 2.308 2.813 3.867.89 1.558 1.623 3.375 2.197 5.449.574 2.062.861 4.371.861 6.926zM1.617 519.701v-.404c0-1.371.2-2.643.598-3.815.398-1.183.973-2.209 1.723-3.076a7.69 7.69 0 012.724-2.039c1.067-.492 2.262-.738 3.586-.738 1.336 0 2.537.246 3.604.738a7.652 7.652 0 012.742 2.039c.761.867 1.341 1.893 1.74 3.076.398 1.172.598 2.444.598 3.815v.404c0 1.371-.2 2.643-.598 3.815a9.127 9.127 0 01-1.74 3.076 7.973 7.973 0 01-2.725 2.039c-1.054.48-2.25.721-3.586.721-1.336 0-2.537-.241-3.603-.721a8.154 8.154 0 01-2.742-2.039c-.75-.879-1.325-1.904-1.723-3.076-.399-1.172-.598-2.444-.598-3.815zm3.252-.404v.404c0 .949.111 1.846.334 2.69a7.07 7.07 0 001.002 2.214 5.069 5.069 0 001.705 1.53c.68.363 1.47.545 2.373.545.89 0 1.67-.182 2.338-.545a4.905 4.905 0 001.688-1.53 7.069 7.069 0 001.002-2.214c.234-.844.351-1.741.351-2.69v-.404c0-.938-.117-1.822-.352-2.654a6.84 6.84 0 00-1.019-2.233 4.848 4.848 0 00-1.688-1.547c-.668-.375-1.453-.562-2.355-.562-.89 0-1.676.187-2.355.562a5.06 5.06 0 00-1.688 1.547 7.064 7.064 0 00-1.002 2.233 10.226 10.226 0 00-.334 2.654zm29.778 5.308V509.98h3.269V529h-3.111l-.158-4.395zm.615-4.007l1.353-.036c0 1.266-.135 2.438-.404 3.516-.258 1.067-.68 1.992-1.266 2.777-.586.786-1.353 1.401-2.302 1.846-.95.434-2.104.651-3.463.651-.926 0-1.776-.135-2.55-.405a5.08 5.08 0 01-1.968-1.248c-.55-.562-.978-1.295-1.283-2.197-.293-.902-.44-1.986-.44-3.252v-12.27h3.252v12.305c0 .856.094 1.565.282 2.127.199.551.463.99.79 1.318.34.317.715.54 1.126.668.422.129.855.194 1.3.194 1.383 0 2.479-.264 3.288-.791a4.509 4.509 0 001.74-2.162c.363-.914.545-1.928.545-3.041zm15.574-10.618v2.497H40.553v-2.497h10.283zm-6.803-4.623h3.252v18.932c0 .645.1 1.131.299 1.459.2.328.457.545.773.65a3.19 3.19 0 001.02.159c.27 0 .55-.024.844-.071.304-.058.533-.105.685-.14l.018 2.654a7.703 7.703 0 01-1.02.229c-.41.082-.908.123-1.494.123-.797 0-1.53-.159-2.197-.475-.668-.316-1.201-.844-1.6-1.582-.386-.75-.58-1.758-.58-3.024v-18.914zm13.87 8.28v22.675h-3.27V509.98h2.988l.281 3.657zm12.814 5.695v.369c0 1.383-.164 2.666-.492 3.85-.328 1.172-.809 2.191-1.442 3.058a6.557 6.557 0 01-2.302 2.022c-.915.48-1.963.721-3.147.721-1.207 0-2.274-.2-3.2-.598a6.323 6.323 0 01-2.355-1.74c-.644-.762-1.16-1.676-1.547-2.743-.375-1.066-.632-2.267-.773-3.603v-1.969c.14-1.406.404-2.666.791-3.779s.897-2.063 1.53-2.848a6.274 6.274 0 012.337-1.81c.914-.422 1.969-.633 3.164-.633 1.196 0 2.256.234 3.182.703a6.397 6.397 0 012.338 1.969c.633.855 1.107 1.881 1.424 3.076.328 1.184.492 2.502.492 3.955zm-3.27.369v-.369c0-.949-.1-1.84-.299-2.672-.199-.844-.51-1.582-.931-2.215a4.438 4.438 0 00-1.582-1.511c-.645-.375-1.412-.563-2.303-.563-.82 0-1.535.141-2.145.422a4.627 4.627 0 00-1.529 1.143 6.04 6.04 0 00-1.037 1.617 9.266 9.266 0 00-.58 1.863v4.553c.234.82.563 1.593.984 2.32a5.097 5.097 0 001.688 1.74c.703.434 1.588.651 2.654.651.88 0 1.635-.182 2.268-.545a4.59 4.59 0 001.582-1.53 6.96 6.96 0 00.931-2.214c.2-.844.3-1.741.3-2.69zm19.055 4.904V509.98h3.27V529H86.66l-.158-4.395zm.615-4.007l1.354-.036c0 1.266-.135 2.438-.405 3.516-.257 1.067-.68 1.992-1.265 2.777-.586.786-1.354 1.401-2.303 1.846-.95.434-2.104.651-3.463.651-.926 0-1.775-.135-2.549-.405a5.081 5.081 0 01-1.968-1.248c-.551-.562-.979-1.295-1.284-2.197-.293-.902-.44-1.986-.44-3.252v-12.27h3.253v12.305c0 .856.094 1.565.281 2.127.2.551.463.99.791 1.318.34.317.715.54 1.125.668.422.129.856.194 1.3.194 1.384 0 2.48-.264 3.288-.791a4.509 4.509 0 001.74-2.162c.364-.914.545-1.928.545-3.041zm15.574-10.618v2.497H92.408v-2.497h10.283zm-6.802-4.623h3.252v18.932c0 .645.1 1.131.298 1.459.2.328.458.545.774.65.316.106.656.159 1.019.159.27 0 .551-.024.844-.071.305-.058.533-.105.686-.14l.017 2.654a7.697 7.697 0 01-1.019.229c-.41.082-.908.123-1.494.123-.797 0-1.53-.159-2.198-.475-.668-.316-1.2-.844-1.6-1.582-.386-.75-.58-1.758-.58-3.024v-18.914zm10.476 21.92c0-.55.17-1.013.51-1.388.352-.387.855-.58 1.512-.58.656 0 1.154.193 1.494.58.351.375.527.838.527 1.388 0 .539-.176.996-.527 1.371-.34.375-.838.563-1.494.563-.657 0-1.16-.188-1.512-.563-.34-.375-.51-.832-.51-1.371zm.018-15.521c0-.551.17-1.014.51-1.389.351-.387.855-.58 1.511-.58.657 0 1.155.193 1.494.58.352.375.528.838.528 1.389 0 .539-.176.996-.528 1.371-.339.375-.837.562-1.494.562-.656 0-1.16-.187-1.511-.562-.34-.375-.51-.832-.51-1.371zm27.738-6.082L125.648 529h-3.462l9.755-25.594h2.233l-.053 2.268zM141.223 529l-8.491-23.326-.052-2.268h2.232L144.703 529h-3.48zm-.44-9.475v2.778h-14.379v-2.778h14.379zm10.108-6.556V529h-3.252v-19.02h3.164l.088 2.989zm5.941-3.094l-.018 3.023a4.779 4.779 0 00-.773-.105 8.36 8.36 0 00-.809-.035c-.75 0-1.412.117-1.986.351a4.13 4.13 0 00-1.459.985 4.745 4.745 0 00-.949 1.511 7.285 7.285 0 00-.44 1.899l-.914.527c0-1.148.112-2.226.334-3.234.235-1.008.592-1.899 1.073-2.672.48-.785 1.089-1.395 1.828-1.828.75-.445 1.64-.668 2.672-.668a4.3 4.3 0 01.808.088c.305.047.516.099.633.158zm6.258 3.094V529h-3.252v-19.02h3.164l.088 2.989zm5.941-3.094l-.017 3.023a4.805 4.805 0 00-.774-.105 8.354 8.354 0 00-.808-.035c-.75 0-1.412.117-1.987.351a4.13 4.13 0 00-1.459.985 4.745 4.745 0 00-.949 1.511 7.245 7.245 0 00-.439 1.899l-.914.527c0-1.148.111-2.226.334-3.234.234-1.008.591-1.899 1.072-2.672.48-.785 1.09-1.395 1.828-1.828.75-.445 1.641-.668 2.672-.668a4.3 4.3 0 01.808.088c.305.047.516.099.633.158zm13.518 15.873v-9.791c0-.75-.153-1.4-.457-1.951a2.99 2.99 0 00-1.336-1.301c-.598-.305-1.336-.457-2.215-.457-.82 0-1.541.141-2.162.422-.609.281-1.09.65-1.441 1.107-.34.457-.51.95-.51 1.477h-3.252c0-.68.176-1.354.527-2.022.352-.668.856-1.271 1.512-1.81.668-.551 1.465-.984 2.39-1.301.938-.328 1.981-.492 3.129-.492 1.383 0 2.602.234 3.657.703 1.066.469 1.898 1.178 2.496 2.127.609.937.914 2.115.914 3.533v8.86c0 .632.053 1.306.158 2.021.117.715.287 1.33.51 1.846V529h-3.393c-.164-.375-.293-.873-.387-1.494a12.155 12.155 0 01-.14-1.758zm.562-8.279l.035 2.285h-3.287c-.925 0-1.752.076-2.478.228-.727.141-1.336.358-1.828.651a3.096 3.096 0 00-1.125 1.107c-.258.434-.387.944-.387 1.53 0 .597.135 1.142.404 1.634.27.492.674.885 1.213 1.178.551.281 1.225.422 2.022.422.996 0 1.875-.211 2.636-.633.762-.422 1.366-.937 1.811-1.547.457-.609.703-1.201.738-1.775l1.389 1.564c-.082.492-.305 1.037-.668 1.635-.363.598-.85 1.172-1.459 1.723a7.877 7.877 0 01-2.145 1.353c-.82.352-1.746.528-2.777.528-1.289 0-2.42-.252-3.393-.756-.96-.504-1.71-1.178-2.25-2.022-.527-.855-.791-1.81-.791-2.865 0-1.02.2-1.916.598-2.689a5.197 5.197 0 011.723-1.952c.75-.527 1.652-.925 2.707-1.195 1.055-.269 2.232-.404 3.533-.404h3.779zm12.868 9.562l5.291-17.051h3.48l-7.629 21.956c-.176.468-.41.972-.703 1.511a7.234 7.234 0 01-1.09 1.565c-.445.492-.984.89-1.617 1.195-.621.316-1.365.475-2.232.475-.258 0-.586-.036-.985-.106a9.41 9.41 0 01-.844-.176l-.017-2.636c.094.011.24.023.439.035.211.023.358.035.44.035.738 0 1.365-.1 1.881-.299a2.84 2.84 0 001.3-.967c.364-.445.674-1.06.932-1.845l1.354-3.692zm-3.885-17.051l4.939 14.766.844 3.428-2.338 1.195-6.996-19.389h3.551zm31.236-10.23v2.672h-3.357v29.39h3.357v2.672h-6.609V499.75h6.609zm5.256 2.25v2.391l-.527 6.275h-1.952V502h2.479zm4.746 0v2.391l-.527 6.275h-1.951V502h2.478zm14.713 23.748v-9.791c0-.75-.152-1.4-.457-1.951a2.99 2.99 0 00-1.336-1.301c-.598-.305-1.336-.457-2.215-.457-.82 0-1.541.141-2.162.422-.609.281-1.09.65-1.441 1.107-.34.457-.51.95-.51 1.477h-3.252c0-.68.176-1.354.527-2.022.352-.668.856-1.271 1.512-1.81.668-.551 1.465-.984 2.391-1.301.937-.328 1.98-.492 3.128-.492 1.383 0 2.602.234 3.657.703 1.066.469 1.898 1.178 2.496 2.127.609.937.914 2.115.914 3.533v8.86c0 .632.053 1.306.158 2.021.117.715.287 1.33.51 1.846V529h-3.393c-.164-.375-.293-.873-.386-1.494a12.024 12.024 0 01-.141-1.758zm.562-8.279l.036 2.285h-3.288c-.925 0-1.751.076-2.478.228-.727.141-1.336.358-1.828.651a3.096 3.096 0 00-1.125 1.107c-.258.434-.387.944-.387 1.53 0 .597.135 1.142.404 1.634.27.492.674.885 1.213 1.178.551.281 1.225.422 2.022.422.996 0 1.875-.211 2.636-.633.762-.422 1.366-.937 1.811-1.547.457-.609.703-1.201.738-1.775l1.389 1.564c-.082.492-.305 1.037-.668 1.635-.363.598-.85 1.172-1.459 1.723a7.871 7.871 0 01-2.144 1.353c-.821.352-1.747.528-2.778.528-1.289 0-2.42-.252-3.392-.756-.961-.504-1.711-1.178-2.25-2.022-.528-.855-.791-1.81-.791-2.865 0-1.02.199-1.916.597-2.689a5.197 5.197 0 011.723-1.952c.75-.527 1.652-.925 2.707-1.195 1.055-.269 2.232-.404 3.533-.404h3.779zM257.625 502v2.391l-.527 6.275h-1.952V502h2.479zm4.746 0v2.391l-.527 6.275h-1.951V502h2.478zm7.33 23.133v2.619c0 1.066-.269 2.191-.808 3.375a8.11 8.11 0 01-2.268 2.988l-1.846-1.283a10.14 10.14 0 00.95-1.582 7.52 7.52 0 00.58-1.652c.14-.563.211-1.16.211-1.793v-2.672h3.181zM285.188 502v2.391l-.528 6.275h-1.951V502h2.479zm4.746 0v2.391l-.528 6.275h-1.951V502h2.479zm15.31 23.309V502h3.27v27h-2.989l-.281-3.691zm-12.797-5.608v-.369c0-1.453.176-2.771.528-3.955.363-1.195.873-2.221 1.529-3.076a6.914 6.914 0 012.373-1.969c.926-.469 1.957-.703 3.094-.703 1.195 0 2.238.211 3.129.633a6.017 6.017 0 012.285 1.81c.633.785 1.131 1.735 1.494 2.848.363 1.113.615 2.373.756 3.779v1.617c-.129 1.395-.381 2.649-.756 3.762-.363 1.113-.861 2.063-1.494 2.848a6.257 6.257 0 01-2.285 1.81c-.903.41-1.957.616-3.164.616-1.114 0-2.133-.241-3.059-.721a7.218 7.218 0 01-2.373-2.022c-.656-.867-1.166-1.886-1.529-3.058-.352-1.184-.528-2.467-.528-3.85zm3.27-.369v.369c0 .949.094 1.84.281 2.672.199.832.504 1.565.914 2.197.41.633.932 1.131 1.565 1.494.632.352 1.388.528 2.267.528 1.078 0 1.963-.229 2.654-.686a5.104 5.104 0 001.688-1.81c.422-.75.75-1.565.984-2.444v-4.236a9.29 9.29 0 00-.615-1.863 5.74 5.74 0 00-1.019-1.617 4.404 4.404 0 00-1.53-1.143c-.597-.281-1.306-.422-2.127-.422-.89 0-1.658.188-2.302.563a4.484 4.484 0 00-1.565 1.511c-.41.633-.715 1.371-.914 2.215a12.168 12.168 0 00-.281 2.672zM315.984 502v2.391l-.527 6.275h-1.951V502h2.478zm4.746 0v2.391l-.527 6.275h-1.951V502h2.478zm7.331 23.133v2.619c0 1.066-.27 2.191-.809 3.375a8.11 8.11 0 01-2.268 2.988l-1.845-1.283c.375-.516.691-1.043.949-1.582a7.469 7.469 0 00.58-1.652c.141-.563.211-1.16.211-1.793v-2.672h3.182zM343.547 502v2.391l-.527 6.275h-1.952V502h2.479zm4.746 0v2.391l-.527 6.275h-1.952V502h2.479zm11.215 27.352c-1.324 0-2.526-.223-3.604-.668a8.17 8.17 0 01-2.759-1.916c-.762-.821-1.348-1.793-1.758-2.918-.41-1.125-.616-2.356-.616-3.692v-.738c0-1.547.229-2.924.686-4.131.457-1.219 1.078-2.25 1.863-3.094a7.998 7.998 0 012.672-1.916 7.686 7.686 0 013.094-.65c1.359 0 2.531.234 3.516.703a6.41 6.41 0 012.443 1.969c.633.832 1.101 1.816 1.406 2.953.305 1.125.457 2.355.457 3.691v1.459h-14.203v-2.654h10.951v-.246a8.104 8.104 0 00-.527-2.461 4.43 4.43 0 00-1.406-1.969c-.645-.515-1.524-.773-2.637-.773-.738 0-1.418.158-2.039.474-.621.305-1.154.762-1.6 1.371-.445.61-.791 1.354-1.037 2.233-.246.879-.369 1.892-.369 3.041v.738c0 .903.123 1.752.369 2.549a6.512 6.512 0 001.108 2.074 5.31 5.31 0 001.775 1.407c.703.339 1.5.509 2.391.509 1.148 0 2.121-.234 2.918-.703a7.232 7.232 0 002.091-1.881l1.969 1.565a9.104 9.104 0 01-1.564 1.775c-.633.563-1.412 1.02-2.338 1.371-.914.352-1.998.528-3.252.528zM372.867 502v2.391l-.527 6.275h-1.951V502h2.478zm4.746 0v2.391l-.527 6.275h-1.951V502h2.478zm7.33 23.133v2.619c0 1.066-.269 2.191-.808 3.375a8.11 8.11 0 01-2.268 2.988l-1.846-1.283a10.14 10.14 0 00.95-1.582 7.469 7.469 0 00.58-1.652c.14-.563.211-1.16.211-1.793v-2.672h3.181zM400.43 502v2.391l-.528 6.275h-1.951V502h2.479zm4.746 0v2.391l-.528 6.275h-1.951V502h2.479zm15.31 23.309V502h3.27v27h-2.988l-.282-3.691zm-12.797-5.608v-.369c0-1.453.176-2.771.528-3.955.363-1.195.873-2.221 1.529-3.076a6.914 6.914 0 012.373-1.969c.926-.469 1.957-.703 3.094-.703 1.195 0 2.238.211 3.129.633a6.017 6.017 0 012.285 1.81c.633.785 1.131 1.735 1.494 2.848.363 1.113.615 2.373.756 3.779v1.617c-.129 1.395-.381 2.649-.756 3.762-.363 1.113-.861 2.063-1.494 2.848a6.257 6.257 0 01-2.285 1.81c-.903.41-1.957.616-3.164.616-1.114 0-2.133-.241-3.059-.721a7.218 7.218 0 01-2.373-2.022c-.656-.867-1.166-1.886-1.529-3.058-.352-1.184-.528-2.467-.528-3.85zm3.27-.369v.369c0 .949.094 1.84.281 2.672.199.832.504 1.565.914 2.197.41.633.932 1.131 1.565 1.494.633.352 1.388.528 2.267.528 1.078 0 1.963-.229 2.655-.686a5.11 5.11 0 001.687-1.81c.422-.75.75-1.565.984-2.444v-4.236a9.29 9.29 0 00-.615-1.863 5.717 5.717 0 00-1.019-1.617 4.395 4.395 0 00-1.53-1.143c-.597-.281-1.306-.422-2.127-.422-.89 0-1.658.188-2.302.563a4.484 4.484 0 00-1.565 1.511c-.41.633-.715 1.371-.914 2.215a12.168 12.168 0 00-.281 2.672zM431.227 502v2.391l-.528 6.275h-1.951V502h2.479zm4.746 0v2.391l-.528 6.275h-1.951V502h2.479zm7.33 23.133v2.619c0 1.066-.27 2.191-.809 3.375a8.117 8.117 0 01-2.267 2.988l-1.846-1.283c.375-.516.691-1.043.949-1.582a7.469 7.469 0 00.58-1.652c.141-.563.211-1.16.211-1.793v-2.672h3.182zM458.789 502v2.391l-.527 6.275h-1.951V502h2.478zm4.746 0v2.391l-.527 6.275h-1.951V502h2.478zm11.215 27.352c-1.324 0-2.525-.223-3.604-.668a8.17 8.17 0 01-2.759-1.916c-.762-.821-1.348-1.793-1.758-2.918-.41-1.125-.615-2.356-.615-3.692v-.738c0-1.547.228-2.924.685-4.131.457-1.219 1.078-2.25 1.863-3.094a8.008 8.008 0 012.672-1.916 7.686 7.686 0 013.094-.65c1.36 0 2.531.234 3.516.703a6.41 6.41 0 012.443 1.969c.633.832 1.102 1.816 1.406 2.953.305 1.125.457 2.355.457 3.691v1.459h-14.203v-2.654h10.951v-.246a8.074 8.074 0 00-.527-2.461 4.43 4.43 0 00-1.406-1.969c-.645-.515-1.524-.773-2.637-.773-.738 0-1.418.158-2.039.474-.621.305-1.154.762-1.6 1.371-.445.61-.791 1.354-1.037 2.233-.246.879-.369 1.892-.369 3.041v.738c0 .903.123 1.752.369 2.549a6.512 6.512 0 001.108 2.074 5.31 5.31 0 001.775 1.407c.703.339 1.5.509 2.391.509 1.148 0 2.121-.234 2.918-.703a7.235 7.235 0 002.092-1.881l1.968 1.565a9.071 9.071 0 01-1.564 1.775c-.633.563-1.412 1.02-2.338 1.371-.914.352-1.998.528-3.252.528zM488.109 502v2.391l-.527 6.275h-1.951V502h2.478zm4.746 0v2.391l-.527 6.275h-1.951V502h2.478zm2.075.422v-2.672h6.644v34.734h-6.644v-2.672h3.375v-29.39h-3.375z" fill="#000"></path></svg><p>上图将 target 位置用红色的部分表示，被复制的元素为蓝色。</p><ol><li><code>a = array1[0]</code> ,所在位置是将要被替换的 target 位置。<code>d = array1[3]</code>是复制的起始元素，复制结束在<code>array1[4]</code>之前。复制后<code>a</code>的位置被 <code>d</code>所取代。</li><li><code>b = array1[1]</code> ,所在位置是将要被替换的 target 位置，<code>d = array1[3]</code>是复制的起始元素，复制没有指定结束位置，所以一直复制到数组末尾。复制后<code>a</code>的位置被 <code>'d','e'</code>所取代。</li></ol>]]>
|
||
</content>
|
||
<category term="JavaScript" scheme="https://seviche.cc/?tags=JavaScript" />
|
||
</entry>
|
||
<entry>
|
||
<title type="html"><![CDATA[VPS 安全初始化]]></title>
|
||
<link href="https://seviche.cc/2022-05-07-vps-init" />
|
||
<id>https://seviche.cc/2022-05-07-vps-init</id>
|
||
<published>2022-05-06T00:00:00.000Z</published>
|
||
<updated>2022-08-01T03:03:33.291Z</updated>
|
||
<summary type="html"><![CDATA[上次 VPS 被别人暴力破解了，一哭二闹三重装之后，有了本文]]></summary>
|
||
<content type="html">
|
||
<![CDATA[<p><strong>前情提要：</strong></p><p>前段时间我所购买的 VPS 服务商 Contabo 发邮件来说，我用 VPS 攻击了其他的服务器，让我快点停止这种行为，要是不改就罚我的钱，但是我并没有在上面装什么奇怪的东西，就只装了一个聊胜于无的 WordPress，手足无措之余在 Mastodon 哀嚎了一下，得到了很多热心网友的帮助，才发现原来我一直在裸奔使用 VPS，什么安全措施都没采取:(</p><p>鉴于 VPS 上本来就没有什么东西，我决定重新初始化机子，本文是初始化的笔记，我的系统是 Ubuntu 20.04，文中提到的 ufw 是内置的，没有额外安装, 有些步骤上有所省略，最好对照着提到的参考文章看。</p><p>（再次感谢 Allen Zhong、糖喵、南狐、shrik3 等朋友的热心指导 o(≧v≦)o！）</p><h2 id="思路"><a href="#思路">思路</a></h2><p>下面这两点都是 Contabo 客服发给我的防护建议，用 Deepl 翻译了一下</p><h3 id="日常防护"><a href="#日常防护">日常防护</a></h3><ul><li>检查你的服务器是否有可疑的进程并删除它们（例如使用以下命令：ps aux| grep stealth)</li><li>检查错误日志，例如/var/log/apache2/error_log，找出是否有任何恶意脚本的错误信息或恶意软件下载的迹象。</li><li>攻击者经常在以下目录中安装恶意软件。/tmp/ , /var/tmp/ - 请使用 find /tmp (find /var/tmp) 来检查隐藏的文件。</li><li>扫描你的服务器以防止安装的 rootkits。</li><li>运行一个防病毒软件，如 ClamAV 或 ClamWin。</li></ul><h3 id="安全检查"><a href="#安全检查">安全检查</a></h3><ol><li>保持定期备份。</li><li>保持你的整个系统一直是最新的，这意味着你必须定期安装使用的软件包和网络应用程序的更新和补丁。</li><li>安装并运行一个防病毒软件，如 ClamAV 或 ClamWin，以保持你的服务器不受恶意软件侵害。</li><li>设置一个防火墙，关闭所有你不需要的端口，并将 SSH 的 22 或 RDP 的 3389 等默认端口改为其他。</li><li>通过安装一个合适的软件，如 cPHulk 或 Fail2ban，阻止暴力攻击。</li><li>避免使用只在不安全的设置下工作的脚本。</li><li>不要点击电子邮件中的任何可疑附件或链接，或访问不安全的网站。</li><li>使用 SSH-Keys 而不是密码。</li></ol><hr><p>最后我将 VPS 里的内容全删了，从 0 出发，下面是具体的操作步骤：</p><h2 id="1-创建新用户"><a href="#1-创建新用户">1. 创建新用户</a></h2><p>参考： <a href="https://yolo.blue/vps-hosting-setup/" rel="nofollow noopener noreferrer external" target="_blank">VPS 建站新手上路 - YOLO</a></p><p>首先用 root 登陆，然后输入 adduser + 用户名 创建新用户，如添加用户<code>jack</code></p><!-- HTML_TAG_START --><pre class="shiki material-default" shell="true"><div class="language-id">shell</div><div class='code-container'><code><div class='line'>adduser jack</div></code></div></pre><!-- HTML_TAG_END --><p>接着输入两遍密码，其他信息可以按 <kbd>Enter </kbd>留空</p><p>给这个用户 root 权限：</p><!-- HTML_TAG_START --><pre class="shiki material-default" shell="true"><div class="language-id">shell</div><div class='code-container'><code><div class='line'>sudo usermod -aG sudo jack</div></code></div></pre><!-- HTML_TAG_END --><p>其他参考： <a href="https://www.myfreax.com/how-to-add-and-delete-users-on-ubuntu-18-04/" rel="nofollow noopener noreferrer external" target="_blank">如何在 Ubuntu 上添加和删除用户 | myfreax</a></p><h2 id="2-配置-ssh-keys"><a href="#2-配置-ssh-keys">2. 配置 SSH-keys</a></h2><p>参考： <a href="https://p3terx.com/archives/configure-ssh-keyfree-login-for-vps.html" rel="nofollow noopener noreferrer external" target="_blank">给 VPS 配置 SSH 密钥免密登录 - P3TERX ZONE</a></p><h3 id="本地生成-ssh-密钥对"><a href="#本地生成-ssh-密钥对">本地生成 SSH 密钥对</a></h3><p>文中提到可以在远端 VPS 上，也可以在本地，这里我选择在本地生成。</p><p>打开终端，输入 <code>ssh-keygen</code> ,连续按四次 <kbd>Enter </kbd>（密码设置为空），如果出现了 <code>overwrite(y/n)?</code> 就说明之前就有生成了，你可以选择 <code>y</code> 重新生成一个，或者就用已有的这个</p><p>比如：</p><!-- HTML_TAG_START --><pre class="shiki material-default" bash="true"><div class="language-id">bash</div><div class='code-container'><code><div class='line'>root@p3ter:~# ssh-keygen # 输入命令，按 Enter 键</div><div class='line'>Generating public/private rsa key pair.</div><div class='line'>Enter file in which to save the key (/root/.ssh/id_rsa): # 保存位置，默认就行，按 Enter 键</div><div class='line'>Enter passphrase (empty for no passphrase): # 输入密钥密码，按 Enter 键。填写后每次都会要求输入密码，留空则实现无密码登录。</div><div class='line'>Enter same passphrase again: # 再次输入密钥密码，按 Enter 键</div><div class='line'>Your identification has been saved in /root/.ssh/id_rsa.</div><div class='line'>Your public key has been saved in /root/.ssh/id_rsa.pub.</div><div class='line'>The key fingerprint is:</div><div class='line'>SHA256:GYT9YqBV4gDIgzTYEWFs3oGZjp8FWXArBObfhPlPzIk root@p3ter</div><div class='line'>The key's randomart image is:</div><div class='line'>+---[RSA 2048]----+</div><div class='line'>|*OO%+ .+o |</div><div class='line'>|*=@.+++o. |</div><div class='line'>| *o=.=.... |</div><div class='line'>|. +.B + +o. |</div><div class='line'>| . + E *S. |</div><div class='line'>| o o |</div><div class='line'>| . |</div><div class='line'>| |</div><div class='line'>| |</div><div class='line'>+----[SHA256]-----+</div></code></div></pre><!-- HTML_TAG_END --><p>出现那个神秘的矩形就是生成好了</p><h3 id="安装公钥"><a href="#安装公钥">安装公钥</a></h3><p>在本地终端：</p><!-- HTML_TAG_START --><pre class="shiki material-default" bash="true"><div class="language-id">bash</div><div class='code-container'><code><div class='line'>ssh-copy-id -pport user@remote</div></code></div></pre><!-- HTML_TAG_END --><p><code>user</code> 为用户名，<code>remote</code> 为 IP 地址，<code>port</code> 为端口号。</p><p>也可以不加端口号：</p><!-- HTML_TAG_START --><pre class="shiki material-default" bash="true"><div class="language-id">bash</div><div class='code-container'><code><div class='line'>ssh-copy-id user@remote</div></code></div></pre><!-- HTML_TAG_END --><p>然后按要求输入密码，如果是用 root 登陆的，就是用的初始密码，如果是用上面设置的新用户，那就跟之前设置的用户密码一样</p><h3 id="修改权限"><a href="#修改权限">修改权限</a></h3><p><strong>登入 VPS </strong>后，在远程终端输入：</p><!-- HTML_TAG_START --><pre class="shiki material-default" bash="true"><div class="language-id">bash</div><div class='code-container'><code><div class='line'>chmod 600 .ssh/authorized_keys</div></code></div></pre><!-- HTML_TAG_END --><h3 id="修改-sshd-配置文件"><a href="#修改-sshd-配置文件">修改 sshd 配置文件</a></h3><p>打开配置文件：</p><!-- HTML_TAG_START --><pre class="shiki material-default" bash="true"><div class="language-id">bash</div><div class='code-container'><code><div class='line'>nano /etc/ssh/sshd_config</div></code></div></pre><!-- HTML_TAG_END --><p>找到下面这两行，并改成这样：</p><!-- HTML_TAG_START --><pre class="shiki material-default" bash="true"><div class="language-id">bash</div><div class='code-container'><code><div class='line'>PermitRootLogin no</div><div class='line'>AllowUsers username #如果没有这一行就手动添加</div><div class='line'>RSAAuthentication yes #这一行我找不到就没有配置</div><div class='line'>PubkeyAuthentication yes</div></code></div></pre><!-- HTML_TAG_END --><p>记得 username 要换成自己设置的名字，也就是上面配置的 jack</p><p>修改完按 <kbd>Ctrl</kbd>+<kbd>o</kbd> 保存，<kbd>Enter</kbd> 确认，<kbd>Ctrl</kbd>+<kbd>X</kbd> 退出编辑</p><p>重启 ssh 服务</p><!-- HTML_TAG_START --><pre class="shiki material-default" bash="true"><div class="language-id">bash</div><div class='code-container'><code><div class='line'>systemctl reload sshd</div></code></div></pre><!-- HTML_TAG_END --><p>或者</p><!-- HTML_TAG_START --><pre class="shiki material-default" bash="true"><div class="language-id">bash</div><div class='code-container'><code><div class='line'>service sshd restart</div></code></div></pre><!-- HTML_TAG_END --><h3 id="禁用密码登陆和改端口"><a href="#禁用密码登陆和改端口">禁用密码登陆和改端口</a></h3><p>设置好后，试试看能不能用 ssh 登陆，如果可以，再 <code>sudo nano /etc/ssh/sshd_config</code> 修改配置，禁用密码登陆：</p><!-- HTML_TAG_START --><pre class="shiki material-default" bash="true"><div class="language-id">bash</div><div class='code-container'><code><div class='line'>PasswordAuthentication no</div></code></div></pre><!-- HTML_TAG_END --><h3 id="修改默认登陆端口"><a href="#修改默认登陆端口">修改默认登陆端口</a></h3><p>然后改默认登陆端口<sup id="fnref-1"><a href="#fn-1" class="footnote-ref">1</a></sup>，应该什么数都可以吧，什么 8080，9080，8888，3141……</p><p>找到 <code>Port 22</code> 这行，在下面加你要开的口</p><!-- HTML_TAG_START --><pre class="shiki material-default" bash="true"><div class="language-id">bash</div><div class='code-container'><code><div class='line'> Port 22</div><div class='line'> Port 8888</div></code></div></pre><!-- HTML_TAG_END --><p>加完了之后重启</p><!-- HTML_TAG_START --><pre class="shiki material-default" bash="true"><div class="language-id">bash</div><div class='code-container'><code><div class='line'>sudo service sshd restart</div></code></div></pre><!-- HTML_TAG_END --><p>打开防火墙并给你设置的端口放行</p><!-- HTML_TAG_START --><pre class="shiki material-default" bash="true"><div class="language-id">bash</div><div class='code-container'><code><div class='line'>sudo ufw allow 8888</div><div class='line'>sudo ufw enable</div></code></div></pre><!-- HTML_TAG_END --><p><code>sudo ufw status</code> 查看防火墙状态，比如：</p><!-- HTML_TAG_START --><pre class="shiki material-default" bash="true"><div class="language-id">bash</div><div class='code-container'><code><div class='line'>Status: active</div><div class='line'></div><div class='line'>To Action From</div><div class='line'>-- ------ ----</div><div class='line'>8888 ALLOW Anywhere</div><div class='line'>8888 (v6) ALLOW Anywhere (v6)</div></code></div></pre><!-- HTML_TAG_END --><p>然后重新连接一下 VPS，用设置好的端口登陆看看，如果没问题的话重新 <code>sudo nano /etc/ssh/sshd_config</code> ，注释掉 <code>Port 22</code> 那一行</p><h2 id="3-安装-clamav"><a href="#3-安装-clamav">3. 安装 ClamAV</a></h2><p>参考：</p><ul><li><a href="https://www.linuxcapable.com/zh-CN/%E5%A6%82%E4%BD%95%E5%9C%A8-ubuntu-20-04-%E4%B8%8A%E5%AE%89%E8%A3%85%E5%92%8C%E4%BD%BF%E7%94%A8-clamav/" rel="nofollow noopener noreferrer external" target="_blank">如何在 Ubuntu 20.04 LTS 上安装 ClamAV - LinuxCapable</a></li><li><a href="https://linoxide.com/how-to-install-and-use-clamav-on-ubuntu-20-04/" rel="nofollow noopener noreferrer external" target="_blank">How to Install and Use ClamAV on Ubuntu 20.04</a></li></ul><h3 id="安装"><a href="#安装">安装</a></h3><!-- HTML_TAG_START --><pre class="shiki material-default" bash="true"><div class="language-id">bash</div><div class='code-container'><code><div class='line'>sudo apt update</div><div class='line'>sudo apt install clamav clamav-daemon -y</div></code></div></pre><!-- HTML_TAG_END --><h3 id="更新病毒数据库"><a href="#更新病毒数据库">更新病毒数据库</a></h3><p>先停止 <code>clamav-freshclam</code> 服务</p><!-- HTML_TAG_START --><pre class="shiki material-default" bash="true"><div class="language-id">bash</div><div class='code-container'><code><div class='line'>sudo systemctl stop clamav-freshclam</div></code></div></pre><!-- HTML_TAG_END --><p>执行更新：</p><!-- HTML_TAG_START --><pre class="shiki material-default" bash="true"><div class="language-id">bash</div><div class='code-container'><code><div class='line'>sudo freshclam</div></code></div></pre><!-- HTML_TAG_END --><p>启动<code>clamav-freshclam</code> 服务</p><!-- HTML_TAG_START --><pre class="shiki material-default" bash="true"><div class="language-id">bash</div><div class='code-container'><code><div class='line'>sudo systemctl start clamav-freshclam</div></code></div></pre><!-- HTML_TAG_END --><h3 id="开机启动"><a href="#开机启动">开机启动</a></h3><!-- HTML_TAG_START --><pre class="shiki material-default" bash="true"><div class="language-id">bash</div><div class='code-container'><code><div class='line'>sudo systemctl is-enabled clamav-freshclam</div></code></div></pre><!-- HTML_TAG_END --><h3 id="下载-clamav-数据库"><a href="#下载-clamav-数据库">下载 ClamAV 数据库</a></h3><p>先关掉 clamav-freshclam 再下载</p><!-- HTML_TAG_START --><pre class="shiki material-default" bash="true"><div class="language-id">bash</div><div class='code-container'><code><div class='line'>sudo systemctl stop clamav-freshclam</div><div class='line'>sudo freshclam</div></code></div></pre><!-- HTML_TAG_END --><p>查看 clamav 的目录和文件的日期</p><!-- HTML_TAG_START --><pre class="shiki material-default" bash="true"><div class="language-id">bash</div><div class='code-container'><code><div class='line'>ls /var/lib/clamav/</div></code></div></pre><!-- HTML_TAG_END --><h3 id="限制-clamscan-cpu-使用率"><a href="#限制-clamscan-cpu-使用率">限制 Clamscan CPU 使用率</a></h3><p><strong><code>nice</code></strong>：降低 clamscan 的优先级（限制相对 cpu 时间）。</p><!-- HTML_TAG_START --><pre class="shiki material-default" bash="true"><div class="language-id">bash</div><div class='code-container'><code><div class='line'>sudo nice -n 15 clamscan</div></code></div></pre><!-- HTML_TAG_END --><p><strong><code>cpulimit</code></strong>：限制绝对的 CPU 时间。安装 cpulimit</p><!-- HTML_TAG_START --><pre class="shiki material-default" bash="true"><div class="language-id">bash</div><div class='code-container'><code><div class='line'>sudo apt-get install cpulimit</div></code></div></pre><!-- HTML_TAG_END --><p>使用 cpulimit 来限制 clamscan：</p><!-- HTML_TAG_START --><pre class="shiki material-default" bash="true"><div class="language-id">bash</div><div class='code-container'><code><div class='line'>cpulimit -z -e clamscan -l 20 & clamscan -ir /</div></code></div></pre><!-- HTML_TAG_END --><h3 id="常见-cli"><a href="#常见-cli">常见 CLI</a></h3><!-- HTML_TAG_START --><pre class="shiki material-default" bash="true"><div class="language-id">bash</div><div class='code-container'><code><div class='line'>clamscan /home/filename.docx #扫描特定目录或文件</div><div class='line'>clamscan --no-summary /home/ #扫描结束时不显示摘要</div><div class='line'>clamscan -i / #打印受感染的文件</div><div class='line'>clamscan --bell -i /home #警惕病毒检测</div><div class='line'>clamscan -r --remove /home/USER #删除受感染的文件</div></code></div></pre><!-- HTML_TAG_END --><h3 id="clamav-返回码"><a href="#clamav-返回码">ClamAV 返回码</a></h3><ul><li>0：未发现病毒。</li><li>1：发现病毒。</li><li>2：发生了一些错误。</li></ul><h2 id="4-安装-fail2ban"><a href="#4-安装-fail2ban">4. 安装 Fail2ban</a></h2><p>安装 fail2ban 以阻止重复登录尝试</p><p>参考：<a href="https://docs.joinmastodon.org/zh-cn/admin/prerequisites/" rel="nofollow noopener noreferrer external" target="_blank">准备你的机器 - Mastodon documentation</a></p><h3 id="准备"><a href="#准备">准备</a></h3><p>更新软件包：</p><!-- HTML_TAG_START --><pre class="shiki material-default" bash="true"><div class="language-id">bash</div><div class='code-container'><code><div class='line'>sudo apt update</div><div class='line'>sudo apt upgrade -y</div></code></div></pre><!-- HTML_TAG_END --><h3 id="安装-1"><a href="#安装-1">安装</a></h3><p>参考：<a href="https://www.myfreax.com/install-configure-fail2ban-on-ubuntu-20-04/" rel="nofollow noopener noreferrer external" target="_blank">如何在 Ubuntu 20.04 上安装和配置 Fail2ban</a></p><!-- HTML_TAG_START --><pre class="shiki material-default" bash="true"><div class="language-id">bash</div><div class='code-container'><code><div class='line'>sudo apt install fail2ban</div></code></div></pre><!-- HTML_TAG_END --><p>安装完后将自动启动，可以用<code>sudo systemctl status fail2ban</code> 查看运行状态</p><h3 id="修改配置"><a href="#修改配置">修改配置：</a></h3><p>打开<code>/etc/fail2ban/jail.local</code>:</p><!-- HTML_TAG_START --><pre class="shiki material-default" bash="true"><div class="language-id">bash</div><div class='code-container'><code><div class='line'>sudo nano /etc/fail2ban/jail.local</div></code></div></pre><!-- HTML_TAG_END --><p>写入下面的内容，修改邮箱，如果端口改了，也要记得相应修改</p><!-- HTML_TAG_START --><pre class="shiki material-default" text="true"><div class="language-id">text</div><div class='code-container'><code><div class='line'>[DEFAULT]</div><div class='line'>destemail = your@email.here</div><div class='line'>sendername = Fail2Ban</div><div class='line'></div><div class='line'>[sshd]</div><div class='line'>enabled = true</div><div class='line'>port = 22</div><div class='line'></div><div class='line'>[sshd-ddos]</div><div class='line'>enabled = true</div><div class='line'>port = 22</div></code></div></pre><!-- HTML_TAG_END --><p>重启 fail2ban:</p><!-- HTML_TAG_START --><pre class="shiki material-default" bash="true"><div class="language-id">bash</div><div class='code-container'><code><div class='line'>sudo systemctl restart fail2ban</div></code></div></pre><!-- HTML_TAG_END --><h2 id="5-ssl-证书相关"><a href="#5-ssl-证书相关">5. SSL 证书相关</a></h2><p>还没弄明白怎么回事，待更</p><p>参考：</p><ul><li>【<a href="https://luotianyi.vc/5056.html" rel="nofollow noopener noreferrer external" target="_blank">杂谈】防止 SSL 证书泄露你的源站 IP</a></li><li><a href="https://blog.hicasper.com/post/114.html" rel="nofollow noopener noreferrer external" target="_blank">WEB 服务器安全指南 - 防止源站 IP 暴露</a></li></ul><div class="footnotes"><hr><ol><li id="fn-1"><a href="https://zhucaidan.xyz/2019/12/281/" rel="nofollow noopener noreferrer external" target="_blank">更改 VPS 的默认 SSH 端口 22 – 托尼的博客</a><a href="#fnref-1" class="footnote-backref">↩</a></li></ol></div>]]>
|
||
</content>
|
||
<category term="VPS" scheme="https://seviche.cc/?tags=VPS" />
|
||
<category term="Self hosted" scheme="https://seviche.cc/?tags=Self%20hosted" />
|
||
</entry>
|
||
<entry>
|
||
<title type="html"><![CDATA[CSS · 解决 Chrome 中小于12px的字体不显示的问题]]></title>
|
||
<link href="https://seviche.cc/2022-03-29-12px" />
|
||
<id>https://seviche.cc/2022-03-29-12px</id>
|
||
<published>2022-03-29T13:46:29.228Z</published>
|
||
<updated>2022-08-06T10:50:25.374Z</updated>
|
||
<summary type="html"><![CDATA[先用scale总体缩小再补上减少的宽度]]></summary>
|
||
<content type="html">
|
||
<![CDATA[<p>如设置字体大小为 10.2px</p><h3 id="html"><a href="#html">HTML</a></h3><!-- HTML_TAG_START --><pre class="shiki material-default" html="true"><div class="language-id">html</div><div class='code-container'><code><div class='line'><p></div><div class='line'> I am a frontend developer with a particular interest in making things simple and automating daily tasks. I try to keep up with</div><div class='line'> security and best practices, and am always looking for new things to learn.</div><div class='line'></p></div></code></div></pre><!-- HTML_TAG_END --><h3 id="css"><a href="#css">CSS</a></h3><!-- HTML_TAG_START --><pre class="shiki material-default" css="true"><div class="language-id">css</div><div class='code-container'><code><div class='line'>p {</div><div class='line'> color: #dcdcdc;</div><div class='line'></div><div class='line'> /*缩小基准大小，也就是缩小后的字体应该是 10.2px=12px*0.85*/</div><div class='line'> font-size: 12px;</div><div class='line'></div><div class='line'> /* 缩小比例 10.2px/12px=0.85 */</div><div class='line'> transform: scale(0.85);</div><div class='line'></div><div class='line'> /*设置缩放中心*/</div><div class='line'> transform-origin: 0 0;</div><div class='line'></div><div class='line'> /*(1-0.85)+1，补上缩小的宽度，这里可以按视觉效果调整一点*/</div><div class='line'> width: 118%;</div><div class='line'></div><div class='line'> /*兼容IE*/</div><div class='line'> *font-size: 10.2px;</div><div class='line'>}</div></code></div></pre><!-- HTML_TAG_END --><p>参考：</p><ul><li><a href="https://blog.csdn.net/maimiho/article/details/121548769" rel="nofollow noopener noreferrer external" target="_blank">css 小于 12px 字体_MAIMIHO 的博客-CSDN 博客</a></li><li><a href="https://www.codeleading.com/article/46263149244/" rel="nofollow noopener noreferrer external" target="_blank">css 设置字体小于 12px 的方法 - 代码先锋网</a></li><li><a href="https://codepen.io/mjj2000/pen/AYEqwJ" rel="nofollow noopener noreferrer external" target="_blank">Set CSS font-size less than 12px in webkit browser</a></li></ul>]]>
|
||
</content>
|
||
<category term="CSS" scheme="https://seviche.cc/?tags=CSS" />
|
||
<category term="CSS Trick" scheme="https://seviche.cc/?tags=CSS%20Trick" />
|
||
</entry>
|
||
<entry>
|
||
<title type="html"><![CDATA[Miniflux · 保存文章到 Pocket 以及 RSS]]></title>
|
||
<link href="https://seviche.cc/2022-03-11-miniflux-to-pocket" />
|
||
<id>https://seviche.cc/2022-03-11-miniflux-to-pocket</id>
|
||
<published>2022-03-10T16:24:38.663Z</published>
|
||
<updated>2022-08-06T10:51:23.859Z</updated>
|
||
<summary type="html"><![CDATA[将 Miniflux 上的文章到保存到 Pocket/Instapaper,以及 RSS 相关文章和资源]]></summary>
|
||
<content type="html">
|
||
<![CDATA[<p>将 Miniflux 上的文章到保存到 Pocket/Instapaper,以及 RSS 相关文章和资源</p><p>Miniflux 文档： <a href="https://miniflux.app/docs/services.html" rel="nofollow noopener noreferrer external" target="_blank">Integration with External Services</a></p><h2 id="1-创建-pocket-application"><a href="#1-创建-pocket-application">1. 创建 Pocket Application</a></h2><p>在 <a href="https://getpocket.com/developer/apps/new" rel="nofollow noopener noreferrer external" target="_blank">这里</a> 创建一个 Pocket 应用，以获取 Consumer Key</p><p>我的设置如下：</p><p><img src="https://s2.loli.net/2022/02/24/yfXLehkWrisS9Hb.png" alt="https://s2.loli.net/2022/02/24/yfXLehkWrisS9Hb.png" class="rounded-lg my-2" loading="lazy" decoding="async"></p><h2 id="2-获取-consumer-key-用户密钥"><a href="#2-获取-consumer-key-用户密钥">2. 获取 Consumer Key 用户密钥</a></h2><p>在<strong>My Apps</strong>下面找到刚刚创建的应用，复制 Consumer Key：</p><p><img src="https://s2.loli.net/2022/02/24/vO4jyhTfBaHRZ6n.png" alt="https://s2.loli.net/2022/02/24/vO4jyhTfBaHRZ6n.png" class="rounded-lg my-2" loading="lazy" decoding="async"></p><p>在 Miniflux 后台，设置 → 集成 → Pocket → <strong>Pocket 用户密钥</strong>（第一栏）中 填入刚刚复制的 Consumer key</p><h2 id="3-获取-access-token-访问密钥"><a href="#3-获取-access-token-访问密钥">3. 获取 Access Token 访问密钥</a></h2><p>填好后，通过通过点击下面的 <strong>连接您的 Pocket 账户</strong> 自动获取 Access Token(访问密钥):</p><p><img src="https://s2.loli.net/2022/03/10/tzYeCNksmRaBIFj.png" alt="https://s2.loli.net/2022/03/10/tzYeCNksmRaBIFj.png" class="rounded-lg my-2" loading="lazy" decoding="async"></p><p>点击链接后按 <strong>授权</strong>。<img src="https://s2.loli.net/2022/03/11/sZOU8tBpjAJW3ol.png" alt="https://s2.loli.net/2022/03/11/sZOU8tBpjAJW3ol.png" class="rounded-lg my-2" loading="lazy" decoding="async"></p><p>这里可能会跳到 <code>http://localhost/integration/pocket/callback</code> 然后就无法访问页面了，解决办法很简单，把 <code>localhost</code> 改为你的服务器 ip 端口或者 miniflux 所在域名即可,如 <code>http://miniflux.com/integration/pocket/callback</code>，按回车会跳回到 miniflux 设置页面。</p><p>出现这个提醒就连接成功了：<img src="https://s2.loli.net/2022/03/11/ktoi3lOGjpQHP9B.png" alt="https://s2.loli.net/2022/03/11/ktoi3lOGjpQHP9B.png" class="rounded-lg my-2" loading="lazy" decoding="async"></p><p>然后就可以点击文章页面的<strong>保存</strong>测试看看。<img src="https://s2.loli.net/2022/03/11/uCBj6IAWxN149Xo.png" alt="https://s2.loli.net/2022/03/11/uCBj6IAWxN149Xo.png" class="rounded-lg my-2" loading="lazy" decoding="async"></p><h2 id="其他"><a href="#其他">其他</a></h2><h3 id="1为博客添加-pocket-收藏按钮"><a href="#1为博客添加-pocket-收藏按钮">1.为博客添加 Pocket 收藏按钮</a></h3><p>在 <a href="https://getpocket.com/publisher/button" rel="nofollow noopener noreferrer external" target="_blank">此处</a>复制需要的 Pocket 收藏按钮样式，添加到主题的 layout 里面（具体要看不同主题的设置，wordpress 似乎有内置这功能，我不确定，有三种效果。</p><h3 id="2用-fever-同步到-reeder"><a href="#2用-fever-同步到-reeder">2.用 Fever 同步到 Reeder</a></h3><ol><li>在 Miniflux 中创建 Fever 账户和密码</li><li>在 Reeder 中添加 Fever 账号，其中：</li></ol><ul><li>server：<code>https://miniflux 的网址/fever</code></li><li>email：Fever 用户名</li><li>password：就是 Fever 密码</li></ul><h3 id="3连接到-instapaper"><a href="#3连接到-instapaper">3.连接到 Instapaper</a></h3><p>官网：<a href="https://www.instapaper.com/" rel="nofollow noopener noreferrer external" target="_blank">Instapaper</a></p><p>用户名为 Instapaper 的登录邮箱，设置好更新下就可以了～</p><h2 id="rss-相关内容"><a href="#rss-相关内容">RSS 相关内容</a></h2><p>来都来了，整理一下最近看过的相关内容，因为隐私问题，长毛象上的嘟文暂时不贴（除了我自己的</p><h3 id="1-miniflux-搭建"><a href="#1-miniflux-搭建">1. Miniflux 搭建</a></h3><ul><li><a href="https://mantyke.icu/2021/rsshub-miniflux/" rel="nofollow noopener noreferrer external" target="_blank">RSS | RSSHub 搭配 Miniflux，实现订阅自由</a></li><li><a href="https://blog.tantalum.life/posts/build-miniflux-in-docker/#%E6%90%AD%E5%BB%BA%E8%BF%87%E7%A8%8B" rel="nofollow noopener noreferrer external" target="_blank">Miniflux | 利用 Docker-compose 搭建 RSS 阅读器</a></li><li><a href="https://www.moerats.com/archives/385/comment-page-1" rel="nofollow noopener noreferrer external" target="_blank">Miniflux：自建私有 RSS 订阅工具，可多用户使用</a></li><li><a href="https://www.moewah.com/archives/3157.html" rel="nofollow noopener noreferrer external" target="_blank">简易 RSS 阅读器 | Miniflux 2 安装教程</a></li></ul><h3 id="2-其他选择"><a href="#2-其他选择">2. 其他选择</a></h3><ul><li><a href="https://type.cyhsu.xyz/2018/05/rss-aggregators-review-2018/" rel="nofollow noopener noreferrer external" target="_blank">RSS 服务对比评测</a></li><li><a href="https://sspai.com/post/57498" rel="nofollow noopener noreferrer external" target="_blank">找不到满意的 RSS 服务？你可以自己搭建一个</a></li><li><a href="https://type.cyhsu.xyz/2017/10/use-ttrss-to-build-a-self-hosted-rss-service/" rel="nofollow noopener noreferrer external" target="_blank">用 Tiny Tiny RSS 自建 RSS 服务</a></li><li><a href="https://sspai.com/post/42787" rel="nofollow noopener noreferrer external" target="_blank">（另一篇）Tiny Tiny RSS 教程</a></li><li><a href="https://blog.naibabiji.com/tutorial/tiny-tiny-rss.html" rel="nofollow noopener noreferrer external" target="_blank">(2021) 自建 RSS 阅读器 Tiny Tiny RSS 教程，docker 安装 Awesome TTRSS</a></li><li><a href="https://www.vpslala.com/t/762" rel="nofollow noopener noreferrer external" target="_blank">创建一个私有的 rss 订阅工具 Wallabag</a></li></ul><h3 id="3-rss-生成"><a href="#3-rss-生成">3. RSS 生成</a></h3><ul><li><a href="https://mp.weixin.qq.com/s/K00wWvlAJu4KLbxru9-bXQ" rel="nofollow noopener noreferrer external" target="_blank">可能是目前最全的 RSS 源，微信公众号也有！</a></li><li><a href="http://createfeed.fivefilters.org/" rel="nofollow noopener noreferrer external" target="_blank">Feed Creator</a></li><li><a href="https://social.datalabour.com/@nonsense/107824299041894067" rel="nofollow noopener noreferrer external" target="_blank">根据页面 HTML 生成 RSS 链接</a></li><li><a href="https://sspai.com/post/66451" rel="nofollow noopener noreferrer external" target="_blank">你的专属 RSS 源：在自己的 VPS 上安装 RSSHub</a></li><li><a href="https://www.wpdaxue.com/wordpress-rss-feed-plugins.html" rel="nofollow noopener noreferrer external" target="_blank">8 个好用的 WordPress RSS Feed 插件</a></li></ul><h3 id="4-看什么"><a href="#4-看什么">4. 看什么</a></h3><ul><li><a href="https://www.notion.so/cnotion/Notion-Vol-13-89e51bdb621a4e009e7ec60d1cc58c2f#16368490755248a28efa4c229dc56321" rel="nofollow noopener noreferrer external" target="_blank">分享你认为值得订阅的内容 | Notion 小活动 Vol.13</a></li><li><a href="https://www.notion.so/ca290ef313804bae8584804440548c80?v=4470668a5078437f816b0273ed042ebf" rel="nofollow noopener noreferrer external" target="_blank">产品沉思录|优质订阅源</a></li><li><a href="https://www.notion.so/kfang/Newsletter-68ee46c0a4574f659fb8a873ead438c6" rel="nofollow noopener noreferrer external" target="_blank">中文 Newsletter 导航</a></li><li><a href="https://github.com/timqian/chinese-independent-blogs" rel="nofollow noopener noreferrer external" target="_blank">中文独立博客列表</a></li></ul><h4 id="5-关于-rss"><a href="#5-关于-rss">5. 关于 RSS</a></h4><ul><li><a href="https://type.cyhsu.xyz/2018/04/on-the-so-called-revival-of-rss/" rel="nofollow noopener noreferrer external" target="_blank">论 RSS 的「复兴」</a></li><li><a href="https://blog.dylanwu.space/2021/11/30/myth-of-rss.html" rel="nofollow noopener noreferrer external" target="_blank">关于 RSS 协议的一些迷思</a></li><li><a href="https://www.fengkx.top/post/translation-of-RSS-revival/" rel="nofollow noopener noreferrer external" target="_blank">是 RSS 复兴的时候了（翻译 )</a></li><li><a href="https://rss3.io/" rel="nofollow noopener noreferrer external" target="_blank">RSS3</a></li><li><a href="https://mp.weixin.qq.com/s/CYmXvEHSd7idhDHtEe3ehw" rel="nofollow noopener noreferrer external" target="_blank">拆解 RSS3— 是否可以真正的开启 Web3 社交？</a></li></ul>]]>
|
||
</content>
|
||
<category term="RSS" scheme="https://seviche.cc/?tags=RSS" />
|
||
<category term="Miniflux" scheme="https://seviche.cc/?tags=Miniflux" />
|
||
</entry>
|
||
<entry>
|
||
<title type="html"><![CDATA[Forty页面仿写]]></title>
|
||
<link href="https://seviche.cc/2022-03-10-forty" />
|
||
<id>https://seviche.cc/2022-03-10-forty</id>
|
||
<published>2022-03-10T08:38:17.227Z</published>
|
||
<updated>2022-08-06T10:51:23.374Z</updated>
|
||
<summary type="html"><![CDATA[完成 HTML、CSS 代码编写，暂无 JavaScript]]></summary>
|
||
<content type="html">
|
||
<![CDATA[<h2 id="题目"><a href="#题目">题目</a></h2><p>来源：<a href="http://ife.baidu.com/csspart/floatTask.html" rel="nofollow noopener noreferrer external" target="_blank">百度前端学院｜浮动实战任务</a></p><p>通过 HTML 及 CSS 参考<a href="https://b.bdstatic.com/searchbox/icms/searchbox/img/task1.png" rel="nofollow noopener noreferrer external" target="_blank">示例图</a>实现页面开发，要求实现效果与示例图基本一致</p><ul><li>页面宽度固定（定宽）, 请应用 CSS 浮动以及前几天所学的 CSS 样式来完成页面效果</li><li>只需要完成 HTML、CSS 代码编写，不需要写 JavaScript</li></ul><h2 id="示例图"><a href="#示例图">示例图</a></h2><p><img src="https://s2.loli.net/2022/03/10/V9ZpjQYFvxEDGXJ.jpg" alt="https://s2.loli.net/2022/03/10/V9ZpjQYFvxEDGXJ.jpg" class="rounded-lg my-2" loading="lazy" decoding="async"></p><h2 id="demo"><a href="#demo">Demo</a></h2><p><a href="https://forty-seviche.netlify.app/" rel="nofollow noopener noreferrer external" target="_blank">https://forty-seviche.netlify.app/</a></p><p>耗时：4 小时（还没有做自适应等很多东西……╮(￣ ▽ ￣"")╭</p>]]>
|
||
</content>
|
||
<category term="CSS" scheme="https://seviche.cc/?tags=CSS" />
|
||
<category term="HTML" scheme="https://seviche.cc/?tags=HTML" />
|
||
</entry>
|
||
<entry>
|
||
<title type="html"><![CDATA[CSS · Tab选项卡]]></title>
|
||
<link href="https://seviche.cc/2022-03-09-css-tab" />
|
||
<id>https://seviche.cc/2022-03-09-css-tab</id>
|
||
<published>2022-03-09T07:42:25.299Z</published>
|
||
<updated>2022-08-06T10:50:54.161Z</updated>
|
||
<summary type="html"><![CDATA[一个纯 CSS 实现的 Tab 选项卡]]></summary>
|
||
<content type="html">
|
||
<![CDATA[<p>一个纯 CSS 实现的 Tab 选项卡</p><h2 id="原理"><a href="#原理">原理</a></h2><blockquote><p>通过隐藏的 <code>input</code> 和与之关联的 <a href="https://so.csdn.net/so/search?q=label&spm=1001.2101.3001.7020" rel="nofollow noopener noreferrer external" target="_blank">label</a> 点击 <code>label</code> 触发 <code>input</code> 的 <code>checked</code> 状态触发的，再配合使用元素状态的伪类 <code>:checked </code>样式就可以实现不同状态的切换，中间的过度效果还可以配合 CSS3 的 <code>transition</code>过度效果实现 <sup id="fnref-1"><a href="#fn-1" class="footnote-ref">1</a></sup>。</p></blockquote><h2 id="代码"><a href="#代码">代码</a></h2><ul><li><code>input</code> 的<code>name</code> 都一样，<code>id</code>不同</li></ul><h3 id="html"><a href="#html">HTML</a></h3><!-- HTML_TAG_START --><pre class="shiki material-default" html="true"><div class="language-id">html</div><div class='code-container'><code><div class='line'><div class="tab-frame"></div><div class='line'> <!--标签页标题栏--></div><div class='line'> <!-- 设置一个为check --></div><div class='line'> <input type="radio" name="tab" id="tab1" check /></div><div class='line'> <label for="tab1">TAB1</label></div><div class='line'></div><div class='line'> <input type="radio" name="tab" id="tab2" /></div><div class='line'> <label for="tab2">TAB2</label></div><div class='line'></div><div class='line'> <input type="radio" name="tab" id="tab3" /></div><div class='line'> <label for="tab3">TAB2</label></div><div class='line'></div><div class='line'> <!--Tab内容--></div><div class='line'> <div class="tab-content"></div><div class='line'> <p>THIS IS TAB1 CONTENT</p></div><div class='line'> <p>Notice the gap between the content and tab after applying background cololr</p></div><div class='line'> </div></div><div class='line'> <div class="tab-content"></div><div class='line'> <p>THIS IS TAB2 CONTENT</p></div><div class='line'> <p>Notice the gap between the content and tab after applying background cololr</p></div><div class='line'> </div></div><div class='line'> <div class="tab-content"></div><div class='line'> <p>THIS IS TAB3 CONTENT</p></div><div class='line'> <p>Notice the gap between the content and tab after applying background cololr</p></div><div class='line'> </div></div><div class='line'></div></div></code></div></pre><!-- HTML_TAG_END --><h3 id="css"><a href="#css">CSS</a></h3><!-- HTML_TAG_START --><pre class="shiki material-default" css="true"><div class="language-id">css</div><div class='code-container'><code><div class='line'>/* 隐藏input和tab内容 */</div><div class='line'>.tab-frame input,</div><div class='line'>.tab-content {</div><div class='line'> display: none;</div><div class='line'>}</div><div class='line'></div><div class='line'>/* 导航栏样式：未选中时 */</div><div class='line'>.tab-frame label {</div><div class='line'> color: #555;</div><div class='line'> padding: 10px 20px;</div><div class='line'> border-bottom: 1px solid #555;</div><div class='line'> cursor: pointer;</div><div class='line'> float: left;</div><div class='line'>}</div><div class='line'></div><div class='line'>/* 导航栏样式：选中时 */</div><div class='line'>.tab-frame input:checked + label {</div><div class='line'> color: #0f71aa;</div><div class='line'> border: 1px solid #555;</div><div class='line'> border-bottom: none;</div><div class='line'> border-radius: 4px 4px 0px 0px;</div><div class='line'> cursor: default;</div><div class='line'>}</div><div class='line'></div><div class='line'>/* Tab内容样式 */</div><div class='line'>.tab-frame .tab-content {</div><div class='line'> color: #0f71aa;</div><div class='line'> font-size: 1.5rem;</div><div class='line'> font-weight: bold;</div><div class='line'> padding-top: 40px;</div><div class='line'> clear: left;</div><div class='line'>}</div><div class='line'></div><div class='line'>/* 点击的时候显示tab内容，即input checked的时候显示label*/</div><div class='line'>.tab-frame input:nth-of-type(1):checked ~ .tab-content:nth-of-type(1),</div><div class='line'>.tab-frame input:nth-of-type(2):checked ~ .tab-content:nth-of-type(2),</div><div class='line'>.tab-frame input:nth-of-type(3):checked ~ .tab-content:nth-of-type(3) {</div><div class='line'> display: block;</div><div class='line'>}</div></code></div></pre><!-- HTML_TAG_END --><h2 id="参考"><a href="#参考">参考</a></h2><p>Demo：<a href="https://codepen.io/llgruff/pen/ZGBxOa" rel="nofollow noopener noreferrer external" target="_blank">Tabs CSS & HTML, no JS & Jquery</a></p><div class="footnotes"><hr><ol><li id="fn-1"><a href="https://blog.csdn.net/baiding1123/article/details/51889201" rel="nofollow noopener noreferrer external" target="_blank">CSS tab 选项卡 (标签页) 切换</a><a href="#fnref-1" class="footnote-backref">↩</a></li></ol></div>]]>
|
||
</content>
|
||
<category term="CSS" scheme="https://seviche.cc/?tags=CSS" />
|
||
</entry>
|
||
<entry>
|
||
<title type="html"><![CDATA[JavaScript · 打字机效果生成器]]></title>
|
||
<link href="https://seviche.cc/2022-03-09-typewriter" />
|
||
<id>https://seviche.cc/2022-03-09-typewriter</id>
|
||
<published>2022-03-08T16:19:05.137Z</published>
|
||
<updated>2022-08-06T10:50:29.470Z</updated>
|
||
<summary type="html"><![CDATA[用 JavaScript 实现网页打字机效果]]></summary>
|
||
<content type="html">
|
||
<![CDATA[<h2 id="题目"><a href="#题目">题目</a></h2><p>来源：<a href="http://ife.baidu.com/javascript/string.html#%E4%BB%BB%E5%8A%A1%E5%9B%9B" rel="nofollow noopener noreferrer external" target="_blank">百度前端学院</a></p><p>参照 <a href="https://b.bdstatic.com/searchbox/icms/searchbox/img/%E6%89%93%E5%AD%97%E6%9C%BA.gif" rel="nofollow noopener noreferrer external" target="_blank">打字机效果 DEMO (opens new window)</a>，实现一个打字机效果生成器</p><p><strong>需求说明</strong></p><ul><li>在输入框中输入需要实现打字机效果的文本</li><li>实现原理使用定时器间隔一段时间递增地截取字符串的长度</li><li>点击 button 实现打字机效果的生成，将文本输出到 id 为 showText 的标签中</li></ul><!-- HTML_TAG_START --><pre class="shiki material-default" html="true"><div class="language-id">html</div><div class='code-container'><code><div class='line'><label>请输入文本:</label></div><div class='line'><input type="text" /></div><div class='line'><button onclick="generateTypeEffect()">生成打字效果</button></div><div class='line'><h2 id="showText"></h2></div><div class='line'><script></div><div class='line'> function generateTypeEffect() {</div><div class='line'> //这里实现打字机效果</div><div class='line'> //将内容显示在h2中</div><div class='line'> }</div><div class='line'></script></div></code></div></pre><!-- HTML_TAG_END --><h2 id="解法"><a href="#解法">解法</a></h2><!-- HTML_TAG_START --><pre class="shiki material-default" html="true"><div class="language-id">html</div><div class='code-container'><code><div class='line'><label>请输入文本:</label></div><div class='line'><input type="text" /></div><div class='line'><button onclick="generateTypeEffect()">生成打字效果</button></div><div class='line'><h2 id="showText"></h2></div><div class='line'><script></div><div class='line'> let i = 0</div><div class='line'> function generateTypeEffect() {</div><div class='line'> const output = document.getElementById('showText')</div><div class='line'> const input = document.querySelector('input').value</div><div class='line'> if (i < input.length) {</div><div class='line'> output.textContent += input[i]</div><div class='line'> setTimeout(generateTypeEffect, 200, ++i)</div><div class='line'> }</div><div class='line'> }</div><div class='line'></script></div></code></div></pre><!-- HTML_TAG_END --><h2 id="参考"><a href="#参考">参考</a></h2><p><a href="https://www.w3schools.com/howto/howto_js_typewriter.asp" rel="nofollow noopener noreferrer external" target="_blank">How TO - Typing Effect</a></p>]]>
|
||
</content>
|
||
<category term="JavaScript" scheme="https://seviche.cc/?tags=JavaScript" />
|
||
</entry>
|
||
<entry>
|
||
<title type="html"><![CDATA[JavaScript · Caesar Cipher 凯撒加密]]></title>
|
||
<link href="https://seviche.cc/2022-03-09-caesar-cipher" />
|
||
<id>https://seviche.cc/2022-03-09-caesar-cipher</id>
|
||
<published>2022-03-08T16:01:08.850Z</published>
|
||
<updated>2022-08-06T10:50:48.659Z</updated>
|
||
<summary type="html"><![CDATA[用JavaScrpit编码实现凯撒加密算法]]></summary>
|
||
<content type="html">
|
||
<![CDATA[<h2 id="题目"><a href="#题目">题目</a></h2><p>来源：<a href="http://ife.baidu.com/javascript/string.html#%E5%AD%97%E7%AC%A6%E4%B8%B2" rel="nofollow noopener noreferrer external" target="_blank">操作字符串对象 | 百度前端技术学园</a></p><p>编码实现凯撒加密算法，根据输入的偏移量，实现对字符串的加密和解密.</p><p>恺撒加密（Caesar cipher），是一种最简单且最广为人知的替换加密技术。明文中的所有字母都在字母表上向后（或向前）按照一个固定数目进行偏移后被替换成密文。</p><p>例如，当偏移量是 3 的时候，所有的字母 A 将被替换成 D，B 变成 E，以此类推。</p><p><strong>需求说明</strong></p><ul><li>点击加密按钮，根据用户输入的偏移量，对明文进行加密，加密后的为密文，显示在密文输入框中</li><li>点击解密按钮，根据用户输入的偏移量，对密文进行加密，解密出来的为明文，显示在明文输入框中</li></ul><h2 id="解法"><a href="#解法">解法</a></h2><ul><li><code>string.replace</code> 替换数字</li><li>用<code>.charCodeAt()</code> 获取字母编码</li><li>正则表达式<code>/[A-Za-z]/g</code>选择字母</li><li>偏移量超过范围的，往反方向偏移</li><li>结果验证：<a href="http://www.atoolbox.net/Tool.php?Id=778" rel="nofollow noopener noreferrer external" target="_blank">凯撒密码加密/解密 - 一个工具箱 </a></li></ul><h3 id="html"><a href="#html">HTML</a></h3><!-- HTML_TAG_START --><pre class="shiki material-default" html="true"><div class="language-id">html</div><div class='code-container'><code><div class='line'><label>偏移:</label></div><div class='line'><input type="text" name="offset" size="5" value="3" /></div><div class='line'><br /></div><div class='line'><label></div><div class='line'> 明文:</div><div class='line'> <label></label></div><div class='line'> <input type="text" name="plain" size="50" value="This is a test." /></div><div class='line'> <br /></div><div class='line'> <label>密文:</label></div><div class='line'> <input type="text" name="enc" size="50" /></div><div class='line'> <br /></div><div class='line'> <input type="button" value="加密" onClick="encrypt()" /></div><div class='line'> </div><div class='line'> <input type="button" value="解密" onClick="decrypt()" /></div><div class='line'></label></div></code></div></pre><!-- HTML_TAG_END --><h3 id="js"><a href="#js">JS</a></h3><!-- HTML_TAG_START --><pre class="shiki material-default" js="true"><div class="language-id">js</div><div class='code-container'><code><div class='line'>let offsetInput = document.querySelector('input[name=offset]')</div><div class='line'>let plain = document.querySelector('input[name=plain')</div><div class='line'>let enc = document.querySelector('input[name=enc]')</div><div class='line'></div><div class='line'>// 加密</div><div class='line'>function encrypt() {</div><div class='line'> let offset = Number(offsetInput.value)</div><div class='line'> function conver(s) {</div><div class='line'> let charCode = s.charCodeAt(0)</div><div class='line'> // 替换大写字母 A-Z:65-90</div><div class='line'> if (charCode <= 90 && charCode >= 65) {</div><div class='line'> return String.fromCharCode(charCode + offset < 90 ? charCode + offset : charCode - offset)</div><div class='line'> } else {</div><div class='line'> //替换小写字母 a-z:97-122</div><div class='line'> return String.fromCharCode(charCode + offset < 122 ? charCode + offset : charCode - offset)</div><div class='line'> }</div><div class='line'> }</div><div class='line'> enc.value = plain.value.replace(/[A-Za-z]/g, conver)</div><div class='line'></div><div class='line'> // 替换大写字母 A-Z:65-90</div><div class='line'> // function transUpper(s) {</div><div class='line'> // let charCode = s.charCodeAt();</div><div class='line'> // return String.fromCharCode(</div><div class='line'> // charCode + offset <= 90 ? charCode + offset : charCode - offset</div><div class='line'> // );</div><div class='line'> // }</div><div class='line'></div><div class='line'> // //替换小写字母 a-z:97-122</div><div class='line'> // function transLower(s) {</div><div class='line'> // let charCode = s.charCodeAt();</div><div class='line'> // return String.fromCharCode(</div><div class='line'> // charCode + offset <= 122 ? charCode + offset : charCode - offset</div><div class='line'> // );</div><div class='line'> // }</div><div class='line'> // let encUpper = plain.replace(/[A-Z]/g, transUpper);</div><div class='line'> // enc.value = encUpper.replace(/[a-z]/g, transLower);</div><div class='line'>}</div><div class='line'></div><div class='line'>// 解密</div><div class='line'>function decrypt() {</div><div class='line'> let offset = Number(offsetInput.value)</div><div class='line'> function conver(s) {</div><div class='line'> let charCode = s.charCodeAt(0)</div><div class='line'> // 替换大写字母 A-Z:65-90</div><div class='line'> if (charCode <= 90 && charCode >= 65) {</div><div class='line'> return String.fromCharCode(charCode - offset < 65 ? charCode + offset : charCode - offset)</div><div class='line'> } else {</div><div class='line'> //替换小写字母 a-z:97-122</div><div class='line'> return String.fromCharCode(charCode - offset < 97 ? charCode + offset : charCode - offset)</div><div class='line'> }</div><div class='line'> }</div><div class='line'> plain.value = enc.value.replace(/[A-Za-z]/g, conver)</div><div class='line'>}</div></code></div></pre><!-- HTML_TAG_END --><h2 id="参考"><a href="#参考">参考</a></h2><ul><li><a href="https://blog.csdn.net/dikanjiang6340/article/details/101264748?utm_relevant_index=1" rel="nofollow noopener noreferrer external" target="_blank">凯撒密码 javascript</a></li><li><a href="https://stackoverflow.com/questions/44232645/caesar-cipher-in-javascript?newreg=0a8ff4c05c484b01a7df20821475fb15" rel="nofollow noopener noreferrer external" target="_blank">Caesar Cipher in Javascript - Stack Overflow</a></li></ul>]]>
|
||
</content>
|
||
<category term="JavaScript" scheme="https://seviche.cc/?tags=JavaScript" />
|
||
</entry>
|
||
<entry>
|
||
<title type="html"><![CDATA[JavaScript · 字符串去重]]></title>
|
||
<link href="https://seviche.cc/2022-03-07-filter" />
|
||
<id>https://seviche.cc/2022-03-07-filter</id>
|
||
<published>2022-03-07T13:55:21.090Z</published>
|
||
<updated>2022-08-06T10:50:50.151Z</updated>
|
||
<summary type="html"><![CDATA[编码实现字符串去重]]></summary>
|
||
<content type="html">
|
||
<![CDATA[<h2 id="题目"><a href="#题目">题目</a></h2><p>来源:<a href="http://ife.baidu.com/javascript/string.html#%E5%AD%97%E7%AC%A6%E4%B8%B2" rel="nofollow noopener noreferrer external" target="_blank">百度前端学院</a></p><!-- HTML_TAG_START --><pre class="shiki material-default" js="true"><div class="language-id">js</div><div class='code-container'><code><div class='line'>/*</div><div class='line'>去掉字符串 str 中，连续重复的地方</div><div class='line'>*/</div><div class='line'>function removeRepetition(str) {</div><div class='line'> // do something</div><div class='line'>}</div><div class='line'></div><div class='line'>// 测试用例</div><div class='line'>console.log(removeRepetition('aaa')) // ->a</div><div class='line'>console.log(removeRepetition('abbba')) // ->aba</div><div class='line'>console.log(removeRepetition('aabbaabb')) // ->abab</div><div class='line'>console.log(removeRepetition('')) // -></div><div class='line'>console.log(removeRepetition('abc')) // ->abc</div></code></div></pre><!-- HTML_TAG_END --><h2 id="解法"><a href="#解法">解法</a></h2><!-- HTML_TAG_START --><pre class="shiki material-default" js="true"><div class="language-id">js</div><div class='code-container'><code><div class='line'>function removeRepetition(str) {</div><div class='line'> let strArr = [...str]</div><div class='line'> const result = strArr.filter((s, i, arr) => s !== arr[i + 1]).join('')</div><div class='line'> return result</div><div class='line'>}</div><div class='line'></div><div class='line'>console.log(removeRepetition('aaa')) // ->a</div><div class='line'>console.log(removeRepetition('abbba')) // ->aba</div><div class='line'>console.log(removeRepetition('aabbaabb')) // ->abab</div><div class='line'>console.log(removeRepetition('')) // -></div><div class='line'>console.log(removeRepetition('abc')) // ->abc</div></code></div></pre><!-- HTML_TAG_END --><p>如果没有限定条件说是“连续重复”，就可以用 <strong>Set</strong>：</p><!-- HTML_TAG_START --><pre class="shiki material-default" js="true"><div class="language-id">js</div><div class='code-container'><code><div class='line'>function removeRepetition(str) {</div><div class='line'> let strArr = [...new Set(str)]</div><div class='line'> return strArr.join('')</div><div class='line'>}</div><div class='line'>console.log(removeRepetition('aaa')) // ->a</div><div class='line'>console.log(removeRepetition('abbba')) // ->ab</div><div class='line'>console.log(removeRepetition('aabbaabb')) // ->ab</div><div class='line'>console.log(removeRepetition('')) // -></div><div class='line'>console.log(removeRepetition('abc')) // ->abc</div></code></div></pre><!-- HTML_TAG_END --><h2 id="其他解法"><a href="#其他解法">其他解法</a></h2><ul><li><a href="https://www.programminghunter.com/article/7794242622/" rel="nofollow noopener noreferrer external" target="_blank">filter 结合 call Method</a></li><li><a href="https://www.cnblogs.com/zyc-zsxbh/p/9327364.html" rel="nofollow noopener noreferrer external" target="_blank">用 for 循环的两种方式</a></li></ul>]]>
|
||
</content>
|
||
<category term="JavaScript" scheme="https://seviche.cc/?tags=JavaScript" />
|
||
</entry>
|
||
<entry>
|
||
<title type="html"><![CDATA[Obsidian · 网课学习笔记整理]]></title>
|
||
<link href="https://seviche.cc/2022-03-07-obsidian-notes1" />
|
||
<id>https://seviche.cc/2022-03-07-obsidian-notes1</id>
|
||
<published>2022-03-06T16:23:33.118Z</published>
|
||
<updated>2022-08-06T10:50:46.655Z</updated>
|
||
<summary type="html"><![CDATA[拆分整合的过程]]></summary>
|
||
<content type="html">
|
||
<![CDATA[<p>最近在用 obsidian 做网课学习笔记，感觉还挺好用的。简单记一下我记笔记的一些方法（其实也不算什么方法）需要用到的插件：Image Auto Upload，用来传图片。</p><p>其实我的记笔记方法很简单，就是不断拆碎重组，方便后面查找。</p><p>上课时，先按时间顺序书写笔记，就像传统的笔记本一样，上完课后再将那一页笔记拆碎重组到知识结构中。方法论大概是 MOC？就是用索引去整理笔记结构，而不是所处文件夹的层次，这里我们先不做深入探讨。</p><p>下面以学习 JavaScript 为例子。</p><p>我近期的笔记目录页面（用 Logseq 发布）：<a href="https://javascript-logseq.netlify.app/#/page/javascript" rel="nofollow noopener noreferrer external" target="_blank">JavaScript</a></p><h2 id="具体的方法"><a href="#具体的方法">具体的方法</a></h2><p>我把几乎所有的笔记都放在一个叫 <code>Zone</code> 的文件夹内，常用的会打上星标，或者移到最外层文件夹，新笔记默认放在 <code>Zone</code> 文件夹下。</p><h3 id="step1-构建地图"><a href="#step1-构建地图">Step1-构建地图</a></h3><p>MOC 是 Map of Contents，也就是内容地图，所以我们会从构建一张地图出发。刚开始地图不需要太完美，很精细，因为一个不识路的人是没办法认路的，何况是指路、画地图，反正后面也要调整，可以随意一点。</p><p>我刚开始创建了一个叫 <code>JavaScript</code> 的索引页，里面用标题列了几项比较重要的内容，比如 OOP / DOM 之类的，然后在页面最上面列了几项常用的内容：<img src="https://s2.loli.net/2022/03/06/ybuxoSJmQGKcAV3.png" alt="https://s2.loli.net/2022/03/06/ybuxoSJmQGKcAV3.png" class="rounded-lg my-2" loading="lazy" decoding="async"></p><p>之后会以这一页内容为目录索引，不断补充和修改，构建自己的知识结构</p><h3 id="step2-写课堂笔记"><a href="#step2-写课堂笔记">Step2-写课堂笔记</a></h3><p>首先需要创建一个空白页面。我用 Obsidian 里自带的插件 <code>ZK 卡片 </code> 创建，可以自动生成时间戳标题，这个功能可以在设置里打开：</p><p><img src="https://s2.loli.net/2022/03/06/ZXVqaIcS4xy6Evs.png" alt="https://s2.loli.net/2022/03/06/ZXVqaIcS4xy6Evs.png" class="rounded-lg my-2" loading="lazy" decoding="async"></p><p>然后点击左边功能栏就可以创建并打开了</p><p><img src="https://s2.loli.net/2022/03/06/VQZpj96GbzxhO7i.png" alt="https://s2.loli.net/2022/03/06/VQZpj96GbzxhO7i.png" class="rounded-lg my-2" loading="lazy" decoding="async"></p><p>创建好之后，把这页笔记添加到索引页中，方便后面查找：</p><p><img src="https://s2.loli.net/2022/03/06/Xr9CR7dfekTts5M.png" alt="https://s2.loli.net/2022/03/06/Xr9CR7dfekTts5M.png" class="rounded-lg my-2" loading="lazy" decoding="async"></p><p>然后就可以写课堂笔记了，如果需要在笔记中插入图片，可以使用 Image Auto Upload 这个插件，配合 PicGo 客户端，可以在 Obsidian 里上传图片到图床，非常好用，直接粘贴图片到页面就可以了，具体可以看插件描述。</p><p><img src="https://s2.loli.net/2022/03/06/V8SgsyWqONeYwjB.png" alt="https://s2.loli.net/2022/03/06/V8SgsyWqONeYwjB.png" class="rounded-lg my-2" loading="lazy" decoding="async"></p><p>记笔记的过程没什么特别的，如果提到了一些我还不了解，以后还想深入的话题，我会用 <code>[[ ]]</code> 先标出来， 后面整理笔记的时候看到会留意下。</p><h3 id="step3-重组笔记"><a href="#step3-重组笔记">Step3-重组笔记</a></h3><p>做完笔记后，将笔记重组。</p><h4 id="布局"><a href="#布局">布局</a></h4><p>先打开三个窗口，布局如下：</p><p><img src="https://s2.loli.net/2022/03/06/QwSIsWMHUlbZ71r.png" alt="https://s2.loli.net/2022/03/06/QwSIsWMHUlbZ71r.png" class="rounded-lg my-2" loading="lazy" decoding="async"></p><p>其中课堂笔记和索引页面需要锁定，这样新打开的窗口就会一直在右下角那个地方，将在这个区域编辑笔记内容。</p><h4 id="结构编辑"><a href="#结构编辑">结构编辑</a></h4><p>浏览课堂笔记大纲，看下本节课的知识点应该放在索引里的哪里，知识点之间应该是怎样的关系，在索引里用 <code>[[]]</code> 都列出来，简而言之就是画思维导图。我的一个比较粗糙的整理：</p><p><img src="https://s2.loli.net/2022/03/06/bHa4rFvRIB58jeT.png" alt="https://s2.loli.net/2022/03/06/bHa4rFvRIB58jeT.png" class="rounded-lg my-2" loading="lazy" decoding="async"></p><p>这样就可以比较直观地看到哪些内容整理了，哪些没有整理。</p><h4 id="拆分笔记"><a href="#拆分笔记">拆分笔记</a></h4><p>然后就可以将左边的笔记拆分整合到右边的索引中了，按住快捷键 <code>CMD</code>，鼠标点击索引里的链接打开新页面，然后在右下部分复制整理。写完一个知识点后可以不用关闭窗口，按住 <code>CMD</code> 然后点击链接，继续在右下窗口编辑笔记。</p><p>看到索引浅色链接（没有创建页面的）都没了，就基本整理完了，可以再看看课程笔记里有没有要补充的。</p><p>然后就整理完啦！之后继续补充索引页面就好了……^_^</p>]]>
|
||
</content>
|
||
<category term="Obsidian" scheme="https://seviche.cc/?tags=Obsidian" />
|
||
</entry>
|
||
<entry>
|
||
<title type="html"><![CDATA[Airtable · 网页剪藏]]></title>
|
||
<link href="https://seviche.cc/2022-03-06-airtable" />
|
||
<id>https://seviche.cc/2022-03-06-airtable</id>
|
||
<published>2022-03-06T05:58:29.026Z</published>
|
||
<updated>2022-08-06T10:50:42.370Z</updated>
|
||
<summary type="html"><![CDATA[Airtable Web Cilpper设置]]></summary>
|
||
<content type="html">
|
||
<![CDATA[<h2 id="书签这回事"><a href="#书签这回事">书签这回事</a></h2><p>上回说到用 <a href="https://seviche.cc/blog/flare/" rel="nofollow noopener noreferrer external" target="_blank">自建网页书签 Flare</a> ，今天不小心把 SSH 链接弄坏了（也就是连不上了），因为搭载的服务不多，所以把整个服务器都重装了，Flare 网页书签也炸了。</p><p>其实搭建之后我没有用过（一次都没有），平时的书签管理主要靠搜索，各个浏览器之间的书签互相导入后，直接在搜索栏搜，如果是常用的网址，我用 Chorme 扩展 <a href="https://chrome.google.com/webstore/detail/eesel-productivity-at-wor/jffaiidojfhflballoapgofphkadiono" rel="nofollow noopener noreferrer external" target="_blank">eesel</a> 来解决，它可以列出最近用过的网页，按站点分类，查找起来很方便</p><p><img src="https://s2.loli.net/2022/03/06/JuHOINUdjprxV19.png" alt="essel 书签" class="rounded-lg my-2" loading="lazy" decoding="async"></p><p>最近还推出了一个新功能，可以通过命令进行一下快捷操作，如创建新的 coda 文件、figma 文件等……有点像 Alfred</p><p><img src="https://s2.loli.net/2022/03/06/7ZzGSUrWKR1vm6k.png" alt="https://s2.loli.net/2022/03/06/7ZzGSUrWKR1vm6k.png" class="rounded-lg my-2" loading="lazy" decoding="async"></p><p>然后还有一个工具叫 <a href="https://chrome.google.com/webstore/detail/omni-bookmark-history-tab/mapjgeachilmcbbokkgcbgpbakaaeehi" rel="nofollow noopener noreferrer external" target="_blank">Omni</a> 可以做类似的事情，它还可以搜收藏夹，但不知道为什么我的 Chrome 用不了这个，所以也一直没用。</p><h2 id="关于-airtable"><a href="#关于-airtable">关于 Airtable</a></h2><p>Airtable 是一个多功能的表格应用，它的表格跟 Notion 里的 Database 挺像的，不过功能更多，用来做网页收藏夹 Free Plan 完全够用。基本的操作可以看这个： <a href="https://sspai.com/post/44746" rel="nofollow noopener noreferrer external" target="_blank">真· Airtable 3 分钟菜鸟入门 - 少数派</a> ，我没有什么要补充的。</p><p>从去年开始，我开始用 Airtable 整理我的一些收藏夹。原因如下：</p><ol><li>可以分享的表格链接，移动端网页适配也很好</li><li>提供可嵌入网页（如博客）的 <code><iframe></code> 代码，样式也可以调整</li><li>方便的 Chrome 拓展，可以智能抓取网页标题和截图、描述</li><li>可以给收藏打 Tag，更好整理，也可以写补充描述/评分等</li><li>多种表格视图（Gallery/Calender/Kanban……）</li><li>美丽: D</li></ol><p>当然这样做也有一些缺点，和其他专门做网页书签的应用不同，Airtable 只是一个「表格」，所以从表格到收藏的网页中去需要点两次，也就是需要打开条目再点一次链接。我把它定义为一个「收藏仓库」，而不是一个随用随取的「文具袋」，我会尽可能详细地描述收藏的条目，以备之后查找和辨识。</p><p>我的书签例子：</p><iframe title="coding resource" class="airtable-embed" src="https://airtable.com/embed/shrPHGWAGI8JypL16?backgroundColor=cyanLight&viewControls=on" frameborder="0" onmousewheel="" width="100%" height="533"></iframe><h2 id="怎么用-airtable-剪切网页"><a href="#怎么用-airtable-剪切网页">怎么用 Airtable 剪切网页</a></h2><p>我的收藏夹示例： <a href="https://airtable.com/shrpftxf6JgRomP2X/tblEvtThXHNBMQ8lW/viwSXGTALloahC10H" rel="nofollow noopener noreferrer external" target="_blank">Airtable - About Coding</a></p><h3 id="1-创建表格"><a href="#1-创建表格">1. 创建表格</a></h3><p>至少包含三项内容：</p><ol><li>URL：用来放网页的链接</li><li>LongText：网页描述</li><li>Attachment：放网页截图</li></ol><p>如果需要打开 Markdown 格式支持，需要打开 <code>Enable rich text formatting</code><img src="https://s2.loli.net/2022/03/06/7agleEFG5YyNSWU.png" alt="https://s2.loli.net/2022/03/06/7agleEFG5YyNSWU.png" class="rounded-lg my-2" loading="lazy" decoding="async"></p><p>也可以增加 Tag 和 Categories 分类等其他内容，下面是我建的示例文件：</p><p><img src="https://s2.loli.net/2022/03/06/3IRug7QaOs46vBW.png" alt="https://s2.loli.net/2022/03/06/3IRug7QaOs46vBW.png" class="rounded-lg my-2" loading="lazy" decoding="async"></p><h3 id="2-创建-app"><a href="#2-创建-app">2. 创建 app</a></h3><p>点击右上角的 <code>App</code> → 点击 <code>App an app</code> → 搜 <code>Web clipper</code><img src="https://s2.loli.net/2022/03/06/ldpgQ9weHMJctUf.png" alt="https://s2.loli.net/2022/03/06/ldpgQ9weHMJctUf.png" class="rounded-lg my-2" loading="lazy" decoding="async"></p><p>点击 <code>add</code> 添加应用</p><p><img src="https://s2.loli.net/2022/03/06/v2TPpVXMnt4jYx8.png" alt="https://s2.loli.net/2022/03/06/v2TPpVXMnt4jYx8.png" class="rounded-lg my-2" loading="lazy" decoding="async"></p><p>然后按提示安装 Chrome 拓展，你可以直接在这里安装： <a href="https://chrome.google.com/webstore/detail/airtable-web-clipper/fehcbmngdgagfalpnfphdhojfdcoblgc" rel="nofollow noopener noreferrer external" target="_blank">Airtable web clipper</a></p><p>为剪切动作命名，如直接用表格名字：About Coding<img src="https://s2.loli.net/2022/03/06/69YEJzKCX5xntP7.png" alt="https://s2.loli.net/2022/03/06/69YEJzKCX5xntP7.png" class="rounded-lg my-2" loading="lazy" decoding="async"></p><p>然后点击 <code>Add to Extension</code>, 你会看到它出现在了 Web clipper 里面，不过现在先不用管，点击左上角关掉。<img src="https://s2.loli.net/2022/03/06/1tiLkpEXqTKJw3o.png" alt="https://s2.loli.net/2022/03/06/1tiLkpEXqTKJw3o.png" class="rounded-lg my-2" loading="lazy" decoding="async"></p><h3 id="3-配置剪切设置"><a href="#3-配置剪切设置">3. 配置剪切设置</a></h3><p>在 Web clipper 的设置页面（如下），可以调整表格里面各个单元格对应的网页数据，可以按需设置</p><p><img src="https://s2.loli.net/2022/03/06/6FMhjrZR2NSsqOG.png" alt="https://s2.loli.net/2022/03/06/6FMhjrZR2NSsqOG.png" class="rounded-lg my-2" loading="lazy" decoding="async"></p><p>其中：</p><ul><li>Page Title：页面标题</li><li>Page URL：页面链接</li><li>Selected text：打开 Web Clipper 时选中的文本</li><li>Meta tag：The field will be prefilled with the value of the matching meta tag. （不知道是什么</li><li>Text content by CSS selector：用 CSS 选择文本，会返回第一个符合选择器的文本内容，如 <code>.page-description</code></li><li>HTML attribute by CSS selector ：结合 HTML 属性选择</li></ul><p>我的设置是：</p><ul><li>Name——Page title</li><li>URL——Page URL</li><li>Attachments——none</li><li>Description——Selected Text</li></ul><h3 id="4-web-clipper-剪切"><a href="#4-web-clipper-剪切">4. Web Clipper 剪切</a></h3><p>配置好后就可以开始使用了。在你需要剪切的网页，打开 Airtable web clipper，也就是先前安装的浏览器拓展，点击相应动作，比如刚才创建的 About Coding（如果这个面板有挡到页面内容，可以用鼠标拖动到别的地方）</p><p><img src="https://s2.loli.net/2022/03/06/RTu2xDNn5teqlQP.png" alt="https://s2.loli.net/2022/03/06/RTu2xDNn5teqlQP.png" class="rounded-lg my-2" loading="lazy" decoding="async"></p><p>在 Attachment 里选择附加图片的来源：<img src="https://s2.loli.net/2022/03/06/tyU87WD4jsdBHiN.png" alt="https://s2.loli.net/2022/03/06/tyU87WD4jsdBHiN.png" class="rounded-lg my-2" loading="lazy" decoding="async"></p><p>Description 里面的内容可以自己写，也可以在打开 Web clipper 之前先选中，打开后会自动填充进去，如图：<img src="https://s2.loli.net/2022/03/06/vPLMNaOlkotWV2Y.png" alt="https://s2.loli.net/2022/03/06/vPLMNaOlkotWV2Y.png" class="rounded-lg my-2" loading="lazy" decoding="async"></p><p>最后点击 <code>Add record</code> 就完成啦</p>]]>
|
||
</content>
|
||
<category term="实用技巧" scheme="https://seviche.cc/?tags=%E5%AE%9E%E7%94%A8%E6%8A%80%E5%B7%A7" />
|
||
</entry>
|
||
<entry>
|
||
<title type="html"><![CDATA[JavaScript · 十进制数转二进制]]></title>
|
||
<link href="https://seviche.cc/2022-03-04-decbin" />
|
||
<id>https://seviche.cc/2022-03-04-decbin</id>
|
||
<published>2022-03-04T14:57:48.683Z</published>
|
||
<updated>2022-08-06T10:50:40.572Z</updated>
|
||
<summary type="html"><![CDATA[用JavaScript将十进制数转二进制数]]></summary>
|
||
<content type="html">
|
||
<![CDATA[<h2 id="题目"><a href="#题目">题目</a></h2><p>来源：<a href="http://ife.baidu.com/javascript/if&while.html#:~:text=opens%20new%20window" rel="nofollow noopener noreferrer external" target="_blank">“如果”可以“重来” | 百度前端技术学园</a></p><p>验证工具：<a href="https://www.sojson.com/hexconvert.html" rel="nofollow noopener noreferrer external" target="_blank">在线进制转换 | 进制转换器 — 在线工具</a></p><h3 id="task1"><a href="#task1">Task1</a></h3><p>实现当点击转化按钮时，将输入的十进制数字转化为二进制，并显示在 <code>result</code> 的 <code>p</code> 标签内</p><h3 id="task2"><a href="#task2">Task2</a></h3><ul><li>转化显示后的二进制数为 bin-bit 中输入的数字宽度，例如 <code>dec-number</code> 为 5 ，<code>bin-bit</code> 为 5 ，则转化后数字为 <code>00101</code></li><li>如果 <code>bin-bit</code> 小于转化后的二进制本身位数，则使用原本的位数，如 <code>dec-number</code> 为 5 ，<code>bin-bit</code> 为 2 ，依然输出 <code>101</code> ，但同时在 console 中报个错。</li></ul><h2 id="解法"><a href="#解法">解法</a></h2><!-- HTML_TAG_START --><pre class="shiki material-default" html="true"><div class="language-id">html</div><div class='code-container'><code><div class='line'><input id="dec-number" type="number" placeholder="输入一个十进制非负整数" /></div><div class='line'><input id="bin-bit" type="number" placeholder="输入转化后二进制数字位数" /></div><div class='line'><button id="trans-btn">转化为二进制</button></div><div class='line'><p id="result">运算结果</p></div><div class='line'><script></div><div class='line'> /////// Task 1</div><div class='line'> const btn = document.querySelector('#trans-btn')</div><div class='line'> const result = document.querySelector('#result')</div><div class='line'></div><div class='line'> function dec2bin() {</div><div class='line'> let decNumber = Number(document.querySelector('#dec-number').value)</div><div class='line'></div><div class='line'> // 判断输入必须为一个非负整数</div><div class='line'> if (decNumber < 0 || !Number.isInteger(decNumber)) {</div><div class='line'> alert('请输入一个非负整数！')</div><div class='line'> }</div><div class='line'></div><div class='line'> // 求余</div><div class='line'> let bin = []</div><div class='line'> let remainder</div><div class='line'> while (decNumber !== 0) {</div><div class='line'> remainder = decNumber % 2</div><div class='line'> decNumber = parseInt(decNumber / 2)</div><div class='line'> bin.unshift(remainder)</div><div class='line'> }</div><div class='line'> let binNumber = bin.join('')</div><div class='line'></div><div class='line'> ////// Task2</div><div class='line'> let binBit = Number(document.querySelector('#bin-bit').value)</div><div class='line'> if (binNumber.length >= binBit) {</div><div class='line'> binNumber = binNumber.slice(0, binBit + 1)</div><div class='line'> } else {</div><div class='line'> binNumber = binNumber.padStart(binBit, '0')</div><div class='line'> }</div><div class='line'> result.innerHTML = `运算结果：${binNumber}`</div><div class='line'> }</div><div class='line'> btn.addEventListener('click', dec2bin)</div><div class='line'></script></div></code></div></pre><!-- HTML_TAG_END -->]]>
|
||
</content>
|
||
<category term="JavaScript" scheme="https://seviche.cc/?tags=JavaScript" />
|
||
</entry>
|
||
<entry>
|
||
<title type="html"><![CDATA[JavaScript · 判断水仙花数]]></title>
|
||
<link href="https://seviche.cc/2022-03-03" />
|
||
<id>https://seviche.cc/2022-03-03</id>
|
||
<published>2022-03-03T15:07:14.533Z</published>
|
||
<updated>2022-08-06T10:50:38.994Z</updated>
|
||
<summary type="html"><![CDATA[用JavaScript判断水仙花数]]></summary>
|
||
<content type="html">
|
||
<![CDATA[<p>题目来源： <a href="http://ife.baidu.com/javascript/if&while.html#%E7%BC%96%E7%A0%81%E4%B8%89" rel="nofollow noopener noreferrer external" target="_blank">“如果”可以“重来” | 百度前端技术学园</a></p><h2 id="题目"><a href="#题目">题目</a></h2><p>根据用户输入的数据，判断水仙花数（三位数），水仙花数是指一个 n 位数 (n≥3)，它的每个位上的数字的 n 次幂之和等于它本身。</p><!-- HTML_TAG_START --><pre class="shiki material-default" html="true"><div class="language-id">html</div><div class='code-container'><code><div class='line'><label>请输需要判断的水仙花数(三位数):</label></div><div class='line'><input type="text" /></div><div class='line'><br /></div><div class='line'><button>开始判断</button></div><div class='line'><script></div><div class='line'> function numDaffodils(num) {</div><div class='line'> // 判断是否为水仙花数</div><div class='line'> }</div><div class='line'></script></div></code></div></pre><!-- HTML_TAG_END --><p><strong>需求说明</strong></p><ul><li>当点击 <code>开始判断</code> 按钮，就执行 <code>numDaffodils</code> 函数判断输入的数字是否为水仙花数.</li><li>如果是，就弹出提示框提示是水仙花数，如果不是，就提示不是水仙花数</li><li>例如输入 153，<code>153=1* 1*1+5*5*5+3*3*3</code> , 是水仙花数，就提示 153 是水仙花数。</li><li>请加入输入判断，必须输入数字，不能输入其他类型。</li></ul><h2 id="解法"><a href="#解法">解法</a></h2><!-- HTML_TAG_START --><pre class="shiki material-default" html="true"><div class="language-id">html</div><div class='code-container'><code><div class='line'><label>请输需要判断的水仙花数(三位数):</label></div><div class='line'><input type="text" /></div><div class='line'><br /></div><div class='line'><button>开始判断</button></div><div class='line'><script></div><div class='line'> const btn = document.querySelector('button')</div><div class='line'></div><div class='line'> function numDaffodils() {</div><div class='line'> let num = document.querySelector('input').value</div><div class='line'></div><div class='line'> //输入的是字符串</div><div class='line'> // console.log(typeof num); =>string</div><div class='line'></div><div class='line'> // 检查是否是有效数字</div><div class='line'> if (num.startsWith('0') || num.length !== 3 || isNaN(num)) alert('请输入三位有效数字')</div><div class='line'></div><div class='line'> // 拆分为数组</div><div class='line'> let numArr = num.split('')</div><div class='line'></div><div class='line'> //判断是不是水仙花数字！</div><div class='line'> const numCheck = numArr.reduce((acc, value) => acc + Math.pow(value, 3), 0)</div><div class='line'></div><div class='line'> numCheck == num ? alert('是水仙花数 ✅') : alert('不是水仙花数❗️')</div><div class='line'> }</div><div class='line'></div><div class='line'> btn.addEventListener('click', numDaffodils)</div><div class='line'></script></div></code></div></pre><!-- HTML_TAG_END --><p>这里有一个坑：从 <code><input type="text"></code> 获取输入内容<sup id="fnref-1"><a href="#fn-1" class="footnote-ref">1</a></sup>，因为 <code>type=text</code> ，所以输出的是 <code>string</code> 而不是 <code>number</code>，不能直接用<code>typeof ==='number'</code>判断输入的是不是数字</p><h2 id="参考"><a href="#参考">参考</a></h2><ul><li><p><a href="https://github.com/Homeuh/learn/blob/6ed2d79cd6abff09f981c0af21080c38b55b6ef2/out/artifacts/Web0_1_Web_exploded/Task_JS/task2_3%E7%AE%80%E5%8D%95%E6%B0%B4%E4%BB%99%E8%8A%B1.html" rel="nofollow noopener noreferrer external" target="_blank">learn/task2_3 简单水仙花.html · Homeuh/learn · GitHub</a></p></li><li><p><a href="https://github.com/Yaomiaomu/IFE/blob/fed038d6c76b2bf62ee83d6539c927c6fa333b91/JAVASCRIPT/%E6%B0%B4%E4%BB%99%E8%8A%B1%E6%95%B0.html" rel="nofollow noopener noreferrer external" target="_blank">IFE/水仙花数.html · Yaomiaomu/IFE · GitHub</a></p></li></ul><div class="footnotes"><hr><ol><li id="fn-1"><a href="https://stackoverflow.com/questions/469357/html-text-input-allow-only-numeric-input" rel="nofollow noopener noreferrer external" target="_blank">HTML text input allow only numeric input</a><a href="#fnref-1" class="footnote-backref">↩</a></li></ol></div>]]>
|
||
</content>
|
||
<category term="JavaScript" scheme="https://seviche.cc/?tags=JavaScript" />
|
||
</entry>
|
||
<entry>
|
||
<title type="html"><![CDATA[自建网页书签Flare]]></title>
|
||
<link href="https://seviche.cc/flare" />
|
||
<id>https://seviche.cc/flare</id>
|
||
<published>2022-02-20T14:04:17.000Z</published>
|
||
<updated>2022-08-06T10:49:53.655Z</updated>
|
||
<summary type="html"><![CDATA[通过Docker自建网页书签Flare]]></summary>
|
||
<content type="html">
|
||
<![CDATA[<p>Flare 是一个自托管的网页书签导航 (个人理解)，详细介绍可以看作者写的这篇：<a href="https://sspai.com/post/71329" rel="nofollow noopener noreferrer external" target="_blank">使用 Docker 搭建适用于 HomeLab 的书签导航</a></p><p>效果如图：<img src="https://uneorange.oss-cn-guangzhou.aliyuncs.com/202202152046471.png" alt="https://uneorange.oss-cn-guangzhou.aliyuncs.com/202202152046471.png" class="rounded-lg my-2" loading="lazy" decoding="async"></p><p>这里分成了“应用”和“书签”两个栏目，但其实都是网页链接书签，看示例文档里的设置，应用里的是使用更为频繁的链接，书签栏则是一些参考链接/外链，或许“应用”命名为“常用”，“书签”则命名为“链接”或者“其他”更好一些。我之前还以为应用是本地应用……(我的问题╮(￣ ▽ ￣"") ╭</p><p>项目仓库：<a href="https://github.com/soulteary/docker-flare" rel="nofollow noopener noreferrer external" target="_blank">GitHub - soulteary/docker-flare</a></p><h3 id="1创建-flare-文件夹"><a href="#1创建-flare-文件夹">1.创建 Flare 文件夹</a></h3><p>此处我将文件夹命名为 flare</p><!-- HTML_TAG_START --><pre class="shiki material-default" bash="true"><div class="language-id">bash</div><div class='code-container'><code><div class='line'>mkdir ~/flare && cd ~/flare</div></code></div></pre><!-- HTML_TAG_END --><h3 id="2下载包含示例的代码"><a href="#2下载包含示例的代码">2.下载包含示例的代码</a></h3><!-- HTML_TAG_START --><pre class="shiki material-default" bash="true"><div class="language-id">bash</div><div class='code-container'><code><div class='line'>git clone https://github.com/soulteary/docker-flare.git</div><div class='line'>cd docker-flare</div></code></div></pre><!-- HTML_TAG_END --><h3 id="3运行容器"><a href="#3运行容器">3.运行容器</a></h3><h4 id="方法-1直接启动"><a href="#方法-1直接启动">方法 1：直接启动</a></h4><!-- HTML_TAG_START --><pre class="shiki material-default" bash="true"><div class="language-id">bash</div><div class='code-container'><code><div class='line'># 可以使用最新镜像</div><div class='line'>docker run --rm -it -p 5005:5005 -v `pwd`/app:/app soulteary/flare</div><div class='line'># 也可以追求明确，使用固定版本</div><div class='line'>docker run --rm -it -p 5005:5005 -v `pwd`/app:/app soulteary/flare:0.2.10</div></code></div></pre><!-- HTML_TAG_END --><h4 id="方法-2通过-docker-composer"><a href="#方法-2通过-docker-composer">方法 2：通过 docker composer</a></h4><p>因为示例文件夹里面已经有一个 <code>docker-compose.yml</code> 文件了，所以我们不需要另外创建，如果需要修改的话可以用 <code>nano docker-compose.yml</code> 编辑 (如果需要设置用户登陆的话，需要在此修改)</p><p>启动容器：</p><!-- HTML_TAG_START --><pre class="shiki material-default" bash="true"><div class="language-id">bash</div><div class='code-container'><code><div class='line'>docker-compose up -d</div></code></div></pre><!-- HTML_TAG_END --><p>这时我们可以通过 <code>http://ip:5005</code> 访问书签页面了。</p><h3 id="4修改书签内容"><a href="#4修改书签内容">4.修改书签内容</a></h3><p>我用的是 Royal TSX 上的 File transfer 来查看文件夹内容。</p><p>配置文件的路径如下：<img src="https://uneorange.oss-cn-guangzhou.aliyuncs.com/202202152023587.png" alt="https://uneorange.oss-cn-guangzhou.aliyuncs.com/202202152023587.png" class="rounded-lg my-2" loading="lazy" decoding="async">各个文件的功能如下：</p><ul><li>config.yml：基本应用设置/标题/组件……</li><li>apps.yml：设置“应用”栏的书签名字/链接/icon/描述</li><li>bookmarks.yml：设置“书签”栏的分类/链接名称/icon/链接</li></ul><p>作者贴心地内置了 <code>@mdi/font</code> 相关 icon，可以通过 <code>http://ip:5005/resources/mdi-cheat-sheets/</code> 来访问图标列表，然后通过 Ctrl /CMD+ F 来进行页面内搜索。</p><p>在书签页面，可以通过左下角的齿轮图标调整主题和其他设置，和 <code>config.yml</code> 里的选项几乎一致：<img src="https://uneorange.oss-cn-guangzhou.aliyuncs.com/202202152044727.png" alt="https://uneorange.oss-cn-guangzhou.aliyuncs.com/202202152044727.png" class="rounded-lg my-2" loading="lazy" decoding="async"></p><h3 id="5用-nginx-反代和设置域名"><a href="#5用-nginx-反代和设置域名">5.用 nginx 反代和设置域名</a></h3><p>安装 Nginx 并打开 <code>flare.conf</code> 文件</p><!-- HTML_TAG_START --><pre class="shiki material-default" bash="true"><div class="language-id">bash</div><div class='code-container'><code><div class='line'>apt install nginx</div><div class='line'>cd /etc/nginx/sites-enabled/</div><div class='line'>rm rf default</div><div class='line'>cd /etc/nginx/sites-available/</div><div class='line'>nano flare.conf</div></code></div></pre><!-- HTML_TAG_END --><p><code>flare.conf</code> 的内容 (注意修改 example.com 为自己的域名)</p><!-- HTML_TAG_START --><pre class="shiki material-default" conf="true"><div class='code-container'><code>server { listen 80; listen [::]:80; server_name example.com; location / { proxy_pass http://127.0.0.1:5005; }}</code></div></pre><!-- Note from shiki-twoslash: the language conf was not set up for Shiki to use, and so there is no code highlighting --><!-- HTML_TAG_END --><p>用 <code>nginx -t</code> 测试配置文件，如果最后有出现 <code>suceessful</code>，那测试就成功了。</p><p>然后为这个配置文件增加一个链接</p><!-- HTML_TAG_START --><pre class="shiki material-default" bash="true"><div class="language-id">bash</div><div class='code-container'><code><div class='line'>cd /etc/nginx/sites-enabled/</div><div class='line'>ln -s ../sites-available/flare.conf flare.conf</div></code></div></pre><!-- HTML_TAG_END --><p>重启 nginx</p><!-- HTML_TAG_START --><pre class="shiki material-default" bash="true"><div class="language-id">bash</div><div class='code-container'><code><div class='line'>systemctl reload nginx</div></code></div></pre><!-- HTML_TAG_END --><p>刚遇到一些问题，又回到了我的 Miniflux 主页^ ^，遂重启容器：</p><!-- HTML_TAG_START --><pre class="shiki material-default" bash="true"><div class="language-id">bash</div><div class='code-container'><code><div class='line'>cd ~/flare/docker-flare</div><div class='line'>docker-compose down</div><div class='line'>docker-compose up -d</div></code></div></pre><!-- HTML_TAG_END --><h3 id="6ssl-证书和其他书签"><a href="#6ssl-证书和其他书签">6.SSL 证书和其他书签</a></h3><p>安装证书，详情参考这篇：<a href="https://halo.seviche.cc/archives/halo-in-docker" rel="nofollow noopener noreferrer external" target="_blank">用 docker 安装 Halo 博客并用 Nginx 反代</a></p><!-- HTML_TAG_START --><pre class="shiki material-default" bash="true"><div class="language-id">bash</div><div class='code-container'><code><div class='line'>certbot --nginx -d example.com -d www.example.com</div></code></div></pre><!-- HTML_TAG_END --><p>其他好用书签：</p><ul><li><a href="https://app.raindrop.io/" rel="nofollow noopener noreferrer external" target="_blank">Raindrop</a>：可以共享的网页书签，也可以嵌入到网页中，我的白噪音书签：<a href="https://raindrop.io/Rainny/-21205390" rel="nofollow noopener noreferrer external" target="_blank">白噪音</a></li><li><a href="https://airtable.com/" rel="nofollow noopener noreferrer external" target="_blank">Airtable</a>：一个共享表格工具，详情可以看我的资源收藏夹：<a href="https://airtable.com/shrpftxf6JgRomP2X/tblEvtThXHNBMQ8lW/viwSXGTALloahC10H" rel="nofollow noopener noreferrer external" target="_blank">About Coding</a></li><li><a href="https://guardo.io/" rel="nofollow noopener noreferrer external" target="_blank">Guardo</a>：说是可以替代 Raindrop，但书签文件夹不能生成共享链接，所以一直没用。</li></ul><p>再次感谢<a href="https://yukieyun.net/tech/shared-service-same-server-wordpress/" rel="nofollow noopener noreferrer external" target="_blank">云五的 WordPress 搭建教程</a>，照葫芦画瓢套用了 Nginx 的设置。</p>]]>
|
||
</content>
|
||
<category term="Docker" scheme="https://seviche.cc/?tags=Docker" />
|
||
<category term="Self-hosted" scheme="https://seviche.cc/?tags=Self-hosted" />
|
||
</entry>
|
||
<entry>
|
||
<title type="html"><![CDATA[用 docker 安装 Halo 博客]]></title>
|
||
<link href="https://seviche.cc/halo" />
|
||
<id>https://seviche.cc/halo</id>
|
||
<published>2022-02-16T14:04:17.000Z</published>
|
||
<updated>2022-08-06T10:49:49.221Z</updated>
|
||
<content type="html">
|
||
<![CDATA[<p>系统：ubuntn 20.04</p><p>参考：</p><ul><li><a href="https://yukieyun.net/tech/shared-service-same-server-wordpress/" rel="nofollow noopener noreferrer external" target="_blank">用 Nginx 反代实现 docker 安装 WordPress 与其他服务并存 – 沉默之沙</a></li><li><a href="https://mantyke.icu/2021/rsshub-miniflux/" rel="nofollow noopener noreferrer external" target="_blank">RSS | RSSHub 搭配 Miniflux，实现订阅自由</a></li></ul><p>Halo 官网：<a href="https://halo.run/#quickstart" rel="nofollow noopener noreferrer external" target="_blank">Halo</a></p><p>建议大家先去<a href="https://halo.run/themes.html" rel="nofollow noopener noreferrer external" target="_blank">Halo 官网主题仓库</a>看看有没有喜欢的主题再决定要不要装，不然很可能像我一样装了之后又跑路了…… ^^</p><h2 id="准备"><a href="#准备">准备</a></h2><h3 id="解析域名"><a href="#解析域名">解析域名</a></h3><p>域名生效需要时间，为了避免申请 SSL 证书时屡次失败导致超过申请次数限制，最好提前添加域名解析<sup id="fnref-1"><a href="#fn-1" class="footnote-ref">1</a></sup>，我这里用的是子域名。</p><p>为域名添加一个 A 记录，指向服务器所在 IP。如 Namesile 中：<img src="https://uneorange.oss-cn-guangzhou.aliyuncs.com/202202151120134.png" alt="https://uneorange.oss-cn-guangzhou.aliyuncs.com/202202151120134.png" class="rounded-lg my-2" loading="lazy" decoding="async"></p><h3 id="安装-docker"><a href="#安装-docker">安装 docker</a></h3><p>在 Ubuntu 中安装 docker<sup id="fnref-2"><a href="#fn-2" class="footnote-ref">2</a></sup>：</p><!-- HTML_TAG_START --><pre class="shiki material-default" zsh="true"><div class="language-id">zsh</div><div class='code-container'><code><div class='line'>apt update</div><div class='line'>apt install apt-transport-https ca-certificates curl software-properties-common</div><div class='line'>curl -fsSL https://download.docker.com/linux/ubuntu/gpg | apt-key add -</div><div class='line'>add-apt-repository "deb [arch=amd64] https://download.docker.com/linux/ubuntu bionic stable"</div><div class='line'>apt update</div></code></div></pre><!-- HTML_TAG_END --><p>其他系统可参考：<a href="https://blog.tantalum.life/posts/build-plume-in-docker/#%E5%AE%89%E8%A3%85dockerdocker-compose" rel="nofollow noopener noreferrer external" target="_blank">Plume | 利用 Docker-compose 搭建 Fedi 开源博客平台 – Zoe’s Dumpster.</a>中的安装方式，或者查看官方文档。有的 VPS 在装系统的时候也可以预装 docker，如 vultr/contabo 都有，不过 docker-compose 就需要自己装（这里似乎没有用到 docker-compose。</p><p>检查是否装好，有版本就装好了：</p><!-- HTML_TAG_START --><pre class="shiki material-default" zsh="true"><div class="language-id">zsh</div><div class='code-container'><code><div class='line'>docker -v</div></code></div></pre><!-- HTML_TAG_END --><h3 id="检查端口开放情况"><a href="#检查端口开放情况">检查端口开放情况</a></h3><p>参考：<a href="https://blog.csdn.net/lianghecai52171314/article/details/113813826" rel="nofollow noopener noreferrer external" target="_blank">Ubuntu20.04 开放指定端口_哈-CSDN 博客</a></p><p>我不太懂端口是怎么开放的，自动开放还是用了就开放。这里用的是 ufw 来设置防火墙开放端口，用 netstat 查看端口占用状况。</p><p>Debian/Ubuntu 中安装 netstat<sup id="fnref-3"><a href="#fn-3" class="footnote-ref">3</a></sup>：</p><!-- HTML_TAG_START --><pre class="shiki material-default" zsh="true"><div class="language-id">zsh</div><div class='code-container'><code><div class='line'>apt install net-tools</div></code></div></pre><!-- HTML_TAG_END --><p>检查端口占用：</p><!-- HTML_TAG_START --><pre class="shiki material-default" bash="true"><div class="language-id">bash</div><div class='code-container'><code><div class='line'>netstat -aptn</div></code></div></pre><!-- HTML_TAG_END --><p>ufw 是 Ubuntu20.04 系统预装的 <sup id="fnref-3"><a href="#fn-3" class="footnote-ref">3</a></sup>，如未安装上，可以这样安装：</p><!-- HTML_TAG_START --><pre class="shiki material-default" bash="true"><div class="language-id">bash</div><div class='code-container'><code><div class='line'> sudo apt update</div><div class='line'> sudo apt install ufw</div></code></div></pre><!-- HTML_TAG_END --><p>常用操作：</p><!-- HTML_TAG_START --><pre class="shiki material-default" bash="true"><div class="language-id">bash</div><div class='code-container'><code><div class='line'>ufw enable #打开防火墙</div><div class='line'>ufw disable #关闭防火墙</div><div class='line'>ufw status #查看防火墙规则</div><div class='line'>ufw allow 22 #打开22端口</div><div class='line'>ufw deny 22 #拒绝访问22端口</div></code></div></pre><!-- HTML_TAG_END --><p>打开防火墙之前最好打开常用的端口，如 22，不然可能会连不上服务器。</p><h2 id="安装-halo"><a href="#安装-halo">安装 Halo</a></h2><p>参考：<a href="https://docs.halo.run/getting-started/install/docker" rel="nofollow noopener noreferrer external" target="_blank">使用 Docker 部署 Halo | Halo Documents</a></p><h3 id="1创建工作目录"><a href="#1创建工作目录">1.创建工作目录</a></h3><p>创建一个文件夹存放 Halo，我这里命名为.halo，当然也可以叫其他的。</p><!-- HTML_TAG_START --><pre class="shiki material-default" bash="true"><div class="language-id">bash</div><div class='code-container'><code><div class='line'>mkdir ~/.halo && cd ~/.halo</div></code></div></pre><!-- HTML_TAG_END --><h3 id="2下载示例配置文件到工作目录"><a href="#2下载示例配置文件到工作目录">2.下载示例配置文件到工作目录</a></h3><!-- HTML_TAG_START --><pre class="shiki material-default" bash="true"><div class="language-id">bash</div><div class='code-container'><code><div class='line'>wget https://dl.halo.run/config/application-template.yaml -O ./application.yaml</div></code></div></pre><!-- HTML_TAG_END --><h3 id="3-编辑配置文件配置数据库或者端口"><a href="#3-编辑配置文件配置数据库或者端口">3. 编辑配置文件，配置数据库或者端口</a></h3><p>我不会用 vim 命令，所以这里用 nano 编辑</p><h4 id="打开配置文件-applicationyaml"><a href="#打开配置文件-applicationyaml">打开配置文件 application.yaml</a></h4><!-- HTML_TAG_START --><pre class="shiki material-default" bash="true"><div class="language-id">bash</div><div class='code-container'><code><div class='line'>nano application.yaml</div></code></div></pre><!-- HTML_TAG_END --><h4 id="修改配置"><a href="#修改配置">修改配置</a></h4><p><a href="https://docs.halo.run/getting-started/config" rel="nofollow noopener noreferrer external" target="_blank">配置参考 | Halo Documents</a>这里已经有刚下载好的配置文件了，我们可以根据自己的需要修改，Halo 数据库支持 H2 和 Mysql 数据库，因为我已经安装了一个 Wordpress 博客占用了 Mysql 数据库，虽然不知道有无影响，但为了避免出错，最后选择了按示例里的配置，使用 H2 数据库（主要还是懒得改</p><p>我这里将端口放到 8090，因为原 80 端口已经被占用，大家可以选择其他开放端口，注意修改数据库用户名和密码。</p><!-- HTML_TAG_START --><pre class="shiki material-default" yaml="true"><div class="language-id">yaml</div><div class='code-container'><code><div class='line'>server:</div><div class='line'> port: 8090</div><div class='line'></div><div class='line'> # Response data gzip.</div><div class='line'> compression:</div><div class='line'> enabled: false</div><div class='line'>spring:</div><div class='line'> datasource:</div><div class='line'> # H2 database configuration.</div><div class='line'> driver-class-name: org.h2.Driver</div><div class='line'> url: jdbc:h2:file:~/.halo/db/halo</div><div class='line'> username: admin #数据库用户名</div><div class='line'> password: 123456 #数据库密码</div><div class='line'></div><div class='line'> # MySQL database configuration.</div><div class='line'> # driver-class-name: com.mysql.cj.jdbc.Driver</div><div class='line'> # url: jdbc:mysql://127.0.0.1:3306/halodb?characterEncoding=utf8&useSSL=false&serverTimezone=Asia/Shanghai&allowPublicKeyRetrieval=true</div><div class='line'> # username: root</div><div class='line'> # password: 123456</div><div class='line'></div><div class='line'> # H2 database console configuration.</div><div class='line'> h2:</div><div class='line'> console:</div><div class='line'> settings:</div><div class='line'> web-allow-others: false</div><div class='line'> path: /h2-console</div><div class='line'> enabled: false</div><div class='line'></div><div class='line'>halo:</div><div class='line'> # Your admin client path is https://your-domain/{admin-path}</div><div class='line'> admin-path: admin</div><div class='line'></div><div class='line'> # memory or level</div><div class='line'> cache: memory</div></code></div></pre><!-- HTML_TAG_END --><h3 id="4-拉取最新的-halo-镜像"><a href="#4-拉取最新的-halo-镜像">4. 拉取最新的 Halo 镜像</a></h3><!-- HTML_TAG_START --><pre class="shiki material-default" bash="true"><div class="language-id">bash</div><div class='code-container'><code><div class='line'>docker pull halohub/halo:latest</div></code></div></pre><!-- HTML_TAG_END --><h3 id="5-创建容器"><a href="#5-创建容器">5. 创建容器</a></h3><!-- HTML_TAG_START --><pre class="shiki material-default" bash="true"><div class="language-id">bash</div><div class='code-container'><code><div class='line'>docker run -it -d --name halo -p 8090:8090 -v ~/.halo:/root/.halo --restart=unless-stopped halohub/halo:latest</div></code></div></pre><!-- HTML_TAG_END --><h3 id="6-打开安装引导界面"><a href="#6-打开安装引导界面">6. 打开安装引导界面。</a></h3><p>访问 <code>http://服务器ip:端口号</code><img src="https://uneorange.oss-cn-guangzhou.aliyuncs.com/202202151243869.png" alt="https://uneorange.oss-cn-guangzhou.aliyuncs.com/202202151243869.png" class="rounded-lg my-2" loading="lazy" decoding="async"></p><h2 id="用-nginx-反代"><a href="#用-nginx-反代">用 Nginx 反代</a></h2><p>说实话，我现在还没懂 Nginx 是干嘛的，反代又是什么，但好像一般都要有，那就做一下吧。幸好 Halo 还有现成的配置<sup id="fnref-4"><a href="#fn-4" class="footnote-ref">4</a></sup>可以抄一下，结合云五的 Wordpress 搭建教程<sup id="fnref-2"><a href="#fn-2" class="footnote-ref">2</a></sup>，把里面 wordpress 的部分改为 halo 就可以了。</p><h3 id="1安装-nginx"><a href="#1安装-nginx">1.安装 Nginx</a></h3><!-- HTML_TAG_START --><pre class="shiki material-default" bash="true"><div class="language-id">bash</div><div class='code-container'><code><div class='line'>apt install nginx</div><div class='line'>cd /etc/nginx/sites-enabled/</div><div class='line'>rm rf default</div><div class='line'>cd /etc/nginx/sites-available/</div><div class='line'>nano halo.conf</div></code></div></pre><!-- HTML_TAG_END --><h3 id="2配置-haloconf"><a href="#2配置-haloconf">2.配置 halo.conf</a></h3><p>注意修改<code>www.yourdomain.com</code> 为自己的域名</p><!-- HTML_TAG_START --><pre class="shiki material-default" conf="true"><div class='code-container'><code> upstream halo { server 127.0.0.1:8090; } server { listen 80; listen [::]:80; server_name www.yourdomain.com; client_max_body_size 1024m; location / { proxy_pass http://127.0.0.1:8090; proxy_set_header HOST $host; proxy_set_header X-Forwarded-Proto $scheme; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; } }</code></div></pre><!-- Note from shiki-twoslash: the language conf was not set up for Shiki to use, and so there is no code highlighting --><!-- HTML_TAG_END --><p>用<code>nginx -t</code>测试配置文件，如果最后有出现<code>suceessful</code> ，那测试就成功了。</p><p>然后为这个配置文件增加一个链接</p><!-- HTML_TAG_START --><pre class="shiki material-default" bash="true"><div class="language-id">bash</div><div class='code-container'><code><div class='line'>cd /etc/nginx/sites-enabled/</div><div class='line'>ln -s ../sites-available/halo.conf halo.conf</div></code></div></pre><!-- HTML_TAG_END --><h3 id="3重启-nginx"><a href="#3重启-nginx">3.重启 nginx</a></h3><!-- HTML_TAG_START --><pre class="shiki material-default" bash="true"><div class="language-id">bash</div><div class='code-container'><code><div class='line'>systemctl reload nginx</div></code></div></pre><!-- HTML_TAG_END --><p>现在访问域名就可以到达 halo 博客主页了，如果不行，可以 ping 一下域名看是不是解析还没生效：如 <code>ping exampl.com</code></p><p>我这里出现一个问题，是输入域名后到了我的 miniflux 主页，因为 halo.conf 里域名后缀输错了……</p><h2 id="安装-certbot为域名获取免费-ssl-证书"><a href="#安装-certbot为域名获取免费-ssl-证书">安装 certbot，为域名获取免费 SSL 证书</a></h2><p>有 ssl 证书后，就不会被提示网站不安全了，也就是从 http->https</p><h3 id="1安装-certbot"><a href="#1安装-certbot">1.安装 certbot</a></h3><!-- HTML_TAG_START --><pre class="shiki material-default" bash="true"><div class="language-id">bash</div><div class='code-container'><code><div class='line'>apt install certbot python3-certbot-nginx</div></code></div></pre><!-- HTML_TAG_END --><h3 id="2配置证书"><a href="#2配置证书">2.配置证书</a></h3><p>修改 example.com 为自己的域名：</p><!-- HTML_TAG_START --><pre class="shiki material-default" bash="true"><div class="language-id">bash</div><div class='code-container'><code><div class='line'>certbot --nginx -d example.com -d www.example.com</div></code></div></pre><!-- HTML_TAG_END --><p>如果你不确定是否可以申请成功，或者还在修改/测试配置，可以在后面加<code>--staging</code> 测试，避免申请超过次数限制<sup id="fnref-1"><a href="#fn-1" class="footnote-ref">1</a></sup></p><p>一些选项，这里最好选择 1，如果选择 2，就没办法用 http 访问域名了：</p><!-- HTML_TAG_START --><pre class="shiki material-default" text="true"><div class="language-id">text</div><div class='code-container'><code><div class='line'> 1: No redirect - Make no further changes to the webserver configuration.</div><div class='line'> 2: Redirect - Make all requests redirect to secure HTTPS access. Choose this for</div><div class='line'> new sites, or if you're confident your site works on HTTPS. You can undo this</div><div class='line'> change by editing your web server's configuration.</div></code></div></pre><!-- HTML_TAG_END --><p>然后同意条款后问是否暴露邮箱时选 No<sup id="fnref-2"><a href="#fn-2" class="footnote-ref">2</a></sup>。</p><h2 id="其他"><a href="#其他">其他</a></h2><ul><li>主题编辑：首页 / 外观 / 主题编辑 里修改具体文件</li><li>进入后台：域名后面加/admin，如：https://yourdomain/admin</li></ul><hr><div class="footnotes"><hr><ol><li id="fn-1"><a href="https://sspai.com/post/66447#:~:text=sudo%20swapon%20/swapfile-,SSL%20%E8%B6%85%E8%BF%87%E4%BD%BF%E7%94%A8%E9%A2%91%E7%8E%87%E9%99%90%E9%A2%9D,-%E6%98%AF%E7%9A%84%EF%BC%8C%E5%85%8D%E8%B4%B9" rel="nofollow noopener noreferrer external" target="_blank">WordPress + VPS 建站教程 - 少数派</a><a href="#fnref-1" class="footnote-backref">↩</a></li><li id="fn-2"><a href="https://yukieyun.net/tech/shared-service-same-server-wordpress/" rel="nofollow noopener noreferrer external" target="_blank">用 Nginx 反代实现 docker 安装 WordPress 与其他服务并存 – 沉默之沙</a><a href="#fnref-2" class="footnote-backref">↩</a></li><li id="fn-3"><a href="https://cloud.tencent.com/developer/article/1852241" rel="nofollow noopener noreferrer external" target="_blank">如何在 Linux 中安装 netstat 命令 - 云+社区 - 腾讯云</a><a href="#fnref-3" class="footnote-backref">↩</a></li><li id="fn-4"><a href="https://docs.halo.run/getting-started/install/docker#nginx" rel="nofollow noopener noreferrer external" target="_blank">使用 Docker 部署 Halo | Halo Documents</a><a href="#fnref-4" class="footnote-backref">↩</a></li></ol></div>]]>
|
||
</content>
|
||
<category term="Docker" scheme="https://seviche.cc/?tags=Docker" />
|
||
<category term="Self-hosted" scheme="https://seviche.cc/?tags=Self-hosted" />
|
||
</entry>
|
||
<entry>
|
||
<title type="html"><![CDATA[VS Code 技巧合集]]></title>
|
||
<link href="https://seviche.cc/vscode" />
|
||
<id>https://seviche.cc/vscode</id>
|
||
<published>2022-01-27T13:40:28.920Z</published>
|
||
<updated>2022-08-06T10:49:29.477Z</updated>
|
||
<summary type="html"><![CDATA[字体/插件/设置……]]></summary>
|
||
<content type="html">
|
||
<![CDATA[<h2 id="关闭-vs-code-中的-popup-面板"><a href="#关闭-vs-code-中的-popup-面板">关闭 VS Code 中的 popup 面板</a></h2><p>如下图所示，在写 JavaScript 的时候，这个东西一直出来，还是蛮烦的。</p><p><img src="https://s2.loli.net/2022/01/17/eElzfuJkH2Tcwv6.png" alt="https://s2.loli.net/2022/01/17/eElzfuJkH2Tcwv6.png" class="rounded-lg my-2" loading="lazy" decoding="async"></p><p>解决方法：在 setting 里搜 <strong>editor.parameterHints.enabled</strong>，取消勾</p><p><img src="https://s2.loli.net/2022/01/17/3fwBTnNZXRUDF8d.png" alt="https://s2.loli.net/2022/01/17/3fwBTnNZXRUDF8d.png" class="rounded-lg my-2" loading="lazy" decoding="async"></p><p>参考来源：<a href="https://stackoverflow.com/questions/35246645/how-do-i-get-rid-of-this-popup-in-vscode" rel="nofollow noopener noreferrer external" target="_blank">visual studio code - How do I get rid of this popup in VSCode? - Stack Overflow</a></p><h2 id="修改字体"><a href="#修改字体">修改字体</a></h2><p>改了 VS Code 里面的字体，Obsidian 里 code block 的字体也一起变了，用了有连字符的字体，箭头变得好好看！</p><p>现在用的是 Fira Code: <a href="https://github.com/tonsky/FiraCode" rel="nofollow noopener noreferrer external" target="_blank">https://github.com/tonsky/FiraCode</a></p><p>VS Code 里面可以在 settings.json 里加这行打开连字符： “editor.fontLigatures”: true</p><p>字体推荐：</p><ul><li><a href="https://zhuanlan.zhihu.com/p/36918101" rel="nofollow noopener noreferrer external" target="_blank">10 款最佳编程字体</a></li><li><a href="https://juejin.cn/post/6844904144239607821" rel="nofollow noopener noreferrer external" target="_blank">编程字体推荐</a></li></ul><h2 id="快捷键"><a href="#快捷键">快捷键</a></h2><ol><li>按住 alt/option，可以在多个地方同时输入</li><li>shift+option/alt+⬇️ 向下复制一行</li><li>option/alt +⬇️/ ⬆️ 向下 / 上移动</li><li>在 html 中 输 lorem ，可以生成填充文本</li></ol><h2 id="插件"><a href="#插件">插件</a></h2><ul><li>prettier:自动美化格式</li><li>markdown editor:markdown 预览编辑器</li><li>foam:双链笔记</li><li>auto rename tag</li><li>color highlight</li><li>image preview：图片预览</li><li>live server：实时预览</li><li><a href="https://frontmatter.codes/" rel="nofollow noopener noreferrer external" target="_blank">front matter</a>：可以用来设置 hugo/hexo 等博客的 frontmatter:</li></ul><h2 id="设置"><a href="#设置">设置</a></h2><ul><li>缩进空格等于的字符数量：tab size</li><li>保存：auto save /format on save</li></ul><h2 id="其他"><a href="#其他">其他</a></h2><ul><li>全角半角符号区分很明显，输错全角会有波浪线提醒</li><li>obsidian 中有一个插件 [Open Valut in VSCode] 可以在 VS Code 里打开 obsidian 的库</li></ul>]]>
|
||
</content>
|
||
<category term="实用技巧" scheme="https://seviche.cc/?tags=%E5%AE%9E%E7%94%A8%E6%8A%80%E5%B7%A7" />
|
||
</entry>
|
||
<entry>
|
||
<title type="html"><![CDATA[两种免费发布Axure原型的方式]]></title>
|
||
<link href="https://seviche.cc/axure" />
|
||
<id>https://seviche.cc/axure</id>
|
||
<published>2022-01-21T00:11:17.000Z</published>
|
||
<updated>2022-08-06T10:51:25.527Z</updated>
|
||
<summary type="html"><![CDATA[通过Netlify和Vercel发布]]></summary>
|
||
<content type="html">
|
||
<![CDATA[<p>好像很少看到有人提，这里简单记一下思路，我有用 Vercel 成功试验过，跟本地预览效果是一样的，还可以改域名。不过了解过 Netlify 之后，我觉得用 Netlify 更简单，有兴趣的可以再研究一下。</p><h2 id="netlify"><a href="#netlify">Netlify</a></h2><p>需要了解 Netlify 的使用方式</p><ol><li>在 Axure 中导出文档的 HTML 文件：发布>生成 HTML 文件</li><li>注册并托管到 Netlify</li><li>上传 HTML 文件：site -> 拖动 HTML 文件夹到下面的虚线区域</li></ol><p>更新方式：再导入一次更新后的文件包</p><h2 id="vercel-github"><a href="#vercel-github">Vercel +Github</a></h2><p>需要了解 Github 的基本使用方式和 Vercel</p><ol><li>在 Axure 中导出文档的 HTML 文件：发布>生成 HTML 文件</li><li>创建一个 Github repo，并下载到本地</li><li>复制 HTML 文件到本地 Github repo 的文件夹中，并 commit->push 到云端</li><li>导入相应 repo 到 Vercel 中</li></ol><p>更新方式：复制更新后的 HTML 文件夹到相应的 Github repo 文件夹中，覆盖原来的</p>]]>
|
||
</content>
|
||
<category term="实用技巧" scheme="https://seviche.cc/?tags=%E5%AE%9E%E7%94%A8%E6%8A%80%E5%B7%A7" />
|
||
</entry>
|
||
<entry>
|
||
<title type="html"><![CDATA[CSS · Argon主题的CSS修改]]></title>
|
||
<link href="https://seviche.cc/argon" />
|
||
<id>https://seviche.cc/argon</id>
|
||
<published>2022-01-16T14:04:17.000Z</published>
|
||
<updated>2022-08-06T10:50:02.849Z</updated>
|
||
<summary type="html"><![CDATA[基于最近所学，对当前Argon主题做了一些微小的调整]]></summary>
|
||
<content type="html">
|
||
<![CDATA[<p>然后已经不用 Wordpress 了，这个主题加载太慢了（也可能是我自己的问题</p><!-- HTML_TAG_START --><pre class="shiki material-default" css="true"><div class="language-id">css</div><div class='code-container'><code><div class='line'>/*删掉tag图标*/</div><div class='line'></div><div class='line'>.fa-tags {</div><div class='line'> display: none;</div><div class='line'>}</div><div class='line'></div><div class='line'>/*左侧菜单居中*/</div><div class='line'>.leftbar-menu-item {</div><div class='line'> text-align: center;</div><div class='line'>}</div><div class='line'>/*删掉日历图标*/</div><div class='line'>.fa-calendar-o {</div><div class='line'> display: none;</div><div class='line'>}</div><div class='line'></div><div class='line'>/*说说字体统一大小*/</div><div class='line'>.shuoshuo-date-date {</div><div class='line'> font-size: 15px;</div><div class='line'>}</div><div class='line'></div><div class='line'>.shuoshuo-date-month {</div><div class='line'> font-size: 15px;</div><div class='line'>}</div><div class='line'></div><div class='line'>/*banner字体改为思源宋体*/</div><div class='line'>.banner-title.text-white {</div><div class='line'> font-family: 'Noto Serif SC', serif;</div><div class='line'>}</div><div class='line'>/*删掉左侧搜索栏*/</div><div class='line'>.card-body.text-center.leftbar-search-button {</div><div class='line'> display: none;</div><div class='line'>}</div><div class='line'></div><div class='line'>/*删掉左侧栏站点名称*/</div><div class='line'>.leftbar-banner.card-body {</div><div class='line'> display: none;</div><div class='line'>}</div><div class='line'></div><div class='line'>/*作者相关链接居中*/</div><div class='line'>.site-author-links a {</div><div class='line'> text-align: center;</div><div class='line'>}</div><div class='line'></div><div class='line'>/*去掉页脚卡片外形，并缩减边距*/</div><div class='line'>#footer.card {</div><div class='line'> background: none;</div><div class='line'> padding: 0;</div><div class='line'> box-shadow: none !important;</div><div class='line'>}</div><div class='line'></div><div class='line'>html.darkmode #footer {</div><div class='line'> background: none !important;</div><div class='line'>}</div></code></div></pre><!-- HTML_TAG_END -->]]>
|
||
</content>
|
||
<category term="CSS" scheme="https://seviche.cc/?tags=CSS" />
|
||
</entry>
|
||
<entry>
|
||
<title type="html"><![CDATA[CSS · hover时图片放大的动效]]></title>
|
||
<link href="https://seviche.cc/hover" />
|
||
<id>https://seviche.cc/hover</id>
|
||
<published>2022-01-13T16:03:47.000Z</published>
|
||
<updated>2022-08-06T10:49:47.292Z</updated>
|
||
<summary type="html"><![CDATA[通过transform设置]]></summary>
|
||
<content type="html">
|
||
<![CDATA[<p>思路：</p><ol><li>设置放大</li><li>隐藏溢出</li></ol><!-- HTML_TAG_START --><pre class="shiki material-default" css="true"><div class="language-id">css</div><div class='code-container'><code><div class='line'>.gallery-item {</div><div class='line'> overflow: hidden;</div><div class='line'>}</div><div class='line'></div><div class='line'>.gallery-item img:hover {</div><div class='line'> transform: scale(1.1);</div><div class='line'>}</div><div class='line'>.gallery-item img {</div><div class='line'> display: block;</div><div class='line'> width: 100%;</div><div class='line'> transition: all 0.4s;</div><div class='line'>}</div></code></div></pre><!-- HTML_TAG_END --><p>效果：<a href="https://codepen.io/sevichee/pen/wvrRjjq" rel="nofollow noopener noreferrer external" target="_blank">https://codepen.io/sevichee/pen/wvrRjjq</a></p>]]>
|
||
</content>
|
||
<category term="CSS Trick" scheme="https://seviche.cc/?tags=CSS%20Trick" />
|
||
<category term="CSS" scheme="https://seviche.cc/?tags=CSS" />
|
||
</entry>
|
||
<entry>
|
||
<title type="html"><![CDATA[CSS · 三种布局方式]]></title>
|
||
<link href="https://seviche.cc/css-layout" />
|
||
<id>https://seviche.cc/css-layout</id>
|
||
<published>2022-01-13T10:07:00.000Z</published>
|
||
<updated>2022-08-06T10:49:54.807Z</updated>
|
||
<summary type="html"><![CDATA[Float / Flexbox / Grid /]]></summary>
|
||
<content type="html">
|
||
<![CDATA[<p>课程：<a href="https://www.udemy.com/course/design-and-develop-a-killer-website-with-html5-and-css3/" rel="nofollow noopener noreferrer external" target="_blank">Build Responsive Real-World Websites with HTML and CSS</a></p><h2 id="overview"><a href="#overview">Overview</a></h2><p><img src="https://s2.loli.net/2022/01/08/SjgmE2nl7TkUAqM.png" alt="https://s2.loli.net/2022/01/08/SjgmE2nl7TkUAqM.png" class="rounded-lg my-2" loading="lazy" decoding="async"></p><h2 id="box-sizing"><a href="#box-sizing">Box-sizing</a></h2><p><img src="https://s2.loli.net/2022/01/09/yCScJXVD9dYIjqK.png" alt="https://s2.loli.net/2022/01/09/yCScJXVD9dYIjqK.png" class="rounded-lg my-2" loading="lazy" decoding="async"></p><blockquote><p>未定义之前：content-box</p></blockquote><h3 id="reset"><a href="#reset">reset</a></h3><!-- HTML_TAG_START --><pre class="shiki material-default" css="true"><div class="language-id">css</div><div class='code-container'><code><div class='line'>* {</div><div class='line'> margin: 0;</div><div class='line'> padding: 0;</div><div class='line'> box-sizing: border-box;</div><div class='line'>}</div></code></div></pre><!-- HTML_TAG_END --><h2 id="float-layout"><a href="#float-layout">Float Layout</a></h2><ul><li>浮动在页面之上，对周围元素没有影响</li><li>现在很少用了</li></ul><h3 id="left"><a href="#left">left</a></h3><ul><li>浮动到页面左边</li></ul><p><img src="https://s2.loli.net/2022/01/08/HZlqu9dyfmG5QYV.png" alt="https://s2.loli.net/2022/01/08/HZlqu9dyfmG5QYV.png" class="rounded-lg my-2" loading="lazy" decoding="async"></p><!-- HTML_TAG_START --><pre class="shiki material-default" css="true"><div class="language-id">css</div><div class='code-container'><code><div class='line'>.author-img {</div><div class='line'> float: left;</div><div class='line'>}</div></code></div></pre><!-- HTML_TAG_END --><blockquote><p>此时图片和文本不在同一个层面上</p></blockquote><h3 id="right"><a href="#right">right</a></h3><blockquote><p>浮动到页面右边</p></blockquote><p><img src="https://s2.loli.net/2022/01/08/ESLcqpbH2VfuNXj.png" alt="https://s2.loli.net/2022/01/08/ESLcqpbH2VfuNXj.png" class="rounded-lg my-2" loading="lazy" decoding="async"></p><!-- HTML_TAG_START --><pre class="shiki material-default" css="true"><div class="language-id">css</div><div class='code-container'><code><div class='line'>p {</div><div class='line'> float: right;</div><div class='line'>}</div></code></div></pre><!-- HTML_TAG_END --><h3 id="absolute-positioning-vs-floats"><a href="#absolute-positioning-vs-floats">ABSOLUTE POSITIONING VS. FLOATS</a></h3><p><img src="https://s2.loli.net/2022/01/08/g6Zk2rDAWbxLeoI.png" alt="https://s2.loli.net/2022/01/08/g6Zk2rDAWbxLeoI.png" class="rounded-lg my-2" loading="lazy" decoding="async"></p><h3 id="clear-float"><a href="#clear-float">Clear Float</a></h3><ul><li>当没有其他元素可以 clear float 时，在其后新建一个元素设置 clear</li><li>当存在需要清除的元素时，直接在该元素上清除</li></ul><h4 id="方法-1-empty-div"><a href="#方法-1-empty-div">方法 1: empty div</a></h4><p>使用一个并列的空<code><div></code>元素来清除</p><!-- HTML_TAG_START --><pre class="shiki material-default" html="true"><div class="language-id">html</div><div class='code-container'><code><div class='line'><head></div><div class='line'> <h1>title</h1></div><div class='line'> <h2>title</h2></div><div class='line'> <div class="clear"></div></div><div class='line'></head></div></code></div></pre><!-- HTML_TAG_END --><!-- HTML_TAG_START --><pre class="shiki material-default" css="true"><div class="language-id">css</div><div class='code-container'><code><div class='line'>/*清除两者*/</div><div class='line'>.clear {</div><div class='line'> clear: both;</div><div class='line'>}</div><div class='line'></div><div class='line'>/*清除左边*/</div><div class='line'>.clear {</div><div class='line'> clear: left;</div><div class='line'>}</div></code></div></pre><!-- HTML_TAG_END --><h4 id="方法-2clearfix-hack"><a href="#方法-2clearfix-hack">方法 2:clearfix hack</a></h4><p>原理和 empty div 的方式一样，但更简单，利用 pseudo element 在 parent element 后增加一个元素</p><!-- HTML_TAG_START --><pre class="shiki material-default" html="true"><div class="language-id">html</div><div class='code-container'><code><div class='line'><head class="clearfix"></div><div class='line'> <h1>title</h1></div><div class='line'> <h2>title</h2></div><div class='line'></head></div></code></div></pre><!-- HTML_TAG_END --><!-- HTML_TAG_START --><pre class="shiki material-default" css="true"><div class="language-id">css</div><div class='code-container'><code><div class='line'>.clearfix::after {</div><div class='line'> clear: both;</div><div class='line'> content: '';</div><div class='line'> display: block;</div><div class='line'>}</div></code></div></pre><!-- HTML_TAG_END --><h2 id="flexbox"><a href="#flexbox">Flexbox</a></h2><p><img src="https://s2.loli.net/2022/01/09/8HiwTDALGbCZQdf.png" alt="https://s2.loli.net/2022/01/09/8HiwTDALGbCZQdf.png" class="rounded-lg my-2" loading="lazy" decoding="async"></p><p><img src="https://s2.loli.net/2022/01/09/RMmiLHxa78n4Atw.png" alt="https://s2.loli.net/2022/01/09/RMmiLHxa78n4Atw.png" class="rounded-lg my-2" loading="lazy" decoding="async"></p><blockquote><p>加粗字体为默认状态</p></blockquote><!-- HTML_TAG_START --><pre class="shiki material-default" css="true"><div class="language-id">css</div><div class='code-container'><code><div class='line'>.container {</div><div class='line'> display: flex;</div><div class='line'> align-items: center; /*水平居中*/</div><div class='line'> justify-content: center; /*垂直居中*/</div><div class='line'>}</div></code></div></pre><!-- HTML_TAG_END --><h3 id="flex-container"><a href="#flex-container">Flex container</a></h3><ul><li>flex container takes the height of the tallest items</li></ul><p>常用：</p><!-- HTML_TAG_START --><pre class="shiki material-default" css="true"><div class="language-id">css</div><div class='code-container'><code><div class='line'>.container {</div><div class='line'> display: flex;</div><div class='line'> align-items: stretch;</div><div class='line'> justify-content: flex-start;</div><div class='line'>}</div></code></div></pre><!-- HTML_TAG_END --><h3 id="flex-items"><a href="#flex-items">Flex items</a></h3><!-- HTML_TAG_START --><pre class="shiki material-default" css="true"><div class="language-id">css</div><div class='code-container'><code><div class='line'>.items {</div><div class='line'> align-self: flex-start;</div><div class='line'>}</div></code></div></pre><!-- HTML_TAG_END --><h3 id="propetities"><a href="#propetities">Propetities</a></h3><h4 id="order"><a href="#order">order</a></h4><p>数字越大越靠后</p><h4 id="flex-grow"><a href="#flex-grow">flex-grow</a></h4><p>数字越大占比越大</p><h4 id="flex-basis"><a href="#flex-basis">flex-basis</a></h4><p>item’s width</p><h4 id="shorthand"><a href="#shorthand">shorthand</a></h4><p><code>flex:1</code> =</p><!-- HTML_TAG_START --><pre class="shiki material-default" css="true"><div class="language-id">css</div><div class='code-container'><code><div class='line'>flex-grow: 1;</div><div class='line'>flex-shrink: 1;</div><div class='line'>flex-basis: 0%;</div></code></div></pre><!-- HTML_TAG_END --><h2 id="css-grid"><a href="#css-grid">CSS Grid</a></h2><p><img src="https://s2.loli.net/2022/01/09/6ovHUJOilxqtkjb.png" alt="https://s2.loli.net/2022/01/09/6ovHUJOilxqtkjb.png" class="rounded-lg my-2" loading="lazy" decoding="async"></p><p><img src="https://s2.loli.net/2022/01/09/1vLi2G6okjNzrut.png" alt="https://s2.loli.net/2022/01/09/1vLi2G6okjNzrut.png" class="rounded-lg my-2" loading="lazy" decoding="async"></p><p><img src="https://s2.loli.net/2022/01/09/krsGJ3AgQpR2Uf9.png" alt="https://s2.loli.net/2022/01/09/krsGJ3AgQpR2Uf9.png" class="rounded-lg my-2" loading="lazy" decoding="async"></p><h3 id="grid-container"><a href="#grid-container">grid container</a></h3><!-- HTML_TAG_START --><pre class="shiki material-default" css="true"><div class="language-id">css</div><div class='code-container'><code><div class='line'>.container {</div><div class='line'> display: grid;</div><div class='line'> grid-template-columns: 250px 200px; /*两列*/</div><div class='line'> grid-template-rows: 200px 200px; /*两行*/</div><div class='line'>}</div></code></div></pre><!-- HTML_TAG_END --><blockquote><p>通常不定义 rows</p></blockquote><h4 id="gap"><a href="#gap">Gap</a></h4><p>用 gap 而不是 margin:</p><!-- HTML_TAG_START --><pre class="shiki material-default" css="true"><div class="language-id">css</div><div class='code-container'><code><div class='line'>.container {</div><div class='line'> /*gap:20px;*/</div><div class='line'> columns-gap: 30px;</div><div class='line'> row-gap: 20px;</div><div class='line'>}</div></code></div></pre><!-- HTML_TAG_END --><h4 id="align-tracks-inside-containers"><a href="#align-tracks-inside-containers">align tracks inside containers</a></h4><blockquote><p>when the content is smaller than the grid</p></blockquote><!-- HTML_TAG_START --><pre class="shiki material-default" css="true"><div class="language-id">css</div><div class='code-container'><code><div class='line'>justify-content: center;</div><div class='line'>align-content: center;</div></code></div></pre><!-- HTML_TAG_END --><h3 id="grid-items"><a href="#grid-items">grid items</a></h3><!-- HTML_TAG_START --><pre class="shiki material-default" css="true"><div class="language-id">css</div><div class='code-container'><code><div class='line'>.items: {</div><div class='line'> grid-column: 2/3; /*当前后数值相差只有1位时，可省去后面的数字*/</div><div class='line'> grid-row: 2/3;</div><div class='line'></div><div class='line'> /*占几个列/行时*/</div><div class='line'> grid-column: 1/3;</div><div class='line'> grid-row: 1/3;</div><div class='line'> /*或者*/</div><div class='line'> grid-column: 1 / span 3;</div><div class='line'> /*自动填充剩余空间*/</div><div class='line'> grid-column: 1/-1;</div><div class='line'>}</div></code></div></pre><!-- HTML_TAG_END --><h4 id="align-items-inside-cells"><a href="#align-items-inside-cells">align items inside cells</a></h4><!-- HTML_TAG_START --><pre class="shiki material-default" css="true"><div class="language-id">css</div><div class='code-container'><code><div class='line'>.container {</div><div class='line'> align-items: center;</div><div class='line'> justify-items: center;</div><div class='line'>}</div></code></div></pre><!-- HTML_TAG_END --><!-- HTML_TAG_START --><pre class="shiki material-default" css="true"><div class="language-id">css</div><div class='code-container'><code><div class='line'>.item {</div><div class='line'> align-self: end;</div><div class='line'>}</div></code></div></pre><!-- HTML_TAG_END --><h3 id="fr"><a href="#fr">fr</a></h3><ul><li><code>1fr</code>:自动填充剩余空间</li><li>2:1:1:1 的四列</li></ul><!-- HTML_TAG_START --><pre class="shiki material-default" css="true"><div class="language-id">css</div><div class='code-container'><code><div class='line'>.container {</div><div class='line'> grid-template-columns: 2fr 1fr 1fr 1fr;</div><div class='line'>}</div><div class='line'>/*shorthand*/</div><div class='line'></div><div class='line'>.container {</div><div class='line'> grid-template-columns: repeat(4, 1fr);</div><div class='line'>}</div></code></div></pre><!-- HTML_TAG_END --><h3 id="implicit-row"><a href="#implicit-row">implicit row</a></h3><p>所定义的空间被用完后多出来的列</p>]]>
|
||
</content>
|
||
<category term="CSS" scheme="https://seviche.cc/?tags=CSS" />
|
||
</entry>
|
||
<entry>
|
||
<title type="html"><![CDATA[CSS · Add margin to buttons]]></title>
|
||
<link href="https://seviche.cc/margin" />
|
||
<id>https://seviche.cc/margin</id>
|
||
<published>2022-01-13T10:04:21.000Z</published>
|
||
<updated>2022-08-06T10:49:40.186Z</updated>
|
||
<summary type="html"><![CDATA[用helper class为单个按钮加margin，防止元素复用时产生不必要的margin]]></summary>
|
||
<content type="html">
|
||
<![CDATA[<p>用 helper class 为单个按钮加 margin，防止元素复用时产生不必要的 margin</p><h2 id="html"><a href="#html">HTML</a></h2><!-- HTML_TAG_START --><pre class="shiki material-default" html="true"><div class="language-id">html</div><div class='code-container'><code><div class='line'><button class="btn helper">Text</button></div></code></div></pre><!-- HTML_TAG_END --><h2 id="css"><a href="#css">CSS</a></h2><!-- HTML_TAG_START --><pre class="shiki material-default" css="true"><div class="language-id">css</div><div class='code-container'><code><div class='line'>.helper {</div><div class='line'> margin-right: 1.6rem;</div><div class='line'>}</div></code></div></pre><!-- HTML_TAG_END --><h2 id="为按钮增加内边距"><a href="#为按钮增加内边距">为按钮增加内边距</a></h2><p>如果设置 border 数值为负，周边空间则会收到影响，但用 box-shadow 就不会:</p><p>所以可以这样设置：</p><p><code>box-shadow: inset 0 0 0 3px #fff;</code></p>]]>
|
||
</content>
|
||
<category term="CSS Trick" scheme="https://seviche.cc/?tags=CSS%20Trick" />
|
||
<category term="CSS" scheme="https://seviche.cc/?tags=CSS" />
|
||
</entry>
|
||
<entry>
|
||
<title type="html"><![CDATA[CSS · Reusable Grid]]></title>
|
||
<link href="https://seviche.cc/grid" />
|
||
<id>https://seviche.cc/grid</id>
|
||
<published>2022-01-13T10:01:44.000Z</published>
|
||
<updated>2022-08-06T10:49:51.803Z</updated>
|
||
<summary type="html"><![CDATA[可复用的CSS Grid设置]]></summary>
|
||
<content type="html">
|
||
<![CDATA[<ol><li>先设置一个 class 为 grid，并设定 gap</li><li>子元素中再设置具体的列数</li></ol><p>如设一个上为 2 列和下为 3 列的栅格布局：</p><h4 id="css"><a href="#css">CSS:</a></h4><!-- HTML_TAG_START --><pre class="shiki material-default" css="true"><div class="language-id">css</div><div class='code-container'><code><div class='line'>.grid {</div><div class='line'> display: grid;</div><div class='line'> gap: 1.2rem;</div><div class='line'>}</div><div class='line'>.grid--2--cols {</div><div class='line'> grid-template-columns: repeat(2, 1fr);</div><div class='line'>}</div><div class='line'></div><div class='line'>.grid--3--cols {</div><div class='line'> grid-template-columns: repeat(3, 1fr);</div><div class='line'>}</div></code></div></pre><!-- HTML_TAG_END --><h4 id="html"><a href="#html">HTML:</a></h4><!-- HTML_TAG_START --><pre class="shiki material-default" html="true"><div class="language-id">html</div><div class='code-container'><code><div class='line'><section class="grid grid--2--cols"></div><div class='line'> <div>Text1</div></div><div class='line'> <div>Text2</div></div><div class='line'></section></div><div class='line'></div><div class='line'><section class="grid grid--3--cols"></div><div class='line'> <div>Text1</div></div><div class='line'> <div>Text2</div></div><div class='line'> <div>Text3</div></div><div class='line'></section></div></code></div></pre><!-- HTML_TAG_END -->]]>
|
||
</content>
|
||
<category term="CSS" scheme="https://seviche.cc/?tags=CSS" />
|
||
</entry>
|
||
<entry>
|
||
<title type="html"><![CDATA[CSS · Rem in CSS]]></title>
|
||
<link href="https://seviche.cc/rem-css" />
|
||
<id>https://seviche.cc/rem-css</id>
|
||
<published>2022-01-12T09:50:27.000Z</published>
|
||
<updated>2022-08-06T10:49:34.711Z</updated>
|
||
<summary type="html"><![CDATA[CSS中的Rem是什么]]></summary>
|
||
<content type="html">
|
||
<![CDATA[<p>默认为浏览器默认字体大小：</p><!-- HTML_TAG_START --><pre class="shiki material-default"><div class='code-container'><code><div class='line'>1rem=16px</div></code></div></pre><!-- HTML_TAG_END --><p>改变 rem 为 10px：</p><h2 id="1-set-px"><a href="#1-set-px">1. set px</a></h2><!-- HTML_TAG_START --><pre class="shiki material-default" css="true"><div class="language-id">css</div><div class='code-container'><code><div class='line'>html {</div><div class='line'> font-size: 10px;</div><div class='line'>}</div></code></div></pre><!-- HTML_TAG_END --><blockquote><p>这种方法会让用户不能改变页面字体大小，不建议用</p></blockquote><h2 id="2-percentage"><a href="#2-percentage">2. percentage</a></h2><p>设置为用户浏览器字体的大小比例。</p><!-- HTML_TAG_START --><pre class="shiki material-default"><div class='code-container'><code><div class='line'>html{</div><div class='line'>/* 10px/16px =62.5%*/</div><div class='line'>font-size:62.5%;</div><div class='line'>}</div></code></div></pre><!-- HTML_TAG_END -->]]>
|
||
</content>
|
||
<category term="CSS" scheme="https://seviche.cc/?tags=CSS" />
|
||
</entry>
|
||
<entry>
|
||
<title type="html"><![CDATA[翻译 · Material Design3]]></title>
|
||
<link href="https://seviche.cc/material" />
|
||
<id>https://seviche.cc/material</id>
|
||
<published>2022-01-03T13:02:17.000Z</published>
|
||
<updated>2022-08-06T10:49:37.342Z</updated>
|
||
<summary type="html"><![CDATA[部分翻译内容]]></summary>
|
||
<content type="html">
|
||
<![CDATA[<p>上个月参与了 <a href="https://www.yuque.com/advancedux/xr6e1n" rel="nofollow noopener noreferrer external" target="_blank">Material Design 3 的中文版</a>翻译，我和搭档一起翻译了 <a href="https://www.yuque.com/advancedux/xr6e1n/xip12y" rel="nofollow noopener noreferrer external" target="_blank">FAB (浮动操作按钮)</a> 的部分内容。</p><p>这份翻译还存在一些问题，部分专有词汇还没统一翻译，但大概看看还是可以的。</p><p>相关内容：</p><ul><li>推文：<a href="https://mp.weixin.qq.com/s/fm7RKvCSgBz0jCIWlr8mWg" rel="nofollow noopener noreferrer external" target="_blank">Material Design 最新改版，变化好大！</a></li><li><a href="https://m3.material.io/" rel="nofollow noopener noreferrer external" target="_blank">Material Design3 英文版</a></li><li><a href="https://www.yuque.com/advancedux/xr6e1n" rel="nofollow noopener noreferrer external" target="_blank">Material Design 3 中文版</a></li><li><a href="https://material.io/" rel="nofollow noopener noreferrer external" target="_blank">Material Design 旧版</a></li><li><a href="https://csdcachieve.notion.site/a1fb571707784c809b508a4e63a6ce81" rel="nofollow noopener noreferrer external" target="_blank">CSDC 共享语言库</a></li></ul>]]>
|
||
</content>
|
||
<category term="翻译" scheme="https://seviche.cc/?tags=%E7%BF%BB%E8%AF%91" />
|
||
</entry>
|
||
<entry>
|
||
<title type="html"><![CDATA[《用户体验要素》- 战略层（产品目标和用户需求）]]></title>
|
||
<link href="https://seviche.cc/用户体验要素3" />
|
||
<id>https://seviche.cc/用户体验要素3</id>
|
||
<published>2022-01-02T13:08:29.000Z</published>
|
||
<updated>2022-08-06T10:50:03.925Z</updated>
|
||
<summary type="html"><![CDATA[第三章笔记]]></summary>
|
||
<content type="html">
|
||
<![CDATA[<ul><li>战略层的基本问题？<img src="https://uneorange.oss-cn-guangzhou.aliyuncs.com/202201021315650.png" alt="https://uneorange.oss-cn-guangzhou.aliyuncs.com/202201021315650.png" class="rounded-lg my-2" loading="lazy" decoding="async"></li></ul><blockquote><p>知道企业与用户双方对产品的期许和目标,有助于促进用户体验各方面战略的确立和制定</p></blockquote><blockquote><p>此处的关键词是“明确”</p></blockquote><h2 id="产品目标"><a href="#产品目标">产品目标</a></h2><ul><li>产品目标的设定需要注意什么？<blockquote><p>要想在太具体和太宽泛之间取得一个平衡,我们就应该避免在尚未充分了解问题之前就试图得出结论。所以需要调研</p></blockquote></li><li>品牌识别为什么很重要？<blockquote><p>对于任何一个网站,它需要明确描述的基础目标之一就是品牌识别( brand identity)品牌识別——可以是概念系统,也可以是情绪反应它之所以重要是因为它无法不被用户注意。在用户与产品交互的同时,企业的品牌形象就不可避免地在用户的脑海中形成了</p></blockquote></li><li>成功标准( Success metrics)是什么？有什么用？<blockquote><p>即一些可追踪的指标，如印象数、转化率、日活等在产品上线以后用来显示它是否满足了我们自己的目标和用户的需求。好的成功标准不仅影响项目各阶段的决策,也为衡量用户体验工作价值提供了具体的依据。</p><ul><li>设定成功标准需要注意什么？对驱动用户体验决策而言有意义的成功标准,一定是可以明确地与用户行为绑定的标准,而这些用户行为也一定是可以通过设计来影响的行为。不是所有的成功标准必须直接由网站获得。你也可以衡量对网站的间接影响任何断章取义的标准都可能造成误导:请务必后退一步,看看除了网站之外发生了什么事,以确定你了解到事情的全貌。</li></ul></blockquote></li></ul><h2 id="用户需求"><a href="#用户需求">用户需求</a></h2><h3 id="用户细分-user-segmentation"><a href="#用户细分-user-segmentation">用户细分( user segmentation）</a></h3><ul><li>什么是用户细分？<blockquote><p>将用户分成更小的群组(或细分用户群)每一群用户都是由具有某些共同关键特征的用户所组成。</p></blockquote></li></ul><p><img src="https://s2.loli.net/2022/01/02/aVewkFg5Cx1SHPq.png" alt="https://s2.loli.net/2022/01/02/aVewkFg5Cx1SHPq.png" class="rounded-lg my-2" loading="lazy" decoding="async"></p><ul><li>如何进行用户细分？<blockquote><p>经验或专业程度上的不同就形成了我们细分用户群的基本维度</p><ul><li>人口统计学 demographic)<ul><li>性别、年龄、教育水平、婚烟状况、收入等。</li><li>这些人口统计的数据概况可以相当粗略(男性:18~49 岁) 也可以非常具体(未婚、女性、大学毕业、25~34 岁、年薪 5 万美元)。</li></ul></li><li>消费心态档案 psychographic profile描述用户对于这个世界,尤其是与你的产品有关的某个事物的观点和看法的心理分析方法。</li></ul></blockquote></li><li>细分到什么程度？<blockquote><p>创建细分用户群只是一种用于“揭示用户最终需求的手段”。你真正只需要得到的是和你发现的“用户需求数目”样多的细分用户群。</p></blockquote></li><li>面对相互矛盾的用户需求应该怎么办？<blockquote><p>很明显,我们无法提供一种方案可以同时满足这两种用户的需求。此时,我们要么选择针对单一用户群设计而排除其他用户群,要么为执行相同任务的不同用户群提供不同的方式。</p></blockquote></li></ul><h3 id="用户研究user-research"><a href="#用户研究user-research">用户研究(User Research）</a></h3><ul><li>有什么研究工具？如何用？<blockquote><p>问卷调査、用户访谈,或焦点小组) 最适合用于收集用户的普遍观点与感知。用户测试或现场调査)则更适用于理解具体的用户行为以及用户在和产品交互时的表现。</p></blockquote></li><li>什么是现场调查( contextual inquiry)？<blockquote><p>现场调查是指一整套完整、有郊全面的方法,用于了解在日常生活情境中的用户行为(因而得来此名)又叫行为考古</p></blockquote></li><li>什么是任务分析( task analysis)？<blockquote><p>任务分析的概念是认为每个用户与产品的交互行为都发生在执行某一任务的环境中。有时任务非常具体(譬如买电影票),而有时任务比较宽泛( 如学习国际商务章程)</p></blockquote></li><li>可用性的最终目标是什么？<blockquote><p>所谓可用性的最终目标,都是寻找令产品更容易使用的途径</p></blockquote></li><li>什么是卡片排序法？( card sorting)用途<blockquote><p>对于由信息动的产品,卡片排序法( card sorting)用于探索用户如何分类或组织各种信息元素方法给用户一沓索引卡片,每一张卡片附有信息元素的名字、描述,一张图像或内容的类型。然后用户根据小组或类别,依照自己感到最自然的方式将卡片排列出来。分析几位用户的卡片排列结果,就可以帮助我们了解用户对产品信息的看法常用于信息架构</p></blockquote></li></ul><h2 id="团队角色和流程"><a href="#团队角色和流程">团队角色和流程</a></h2><ul><li>团队中怎样沟通传递产品目标和用户需求？<blockquote><p>产品目标和用户需求经常被定义在一个正式的战略文档 ( strategy document)或愿景文档( vision document)中。这文档不仅仅是列出目标清单一一它提供不同目标之间的关系分析,并且说明这些目标要如何融入更大的企业环境中去。这些目标和对它们的分析经常由决策者、普通员工,和用户自己的直接意见来支持。这些意见生动地说明了项目中的战略制定问题。用户需求有时被记录在一个独立的用户调研报告中(将所有信息集中在一个地方有某些好处)。</p></blockquote></li></ul>]]>
|
||
</content>
|
||
<category term="《用户体验要素》" scheme="https://seviche.cc/?tags=%E3%80%8A%E7%94%A8%E6%88%B7%E4%BD%93%E9%AA%8C%E8%A6%81%E7%B4%A0%E3%80%8B" />
|
||
<category term="读书笔记" scheme="https://seviche.cc/?tags=%E8%AF%BB%E4%B9%A6%E7%AC%94%E8%AE%B0" />
|
||
</entry>
|
||
<entry>
|
||
<title type="html"><![CDATA[CSS · 基础笔记]]></title>
|
||
<link href="https://seviche.cc/css-fundamental" />
|
||
<id>https://seviche.cc/css-fundamental</id>
|
||
<published>2021-12-06T03:59:47.000Z</published>
|
||
<updated>2022-08-06T10:49:56.359Z</updated>
|
||
<content type="html">
|
||
<![CDATA[<p>一些随堂笔记。</p><p>课程：<a href="https://www.udemy.com/course/design-and-develop-a-killer-website-with-html5-and-css3/" rel="nofollow noopener noreferrer external" target="_blank">Build Responsive Real-World Websites with HTML and CSS</a></p><h2 id="css-是什么"><a href="#css-是什么">css 是什么</a></h2><ul><li><strong>C</strong>ascading<strong>S</strong>tyle<strong>S</strong>heets (层叠式样式表）</li><li>CSS describes the <strong>visual style and presentation</strong> of the <strong>content written in HTML</strong></li><li>CSS consists of countless <strong>properties</strong> that developers use to format the content: properties about font, text, spacing, layout, etc.</li></ul><h2 id="分类"><a href="#分类">分类</a></h2><h3 id="inline-css"><a href="#inline-css">inline CSS</a></h3><!-- HTML_TAG_START --><pre class="shiki material-default" html="true"><div class="language-id">html</div><div class='code-container'><code><div class='line'><p style="color:blue">text</p></div></code></div></pre><!-- HTML_TAG_END --><blockquote><p>最好不用</p></blockquote><h3 id="internal-css"><a href="#internal-css">internal CSS</a></h3><p>放在<code><head></code>里面的<code><style></code>，如：</p><!-- HTML_TAG_START --><pre class="shiki material-default" html="true"><div class="language-id">html</div><div class='code-container'><code><div class='line'><head></div><div class='line'> <style></div><div class='line'> h1 {</div><div class='line'> color: blue;</div><div class='line'> }</div><div class='line'> </style></div><div class='line'></head></div></code></div></pre><!-- HTML_TAG_END --><ul><li>代码很长的时候，整理很麻烦</li></ul><h3 id="external-css"><a href="#external-css">external CSS</a></h3><ul><li>引用单独的 css 文件，如 <code>style.css</code></li><li>放在<code><head></code>里用<code><link></code>引用，如：</li></ul><!-- HTML_TAG_START --><pre class="shiki material-default" html="true"><div class="language-id">html</div><div class='code-container'><code><div class='line'><head></div><div class='line'> <link href="style.css" ref="stylesheet" /></div><div class='line'></head></div></code></div></pre><!-- HTML_TAG_END --><p>关于<code><link></code> ，可参考:<a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/link#attr-rel" rel="nofollow noopener noreferrer external" target="_blank">MDN</a></p><h2 id="组成"><a href="#组成">组成</a></h2><p><img src="https://s2.loli.net/2022/01/06/Wvj8SKIwGrVaicJ.png" alt="https://s2.loli.net/2022/01/06/Wvj8SKIwGrVaicJ.png" class="rounded-lg my-2" loading="lazy" decoding="async"></p><h2 id="selectors"><a href="#selectors">Selectors</a></h2><h3 id="descendent-selector"><a href="#descendent-selector">descendent selector</a></h3><!-- HTML_TAG_START --><pre class="shiki material-default" css="true"><div class="language-id">css</div><div class='code-container'><code><div class='line'>footer p {</div><div class='line'> font-family: sans;</div><div class='line'>}</div><div class='line'></div><div class='line'>article header p {</div><div class='line'> color: blue;</div><div class='line'>}</div></code></div></pre><!-- HTML_TAG_END --><h3 id="line-selector"><a href="#line-selector">line selector</a></h3><!-- HTML_TAG_START --><pre class="shiki material-default" css="true"><div class="language-id">css</div><div class='code-container'><code><div class='line'>h1,</div><div class='line'>h2,</div><div class='line'>h3 {</div><div class='line'> color: blue;</div><div class='line'>}</div></code></div></pre><!-- HTML_TAG_END --><p>定义特定元素样式的两种方式：CSS ID、class attributes</p><h2 id="id"><a href="#id">id</a></h2><blockquote><p>给每个元素一个 id，仅能用一次，尽量不要用</p></blockquote><p>在 HTML 中：</p><!-- HTML_TAG_START --><pre class="shiki material-default" html="true"><div class="language-id">html</div><div class='code-container'><code><div class='line'><p id="author">text</p></div></code></div></pre><!-- HTML_TAG_END --><p>在 CSS 中：</p><!-- HTML_TAG_START --><pre class="shiki material-default" css="true"><div class="language-id">css</div><div class='code-container'><code><div class='line'>#author {</div><div class='line'> font-family: sans;</div><div class='line'>}</div></code></div></pre><!-- HTML_TAG_END --><h3 id="class-attributes"><a href="#class-attributes">class attributes</a></h3><blockquote><p>能无限复用</p></blockquote><p>在 HTML 中：</p><!-- HTML_TAG_START --><pre class="shiki material-default" html="true"><div class="language-id">html</div><div class='code-container'><code><div class='line'><p class="author">text</p></div></code></div></pre><!-- HTML_TAG_END --><p>在 CSS 中：</p><!-- HTML_TAG_START --><pre class="shiki material-default" css="true"><div class="language-id">css</div><div class='code-container'><code><div class='line'>.author {</div><div class='line'> font-family: sans;</div><div class='line'>}</div></code></div></pre><!-- HTML_TAG_END --><blockquote><p>能无限复用</p></blockquote><p>在 HTML 中：</p><!-- HTML_TAG_START --><pre class="shiki material-default" html="true"><div class="language-id">html</div><div class='code-container'><code><div class='line'><p class="author">text</p></div></code></div></pre><!-- HTML_TAG_END --><p>在 CSS 中：</p><!-- HTML_TAG_START --><pre class="shiki material-default" css="true"><div class="language-id">css</div><div class='code-container'><code><div class='line'>.author {</div><div class='line'> font-family: sans;</div><div class='line'>}</div></code></div></pre><!-- HTML_TAG_END --><h3 id="universal-selector"><a href="#universal-selector">universal selector</a></h3><ul><li>对所有元素生效</li><li>优先级最低</li><li>不可继承</li></ul><!-- HTML_TAG_START --><pre class="shiki material-default" css="true"><div class="language-id">css</div><div class='code-container'><code><div class='line'>* {</div><div class='line'> color: #1098ab;</div><div class='line'>}</div></code></div></pre><!-- HTML_TAG_END --><h3 id="body"><a href="#body">body</a></h3><ul><li>在<code><body></code> 里的通常只应用于文本元素（text）</li><li>Not all properties get inherited. It’s mostly ones <strong>related to text</strong>: <code>font-family</code>, <code>font-size</code>, <code>font-weight</code>, <code>font-style</code>, <code>color</code>, <code>line-height</code>, <code>letter-spacing</code>, <code>text-align</code>, <code>text-transform</code>, <code>text-shadow</code>, <code>list-style</code>, etc.</li><li>可继承</li></ul><h3 id="优先级"><a href="#优先级">优先级</a></h3><h4 id="conflicting-between-selectors"><a href="#conflicting-between-selectors">conflicting between selectors</a></h4><p><img src="https://s2.loli.net/2022/01/07/Zl3GX9dhrO2nqMs.png" alt="https://s2.loli.net/2022/01/07/Zl3GX9dhrO2nqMs.png" class="rounded-lg my-2" loading="lazy" decoding="async"></p><ul><li>尽量不要用<code>!important</code></li></ul><!-- HTML_TAG_START --><pre class="shiki material-default" css="true"><div class="language-id">css</div><div class='code-container'><code><div class='line'>foot p {</div><div class='line'> color: green !important;</div><div class='line'>}</div></code></div></pre><!-- HTML_TAG_END --><ul><li>所有 selector 都会被应用，只有冲突的按优先级应用</li><li>当使用相同类别的 selector 时，应用最后一个</li></ul><h4 id="inheritance"><a href="#inheritance">inheritance</a></h4><ul><li>inheriting elements can easily be override</li><li>优先级最低</li><li>body 可继承，universal selector 不可以</li></ul><h2 id="颜色"><a href="#颜色">颜色</a></h2><h3 id="rgbrgba"><a href="#rgbrgba">RGB/RGBA</a></h3><ul><li>基本<code>(r,g,b,alpha)</code></li><li>白色<code>(255,255,255)</code></li><li>黑色<code>(0,0,0)</code></li></ul><h2 id="hexadecimal-colors"><a href="#hexadecimal-colors">Hexadecimal Colors</a></h2><ul><li>0 to ff (255 in hexadecimal numbers):<code>#00ffff</code></li><li>Shorthand, when all colors are identical pairs<code>#off</code>当需要透明度的时候才用 rgb 颜色，一般用 hex</li></ul><h2 id="pseudo-class"><a href="#pseudo-class">Pseudo Class</a></h2><blockquote><p>用来指定特定元素</p></blockquote><h3 id="第一个元素最后一个元素"><a href="#第一个元素最后一个元素">第一个元素/最后一个元素</a></h3><!-- HTML_TAG_START --><pre class="shiki material-default" css="true"><div class="language-id">css</div><div class='code-container'><code><div class='line'>li:first-child {</div><div class='line'> font-weight: bold;</div><div class='line'>}</div><div class='line'></div><div class='line'>li:last-child {</div><div class='line'> font-style: italic;</div><div class='line'>}</div></code></div></pre><!-- HTML_TAG_END --><h3 id="奇数偶数-特定次序"><a href="#奇数偶数-特定次序">奇数/偶数 /特定次序</a></h3><!-- HTML_TAG_START --><pre class="shiki material-default" css="true"><div class="language-id">css</div><div class='code-container'><code><div class='line'>li:nth-child(odd) {</div><div class='line'> font-style: italic;</div><div class='line'>}</div><div class='line'></div><div class='line'>li:nth-child(even) {</div><div class='line'> font-style: italic;</div><div class='line'>}</div><div class='line'></div><div class='line'>li:nth-child(3) {</div><div class='line'> font-style: italic;</div><div class='line'>}</div></code></div></pre><!-- HTML_TAG_END --><h3 id="多种元素时"><a href="#多种元素时">多种元素时</a></h3><p>如下所示，当 HTML 中<code><p></code>并不是<code><article></code>里面的第一个元素时，不生效。</p><p>即当母元素(parent element)里有多种元素时(child elements)，不宜使用伪类(pseudo class)，可以在列中使用，如<code><li></code></p><!-- HTML_TAG_START --><pre class="shiki material-default" html="true"><div class="language-id">html</div><div class='code-container'><code><div class='line'><article></div><div class='line'> <head></head></div><div class='line'> <p></p></div><div class='line'></article></div></code></div></pre><!-- HTML_TAG_END --><!-- HTML_TAG_START --><pre class="shiki material-default" css="true"><div class="language-id">css</div><div class='code-container'><code><div class='line'>article p:fist-child {</div><div class='line'> font-family: sans;</div><div class='line'>}</div></code></div></pre><!-- HTML_TAG_END --><h3 id="style-hyperlinks"><a href="#style-hyperlinks">Style hyperlinks</a></h3><p>四个状态都应定义，并按顺序排列</p><h4 id="link"><a href="#link">link</a></h4><p>不进行交互的预览下</p><!-- HTML_TAG_START --><pre class="shiki material-default" css="true"><div class="language-id">css</div><div class='code-container'><code><div class='line'>a:link {</div><div class='line'> color: #1098ad;</div><div class='line'>}</div></code></div></pre><!-- HTML_TAG_END --><h4 id="visited"><a href="#visited">visited</a></h4><p>点击后</p><!-- HTML_TAG_START --><pre class="shiki material-default" css="true"><div class="language-id">css</div><div class='code-container'><code><div class='line'>a:visited {</div><div class='line'> color: #777;</div><div class='line'>}</div></code></div></pre><!-- HTML_TAG_END --><h4 id="hover"><a href="#hover">hover</a></h4><p>悬停时</p><!-- HTML_TAG_START --><pre class="shiki material-default" css="true"><div class="language-id">css</div><div class='code-container'><code><div class='line'>a:hover {</div><div class='line'> color: orangered;</div><div class='line'> font-weight: bold;</div><div class='line'> text-decoration: underline dotted orangered;</div><div class='line'>}</div></code></div></pre><!-- HTML_TAG_END --><h4 id="active"><a href="#active">active</a></h4><p>点击时(通常和 hover 同时出现</p><!-- HTML_TAG_START --><pre class="shiki material-default" css="true"><div class="language-id">css</div><div class='code-container'><code><div class='line'>a:active {</div><div class='line'> background-color: black;</div><div class='line'> font-style: italic;</div><div class='line'>}</div></code></div></pre><!-- HTML_TAG_END --><h2 id="pseudo-elements"><a href="#pseudo-elements">Pseudo Elements</a></h2><blockquote><p>any pseudo elements is actually an inline element</p></blockquote><p>在 HTML 中并不真实存在，但仍可在 CSS 中选择，如行内第一个字符：在 HTML 中并不真实存在，但仍可在 CSS 中选择，如行内第一个字符：</p><!-- HTML_TAG_START --><pre class="shiki material-default" css="true"><div class="language-id">css</div><div class='code-container'><code><div class='line'>h1::first-letter {</div><div class='line'> font-style: normal;</div><div class='line'>}</div></code></div></pre><!-- HTML_TAG_END --><p>段内第一行：</p><!-- HTML_TAG_START --><pre class="shiki material-default" css="true"><div class="language-id">css</div><div class='code-container'><code><div class='line'>p::first-line {</div><div class='line'> color: red;</div><div class='line'>}</div></code></div></pre><!-- HTML_TAG_END --><h3 id="adjacent-sibiling-selector"><a href="#adjacent-sibiling-selector">adjacent sibiling selector</a></h3><p>在同一 parent element 里，下面最临近的元素</p><p>如 h3 标题下的 p：</p><!-- HTML_TAG_START --><pre class="shiki material-default" css="true"><div class="language-id">css</div><div class='code-container'><code><div class='line'>h3 + p::first-line {</div><div class='line'> color: red;</div><div class='line'>}</div></code></div></pre><!-- HTML_TAG_END --><h3 id="after"><a href="#after">after</a></h3><ul><li>就算没有文字内容，也要定义<code>content</code></li><li>位于行末</li></ul><p><img src="https://s2.loli.net/2022/01/08/YZaXGonBRELSuvH.png" alt="https://s2.loli.net/2022/01/08/YZaXGonBRELSuvH.png" class="rounded-lg my-2" loading="lazy" decoding="async"></p><!-- HTML_TAG_START --><pre class="shiki material-default" css="true"><div class="language-id">css</div><div class='code-container'><code><div class='line'>h2::after {</div><div class='line'> content: 'TOP';</div><div class='line'> font-size: 16px;</div><div class='line'> font-weight: bold;</div><div class='line'> color: black;</div><div class='line'> padding: 5px 15px;</div><div class='line'> display: inline-block;</div><div class='line'> position: absolute;</div><div class='line'> top: -10px;</div><div class='line'> right: -25px;</div><div class='line'> background-color: #ffe70e;</div><div class='line'>}</div><div class='line'></div><div class='line'>h2 {</div><div class='line'> position: relative;</div><div class='line'>}</div></code></div></pre><!-- HTML_TAG_END --><h3 id="before"><a href="#before">before</a></h3><ul><li>位于行前</li></ul><!-- HTML_TAG_START --><pre class="shiki material-default" css="true"><div class="language-id">css</div><div class='code-container'><code><div class='line'>h2::before {</div><div class='line'>}</div></code></div></pre><!-- HTML_TAG_END --><h2 id="box-model"><a href="#box-model">Box Model</a></h2><p><img src="https://s2.loli.net/2022/01/07/hM1AKQwbp5u8gSJ.png" alt="https://s2.loli.net/2022/01/07/hM1AKQwbp5u8gSJ.png" class="rounded-lg my-2" loading="lazy" decoding="async"></p><p><img src="https://s2.loli.net/2022/01/07/V9SoD43kBH1z5cp.png" alt="https://s2.loli.net/2022/01/07/V9SoD43kBH1z5cp.png" class="rounded-lg my-2" loading="lazy" decoding="async"></p><p><img src="https://s2.loli.net/2022/01/07/pUJWb7iMqgI213G.png" alt="https://s2.loli.net/2022/01/07/pUJWb7iMqgI213G.png" class="rounded-lg my-2" loading="lazy" decoding="async"></p><h3 id="type-of-boxes"><a href="#type-of-boxes">Type of boxes:</a></h3><h4 id="inline-boxes"><a href="#inline-boxes">inline boxes</a></h4><p><img src="https://s2.loli.net/2022/01/08/HhPGpo83LnKMQCJ.png" alt="https://s2.loli.net/2022/01/08/HhPGpo83LnKMQCJ.png" class="rounded-lg my-2" loading="lazy" decoding="async"></p><h4 id="block-level-boxes"><a href="#block-level-boxes">block-level boxes</a></h4><p><img src="https://s2.loli.net/2022/01/08/kK4HD6YVsFIqx31.png" alt="https://s2.loli.net/2022/01/08/kK4HD6YVsFIqx31.png" class="rounded-lg my-2" loading="lazy" decoding="async"></p><h4 id="inline-block-boxes"><a href="#inline-block-boxes">inline-block boxes</a></h4><p><img src="https://s2.loli.net/2022/01/08/1Jxe5aOTtPwGFoc.png" alt="img其实是inline-block box " class="rounded-lg my-2" loading="lazy" decoding="async"></p><p>img 其实是 inline-block box</p><h3 id="padding"><a href="#padding">padding</a></h3><p>内边距</p><!-- HTML_TAG_START --><pre class="shiki material-default" css="true"><div class="language-id">css</div><div class='code-container'><code><div class='line'>padding: 上下 左右;</div></code></div></pre><!-- HTML_TAG_END --><h4 id="reset-margin-ane-padding"><a href="#reset-margin-ane-padding">reset margin ane padding</a></h4><!-- HTML_TAG_START --><pre class="shiki material-default" css="true"><div class="language-id">css</div><div class='code-container'><code><div class='line'>* {</div><div class='line'> margin: 0;</div><div class='line'> padding: 0;</div><div class='line'>}</div></code></div></pre><!-- HTML_TAG_END --><p>不要用 body</p><h3 id="margin"><a href="#margin">margin</a></h3><p>外边距</p><h4 id="collapsing-margins"><a href="#collapsing-margins">collapsing margins</a></h4><ul><li>当两元素的 margin 重合时，大的会覆盖小的</li></ul><h3 id="dimensions"><a href="#dimensions">Dimensions</a></h3><h4 id="width"><a href="#width">width</a></h4><ul><li>percentage: percentage of the width of the parents containers</li></ul><h2 id="position"><a href="#position">position</a></h2><p><img src="https://s2.loli.net/2022/01/08/u9G7IJyYWzbdRF4.png" alt="https://s2.loli.net/2022/01/08/u9G7IJyYWzbdRF4.png" class="rounded-lg my-2" loading="lazy" decoding="async"></p><h3 id="normal-flow"><a href="#normal-flow">Normal Flow</a></h3><ul><li>默认状态</li></ul><h3 id="absolute-position"><a href="#absolute-position">Absolute Position</a></h3><ul><li>绝对位置</li><li>常用于一些小元素</li><li>parent elements/containers should set to <code>relative</code></li><li>取决于最近层次的 relative parent elements/containers</li></ul><p><img src="https://s2.loli.net/2022/01/08/NIga4hbQOHVfFCr.png" alt="https://s2.loli.net/2022/01/08/NIga4hbQOHVfFCr.png" class="rounded-lg my-2" loading="lazy" decoding="async"></p><h3 id="centering-page"><a href="#centering-page">centering page</a></h3><p>use the <code><div></code> element to create a container class, then set the <code>margin-left</code> and <code>margin-right</code> to <code>auto</code></p><!-- HTML_TAG_START --><pre class="shiki material-default" css="true"><div class="language-id">css</div><div class='code-container'><code><div class='line'>.container {</div><div class='line'> width: 800px;</div><div class='line'> margin: 0 auto;</div><div class='line'>}</div></code></div></pre><!-- HTML_TAG_END --><h2 id="基本操作"><a href="#基本操作">基本操作</a></h2><h3 id="css-注释"><a href="#css-注释">CSS 注释</a></h3><ul><li><code>/*需要注释的内容*/</code></li><li>VS code 快捷键 :<code>CMD+/</code> (mac) <code>Control+/</code> (win)</li><li>调出开发者工具<code>cmd+i</code></li></ul><h3 id="fix-bugs"><a href="#fix-bugs">Fix bugs</a></h3><ul><li><p>方法：</p><ul><li><strong>inspect</strong></li><li>检查刚开始变得不一样的地方</li><li>如果有很多 selector，复杂的那个会被首先应用</li><li>检查 css 文件引用链接是否正确</li></ul></li><li><p>工具：HTML 校对器:<a href="https://validator.w3.org/" rel="nofollow noopener noreferrer external" target="_blank">Markup Validation Service</a></p><p>代码比对:<a href="https://www.diffchecker.com/" rel="nofollow noopener noreferrer external" target="_blank">Diffchecker</a></p></li></ul>]]>
|
||
</content>
|
||
<category term="CSS" scheme="https://seviche.cc/?tags=CSS" />
|
||
</entry>
|
||
<entry>
|
||
<title type="html"><![CDATA[HTML · 基础笔记]]></title>
|
||
<link href="https://seviche.cc/html-basis" />
|
||
<id>https://seviche.cc/html-basis</id>
|
||
<published>2021-12-06T03:59:47.000Z</published>
|
||
<updated>2022-08-06T10:49:44.906Z</updated>
|
||
<content type="html">
|
||
<![CDATA[<p>课程：<a href="https://www.udemy.com/course/design-and-develop-a-killer-website-with-html5-and-css3/" rel="nofollow noopener noreferrer external" target="_blank">Build Responsive Real-World Websites with HTML and CSS</a></p><h2 id="html-是什么"><a href="#html-是什么">HTML 是什么</a></h2><p>HyperTextMarkupLanguage<a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element" rel="nofollow noopener noreferrer external" target="_blank">HTML 元素参考 - HTML（超文本标记语言） | MDN</a></p><h2 id="基本组成"><a href="#基本组成">基本组成</a></h2><p>以<code><p>Hello!</p></code>为例子：</p><ol><li>opening tag:<code><p></code></li><li>content : <code>Hello!</code></li><li>closing tag: <code></p></code></li></ol><h2 id="框架"><a href="#框架">框架</a></h2><!-- HTML_TAG_START --><pre class="shiki material-default" html="true"><div class="language-id">html</div><div class='code-container'><code><div class='line'><!DOCTYPE html></div><div class='line'><html></div><div class='line'> <head lang="语言代码"></div><div class='line'> <meta charset="UTF-8" /></div><div class='line'> <title>这是标题的位置，head里面的东西都看不见（一般来说）</title></div><div class='line'> </head></div><div class='line'></div><div class='line'> <body></div><div class='line'> <h1>一级标题</h1></div><div class='line'> </body></div><div class='line'></html></div></code></div></pre><!-- HTML_TAG_END --><h2 id="attributes"><a href="#attributes">attributes</a></h2><ul><li>用来描述元素 elements</li><li>pieces of data</li></ul><div class="overflow-x-auto mb-4"><table class="table w-full"><thead><tr><th>attributes</th><th></th></tr></thead><tbody><tr><td>src</td><td>sources</td></tr><tr><td>alt*</td><td>alternative text (describe what the image are ) good for SEO/blind people</td></tr><tr><td>width</td><td>宽度</td></tr><tr><td>height</td><td>高度</td></tr><tr><td>href</td><td>超链接 <code>#</code>表示回到页首</td></tr><tr><td>target</td><td>在哪个窗口打开_blank 新窗口 <code>_self</code> 旧窗口 <code>_top</code>顶部 <code>_parent</code> 父级窗口，如果有窗口层级的话</td></tr></tbody></table></div><h2 id="tags"><a href="#tags">tags</a></h2><div class="overflow-x-auto mb-4"><table class="table w-full"><thead><tr><th></th><th></th></tr></thead><tbody><tr><td>head</td><td>在页面中不可见的元素，如页面标题、link to css files……</td></tr><tr><td>main</td><td>文章的主要内容（HTML5 中新增）</td></tr><tr><td>body</td><td>页面的主要内容</td></tr><tr><td>section</td><td>区块(semeantic HTMl</td></tr><tr><td>h1</td><td>标题，一个页面只能有一个 h1</td></tr><tr><td>p</td><td>段落</td></tr><tr><td>span</td><td>行内文本</td></tr><tr><td><code><!— —></code></td><td>注释</td></tr><tr><td>b</td><td><strong>加粗</strong>，和<code><strong></code>不同，它没有语意，是过时的表述</td></tr><tr><td>strong</td><td><strong>加粗</strong>，表示是页面中重要的元素</td></tr><tr><td>i</td><td><em>斜体</em>，过时的表述，应用<code><em></code></td></tr><tr><td>em</td><td><em>斜体</em>，emphasize</td></tr><tr><td>ol</td><td>1. order list 数字排序</td></tr><tr><td>ul</td><td>. unorder list</td></tr><tr><td>li</td><td>list item 列 ,用在 ol/ul 里面</td></tr><tr><td>img</td><td>图片 特殊类型，不需要包含内容，需要 attributes( src/alt/width/height)</td></tr><tr><td>meta</td><td>data about data meta charset=”UTF-8”</td></tr><tr><td>a</td><td>anchor 超链接（attribute:href)</td></tr><tr><td>header</td><td>页头(container</td></tr><tr><td>nav</td><td>导航 ( container</td></tr><tr><td>menu</td><td>菜单，web application 常用</td></tr><tr><td>article</td><td>内容(container</td></tr><tr><td>footer</td><td>页脚(container</td></tr><tr><td>div</td><td>无意义内容区块</td></tr><tr><td>br/</td><td>断行</td></tr><tr><td>aside</td><td>次级信息/额外信息</td></tr><tr><td>figure</td><td>常用于 feature cards/coding list……</td></tr><tr><td>figcaption</td><td>图片脚注(只能在 figure 里面用)</td></tr><tr><td>form</td><td>表单</td></tr><tr><td>input</td><td>输入框</td></tr><tr><td>label</td><td>表单输入标题（也许</td></tr><tr><td>table</td><td>表格</td></tr><tr><td>thead</td><td>表头</td></tr><tr><td>tbody</td><td>表体</td></tr><tr><td>th</td><td>表头单元格</td></tr><tr><td>tr</td><td>table row</td></tr><tr><td>td</td><td>table data</td></tr><tr><td>address</td><td>地址</td></tr><tr><td>s</td><td>删除</td></tr><tr><td>blockquote</td><td>引言</td></tr></tbody></table></div><ul><li><code><button></code> 和<code>< a></code> 的区别：<ul><li>button ：一种页面内操作</li><li>a: 页面跳转</li></ul></li></ul><h2 id="html-entity"><a href="#html-entity">HTML entity</a></h2><p>特殊符号速查表</p><p><a href="https://css-tricks.com/snippets/html/glyphs/" rel="nofollow noopener noreferrer external" target="_blank">Glyphs | CSS-Tricks</a></p><h2 id="semantic-html"><a href="#semantic-html">semantic HTML</a></h2><ul><li>use semantic elements instead of others, such as <code><div></code> / <code><b></code></li><li>semantic HTML good for SEO and accessibility</li></ul><h2 id="空格"><a href="#空格">空格</a></h2><p><code> </code></p><h2 id="当-div-中用-css-设置了图片时"><a href="#当-div-中用-css-设置了图片时">当 div 中用 css 设置了图片时</a></h2><!-- HTML_TAG_START --><pre class="shiki material-default" html="true"><div class="language-id">html</div><div class='code-container'><code><div class='line'><div class="image" role="img" arial-label="description about the image"></div></div></code></div></pre><!-- HTML_TAG_END --><h2 id="随堂练习"><a href="#随堂练习">随堂练习</a></h2><h3 id="商品卡片"><a href="#商品卡片">商品卡片</a></h3><iframe height="300" scrolling="no" title="html2" src="https://codepen.io/sevichee/embed/yLzErOL?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">See the Pen <a href="https://codepen.io/sevichee/pen/yLzErOL">html2</a> by Sowhere (<a href="https://codepen.io/sevichee">@sevichee</a>) on <a href="https://codepen.io">CodePen</a>.</iframe><h3 id="分页器-pagination"><a href="#分页器-pagination">分页器 pagination</a></h3><iframe height="300" scrolling="no" title="pagination" src="https://codepen.io/sevichee/embed/ZEXqREG?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">See the Pen <a href="https://codepen.io/sevichee/pen/ZEXqREG">pagination</a> by Sowhere (<a href="https://codepen.io/sevichee">@sevichee</a>) on <a href="https://codepen.io">CodePen</a>.</iframe>]]>
|
||
</content>
|
||
<category term="HTML" scheme="https://seviche.cc/?tags=HTML" />
|
||
</entry>
|
||
<entry>
|
||
<title type="html"><![CDATA[《用户体验要素》- 认识这些要素]]></title>
|
||
<link href="https://seviche.cc/用户体验要素2" />
|
||
<id>https://seviche.cc/用户体验要素2</id>
|
||
<published>2021-12-06T03:59:47.000Z</published>
|
||
<updated>2022-08-06T10:50:05.032Z</updated>
|
||
<summary type="html"><![CDATA[第二章笔记]]></summary>
|
||
<content type="html">
|
||
<![CDATA[<h2 id="五个层面"><a href="#五个层面"><strong>五个层面</strong></a></h2><ul><li>是哪五个层面？分别有什么内容？<img src="https://s2.loli.net/2021/12/06/6ghqsX3Bovb1S9N.png" alt="https://s2.loli.net/2021/12/06/6ghqsX3Bovb1S9N.png" class="rounded-lg my-2" loading="lazy" decoding="async"></li></ul><h2 id="表现层-surface"><a href="#表现层-surface"><strong>表现层 (surface)</strong></a></h2><ul><li>看得到，可操作</li><li>组成： 在表现层( surface),你看到的是一系列的网页,由图片和文字组成。</li><li>作用：一些可以点击的图片,从而<strong>执行某种功能</strong>,例如把你带到购物车里去的购物车图标。</li></ul><h2 id="框架层-skeleton"><a href="#框架层-skeleton"><strong>框架层 (skeleton)</strong></a></h2><ul><li>在表现层之下</li><li>组成：是按钮、控件照片和文本区域的<strong>位置</strong>。</li><li>作用：框架层用于优化设计布局,以达到这些元素的最大的效果和效率一一使你在需要的时候,能记得标识并找到购物车的按钮。</li></ul><h2 id="结构层structure"><a href="#结构层structure"><strong>结构层（structure）</strong></a></h2><ul><li>框架是结构的具体表达方式</li><li>和框架层的区别：<ul><li>框架层确定了在结账页面上交互元素的位置，而结构层则用来设计用户如何到达某个页面,并且在他们做完事情之后能去什么地方</li><li>框架层定义了导航条上各要素的排列方式,允许用户可以浏览不同的商品分类</li><li>结构层则确定哪些类别应该出现在那里。</li></ul></li></ul><p>笔记：相当于结构层是信息架构，框架层是信息架构所决定的布局。 地图和坐标？</p><h2 id="范围层-scope"><a href="#范围层-scope"><strong>范围层 （scope）</strong></a></h2><p><strong>特性和功能</strong>就构成了网站的范围层( scope)</p><h2 id="战略层-strategy"><a href="#战略层-strategy"><strong>战略层 （strategy）</strong></a></h2><ul><li>网站的范围基本上是由网站战略层( strategy)所决定的</li><li>内容：包括了经营者想从网站得到什么,还包括了用户想从网站得到什么。</li></ul><h2 id="如何建设这五个层面"><a href="#如何建设这五个层面"><strong>如何建设这五个层面？</strong></a></h2><h3 id="自下而上地建设"><a href="#自下而上地建设">自下而上地建设</a></h3><p><img src="https://s2.loli.net/2021/12/06/W53LrOJkURZT9S8.png" alt="https://s2.loli.net/2021/12/06/W53LrOJkURZT9S8.png" class="rounded-lg my-2" loading="lazy" decoding="async"></p><h3 id="在上一层完成之前开始下一层"><a href="#在上一层完成之前开始下一层">在上一层完成之前开始下一层</a></h3><p>上下层之间不是互相隔断的让任何一个层面中的工作都不能在其下层面的工作完成之前结束</p><p><img src="https://s2.loli.net/2021/12/06/PTR5yX9H6qUZ3F7.png" alt="https://s2.loli.net/2021/12/06/PTR5yX9H6qUZ3F7.png" class="rounded-lg my-2" loading="lazy" decoding="async"></p><h2 id="基本的双重性"><a href="#基本的双重性"><strong>基本的双重性</strong></a></h2><h3 id="什么是网页基本的双重性质"><a href="#什么是网页基本的双重性质">什么是网页基本的双重性质？</a></h3><p>网站既不能干脆地分类到应用程序,也不能分类到信息资源</p><h3 id="什么是信息型的媒介类产品"><a href="#什么是信息型的媒介类产品">什么是信息型的媒介类产品？</a></h3><ul><li>关注点是信息——网站应该提供哪些信息,这些信息对用户的意义是什么</li><li>创建一个富信息( information-rich)的用户体验,就是提供给用户个可以寻找、理解,且有意义的信息组合。</li></ul><h3 id="什么是功能型的平台类产品"><a href="#什么是功能型的平台类产品">什么是功能型的平台类产品</a></h3><ul><li>关注的是任务——令所在的操作都被纳入一个过程,去思考人们如何完成这个过程。</li><li>在这里,我们把网站看成用户用于完成一个或多个任务的一个或一组工具。</li></ul><h3 id="用户体验的基本要素是什么五个层次两种类别的产品"><a href="#用户体验的基本要素是什么五个层次两种类别的产品">用户体验的基本要素是什么？（五个层次、两种类别的产品）</a></h3><p><img src="https://s2.loli.net/2021/12/06/6xo2IgZcqNm8au1.png" alt="https://s2.loli.net/2021/12/06/6xo2IgZcqNm8au1.png" class="rounded-lg my-2" loading="lazy" decoding="async"></p>]]>
|
||
</content>
|
||
<category term="读书笔记" scheme="https://seviche.cc/?tags=%E8%AF%BB%E4%B9%A6%E7%AC%94%E8%AE%B0" />
|
||
<category term="《用户体验要素》" scheme="https://seviche.cc/?tags=%E3%80%8A%E7%94%A8%E6%88%B7%E4%BD%93%E9%AA%8C%E8%A6%81%E7%B4%A0%E3%80%8B" />
|
||
</entry>
|
||
<entry>
|
||
<title type="html"><![CDATA[《用户体验要素》- 用户体验为何如此重要]]></title>
|
||
<link href="https://seviche.cc/用户体验要素1" />
|
||
<id>https://seviche.cc/用户体验要素1</id>
|
||
<published>2021-11-29T03:06:10.000Z</published>
|
||
<updated>2022-08-06T10:50:06.494Z</updated>
|
||
<summary type="html"><![CDATA[第一章笔记]]></summary>
|
||
<content type="html">
|
||
<![CDATA[<p>在 MarginNote 里读了本书，现将其重新梳理一遍。本书共有 8 个章节，预计分 6 个文章写完，这是第一篇。<img src="https://i.loli.net/2021/11/29/KYZ2nPxXcCurWyL.png" alt="https://i.loli.net/2021/11/29/KYZ2nPxXcCurWyL.png" class="rounded-lg my-2" loading="lazy" decoding="async"></p><h2 id="什么是用户体验"><a href="#什么是用户体验"><strong>什么是用户体验</strong></a></h2><blockquote><p>用户体验并不是指一件产品本身是如何工作的</p></blockquote><blockquote><p>用户体验是指“产品如何与外界发生联系并发挥作用”,也就是人们如何“接触”和“使用”它。</p></blockquote><blockquote><p>用户体验设计通常要解决的是应用环境的综合问题</p></blockquote><h2 id="为体验而设计使用第一"><a href="#为体验而设计使用第一"><strong>为体验而设计：使用第一</strong></a></h2><blockquote><p>“设计一个用户体验良好的产品”作为明确的目标,意味着不仅仅是功能成外观那么简单。</p></blockquote><h3 id="为什么小而美的产品更容易成功"><a href="#为什么小而美的产品更容易成功">为什么小而美的产品,更容易成功？</a></h3><blockquote><p>产品越复杂,确定如何向用户提供良好的使用体验就越困难。在使用产品的过程中,每一个新增的特性、功能或步骤, 都增加了导致用户体验失败的机会</p></blockquote><h2 id="用户体验和商机"><a href="#用户体验和商机"><strong>用户体验和商机</strong></a></h2><h3 id="为什么在网站上用户体验比别的产品更重要"><a href="#为什么在网站上用户体验比别的产品更重要">为什么在网站上，用户体验比别的产品更重要？</a></h3><blockquote><p>不管用户访问的是什么类型的网站,它都是一个“自助式”的产品。没有可以事先阅读的说明书、没有任何操作培训或讨论会、没有客户服务代表来帮助用户了解这个网站。</p></blockquote><blockquote><p>用户所能依靠的只有自己的智慧和经验,来独自面对这个网站的信息一一那么这个网站的主要目标之,就是尽可能有效地传达那些信息</p></blockquote><p><img src="https://i.loli.net/2021/11/29/RgLjEZAiOQCax8U.png" alt="https://i.loli.net/2021/11/29/RgLjEZAiOQCax8U.png" class="rounded-lg my-2" loading="lazy" decoding="async"></p><h3 id="为什么用户体验很重要有什么作用吗"><a href="#为什么用户体验很重要有什么作用吗">为什么用户体验很重要？有什么作用吗</a></h3><p><strong>商机、竞争优势</strong></p><blockquote><p>提供优质的用户体验是一个重要的、可持续的竞争优势一一不仅仅对网站是这样, 对所有类型的产品和服务也是如此。</p></blockquote><blockquote><p>用户体验形成了客户对企业的整体印象,界定了企业和争对手的差异,并且决定定了客户是否还会再次光顾</p></blockquote><h3 id="什么是转化率有什么用"><a href="#什么是转化率有什么用">什么是转化率？有什么用？</a></h3><p><strong>衡量用户体验效果的指标</strong><img src="https://i.loli.net/2021/11/29/scDoiWbHGtNIr4k.png" alt="https://i.loli.net/2021/11/29/scDoiWbHGtNIr4k.png" class="rounded-lg my-2" loading="lazy" decoding="async"></p><blockquote><p>转化率通过跟踪有百分之多少的用户被你“转化”到了下一个步骤,就能衡量你的网站在达到“商业目的”方面的效率有多高</p></blockquote><h3 id="改善用户体验是为了什么通过什么方式达到"><a href="#改善用户体验是为了什么通过什么方式达到">改善用户体验，是为了什么？通过什么方式达到？</a></h3><blockquote><p>任何在用户体验上所做的努力,目的都是为了提高效率。</p></blockquote><ol><li>“帮助人们工作得更快</li><li>“减少他们犯错的几率</li></ol><h2 id="以用户为中心的设计"><a href="#以用户为中心的设计"><strong>以用户为中心的设计</strong></a></h2><h3 id="什么是以用户为中心的设计"><a href="#什么是以用户为中心的设计">什么是“以用户为中心”的设计？</a></h3><blockquote><p>创建吸引人的、高效的用户体验的方法称为“以用户为中心的设计(user- centered design)”。</p></blockquote><h3 id="怎么做"><a href="#怎么做">怎么做？</a></h3><blockquote><p>在开发产品的每一个步骤中,都要把用户列入考虑范围。</p></blockquote>]]>
|
||
</content>
|
||
<category term="读书笔记" scheme="https://seviche.cc/?tags=%E8%AF%BB%E4%B9%A6%E7%AC%94%E8%AE%B0" />
|
||
<category term="《用户体验要素》" scheme="https://seviche.cc/?tags=%E3%80%8A%E7%94%A8%E6%88%B7%E4%BD%93%E9%AA%8C%E8%A6%81%E7%B4%A0%E3%80%8B" />
|
||
</entry>
|
||
<entry>
|
||
<title type="html"><![CDATA[Evaluation]]></title>
|
||
<link href="https://seviche.cc/2021-11-18-ux5" />
|
||
<id>https://seviche.cc/2021-11-18-ux5</id>
|
||
<published>2021-11-18T14:09:49.000Z</published>
|
||
<updated>2022-08-06T10:47:38.841Z</updated>
|
||
<summary type="html"><![CDATA[Introduction to User Experience Design｜Week5]]></summary>
|
||
<content type="html">
|
||
<![CDATA[<h2 id="评估"><a href="#评估"><strong>评估</strong></a></h2><ul><li>可以确定我们正在改善用户的体验</li><li>需要定性、定量的数据</li></ul><h2 id="分类"><a href="#分类"><strong>分类</strong></a></h2><h3 id="形成性评估"><a href="#形成性评估">形成性评估</a></h3><ul><li>在设计<strong>低保真</strong>原型的过程中进行的</li><li>数据：( 例如：完成任务的时间或点击次数）（关注任务）</li><li>环境：一个受控环境, 例如, 实验室或办公室</li></ul><h3 id="总结性评估"><a href="#总结性评估">总结性评估</a></h3><ul><li>是在<strong>高保真</strong>原型或最终界面即将完成的情况下进行的。</li><li>数据：设计者能够访问的和分析的数据， 它们可以告诉我们如何使用系统。 例如，用户开始和结束会话时可能会有时间戳， 并记录用户如何与系统交互的数据（真实场景）、</li><li>场景：高保真原型可在野外进行，如真实的使用场景</li></ul><h2 id="如何评估"><a href="#如何评估"><strong>如何评估</strong></a></h2><h3 id="数据收集"><a href="#数据收集">数据收集</a></h3><ul><li>以问卷形式进行的定量数据,</li><li>记录用户完成任务时所经过的路径的数据。</li><li>用户访谈的形式获得的定性数据</li></ul><h3 id="衡量"><a href="#衡量">衡量</a></h3><ul><li>衡量任务的目标所达到的程度（完成程度）</li><li>包括完成任务的时间、单击次数或 执行任务时出现的错误数。</li></ul><h3 id="可学习性"><a href="#可学习性">可学习性</a></h3><ul><li>定义：首次成功完成任务的简单程度。</li><li>衡量：完成任务的点击次数、完成任务所需的时间量来获得客观的测量结果， 然后将这些数据与专家的表现进行比较。</li></ul><h3 id="可记忆性"><a href="#可记忆性">可记忆性</a></h3><ul><li>定义：要记住产品用方法的难易程度（如何在反复试验之后在界面上执行给定的任务）</li><li>衡量：时间量或点击次数（完成一项反复试验的任务, 以获得可记忆性的测量）</li></ul><h3 id="主观情感评估"><a href="#主观情感评估">主观情感评估</a></h3><p><img src="/2021-11-18-ux5/1.png" alt="/2021-11-18-ux5/1.png" class="rounded-lg my-2" loading="lazy" decoding="async"></p><ul><li>认知测量：心理负担</li><li>情感测量：情感体验</li></ul><h2 id="相关资源"><a href="#相关资源"><strong>相关资源</strong></a></h2><ol><li><a href="http://www.usability.gov/what-and-why/usability-evaluation.html" rel="nofollow noopener noreferrer external" target="_blank">usability evaluation</a></li><li><a href="https://www.interaction-design.org/literature/book/the-encyclopedia-of-human-computer-interaction-2nd-ed/usability-evaluation" rel="nofollow noopener noreferrer external" target="_blank">15. Usability Evaluation</a></li><li><a href="http://www.wqusability.com/articles/more-than-ease-of-use.html" rel="nofollow noopener noreferrer external" target="_blank">more than ease of use</a></li><li><a href="http://www.diku.dk/~kash/papers/CHI2000_froekjaer.pdf" rel="nofollow noopener noreferrer external" target="_blank">Measuring Usability: Are Effectiveness, Efficiency, and Satisfaction Really Correlated?</a></li><li><a href="https://www.nngroup.com/articles/usability-101-introduction-to-usability/" rel="nofollow noopener noreferrer external" target="_blank">usability 101|introduction to usability/</a></li></ol><h2 id="推荐教材"><a href="#推荐教材"><strong>推荐教材</strong></a></h2><h3 id="trade-book"><a href="#trade-book">Trade Book</a></h3><ul><li><strong>The Design of Everyday Things</strong>2013 edition by Don Norman</li></ul><h3 id="text-books"><a href="#text-books">Text Books</a></h3><ul><li><strong>Interaction Design</strong><ul><li>by Jennifer Preece, Helen Sharp and Yvonne Rogers (in alphabetical order).</li><li>There are four editions of this book. I believe any of the editions are a good purchase. This is the book I use in my undergraduate college course.</li></ul></li><li><strong>Human Computer Interaction</strong><ul><li>2004 by Dix, Finlay, Abowd & Beale.</li><li>This is an advance text book.</li></ul></li><li><strong>Understanding Your Users</strong><ul><li>2015 edition by Baxter, Courage & Caine.</li><li>I really like this book because it does what it claims, provides a “practical guide to User Research Methods</li></ul></li></ul><h2 id="参考网站"><a href="#参考网站"><strong>参考网站</strong></a></h2><ul><li><a href="http://www.usabilitybok.org/what-is-usability" rel="nofollow noopener noreferrer external" target="_blank">What is Usability? | Usability Body of Knowledge</a></li><li><a href="https://en.wikipedia.org/wiki/User_interface_design" rel="nofollow noopener noreferrer external" target="_blank">User interface design - Wikipedia</a></li><li><a href="https://en.wikipedia.org/wiki/User_experience_design" rel="nofollow noopener noreferrer external" target="_blank">User experience design - Wikipedia</a></li><li><a href="http://www.usabilityfirst.com/" rel="nofollow noopener noreferrer external" target="_blank">Usability First: Usability in Website and Software Design</a></li><li><a href="http://www.usability.gov/how-to-and-tools/methods/index.html" rel="nofollow noopener noreferrer external" target="_blank">Methods</a></li></ul>]]>
|
||
</content>
|
||
<category term="UX" scheme="https://seviche.cc/?tags=UX" />
|
||
</entry>
|
||
<entry>
|
||
<title type="html"><![CDATA[Prototyping]]></title>
|
||
<link href="https://seviche.cc/2021-11-18-ux4" />
|
||
<id>https://seviche.cc/2021-11-18-ux4</id>
|
||
<published>2021-11-18T13:26:41.000Z</published>
|
||
<updated>2022-08-06T10:49:10.016Z</updated>
|
||
<summary type="html"><![CDATA[Introduction to User Experience Design｜Week4]]></summary>
|
||
<content type="html">
|
||
<![CDATA[<h2 id="关于-prototyping"><a href="#关于-prototyping"><strong>关于 Prototyping</strong></a></h2><h3 id="什么是原型开发"><a href="#什么是原型开发">什么是原型开发</a></h3><ul><li>原型开发可以被定义为一个新颖设计的早期模型</li><li>通过原型来评估新设计的各个方面 并检查设计是否达到了预期的结果</li></ul><h3 id="原型开发的作用"><a href="#原型开发的作用">原型开发的作用</a></h3><ul><li>经济（节约时间的金钱）</li><li>快速构建、迭代</li></ul><h3 id="水平原型"><a href="#水平原型">水平原型</a></h3><p><img src="/2021-11-18-ux4/1.png" alt="/2021-11-18-ux4/1.png" class="rounded-lg my-2" loading="lazy" decoding="async">涵盖功能的广度，整合所含的功能（大概有什么）</p><h3 id="垂直原型"><a href="#垂直原型">垂直原型</a></h3><p><img src="/2021-11-18-ux4/2.png" alt="/2021-11-18-ux4/2.png" class="rounded-lg my-2" loading="lazy" decoding="async">对一些特征进行深入的建模（多层级）</p><h2 id="低保真-lofi-prototype"><a href="#低保真-lofi-prototype"><strong>低保真 Lofi Prototype</strong></a></h2><h3 id="低保真和高保真的区别"><a href="#低保真和高保真的区别">低保真和高保真的区别</a></h3><ul><li>低保真原型与最终设计几乎没有什么相似之处，无论是在形式或功能上（快速迭代、验证想法）</li><li>高保真原型则与最终设计非常相似</li></ul><h3 id="注意事项"><a href="#注意事项">注意事项</a></h3><ul><li>注重用户反馈</li><li>也可以让利益相关者加入反馈过程</li><li>避免完美主义，注重想法的表达和验证，关注核心路径</li></ul><h3 id="三种形式"><a href="#三种形式">三种形式</a></h3><h4 id="1-草图"><a href="#1-草图">1. 草图</a></h4><p>表明用户场景，痛点是怎么产生的（场景）<img src="/2021-11-18-ux4/3.png" alt="/2021-11-18-ux4/3.png" class="rounded-lg my-2" loading="lazy" decoding="async"></p><h4 id="2-故事版"><a href="#2-故事版">2. 故事版</a></h4><p><img src="/2021-11-18-ux4/4.png" alt="/2021-11-18-ux4/4.png" class="rounded-lg my-2" loading="lazy" decoding="async"></p><ul><li>一种以静态方式提供叙事的常用方法</li><li>将设计放在上下文中，来考虑用户如何在给定的场景中使用我们的新设计。</li><li>场景互动的迭代，简单的任务图形、场景互动</li></ul><h4 id="3卡片原型"><a href="#3卡片原型">3.卡片原型</a></h4><p><img src="/2021-11-18-ux4/5.png" alt="/2021-11-18-ux4/5.png" class="rounded-lg my-2" loading="lazy" decoding="async"></p><ul><li>表示我们与实际界面可能发生的交互序列。</li><li>使用一组索引卡。逐一代表一个用户在尝试完成任务时，会遇到的一序列屏幕。</li></ul><h2 id="其他原型方式"><a href="#其他原型方式"><strong>其他原型方式</strong></a></h2><h3 id="绿野仙踪奥茨法师"><a href="#绿野仙踪奥茨法师">绿野仙踪/奥茨法师</a></h3><p><em>Wizard of Oz</em></p><p><img src="/2021-11-18-ux4/6.png" alt="/2021-11-18-ux4/6.png" class="rounded-lg my-2" loading="lazy" decoding="async"></p><ul><li>用来模拟产品的功能。</li><li>通过让人执行通常由计算机执行的任务,在这里用户不知道该产品是不具备功能性的</li><li>优点：能够节省建立功能性产品的时间和金钱</li><li>缺点：<ul><li>需要相当长的时间来使其正常运转，并且它总是需要多人操作</li><li>需要一个训练有素的巫师，最终用户可能对系统有不切实际的期望。</li><li>基于欺骗性的功能，反过来可能会限制他们提供反馈，继而限制从收集的数据中得出的推论</li></ul></li></ul><h3 id="概念验证视频"><a href="#概念验证视频">概念验证视频</a></h3><p><em>Proof of Concept Video</em></p><ul><li>一个能够在各种场景下展示各种用途和系统的功能的视频（系统是如何工作的 以及在什么情况下它会有用）</li></ul><h3 id="隐喻技术"><a href="#隐喻技术">隐喻技术</a></h3><p><em>Metaphor Development</em></p><ul><li>考虑用户如何看待设计</li><li>帮助用户建立新设计如何运作的<strong>相关心理模型</strong></li><li>隐喻将新功能与用户以及熟悉的系统功能相比较对比。</li></ul><h2 id="相关资源"><a href="#相关资源"><strong>相关资源</strong></a></h2><h3 id="resources-and-tools-for-protoyping-1"><a href="#resources-and-tools-for-protoyping-1">Resources and Tools for Protoyping 1</a></h3><ol><li><a href="http://www.usability.gov/how-to-and-tools/methods/prototyping.html" rel="nofollow noopener noreferrer external" target="_blank">prototyping.html</a></li><li><a href="http://www.usabilityfirst.com/glossary/high-fidelity-prototype/" rel="nofollow noopener noreferrer external" target="_blank">high fidelity prototype/</a></li><li><a href="http://www.atlargeinc.com/insights/high-fidelity-vs-low-fidelity-prototyping-web-design-and-app-development" rel="nofollow noopener noreferrer external" target="_blank">high fidelity vs low fidelity prototyping web design and app development</a></li><li><a href="https://www.youtube.com/watch?v=91-JnTq3MhA" rel="nofollow noopener noreferrer external" target="_blank">Social Mirror</a></li></ol><h3 id="tools"><a href="#tools">Tools</a></h3><ol><li><a href="http://www.uxrecorder.com/" rel="nofollow noopener noreferrer external" target="_blank">Uxrecorder</a></li><li><a href="https://www.invisionapp.com/" rel="nofollow noopener noreferrer external" target="_blank">Invision</a></li><li><a href="https://marvelapp.com/" rel="nofollow noopener noreferrer external" target="_blank">Marvel</a></li><li><a href="http://www.axure.com/" rel="nofollow noopener noreferrer external" target="_blank">Axure</a></li></ol><h3 id="resources-for-prototyping-2"><a href="#resources-for-prototyping-2">Resources for Prototyping 2</a></h3><ol><li><a href="https://uxmag.com/articles/what-a-prototype-is-and-is-not" rel="nofollow noopener noreferrer external" target="_blank">What a prototype is and is not</a></li><li><a href="https://www.smashingmagazine.com/2014/10/the-skeptics-guide-to-low-fidelity-prototyping/" rel="nofollow noopener noreferrer external" target="_blank">the skeptics guide to low fidelity prototyping</a></li><li><a href="http://www.usabilityfirst.com/glossary/low-fidelity-prototype/" rel="nofollow noopener noreferrer external" target="_blank">low fidelity prototype</a></li><li><a href="http://andrewchen.co/why-every-consumer-internet-startup-should-do-more-low-fidelity-prototyping/" rel="nofollow noopener noreferrer external" target="_blank">why every consumer internet startup should do more low fidelity prototyping</a></li><li><a href="http://www.telono.com/en/articles/lo-fi-vs-hi-fi-prototyping-how-real-does-the-real-thing-have-to-be/" rel="nofollow noopener noreferrer external" target="_blank">lofi vs hifi prototyping how real does the real thing have to be</a></li><li><a href="http://it.toolbox.com/blogs/enterprise-solutions/prototyping-types-of-prototypes-14927" rel="nofollow noopener noreferrer external" target="_blank">prototyping types of prototypes</a></li><li><a href="http://www.usabilityfirst.com/glossary/horizontal-and-vertical-prototypes/" rel="nofollow noopener noreferrer external" target="_blank">horizontal and vertical prototypes</a></li><li><a href="http://marketblog.envato.com/grow-improve/creativity/introduction-sketch-ui-design/" rel="nofollow noopener noreferrer external" target="_blank">introduction sketch ui design/</a></li><li><a href="https://www.smashingmagazine.com/2011/12/the-messy-art-of-ux-sketching/" rel="nofollow noopener noreferrer external" target="_blank">the messy art of ux sketching/</a></li><li><a href="http://www.slideshare.net/LaneHalley/how-to-draw-quick-useful-ui-sketches" rel="nofollow noopener noreferrer external" target="_blank">how to draw quick useful ui sketches</a></li><li><a href="http://ui-patterns.com/blog/User-interface-sketching-tips-part-1" rel="nofollow noopener noreferrer external" target="_blank">User interface sketching tips part-1</a></li><li><a href="https://uxmag.com/articles/storyboarding-in-the-software-design-process" rel="nofollow noopener noreferrer external" target="_blank">storyboarding in the software design process</a></li><li><a href="http://www.fastcodesign.com/1672917/the-8-steps-to-creating-a-great-storyboard" rel="nofollow noopener noreferrer external" target="_blank">the 8 steps to creating a great storyboard</a></li><li><a href="http://www.slideshare.net/fgarofalo/users-story-ux-storyboarding" rel="nofollow noopener noreferrer external" target="_blank">users story ux storyboarding</a></li></ol>]]>
|
||
</content>
|
||
<category term="UX" scheme="https://seviche.cc/?tags=UX" />
|
||
</entry>
|
||
<entry>
|
||
<title type="html"><![CDATA[Design Alternatives]]></title>
|
||
<link href="https://seviche.cc/2021-11-14-ux3" />
|
||
<id>https://seviche.cc/2021-11-14-ux3</id>
|
||
<published>2021-11-14T03:18:45.000Z</published>
|
||
<updated>2022-08-06T10:49:15.281Z</updated>
|
||
<summary type="html"><![CDATA[Introduction to User Experience Design｜Week3]]></summary>
|
||
<content type="html">
|
||
<![CDATA[<h2 id="review-of-design-goals-审查设计目标"><a href="#review-of-design-goals-审查设计目标">Review of Design Goals 审查设计目标</a></h2><h3 id="用户体验的核心目标"><a href="#用户体验的核心目标">用户体验的核心目标</a></h3><blockquote><p>“用户使用界面来完成任务 ”</p><p>通过理解用户以及他们要完成的任务 以便设计出最好的界面(interface)</p></blockquote><p>前提是，最好的界面 只能在我们了解用户和他们想要完成的任务之后才能被设计出</p><h3 id="设计的定义"><a href="#设计的定义">设计的定义</a></h3><blockquote><p>一种创新的开发用来满足一些需求。</p></blockquote><h3 id="设计的目标"><a href="#设计的目标">设计的目标</a></h3><ul><li>要比现有的设计更好地满足用户的需要</li><li>不是为了新奇本身,而是为了服务和改善用户体验</li><li>设计新的界面是为了<strong>找到更好的方法来调解用户如何实现任务</strong>。 它可能需要我们创建一个全新的系统。 或者,我们可以简单地设计出新的输入和输出。</li></ul><h3 id="设计时需考虑的三个方面"><a href="#设计时需考虑的三个方面">设计时，需考虑的三个方面</a></h3><p><img src="/2021-11-14-ux3/1.png" alt="/2021-11-14-ux3/1.png" class="rounded-lg my-2" loading="lazy" decoding="async"></p><ul><li><strong>个人层面 individual</strong><ul><li>考虑用户特征。 这些包括用户的年龄,教育水平,和对科技的适应程度，</li><li>考虑用户之间的差异。</li></ul></li><li><strong>群体 group</strong><ul><li>考虑用户之间的交互（一组用户）</li></ul></li><li><strong>社会 society</strong><ul><li>文化事件会影响系统的使用 和采纳情况。</li><li>我们需要了解与用户所从事的任务相关的文化价值观， 并在设计时考虑这些问题</li></ul></li></ul><h2 id="design-alternatives-设计替代方案"><a href="#design-alternatives-设计替代方案"><strong>Design Alternatives 设计替代方案</strong></a></h2><h3 id="目标"><a href="#目标">目标</a></h3><p>开发一个比现在更能满足用户需求的界面（基于设计的问题空间)</p><h3 id="关键"><a href="#关键">关键</a></h3><p>使用屏幕实践将设计基础概念化</p><h3 id="road-map-路线"><a href="#road-map-路线">Road map 路线</a></h3><ul><li><p><strong>能用 useful</strong></p><ul><li><p><strong>目标</strong></p><p>改善用户完成目标任务的能力</p></li><li><p><strong>方法</strong></p><p>回顾第一阶段获得的数据 并且鉴别出用户的需求</p><ol><li><p><strong>显性需求</strong></p><p><img src="/2021-11-14-ux3/2.png" alt="/2021-11-14-ux3/2.png" class="rounded-lg my-2" loading="lazy" decoding="async"></p></li><li><p><strong>隐形需求</strong></p><p><img src="/2021-11-14-ux3/3.png" alt="/2021-11-14-ux3/3.png" class="rounded-lg my-2" loading="lazy" decoding="async"></p></li></ol></li></ul></li><li><p><strong>好用 usable</strong></p><ul><li><p><strong>目标</strong></p><p>以功能性和在第一阶段所发现的非功能性的需求为基础，使用户更加有效高效和满意 地完成任务，从而改善他们的用户体验</p></li><li><p><strong>方法</strong></p><p>回顾第一阶段的数据，确定设计可替代品中功能性和非功能性的需求<img src="/2021-11-14-ux3/4.png" alt="/2021-11-14-ux3/4.png" class="rounded-lg my-2" loading="lazy" decoding="async"></p><ol><li><p><strong>功能性需求</strong></p><p>——面向用户的</p><p>系统应该完成的，这些基于用户所期望的系统功能</p></li><li><p><strong>非功能性需求</strong></p><p>——面向商家的</p><p>和系统开发有关的限制。它们也可以被看作质量特性（ 这些特性包含了许多或后端功能，比如安全性，可执行性，可维护性 但是他们也包括了前端功能货可用特性，像布局、流程或者甚至是语言本地化需求）</p></li></ol></li></ul></li><li><p><strong>小组讨论</strong></p><ul><li>头脑风暴<ul><li>学生或设计师的个人特征， 也会影响到他们发现的需求</li><li>在头脑风暴中，最重要的原则是打开思路，不要错过任何点子</li></ul></li><li>想法整理使用类同图表有助于把头脑风暴数据设计成流线型<ol><li>参与者是设计师或与设计师相关的人</li><li>在各自的便贴纸上写下想法。</li><li>然后设计师收起这些纸条</li><li>并把他们按照相同程度组织起来，以一些典型的概念为导向。</li><li>之后设计师们来决定什么样的界面 可以满足所有的功能性的需求 一类或者一个同类的需求</li></ol></li></ul></li><li><p><strong>界面类型</strong><img src="/2021-11-14-ux3/5.png" alt="/2021-11-14-ux3/5.png" class="rounded-lg my-2" loading="lazy" decoding="async"></p></li></ul>]]>
|
||
</content>
|
||
<category term="UX" scheme="https://seviche.cc/?tags=UX" />
|
||
</entry>
|
||
<entry>
|
||
<title type="html"><![CDATA[Requirement Gathering]]></title>
|
||
<link href="https://seviche.cc/2021-11-09-ux2" />
|
||
<id>https://seviche.cc/2021-11-09-ux2</id>
|
||
<published>2021-11-09T14:26:49.000Z</published>
|
||
<updated>2022-08-06T10:49:17.439Z</updated>
|
||
<summary type="html"><![CDATA[Introduction to User Experience Design｜Week2]]></summary>
|
||
<content type="html">
|
||
<![CDATA[<h2 id="overview"><a href="#overview"><strong>Overview</strong></a></h2><ul><li><p><strong>设计流程的第一步</strong></p><p>了解用户当前是如何完成任务的</p></li><li><p><strong>需求收集的目标是什么？</strong></p><p>理解问题域</p></li><li><p><strong>问题域（problem space)包含什么？</strong></p><ol><li>谁是我们的用户</li><li>什么时候使用产品、在什么地点、为什么、以及他们当前如何实现目标任务</li><li>用户所认为的当前存在的问题是什么</li><li>以及用户自己关于如何改进任务流程的心愿清单</li></ol></li><li><p><strong>需求收集的陷井</strong></p><p>设计师可能会直接开始设计可供选择的设计品，尽管他们尚未完全了解任务，用户以及用户如何实现任务 换句话说，他们急于直奔主题了 他们在没有取得用户数据的基础上就开始设计了</p></li><li><p><strong>设计是一个系统性的数据驱动的过程</strong></p></li></ul><h2 id="types-of-users-and-types-of-data"><a href="#types-of-users-and-types-of-data"><strong>Types of Users and Types of Data</strong></a></h2><h3 id="数据类型"><a href="#数据类型">数据类型</a></h3><h4 id="定量"><a href="#定量">定量</a></h4><ul><li>定量数据可以被认为是可以用数字转录的数据， 比如调查数据（用户年龄、性别等等）</li><li>定量分析是依据统计数据，建立数学模型，并用数学模型计算出分析对象的各项指标及其数值的一种方法。</li></ul><h4 id="定性"><a href="#定性">定性</a></h4><ul><li>定性数据更容易被认为是为我们提供专题的信息，可放到叙事语境中（如问卷中的开放性问题）</li><li>定性分析则是主要凭分析者的直觉、经验，凭分析对象过去和现在的延续状况及最新的信息资料，对分析对象的性质、特点、发展变化规律作出判断的一种方法。</li></ul><blockquote><p>设计师通常结合使用两种数据，这种方法称为 <em>混合方法（Mixed method approach)</em></p></blockquote><h3 id="将用户视为利益相关者的三个类型"><a href="#将用户视为利益相关者的三个类型">将用户视为利益相关者的三个类型</a></h3><p><strong>1.主要 Primary</strong></p><p>主要利益相关者是直接使用设计的人员。这些是设计者最常与之互动的用户，他们被称为<strong>最终用户</strong></p><p><strong>2.二级 Secondary</strong></p><p>不直接使用设计，但可以<strong>间接地使用</strong>，因为他们从中可得到某种输出</p><p><strong>3.三级 Tertiary</strong></p><p>可能根本不使用设计 ，但<strong>直接受设计的影响</strong>， 无论是消极还是积极的方式</p><h3 id="了解利益相关者的意义"><a href="#了解利益相关者的意义">了解利益相关者的意义</a></h3><blockquote><p>考虑二级和三级利益相关者，也可以帮助我们创造具有创新性的设计，并为我们的客户提供竞争优势。从这个意义上讲了解利益相关者会带来更好的用户体验设计</p></blockquote><h2 id="discovery-technique-overview"><a href="#discovery-technique-overview"><strong>Discovery Technique Overview</strong></a></h2><h3 id="四种调研方法"><a href="#四种调研方法">四种调研方法</a></h3><ol><li>自然观察 (Naturalistic observation)</li><li>问卷法( Surveys)</li><li>焦点小组( Focus groups)</li><li>访谈 (Interviews)</li></ol><h3 id="交互程度"><a href="#交互程度">交互程度</a></h3><p><img src="/2021-11-09-ux2/1.png" alt="/2021-11-09-ux2/1.png" class="rounded-lg my-2" loading="lazy" decoding="async"></p><h3 id="进行的场景"><a href="#进行的场景">进行的场景</a></h3><p><img src="/2021-11-09-ux2/2.png" alt="/2021-11-09-ux2/2.png" class="rounded-lg my-2" loading="lazy" decoding="async"></p><h3 id="在设计周期中迭代"><a href="#在设计周期中迭代">在设计周期中迭代</a></h3><p><img src="/2021-11-09-ux2/3.png" alt="/2021-11-09-ux2/3.png" class="rounded-lg my-2" loading="lazy" decoding="async"></p><h2 id="naturalistic-observation-自然观察"><a href="#naturalistic-observation-自然观察"><strong>Naturalistic Observation 自然观察</strong></a></h2><h3 id="是什么"><a href="#是什么">是什么</a></h3><p>是在用户自己的环境中，观察用户的行为，不需要询问用户何时何地以及怎样完成既定任务的 设计师会亲自到用户完成任务的地点，并观察他们的行为。</p><h3 id="如何做"><a href="#如何做">如何做</a></h3><ul><li>预期计划</li><li>实地进行</li><li>过程中设计师与用户无交谈</li></ul><h3 id="数据"><a href="#数据">数据</a></h3><p>定性、定量</p><h3 id="优点"><a href="#优点">优点</a></h3><ul><li>直接观察用户的行为，随时随地收集数据</li><li>用户的行为习惯真实自然，不受设计师主观影响</li></ul><h3 id="缺点"><a href="#缺点">缺点</a></h3><ul><li><p><strong>数据收集受设计师主观影响。</strong></p><p>设计师所收集到的数据，局限于他们个人的收集方式和理解方式。无法核实设计师做出的 假设正确与否</p></li><li><p><strong>停留表面，看不到深层原因。</strong></p><p>我们并不知道为什么 用户采取这样的方式完成任务</p></li></ul><h3 id="道德局限"><a href="#道德局限">道德局限</a></h3><p>需要注意用户隐私、匿名化</p><h3 id="在设计流程中"><a href="#在设计流程中">在设计流程中</a></h3><blockquote><p>基于收集到的数据，进行下一步调研，如问卷、焦点小组等，使问题域更聚焦，探寻真正的问题所在，解释用户行为的原因</p></blockquote><h2 id="survey-问卷"><a href="#survey-问卷"><strong>Survey 问卷</strong></a></h2><h3 id="是什么-1"><a href="#是什么-1">是什么</a></h3><ul><li>问卷调查的目的是了解用户的观点。</li><li>最常见的是让用户自我报告他们的行为、主观感觉、态度和感受。我们也可以获取他们对于他人的看法</li></ul><h3 id="如何做-1"><a href="#如何做-1">如何做</a></h3><ul><li>实地、实验室</li><li>几乎不需要直接和用户交流</li><li>形式：纸质问卷、电子问卷、面对面调查</li></ul><h3 id="数据-1"><a href="#数据-1">数据</a></h3><h4 id="1定性-封闭性问题"><a href="#1定性-封闭性问题">1.定性-封闭性问题</a></h4><p><strong>Closed-ended questions</strong></p><ul><li><strong>顺序回答</strong><ul><li><strong>二分型问题 (dichotomous )</strong>是/否</li><li><strong>李克特评分 (likert scales)</strong>评分 1-5</li><li><strong>排序 (rank)</strong>如按照喜好程度排序</li></ul></li><li><strong>乱序回答</strong><ul><li>给用户呈现了一系列的问题,这些问题并没有逻辑顺序</li><li>例如，人种学问卷：如性别、 教育程度或者是一些列举项，供用户勾选适用于他们的选项</li></ul></li></ul><h4 id="2定量-开放性问题"><a href="#2定量-开放性问题">2.定量-开放性问题</a></h4><p><strong>Open-ended questions</strong></p><p>目的是获取用户简短的回答，包括他们的观点、偏好、态度等</p><h3 id="优点-1"><a href="#优点-1">优点</a></h3><ul><li>高效收集数据</li><li>数据易于分析</li></ul><h3 id="缺点-1"><a href="#缺点-1">缺点</a></h3><ul><li>信息表面化，不能提供深入洞察</li><li>回忆偏倚、社会称许性偏见和样本偏差</li></ul><h3 id="在设计流程中-1"><a href="#在设计流程中-1">在设计流程中</a></h3><p><img src="/2021-11-09-ux2/4.png" alt="下一步组织焦点小组或自然观察，深入洞察" class="rounded-lg my-2" loading="lazy" decoding="async"></p><h2 id="focus-group-焦点小组"><a href="#focus-group-焦点小组"><strong>Focus group 焦点小组</strong></a></h2><h3 id="是什么-2"><a href="#是什么-2">是什么</a></h3><ul><li>目的是让用户参与直接对话</li><li>焦点小组在可控的环境中进行，通常是一个房间 在这个充满隐私性的房间里 用户可以自由地分享和讨论自己的观点</li><li>焦点小组能够与参与者产生高度互动，这种程度高于 问卷调查，但是低于采访</li></ul><h3 id="如何做-2"><a href="#如何做-2">如何做</a></h3><h4 id="组成"><a href="#组成">组成</a></h4><ul><li><p><strong>用户</strong></p><ul><li>5-10 个用户</li><li>这些用户应能够代表设计师所关注的用户群体</li></ul></li><li><p><strong>设计团队</strong></p><p><strong>1. 主持人</strong></p><ul><li>一个训练有素的主持人 他负责组织用户讨论的话题</li><li>主持人必须非常擅长深入挖掘，在讨论过程中出现的有价值的主题。但同时也要引导用户的讨论 使之覆盖所需要的主题范围</li></ul><p><strong>2. 记录员</strong></p><ul><li>负责记录用户和主持人之间的谈话要点</li></ul><p><strong>3. 媒介记录员（可选）</strong></p><ul><li>使用录音或者 录像设备进行记录</li></ul></li><li><p><strong>流程</strong></p><p><img src="/2021-11-09-ux2/5.png" alt="热身-创新训练-三主题讨论-用户最终意见总结" class="rounded-lg my-2" loading="lazy" decoding="async"></p></li></ul><h3 id="数据-2"><a href="#数据-2">数据</a></h3><ul><li><p><strong>定性</strong></p><ul><li>对话过程中记录员写下的一系列笔记</li><li>完整的焦点小组对话脚本</li><li>对焦点小组的分析</li></ul></li><li><p><strong>定量</strong></p><ul><li>可能会在焦点小组一开始进行收集 （例如收集用户的人种学统计信息，或者捕捉关于用户态度的原始问卷调查信息，以及用户对于目标话题的观点）</li><li>主持人应当善于运用这些数据快速开始对话</li></ul></li></ul><h3 id="优点-2"><a href="#优点-2">优点</a></h3><ul><li>能够在短时间内收集到关于所感兴趣话题的海量数据</li><li>充满活力的小组讨论 或许能够激发出不一样的结果 这些结果是一对一访谈无法得到的</li></ul><h3 id="缺点-2"><a href="#缺点-2">缺点</a></h3><ul><li>需要设计团队去执行</li><li>数据收集的质量依赖主持人水平</li><li>群体思维</li></ul><h3 id="在设计流程中-2"><a href="#在设计流程中-2">在设计流程中</a></h3><p><img src="/2021-11-09-ux2/6.png" alt="/2021-11-09-ux2/6.png" class="rounded-lg my-2" loading="lazy" decoding="async"></p><ul><li>设计流程中的高潮，应在进行其他与用户交互较少的调研方法后使用（如自然观察、问卷</li><li>在焦点小组之后，设计师或许需要采访其他的用户 目的是获取更多关于焦点小组中发现的有趣话题的信息</li></ul><h2 id="interviews"><a href="#interviews"><strong>Interviews</strong></a></h2><h3 id="是什么-3"><a href="#是什么-3">是什么</a></h3><p>目的是深度收集用户信息</p><h3 id="如何做-3"><a href="#如何做-3">如何做</a></h3><ul><li>实地、实验室</li><li>足够的隐私程度 以确保用户可以自如地回答问题</li></ul><h3 id="数据-3"><a href="#数据-3">数据</a></h3><p>定性>定量</p><ul><li><strong>定性</strong><ul><li>设计师所作的一系列访谈笔记</li><li>访谈记录的系统性分析</li></ul></li><li><strong>定量</strong><ul><li>可以在访谈的开始进行收集</li><li>可以以简短问卷的形式进行（它可以用来迅速获取人种学信息，或者 快速了解用户对于访谈话题的态度，访谈者可以利用这些信息开始访谈环节）</li></ul></li></ul><h3 id="优点-3"><a href="#优点-3">优点</a></h3><ul><li>与用户一对一访谈（深度访谈）</li><li>灵活的采访提纲</li></ul><h3 id="缺点-3"><a href="#缺点-3">缺点</a></h3><ul><li>需要熟练的采访者<blockquote><p>需要知道用户将会继续说什么，以及 何时控制不再提供价值的对话。 采访者的技能在保持融洽关系方面也很重要, 这种关系应该是既灵活又平衡的。 它使用户舒适, 足以提供诚实的意见 但不能太舒适 而导致用户想用采访者的反应来取悦她。</p></blockquote></li><li>数据的收集和分析耗时</li><li>定性数据分析费力</li></ul><h3 id="在设计流程中-3"><a href="#在设计流程中-3">在设计流程中</a></h3><p><img src="/2021-11-09-ux2/7.png" alt="/2021-11-09-ux2/7.png" class="rounded-lg my-2" loading="lazy" decoding="async"></p><ul><li><p>据收集策略达到极点时，访谈最有用。</p></li><li><p>这意味着当问题得到很好的理解时， 设计人员在需求收集流程中处于关键位置， 需要的是用户最终的澄清或见解。</p></li></ul><h2 id="user-results-用户数据处理"><a href="#user-results-用户数据处理"><strong>User Results 用户数据处理</strong></a></h2><blockquote><p>假设：已对定性和对定量数据进行了适当的分析</p></blockquote><h3 id="描述性统计信息"><a href="#描述性统计信息">描述性统计信息</a></h3><p><strong>Descriptive statistics</strong></p><p>描述性统计允许我们总结定量信息 这包括数据集的范围、平均值和中值</p><ol><li>范围</li><li>平均值</li><li>中值 （减少极端数据的影响）</li></ol><h3 id="用户特征表"><a href="#用户特征表">用户特征表</a></h3><p><strong>User characteristics table</strong></p><p>特征表以简单的形式提供了我们所有数据的快速总结，包括定量数据和定性数据</p><p><img src="/2021-11-09-ux2/8.png" alt="/2021-11-09-ux2/8.png" class="rounded-lg my-2" loading="lazy" decoding="async"></p><h3 id="人物画像-persona"><a href="#人物画像-persona">人物画像 Persona</a></h3><h2 id="presenting-task-findings"><a href="#presenting-task-findings"><strong>Presenting Task Findings</strong></a></h2><h3 id="scenario"><a href="#scenario">Scenario</a></h3><p>场景</p><blockquote><p>场景使得我们能<strong>了解用户如何使用系统。</strong></p></blockquote><p><img src="/2021-11-09-ux2/9.png" alt="Scenario例子" class="rounded-lg my-2" loading="lazy" decoding="async"></p><h4 id="是什么-4"><a href="#是什么-4">是什么</a></h4><p>场景提供了定性和定量数据的描述。</p><h4 id="作用"><a href="#作用">作用</a></h4><ul><li>使我们有机会传达我们在故事线中 收集数据的丰富性</li><li>故事线会突出所有任务的重要方面以及目前如何完成任务。</li><li>它让任务变的真实,超越了 枯燥的数据图表和表格</li></ul><h3 id="essential-case-study"><a href="#essential-case-study">Essential Case Study</a></h3><p>基本案例场景</p><blockquote><p>帮助理解 <strong>用户的活动以及系统的要求</strong>。</p></blockquote><p><img src="/2021-11-09-ux2/10.png" alt="案例" class="rounded-lg my-2" loading="lazy" decoding="async"></p><h4 id="三个要素"><a href="#三个要素">三个要素</a></h4><p><strong>1.用户的目标</strong></p><ul><li>首先,它用户的目标进行命名。 这捕捉到了 X 的哪些方面。</li><li>在本例中 用户可能想知道她去西印度群岛是否需要签证。</li></ul><p><strong>2. 用户意向</strong></p><ul><li>她进入系统需要进行的一系列步骤。</li></ul><p><strong>3.系统的责任</strong></p><ul><li>用户完成每个步骤后系统必须执行的操作。</li><li>所以在这里,用户首先要找到 签证要求然后系统请求获得目的地和国籍。 一旦用户提供所需信息 系统将获得相应的签证等信息。</li></ul><h3 id="hierarchical-task-analysis"><a href="#hierarchical-task-analysis">Hierarchical Task Analysis</a></h3><p>分层任务分析</p><blockquote><p>最常见的任务分析技术。 使我们考虑<strong>用户当前如何完成任务</strong>。关键点是<strong>可观察的行为</strong>。</p></blockquote><p><img src="/2021-11-09-ux2/11.png" alt="/2021-11-09-ux2/11.png" class="rounded-lg my-2" loading="lazy" decoding="async"></p><ul><li>简单的形式就是一个<strong>大纲</strong>。</li><li>从目标开始。 并对目标中的每个主要步骤进行<strong>编号</strong>。 其中一些步骤包含必须先完成的小步骤 然后才能继续下一步 这项技术是关于用户目标的。</li><li>与基本案例不同。 我们<strong>没有考虑航空公司系统</strong>需要在每个用户步骤中做什么。</li><li>另外请注意， 我没有将一些系统交互任务列入， 比如使用滚动条。 这<strong>只是与用户和完成目标的步骤有关。</strong></li></ul><h3 id="current-ui-critique"><a href="#current-ui-critique">Current UI Critique</a></h3><p>当前 UI 评估</p><p><img src="/2021-11-09-ux2/12.png" alt="/2021-11-09-ux2/12.png" class="rounded-lg my-2" loading="lazy" decoding="async"></p><p><img src="/2021-11-09-ux2/13.png" alt="/2021-11-09-ux2/13.png" class="rounded-lg my-2" loading="lazy" decoding="async"></p><ul><li>需要与 UI 进行真实交互。</li><li>系统地分析当前正在使用的界面。 你要确认你明确地传达出需求被满足以及 为了改善用户体验你能做的事情。</li></ul><h4 id="步骤"><a href="#步骤">步骤</a></h4><p><strong>1.确定用户任务</strong></p><p>对于每个 UI 对应的每个 UI ，你想要确定任务或者用户使用的目的是什么</p><p><strong>2. 测定任务完成时间</strong></p><p>要客观的测定所需时间去 响应这个客户提交的任务</p><p>在这个例子中 我选择了一些点击，它会让我使用这个应用程序，或者网站，或者通过终端完成任务。</p><p><strong>3. 评估操作</strong></p><p><strong>4. 改进方法</strong></p><h2 id="相关资源"><a href="#相关资源"><strong>相关资源</strong></a></h2><p>Resources for Requirement Gathering</p><ol><li><a href="http://personalexcellence.co/blog/brainstorming-techniques/" rel="nofollow noopener noreferrer external" target="_blank">25 Useful Brainstorming Techniques</a></li><li><a href="http://leadinganswers.typepad.com/leading_answers/2009/03/nonfunctional-requirements-minimal-checklist.html" rel="nofollow noopener noreferrer external" target="_blank">Non-Functional Requirements - Minimal Checklist</a></li><li><a href="http://searchsoftwarequality.techtarget.com/answer/Differentiating-between-Functional-and-Nonfunctional-Requirements" rel="nofollow noopener noreferrer external" target="_blank">Differentiating between Functional and Nonfunctional Requirements</a></li><li><a href="http://www.usabilityfirst.com/usability-methods/facilitated-brainstorming/" rel="nofollow noopener noreferrer external" target="_blank">Facilitated Brainstorming</a></li><li><a href="http://blog.abovethefolddesign.com/2010/11/11/5-powerful-ways-to-brainstorming-with-teams/" rel="nofollow noopener noreferrer external" target="_blank">5 powerful ways to brainstorming with teams/</a></li><li><a href="http://www.inspireux.com/2013/07/18/tips-for-structuring-better-brainstorming-sessions/" rel="nofollow noopener noreferrer external" target="_blank">ips for Structuring Better Brainstorming Sessions</a></li><li><a href="http://www.slideshare.net/jessicaivins/aiga-cincy-uxworkshop01" rel="nofollow noopener noreferrer external" target="_blank">Collaborative Brainstorming for Better UX Workshop</a></li><li><a href="http://asq.org/learn-about-quality/idea-creation-tools/overview/affinity.html" rel="nofollow noopener noreferrer external" target="_blank">WHAT IS AN AFFINITY DIAGRAM?</a></li><li><a href="https://www.mindtools.com/pages/article/newTMC_86.htm" rel="nofollow noopener noreferrer external" target="_blank">Affinity Diagrams</a></li><li><a href="http://infodesign.com.au/usabilityresources/affinitydiagramming/" rel="nofollow noopener noreferrer external" target="_blank">Affinity diagramming</a></li></ol>]]>
|
||
</content>
|
||
<category term="UX" scheme="https://seviche.cc/?tags=UX" />
|
||
</entry>
|
||
<entry>
|
||
<title type="html"><![CDATA[Overview of User Experience Design]]></title>
|
||
<link href="https://seviche.cc/2021-11-08-ux1" />
|
||
<id>https://seviche.cc/2021-11-08-ux1</id>
|
||
<published>2021-11-08T02:54:40.000Z</published>
|
||
<updated>2022-08-06T10:49:20.887Z</updated>
|
||
<summary type="html"><![CDATA[Introduction to User Experience Design｜Week1]]></summary>
|
||
<content type="html">
|
||
<![CDATA[<h2 id="课程简介"><a href="#课程简介">课程简介</a></h2><p>这是一门在 <a href="https://www.coursera.org/learn/user-experience-design" rel="nofollow noopener noreferrer external" target="_blank">Coursera</a> 上的 UX 课程，共有五个星期的内容，讲了 UX 的基本概念和实际操作流程，主要侧重用户研究方面，也讲了很多和设计心理学有关的内容，很适合 UX 入门。</p><p>我将按照课程内容的划分，分别发布五个 weeks 的笔记，这是第一篇。</p><p>原笔记是在 Notion 上写的，我喜欢用 Notion 里面的 toggle 效果，用“提问”-“答案”的形式来启发思考，但是博客这里用折叠文本比较麻烦，所以直接列出来了</p><h2 id="week-1-笔记"><a href="#week-1-笔记">Week 1 笔记</a></h2><h3 id="什么是-ux"><a href="#什么是-ux">什么是 ux？</a></h3><blockquote><p>User Experience design is design that is user centered。The goal is to design artifacts that allow the users to meet their needs in the most effective efficient and satisfying manner。</p><p><strong>以用户为中心的设计。目标是轻松高效地满足用户的需求。</strong></p></blockquote><h3 id="用户体验设计的核心概念"><a href="#用户体验设计的核心概念">用户体验设计的核心概念</a></h3><blockquote><p>“用户使用界面来完成任务”</p></blockquote><p>通过理解用户以及他们要完成的任务，以便设计出最好的界面 (interface)</p><h3 id="什么是用户"><a href="#什么是用户">什么是用户</a></h3><p>这里的“用户”是指使用一些技术来达到目的的个体</p><h3 id="什么是界面"><a href="#什么是界面">什么是界面</a></h3><p>有输入、输出、系统，于此同时，每个输入都会导致一个期望的输出：<img src="/2021-11-08-ux1/1.png" alt="有输入、输出、系统，于此同时，每个输入都会导致一个期望的输出" class="rounded-lg my-2" loading="lazy" decoding="async">个人使用界面的能力与个人特征、群体、社会有关<img src="/2021-11-08-ux1/2.png" alt="个人使用界面的能力与个人特征、群体、社会有关" class="rounded-lg my-2" loading="lazy" decoding="async"></p><h3 id="用户体验设计的目标"><a href="#用户体验设计的目标">用户体验设计的目标</a></h3><p><img src="/2021-11-08-ux1/3.png" alt="/2021-11-08-ux1/3.png" class="rounded-lg my-2" loading="lazy" decoding="async"></p><p><strong>设计“能用”并且“好用”的界面</strong></p><ul><li>“<strong>能用</strong>”的意思是：它可以让用户完成一个任务。在图中，这个系统 (S) 就产生了期望的成果 (Output)</li><li>“<strong>好用</strong>”的意思是：用户可以有效高效甚至满意地达成这项任务。在我们的图表中，这需要轻松快速地输入 (Input) 并且输出 (Output) 的结果有效的完成了任务</li></ul><h3 id="界面设计环-四个步骤"><a href="#界面设计环-四个步骤">界面设计环 (四个步骤)</a></h3><p><img src="/2021-11-08-ux1/4.png" alt="/2021-11-08-ux1/4.png" class="rounded-lg my-2" loading="lazy" decoding="async"></p><h4 id="step1requirements-gathering-收集需求"><a href="#step1requirements-gathering-收集需求">Step1：Requirements Gathering 收集需求</a></h4><ul><li>Understanding the user and what her goals are，What are the current practices</li><li>This step can also be thought of as understanding the<strong>“problem space”</strong>- what is hindering the completion of the task how can the task or process be improved</li><li>A whole host of techniques are presented that allow the designer to collect data about the user，her goals and current practices</li></ul><h4 id="step-2design-alternatives-设计方案"><a href="#step-2design-alternatives-设计方案">Step 2：Design Alternatives 设计方案</a></h4><ul><li>Once you understand the users，their goals，and their current practices (e.i., the problem space) you are able to take this data and <strong>develop various design options</strong> that will improve the user experience</li></ul><h4 id="step-3prototyping-原型"><a href="#step-3prototyping-原型">Step 3：Prototyping 原型</a></h4><ul><li>Techniques for modeling the novel designs before a final version is produced</li></ul><h4 id="step-4evaluation-评估测试"><a href="#step-4evaluation-评估测试">Step 4：Evaluation 评估测试</a></h4><ul><li>A set of techniques for ascertaining that your design meets the needs of the user</li></ul><h3 id="什么样的界面是实用的"><a href="#什么样的界面是实用的">什么样的界面是“实用”的？</a></h3><p>“实用性”指的是有效、高效并且让用户觉得满意的。</p><blockquote><p>如果用户能够理解怎样的输入 (Input) 会带来所需的输出 (Output) 那么这个界面就是实用的</p></blockquote><h3 id="好设计的三个特征"><a href="#好设计的三个特征">好设计的三个特征</a></h3><p><img src="https://i.loli.net/2021/11/08/MtmwlyuXHGgbJPZ.png" alt="https://i.loli.net/2021/11/08/MtmwlyuXHGgbJPZ.png" class="rounded-lg my-2" loading="lazy" decoding="async"></p><h4 id="1---affordance-示能"><a href="#1---affordance-示能">1 - Affordance (示能)</a></h4><blockquote><p>指一个物理对象与人之间的关系</p><p>(无论是动物还是人类，甚至机器和机器人，他们之间发生的任何交互作用)</p></blockquote><p>是指可以感知到的事物的实际属性，主要是那些决定事物如何被使用的基本属性 (看看你的智能手机，我们会看到很多种功能，例如按键，可以感知到可以被按。)</p><h4 id="2---signifiers-意符"><a href="#2---signifiers-意符">2 - Signifiers (意符)</a></h4><blockquote><p>能告诉人们正确操作方式的任何可感知的标记或声音。</p></blockquote><p>示能决定可能进行哪些操作，意符则点名操作的位置。</p><h4 id="3---feedback-反馈"><a href="#3---feedback-反馈">3 - Feedback (反馈)</a></h4><blockquote><p>一些让你知道系统正在处理你的要求的方式</p></blockquote><p>反馈需要将用户信息发送回来其中包括哪些系统输入的信息已发生它跟我们沟通操作结果</p><ul><li>输入：示能、意符</li><li>输出：示能</li></ul><h3 id="如何与用户接洽"><a href="#如何与用户接洽">如何与“用户”接洽</a></h3><p>注意礼貌、着装</p><h4 id="三个步骤"><a href="#三个步骤">三个步骤</a></h4><p><strong>1 - 介绍</strong></p><ul><li>简要概述目标</li><li>坦率：让用户知道该会话的目标是什么。询问他们坦率的意见。</li><li>保密：说明交互内容是保密的。</li><li>自愿：在介绍期间，向用户解释他们的参与完全是自愿的。他们可以随时停止参与。如果他们希望停止参与，这不会消极地影响他们与你的公司或机构的关系。这一部分是很重要的，它能让用户放心并能够不受约束，因为你可能代表一个在社区中具有较高知名度的实体</li><li>开放：让他们知道，没有正确或错误的答案，他们应该简单直接地向你提供反馈和意见</li></ul><p><strong>2 - 交流</strong></p><ul><li>中立态度、语气轻松专业。</li><li>如果形式允许，鼓励详细阐述意外或有趣的信息</li><li>保持对交流过程的控制，尽量覆盖所有话题</li></ul><p><strong>3 - 结束</strong></p><ul><li>在会话结束时，提醒他们有关交互的目标和您打算如何处理他们提供的数据。</li><li>询问他们是否还有需要补充的内容。</li></ul>]]>
|
||
</content>
|
||
<category term="UX" scheme="https://seviche.cc/?tags=UX" />
|
||
</entry>
|
||
<entry>
|
||
<title type="html"><![CDATA[全球商业化中的设计]]></title>
|
||
<link href="https://seviche.cc/设计心理学1-7" />
|
||
<id>https://seviche.cc/设计心理学1-7</id>
|
||
<published>2021-11-03T03:59:18.000Z</published>
|
||
<updated>2022-08-06T10:50:07.505Z</updated>
|
||
<summary type="html"><![CDATA[《设计心理学 1》第七章——本书的总结]]></summary>
|
||
<content type="html">
|
||
<![CDATA[<p>章前写了对本书的总结和本章的概要，提到了功能主义以及两种创新方式。</p><h2 id="1竞争压力"><a href="#1竞争压力">1.竞争压力</a></h2><p>产品设计会受公司商业竞争压力的影响，这很可能会让设计偏离初衷，使市场产品变得同质化。设计受竞争压力影响的一个表现就是“功能蔓延”，它指的是为产品增加更多功能的倾向。</p><p>面对竞争压力，好的策略是“有所为，有所不为”，专心于已经占据优势的地方，让强者更强。然后聚焦于市场和宣传，大力推广已有的优势。不要盲目跟随潮流，增加无用功能。其中最重要的是关注真正在使用产品的用户的需求。</p><h2 id="2新技术推动变革"><a href="#2新技术推动变革">2.新技术推动变革</a></h2><p>科技是巨大的变革动力，技术的发展改变了人们做事的方式，但人们的基本需求没有改变。</p><h2 id="3新产品上市需要多长时间"><a href="#3新产品上市需要多长时间">3.新产品上市需要多长时间</a></h2><p>那些对生活有重大影响的创新，从概念到上市通常需要数十年，而且有很多的创新在上市之前就已经失败。这是因为这些创新会影响到现有的产品，会产生冲突和矛盾，用户适应新的产品也需要时间，而时间的拉长则会消耗预算和资源。“从概念到成功的产品，好点子需要旷日持久地跨越漫漫长途。”</p><h2 id="4创新的两种形式渐进式和颠覆式"><a href="#4创新的两种形式渐进式和颠覆式">4.创新的两种形式：渐进式和颠覆式</a></h2><ul><li>渐进式创新：<ul><li>缓慢的、持续进行的、渐进的</li><li>在现有模式上的“改良”</li><li>随着时间的发展，可以带来显著的改变</li><li>“登山法”</li><li>大部分创新都是</li></ul></li><li>颠覆式创新：<ul><li>颠覆式的全新开发</li><li>完全改变现有模式</li><li>通常来自于技术创新</li><li>影响巨大</li><li>少之又少，很难存活</li></ul></li></ul><p>两种都需要</p><h2 id="5-设计心理学1988--2038"><a href="#5-设计心理学1988--2038">5. 设计心理学：1988 ～ 2038</a></h2><ul><li>人们的基本需求大体上不变，科技的变革提供了截然不同的方式满足人们的需求。</li><li>科技的发展，会带来文化上的改变。</li><li>人机协同工作才会更强大。新技术改变了人们承担的任务，让人们更专注于自己擅长的东西、关键和重要的东西，让大脑从琐碎中解放出来。</li></ul><h2 id="6书籍的未来"><a href="#6书籍的未来">6.书籍的未来</a></h2><p>新技术的出现，让书籍、视频、音频等交互媒体的制作更加简单，这让入门变得简单，让人们更容易分享、获得信息，但这也会带来信息的泛滥，高技术水平的信息内容仍需要专业的制作。</p><h2 id="7-设计的道义和责任"><a href="#7-设计的道义和责任">7. 设计的道义和责任</a></h2><p>设计应承担社会责任。作者批判了产品的废止制度，还提到可以采取订阅的方式可持续发展。</p><h2 id="8-设计思维和思考设计"><a href="#8-设计思维和思考设计">8. 设计思维和思考设计</a></h2><ul><li>只有当最终产品成功，设计才是成功的。</li><li>设计必须考虑用户的整体体验。</li><li>设计需要考虑许多影响因素：市场、产品的生命周期、环境成本、技术等</li><li>草根的崛起：个人的力量也可以带来改变，科技为此提供了便利。</li><li>技术会被改变，但设计的基本原则（比如有关可视性及反馈的原则，示能、意符、映射和概念模型的作用），不会改变，历久弥新。</li></ul>]]>
|
||
</content>
|
||
<category term="设计心理学1" scheme="https://seviche.cc/?tags=%E8%AE%BE%E8%AE%A1%E5%BF%83%E7%90%86%E5%AD%A61" />
|
||
<category term="读书笔记" scheme="https://seviche.cc/?tags=%E8%AF%BB%E4%B9%A6%E7%AC%94%E8%AE%B0" />
|
||
</entry>
|
||
<entry>
|
||
<title type="html"><![CDATA[设计思维]]></title>
|
||
<link href="https://seviche.cc/设计心理学1-6" />
|
||
<id>https://seviche.cc/设计心理学1-6</id>
|
||
<published>2021-11-03T03:49:10.353Z</published>
|
||
<updated>2022-08-06T10:50:08.975Z</updated>
|
||
<summary type="html"><![CDATA[《设计心理学 1》第六章——设计需要探究问题的来源，而不只是停留在表面]]></summary>
|
||
<content type="html">
|
||
<![CDATA[<p>这一章和第七章读得有些仓促，加上是比较熟悉的内容，所以笔记比较简短。之后梳理概念的时候再仔细写写。</p><h2 id="1-解决正确的问题"><a href="#1-解决正确的问题">1. 解决正确的问题</a></h2><p>设计思维的关键是要解决真正的、根本的问题。可以通过“五个为什么”等方法去<strong>确定问题</strong>。“以人为本的设计”则是可以应用于<strong>解决问题</strong>的原则之一，它强调采用满足用户需求和能力的恰当方式去解决问题，这主要是通过四个步骤：观察->创意->打样和测试。</p><h2 id="2-双钻设计模式"><a href="#2-双钻设计模式">2. 双钻设计模式</a></h2><p>描述了设计的两个阶段：找到正确的问题，和满足用户需求</p><h3 id="四个步骤发散-聚焦"><a href="#四个步骤发散-聚焦">四个步骤（发散->聚焦）</a></h3><ol><li>发现</li><li>定义</li><li>开发</li><li>交付</li></ol><h2 id="3-以人为本的设计流程"><a href="#3-以人为本的设计流程">3. 以人为本的设计流程</a></h2><p>可以将以人为本的设计原则嵌入到双钻模型中，于是有“以人为本的设计流程<img src="https://raw.githubusercontent.com/norevi/image/main/img202110272332820.png" alt="https://raw.githubusercontent.com/norevi/image/main/img202110272332820.png" class="rounded-lg my-2" loading="lazy" decoding="async"></p><h3 id="1观察"><a href="#1观察">1.观察</a></h3><ul><li>即设计调研。通过调研深入洞察用户的真正需求，并分析用户在真实状况下的行为模式。</li></ul><h3 id="2-激发创意构思"><a href="#2-激发创意构思">2. 激发创意（构思）</a></h3><p>有很多激发创意的方法，核心的原则是：</p><ul><li>激发大量的创意</li><li>不要批评，鼓励创意</li><li>质疑每一件事</li></ul><h3 id="3打样原型"><a href="#3打样原型">3.打样（原型）</a></h3><p><strong>奥兹向导”（Wizard of Oz</strong>）：</p><ul><li>一种模拟产品功能的方法</li><li>测试时让人执行通常由计算机执行的任务，且用户不知道该产品是不具备功能性的。</li></ul><h4 id="4测试"><a href="#4测试">4.测试</a></h4><p>汇集小部分目标用户进行原型测试，作者一般一次单独测试 5 个人，有测试结果后改进方案，接着选择另外五个人再次测试。</p><ul><li>原型测试的关键是：快速测试、快速失败</li></ul><p>另外一些提到的概念：A/B 测试、以活动为中心的设计、关键点评审</p><h2 id="4我刚告诉你什么那根本行不通"><a href="#4我刚告诉你什么那根本行不通">4.我刚告诉你什么？那根本行不通</a></h2><p>实践双钻模式和以人为本的设计理念时，会遇到很多现实的冲突。比较好的解决方法是组建跨部门的联合团队，并正视挑战，精心规划设计流程。</p><h2 id="5设计的挑战"><a href="#5设计的挑战">5.设计的挑战</a></h2><p>提到了现在设计过程中常遇到的一些问题，比如有多个互相冲突的需求、缺少团队沟通的设计改动等。还提到了包容性设计/通用设计/无障碍设计的概念和意义。</p><h2 id="6-复杂是好事混乱惹麻烦"><a href="#6-复杂是好事混乱惹麻烦">6. 复杂是好事，混乱惹麻烦</a></h2><p>复杂跟混乱是不一样的，复杂是“内容多，但有条理”，混乱是“内容多，但没条理”。驯服复杂性最重要的原则之一，是建立一个良好的概念模型。</p><h2 id="7标准化和技术"><a href="#7标准化和技术">7.标准化和技术</a></h2><p>建立统一的标准可以提升产品的易用性，降低人们的学习成本。但建立标准是困难的，在技术没有完善之前建立标准，会让标准容易过时，而过迟建立标准，则很难达成一致。</p><h2 id="8故意制作困难"><a href="#8故意制作困难">8.故意制作困难</a></h2><p>在需要设计限制的产品，比如安全系统、危险设备等，需要故意制造一些使用上的困难。但这并不意味着完全放弃产品的易用性，设计需要基于具体的任务来分析，在需要限制的地方反向利用优良设计的原则，在不需要限制的地方仍然遵循原则。</p><ul><li>反向的规则：</li></ul><ol><li>隐藏关键的部位</li><li>在任务执行阶段利用不自然的匹配关系</li><li>增加操作的物理难度。</li><li>要求把握非常精确的操作时机和操作步骤。</li><li>不提供任何反馈信息。</li><li>在任务评估阶段利用不自然的匹配关系，使用户难以了解系统状态。</li></ol><h2 id="9-设计为了人类发展科技"><a href="#9-设计为了人类发展科技">9. 设计：为了人类发展科技</a></h2><p>设计是个非凡的学科</p><ul><li>产品要被用户使用，这才是对设计最大的奖赏</li></ul>]]>
|
||
</content>
|
||
<category term="设计心理学1" scheme="https://seviche.cc/?tags=%E8%AE%BE%E8%AE%A1%E5%BF%83%E7%90%86%E5%AD%A61" />
|
||
<category term="读书笔记" scheme="https://seviche.cc/?tags=%E8%AF%BB%E4%B9%A6%E7%AC%94%E8%AE%B0" />
|
||
</entry>
|
||
<entry>
|
||
<title type="html"><![CDATA[人为差错？不，拙劣的设计]]></title>
|
||
<link href="https://seviche.cc/设计心理学1-5" />
|
||
<id>https://seviche.cc/设计心理学1-5</id>
|
||
<published>2021-10-27T12:22:17.000Z</published>
|
||
<updated>2022-08-06T10:50:11.112Z</updated>
|
||
<summary type="html"><![CDATA[《设计心理学 1》第五章——设计师经常严重误解人心理的局限性，要求人像机器一样工作]]></summary>
|
||
<content type="html">
|
||
<![CDATA[<ul><li>当事故发生时，人们往往会将设计问题归因在操作的人身上，但这并不能解决问题</li><li>解决问题的方法：找到根本原因，重新设计系统</li></ul><h2 id="1何以出错"><a href="#1何以出错">1.何以出错</a></h2><h3 id="出错的原因"><a href="#出错的原因">出错的原因</a></h3><ul><li>要求人们在任务和流程中做违背自然规律的事情。</li><li>将系统问题归因为人的问题</li><li>设计重点放在系统和设备上，忽略了使用者的需求。不了解人的身心特性，按对机器的标准要求人。</li><li>时间压力</li></ul><h3 id="解决错误的方法"><a href="#解决错误的方法">解决错误的方法</a></h3><ul><li>不要苛责用户，承认存在问题</li><li>对问题进行<strong>根本原因分析</strong><ul><li>调查事故，直到发现单一的、潜在的根本原因。</li><li>确定是什么致使人们犯错</li><li>方法：5 个为什么分析法</li></ul></li></ul><h3 id="差错之外故意犯错"><a href="#差错之外故意犯错">差错之外：故意犯错</a></h3><ul><li>有时人们会故意犯错以达到目标</li><li>不恰当的规则和流程是违规行为的一个主要原因，它不仅诱使且鼓励了违规，因为没有违规行为就不能完成工作。</li></ul><p>本章主要讨论的是“无意识的犯错”</p><h2 id="2差错的两种类型失误和错误"><a href="#2差错的两种类型失误和错误">2.差错的两种类型：失误和错误</a></h2><h3 id="差错"><a href="#差错">差错</a></h3><ul><li>定义：与普遍接受的正确或合理的行为有所偏离</li><li>是所有错误行为的总称</li><li>两种类型：<strong>失误</strong> 和 <strong>错误</strong></li></ul><h3 id="差错和行动的七个阶段"><a href="#差错和行动的七个阶段">差错和行动的七个阶段</a></h3><p><img src="https://uneorange.oss-cn-guangzhou.aliyuncs.com/202110232335757.png" alt="https://uneorange.oss-cn-guangzhou.aliyuncs.com/202110232335757.png" class="rounded-lg my-2" loading="lazy" decoding="async"></p><ul><li>错误发生在高水平的认知（有意）</li><li>失误发生在较低层次（无意）</li><li>记忆失效可能发生在每个阶段之间的八个转换过程中</li></ul><h3 id="失误"><a href="#失误">失误</a></h3><ul><li>目标、计划正确 ‣ <mark>行动出错</mark></li><li>分类<ol><li>行动失误</li><li>记忆失误</li></ol></li></ul><h4 id="行动失误"><a href="#行动失误">行动失误</a></h4><ul><li>执行了错误的动作</li><li>分类：<ol><li>撷取性失误（capture slips）</li><li>描述相似性失误（description-similarity slips）</li><li>功能状态失误（mode errors）</li></ol></li></ul><h5 id="1-撷取性失误"><a href="#1-撷取性失误">1. 撷取性失误</a></h5><ul><li><strong>如何发生的</strong><ul><li>某个曾经的动作挤占了需要完成的动作（陌生–更换成->熟悉）</li><li>有经验和技巧的人比初学者更容易犯</li></ul></li><li><strong>如何避免</strong><ul><li>避免有相同的起始步骤，然后再发散的流程。</li></ul></li></ul><h5 id="2-描述相似性失误"><a href="#2-描述相似性失误">2. 描述相似性失误</a></h5><ul><li><strong>如何发生的</strong><ul><li>差错发生在与目标相似的对象上，在错误的对象上执行正确的动作</li><li>如果对目标的描述含糊不清，就会发生描述</li></ul></li><li><strong>如何避免</strong><ul><li>在设计不同目的的控制和显示设备时，设计师需要确认它们之间具有明显差异</li></ul></li></ul><h5 id="3-功能状态失误"><a href="#3-功能状态失误">3. 功能状态失误</a></h5><ul><li><strong>如何发生的</strong><ul><li>在错误的模式/功能/状态下执行操作</li><li>当设备有不同的状态，而相同的控件具有不同的含义，就可能发生</li><li>设备不能显示可见模式时，尤其容易发生</li></ul></li><li><strong>如何避免</strong><ul><li>避免模式控制的设计</li><li>若无法避免，使设备能够明显地显示所激活的功能模式。</li><li>设计可以抵消干扰活动对已设定模式带来影响的系统。</li></ul></li></ul><h4 id="记忆失误"><a href="#记忆失误">记忆失误</a></h4><p>原文又称：记忆失效性失误</p><ul><li><strong>如何发生的</strong><ul><li>原打算做的行动没有做，或者没有及时评估其行动结果</li><li>因记忆问题引起的差错</li></ul></li><li><strong>如何避免</strong><ul><li>使用最少的步骤</li><li>对需要完成的步骤提供生动有效的提醒</li><li>使用的强制功能</li></ul></li></ul><h2 id="3错误的分类"><a href="#3错误的分类">3.错误的分类</a></h2><h3 id="错误"><a href="#错误">错误</a></h3><ul><li><mark>目标/计划出错</mark> ‣ 行动随之偏离目的。</li><li>分类<ol><li>违反规则：基于正确知识->正确分析情况-><em>遵循错误规则</em>->错误行动</li><li>缺乏知识：基于不正确或不完善的知识-><em>错误分析情况</em>->错误行动</li><li>记忆失效：在目标、计划或评价阶段有所遗漏</li></ol></li></ul><h4 id="1-基于规则的错误违反规则"><a href="#1-基于规则的错误违反规则">1. 基于规则的错误（违反规则）</a></h4><ul><li><strong>如何发生的</strong><ul><li>错误地理解了问题，从而采用错误的目标或计划，导致遵循不恰当的规则。</li><li>采用了正确的规则，但规则本身就有问题</li><li>采用了正确的规则，但不正确地评估行为的结果。</li></ul></li></ul><blockquote><p>在复杂的情况下，太多的信息就是问题所在：信息，既支持决策，也会排斥它</p></blockquote><ul><li><strong>如何避免</strong><ul><li>将当前系统状态的信息，以易于理解和阐释的方式呈现出来，以及提供必要的说明和解释。</li></ul></li></ul><h4 id="2-基于知识的错误缺乏知识"><a href="#2-基于知识的错误缺乏知识">2. 基于知识的错误（缺乏知识）</a></h4><ul><li>处理问题时，人类过度依赖储存在记忆中的经验，而对事物并不进行系统地分析。</li><li><strong>如何发生的</strong><ul><li>当碰到异常情况，没有足够的技能或规则去处理它，人们就会采取基于知识的行为</li><li>人们缺乏应对相应情境操作所需知识</li></ul></li><li><strong>如何避免</strong><ul><li>深入地了解状况，提供程序手册指引</li><li>借助适当的概念模型来解决问题。</li><li>提供良好的合作解决问题的技能和工具，如机器辅助</li></ul></li></ul><h4 id="3-记忆失效的错误"><a href="#3-记忆失效的错误">3. 记忆失效的错误</a></h4><ul><li>记忆倾向于对一般事物进行过度概括和规范，并且过度强调事物之间的差异。</li><li><strong>如何发生的</strong><ul><li>记忆出错导致<em>遗忘</em>了目标或行动计划，记忆的失误就会导致错误。</li><li>某个<em>中断</em>导致人们忘记正在对目前环境状况所做的评判</li></ul></li><li><strong>如何避免</strong><ul><li>确保所有相关的信息连续可用，如目标、计划和对当前系统的评价</li><li>假设人们在行动中可能被打断，在恢复操作时为他们提供需要的帮助。</li></ul></li></ul><h2 id="4社会和习俗压力"><a href="#4社会和习俗压力">4.社会和习俗压力</a></h2><h3 id="压力"><a href="#压力">压力</a></h3><p>社会和习俗压力影响大，但却难观测。好的方法是“奖励安全“、培训等等</p><blockquote><p>永远不要低估社会压力对个人行为的影响力量，它可能促使原本理智的人们去做他们即使知道是错误或可能危险的事情。</p></blockquote><blockquote><p>社会压力不断出现。它们通常很难被记录下来，因为大多数人和组织都不愿承认这些因素，所以即使在事故调查中发现有社会压力的因素，其结果也往往隐匿不见，得不到公众的仔细监督</p></blockquote><blockquote><p>我们需要不同的培训；我们需要<strong>奖励安全</strong>，并将其置于经济压力之上</p></blockquote><h3 id="检查清单"><a href="#检查清单">检查清单</a></h3><blockquote><p>检查清单是个功能强大的工具，经过验证，它可以增加行为的准确性和减少差错，特别是失误和记忆失效</p></blockquote><ul><li><strong>如何使用</strong><ul><li>人数：通常有两人一起作为一个团队使用检查单：一个人阅读指令，同时另外一个执行命令。</li><li>清单设计：不断调整列表直到它涵盖了基本的项目，却不会额外增加负担</li></ul></li><li><strong>隐患</strong><ul><li>增加更多的人来检查任务 ‣ 增加了出错的机会。</li><li>一些专业人士将其被视为对自己专业能力的侮辱</li><li>打印清单将顺序结构强加于任务实施->增加了记忆失效的几率 (利用电子清单解决)</li></ul></li></ul><h2 id="5差错报告"><a href="#5差错报告">5、差错报告</a></h2><p>减少差错的唯一方法就是直面差错，承认差错存在，并为减少差错而作出改变。三个案例：</p><h3 id="自动化jidoka"><a href="#自动化jidoka">自动化（JIDOKA）</a></h3><p>来源于汽车生产系统</p><ul><li>具体：<ul><li><strong>立即报告差错</strong>：当生产线上发现事情出错时->工人立即报告</li><li><strong>持续关注</strong>：如果有故障的零件要继续移动到下一个工序->通过”安灯”停止装配线,并”报警”</li><li><strong>确定原因</strong>：技术专家聚集到问题发生区域，探寻差错发生的根本原因</li></ul></li></ul><h3 id="防呆poka-yoke"><a href="#防呆poka-yoke">防呆（POKA-YOKE）</a></h3><ul><li>措施之一是添加简单的工具、夹具或设备来<strong>限制</strong>操作，避免犯错。（简单的示意）</li><li>需要遵循的原则：示能，意符，映射和约束，最重要的是<strong>强迫</strong>功能。</li></ul><h3 id="航空安全报告体系"><a href="#航空安全报告体系">航空安全报告体系</a></h3><p>主要是讲如何降低人们报告差错时的心理负担</p><ol><li>匿名提交差错报告</li><li>差错真实则豁免处罚</li><li>通过第三方机构提交差错报告检查</li></ol><h2 id="6甄别差错"><a href="#6甄别差错">6.甄别差错</a></h2><h3 id="为什么甄别差错是困难的"><a href="#为什么甄别差错是困难的">为什么甄别差错是困难的</a></h3><h4 id="甄别失误"><a href="#甄别失误">甄别失误</a></h4><ul><li>缺少反馈</li><li>难以检测 （如记忆失效）</li></ul><h4 id="甄别错误"><a href="#甄别错误">甄别错误</a></h4><ul><li>难以识别不恰当的目标->持续行动->行动和目标一致（增加信心）->接近不恰当的目标</li><li>所处情境复杂</li></ul><h4 id="记忆失效性失误错误"><a href="#记忆失效性失误错误">记忆失效性（失误/错误）</a></h4><p><strong>区别：</strong></p><ul><li>失误：只有计划中的单一部分被漏掉 （做了不该做的）</li><li>错误：整个计划都被遗忘了（没有做该做的）</li></ul><h3 id="为错误辩解"><a href="#为错误辩解">为错误辩解</a></h3><p>人们常常<strong>忽略单一的异常情况</strong>，并试图为其<strong>辩解</strong>。但他们的辩解是基于过去经验的，可能已<strong>不适用于现状</strong>，这些“简单处理”的辩解会让他们错失挽救错误的良机。</p><h3 id="事故分析要置身于真实情境"><a href="#事故分析要置身于真实情境">事故分析要置身于真实情境</a></h3><h4 id="事故发生时"><a href="#事故发生时">事故发生时</a></h4><ul><li>人们常常情绪波动、压力大</li><li>所处的情境是复杂多变的</li><li>没有明确的线索可以分辨关键的信息</li></ul><h4 id="事故发生后"><a href="#事故发生后">事故发生后</a></h4><ul><li>知道到底发生了什么事，遂将重点放在相关的信息上并忽略不相关的信息。</li></ul><h4 id="事故分析应"><a href="#事故分析应">事故分析应</a></h4><ul><li>调查人员应当想象自己置身于事故的参与者之中</li><li>考虑操作者的所有信息，曾经接受的所有培训，以及类似的历史事件</li></ul><h2 id="7为差错设计"><a href="#7为差错设计">7.为差错设计</a></h2><h3 id="基本原则"><a href="#基本原则">基本原则</a></h3><blockquote><ol><li>了解差错的根本原因，通过设计以尽量减少这些诱因。</li><li>进行合理性检验。检查操作行为是否能够通过“一般性常识”的测试</li><li>设计出可以“撤销”操作的功能——“返回”以前操作，或者如果操作不能“返回”，则增加该操作的难度。</li><li>让人们易于发现一定会出的差错，以便容易纠正。</li><li>不要把操作看成是一种差错；相反，帮助操作者正确地完成动作。应该将操作认为近似于预期目的。</li></ol></blockquote><h3 id="记忆中断"><a href="#记忆中断">记忆中断</a></h3><ul><li>是差错的主要来源，尤其是记忆失效性差错</li><li><strong>恢复成本大</strong>：必须记得准确的活动被打断之前的状态，目标是什么，被打断的活动处于行为周期的哪个阶段，以及当时系统的状态</li><li><strong>多任务处理</strong>：效率低，差错更多</li><li>可能的方法：设置屏蔽期、自动保存、编辑记录（足迹）等</li></ul><h3 id="警示信号存在的问题"><a href="#警示信号存在的问题">警示信号存在的问题</a></h3><ul><li>设备间缺乏协同，信号互相影响，让用户分神，从而干扰问题的解决</li><li>语音播报：<ul><li>在用户视觉注意被占用时间，可以传递清楚的信息</li><li>环境嘈杂时，很难听清楚</li><li>干扰使用者之间的对话</li></ul></li></ul><h3 id="为差错设计的方法"><a href="#为差错设计的方法">为差错设计的方法</a></h3><h4 id="研究差错"><a href="#研究差错">研究差错</a></h4><ul><li>在差错发生前：研究如何设计预防措施</li><li>是差错发生时：研究如何检测并纠正</li></ul><h4 id="增加约束"><a href="#增加约束">增加约束</a></h4><ul><li>对操作行为施加特殊的约束。</li><li>如：约束条件、强迫性功能和防呆措施、隔离操控、使用分离模块等。</li></ul><h4 id="撤销"><a href="#撤销">撤销</a></h4><ul><li>减少差错带来的进一步影响</li><li>应留有多步撤销</li></ul><h4 id="差错信息确认"><a href="#差错信息确认">差错信息确认</a></h4><ul><li><strong>突出显示所有即将采取的行动和对象.</strong></li><li><strong>突出行动的后果</strong></li><li><strong>方法</strong><ul><li>使正在操作的对象更加显眼。</li><li>让操作可逆</li></ul></li></ul><h4 id="合理性检查"><a href="#合理性检查">合理性检查</a></h4><p>电子系统可以更方便的定位和确认不合理的操作，但用户并不一定能即时发现错误，在用户进行不合常规的操作时，给用户提醒、确认。</p><p>如：大额转账金额确认</p><h4 id="减小失误"><a href="#减小失误">减小失误</a></h4><ul><li><strong>撷取性失误</strong><ul><li>避免中断</li><li>提供恢复帮助（撤销机制）</li><li>尽可能让操作流程前面几步不要相似</li></ul></li><li><strong>描述相似性失误</strong><ul><li>保证操作及其控制尽可能不同</li><li>若相似，则在物理距离上越远越好</li></ul></li><li><strong>功能状态失误</strong><ul><li>去掉多余功能</li><li>或 ：让功能彼此容易区分和明确可见</li></ul></li></ul><blockquote><p>防范失误最好的办法是对正在实施的动作的特性，提供可以感受到的<em>反馈</em>，越是灵敏的反馈越能体现新的结果和状态，再伴之以能够<em>撤销</em>差错的机制</p></blockquote><h3 id="从差错到事故瑞士奶酪模型"><a href="#从差错到事故瑞士奶酪模型">从差错到事故——瑞士奶酪模型</a></h3><p><img src="https://raw.githubusercontent.com/norevi/image/main/img202110260102695.png" alt="https://raw.githubusercontent.com/norevi/image/main/img202110260102695.png" class="rounded-lg my-2" loading="lazy" decoding="async"></p><ul><li>事故的发生往往有很多诱因，任何其中一个原因不出现，事故就不会发生。</li><li>如何让系统更加有弹性的方法：<strong>冗余设计和多重保护措施</strong>：<ul><li>设计额外的差错预防机制，减少失误、错误或设备失效的机会（奶酪上更少的孔），</li><li>为系统中不同的零部件设计完全不同的运行机制（努力使奶酪上的孔不要排列起来）。</li></ul></li></ul><blockquote><p>我们应该好好思考系统，思考所有可能导致人为失误，进而酿成事故的交互因素，然后，策划出从总体上改进系统，使之更加可靠的方案。</p></blockquote><h2 id="8良好的设计还不够"><a href="#8良好的设计还不够">8.良好的设计还不够</a></h2><p>良好的设计还是难以防范人们故意犯错，差错并不全都因为设计</p><h2 id="9修补回复工程"><a href="#9修补回复工程">9.修补回复工程</a></h2><span class="passive">resilience engineering</span><h3 id="是什么"><a href="#是什么">是什么</a></h3><ul><li>一种应用于工业的系统管理方式</li><li>目标是遇到外部冲击时，能以最小的破坏和损失恢复运转</li><li>将安全视为核心价值</li><li>关注于帮助人们在压力下成功应付复杂的环境以取得成功。</li></ul><h3 id="如何做"><a href="#如何做">如何做</a></h3><ul><li>设置漏洞、测试工厂的反应水平</li><li>反复评估，测试和改进。</li><li>要持续关注于预测故障的潜在变化</li></ul><h2 id="10自动化的悖论"><a href="#10自动化的悖论">10.自动化的悖论</a></h2><h3 id="故障时结果难以估计"><a href="#故障时结果难以估计">故障时结果难以估计</a></h3><p>原因：</p><blockquote><p>当自动化系统发生故障时，经常没有警告，人需要时间去注意问题、评估分析、解决问题。</p></blockquote><h3 id="悖论"><a href="#悖论">悖论</a></h3><blockquote><p>能够执行那些枯燥乏味、令人厌烦的工作，但是不能做太复杂的工作。</p></blockquote><h2 id="11应对差错的设计原则"><a href="#11应对差错的设计原则">11.应对差错的设计原则</a></h2><h3 id="人和机器协同应工作"><a href="#人和机器协同应工作">人和机器协同应工作</a></h3><blockquote><p>“人为差错”，往往只是一种人类特性与技术需求不相符的行动</p></blockquote><ul><li><strong>人和机器擅长的工作不同</strong>。人类是灵活的，多才多艺且具有创造力。机器是死板的，需要精密设置且相对局限于规定的操作。</li><li><strong>人类的能力和技术要求之间存在不匹配</strong>，差错不可避免。</li><li>设计<strong>应正视人和机器之间的差异</strong>，考虑到有可能出现的每一个差错，然后想办法避免这些差错，</li><li>设法<strong>使操作具有可逆性</strong>，以尽量减少差错可能造成的损失。</li></ul><h3 id="关键设计原则"><a href="#关键设计原则">关键设计原则</a></h3><ul><li><strong>将所需的操作知识储存在外部世界</strong>，而不是全部储存在人的头脑中，但是如果用户已经把操作步骤熟记在心，应该能够提高操作效率。</li><li><strong>利用自然和非自然的约束因素</strong>，例如物理约束、逻辑约束、语义约束和文化约束；利用强迫性功能和自然匹配的原则。</li><li><strong>缩小动作执行阶段和评估阶段的鸿沟</strong>。在执行方面，要让用户很容易看到哪些操作是可行的。在评估方面，要把每一个操作的结果显示出来，使用户能够方便、迅速、准确地判断系统的工作状态。</li></ul>]]>
|
||
</content>
|
||
<category term="设计心理学1" scheme="https://seviche.cc/?tags=%E8%AE%BE%E8%AE%A1%E5%BF%83%E7%90%86%E5%AD%A61" />
|
||
<category term="读书笔记" scheme="https://seviche.cc/?tags=%E8%AF%BB%E4%B9%A6%E7%AC%94%E8%AE%B0" />
|
||
</entry>
|
||
<entry>
|
||
<title type="html"><![CDATA[知晓：约束、可视性和反馈]]></title>
|
||
<link href="https://seviche.cc/设计心理学1-4" />
|
||
<id>https://seviche.cc/设计心理学1-4</id>
|
||
<published>2021-10-22T20:21:44.000Z</published>
|
||
<updated>2022-08-06T10:50:12.946Z</updated>
|
||
<summary type="html"><![CDATA[《设计心理学 1》第四章——遇到一个新的设备或状况，设计师应如何提供重要信息，以便人们知道如何操作]]></summary>
|
||
<content type="html">
|
||
<![CDATA[<h2 id="章前"><a href="#章前">章前</a></h2><h3 id="外界的知识"><a href="#外界的知识">外界的知识：</a></h3><ul><li>示能、意符</li><li>显示、操纵的位置</li><li>操作和结果之间的匹配关系、</li><li>物理约束</li></ul><h3 id="头脑中的知识"><a href="#头脑中的知识">头脑中的知识</a></h3><ul><li>概念模型</li><li>对行为的文化面向、语义面向和逻辑的约束</li><li>现状与以往经验之间的类比</li></ul><h2 id="1-四种约束因素物理文化语义和逻辑"><a href="#1-四种约束因素物理文化语义和逻辑">1. 四种约束因素：物理、文化、语义和逻辑</a></h2><h3 id="物理约束"><a href="#物理约束">物理约束</a></h3><ul><li>将可能的操作局限在一定范围内</li><li>物品的外部特性决定了它的操作方法</li><li>不需要专门培训用户如何使用</li><li>例如：电池只有朝一个方向放才可以放进去</li><li>Tips：重要是解决用户的基本需求，而不是“约束”本身</li></ul><h3 id="文化约束"><a href="#文化约束">文化约束</a></h3><ul><li>文化惯例、习俗</li><li>以范式的形式存在<blockquote><p>范式（schemas)：知识结构，由一般规则和信息组成，主要用于诠释状况，指导人们的行为</p></blockquote></li><li>会随时间变化</li><li>例如：不同地区，打招呼的方式、尺度不同</li></ul><h3 id="语义约束"><a href="#语义约束">语义约束</a></h3><ul><li>语义：关注意义</li><li>语义约束：利用某种境况的特殊含义来限定可能的操作方法</li><li>依据：对现实情况和外部世界的理解</li><li>会随时间变化</li><li>例如：在不同地方，颜色代表的意义不同</li></ul><h3 id="逻辑约束"><a href="#逻辑约束">逻辑约束</a></h3><ul><li>如：空间或位置上的逻辑关系约束</li></ul><h2 id="2-示能意符和约束在日常用品设计中的应用"><a href="#2-示能意符和约束在日常用品设计中的应用">2. 示能、意符和约束在日常用品设计中的应用</a></h2><h3 id="门的问题"><a href="#门的问题">门的问题</a></h3><ul><li>我们必须知道要做什么，在什么地方做（面对新事物时的操作问题）</li><li>利用示能、约束限制可能的操作、规避不合理的行为</li><li>设计不应违反直觉（即用户习惯、思维惯性）</li><li>遵守文化规范</li></ul><h3 id="开关的问题"><a href="#开关的问题">开关的问题</a></h3><p>确定两类基本问题：</p><ol><li>要控制的设备</li><li>映射</li></ol><h3 id="任务分析"><a href="#任务分析">任务分析</a></h3><p>通过对实际任务的细致观察，进行设计过程，从而设计出与实际任务最贴切的方法</p><h3 id="以用户为中心的设计"><a href="#以用户为中心的设计">以用户为中心的设计</a></h3><p>基于对实际任务的细致观察，进行的设计过程</p><h3 id="以活动为中心的控制"><a href="#以活动为中心的控制">以活动为中心的控制</a></h3><ul><li>是什么：对开关所要完成的活动，进行充分仔细地分析和精心设计。以活动为划分功能/开关的依据。</li><li>仍需保留手动控制、调整功能</li></ul><h2 id="3-引导行为的约束力"><a href="#3-引导行为的约束力">3. 引导行为的约束力</a></h2><p><strong>强制功能</strong></p><h3 id="是什么"><a href="#是什么">是什么</a></h3><p>一种物理约束，是较强约束的极端情况</p><h3 id="作用"><a href="#作用">作用</a></h3><ul><li>防止不当行为</li><li>在行动受到限制的情况下，确保出现在某个阶段的差错不会蔓延，能够防止产生进一步的后果</li></ul><h3 id="例子"><a href="#例子">例子</a></h3><p>需要用钥匙才可以开车</p><h3 id="三种强制方式"><a href="#三种强制方式">三种强制方式</a></h3><h4 id="互锁"><a href="#互锁">互锁</a></h4><ul><li>促使行动按正确的<strong>次序</strong>进行（先 1>2，互相关联的操作步骤)</li><li>例如：必须先关闭洗衣机门，才可以开始启动洗衣机，在洗衣中途打开洗衣机门的话，会强制断电，停止洗衣。</li></ul><h4 id="自锁"><a href="#自锁">自锁</a></h4><ul><li>自锁保持一个操作停留在激活状态，防止有人过早地停止操作</li><li>使某人待在一个空间，或在所需操作完成前防止误操作。</li><li>（将用户圈定在安全的操作空间）</li><li>例如：就像监狱的牢房或婴儿床的围栏，防止一个人离开那个区域。</li></ul><h4 id="反锁"><a href="#反锁">反锁</a></h4><ul><li>防止某人进入那些危险的区域，或者阻止事情的发生</li><li>（锁定的是危险的区域，而不是用户）</li><li>例如：封锁地下室的入口</li></ul><h2 id="4-惯例约束和示能"><a href="#4-惯例约束和示能">4. 惯例、约束和示能</a></h2><ul><li>人们需要通过惯例来感知示能，对预设用途的解释是一个文化惯例</li><li>遵循一致性的设计可以减轻用户的学习成本</li><li>如果打破惯例得到的益处比遵循惯例得到的多，应选择打破惯例</li></ul><h2 id="5-水龙头关于设计的历史案例"><a href="#5-水龙头关于设计的历史案例">5. 水龙头：关于设计的历史案例</a></h2><ul><li>标准化是设计的终极基本原则，统一的标准可以简化人们的生活，但达成一致的标准是困难的。</li><li>标准应该反应用户心理上的概念模型，而不是实际的物理模型</li></ul><h2 id="6-利用声音作为意符"><a href="#6-利用声音作为意符">6. 利用声音作为意符</a></h2><h3 id="为什么"><a href="#为什么">为什么</a></h3><ul><li>没有办法提供可视信息时，可以利用声音提供</li><li>声音可以帮助提供有用的反馈信息</li></ul><h3 id="应提供什么信息"><a href="#应提供什么信息">应提供什么信息：</a></h3><ul><li>声音的来源</li><li>设备的工作状态</li><li>不可见但对用户有用的信息</li></ul><h3 id="如何提供"><a href="#如何提供">如何提供</a></h3><ul><li>使用自然的声音</li><li>自然的声音可以反映出自然物体之间复杂的交互作用</li><li>当使用人造声音时，使用丰富的声谱，同时小心提供不会恼人但信息丰富的细节</li><li>设计标准</li><li>报警功能</li><li>定位功能</li><li>减少骚扰</li><li>标准化与个性化</li></ul><h3 id="例子-1"><a href="#例子-1">例子</a></h3><p>汽车的声音是重要的意符</p><h3 id="拟真skeuomorphic"><a href="#拟真skeuomorphic">“拟真”(skeuomorphic)</a></h3><ul><li>指将那些将过去的、熟悉的概念融入到新的技术里，即使它们已经不能再发挥功能了。</li><li>帮助实现新旧技术之间的过渡</li><li>也被翻译为“拟物化</li></ul>]]>
|
||
</content>
|
||
<category term="设计心理学1" scheme="https://seviche.cc/?tags=%E8%AE%BE%E8%AE%A1%E5%BF%83%E7%90%86%E5%AD%A61" />
|
||
<category term="读书笔记" scheme="https://seviche.cc/?tags=%E8%AF%BB%E4%B9%A6%E7%AC%94%E8%AE%B0" />
|
||
</entry>
|
||
<entry>
|
||
<title type="html"><![CDATA[头脑中的知识和外界知识]]></title>
|
||
<link href="https://seviche.cc/设计心理学1-3" />
|
||
<id>https://seviche.cc/设计心理学1-3</id>
|
||
<published>2021-10-20T17:08:47.371Z</published>
|
||
<updated>2022-08-06T10:50:14.322Z</updated>
|
||
<summary type="html"><![CDATA[《设计心理学 1》第三章——并非精确行为需要的所有知识都得储存在头脑里]]></summary>
|
||
<content type="html">
|
||
<![CDATA[<p>并非精确行为需要的所有知识都得储存在头脑里。它可以分布在不同地方——部分在头脑里，部分在外部世界，还有一部分存在于外界约束因素之中。</p><h2 id="1-含糊的知识引导精确的行为"><a href="#1-含糊的知识引导精确的行为">1. 含糊的知识引导精确的行为</a></h2><h3 id="人们不需要完全精确的知识来支撑引导他们的行为"><a href="#人们不需要完全精确的知识来支撑引导他们的行为">人们不需要完全精确的知识来支撑引导他们的行为。</a></h3><p><strong>原因：</strong></p><ul><li>知识存储在头脑和外部世界中 （知识很多）</li><li>行动不需要完全精确的知识 （要求不高）</li><li>外界世界存在自然约束（选择少了）</li><li>头脑中的文化规范与习俗知识减少了选择的范围。（选择少了）</li></ul><h3 id="两种类型的知识"><a href="#两种类型的知识">两种类型的知识：</a></h3><ol><li>陈述性（是什么）->未必是真的</li><li>程序性（怎么做）->通过练习来学习</li></ol><hr><ul><li>人们利用环境获得大量备用信息：便利贴、信号灯、指示器，以及利用物品空间位置来提醒事件。</li><li>我们习惯寻找特色来区分事物，经验会影响我们如何区分</li></ul><h2 id="2-记忆是储存在头脑中的知识"><a href="#2-记忆是储存在头脑中的知识">2. 记忆是储存在头脑中的知识</a></h2><p>复杂的密码增加了人们记忆的难度，于是人们采用简单粗暴的方式来记下密码，这反而让密码不安全了。更好的方式是使用多种标识符。</p><h2 id="3-记忆的结构"><a href="#3-记忆的结构">3. 记忆的结构</a></h2><h3 id="两种记忆类型"><a href="#两种记忆类型">两种记忆类型</a></h3><h4 id="1-短时记忆工作记忆"><a href="#1-短时记忆工作记忆">1. 短时记忆（工作记忆）</a></h4><ul><li>与当下任务有关</li><li>容易受干扰</li><li>用保留记忆的时常来衡量</li><li>记忆难度主要受条目数量影响，一般是 5 ～ 7 个，设计时则要缩减。</li><li>设计时可以利用多感官传递信息，减少对用户短时记忆的干扰</li></ul><h4 id="2-长时记忆ltm-long-term-memory"><a href="#2-长时记忆ltm-long-term-memory">2. 长时记忆（LTM /long-term memory)</a></h4><ul><li>存储的是过去的信息</li><li>存储和还原需要花费更多的时间和精力</li><li>解释信息的方式很重要，记忆的难点在于组织和管理信息</li><li>可以被伪造，回溯记忆不是完全准确的，我们只关注自己在意的信息。</li></ul><hr><ul><li>合理的信息结构可以帮助理解、简化记忆，为信息的存储和提取建立了路径</li><li>设计应提供有意义的信息结构，减少人们需要记忆的分量和难度。“帮助人们记忆的最有效方式就是使人们不需要记忆。”</li></ul><h2 id="4近似模型现实世界里的记忆"><a href="#4近似模型现实世界里的记忆">4.近似模型：现实世界里的记忆</a></h2><ul><li>现实生活中，通常不需要绝对的真理，“差不多“就可以满足人们的需求。</li><li>简化的概念模型可以减轻人们的思维负担</li></ul><h2 id="5头脑中的知识"><a href="#5头脑中的知识">5.头脑中的知识</a></h2><p>外界知识是帮助记忆的有力工具，关键是要在合适的场合、时间</p><h3 id="前瞻记忆"><a href="#前瞻记忆">前瞻记忆</a></h3><p>仅仅指记住在未来某个时间要从事的一些活动这个记忆任务。（记住未来的某一件事）</p><h3 id="未来记忆"><a href="#未来记忆">未来记忆</a></h3><p>指规划能力，想象未来的能力</p><h3 id="提醒的两个层面"><a href="#提醒的两个层面">提醒的两个层面：</a></h3><ol><li>信号：有件事要做</li><li>信息：这件事是什么</li></ol><p>理想的提醒方法应兼顾两个层面</p><h2 id="6外界知识和头脑中知识的此消彼长"><a href="#6外界知识和头脑中知识的此消彼长">6.外界知识和头脑中知识的此消彼长</a></h2><ul><li>存储在外界和头脑中的知识，特性不同，使用的场所也不同</li><li>外界的知识可以减少头脑的负担，但使用起来比较低效</li></ul><h3 id="外界的知识"><a href="#外界的知识">外界的知识</a></h3><p>查找低效、初次使用时易用性高->设计可优化信息查找效率</p><h3 id="头脑中的知识"><a href="#头脑中的知识">头脑中的知识</a></h3><p>查找高效、初次使用时易用性低（需要学习）->设计可构建合理概念模型，简化学习过程</p><p><img src="https://raw.githubusercontent.com/norevi/image/main/img202110202356370.png" alt="https://raw.githubusercontent.com/norevi/image/main/img202110202356370.png" class="rounded-lg my-2" loading="lazy" decoding="async"></p><h2 id="7多个大脑里和多个设备中的记忆"><a href="#7多个大脑里和多个设备中的记忆">7.多个大脑里和多个设备中的记忆</a></h2><ul><li>外界知识结合头脑知识的两种记忆形式：交换记忆、数码记忆</li><li>外界知识真假难辨，需要结合头脑中的知识进行辨别</li></ul><h2 id="8自然映射"><a href="#8自然映射">8.自然映射</a></h2><blockquote><p>映射是结合外部世界与头脑里知识的最佳案例</p></blockquote><h3 id="什么是自然映射"><a href="#什么是自然映射">什么是自然映射</a></h3><p>作用于控制与被控制对象之间的，显而易见的映射关系，</p><h3 id="三个层次的映射"><a href="#三个层次的映射">三个层次的映射</a></h3><ol><li>最佳映射：直接对应</li><li>次好映射：位置靠近</li><li>第三好的映射：空间分布一至</li></ol><h3 id="糟糕的映射-vs-好的映射"><a href="#糟糕的映射-vs-好的映射">糟糕的映射 VS 好的映射</a></h3><ul><li>糟糕的映射：增加记忆负荷和使用者的出错几率（常见错误：缺乏标识）</li><li>好的映射：不需要另外的图表和标注购买者通常不是最终用户</li></ul><h2 id="9文化与设计自然映射随文化而异"><a href="#9文化与设计自然映射随文化而异">9.文化与设计：自然映射随文化而异</a></h2><ul><li>对文化模式的选择将指导相对应的交互设计</li><li>受文化影响的一些映射关系：时间流动的方向、书写的方向、前后关系、物品的移动方向等</li><li>不同的概念模式切换时，设计会比较困难，用户需要时间学习和适应新的模式</li></ul>]]>
|
||
</content>
|
||
<category term="设计心理学1" scheme="https://seviche.cc/?tags=%E8%AE%BE%E8%AE%A1%E5%BF%83%E7%90%86%E5%AD%A61" />
|
||
<category term="读书笔记" scheme="https://seviche.cc/?tags=%E8%AF%BB%E4%B9%A6%E7%AC%94%E8%AE%B0" />
|
||
</entry>
|
||
<entry>
|
||
<title type="html"><![CDATA[日常行为心理学]]></title>
|
||
<link href="https://seviche.cc/设计心理学1-2" />
|
||
<id>https://seviche.cc/设计心理学1-2</id>
|
||
<published>2021-10-20T16:14:47.371Z</published>
|
||
<updated>2022-08-06T10:50:15.315Z</updated>
|
||
<summary type="html"><![CDATA[《设计心理学 1》第二章——人们如何做事？当事情出错了怎么办？怎么知道要做什么？]]></summary>
|
||
<content type="html">
|
||
<![CDATA[<h2 id="1人们如何做事执行与评估的鸿沟"><a href="#1人们如何做事执行与评估的鸿沟">1.人们如何做事：执行与评估的鸿沟</a></h2><p>当人们使用物品时，会面对两个心理鸿沟：执行的鸿沟、评估的鸿沟</p><p><img src="https://raw.githubusercontent.com/norevi/image/main/img202110141357427.png" alt="https://raw.githubusercontent.com/norevi/image/main/img202110141357427.png" class="rounded-lg my-2" loading="lazy" decoding="async"></p><h3 id="执行的鸿沟"><a href="#执行的鸿沟">执行的鸿沟：</a></h3><ul><li>试图弄清楚如何操作</li><li>当运行正常时，会有可见的要素以消除执行的鸿沟（即是容易看得明白是如何操作的）</li></ul><h3 id="评估的鸿沟"><a href="#评估的鸿沟">评估的鸿沟：</a></h3><ul><li>试图弄清楚操作的结果</li><li>容易弥合（即可以从多方面获得评估的结果？）</li><li>评估的过程反映了努力的程度，人们必须对设备的物理状态做出解释，以便确定是否已经达到自己的期望和意图。</li><li>当设备以方便的形式提供了它的状态信息，而且容易阐释，符合用户认知系统的方法，那么评估的沟壑就小。</li><li>消除评价沟壑的主要的设计元素：反馈、概念模型。</li></ul><h3 id="如何消除这两个心理鸿沟"><a href="#如何消除这两个心理鸿沟">如何消除这两个心理鸿沟：</a></h3><ul><li>执行的沟壑：意符、约束、映射、概念模型</li><li>评价的沟壑：反馈、概念模型</li></ul><h2 id="2行动的七个阶段"><a href="#2行动的七个阶段">2.行动的七个阶段</a></h2><h3 id="行动的两个步骤"><a href="#行动的两个步骤">行动的两个步骤</a></h3><p>执行动作-> 评估结果（解释）</p><h3 id="七个阶段"><a href="#七个阶段">七个阶段：</a></h3><p><img src="https://raw.githubusercontent.com/norevi/image/main/img202110141358613.png" alt="https://raw.githubusercontent.com/norevi/image/main/img202110141358613.png" class="rounded-lg my-2" loading="lazy" decoding="async"></p><h4 id="执行桥-目标-外部世界"><a href="#执行桥-目标-外部世界">执行桥 （目标->外部世界）</a></h4><ol><li>计划</li><li>确认</li><li>执行</li></ol><h4 id="评估桥外部世界-目标"><a href="#评估桥外部世界-目标">评估桥（外部世界->目标）</a></h4><ol start="4"><li>对比</li><li>诠释</li><li>感知</li></ol><p>大部分行动不需要按顺序经历所有阶段，事件行动之间相互影响，可能会有很多行动分支</p><h3 id="行动的分类"><a href="#行动的分类">行动的分类：</a></h3><ul><li>目标驱动型（目标->）</li><li>事件驱动型（外部世界->）</li></ul><blockquote><p>日常行动中许多是机会主义的行动，没有明确的目标</p></blockquote><h3 id="根本原因分析"><a href="#根本原因分析">“根本原因分析”</a></h3><p>反复思索，追问背后的真实原因，如 5w</p><h2 id="3人的思想潜意识主导"><a href="#3人的思想潜意识主导">3.人的思想：潜意识主导</a></h2><p><img src="https://raw.githubusercontent.com/norevi/image/main/img202110141357967.png" alt="https://raw.githubusercontent.com/norevi/image/main/img202110141357967.png" class="rounded-lg my-2" loading="lazy" decoding="async"></p><h3 id="潜意识"><a href="#潜意识">潜意识</a></h3><ul><li>人的行为大多数是潜意识的</li><li>毫不费力</li><li>基于过去的经验</li><li>自动迅速进行</li><li>偏重规则和结构</li><li>无法区分常见与罕见</li><li>不能被蓄意操纵</li></ul><h3 id="有意识的思维"><a href="#有意识的思维">有意识的思维</a></h3><ul><li>缓慢而吃力</li><li>比较、判断、解释</li></ul><h3 id="认知和情感"><a href="#认知和情感">认知和情感</a></h3><ul><li>认知：提供理解</li><li>情感：价值判断</li><li>关系：<ul><li>认知引导情绪，情绪影响认知</li><li>协同工作</li></ul></li></ul><h2 id="4人的认知和情感"><a href="#4人的认知和情感">4.人的认知和情感</a></h2><p>三个层次：本能、行为、反思</p><h3 id="本能层"><a href="#本能层">本能层</a></h3><ul><li>最基本的处理层、直接的感知</li><li>快速的、自发的、潜意识的</li><li>对当前状况的反映，不涉及过去</li><li>简单评估，不做价值判断例如：”悦耳“的声音，“冰冷”的水 （设计美学）</li></ul><h3 id="行为层"><a href="#行为层">行为层</a></h3><ul><li>学习能力之本、交互之本，与行动，具体的操作有关</li><li>潜意识的</li><li>设计：行动应与期望相关联（正价反应、负价反应），方法是建立合理的反馈机制以管理预期。</li></ul><h3 id="反思层"><a href="#反思层">反思层</a></h3><ul><li>有意识的认知之本，深度而缓慢的</li><li>发展深层理解，推理、判断</li><li>所产生的情绪最持久</li><li>反思的回忆比现实更重要，反思的情感认知会掩盖行为层和本能层带来的影响。</li></ul><blockquote><p>高层次的反思认知可以触发低层次的情绪。低层次的情绪会引发更高层次的反思认知。</p></blockquote><h2 id="5行动的七个阶段和大脑的三个层次"><a href="#5行动的七个阶段和大脑的三个层次">5.行动的七个阶段和大脑的三个层次</a></h2><p><img src="https://raw.githubusercontent.com/norevi/image/main/img202110202321409.png" alt="https://raw.githubusercontent.com/norevi/image/main/img202110202321409.png" class="rounded-lg my-2" loading="lazy" decoding="async"></p><h3 id="心流"><a href="#心流">心流</a></h3><p>是什么：完全沉浸在行动中的情感</p><p>会如何：人们会忽略外部时间和空间，有身临其境的感觉</p><p>特点</p><ul><li>人们热衷于的</li><li>需要一定专注力</li><li>适当难度</li><li>目标清晰</li><li>立即反馈</li><li>控制感</li><li>行动时，忧虑消失</li><li>活动时，主观时间感知改变</li></ul><h2 id="6自说自话"><a href="#6自说自话">6.自说自话</a></h2><p>人们喜欢为事情建立因果关系</p><h3 id="概念模式"><a href="#概念模式">概念模式</a></h3><ul><li>是一种形式的故事</li><li>来源于部分事实和经验，不是完全准确的</li><li>当外部信息缺乏时，人们靠想象力辅佐建立概念模型</li></ul><h2 id="7责备错误之事"><a href="#7责备错误之事">7.责备错误之事</a></h2><ul><li>人们习惯为相继发生的两件事情之间建立因果关系</li><li>第一次尝试失败后，人们倾向于重复这个动作（反馈应迅速）</li></ul><h3 id="给用户有保留的预测"><a href="#给用户有保留的预测">给用户有保留的预测：</a></h3><ul><li>显示最差的预计情况</li><li>最长的预估时间</li></ul><h3 id="习得性无助自责循环"><a href="#习得性无助自责循环">习得性无助（自责循环）</a></h3><ul><li>指在多次经历失败后，便认为自己无法做好某事，结果陷入无助的状态。</li><li>人们将不再进行尝试。</li></ul><h3 id="积极心理学"><a href="#积极心理学">积极心理学</a></h3><p>即一种正面思考的并且自我感觉良好的文化</p><h3 id="tips"><a href="#tips">tips：</a></h3><ul><li>不要责怪用户的错误使用，反思产品问题，提升体验</li><li>比“错误处理指南”更重要的是，消除产品本身错误。</li><li>直接从帮助和指导信息中纠正问题，不要让用户重新开始。</li><li>为用户纠正问题提供应有的帮助。</li></ul><h2 id="8不当的自责"><a href="#8不当的自责">8.不当的自责</a></h2><h3 id="自责的原因"><a href="#自责的原因">自责的原因</a></h3><p>系统差错被归因为人为差错</p><h3 id="设计师应如何"><a href="#设计师应如何">设计师应如何</a></h3><ul><li>错误发生之前：减少不当行为发生的机会->示能、意符、映射、约束等</li><li>错误发生时：让人们发现错误并纠正->反馈、概念模型</li></ul><blockquote><p>人擅长灵活的工作和创造，机器擅长准确的工作。</p></blockquote><h2 id="9行动的七个阶段七个基本设计原则"><a href="#9行动的七个阶段七个基本设计原则">9.行动的七个阶段：七个基本设计原则</a></h2><p><img src="https://raw.githubusercontent.com/norevi/image/main/img202110202327901.png" alt="https://raw.githubusercontent.com/norevi/image/main/img202110202327901.png" class="rounded-lg my-2" loading="lazy" decoding="async"></p><h3 id="前馈"><a href="#前馈">前馈</a></h3><p>有助于回答执行类（做）的信息->如何做？</p><h3 id="反馈"><a href="#反馈">反馈</a></h3><p>有助于理解发生了什么的信息->发生了什么？</p><h3 id="设计的七个基本原则"><a href="#设计的七个基本原则">设计的七个基本原则</a></h3><p>可见性、反馈、概念模型、示能、意符、映射、约束</p>]]>
|
||
</content>
|
||
<category term="设计心理学1" scheme="https://seviche.cc/?tags=%E8%AE%BE%E8%AE%A1%E5%BF%83%E7%90%86%E5%AD%A61" />
|
||
<category term="读书笔记" scheme="https://seviche.cc/?tags=%E8%AF%BB%E4%B9%A6%E7%AC%94%E8%AE%B0" />
|
||
</entry>
|
||
<entry>
|
||
<title type="html"><![CDATA[日用品心理学]]></title>
|
||
<link href="https://seviche.cc/设计心理学1-1" />
|
||
<id>https://seviche.cc/设计心理学1-1</id>
|
||
<published>2021-10-20T12:28:00.000Z</published>
|
||
<updated>2022-08-06T10:50:16.843Z</updated>
|
||
<summary type="html"><![CDATA[《设计心理学 1》第一章——好设计有两个特征可视性和易通性]]></summary>
|
||
<content type="html">
|
||
<![CDATA[<p>最近参加了一个知识星球的读书打卡活动，每天需要阅读三个小节并归纳。于是第二次翻开这本书，不过这次决定在微信读书上阅读，划线标注之后再在 flomo 里写打卡内容，等读完了再放到 obsidian 中进行概念梳理。</p><p>以下在 flomo 中总结的内容</p><h2 id="1复杂的现代设备"><a href="#1复杂的现代设备">1.复杂的现代设备</a></h2><ol><li>工程师思维强调逻辑而容易忽略用户</li><li>需要同时考虑人和机器</li><li>不同的设计学科有不同的侧重点，列举了工业设计、体验设计、交互设计</li></ol><h2 id="2以人为本的设计"><a href="#2以人为本的设计">2.以人为本的设计</a></h2><ol><li>以人为本的设计是一种设计理念,不是一门学科，和专业设计角色不同。</li><li>以人为本的设计通过分析用户的需求、能力和行为，用设计来满足用户的需求、能力和行为方式。</li><li>以人为本的设计需要通过观察来理解用户</li><li>快速测试可以方便地找到设计的问题所在。</li></ol><h2 id="3交互设计的基本原则"><a href="#3交互设计的基本原则">3.交互设计的基本原则</a></h2><ul><li>五个心理学基本概念：示能，意符，约束，映射、反馈</li><li>第六原则：概念模型</li></ul><h3 id="示能"><a href="#示能">示能</a></h3><ul><li>物理对象和人之间的关系、物品的预设用途（能做什么）</li><li>示能和反示能都应被揭示出来</li></ul><h3 id="意符"><a href="#意符">意符</a></h3><ul><li>示能的外在表现、符号提示功能 （表明在哪里操作）</li><li>简单的物品不应有过多的外在意符（如门）</li></ul><h3 id="约束"><a href="#约束">约束</a></h3><ul><li>对用户操作的限制。（如死锁）</li></ul><h3 id="映射"><a href="#映射">映射</a></h3><ul><li>两组要素之间的关系（如哪个开关开哪个灯）</li><li>不同文化之间的映射也许会不同</li></ul><h3 id="反馈"><a href="#反馈">反馈</a></h3><ul><li>一些让你知道系统正在处理你的要求的方式，即系统和用户的“沟通”（如电话接通之前的嘟嘟声，）</li><li>需要即使反馈，只提供必要信息、避免过多反馈。</li><li>需要精心策划、考虑优先权</li></ul><h2 id="4系统映像"><a href="#4系统映像">4.系统映像</a></h2><ol><li><p>是指设计师提供给用户的适用信息组合，如（说明书、操作说明视频等）</p></li><li><p>是一种沟通中介，设计师通过“系统映像”给用户传递产品预设的心理模型，并期望用户基于此建立一致的心理模型。</p></li></ol><h2 id="5科技的悖论"><a href="#5科技的悖论">5.科技的悖论</a></h2><p>产品的复杂性增加，更难学难用。作者认为最好的方式是建立统一的标准。</p><h2 id="6设计的挑战"><a href="#6设计的挑战">6.设计的挑战</a></h2><p>设计需要跨学科合作，设计管理很重要，需要兼顾平衡多方目标</p>]]>
|
||
</content>
|
||
<category term="设计心理学1" scheme="https://seviche.cc/?tags=%E8%AE%BE%E8%AE%A1%E5%BF%83%E7%90%86%E5%AD%A61" />
|
||
<category term="读书笔记" scheme="https://seviche.cc/?tags=%E8%AF%BB%E4%B9%A6%E7%AC%94%E8%AE%B0" />
|
||
</entry>
|
||
<entry>
|
||
<title type="html"><![CDATA[什么是设计洞察 · What is Insight]]></title>
|
||
<link href="https://seviche.cc/insight" />
|
||
<id>https://seviche.cc/insight</id>
|
||
<published>2021-10-15T15:07:14.533Z</published>
|
||
<updated>2022-08-06T10:49:42.689Z</updated>
|
||
<content type="html">
|
||
<![CDATA[<p>原文： <a href="https://thrivethinking.com/2016/03/28/what-is-insight-definition/" rel="nofollow noopener noreferrer external" target="_blank">thrivethinking.com</a></p><h2 id="insight-不是什么"><a href="#insight-不是什么">insight 不是什么</a></h2><ul><li>不是数据</li><li>不是简单的事实观测</li><li>不是用户的需求陈述（例如: 我需要、我想要）</li></ul><h2 id="是什么"><a href="#是什么">是什么</a></h2><ol><li>是揭示本质的</li></ol><blockquote><p>An unrecognized fundamental human truth that reveals the inner nature of things</p><p>一个未被承认的人类基本真理，揭示了事物的内在本质</p></blockquote><ol start="2"><li>是一种看待世界的新方式</li></ol><blockquote><p>A new way of viewing the world that causes us to reexamine existing conventions and challenge the status quo.</p><p>一种看待世界的新方式，使我们重新审视现有的惯例并挑战现状</p></blockquote><ol start="3"><li>是对人类行为的深入观察</li></ol><blockquote><p>A penetrating observation about human behavior thaWhat Is Insight- The 5 Principles of Insight Definitiont results in seeing consumers from a fresh perspective.</p><p>对人类行为的深入观察，导致从一个全新的角度看待消费者。</p></blockquote><ol start="4"><li>是一种对人们潜在行为的发现</li></ol><blockquote><p>A discovery about the underlying motivations that drive people’s actions.</p><p>对驱动人们行动的潜在动机的发现。</p></blockquote><p><strong>洞察(Insight)让我们去思考人们为什么做事，是什么阻碍了人们做事情，它更深入问题根源，而不是停留在表面</strong></p><h2 id="五大要素"><a href="#五大要素">五大要素</a></h2><p><strong>语境/困境/动机/原因/设想</strong><a href="http://thrivethinking.com/wp-content/uploads/2016/03/WhatIsInsight_5.jpg" rel="nofollow noopener noreferrer external" target="_blank"><img src="https://thrivethinking.com/wp-content/uploads/2016/03/WhatIsInsight_5.jpg" alt="https://thrivethinking.com/wp-content/uploads/2016/03/WhatIsInsight_5.jpg" class="rounded-lg my-2" loading="lazy" decoding="async"></a></p><h2 id="定义-insight-的步骤"><a href="#定义-insight-的步骤">定义 Insight 的步骤</a></h2><h3 id="1设定语境场景"><a href="#1设定语境场景">1.设定语境/场景</a></h3><blockquote><p>A simple observation of how people behave in a given situation, what they think, what they feel, but most importantly explain what they are doing and trying to achieve</p><p>一个关于人们在给定的情境内如何想、如何做、如何感受的观察陈述。重要的是要说明他们在做什么以及想做什么。</p></blockquote><h3 id="2沟通困境"><a href="#2沟通困境">2.沟通困境</a></h3><blockquote><p>understanding the barriers that are stopping consumers from achieving what they want to achieve with a given product, service or experience</p><p>了解消费者通过特定产品、服务或体验实现其愿望时遇到的障碍。</p></blockquote><h3 id="3-阐明原因"><a href="#3-阐明原因">3. 阐明原因</a></h3><blockquote><p>An insight statement is a discovery of understanding and the identification of unmet needs to explain why something is happening the way it is</p><p>洞察力声明是对理解的发现和对未满足需求的识别，以解释为什么事情会以这样的方式发生.</p></blockquote><blockquote><p>You must know the reason a consumer is behaving in a particular way, and why it is happening if you are to develop a product or service that can in some way augment the behavior or change it.</p><p>你必须知道消费者以特定方式行事的原因，以及为什么会发生这种情况，如果你要开发一种产品或服务，以某种方式增强这种行为或改变它的话。</p></blockquote><h3 id="4-捕捉动机"><a href="#4-捕捉动机">4. 捕捉动机</a></h3><blockquote><p>Discovering the underlying motivations that drive people’s actions</p><p>发现推动人们行动的潜在动机</p></blockquote><blockquote><p>End-users of a product or service are motivated to change by the tensions that exist in their lives.</p><p>产品或服务的终端用户被他们生活中存在的紧张关系所激励而改变</p></blockquote><blockquote><p>Look for tensions in four key areas: the physiological, the emotional, the cognitive and the environmental to inform your insight statements.</p><p>寻找四个关键领域的紧张关系：生理的、情感的、认知的和环境的，</p></blockquote><h3 id="5构想理想"><a href="#5构想理想">5.构想理想</a></h3><blockquote><p>It is important to describe the desired end-state or situation the consumer is seeking.</p><p>描述消费者所追求的理想的最终状态或情况是很重要的</p></blockquote><blockquote><p>The key here is not to define a solution but clearly convey how the consumer would like the world to look and feel, what the ideal experience should be.</p><p>此处的关键在于不需要定义一个清晰的解决方案，而需要清楚地传达消费者希望世界看起来和感觉如何，理想的体验应该是什么</p></blockquote><blockquote><p>An excellent way to articulate this is to start with the statement “I wish there was,</p><p>一个很好的表达方式是以 “我希望有 “开始</p></blockquote><h2 id="如何表达"><a href="#如何表达">如何表达</a></h2><blockquote><p>Think of insight definition as a three sentence journey that takes the reader through the consumer’s situation, frustration, and future desires.</p><p>将洞察定义视为一个三句话的旅程，带领读者了解消费者的情况、挫折和未来的愿望。</p></blockquote><h3 id="第一句话描述现状和用户行为"><a href="#第一句话描述现状和用户行为">第一句话——描述现状和用户行为。</a></h3><blockquote><p><strong><em>Having pictures around that instantly remind me of special moments and people, makes me feel good.”</em></strong></p><p>“身边有照片，能让我立即想起特别的时刻和人物，让我感觉很好。”</p></blockquote><h3 id="第二句话描述用户的困境并说明造成困境的原因"><a href="#第二句话描述用户的困境并说明造成困境的原因">第二句话——描述用户的困境，并说明造成困境的原因。</a></h3><blockquote><p><strong><em>“But I find that pictures from my digital camera often stay hidden on my devices because I never have time to print them.”</em></strong></p><p>“但是我发现我的数码相机里的照片经常被藏在我的设备里，因为我从来没有时间去打印它们。”</p></blockquote><h3 id="第三句话描述用户期望的最终理想状况"><a href="#第三句话描述用户期望的最终理想状况">第三句话——描述用户期望的最终理想状况。</a></h3><blockquote><p><strong><em>“I wish there was a way to enjoy them everyday without having to actively play them on my TV or computer.”</em></strong></p><p>“我希望有一种方法可以每天欣赏它们，而不必在电视或电脑上主动播放它们。”</p></blockquote><h3 id="tips"><a href="#tips">Tips</a></h3><ul><li>用第一视角书写</li><li>真实、人性化的口吻</li><li>客观、真诚</li></ul><h2 id="什么是一个好的insight"><a href="#什么是一个好的insight">什么是一个好的’Insight’</a></h2><ul><li>它在情感层面与消费者建立联系，并引起 “你显然理解我 “的反应。</li><li>它重新审视现有的惯例并挑战现状。</li><li>它解决了一个真正的问题，从而产生了新的客户。</li><li>它通过给你一个明确的目标来激发行动。</li><li>它清楚地说明了下一步该做什么以及如何为你的客户提供价值。</li><li>它为团队带来了新的感知水平，并有助于做出明智的决策。</li></ul><h2 id="insight-how-might-we"><a href="#insight-how-might-we">Insight->How Might We?</a></h2><p>需要把 insight(洞察)转变为 HMW（我们如何？）</p><p>例如：</p><blockquote><p>“我们可能如何每天享受我们的记忆，而不必花时间在设备上主动播放它们？”</p></blockquote><h2 id="后记"><a href="#后记">后记</a></h2><ul><li>insight 在作品集中如何表达？看到有 Insight 只写一句话的，总结为’Key insights’,内容上是关键的事实发现，而跟前文所述的这种深入的洞察不同，那是否存在两种 insight 的定义写法？</li><li>打算把 Insight 放到 Persona 后面，一个 Persona 对应一个 insight 和一个 How Might We.</li></ul>]]>
|
||
</content>
|
||
<category term="Design Thinking" scheme="https://seviche.cc/?tags=Design%20Thinking" />
|
||
<category term="翻译" scheme="https://seviche.cc/?tags=%E7%BF%BB%E8%AF%91" />
|
||
</entry>
|
||
</feed> |