魅惑

学无止境


  • 首页

  • 分类

  • 归档

  • 标签

Hello World

发表于 2017-11-21

Welcome to Hexo! This is your very first post. Check documentation for more info. If you get any problems when using Hexo, you can find the answer in troubleshooting or you can ask me on GitHub.

Quick Start

Create a new post

1
$ hexo new "My New Post"

More info: Writing

Run server

1
$ hexo server

More info: Server

Generate static files

1
$ hexo generate

More info: Generating

Deploy to remote sites

1
$ hexo deploy

More info: Deployment

两个页面间的数据交互

发表于 2017-10-17

普通用法

现在我们有两个页面 a.html 和 b.html,我们将在 a.html 中使用a标签打开 b.html,在b.html中操作后将数据写到a.html上

a.html

html代码

<a href="b.html target="_blank">在新窗口打开b.html</a><br><br><br>  
<div id="div_id" style="border:1px solid #F00; width:300px; height:100px; padding:10px">  
    <p>请先点击上面的超链接</p>  
    <p>这里的文字会在你点击<b style="color:#F00">b.html</b>页面中的<b>超链接后</b>改变哦!</p>  
</div>

js代码

function b() {  
 var h = document.getElementById("div_2").innerHTML ;  
 window.opener.a(h) ;;  
}  

b.html

html代码

<a href="javascript:b()">  
    <div id="div_2">"哈哈!这个<b>数据</b>会发送到<b       style="color:#F00">a.html</b>页面的哦!"</div>  
</a>

js代码

function b() {  
    var h = document.getElementById("div_2").innerHTML ;  
    window.opener.a(h) ;;  
}

实现效果
a页面打开效果
image
b页面打开效果
image
点击b页面链接后a页面的效果
image

在angularJs中用法

a.html

html代码

<a href="b.html target="_blank">在新窗口打开b.html</a><br><br><br>  
<div id="div_id" style="border:1px solid #F00; width:300px; height:100px; padding:10px">  
    <p>请先点击上面的超链接</p>  
    <p>这里的文字会在你点击<b style="color:#F00">b.html</b>页面中的<b>超链接后</b>改变哦!</p>  
</div>

js代码 需要在controller中引入 $window

var app = angular.module('myApp', []);
app.controller('aCtrl', function($scope,$window) {
    $scope.a = function(msg){
        alert(msg);
    }
    $window.$scope = $scope;
});

b.html代码

html代码

<a ng-click="b();">  
    <div id="div_2">"哈哈!这个<b>数据</b>会发送到<b       style="color:#F00">a.html</b>页面的哦!"</div>  
</a>

js代码

var app = angular.module('myApp', []);
app.controller('bCtrl', function($scope) {
    $scope.b = function(msg){
        window.opener.$scope.a('你好');
    }
});

sublime安装markdown插件

发表于 2017-10-17

sublime编辑器安装markdown插件

第一步 安装

在sublime中使用快捷键 Ctrl+shift+p 调出输入框,然后输入pcip
image
然后选择 markdown preview点击。
或者直接点击 Preferences –> 选择 Package Control: ,然后输入install也可以安装

第二步,设置直接在浏览器中预览的快捷键(可省略)

点击 Preferences –> 选择 Key Bindings User,输入:
{ “keys”: [“alt+m”], “command”: “markdown_preview”, “args”: {“target”: “browser”, “parser”:”markdown”} }
保存后,直接输入快捷键:Alt + M 就可以直接在浏览器中预览生成的HTML文件了。

第三步 设置markdown高亮

Ctrl+shift+p 找到下图中的设置语法的选项,点击即可设置成功
image

其他功能

输入Ctrl+shift+p 调出输入框后输入markdown看到的都是可以操作的
image
如果执行save to html的话,就会在此文件同级目录下生成一个html文件

hexo主题设置

发表于 2017-07-27

hexo主题配置

我的博客情缘-hexo搭建博客

发表于 2017-07-27 | 分类于 博客

搭建一个属于自己的博客基本上分一下几个步骤

  • 环境搭建
  • 安装配置Hexo
  • 创建github仓库
  • 配置SSH keys
  • 配置主题
  • 关联github仓库
  • 创建和发布文章

第一步:环境搭建

安装Git

git官网(http://git-scm.com)
Windows: 直接下载和安装

安装Node.js

进入官网(https://nodejs.org/en/)
下载安装包,直接点击安装就可以了

第二步:安装配置Hexo

git和node.js安装成功后就可以使用npm安装hexo了
进入git或cmd执行以下命令

npm install -g hexo-cli

然后在你喜欢的目录下创建一个文件夹 hexo
cd 到 hexo文件夹右键单击Git Bash Here执行,

hexo init
这个过程可能需要几分钟

初始化hexo,完成后执行

npm install

安装依赖模块
执行完上述操作之后 xxx文件夹下面是这种结构
image

第三步:创建github仓库

在本地仓库首页点击右上角的加号,创建一个新的仓库
image

注意仓库名称的问题

第四步:配置SSH keys

github和本地代码做推送和拉取时,需要用到ssh的密钥对进行数据加解密,由于github上新建的项目没有添加密钥,所以本地仓库连接不到远程仓库。

首先需要检查你电脑上现有的ssh key:

cd ~/.ssh

如果提示:No such file or directory 说明你没有ssh keys

生成新的ssh keys:

ssh-keygen -t rsa -C “youremail@youremail.com”

邮箱地址改为你的邮箱地址 C必须为大写 回车后出现
image

再次回车后系统会要你输入密码:

Enter passphrase (empty for no passphrase):<输入加密串>
Enter same passphrase again:<再次输入加密串>

这个密码会在你提交项目时使用,如果为空的话提交项目时则不用输入。这个设置是防止别人往你的项目里提交内容。

最后看到这样的界面,就成功设置ssh key了:
image

将ssh key 添加到github上

打开本地 C:\Users下的 .ssh 文件夹,找到id_rsa.pub文件,复制文件内容
登录github个人主页,打开Setting
image

image

完成SSH的配置

第五步:配置主题

进入hexo下的themes文件夹下,右键Git Bash

git clone https://github.com/litten/hexo-theme-yilia.git

等待文件下载完成之后就可以在 themes问价夹下看到一个新的文件夹,你可以给这个问价夹改名为yilia
image
此时打开 hexo根目录下的 _config.yml文件,将theme改为 yilia ,这里的名称和themes文件夹下的名称应该相同,否则会报 no layout index.html的错误

修改完成之后再次运行

hexo server

就可以看到修改主题后的效果了
image

关联github仓库

打开hexo根目录下的 _config.yml文件,修改
repository :你的仓库地址

deploy:
type: git
repository: https://github.com/XXX/XXX.github.io.git
branch: master

这样就将github个人仓库和hexo关联上了,接下来你需要执行

hexo clean

清除以前生成的文件

hexo generate

重新生成新的文件

hexo deploy

本地博客发布到github上,如果发布时候出现错误 ERROR Deployer not found: git

请执行 npm install hexo-deployer-git –save

第六步:创建和发表文章

想要发布新的文章,首先需要创建。cd到hexo文件夹下

执行 hexo new “文章标题”

你可以在hexo->source->_post目录下看到你新创建的那个文章,接下来你可以使用任意一款可以编辑markdown的工具写文章了,写好之后执行

hexo g
hexo d

附录

  • hexo new “postName” #新建文章
  • hexo new page “pageName” #新建页面
  • hexo clean #清除之前生成的静态页面
  • hexo generate #生成静态页面至public目录
  • hexo server #开启预览访问端口(默认端口4000,’ctrl + c’关闭server)
  • hexo deploy #将.deploy目录部署到GitHub
  • hexo help # 查看帮助
  • hexo version #查看Hexo的版本

  • hexo n == hexo new

  • hexo g == hexo generate
  • hexo s == hexo server
  • hexo d == hexo deploy
魅惑

魅惑

5 日志
1 分类
6 标签
© 2018 魅惑
由 Hexo 强力驱动
主题 - NexT.Pisces