分类目录归档：技术

Vue 引入预处理器

发表评论

Vue Cli3 默认的配置是不带 CSS 的预处理器的，需要自己引入。好在，引入的方法非常简单，只需要安装对应的依赖，会自动适配的。

SCSS/SASS

npm install -D sass-loader node-sass

LESS

npm install -D less-loader less

Stylus

npm install -D stylus-loader stylus

产品体验的优化

发表评论

在设计产品时，通过不同的方法，可以优化产品的体验。

比如，可以在界面中突出部分元素来让用户可以更好的使用。

不过，目前我看过的设计相关的图书不多，所以不敢在这个方面进行调整，所以考虑使用引导提示的方式进行优化。

我找到的可用的库:

https://introjs.com/ 付费

https://github.com/jwarby/jquery-pagewalkthrough 免费

https://pulsardev.github.io/vue-tour/

后续需要读的书：

  1. 别让我思考
  2. 设计中的设计

安装配置 nRFgo Studio 应用程序

发表评论

nRFgo Studio 是 Nordic 提供的针对其芯片的开发工具，你可以通过它来开发 nrf 芯片。

你只需要前往 ：
https://www.nordicsemi.com/Software-and-Tools/Development-Tools/nRFgo-Studio/Download#infotabs 下载安装文件。

下载到本地以后，执行安装，建议在安装的过程中，将设备连接到电脑上，这样在安装时会自动识别芯片，从而安装对应的驱动。

安装完成的效果

5c8f016f73bed

用 Netlify 来挂载你的 Gitbook 电子书

发表评论

Netlify 也是一家提供了静态页面托管的服务。

这样的服务目前有三家：Netlify、Github Pages、Now.sh

相比于 Github Pages ，由于比较新，所以还没有那么受关注，速度也还行。

Easy WP Book 使用的原本是 Github Pages，但是速度太慢，所以决定改用 Netlify。

netlify 相比于 Github Pages 来说，优势比较多，比如，支持多域名、支持自动的 Https 等。很方便。

配置时需要注意的是，gitbook 的环境中，默认是没有 gitbook 的，你需要自己安装。

命令截图。

所以，在 build command 里，填入如下内容：npm install -g gitbook-cli && gitbook install && gitbook build

并在 publish 目录填入 _book/ 即可。

Rails 遭遇 Error loading ‘sqlite3’ Active Record adapter

发表评论

很久没写过 Rails 了，最近也更新了 5.2.2 ，于是决定再看看。

使用 rails new 生成了一个新的项目，却未能成功跑起来。报错 Error loading ‘sqlite3’ Active Record adapter。

搜索后得知，原来是 新版的 Rails 项目中并未为 SQlite 设置版本导致的。

因此，你只需要将 gemfile 中的

gem 'sqlite3'
Code language: JavaScript (javascript)

修改为

gem 'sqlite3', '~> 1.3.6'
Code language: JavaScript (javascript)

重新 bundle install 即可。

WordPress 主题开发时应备的辅助函数

发表评论

在 WordPress 主题开发时，经常会用到 三目运算符 来判断 Options Framework 的返回值。因此，可以将其封装为一个函数进行调用。


function hf_config_echo($name, $default = '')
{
    $value = of_get_options($name);
    if ($value) {
        echo $value;
    } else {
        echo $default;
    }
}
Code language: PHP (php)

Options Framework 如何将菜单移动到顶级菜单？

发表评论

打开 inc/includes/class-options-framework-admin.php 文件，然后知道其中的 add_custom_options_page 方法，将其代码替换为如下代码

public function add_custom_options_page()
    {
        $menu = $this->menu_settings();
        switch ($menu['mode']) {
            case 'menu':
                // http://codex.wordpress.org/Function_Reference/add_menu_page
                $this->options_screen = add_menu_page(
                    $menu['page_title'],
                    $menu['menu_title'],
                    $menu['capability'],
                    $menu['menu_slug'],
                    array($this, 'options_page'),
                    $menu['icon_url'],
                    $menu['position']
                );
                break;
            default:
                // http://codex.wordpress.org/Function_Reference/add_submenu_page
                $this->options_screen = add_submenu_page(
                    $menu['parent_slug'],
                    $menu['page_title'],
                    $menu['menu_title'],
                    $menu['capability'],
                    $menu['menu_slug'],
                    array($this, 'options_page'));
                break;
        }
    }
Code language: PHP (php)

添加完成后，在你的主题的 functions.php 文件中添加如下代码：

function harvardchina_options_menu_filter($menu)
{
    $menu['mode'] = 'menu';
    $menu['page_title'] = 'Harvard 主题设置';
    $menu['menu_title'] = 'Harvard 主题设置';
    $menu['menu_slug'] = 'harvardchina-options';
    return $menu;
}
add_filter('optionsframework_menu', 'harvardchina_options_menu_filter');
Code language: PHP (php)

就可以实现将主题配置移动到顶级菜单。

reference：

https://gist.github.com/devinsays/884d6abe92857a329d99