Hexo-theme-Fluid博客主题 v1.8.1 源码下载

来源:脚本之家  责任编辑:小易  

五一之前就想写一篇关于Vuepress的文章,结果朋友结婚就不了了之了。 记得最后一定要看注意事项! Vuepress介绍 官网:https://vuepress.vuejs.org/ 类似hexo一个极简的静态网站生成器,用来写技术文档不能在爽。当然搭建成博客也不成问题。 Vuepress特点 响应式,也可以自定义主题与hexo类似 内置markdown(还增加了一些扩展),并且可以在其使用Vue组件 Google Analytics 集成 PWA 自动生成Service Worker 快速上手 安装 初始化项目 yarn init -y # 或者 npm init -y 安装vuepress yarn add -D vuepress # 或者 npm install -D vuepress 全局安装vuepress yarn global add vuepress # 或者 npm install -g vuepress 新建一个docs文件夹 mkdir docs 设置下package.json { "scripts": { "docs:dev": "vuepress dev docs", "docs:build": "vuepress build docs" } } 写作 yarn docs:dev # 或者:npm run docs:dev 也就是运行开发环境,直接去docs文件下书写文章就可以,打开http://localhost:8080/可以预览   构建 build生成静态的HTML文件,默认会在 .vuepress/dist 文件夹下 yarn docs:build # 或者:npm run docs:build 基本配置 在 .vuepress 目录下新建一个 config.js ,他导出一个对象 一些配置可以参考官方文档,这里我配置常用及必须配置的 网站信息 module.exports = { title: '游魂的文档', description: 'Document library', head: [ ['link', { rel: 'icon', href: `/favicon.ico` }], ], } 导航栏配置 module.exports = { themeConfig: { nav: [ { text: '主页', link: '/' }, { text: '前端规范', link: '/frontEnd/' }, { text: '开发环境', link: '/development/' }, { text: '学习文档', link: '/notes/' }, { text: '游魂博客', link: 'https://www.iyouhun.com' }, // 下拉列表的配置 { text: 'Languages', items: [ { text: 'Chinese', link: '/language/chinese' }, { text: 'English', link: '/language/English' } ] } ] } } 如图:   侧边栏配置 可以省略 .md 扩展名,同时以 / 结尾的路径将会被视为 */README.md module.exports = { themeConfig: { sidebar: { '/frontEnd/': genSidebarConfig('前端开发规范'), } } } 上面封装的 genSidebarConfig 函数 function genSidebarConfig(title) { return [{ title, collapsable: false, children: [ '', 'html-standard', 'css-standard', 'js-standard', 'git-standard' ] }] } 支持侧边栏分组(可以用来做博客文章分类) collapsable是当前分组是否展开 module.exports = { themeConfig: { sidebar: { '/note': [ { title:'前端', collapsable: true, children:[ '/notes/frontEnd/VueJS组件编码规范', '/notes/frontEnd/vue-cli脚手架快速搭建项目', '/notes/frontEnd/深入理解vue中的slot与slot-scope', '/notes/frontEnd/webpack入门', '/notes/frontEnd/PWA介绍及快速上手搭建一个PWA应用', ] }, { title:'后端', collapsable: true, children:[ 'notes/backEnd/nginx入门', 'notes/backEnd/CentOS如何挂载磁盘', ] }, ] } } } 如图:   默认主题修改 主题色修改 在 .vuepress 目录下的创建一个 override.styl 文件 $accentColor = #3eaf7c // 主题色 $textColor = #2c3e50 // 文字颜色 $borderColor = #eaecef // 边框颜色 $codeBgColor = #282c34 // 代码背景颜色 自定义页面类 有时需要在不同的页面应用不同的css,可以先在该页面中声明 --- pageClass: custom-page-class --- 然后在 override.styl 中书写 .theme-container.custom-page-class { /* 特定页面的 CSS */ } PWA设置 设置serviceWorker为true,然后提供Manifest 和 icons,可以参考我之前的《PWA介绍及快速上手搭建一个PWA应用 》 module.exports = { head: [ ['link', { rel: 'icon', href: `/favicon.ico` }], //增加manifest.json ['link', { rel: 'manifest', href: '/manifest.json' }], ], serviceWorker: true, } 部署上线 设置基础路径 在 config.js 设置base 例如:你想要部署在https://foo.github.io 那么设置base为 / ,base默认就为 / ,所以可以不用设置 想要部署在https://foo.github.io/bar/,那么 base 应该被设置成 "/bar/" module.exports = { base: '/documents/', } base 将会自动地作为前缀插入到所有以 / 开始的其他选项的链接中,所以你只需要指定一次。 构建与自动部署 用 gitHub 的pages或者coding的pages都可以,也可以搭建在自己的服务器上。 将 dist 文件夹中的内容提交到git上或者上传到服务器就好 yarn docs:build # 或者:npm run docs:build 另外可以弄一个脚本,设置持续集成,在每次 push 代码时自动运行脚本 deploy.sh #!/usr/bin/env sh # 确保脚本抛出遇到的错误 set -e # 生成静态文件 npm run docs:build # 进入生成的文件夹 cd docs/.vuepress/dist # 如果是发布到自定义域名 # echo 'www.example.com' > CNAME git init git add -A git commit -m 'deploy' # 如果发布到 https://<USERNAME>.github.io # git push -f git@github.com:<USERNAME>/<USERNAME>.github.io.git master # 如果发布到 https://<USERNAME>.github.io/<REPO> git push -f git@github.com:<USERNAME>/<REPO>.git master:gh-pages cd - 注意事项(坑) 把你想引用的资源都放在 .vuepress 目录下的 public 文件夹 给git仓库绑定了独立域名后,记得修改base 路径 设置侧边栏分组后默认会自动生成 上/下一篇链接 设置了自动生成侧边栏会把侧边栏分组覆盖掉 设置PWA记得开启SSL  以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。 您可能感兴趣的文章:Hexo已经看腻了,来手把手教你使用VuePress搭建个人博客浅谈vuepress 踩坑记基于vue-ssr的静态网站生成器VuePress 初体验基于VuePress 轻量级静态网站生成器的实现方法www.zgxue.com防采集请勿采集本网。

源码大小:121KB 源码语言:简体中文 源码类型:国产软件 源码授权:免费软件 更新时间:2020-07-29 15:42:28 源码类别:java源码 源码官网: 未知官方 网友评分:源码评分 应用平台:JavaScript

 Fluid是基于Hexo框架开发的一款Material Design风格的主题。

该主题相较于其他主题的优势:

1、优雅的颜值,使用Material Design风格突出层次感,但又不失简约,让用户能专注于写作;

2、提供大量定制化配置项,使每个用户使用该主题都能具有独特的样式;

3、响应式页面,适配手机、平板等设备,包括极端的分辨率都能轻松应对;

4、主题中少有的整合了LaTeX和mermaid的支持。

目前具有的功能特性:

1、图片懒加载

2、自定义代码高亮方案

3、内置多语言

4、支持多款评论插件

5、支持使用数据文件存放配置

6、自定义静态资源CDN

7、无比详实的用户文档

8、内置文章搜索

9、页脚备案信息

10、网页访问统计

11、支持LaTeX数学公式

12、支持mermaid流程图

13、音乐播放器

Fluid安装方法:

1. 搭建Hexo博客

如果你还没有Hexo博客,请按照Hexo官方文档进行安装、建站。

2. 获取主题最新版本

请优先下载 最新release版本,master分支无法保证稳定。

下载后解压到themes目录下并重命名为fluid。

3. 指定主题

如下修改Hexo博客目录中的_config.yml:

theme: fluid # 指定主题

language: zh-CN # 指定语言,可不改

4. 创建「关于页」

自v1.7.0开始,「关于页」需要手动创建:

$ hexo new page about

创建成功后,编辑博客目录下 /source/about/index.md,添加layout属性。

修改后的文件示例如下:

title: about

date: 2020-02-23 19:20:33

layout: about

---

这里写正文,支持 Markdown, HTML

下载地址如下:

网硕互联电信下载

港中数据电信下载

河南紫田网通下载

易阳网络电信下载

酷云中国电信下载

易阳IDC电信下载

群英网络电信下载

烽火云集电信下载

网盾科技电信下载

创梦网络电信下载

  安装  在博客根目录下执行如下命令。    Jacman 需要安装 Hexo 2.7 及以上版本,请先升级您的 Hexo 程序,再启用此主题。  启用  修改你的博客根目录下的_config.yml配置文件中的theme属性,将其设置为jacman。同时建议设置stylus属性中的compress值为true,会自动压缩 CSS 文件,hexo默认配置中不包含这一项,建议开启内容来自www.zgxue.com请勿采集。


  • 本文相关:
  • 如何使用 Jacman 主题
  • 超详细动手搭建一个VuePress 站点及开启PWA与自动部署的方...
  • 跪求好听的轻音乐。~= =、节奏感轻快让人舒服的
  • 网站首页源码下载asp源码php源码.net源码jsp源码软件开发脚本下载js框架网站地图网页游戏黑客源码数据库类其它源码整站系统博客程序留言聊天企业网站新闻文章ajax相关搜索链接文件管理交友会员上传下载投票调查框架模板整站系统新闻文章留言聊天博客系统贺卡图片ajax相关文件管理问答系统社区论坛上传下载整站系统控件组件新闻文章主机域名计数统计小偷采集电子商务学校班级 社区论坛上传下载投票调查blog程序留言聊天整站系统社区论坛上传下载投票调查数据管理jsp其它c#源码易语言源码delphi源码vb源码java源码其它菜单导航tab标签焦 点 图在线客服css特效相册代码flash特效批处理其它jqueryextjsprototypemootoolsajax/javascript其它框架主页源码下载软件开发java源码mallplus多租户商城系统源码 v1.0wecmdb 配置管理数据库系统 v1.4.4redis管理平台repoll v1.0screw数据库文档生成工具 v1.0.3feilong开发工具库 v3.0.8hexo博客主题junit4 jar包 java单元测试框架 v4.12 绿色免费版junit4 jar包 java单元测试框架 v4.12 绿色免费版下载publiccms开源java系统 v4.0.190312publiccms开源java系统 v4.0.190312下载若依后台管理系统 ruoyi v4.1若依后台管理系统 ruoyi v4.1下载qq 聊天机器人小薇(xiaov) v2.2.2qq 聊天机器人小薇(xiaov) v2.2.2下载jsh_erp 开源版j2ee进销存系统代码源码 v1.0.2jsh_erp 开源版j2ee进销存系统代码源码 v1.0.2下载javashop b2c开源电商系统 v6.3.2javashop b2c开源电商系统 v6.3.2下载examstack开源考试系统examstack开源考试系统下载因酷时代(inxedu)在线教育系统 v2.0.6因酷时代(inxedu)在线教育系统 v2.0.6下载jeewx 捷微微信管家平台 v4.1jeewx 捷微微信管家平台 v4.1下载找不到分享码?mallplus多租户商城系统源码 v1.0wecmdb 配置管理数据库系统 v1.4.4redis管理平台repoll v1.0screw数据库文档生成工具 v1.0.3feilong开发工具库 v3.0.8shopro商城(前端)系统源码 v1.0.6gblog-wx博客小程序源码 v1.0byopen(增强版dlfunctions库) v1.0guns-separation v1.1powerjob 分布式调度与计算框架 v3.2.1分享码的获取方法迅雷winrar v5c#源码易语言源码delphi源码vb源码java源码其它mallplus多租户商城系统源码 v1.0wecmdb 配置管理数据库系统 v1.4.4redis管理平台repoll v1.0screw数据库文档生成工具 v1.0.3feilong开发工具库 v3.0.8shopro商城(前端)系统源码 v1.0.6gblog-wx博客小程序源码 v1.0byopen(增强版dlfunctions库) v1.0guns-separation v1.1powerjob 分布式调度与计算框架 v3.2.1chrome
    免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved