Jekyll 中 Sass 的使用 什么是 Sass 关于 Sass 的优势 Usage Install Sass 目录结构 使用 include stylesheet to html...项目实例 参考文献 Jekyll 中 Sass 的使用 什么是 Sass Sass 是一群超级懒的人创造的 Css 快速编程工具 Sass（Syntactically Awesome Style...比 Css 好玩 Usage Install Sass Jekyll 3 已经自带 Sass 编译器了, 不需要额外安装 目录结构 . | - _sass | - _typography.scss...这部分文件写的时候上方要加 YAML header: 最顶上的两行横杠不能删除, 这个是为了让文件按照 Jekyll 标准进行读取 使用 _sass/test.scss .content { height.../jekyll-sass-converter 参考文献 Using Sass with Jekyll Jekyll Docs How to use Sass with Jekyll (Bootstrap
在知乎上看到一些相关的内容，于是选择了在github上用jekyll搭建博客。...执行下面的语句安装 image.png 安装结束画面 image.png 至此jekyll就已经安装完毕了，后续就是个性化的自己设定了。...再次启动服务器成功 image.png 访问 http://localhost:4000/ image.png 详细文章页面 image.png 后续 整个安装过程参考了jekyll官网，注意jekyll...jekyll中文网 http://jekyllcn.com, jekyll英文网 http://jekyllrb.com jekyll中的css是用sass写的，当然直接在_sass/_layout.scss...注意，在github上面好像不支持rouge，所以要push到github上时，我将配置文件_config.yml中的代码高亮改变为highlighter: pygments就可以了 博客默认是没有评论系统的
Please downgrade or upgrade to newer version (if available) or use the second method described above....installed sass-3.5.5 Fetching: jekyll-sass-converter-1.5.2.gem (100%) Successfully installed jekyll-sass-converter...ri documentation for sass-3.5.5 Parsing documentation for jekyll-sass-converter-1.5.2 Installing ri...documentation for jekyll-sass-converter-1.5.2 Parsing documentation for ruby_dep-1.5.0 Installing ri..., sass, jekyll-sass-converter, ruby_dep, listen, jekyll-watch, kramdown, liquid, mercenary, forwardable-extended
前言 Jekyll 生成目录的方案 第一种方案 第二种方案 第三种方案 实践 布局 目录生成 自适应 最终代码 参考资料 前言 Jekyll 与 Hexo 不同之处有很多，其中一处是在文章页面中不支持原生...这种方法的好处是不需要修改什么复杂的模板或者添加什么样式，Github Pages 也默认支持这种方式。... 采用新增 jekyll 模板的方式来支持自动生成目录。...布局 从目标一来看，其实在大部分的静态博客主题中都是有这样的功能的（PS：可能 Jekyll 是个例外，原生只支持静态目录）。...具体实现如最终代码 common.sass 和 layout.sass 所示。在没有 sass 编译环境下，此处的 sass 代码可以取出转换为 css 使用。 最终代码 <!
sass-3.5.1 Fetching: jekyll-sass-converter-1.5.0.gem (100%) Successfully installed jekyll-sass-converter...-1.5.0 Installing ri documentation for jekyll-watch-1.5.0 Parsing documentation for sass-listen-4.0.0...documentation for sass-3.5.1 Parsing documentation for jekyll-sass-converter-1.5.0 Installing ri documentation...for jekyll-sass-converter-1.5.0 Parsing documentation for colorator-1.1.0 Installing ri documentation..., sass-l isten, sass, jekyll-sass-converter, colorator, public_suffix, addressable, jekyll after 18 seconds
到 码云 官网群问使用这个搭建博客，百度收录吗？也没有人回应。如果不收录我没必要用了就，是吧。钱花了，事没办！...Use --watch to enable. - 编译好后看到一个 `_site` 的文件夹，这里就是我们的静态博客内容。 ### 4....Cleaner: Nothing to do for .sass-cache....Use --watch to enable....毕竟是一个只能支持 PHP、ASP的虚拟机。 从没有那件事情是可以轻轻松松的，在 天灾人祸 来临的时候，能帮你抵挡的都是你日积月累的能力。就像；是时候展示真正的技术了！
Sass 的方案来自动化前端构建工作流。...不得不说，这个方案还是很不错的，只是随着 Gulp 和 Node-Sass Sass 版本的更新，对 NodeJS 环境及其他依赖库都有一些要求。...v3.0.2 gulp-concat v2.6.1 node-sass v7.0.0 sass v1.51.0 使用方法 初始化 方式一：从模板新建博客 为了方便用户使用 H2O-ac 主题，特别提供了...如下图所示，访问 H2O-ac 可以看到如下的 Use this template 按钮，点击该按钮即可用 H2O-ac 主题创建自己的博客代码仓库。...(2021年12月26日更新) 现已支持使用 gem 直接切换主题 jekyll-theme-h2o-ac。同时，也推出了一键式构建工具 easy-to-h2o-ac，详细可以见项目主页。
Gatsby还支持GraphQL，这意味着数据查询变得更加容易。由于有了GraphQL, Gatsby可以生成能够访问和利用来自不同来源的数据的站点。...它支持GraphQL。 大量的插件都是可用的——谈谈庞大的用户社区的好处吧。 解释性教程不难找到，文档也很棒。 缺点 使用Gatsby需要大量的JavaScript、React和GraphQL知识。...不支持XML作为数据文件类型。但是，支持YAML、JSON和CSV。 变身怪医（Jekyll） Jekyll由Tom Preston-Werner在2009年发布，是这个列表中最老的静态站点生成器。...Jekyll也使用Sass，这对于喜欢CSS预处理器的开发人员来说非常重要。 由于Jekyll有许多开发人员为其做出贡献，所以您可以找到一个插件来实现几乎任何您想要实现的功能。...有什么问题吗?你认为还有什么静态网站生成器可以与这三种匹敌?你可以在评论区分享你的想法。 谢谢大家关注，转发，点赞和点在看。
Please downgrade or upgrade to newer version (if available) or use the second method described above....installed sass-3.5.6 Fetching: jekyll-sass-converter-1.5.2.gem (100%) Successfully installed jekyll-sass-converter...ri documentation for sass-3.5.6 Parsing documentation for jekyll-sass-converter-1.5.2 Installing ri...documentation for jekyll-sass-converter-1.5.2 Parsing documentation for ruby_dep-1.5.0 Installing ri..., sass, jekyll-sass-converter, ruby_dep, listen, jekyll-watch, kramdown, liquid, mercenary, forwardable-extended
既然大家有需求，那么 Octopress 也要安排上~ 云开发（CloudBase）是一款云端一体化的产品方案 ，采用 serverless 架构，免环境搭建等运维事务 ，支持一云多端，助力快速构建小程序...云开发静态网站托管支持通过云开发SDK调用服务端资源如：云函数、云存储、云数据库等，从而将静态网站扩展为全栈网站。...sass cp -r .themes/classic/sass/. sass mkdir -p source/_posts mkdir...Use --watch to enable. 如果构建没有报错，你就可以选择将构建结果 public 部署到你的服务器。...Use --watch to enable.✔ 您已登录，无需再次登录！
github.com/imathis/octopress.git octopress cd octopress gem install bundler rbenv rehash # If you use...config.yml #站点的配置文件 ├─ public/ #在静态编译完成后的目录,网站只需要这个目录下的文件树 ├─ _deploy/ #deploy时候生成的缓存文件夹,和public目录一样 ├─ sass...└─ javascripts/ #js文件目录 ② 一些配置内容 关于如何配置Octopress 关于如何创建新的page或者post以及本地预览 关于如何修改主题和默认的样式 Octopress支持的第三方主题下载和预览网站...另外，对于这里提到的升级问题，可以干脆直接删除data-title] 最有用的资料总能在这里找到：Octopress的官方文档 ③ 关于Jekyll Octopress是基于Jekyll的，所以对Jekyll...有一定的了解是很有必要的，Jekyll主页中记录了Jekyll的方方面面，最好是了解下Directory Structure，Configuration，Writing Posts，Creating Pages
此外，Hugo 还具有以下关键特性： 强大资源管道：包含 CSS 和 JavaScript 打包功能 (支持 Sass 编译)，图像处理工具 (调整尺寸、裁剪旋转)、EXIF 数据抽取； 多语言支持：支持多国语言翻译...jekyll/jekyll Stars: 46.9k License: MIT Language: Ruby Jekyll 是一个用 Ruby 编写的博客静态网站生成器。...简单易用：Jekyll 不会给用户带来不必要的复杂性和配置，它只做你告诉它去做的事情。 高度可定制化：使用 Jekyll，您可以根据自己的需求轻松地创建个人、项目或组织网站，并对其进行完全控制。...Markdown 和 Liquid 模板支持：通过渲染 Markdown 和 Liquid 模板，Jekyll 可以将您提供的内容转换为完整且静态化的可以直接托管在 Apache、Nginx 或其他 Web...多样化支持：eleventy 支持多种模板语言 (如 HTML、Markdown、JavaScript 等)，让开发者有更大灵活度来选择适合自己需求和喜好的方式进行编码。
-- IE 支持通过特定的 标签来确定绘制当前页面所应该采用的 IE 版本。除非有强烈的特殊需求，否则最好是设置为 edge mode，从而通知 IE 采用其所支持的最新的模式。...标准格式化用两个空格来代替制表符（tab），为了代码的易读性在每个声明块的左花括号前添加一个空格，为每条声明语句的 : 后应该插入一个空格，且在每一条语句和声明后建议加上 ‘;’。...Less 类似的 CSS 预处理器进行编译,通过 Rails、Jekyll 或其他系统中提供过 CSS 文件合并功能) 媒体查询（Media query）的位置放在尽可能相关规则的附近。...Less 和 Sass 中避免非必要的嵌套; 选择器要尽可能短，并且尽量限制组成选择器的元素个数，建议不要超过 3 。...声明顺序: Positioning : 定位 Box model : 模型 Typographic : 字体颜色 Visual : 背景边框 Misc : 其他 基础实例: /* Use link
(See full trace by running task with --trace) 解决： bundle exec rake 用上面的语句替代 rake 执行命令 第二个: * * Invoke...generate (first_time) * * Execute generate # # Generating Site with Jekyll Unchanged sass/screen....后面必须要有空格 第三个： D:\Dray\U\Git\MyOctopressBlogTest>bundle exec rake preview Starting to watch source with Jekyll
我们知道，Github Page 默认支持的也是 Jekyll，而非 Hexo、Hugo等静态站点生成器。...Rouge Rouge 是 Jekyll 也是 H2O 主题默认的代码高亮工具，支持的语言与其他工具相比都要少一些。...如下所示，创建新文件 archives.html 和修改 dev/sass/common.scss 文件： <!...由于 Markdown 语言解析器对 Markdown 标准支持的不同，可能不支持 LaTex 公式，本站所使用的主题原来就尚未对 Markdown 公式或者 LaTex 公式进行支持。...参考资料 让 Jekyll 支持 LaTex 数学公式（MathJax v3） Jekyll 实现文章阅读耗时与字数统计 Jekyll 中如何做中文字数统计 版权声明：如无特别声明，本文版权归 仲儿的自留地
webpack parcel gulp 生态的区别 babel 一般不会解析模块，也就是一般仅做代码预处理，而不会改变文件结构，也对 require、import 语句不敏感。...webpack / parcel 主要就是解决模块化打包问题，因为浏览器还不支持（现在部分支持 type="module"）。...原因就是构建组件的代码太原始，冗余的代码没有删除，甚至直接引用的 SASS 代码仍然保留，更危险的是带上了一些特殊 webpack loader 才支持的语法。...难道组件开发就不能获得与项目开发一样的体验吗？...实际案例 我们拿支持 typescript、sass、css-modules、worker-loader 的场景作为案例。
css-loader 在 import 语句（在我们的示例中为app.css）中读取引用的 CSS 文件并解析成 JavaScript 代码。...安装插件： yarn add mini-css-extract-plugin -D 本插件会将 CSS 提取到单独的文件中，为每个包含 CSS 的JS文件创建一个 CSS文件，并且支持 CSS 和 SourceMaps...React.StrictMode> , document.getElementById("root") ); 可以看到 import 语句跟原来的略有不同...配置 Sass 接下来我们看看如何配置 Sass，其实与 Less 的设置方式是类似的。 如果你想在项目中使用Sass，那么我们就需要sass-loader这个工具。...这样以来，我们的项目环境就集成 css、less 与sass，同时还支持css module。
GitHub Pages 是一个静态网站托管服务，直接从github仓库托管你个人、公司或者项目页面 ，并且不需要你写任何后端语言来支持。...-29-why-every-programmer-should-play-nethack.md | └── 2009-04-26-barcamp-boston-4-roundup.md ├── _sass...顺便一提，我修改到最后才发现这个模板使用的代码高亮库 Prism.js 里面不支持 C++ 语言，作为一个学 C++ 的人突然感到非常绝望，于是又花了不少时间查资料学着重新配置 Prism。...（配置其实也挺简单的） 首先我们打开这个网址进行 Prism 的下载，在这里可以选择想要的主题、支持的语言和一些特性，选择完成后在网址最下方选择下载Prism.js和Prism.css，将.css覆盖到...参考资料 本次博客的搭建主要参考了以下内容，感谢作者们~ 基于Jekyll搭建个人博客 jekyll-theme-H2O博客主题 个人网站的搭建（基于GitHub和Jekyll主题 ） Jekyll +
Jekyll是一个用Ruby编写的静态站点生成器，支持博客并与Github页面整合。因为Github只负责托管，这种设置使数据分析共享和可视化变得简单。...运行Jekyll服务器。...bundle exec jekyll serve --host=0.0.0.0 [jekyll_first_post.png] 注意启动Jekyll服务器后，会有一个新_site文件夹。...使用CDN支持MathJax 内容分发网络（CDN）是在网站上添加功能而无需下载其他软件的好方法。本节将介绍如何创建使用自定义标题的帖子。...default.html │ ├── home.html │ ├── page.html │ └── post.html ├── LICENSE.txt ├── README.md └── \_sass
Jekyll不在考虑之列，因为我对ruby不熟并且没有兴趣。以前玩过Jekyll，感觉还是太折腾了。特别是国内还得换源什么的。...比如Hugo很难支持把转为目录，只能固定地给所有文章开头加目录。...顺便学了下用sass来写css，其实和以前less差不太多。只不过bootstrap开始转用sass了而且似乎现在less并没有sass活跃。...添加 MathJax/KaTex 支持 MathJax和KaTex主要用来用Latex写公式。 这个在Hexo里很方便，有人写了插件，安装就行了。但是Hugo就得自己集成了，还好反正不困难。...然后我的Blog就支持公式了。并且我把以前一些文章的内容改成了公式。好看多了。 代码高亮 原先我是写了Wordpress插件WP-Code-Highlight.js。
领取专属 10元无门槛券
手把手带您无忧上云
