测绘公司如何编写网站内容(一份Markdown语法整理大集合)

　　测绘公司如何编写网站内容(一份Markdown语法整理大集合)

　　有阅读障碍的同学可以跳过第一到第四部分，下载我写的工具包：

　　git 克隆

　　然后从第五节开始。

　　一、为什么需要博客？

　　优秀的程序员都在写博客，写博客有很多好处：

　　二、什么是 VuePress，我为什么要使用 VuePress？

　　VuePress 是由 Yuxi You（vue.js 框架作者）于 4 月 12 日发布的基于 Vue 的全新静态*敏*感*词*。它实际上是一个内置webpack的Vue spa应用，可以用来写文档。. 详情见VuePress中文网站

　　其实类似的建站工具有很多，比如WordPress、Jekyll、Hexo等，其中WordPress需要自己购买虚拟主机，不管它；Github-Page 默认支持 Jekyll。听说操作比较复杂。现在; 之前用过Hexo，但总觉得主题不好看，风格也不够简洁大方。自从我遇到了 VuePress，嗯，就是这样~

　　VuePress 有很多优点：

　　三、开始构建并创建项目文件夹

　　可以右键手动新建一个，也可以使用 mkdir 命令新建一个：

　　mkdir vuepressBlogDemo

　　全局安装 VuePress

　　npm install -g vuepress

　　进入vuepressBlogDemo文件夹并初始化项目

　　使用 npm init 或 npm init -y （默认是）

　　npm init -y

　　创建文件夹和文件

　　在vuepressBlogDemo文件夹中创建一个docs文件夹，在docs中创建一个.vuepress文件夹，在.vuepress中创建一个public文件夹和config.js文件，最终的项目结构如下：

　　vuepressBlogDemo

├─── docs

│ ├── README.md

│ └── .vuepress

│ ├── public

│ └── config.js

└── package.json

　　在config.js文件中配置网站标题、描述、主题等信息

　　module.exports = {

title: 'Chen\'s blog',

description: '我的个人网站',

head: [ // 注入到当前页面的 HTML 中的标签

['link', { rel: 'icon', href: '/logo.jpg' }], // 增加一个自定义的 favicon(网页标签的图标)

],

base: '/', // 这是部署到github相关的配置

markdown: {

lineNumbers: false // 代码块显示行号

},

themeConfig: {

nav:[ // 导航栏配置

{text: '前端基础', link: '/accumulate/' },

{text: '算法题库', link: '/algorithm/'},

{text: '微博', link: 'https://baidu.com'}

],

sidebar: 'auto', // 侧边栏配置

sidebarDepth: 2, // 侧边栏显示2级

}

};

　　在 package.json 文件中添加两条启动命令

　　"scripts": {

"dev": "vuepress dev docs",

"build": "vuepress build docs"

}

　　一切准备就绪，我们跑去看看

　　npm run dev

　　四、一些小亮点

　　完成基本设置后，就可以在docs目录下新建一个.md文件，写文章（.md是一个Markdown语法文件，需要了解一些基本的Markdown写法，很简单，这里是Markdown语法的副本整理大合集）

　　这里有一些实用的方法供大家参考。

　　代码块高亮

　　在.md文件中编写代码时，可以在```后面添加js、html、json等格式类型，代码块可以根据指定类型高亮显示

　　

　　自定义容器

　　代码：

　　::: tip 提示

this is a tip

:::

::: warning 注意

this is a tip

:::

::: danger 警告

this is a tip

:::

　　影响：

　　

　　支持表情符号

　　代码：

　　:tada: :100: :bamboo: :gift_heart: :fire:

　　影响：

　　

　　这是表情符号的副本

　　支持 PWA

　　VuePress 默认支持 PWA，配置方法如下：

　　在 config.js 文件中添加

　　head: [ // 注入到当前页面的 HTML 中的标签

['link', { rel: 'manifest', href: '/photo.jpg' }],

['link', { rel: 'apple-touch-icon', href: '/photo.jpg' }],

],

serviceWorker: true // 是否开启 PWA

　　在 public 文件夹下新建一个 manifest.json 文件并添加

　　{

"name": "张三",

"short_name": "张三",

"start_url": "index.html",

"display": "standalone",

"background_color": "#2196f3",

"description": "张三的个人主页",

"theme_color": "blue",

"icons": [

{

"src": "./photo.jpg",

"sizes": "144x144",

"type": "image/png"

}

],

"related_applications": [

{

"platform": "web"

},

{

"platform": "play",

"url": "https://play.google.com/store/apps/details?id=cheeaun.hackerweb"

}

]

}

　　最后，在iPhone的safrai浏览器中打开网站，点击+添加到主屏幕，就可以在桌面看到一个像原生App一样的图标（感觉就像我写了一个App。

　　

　　)

　　五、部署上线

　　说了这么多都是在本地完成的，现在我们要把本地的内容推送到某个服务器上，这样只要有网络，你就可以随时随地观看你的网站。

　　一般来说，有两种选择：

　　自己买个服务器，比如阿里云、腾讯云等。这种方式的优点是速度有保证，可以通过搜索引擎收录搜索到，缺点是要花钱.

　　

　　土豪同学可以考虑。使用 Github 页面。什么是 Github 页面？简单的说就是Github提供的一个用于搭建个人网站的静态站点托管服务。许多人用它来建立个人博客。这种方式的优点是免费、方便，但缺点是速度可能有点慢，国内搜索引擎无法使用收录。

　　最后我选择了选项2，我会解释如何使用Github Pages服务。

　　登录 Github

　　打开github网站，登录你的github账号（如果你没有账号，请注册并面对墙认为做一个优秀的程序员连github账号都没有）

　　然后我们新建两个仓库，

　　新仓库1：USERNAME.github.io（无需克隆到本地） 注意！

　　USERNAME 必须是你的 Github 账号名，不能是你名字的拼音，也不能是你的非主流网名。不要搞错，确保和你的Github账户名完全一样！

　　比如我的Github账户名是helloworldtang

　　

　　然后新建一个仓库，Repository名称填写为：helloworldtang.github.io

　　

　　这个仓库建好后，就不需要在本地克隆了，所有的内容更新和修改都在下面的仓库中进行。

　　新建仓库二：随便起个名字，如：vuepressBlog（克隆到本地）

　　这个项目是用来开发博客的，以后只需要改这个项目就可以了。

　　#!/usr/bin/env sh

# 确保脚本抛出遇到的错误

set -e

# 生成静态文件

npm run build

# 进入生成的文件夹

cd docs/.vuepress/dist

# 如果是发布到自定义域名

# echo 'www.yourwebsite.com' > CNAME

git init

git add -A

git commit -m 'deploy'

# 如果你想要部署到 https://USERNAME.github.io

git push -f git@github.com:USERNAME/USERNAME.github.io.git master

# 如果发布到 https://USERNAME.github.io/ REPO=github上的项目

# git push -f git@github.com:USERNAME/.git master:gh-pages

cd -

　　修改仓库二中的deploy.sh发布脚本

　　将文件中的 USERNAME 更改为 Github 帐户名。比如我的账户名是zhangyunchencc，那么可以改成：

　　# 如果你想要部署到 https://USERNAME.github.io

git push -f git@github.com:zhangyunchencc/zhangyunchencc.github.io.git master

　　这样，仓库二和仓库一关联起来。

　　简单来说，两者的关系是：1号仓库负责展示网站的内容，我们不需要改；日常开发和新内容都在仓库2中，代码通过npm run deploy命令发布到仓库。一。

　　在package.json文件夹中添加release命令（如果使用工具包请忽略）

　　"scripts": {

"deploy": "bash deploy.sh"

}

　　大功告成，运行release命令

　　npm run deploy

　　这时候在Github设置中打开如下链接：就可以看到你的主页了~

　　

　　PC 侧页面如下所示：

　　

　　移动页面如下所示：

　　

　　六、发布到您自己的个人域

　　如果你对这样的域名不满意，想拥有自己的个人域名，比如毕竟有些大牛（阮一峰）都是自己名字的网址。这是非常方便和酷。

　　跟着步骤一步一步来~

　　购买域名

　　推荐在新网或万网购买

　　我是在新网买的。下面以新网为例。万网类似。

　　购买完成后，进入管理后台，点击“分析”按钮，添加以下两项：

　　

　　

　　注意有坑！！！在万网购买域名的同学请注意，在第二条记录中，请用@代替，万网不支持

　　可以通过ping自己的域名获取记录值中的IP：

　　ping www.username.github.io

　　添加 CNAME 文件

　　在 USERNAME.github.io 中找到 Settings> Custom domain 并添加它。

　　

　　大功告成，打开看看~~~七、终于

　　多于，

　　陈| 2018.10