你好啊

发表于

以下三种方式均可插入图片

  • ![1](1.jpeg)
    1

  • {% asset_img 1.jpeg %}

  • <img src="1.jpeg" >

字体大小
例如：字体大小调节

发表于 分类于

1.概述

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>html概述</title>
    </head>
    <body>
        1、什么是html？
            Hyper Text Markup Language
        2、html运行在哪？
            运行在浏览器上。

            世界五大主流浏览器：
                IE：微软的
                FireFox：火狐（FF）
                Chrome：谷歌
                Opera：欧朋
                safari:MAC OS专用（苹果专用浏览器）

            国内前端程序员主要安装三个：
                IE 
                FireFox 
                Chrome
            前端程序员开发完成后需要在不同的浏览器上运行程序，以便发现浏览器兼容问题。

        3、html怎么开发？
            新建一个.html或者.htm结尾的文件。
            使用记事本打开就能开发，浏览器打开就能运行。不需要编译。

        4、什么是web？
            web就是网站开发。

        5、web程序员包括：
            web前端程序员：需要精通html css JavaScript
            web后台程序员：这个就不一定了，可能是C语言，也可能是C++，Java，PHP，python等。

        这种系统架构被称为：B/S结构系统。
        B:Browser(浏览器)
        S：Serve(服务器)


    </body>
</html>

2.第一个html文件

<!-- 凡是HTML页面中第一行是以下代码的表示该页面是一个HTML5页面：H5。 -->
<!DOCTYPE html>
<!-- 这是根 -->
<html>
    <!-- 头 -->
    <head>
        <!-- 这个是告诉浏览器采用哪一种字符编码方式打开该页面。一般这个编码方式要与文件编码方式相同，不然会乱码 -->
        <meta charset="utf-8">
        <!-- 标题栏 -->
        <title>第一个html文件</title>
    </head>

    <!-- 因为浏览器的容错机制，此处仍可显示 -->
    这里还可以显示吗

    <!-- 网页体 -->
    <body>
        <!-- 这里的内容显示在网页上。 -->
        这是一个html页面！

    </body>
</html>

发表于 更新于

参考

前提条件

  1. 三个软件:nodejs，git for windows，Sublime Text3
  2. 创建github账户，创建仓库，用户名.github.io，此处格式固定
  3. 在仓库里添加文件：index.html，随意写点内容，在浏览器网址栏输入：用户名.github.io，即可得到属于你自己网页。

链接你的电脑与网址

发表于 更新于 分类于

什么是 Hexo？

Hexo 是一个快速、简洁且高效的博客框架。
Hexo 使用 Markdown（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。

Hexo的几个常用命令

hexo new [layout] <title>：如hexo new post 1与hexo new 1都是在_posts文件夹下创建1.md文件。

hexo new page aboutme：新建一个标题为 aboutme 的页面，默认链接地址为 主页地址/aboutme/。

hexo s：启动本地服务器，用于预览主题。默认地址:http://localhost:4000/。

  • hexo s 是 hexo server 的缩写，命令效果一致；
  • 预览的同时可以修改文章内容或主题代码，保存后刷新页面即可；
  • 对 Hexo 根目录 _config.yml 的修改，需要重启本地服务器后才能预览效果。

hexo g -d：生成静态文件并部署。

hexo g： hexo generate 的缩写，生成网站静态文件到默认设置的 public 文件夹。

hexo clean：清除缓存文件 db.json 和已生成的静态文件 public 。

  • 网站显示异常时可以执行这条命令试试。

如何向hexo博客中插入图片

以下三种方式均可插入图片

  • ![1](1.jpeg)
    1

  • {% asset_img 1.jpeg %}

  • <img src="1.jpeg" >

在md文件中插入图片的语法为![]()。

其中方括号是图片描述，圆括号是图片路径。

一般来说有三种图片路径，分别是相对路径，绝对路径和网络路径。

相对路径：相对于当前文件的路径。

网络路径：引用网上的图片，直接复制图片地址，放在圆括号中就完事了。

绝对路径：图片在计算机中的绝对位置，

由于我们的博客是要部署在网站上，部署后会生成新的文件目录，此时图片与博客会在同一目录。

在hexo中使用文章资源文件夹需要在config.yaml文件中更改一下配置：

post_asset_folder: true

当该配置被应用后，使用hexo new命令创建新文章时，会生成相同名字的文件夹，也就是文章资源文件夹。

图片插件

插件hexo-renderer-marked解决了这个问题。可以只用npm install hexo-renderer-marked命令直接安装，之后在config.yaml中更改配置如下：

post_asset_folder: true
marked:
  prependRoot: true
  postAsset: true

之后就可以在使用![](image.jpg)的方式愉快的插入图片了。

我们做了这么多都是为了方便，那么为什么不再方便一点呢。

hexo与Typora的完美结合

上述是从文章资源文件夹中引用图片，前提是先将图片放入到文章资源文件夹，如果图片数量众多的话，一张一张的放很影响效率。但是不用怕，我们有很方便的解决方法。

Typora是我非常喜欢的Markdown文本编辑器，在之前的文章中也介绍过一点。

Typora对于插入图片的支持做得非常好，在文件->偏好设置或者直接<C-,>进入设置。

Typora与hexo的完美结合

使用该配置后，可以直接复制网页中的图片地址，粘贴到Typora中后，会直接复制该图片到文章资源文件夹，同时自动更改路径。

如复制网络路径的图片https://...../image.jpg粘贴到Typora中叫文章名的文章后，图片会自动变为![](文章名/image.jpg)。

但我们知道部署后，文件路径是不同的，所以当我们插入完所有的图片后，我们还需要删除每个图片路径中的文件名/。不慌，也很简单。

在Typora编辑器中，使用<C-f>快捷键，将所有的文章名/替换为空即可删除。

image-20201012140945525

然后再将博客上传，图片就会随着文章一起打包。在网页中就可以看到正常显示的图片，大功告成。

小记

source文件夹是存放用户资源的地方。
除_posts文件夹之外，开头命名为 _ (下划线)的文件 / 文件夹和隐藏的文件将会被忽略。
Markdown 和 HTML 文件会被解析并放到public文件夹，而其他文件会被拷贝过去。