收集和整理所有这些信息可能是一项艰巨的任务。在这篇文章中，我将介绍一些我进行知识管理的工具。 我认为对知识管理非常重要的一点是避免局限在特定平台。...我用的工具是 NotionHQ 。我用它来记录各种主题，列了一些资源表，如用编程语言分组的优秀库或教程，为有趣的博客和教程添加书签等等，除了软件开发相关的知识，我还用它记录个人生活。...使用 SnippetStore 进行代码片段管理 从 GitHub 到 Stack Overflow answers，再到博客文章，常常能找到一些你希望稍后保存的好代码片段。...它可能是一些很好的算法实现，一个有用的脚本，或者一个如何在 Y 语言中执行 X 的例子。...SnippetStore 与其他产品的区别在于它的简单性。你可以按语言或标签组织整理代码片段，并且可以有多个文件片段。它不完美但足以完成我需要的工作。
Jekyll 中 Sass 的使用 什么是 Sass 关于 Sass 的优势 Usage Install Sass 目录结构 使用 include stylesheet to html...项目实例 参考文献 Jekyll 中 Sass 的使用 什么是 Sass Sass 是一群超级懒的人创造的 Css 快速编程工具 Sass（Syntactically Awesome Style...Sheets）是一个相对新的编程语言，Sass 为 web 前端开发而生，可以用它来定义一套新的语法规则和函数，以加强和提升 CSS。...通过这种新的编程语言，你可以使用最高效的方式，以少量的代码创建复杂的设计。它改进并增强了 CSS 的能力，增加了变量，局部和函数这些特性。...css 文件夹里面是 main 文件, 这里面的文件最终会生成到 _site/css 这个文件夹的名称可以自由更改, 反正最终只要保证你的 html 访问到对文件夹即可。
安装 Ruby 时，一开始因为不想装在C盘我就更改了安装路径，结果不知道出于什么原因，执行gem install jekyll指令时总会出错，最后还是老老实实安装在了默认安装路径。...顺便一提，我修改到最后才发现这个模板使用的代码高亮库 Prism.js 里面不支持 C++ 语言，作为一个学 C++ 的人突然感到非常绝望，于是又花了不少时间查资料学着重新配置 Prism。...（配置其实也挺简单的） 首先我们打开这个网址进行 Prism 的下载，在这里可以选择想要的主题、支持的语言和一些特性，选择完成后在网址最下方选择下载Prism.js和Prism.css，将.css覆盖到...在本地博客文件的根目录里打开命令行，使用命令rougify style github > css/syntax.css生成一个 github 风格的样式到css/syntax.css文件中。...同时，由于感觉代码字号太小，我还试着修改博客的字号大小，首先，根据head.html的信息，博客参数引用自hux-blog.min.css文件中: <!
第三步 - 创建新的开发站点 从我们的主目录，我们将使用Jekyll的new命令为子目录www中的站点创建脚手架： cd ~ jekyll new www 该jekyll new命令启动bundle install...它们是Jekyll用于创建静态站点的源文件。Jekyll依赖于特定的名称，命名模式和目录结构来解析不同的内容源并将它们组装到静态站点中。...的Web服务器 Jekyll内置的轻量级Web服务器专为支持站点开发而定制，它通过监视目录中的文件并在保存更改时自动重新生成静态站点。...当我们调用时jekyll serve，Jekyll将配置文件和内容文件解析为新目录，_site开始提供该_site文件夹中的内容： ... ├── 404.html ├── about.md ├── _...一旦保存对帖子或页面的更改，静态站点将自动重建，因此不要直接对_site文件夹中的文件进行更改。
前言 Jekyll 是一款采用 Ruby 语言编写的、非常方便简单又功能强大的静态站点生成器，适合于搭建个人博客、静态网站等。...功能需求 原有的 Rouge 代码高亮支持的语言种类较少、代码主题有限； 由于主题的文章模板限制了文字宽度在适合阅读的 30 字左右，图片尺寸相应也受到了限制，无法放大和集中观看； 主题提供的首页是文章卡片...实现 代码高亮 Jekyll 代码高亮可以使用 Pygments、Rouge、Prism、Highlight JS等工具实现，据说大部分的高亮博客中基本上都是使用 Pygments。...Rouge Rouge 是 Jekyll 也是 H2O 主题默认的代码高亮工具，支持的语言与其他工具相比都要少一些。...gist 代码片段服务。
想象一下，只要做很少或没有复杂的工作，仍然有网站: 与动态的对手相比，它们的速度快得惊人。 需要更少的维护。 具有高水平的安全性。 非常适合简单的网站，如作品集。 ?...这可能是一个困难的过程，当您打算进行更改时，许多问题会浮出水面，而扩展不是您所期待的。 Gatsby、Hugo和Jekyll是最受欢迎的静态站点生成器中的三种，它们受欢迎的原因有很多。...Jekyll也使用Sass，这对于喜欢CSS预处理器的开发人员来说非常重要。 由于Jekyll有许多开发人员为其做出贡献，所以您可以找到一个插件来实现几乎任何您想要实现的功能。...优点 设置和部署Jekyll是一个简单的过程。 它有一个巨大的开发者社区——你可以找到帮助你的人。 这里有教程和全面的文档。 它使用了易于学习的液态模板语言。...Jekyll是伟大的搜索引擎优化(SEO)。 大量的插件可用。 缺点 为Windows用户设置可能很困难——Jekyll需要一个Ruby环境。 杰基尔在建筑工地的时候速度很慢。
github pages 一直想添加代码高亮 highlighter ，基于 jekyll 3.0 的 rouge 终于搞定了： ?...下载代码高亮库 在 cmd 中输入： rougify style monokai.sublime > rouge.css 可以下载 rouge.css 出来，将这个 css 文件放到 github pages...项目中存放 css 的目录下，并在 html 中引用这个库，请自行更改引用的路径： css/rouge.css" rel="stylesheet"/> 配置文件...背景色为白色，字段显示不出来，所以我把 rouge.css 的背景色改成了黑色，在 rouge.css 最后面添加如下代码： div[class="highlight"] > pre > code[class...，可以在我的 github pages 代码中查看具体的详情
---- 在 Jekyll 中使用 Rouge 语法高亮插件 Jekyll 中的 __config.yml 文件记录了 Jekyll 的最核心配置。...其中，markdown 字段的值表示使用哪一款插件来将 Markdown 文本转换为 HTML 页面结构。 GitHub 推荐使用的 Jekyll 的 Markdown 插件为 kramdown。...Rouge 支持的语言可以前往此处查看：Rouge 生成 Rouge 语法高亮样式 当然，以上配置只是告诉 kramdown 转换引擎在转换 Markdown 为 HTML 的时候，使用 rouge 格式的样式...assets/css/syntax.css 文件中： $ rougify style github > assets/css/syntax.css 别忘了在你的 中把这份 css 文件加进去哦...于是我尝试了一些，并贴出了我的 C# 代码在 Rouge 自带语法高亮主题下的效果。 一般来说很难找到一种语法高亮适用于各种语言，所以选择的时候推荐选一个差不多的，然后再慢慢改。
Jekyll 会自动将此目录中的 Markdown 或 HTML 文件处理为文章内容，并根据配置生成静态页面。 _layouts：存放布局文件。...布局文件用于定义网站的整体结构和模板，可以被文章或页面引用。 _includes：存放可复用的片段文件，这些片段可以在布局或其他页面中包含，减少重复代码。...所有放置在 _posts 中的文件必须按照命名规则命名（如 YEAR-MONTH-DAY-title.md），Jekyll 会根据这些文件的 Front Matter（前置数据）自动生成静态页面。...如果你希望其他目录的内容也能像 _posts 中的文章一样生成并通过 URL 访问，可以使用以下方法： 使用普通文件夹：将文件夹命名为不带下划线的名称（如 pages），这样 Jekyll 会将该目录及其内容直接复制到生成的站点中...通过正确配置 _config.yml 和使用 Jekyll 的集合功能，可以实现更多自定义需求，为站点提供更大的灵活性和控制力。
不过由于使用的是 OKAIDIA 高亮主题，所以有些段落中的格式化字段显示上有些问题。这里，仍然采用默认主题，并且扩增到 Prism.js 支持的所有编程语言类型。...效果可以从前一句的 OKAIDIA 字段和下面即将出现的代码片段看出。...但是如果直接去掉版权保护又不大合适，于是新增代码复制功能。当使用如下所示代码片段右上角的复制按钮时，代码会被复制到粘贴板，且不包含版权保护文字，可以放心直接使用。...另外，为了减少一些第三方 CSS 样式的请求数，利用自动构建工作流将固定的第三方 CSS 样式文件合并并压缩为 plugins.min.css 文件。...app.min.css 仍为多个自编写 CSS 样式文件的合并压缩。
关于jekyll其他一些命令的用法如下: $ jekyll build # => 当前文件夹中的内容将会生成到 ./_site 文件夹中。...$ jekyll build --destination # => 当前文件夹中的内容将会生成到目标文件夹中。...$ jekyll build --watch # => 当前文件夹中的内容将会生成到 ./_site 文件夹中， # 查看改变，并且自动再生成。...它的概念其实就是：你用你最喜欢的标记语言来写文章，可以是 Markdown, 也可以是 Textile, 或者就是简单的 HTML, 然后 Jekyll 就会帮你套入一个或一系列的布局中。...你可以选择自己开发一套，也可以直接选择已有的，然后自己再更改css布局形成自己的。jekyll主题在这里，你可以选择到你自己喜欢的主题。
前言 Jekyll 生成目录的方案 第一种方案 第二种方案 第三种方案 实践 布局 目录生成 自适应 最终代码 参考资料 前言 Jekyll 与 Hexo 不同之处有很多，其中一处是在文章页面中不支持原生...Jekyll 生成目录的方案 如参考资料 1 中所提到的，如果想要在 Jekyll 中实现文章目录，有三种不同的方案可供选择： 第一种方案 利用完整的标签来生成静态目录，可以看到在本文的开头就是这样的一个实例...目录生成 目录生成这里直接采用的是上述的第三种方案。具体在 post 模板页使用 toc 模块的代码如最后所示。...自适应 为了实现目标二，这里采用了最简单的 CSS 媒体查询，即在平常 PC 端宽屏时采用如下 common.sass 中的样式。...具体实现如最终代码 common.sass 和 layout.sass 所示。在没有 sass 编译环境下，此处的 sass 代码可以取出转换为 css 使用。 最终代码 <!
VS Code 扩展为您的代码片段着色 07、Bracket Pair Color DLW Bracket Pair Color DLW VS Code 扩展，自动为某些字符着色，以帮助开发人员确定一段代码的嵌套深度...Beautify 是另一个可靠的代码“美化器”，它通过最小化代码中的干预来检查和格式化您的代码。您可以使用它来格式化以任何语言轻松编写的代码。...它有一个易于使用的错误修复界面，可以通过右键单击代码编辑器中突出显示的问题来访问该界面。它检查多种语言，使您能够确保您的代码在任何语言中都没有错误。...JavaScript 代码片段是预构建的代码片段，您可以轻松地将其包含在代码中。它还支持特定的 JavaScript 库和框架，例如 Angular、Vue.js 和 Node.js。...Emmet 支持：它为 HTML 和 CSS 生成速记符号，以帮助您编写简洁的语法并将其扩展为完整的 HTML 或 CSS 代码，只需敲击几下。
于是我希望做一个点击即放大的功能。 ---- 下面就是一张可点击放大的图片，你可以点击试试！当然，我期望的效果是自动对所有博客中的图片生效。 ?...▲ Fluent Design App Header 创建一个用于放图片的 HTML 节点 如果你是普通的 HTML 网页，可以将下面的片段放入到你的页面中。...为图片的 HTML 节点添加 CSS 样式 .image-cover-modal { display: flex; align-items: center; justify-content...设计的简化版本 如果你使用 Jekyll 搭建静态网页，那么只需要修改 3 个地方： 在 main.css 中添加前面的 css 片段。...在你想要添加放大图片的页面布局（例如 post.html）中添加 {% include clickable-image.html %}。
关于jekyll其他一些命令的用法如下: $ jekyll build # => 当前文件夹中的内容将会生成到 ./_site 文件夹中。...$ jekyll build --watch # => 当前文件夹中的内容将会生成到 ./_site 文件夹中， # 查看改变，并且自动再生成。...它的概念其实就是：你用你最喜欢的标记语言来写文章，可以是 Markdown, 也可以是 Textile, 或者就是简单的 HTML, 然后 Jekyll 就会帮你套入一个或一系列的布局中。...你可以选择自己开发一套，也可以直接选择已有的，然后自己再更改css布局形成自己的。jekyll主题在这里，你可以选择到你自己喜欢的主题。...下载下来，改改css，或者借用一下，就会有很漂亮的blog就出炉了。
完成开发后只需将代码部署到主机或推送至 Git 仓库自动执行持续集成/交付过程。...此外，Hugo 还具有以下关键特性： 强大资源管道：包含 CSS 和 JavaScript 打包功能 (支持 Sass 编译)，图像处理工具 (调整尺寸、裁剪旋转)、EXIF 数据抽取； 多语言支持：支持多国语言翻译...广泛兼容性：不仅 Hexo 可以完美适配于绝大多数操作系统，并且还提供对常见标记语言 (如 Markdown) 和第三方插件 (如 Octopress) 等格式/工具库进行全面支持。...这使得使用 Hexo 的体验变得非常灵活便利。 完善文档资料：在官方网站上提供详尽清晰易懂并附带示例代码说明书籍，让初学者也能轻松上手。...多样化支持：eleventy 支持多种模板语言 (如 HTML、Markdown、JavaScript 等)，让开发者有更大灵活度来选择适合自己需求和喜好的方式进行编码。
一、使用jekyll服务搭建 1.1 安装ruby以及ruby相关工具(DevKit) 由于jekyll是基于ruby语言开发的，因此我们需要安装ruby以及ruby相关的工具(DevKit)。...，文章的日期和标记语言后缀与文章的标题的独立的。...在本地创建ssh key ssh-keygen -t rsa -C "yuzhongzi91@sina.com" //这里以我的邮箱为例子，自行替换 将公钥中的内容复值到github中的ssh keys...进入主页，然后fork至自己的仓库下 进入自己github主页，找到刚才的那个仓库，然后点击settings，更改名称，格式为你的账户名.github.io，例如我的就叫Rynxiao.github.io...更改仓库中的config.yml文件，换成自己的信息。
Web LLM 转载自三人行AI：WebLLM——一款将大语言模型聊天引入浏览器的开源工具 WebLLM 是一个模块化且可定制的 JavaScript 包，可以直接将语言模型聊天引入浏览器，并通过硬件加速...以下代码片段展示了在网页上生成流式响应的简单示例。您可以查看 examples/get-started[2] 以查看完整示例。...WebLLM 包的两个元素使得支持新模型和权重变体成为可能： •model_url：包含模型构件的 URL，如权重和元数据。...WebLLM 包是为 MLC LLM[8] 设计的 Web 运行时。...ii.按照官方指南安装 jekyll。如果您使用 nextjs（参见示例中的 next-simple-chat），则不需要此包。iii.通过命令安装 jekyll-remote-theme。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
腾讯会议
云直播
对象存储
