更新网址
This commit is contained in:
jimmy committed
1 parent
c26d917fb2
commit
a7f1c70165
9 files changed
+188
-178
No files matched your search
@@ -17,7 +17,7 @@ categories: [ 'skill' ]
|
||||
|
||||
几乎都最新版本了
|
||||
|
||||
|
||||
|
||||
|
||||
## 问题复现
|
||||
|
||||
@@ -36,37 +36,37 @@ const { t, d, n, locale } = useI18n()
|
||||
|
||||
当在创建对应的i18n时，会先将对应的内容进行创建和导出：
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
在这个文件中创建了i18n，并且对特定的配置项进行了指定，但是导出的这个i18n中有什么？
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
在配置的文件中已经存在了要使用的方法，也就是导出的：`t`,`d`,`n`等，要使用的方法也在这里面
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
在这个`global`中存在了对应的全局的方法，不需要通过i18n指定的方法进行引入执行，可以直接使用，所以这个就是要手动引入的内容
|
||||
|
||||
## 解决
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
使用这种方法问题得到解决，不过在尝试过程中，这种两种方式使用的i18n也是有区别的
|
||||
|
||||
在引入的过程中，因为方式不同，所以引入的方法其实也不是同一个
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
不过在对应的注释中也能略微看出二者的区别
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
使用方法引入的‘t’应当也有特有的内容，这里只进行列举，不继续深入探讨。
|
||||
|
||||
@@ -13,7 +13,7 @@ categories: [ 'skill' ]
|
||||
|
||||
实际效果展示：
|
||||
|
||||
|
||||
|
||||
|
||||
对于列的固定，`table`中有对应的方法，但是如果列和表头都要固定，只能通过其他方式实现，<span style="color:red;">如果您找到了更好的自身方法，还请斧正</span>
|
||||
|
||||
|
||||
@@ -188,19 +188,19 @@ categories: [ 'skill' ]
|
||||
|
||||
首先是第一种，如果使用的话会直接报错，报错内容为：
|
||||
|
||||
|
||||
|
||||
|
||||
因为`less`的直接报错，导致定义的变量压根就没有被编译出来，从而报错
|
||||
|
||||
第二种和第三种错误一样：
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
在这种使用方式中，变量可以正确承接，但是不能完成拼接的操作，导致只有变量而没有单位，并且可以看出最终都被翻译为`var(--变量名)`来执行，所以顺便也对`var()`进行了拼接测试
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -240,18 +240,18 @@ categories: [ 'skill' ]
|
||||
|
||||
结果也非常让不出意外的都不行，并且在第二种方式也是直接报错的，在寻找问题的过程中，发现了更加`amazing`的事情：
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
这个变量压根就没定义，或者说没被识别到，所以重新模仿`Vue`直接定义行内样式，并且使用拼接尝试：
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
这种直接的拼接方式直接将所有内容都进行了拼接，再换一种思路：使用`V-bind`这个V-bind指的是数据的而不是样式：
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -362,14 +362,14 @@ categories: [ 'skill' ]
|
||||
|
||||
`v-bind() in css`并没有进行劫持或者其他操作，他主要完成的任务是将`v-bind()`中的内容通过自定义属性的方式进行了重新定义，在编译后代码中可以看到
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
所有的数据直接在自定义属性中进行，并且直接对应引用，自定义属性的内容的改变影响视图的效果，从而达到数据影响视图的效果，这个在使用中`less`,`css`中完全没有问题
|
||||
|
||||
但是，在`scss`中，因为编译之后`名字无法进行匹配`从而造成样式的丢失
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
可以看到，使用的名字和编译的名字并不匹配，从而出错，这个使用时需要注意
|
||||
|
||||
@@ -15,10 +15,10 @@ categories: [ 'think' ]
|
||||
抛出这个问题主要基于22年和23年发生的一些事件：
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
并且Svelte 不是第一个放弃 TypeScript 的前端框架。早在 2020 年，Deno 就迁移了一部分內部 TypeScript 代码到 JavaScript，以减少构建时间。
|
||||
|
||||
@@ -44,13 +44,13 @@ categories: [ 'think' ]
|
||||
|
||||
并且对于这篇文章，Reddit的评论区也是活力十足
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
并且在知乎对于这个问题的评价更加激进：
|
||||
|
||||
|
||||
|
||||
|
||||
以下是文字版本：
|
||||
|
||||
|
||||
@@ -22,17 +22,17 @@ categories: [ 'think' ]
|
||||
|
||||
但和国内相悖的是，在`JetBrains`与`StackOverflow`在2023年的数据报告中，在前端方面数据，`Node`和`React`以压倒性优势领先其他语言
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
2023JavaScript趋势报告：
|
||||
|
||||
|
||||
|
||||
|
||||
和国内不同的是，`React`在国外保持着惊人的活力
|
||||
|
||||
@@ -172,7 +172,7 @@ categories: [ 'think' ]
|
||||
> - 如果我们要有一个统治框架，难道我们不希望它没有主见吗？所以 React 真的很好，因为它基本上只是一个带有最小状态管理解决方案的渲染库。有许多其他东西建立在 React 之上，这使得它与其他框架相当。所以即使你考虑元框架，也有很多流行的框架。
|
||||
> - 如果你了解 JavaScript，你几乎了解 React 的所有内容。他不会像Angular那样有很多新的“魔法”（这里指的是Angular引入的新的改变增加了学习成本，如管道，过滤器等）
|
||||
|
||||
|
||||
|
||||
|
||||
##### 观点四：从公司架构思考问题
|
||||
|
||||
|
||||
@@ -17,9 +17,9 @@ categories: ["设计"]
|
||||
|
||||
<img src="/blog/2024/08/10002/image-20240709144917869.png" alt="/blog/2024/08/10002/image-20240709144917869" />
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -27,33 +27,33 @@ categories: ["设计"]
|
||||
|
||||
## **标签（板块）**
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -67,17 +67,17 @@ categories: ["设计"]
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -89,29 +89,29 @@ categories: ["设计"]
|
||||
|
||||
## 排行（热门）
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -127,11 +127,11 @@ categories: ["设计"]
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -149,19 +149,19 @@ categories: ["设计"]
|
||||
|
||||
### 列表形式
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -169,39 +169,39 @@ categories: ["设计"]
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
--------
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
### 问答形式
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
### 卡片形式
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
### 预览形式
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -104,7 +104,7 @@ keywords: ['登录功能']
|
||||
9. 客户端收到服务器发送来的密文，用客户端密钥对其进行对称解密，得到服务器发送的数据。这样HTTPS中的第二个HTTP请求结束，整个HTTPS传输完成。
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
它通过以下方式保证数据的安全性：
|
||||
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
baseURL: "https://duyl328.github.io/duyl328/"
|
||||
baseURL: "https://duyl328.github.io/"
|
||||
languageCode: zh
|
||||
title: Demo!
|
||||
theme: PaperMod
|
||||
|
||||
+110
-100
@@ -1,143 +1,153 @@
|
||||
{{- if not (.Param "hideFooter") }}
|
||||
<footer class="footer">
|
||||
{{- if not site.Params.footer.hideCopyright }}
|
||||
{{- if site.Copyright }}
|
||||
<span>{{ site.Copyright | markdownify }}</span>
|
||||
{{- else }}
|
||||
<span>© {{ now.Year }} <a href="{{ "" | absLangURL }}">{{ site.Title }}</a></span>
|
||||
{{- end }}
|
||||
{{- print " · "}}
|
||||
{{- end }}
|
||||
<!-- {{- if not site.Params.footer.hideCopyright }}-->
|
||||
<!-- {{- if site.Copyright }}-->
|
||||
<!-- <span>{{ site.Copyright | markdownify }}</span>-->
|
||||
<!-- {{- else }}-->
|
||||
<!-- <span>© {{ now.Year }} <a href="{{ "" | absLangURL }}">{{ site.Title }}</a></span>-->
|
||||
<!-- {{- end }}-->
|
||||
<!-- {{- print " · "}}-->
|
||||
<!-- {{- end }}-->
|
||||
|
||||
{{- with site.Params.footer.text }}
|
||||
{{ . | markdownify }}
|
||||
{{- print " · "}}
|
||||
{{- end }}
|
||||
<!-- {{- with site.Params.footer.text }}-->
|
||||
<!-- {{ . | markdownify }}-->
|
||||
<!-- {{- print " · "}}-->
|
||||
<!-- {{- end }}-->
|
||||
<!-- <a rel="license" href="https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh">-->
|
||||
<!-- <img alt="创意共享许可协议" style="border-width:0" src="https://licensebuttons.net/l/by-nc-sa/4.0/88x31.png"/>-->
|
||||
</a>
|
||||
<span xmlns:dct="http://purl.org/dc/terms/" property="dct:title"></span> <a
|
||||
xmlns:cc="http://web.resource.org/cc/" href="https://duyl328.github.io">duyl328</a> is licensed under a <a
|
||||
rel="license" href="https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh">Creative Commons Attribution-NonCommercial-ShareAlike 4.0 国际许可协议</a>.
|
||||
·
|
||||
|
||||
<span>
|
||||
<span>
|
||||
Powered by
|
||||
<a href="https://gohugo.io/" rel="noopener noreferrer" target="_blank">Hugo</a>
|
||||
|
||||
</span>
|
||||
|
||||
</footer>
|
||||
{{- end }}
|
||||
|
||||
{{- if (not site.Params.disableScrollToTop) }}
|
||||
<a href="#top" aria-label="go to top" title="Go to Top (Alt + G)" class="top-link" id="top-link" accesskey="g">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentColor">
|
||||
<path d="M12 6H0l6-6z" />
|
||||
</svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentColor">
|
||||
<path d="M12 6H0l6-6z"/>
|
||||
</svg>
|
||||
</a>
|
||||
{{- end }}
|
||||
|
||||
{{- partial "extend_footer.html" . }}
|
||||
|
||||
<script>
|
||||
let menu = document.getElementById('menu')
|
||||
if (menu) {
|
||||
menu.scrollLeft = localStorage.getItem("menu-scroll-position");
|
||||
menu.onscroll = function () {
|
||||
localStorage.setItem("menu-scroll-position", menu.scrollLeft);
|
||||
}
|
||||
}
|
||||
let menu = document.getElementById('menu')
|
||||
if (menu) {
|
||||
menu.scrollLeft = localStorage.getItem('menu-scroll-position')
|
||||
menu.onscroll = function () {
|
||||
localStorage.setItem('menu-scroll-position', menu.scrollLeft)
|
||||
}
|
||||
}
|
||||
|
||||
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
||||
anchor.addEventListener("click", function (e) {
|
||||
e.preventDefault();
|
||||
var id = this.getAttribute("href").substr(1);
|
||||
if (!window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
|
||||
document.querySelector(`[id='${decodeURIComponent(id)}']`).scrollIntoView({
|
||||
behavior: "smooth"
|
||||
});
|
||||
} else {
|
||||
document.querySelector(`[id='${decodeURIComponent(id)}']`).scrollIntoView();
|
||||
}
|
||||
if (id === "top") {
|
||||
history.replaceState(null, null, " ");
|
||||
} else {
|
||||
history.pushState(null, null, `#${id}`);
|
||||
}
|
||||
});
|
||||
});
|
||||
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
||||
anchor.addEventListener('click', function (e) {
|
||||
e.preventDefault()
|
||||
var id = this.getAttribute('href').substr(1)
|
||||
if (!window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
|
||||
document.querySelector(`[id='${decodeURIComponent(id)}']`).scrollIntoView({
|
||||
behavior: 'smooth',
|
||||
})
|
||||
} else {
|
||||
document.querySelector(`[id='${decodeURIComponent(id)}']`).scrollIntoView()
|
||||
}
|
||||
if (id === 'top') {
|
||||
history.replaceState(null, null, ' ')
|
||||
} else {
|
||||
history.pushState(null, null, `#${id}`)
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
{{- if (not site.Params.disableScrollToTop) }}
|
||||
<script>
|
||||
var mybutton = document.getElementById("top-link");
|
||||
window.onscroll = function () {
|
||||
if (document.body.scrollTop > 800 || document.documentElement.scrollTop > 800) {
|
||||
mybutton.style.visibility = "visible";
|
||||
mybutton.style.opacity = "1";
|
||||
} else {
|
||||
mybutton.style.visibility = "hidden";
|
||||
mybutton.style.opacity = "0";
|
||||
}
|
||||
};
|
||||
var mybutton = document.getElementById('top-link')
|
||||
window.onscroll = function () {
|
||||
if (document.body.scrollTop > 800 || document.documentElement.scrollTop > 800) {
|
||||
mybutton.style.visibility = 'visible'
|
||||
mybutton.style.opacity = '1'
|
||||
} else {
|
||||
mybutton.style.visibility = 'hidden'
|
||||
mybutton.style.opacity = '0'
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
{{- end }}
|
||||
|
||||
{{- if (not site.Params.disableThemeToggle) }}
|
||||
<script>
|
||||
document.getElementById("theme-toggle").addEventListener("click", () => {
|
||||
if (document.body.className.includes("dark")) {
|
||||
document.body.classList.remove('dark');
|
||||
localStorage.setItem("pref-theme", 'light');
|
||||
} else {
|
||||
document.body.classList.add('dark');
|
||||
localStorage.setItem("pref-theme", 'dark');
|
||||
}
|
||||
})
|
||||
document.getElementById('theme-toggle').addEventListener('click', () => {
|
||||
if (document.body.className.includes('dark')) {
|
||||
document.body.classList.remove('dark')
|
||||
localStorage.setItem('pref-theme', 'light')
|
||||
} else {
|
||||
document.body.classList.add('dark')
|
||||
localStorage.setItem('pref-theme', 'dark')
|
||||
}
|
||||
})
|
||||
|
||||
</script>
|
||||
{{- end }}
|
||||
|
||||
{{- if (and (eq .Kind "page") (ne .Layout "archives") (ne .Layout "search") (.Param "ShowCodeCopyButtons")) }}
|
||||
<script>
|
||||
document.querySelectorAll('pre > code').forEach((codeblock) => {
|
||||
const container = codeblock.parentNode.parentNode;
|
||||
document.querySelectorAll('pre > code').forEach((codeblock) => {
|
||||
const container = codeblock.parentNode.parentNode
|
||||
|
||||
const copybutton = document.createElement('button');
|
||||
copybutton.classList.add('copy-code');
|
||||
copybutton.innerHTML = '{{- i18n "code_copy" | default "copy" }}';
|
||||
const copybutton = document.createElement('button')
|
||||
copybutton.classList.add('copy-code')
|
||||
copybutton.innerHTML = '{{- i18n "code_copy" | default "copy" }}'
|
||||
|
||||
function copyingDone() {
|
||||
copybutton.innerHTML = '{{- i18n "code_copied" | default "copied!" }}';
|
||||
setTimeout(() => {
|
||||
copybutton.innerHTML = '{{- i18n "code_copy" | default "copy" }}';
|
||||
}, 2000);
|
||||
}
|
||||
function copyingDone () {
|
||||
copybutton.innerHTML = '{{- i18n "code_copied" | default "copied!" }}'
|
||||
setTimeout(() => {
|
||||
copybutton.innerHTML = '{{- i18n "code_copy" | default "copy" }}'
|
||||
}, 2000)
|
||||
}
|
||||
|
||||
copybutton.addEventListener('click', (cb) => {
|
||||
if ('clipboard' in navigator) {
|
||||
navigator.clipboard.writeText(codeblock.textContent);
|
||||
copyingDone();
|
||||
return;
|
||||
}
|
||||
copybutton.addEventListener('click', (cb) => {
|
||||
if ('clipboard' in navigator) {
|
||||
navigator.clipboard.writeText(codeblock.textContent)
|
||||
copyingDone()
|
||||
return
|
||||
}
|
||||
|
||||
const range = document.createRange();
|
||||
range.selectNodeContents(codeblock);
|
||||
const selection = window.getSelection();
|
||||
selection.removeAllRanges();
|
||||
selection.addRange(range);
|
||||
try {
|
||||
document.execCommand('copy');
|
||||
copyingDone();
|
||||
} catch (e) { };
|
||||
selection.removeRange(range);
|
||||
});
|
||||
const range = document.createRange()
|
||||
range.selectNodeContents(codeblock)
|
||||
const selection = window.getSelection()
|
||||
selection.removeAllRanges()
|
||||
selection.addRange(range)
|
||||
try {
|
||||
document.execCommand('copy')
|
||||
copyingDone()
|
||||
} catch (e) { }
|
||||
|
||||
if (container.classList.contains("highlight")) {
|
||||
container.appendChild(copybutton);
|
||||
} else if (container.parentNode.firstChild == container) {
|
||||
// td containing LineNos
|
||||
} else if (codeblock.parentNode.parentNode.parentNode.parentNode.parentNode.nodeName == "TABLE") {
|
||||
// table containing LineNos and code
|
||||
codeblock.parentNode.parentNode.parentNode.parentNode.parentNode.appendChild(copybutton);
|
||||
} else {
|
||||
// code blocks not having highlight as parent class
|
||||
codeblock.parentNode.appendChild(copybutton);
|
||||
}
|
||||
});
|
||||
selection.removeRange(range)
|
||||
})
|
||||
|
||||
if (container.classList.contains('highlight')) {
|
||||
container.appendChild(copybutton)
|
||||
} else if (container.parentNode.firstChild == container) {
|
||||
// td containing LineNos
|
||||
} else if (codeblock.parentNode.parentNode.parentNode.parentNode.parentNode.nodeName == 'TABLE') {
|
||||
// table containing LineNos and code
|
||||
codeblock.parentNode.parentNode.parentNode.parentNode.parentNode.appendChild(copybutton)
|
||||
} else {
|
||||
// code blocks not having highlight as parent class
|
||||
codeblock.parentNode.appendChild(copybutton)
|
||||
}
|
||||
})
|
||||
</script>
|
||||
{{- end }}
|
||||
Reference in new issue
Block a user