在 Butterfly 主题的页脚养鱼
准备工作首先必须引入需要的 jquery 文件,网址为 https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js
再引入必要的鱼儿游动的 js 文件,网址为: https://cdn.jsdelivr.net/gh/xiabo2/CDN@latest/fishes.js
将以上两个文件下载并保存到 Hexo博客项目的 themes/butterfly/source/js/ 文件夹中。
编辑主题配置文件打开 _config.butterfly.yml , 找到 # Inject, 在 bottom 添加以上两个 js 文件的引用即可(也可以不下载而直接引入那两个文件).
123456789101112# Inject# Insert the code to head (before '</head>' tag) and the bottom (before '</body>' tag)# 插入代码到头部 </head> 之前 和 底部 </body> 之前 ...
使用 Element UI 和 Leancloud 的 Vue.js 项目开发(二) - 路由规划
项目演示地址:https://hujiyi.github.io/acme-world-web/
路由规划与实现本项目实现的是一个论坛网站,网站划分为三个部分:
前台用户界面:主要是论坛的主题;主题的详细内容及评论;
帐号管理界面:主要是注册、登录等功能;
后台管理界面:主要是主题的管理;评论内容的管理等功能;
创建对应的文件夹及文件分别创建以下三个文件夹:
src/views/home:用于存放前台用户界面的文件 ;
src/views/account:存放用户帐号相关的文件;
src/views/dashboard:存放后台管理界面的文件;
分别在以上三个文件夹各添加一个 Index.vue 文件,用于该模块的页面布局。
删除原有的两个视图文件: src/views/About.vue 和 src/views/Home.vue;
创建和删除完毕后的项目 views 文件夹下的文件结构如下图所示:
1234567└-- views |-- account | └-- Index.vue |-- dashboard | └-- In ...
使用 Element UI 和 Leancloud 的 Vue.js 项目开发(一) - 创建项目
项目演示地址:https://hujiyi.github.io/acme-world-web/
前提条件在创建项目前需要先安装下列应用程序
node.js
yarn (可选)
@vue/cli
Visual Studio Code (包含安装相应的扩展)
Git (可选)
创建项目包管理工具 npm 和 yarn npm 和 yarn 都是包管理工具, npm 是node.js自带的,yarn 需要额外安装。在使用一段时间之后,我现在比较喜欢使用 yarn, 至于优点,网上列出来的主要有这么几个:速度快、安装版本统一、输出信息更简洁等等。
所以在下面的操作过程中,基本上就按照自己的习惯使用yarn 来完成,如果自己不习惯这个命令的话,也可以自行使用相应的 npm 命令来操作。只要得到的结果一样就可以了。
Vue.js 2.x 和 Vue.js 3.x 的选择 Vue.js 3.x 的正式版发布已经有一段时间了,而且和 Vue.js 2.x 相比变化非常大,这就导致了现在很多和 Vue.js配套的库,特别是和 UI 有关的库大部分都还没有来得及未完成新版本的适配 ...
使用 Butterfly 主题 搭建 Github Pages 上的 Hexo 博客
安装前提安装 Hexo 需要先安装下列应用程序:
Node.js (Node.js 版本需不低于 10.13,建议使用 Node.js 12.0 及以上版本)
Git
安装 hexo cli1npm install hexo-cli -g
初始化博客项目
创建 hexo 博客项目文件夹: hujiyi.github.io
进入文件后, 打开 Git Bash 命令行窗口
输入命令执行初始化:hexo init
1$ hexo init
程序初始化过程如下所示:
1234567891011$ hexo initINFO Cloning hexo-starter https://github.com/hexojs/hexo-starter.gitINFO Install dependencieswarning hexo-renderer-stylus > stylus > css-parse > css > urix@0.1.0: Please see https://github.com/lydell/urix#deprecatedwarn ...
flutter introduction part II:使用Provider 的深浅色模式和多语言切换
上一节创建了项目,并通过 Intl 实现在项目的多语言国际化支持。但是还没有在项目提供多语言的切换功能。
这一节除了实现多语言的选择切换功能,还同时实现项目的深色、浅色主题切换,需要用过以下两个包:
Provider: Provider是 Google I/O 2019官方推荐的状态管理方式,是一套实现跨组件状态共享的解决方案。
shared_preferences : shared_preferences 是一个轻量级存储类,以键值对的形式保存设置,属性和数据。
准备工作在项目的 pubspec.yaml 文件中增加以下包依赖:
Provider的最新版本查询:https://pub.dev/packages/providershared_preferences的最新版本查询:https://pub.dev/packages/shared_preferences
123456789101112dependencies: flutter: sdk: flutter # 国际化 flutter_localizations: sdk: flutter cuper ...
flutter introduction part I:创建项目及多语言国际化支持
特别说明:Flutter SDK 1.22.5 及以上版本需要依赖 Git , 所以下面输入 flutter命令的时候,一般都是在 Git Bash 命令行窗口 中进行。
D:\sources\flutter_repos 是专门用于保存 Flutter 项目的文件夹。
创建项目在 D:\sources\flutter_repos(或其他用于保存 Flutter 项目的文件夹) 文件夹下鼠标右键,在弹出的快捷菜单中选择Git Bash Here 打开 Git Bash 命令行窗口
在打开的Git Bash 命令行窗口中输入命令: flutter create deep_sky_app
完整的命令执行过程如以下所示:
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293Lao ...
Visual Studio Code 中使用 flutter_intl 实现 Flutter 应用国际化
·Flutter Intl· 插件,包含用于处理国际化/本地化消息,日期和数字格式和解析,双向文本以及其他国际化问题。
安装 Flutter Intl 插件
在项目的 pubspec.yaml 文件中添加依赖:
123456dependencies: flutter: sdk: flutter # 国际化 flutter_localizations: sdk: flutter
初始化项目在Visual Studio Code中打开命令面板: View -> Command Palette…
在打开的命令面板中输入 flutter intl, 在下拉的命令项中选择:Flutter Intl: Initialze, 开始执行项目的初始化。
初始化执行成功后,会自动在 pubspec.yaml 末尾增加:
12flutter_intl: enabled: true
同时在 lib 文件夹下生成 generated 和 l10n 两个文件夹
generated包下的intl目录默认生成 messages_all.dart 和 messa ...
创建基于 Vuetify 和 leancloud 的 Vue.js 应用程序(二)
路由规划本项目在实现的是一个论坛网站,网站划分为三个部分:
前台用户界面:主要是论坛的主题;主题的详细内容及评论;
帐号管理界面:主要是注册、登录等功能;
后台管理界面:主要是主题的管理;评论内容的管理等功能;
修改路由文件打开文件:src/router/index.js, 编辑其内容如以下代码:
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788import Vue from 'vue';import VueRouter from 'vue-router';Vue.use(VueRouter);const routes = [ { path: '/', // 前台页面模块及其嵌套子路由 component: ...
创建基于 Vuetify 和 leancloud 的 Vue.js 应用程序(一)
假设各位的电脑已经安装好配置了相应的开发环境:
node.js
yarn
@vue/cli
Visual Studio Code
创建项目包管理工具 npm 和 yarn npm 和 yarn 都是包管理工具, npm 是node.js自带的,yarn 需要额外安装。在使用一段时间之后,我现在比较喜欢使用 yarn, 至于优点,网上列出来的主要有这么几个:速度快、安装版本统一、输出信息更简洁等等。
所以在下面的操作过程中,基本上就按照自己的习惯使用yarn 来完成,如果自己不习惯这个命令的话,也可以自行使用相应的 npm 命令来操作。只要得到的结果一样就可以了。
Vue.js 2.x 和 Vue.js 3.x 的选择 Vue.js 3.x 的正式版发布已经有一段时间了,而且和 Vue.js 2.x 相比变化非常大,这就导致了现在很多和 Vue.js配套的库,特别是和 UI 有关的库大部分都还没有来得及未完成新版本的适配。虽然以后肯定是会升级到 Vue.js 3.x,但就目前阶段来说,继续使用 Vue.js 2.x 来开发项目不失为一个 ...
在 Vuetify 中使用 vue-i18n 实现多语言国际化
安装 Vue I18n在项目(此前已经安装好 Vuetify )的控制台下输入命令:yarn add vue-i18n
安装的过程显示如以下:
123456789101112131415161718192021$ yarn add vue-i18n --registry https://registry.npm.taobao.orgyarn add v1.22.5[1/4] Resolving packages...[2/4] Fetching packages...info fsevents@2.1.3: The platform "win32" is incompatible with this module.info "fsevents@2.1.3" is an optional dependency and failed compatibility check. Excluding it from installation.info fsevents@1.2.13: The platform "win32" is i ...