给你的网站加一个2.5D悬浮小人

live2d-widget-model-chitose

我们平常访问某些网站的时候,会发现在网站上总是悬浮者一个可爱的小人.而且还可以跟用户进行各种互动(说话?).

一般这种小人都是通过js加载出来的, 搜索关键词网上有教程. 不过我今天在这里记录的是,如何添加2.5D互动小人

平台: hexo + hexo-plugins(live2d-widget-models)

同时也支持jekyll, wordpress, etc.

安装


sudo npm install --save hexo-helper-live2d

项目github地址

https://github.com/xiazeyu/live2d-widget-models

然后在_config.yml(hexo或者主题的都行)中添加


live2d:

  enable: true

  scriptFrom: local

  model:

    use: live2d-widget-model-wanko //使用的模型名,下面会详细讲

  display: //如果觉得默认定位不满意可在此微调,bottom

    position: right

    width: 150

    height: 300

	bottom:-30

  mobile:

    show: true

自定义模型的使用点我

hexo下现有模型的安装


npm install {packagename}

安装示例

📅 2019-10-28

遇到的一些问题

Imageio: ‘ffmpeg-linux64-v3.3.1’ was not found on your computer; downloading it now.

解决办法:

sudo add-apt-repository -y ppa:djcj/hybrid && sudo apt update && sudo apt install -y ffmpeg

我直接运行了,然后它自动下载安装了。

📅 2019-10-28
我的神奇笔记

唔,这个配色是我乱打然后筛选出来较为柔和的配色

<font

color="#616161"

id=“9116994572745c660f40296d7683c991cd273cca”>

字体色#616161

前景色:#EFEFEF
背景色:#FF6666
前景色:#EEEEEE
背景色:#55EF55
前景色:##E5E5E5
背景色:#554455
📅 2019-10-28

原项目代码类图

各类文件解析(按难度排序)

    <li><strong>Point (坐标类,使用经度,维度用来表示一个点)
    

Point.h

    <li>
    
    #  

    <li>
    
    pragma once class Point {  

    <li>
    
        public: Point(double longitude, double latitdue);  

    <li>
    
        bool operator == (Point & point);  

📅 2019-10-28

最开始,我就是用github-page部署博客的,刚开始的时候github-page是不支持自定义域名https的,所以你一定得用默认域名*.github.io才能使用https,要么嘛,你就放弃使用https。

那些不堪回首的博客迁移史

1. 最初的wordpress

刚开始的wordpres是放在我的服务器上的,而且还是与微信公众号对接好的(有相关插件),然后可以加很多牛逼的插件,完成一些很神奇的效果。我当时是装了蛮多插件的,比如:Jetpack全套啊,SMTP,All of SEO等等。好玩是好玩,但是对于我这种隔几天就要折腾一下服务器的。wordpress经常被我玩坏。然后开始寻找解决方案。

2. 后来的wordpress官网

wordpress的官网是支持托管网站的,而且免费。再加上怎么玩都不会坏。但是同时免费版也限制了很多功能。比如,自定义插件啦,自定义域名之类的。其实这都能够接受,最让我无法忍受的是学校的网络,访问起来特别慢。大约一个页面要5秒中左右才开始渲染。强迫症不能忍

3. 轻量的gitblog

这是一个好东西,也是这个让我接触到了page服务这种东西,有关gitblog的更多可以看我这篇文章使用gitblog搭建个人博客.md, 其实除了小众之外没什么别的不好。但是我那颗不甘平静的心依旧想要折腾。

4. 未配置成功的Jekyll

不知道是当时认知有限还是英语太差,总之我按着官网的教程没安装成功,再加上不太喜欢官网的主题,然后就放弃了。

5. 模仿大佬的github issue

一次偶然的机会,我发现有位大佬居然是用issue写博客的(现在才知道原来并不稀奇)

,读者一般都是github用户,评论交流起来简直不要太爽。按奈不住的我立马也这样做了。疯狂过后,就是一个人的寂寞。没有人看我不觉得奇怪,主要百度不收录哇。而且域名没在中国备案,很多事情都做不了,比如微信不能打开。

6. 新奇的hexo

我就不介绍了,有兴趣自行百度。到现在为止我还是用hexo的。

7. hexo的评论系统

最开始,用的是多说,后来下线了。

后来,用的是畅言,然后强制加广告了。

现在用的是,gitcomment,使用的是github帐号登录,缺点就是每个页面评论都要初始化。

听说Disqus不错,可是需要翻墙,不翻墙就要装个插件用精简版。

我就不改,先缓一缓。

8. hexo的托管平台选择

如前言

不过要注意有个坑,自定义域名的话,就是一定要在source文件夹中新建一个CHANME文件里面写上你的域名,不然就每次hexo d 都要设置一次。

9. hexo 的IDE选择

最开始我是用小书匠,不过写文章不错,写代码就不行。比如要改个样式什么的就非常麻烦。

后来用的是coding的webIDE,当时感觉描述很不错,事实上在网速好的情况下的确不错。但是一遇到网速不好的时候。写的代码就完全保存不了, 因为它会回退,会回退啊~

现在,用的是vs code写文章用小书匠,因为叼。

10. hexo的图床选择

用过一段时间github,后来感觉github页面放个图床会让人感觉不好。

现在用的是七牛云存储。

coding-page与github-page的优缺点

  • github百度不会爬,需要自己推送(也可以用cdn回源域名加速)

  • coding-page 短时间推送次数过多就会凉。

  • github只能设置一个域名,而且https只支持顶级域名

所以我的访问人数又要重新累计了。

待续

本文用作测试插件


var function(){

  //预计一大波人即将取关

  console.warn("You have been slained");

}

hexo-admin 测试中

📅 2019-10-28

IDEA下开发JavaFx Application

New > project > JavaFx Application

添加SceneBuilder

  1. 下载SceneBuilder
  1. file | setting > JavaFx > add path

设置自定义图标

primaryStage.getIcons().add(new Image("file:res/internet.png"));

打包生成exe

File | project structure > Artifacts > JavaFx >(class | title | Navite Bundle)

注意目录文件要能找到

事件绑定

fxml

onAction add

Java

添加函数

fx:id 对象属性修改

  1. 添加一个fxml成员变量
  1. 调用setText("");

我的代码

MainApp.fxml


<?xml version="1.0" encoding="UTF-8"?>



<?import javafx.geometry.Insets?>

<?import javafx.scene.control.Button?>

<?import javafx.scene.control.DialogPane?>

<?import javafx.scene.control.Label?>

<?import javafx.scene.control.TextArea?>

<?import javafx.scene.control.TextField?>

<?import javafx.scene.layout.FlowPane?>

<?import javafx.scene.layout.Pane?>

<?import javafx.scene.text.Font?>



<FlowPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="400.0" prefWidth="800.0" xmlns="http://javafx.com/javafx/8.0.121" xmlns:fx="http://javafx.com/fxml/1" fx:controller="cn.thinkmoon.CSMA_CD.MainApp">

<children>

    <Pane prefHeight="400.0" prefWidth="800.0">

        <children>

            <Button layoutX="154.0" layoutY="206.0" mnemonicParsing="false" onAction="#handleSendDataPackage" text="发送数据包">

                <font>

                    <Font size="14.0" />

                </font></Button>

            <Button layoutX="283.0" layoutY="206.0" mnemonicParsing="false" text="重置操作">

                <font>

                    <Font size="14.0" />

                </font></Button>

            <TextArea layoutX="500.0" layoutY="51.0" prefHeight="299.0" prefWidth="277.0" />

            <Label fx:id="host1SendNum" layoutX="43.0" layoutY="70.0" text="主机1所需发送的数据包数:">

                <font>

                    <Font size="17.0" />

                </font>

            </Label>

            <Label layoutX="43.0" layoutY="130.0" text="主机2所需发送的数据包数:">

                <font>

                    <Font size="17.0" />

                </font>

            </Label>

            <Label layoutX="52.0" layoutY="291.0" text="主机1">

                <font>

                    <Font size="18.0" />

                </font>

            </Label>

            <Label layoutX="410.0" layoutY="291.0" text="主机2">

                <font>

                    <Font size="18.0" />

                </font>

            </Label>

            <TextField layoutX="279.0" layoutY="71.0" />

            <TextField layoutX="279.0" layoutY="130.0" />

            <Label layoutX="292.0" layoutY="14.0" text="模拟以太网发送过程">

                <font>

                    <Font size="17.0" />

                </font>

            </Label>

            <Label layoutX="48.0" layoutY="327.0" style="-fx-border-width: 1; -fx-border-color: #218ada;" styleClass="tip" text="信道空闲" textFill="#218ada">

                <padding>

                    <Insets bottom="2.0" left="2.0" right="2.0" top="1.0" />

                </padding>

            </Label>

            <Label layoutX="406.0" layoutY="327.0" style="-fx-border-width: 1; -fx-border-color: #218ada;" styleClass="tip" text="信道空闲" textFill="#218ada">

                <padding>

                    <Insets bottom="2.0" left="2.0" right="2.0" top="1.0" />

                </padding>

            </Label>

            <TextField layoutX="114.0" layoutY="292.0" prefHeight="23.0" prefWidth="19.0" />

            <TextField layoutX="140.0" layoutY="292.0" prefHeight="23.0" prefWidth="19.0" />

            <TextField layoutX="170.0" layoutY="292.0" prefHeight="23.0" prefWidth="19.0" />

            <TextField layoutX="199.0" layoutY="292.0" prefHeight="23.0" prefWidth="19.0" />

            <TextField layoutX="226.0" layoutY="292.0" prefHeight="23.0" prefWidth="19.0" />

            <TextField layoutX="257.0" layoutY="292.0" prefHeight="23.0" prefWidth="19.0" />

            <TextField layoutX="283.0" layoutY="292.0" prefHeight="23.0" prefWidth="19.0" />

            <TextField layoutX="311.0" layoutY="292.0" prefHeight="23.0" prefWidth="19.0" />

            <TextField layoutX="340.0" layoutY="292.0" prefHeight="23.0" prefWidth="19.0" />

            <TextField layoutX="369.0" layoutY="292.0" prefHeight="23.0" prefWidth="19.0" />

        </children>

    </Pane>

      <DialogPane />

</children>

</FlowPane>

MainApp.java

📅 2019-10-28

技术介绍

Wepy

image

云开发

开发者可以使用云开发开发微信小程序、小游戏,无需搭建服务器,即可使用云端能力。

云开发为开发者提供完整的云端支持,弱化后端和运维概念,无需搭建服务器,使用平台提供的 API 进行核心业务开发,即可实现快速上线和迭代,同时这一能力,同开发者已经使用的云服务相互兼容,并不互斥。

目前提供三大基础能力支持:

  1. 云函数:在云端运行的代码,微信私有协议天然鉴权,开发者只需编写自身业务逻辑代码

  2. 数据库:一个既可在小程序前端操作,也能在云函数中读写的 JSON 数据库

  3. 存储:在小程序前端直接上传/下载云端文件,在云开发控制台可视化管理

安装WePy

WePY的安装或更新都通过npm进行。

如果你未安装过npm,你可能需要先安装npm


npm install wepy-cli -g

注: 我这使用的版本是

创建一个WePy项目

首先,查看一下项目模板


wepy list

他会在这里列出一些模板,你选择你喜欢的安装。

wepy init standard my-project

📅 2019-10-28

一说到搭建个人博客,大家一定是第一时间想到WordPress了吧?

其实使用WordPress非常的方便,实用性也非常高,如果不知如何搭建wordpress博客,

可以去隔壁Benny的学习日记(公众号)看教程。但是如果你只是想要一个简洁的博客文章页,那么你可以试着用一下gitblog

什么是markdown(md)文件

markdown是一种轻量级的标记语言,它允许人们使用易读易写的纯文本格式编写文档。唔,通俗点就跟HTML一样。约定一些特定的符号来决定它的显示形式。它相对于HTML的优势就是,简单,使作者将关注重点放在内容上。相信大家也经历过调CSS的绝望吧?

它的语法极其简单,语法内容:

我的简书

像我这篇文章就是md文件复制的。

了解gitblog 网址http://www.gitblog.cn

gitblog官网

github地址https://github.com/jockchou/gitblog

Gitblog是一个简单易用的Markdown博客系统,它不需要数据库,没有管理后台功能,更新博客只需要添加你写好的Markdown文件即可。 它摆脱了在线编辑器排版困难,无法实时预览的缺点,一切都交给Markdown来完成,一篇博客就是一个Markdown文件。 同时也支持评论,代码高亮,数学公式,页面PV统计等常用功能。 Gitblog提供了不同的主题样式,你可以根据自己的喜好配置,如果你想自己制作博客主题,也是非常容易的。 Gitblog还支持整站静态导出,你完全可以导出整站静态网页部署到Github Pages。

gitblog与WordPress的区别

  1. 数据库,gitblog只有文件,没有数据库。也就是说它不需数据库,这样做的优点是简洁,适合与那些网站内容修改频率不高博客。系统更轻量级,移植性高,还可以到全站导出为静态文件。然后把它们部署到类似于githubpage平台。

  2. 框架,gitblog是使用codeigniterhttp://codeigniter.org.cn

框架(一个小型的轻量级php框架)。WordPress是完全使用自己的设计思想,不依赖于主流框架,如果你了解框架的思想,如果你想好好学习,和修改开发博客源码,你可以选择使用前者。当然对自己足够自信,你可以去研究WordPress源码。

  1. 完善性,如果你只是想搭个稳定完善的个人博客,那么不建议你使用gitblog。如果你自己的diy,探索精神比较强,或者你是个简洁控,你可以试试gitblog。

如何配置安装gitblog

  1. 去github下载源码

  2. 安装Apache+php环境

  3. 解压到网站根目录

  4. 修改配置文件conf.yaml,文件说明[https://github.com/jockchou/gitblogdoc/blob/master/posts/gitblog/config.md]

(https://github.com/jockchou/gitblogdoc/blob/master/posts/gitblog/config.md)


url: / #域名地址

title: thinkmoon #站点名称

    subtitle: #副标题

    theme: quest #主题名

    enableCache: false #是否开启缓存

    highlight: true #是否开启代码高亮

    mathjax: false #数学公式支持

    katex: false #?

    youyan: #有言ID

    baiduAnalytics: #百度统计ID

    keywords: thinkmoon #网站关键字

    description: &gt;

        thinkmoon #网站描述

    version: 2.2

    author:

        name: 醉月思 #作者

        email: [email protected] #邮箱

        github: thinkmoon #github地址

        weibo: your-weibo #微博地址

        avatar:

    blog:

        recentSize: 5

        pageSize: 6

        pageBarSize: 5

        allBlogsForPage: false

    text:

        title: 介绍

        intro: &gt;

            本博客使用Gitblog搭建,

            wordpress博客请访问https://thinkmoonmagic.wordpress.com

    ```



   > 你可能需要修改的配置参数:

   

   ```yaml

    url: 修改成你的域名,http://yourdomain.com,注意最后没有杠。

    title: 修改成你的博客标题

    subtitle: 修改成你的副标题

    duoshuo: GitBlog采用多说评论框,你需要申请多说账号,并在这里填写你的多说ID

    baiduAnalytics: GitBlog采用百度统计,你需要申请百度统计账号,在这里填写你的统计Key

    author:修改为你个人的信息即可

    如果你不需要评论和统计功能,删除duoshuo和baiduAnalytics这两荐即可。其他信息,可根据浏览博客页面的效果进行修改调整。

    ```



5.访问,OK了





### 编写一篇博客



> 在gitblog里面,一篇文章就是markdown文件。所有的文章都在/blog目录下,你把你写好的md文件放到这个文件夹就可以了



博客文章的属性,包括作者,题目,标签,分类目录等,由md文件里面的注释决定。[注释规范](https://github.com/jockchou/gitblogdoc/blob/master/posts/gitblog/edit.md)



例如use_gitblog_setup_blog.md



![gitblog博客文章编](https://blog.cdn.thinkmoon.cn/%E5%B0%8F%E4%B9%A6%E5%8C%A0/1.PNG )





上传到blog文件夹之后,主页界面刷新效果



![gitblog效果展示](https://blog.cdn.thinkmoon.cn/%E5%B0%8F%E4%B9%A6%E5%8C%A0/2.PNG)



文章页效果



![gitblog文章页效果展示](https://blog.cdn.thinkmoon.cn/%E5%B0%8F%E4%B9%A6%E5%8C%A0/3.PNG)



> 这儿需注意,gitblog默认是开启网站缓存的,如果你的网站更新不够频繁,你可以不用改配置,在配置conf.yaml里面修改。





### 同步wp博客到gitblog



1.  首先从wordpress后台中导出xml数据

2.  重命名为wordpress.xml

3.  使用PHP 网站根目录/index.php wp2gb 命令同步



    例如: php /var/www/html/index.php wp2gb



    运行成功会提示finished!运行后的主页俯视图

![wordpress迁移到gitblog](https://blog.cdn.thinkmoon.cn/%E5%B0%8F%E4%B9%A6%E5%8C%A0/4.PNG "4")



### 完成gitblog的搭建



好啦,大功告成啦,一个gitblog博客网站就已经搭建成功了[www.thinkmoon.cn](http://www.thinkmoon.cn)
📅 2019-10-28

安装nodejs


sudo apt-get install nodejs

安装npm


sudo apt install npm

改镜像源


sudo npm config set registry https://registry.npm.taobao.org

sudo npm config list

升级node


sudo npm i -g n

sudo n stable

安装Vue


npm install -g @vue/cli

引入less文件失败

安装less,和less-loader

npm i --save less less-loader

iview自定义主题失败

两个解决方案

  1. less降级为3以下,比如2.7.3

  2. 配置vue.config.js(未实践)


module.exports = {

	css: { // 配置css模块

    	loaderOptions: { // 向预处理器 Loader 传递配置选项

        	less: { // 配置less(其他样式解析用法一致)

            		javascriptEnabled: true // 设置为true

        	}

    	}

	}

}
  1. 报错

ERROR in ./~/less-loader!./~/autoprefixer-loader!./src/styles/mytheme.less Module parse failed:

E:\ProjectDemo\vue\IVIEW\node_modules\less-loader\index.js!

E:\ProjectDemo\vue\IVIEW\node_modules\autoprefixer-loader\index.js

!E:\ProjectDemo\vue\IVIEW\src\styles\mytheme. less Unexpected token (1:0) 

You may need an appropriate loader to handle this file type. | .ivu-load-loop {

| animation: ani-load-loop 1s linear infinite; |

}

修改webpack配置

📅 2019-10-28