所有文章都是在`source/_post/`下，查找起来会不大方便，而希望对它进行一个分类，但是在生成的文章链接上保持不变。:beer:



在默认配置下，我们使用`hexo new post [title]`会在`source/_post/`目录下生成对应名称的 markdown 文件，而使用`hexo g`生成的 html 文件路径是`:year/:month/:day/:title.html`。当我们写的博客越来越多的时候，会发现，所有文章都是在`source/_post/`下，查找起来会不大方便，而希望对它进行一个分类，但是在生成的文章链接上保持不变。

生成的文章名字及其对应永久链接，可以在`_config.yml`中配置。如果我们是按年月日归档，而链接保持不变，大可配置为如下：

```yml
permalink: :title
new_post_name: :year/:month/:day/:title/
```

此时我们执行`hexo new “hexo文章分类管理”`命令来新建文章，就会发现新生成的 md 文件已经自动按时间生产了文件夹，把文章进行了分类。如下面树形图所示：

```shell
_posts
    │  30s-CSS.md
    │  attribute-和-property-的区别.md
    │  重装系统后，重新部署Hexo博客.md
    │
    └─2019
        └─03
            └─11
                  hexo文章分类管理.md
```

不过我平时写博客比较少，这么分的话看起来太细碎了，想找一下以前写的文章有时候也是不太好找。所以就把文件夹的层级减少了一些，按年来分类：

```yml
// _config.yml
new_post_name:  :year/:title.md
```

再次执行`hexo new “hexo文章分类管理”`来新建文章，树形图如下所示：

```shell
_posts
    │  30s-CSS.md
    │  attribute-和-property-的区别.md
    │  重装系统后，重新部署Hexo博客.md
    │
    └─2019
            hexo文章分类管理.md
```

hexo文章分类管理

前几天在网上看到了“30s CSS”这个项目，感觉里面有几个不错的写法，记录一下。




## 布局

### 盒尺寸重置

```css
html {
  box-sizing: border-box;
}
*,
*::before,
*::after {
  box-sizing: inherit;
}
```

### 清除浮动

```css
.clearfix::after {
  content: '';
  display: block;
  clear: both;
}
```

### 等宽高比

给定可变宽度的元素，它将确保其高度以响应的方式保持成比例(即，其宽度与高度的比率保持恒定)。

```html
<div class="constant-width-to-height-ratio"></div>
```

```css
.constant-width-to-height-ratio {
  background: #333;
  width: 50%;
}
.constant-width-to-height-ratio::before {
  content: '';
  padding-top: 100%;
  float: left;
}
.constant-width-to-height-ratio::after {
  content: '';
  display: block;
  clear: both;
}
```

### 均匀分布的子元素

```html
<div class="evenly-distributed-children">
  <p>Item1</p>
  <p>Item2</p>
  <p>Item3</p>
</div>
```

```css
.evenly-distributed-children {
  display: flex;
  justify-content: space-between;
}
```

### Flexbox垂直居中

```html
<div class="flexbox-centering">
  <div class="child">Centered content.</div>
</div>
```

```css
.flexbox-centering {
  display: flex;
  justify-content: center;
  align-items: center;
}
```

### 单行省略号

如果文本长度超过一行，它将被截断并以省略号结束。

```HTML
<p class="truncate-text">If I exceed one line's width, I will be truncated.</p>
```

```CSS
.truncate-text {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  width: 200px;
}
```

## 视觉

### 计数器

计数器本质上是由CSS维护的变量，其值可以通过CSS规则递增以跟踪它们的使用次数。

```HTML
<ul>
  <li>List item</li>
  <li>List item</li>
  <li>List item</li>
</ul>
```

```css
ul {
  counter-reset: counter;
}
li::before {
  counter-increment: counter;
  content: counters(counter, '.') ' ';
}
```

### 自定义滚动条

在WebKit平台上自定义具有可滚动溢出的文档和元素的滚动条样式。

```HTML
<div class="custom-scrollbar">
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure id exercitationem nulla qui repellat laborum vitae, molestias tempora velit natus. Quas, assumenda nisi. Quisquam enim qui iure, consequatur velit sit?</p>
</div>

```

```css
/* Document scrollbar */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  border-radius: 10px;
}
::-webkit-scrollbar-thumb {
  border-radius: 10px;
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
}
/* Scrollable element */
.some-element::webkit-scrollbar {
}
```

### 自定义文本选中背景

更改文本选择的样式。

```HTML
<p class="custom-text-selection">Select some of this text.</p>
```

```css
::selection {
  background: aquamarine;
  color: black;
}
.custom-text-selection::selection {
  background: deeppink;
  color: white;
}
```

### 动态阴影

基于元素本身的颜色创建类似`box-shadow`的阴影。

```html
<div class="dynamic-shadow-parent">
  <div class="dynamic-shadow"></div>
</div>
```

```css
.dynamic-shadow-parent {
  position: relative;
  z-index: 1;
}
.dynamic-shadow {
  position: relative;
  width: 10rem;
  height: 10rem;
  background: linear-gradient(75deg, #6d78ff, #00ffb8);
}
.dynamic-shadow::after {
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  background: inherit;
  filter: blur(0.4rem);
  opacity: 0.7;
  z-index: -1;
}
```

### 渐变文本

为文本提供渐变颜色。

```HTML
<p class="gradient-text">Gradient text</p>
```

```CSS
.gradient-text {
  background: -webkit-linear-gradient(pink, red);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
}
```

### 1像素边框

为元素提供一个边框，宽度等于1个本地设备像素，可以显得非常清晰和清晰。

```HTML
<div class="hairline-border">text</div>
```

```css
.hairline-border {
  box-shadow: 0 0 0 1px;
}
@media (min-resolution: 2dppx) {
  .hairline-border {
    box-shadow: 0 0 0 0.5px;
  }
}
@media (min-resolution: 3dppx) {
  .hairline-border {
    box-shadow: 0 0 0 0.33333333px;
  }
}
@media (min-resolution: 4dppx) {
  .hairline-border {
    box-shadow: 0 0 0 0.25px;
  }
}
```

### :非选择器

这`:not` psuedo选择器用于设置一组元素的样式，而保留最后一个(或指定的)元素未设置样式。

```HTML
<ul class="css-not-selector-shortcut">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
</ul>
```

```CSS
.css-not-selector-shortcut {
  display: flex;
}
li {
  list-style-type: none;
  margin: 0;
  padding: 0 0.75rem;
}
li:not(:last-child) {
  border-right: 2px solid #d2d5e4;
}
```

### 溢出滚动渐变

向溢出元素添加渐变以更好地指示有更多内容需要滚动。

```HTML
<div class="overflow-scroll-gradient">
  <div class="overflow-scroll-gradient__scroller">
    Content to be scrolled
  </div>
</div>
```

```CSS
.overflow-scroll-gradient {
  position: relative;
}
.overflow-scroll-gradient::after {
  content: '';
  position: absolute;
  bottom: 0;
  width: 240px;
  height: 25px;
  background: linear-gradient(
    rgba(255, 255, 255, 0.001),
    white
  );
  /* transparent keyword is broken in Safari */
  pointer-events: none;
}
.overflow-scroll-gradient__scroller {
  overflow-y: scroll;
  background: white;
  width: 240px;
  height: 200px;
  padding: 15px 0;
  line-height: 1.2;
  text-align: center;
}
```

### 漂亮的文本下划线

比...更好的选择`text-decoration: underline` 其中后代不裁剪下划线。本机实现为`text-decoration-skip-ink: auto` 但它对下划线的控制较少。

```HTML
<p class="pretty-text-underline">Pretty text underline without clipping descending letters.</p>
```

```CSS
.pretty-text-underline {
  font-family: Arial, sans-serif;
  display: inline;
  font-size: 18px;
  text-shadow: 1px 1px 0 #f5f6f9, -1px 1px 0 #f5f6f9, -1px -1px 0 #f5f6f9, 1px -1px 0 #f5f6f9;
  background-image: linear-gradient(90deg, currentColor 100%, transparent 100%);
  background-position: 0 0.98em;
  background-repeat: repeat-x;
  background-size: 1px 1px;
}
.pretty-text-underline::-moz-selection {
  background-color: rgba(0, 150, 255, 0.3);
  text-shadow: none;
}
.pretty-text-underline::selection {
  background-color: rgba(0, 150, 255, 0.3);
  text-shadow: none;
}
```

> 下划线与文本的距离取决于字体的内部度量，因此必须确保每个人看到相同的字体(即，不会出现基于操作系统而更改的系统字体)。

### 形状分离器

使用SVG形状分隔两个不同的块，与标准水平分隔相比，可以创建更有趣的视觉外观。

```HTML
<div class="shape-separator"></div>
```

```CSS
.shape-separator {
  position: relative;
  height: 48px;
  width: 500px;
  background: linear-gradient(135deg,#ff4c9f,#ff7b74);
}

.shape-separator::after {
  content: '';
  background-image: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS1taXRlcmxpbWl0PSIxLjQxNCI+PHBhdGggZD0iTTEyIDEybDEyIDEySDBsMTItMTJ6IiBmaWxsPSIjZmZmIi8+PC9zdmc+);
  position: absolute;
  width: 100%;
  height: 24px;
  bottom: 0;
}
```

### 系统字体堆栈

使用操作系统的本机字体来接近本机应用程序感觉。

```HTML
<p class="system-font-stack">This text uses the system font.</p>
```

```CSS
.system-font-stack {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu,
    Cantarell, 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
```

### 三角形

使用纯CSS创建三角形形状。

```HTML
<div class="triangle"></div>
```

```CSS
.triangle {
  width: 0;
  height: 0;
  border-top: 20px solid #333;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
}
```

## 动画

### 加载中-弹跳样式

创建反弹加载程序动画。

```HTML
<div class="bouncing-loader">
  <div></div>
  <div></div>
  <div></div>
</div>
```

```CSS
@keyframes bouncing-loader {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0.1;
    transform: translateY(-1rem);
  }
}
.bouncing-loader {
  display: flex;
  justify-content: center;
}
.bouncing-loader > div {
  width: 1rem;
  height: 1rem;
  margin: 3rem 0.2rem;
  background: #8385aa;
  border-radius: 50%;
  animation: bouncing-loader 0.6s infinite alternate;
}
.bouncing-loader > div:nth-child(2) {
  animation-delay: 0.2s;
}
.bouncing-loader > div:nth-child(3) {
  animation-delay: 0.4s;
}
```

### 环形旋转器

创建可用于指示内容加载的圆环微调器。

```HTML
<div class="donut"></div>
```

```CSS
@keyframes donut-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.donut {
  display: inline-block;
  border: 4px solid rgba(0, 0, 0, 0.1);
  border-left-color: #7983ff;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  animation: donut-spin 1.2s linear infinite;
}
```

> 说明
> 使用半透明的`border` 对于整个元素，除了用作圆环加载指示器的一侧。使用`animation` 旋转整个元素。

### 悬停下划线动画

当文本悬停在上面时创建动画下划线效果。

```HTML
<p class="hover-underline-animation">Hover this text to see the effect!</p>
```

```CSS
.hover-underline-animation {
  display: inline-block;
  position: relative;
  color: #0087ca;
}
.hover-underline-animation::after {
  content: '';
  position: absolute;
  width: 100%;
  transform: scaleX(0);
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: #0087ca;
  transform-origin: bottom right;
  transition: transform 0.25s ease-out;
}
.hover-underline-animation:hover::after {
  transform: scaleX(1);
  transform-origin: bottom left;
}
```

> 说明
1.  `display: inline-block` 使块`p`成为 `inline-block` 以防止下划线跨越整个父级宽度而不仅仅是内容(文本)。
2.  `position: relative` 在元素上为伪元素建立笛卡尔定位上下文。
3.  `::after` 定义伪元素。
4.  `position: absolute` 从文档流中取出伪元素，并将其相对于父元素定位。
5.  `width: 100%` 确保伪元素跨越文本块的整个宽度。
6.  `transform: scaleX(0)` 最初将伪元素缩放为0，使其没有宽度且不可见。
7.  `bottom: 0` 和`left: 0` 将其放置在块的左下方。
8.  `transition: transform 0.25s ease-out` 意味着`transform` 变化将通过`ease-out` 时间功能在0.25秒内过渡。
9.  `transform-origin: bottom right` 表示变换锚点位于块的右下方。
10. `:\hover::after` 然后使用`scaleX(1)` 将宽度转换为100％，然后将`transform-origin` 更改为`bottom left` 以便定位点反转，从而允许其在悬停时转换到另一个方向。


## 互动

### 禁用选择

使内容不可选择。

```HTML
<p>你可以选择我。</p>
<p class="unselectable">你不能选择我！</p>
```

```CSS
.unselectable {
  user-select: none;
}
```

> 需要前缀才能获得完全支持。 这不是防止用户复制内容的安全方法。

### 同级变淡

淡出悬停项目的同级。

```HTML
<div class="sibling-fade">
  <span>Item 1</span>
  <span>Item 2</span>
  <span>Item 3</span>
  <span>Item 4</span>
  <span>Item 5</span>
  <span>Item 6</span>
</div>

```

```CSS
span {
  padding: 0 1rem;
  transition: opacity 0.2s;
}
.sibling-fade:hover span:not(:hover) {
  opacity: 0.5;
}
```

> 说明
1.  `transition: opacity 0.2s` 指定不透明度的更改将在0.2秒内转换。
2.  `.sibling-fade:hover span:not(:hover)` 指定当父项被徘徊时，选择当前没有被徘徊的任何`span`子项并将其不透明度更改为`0.5` 。

------

实现效果可以参考原文网址：http://caibaojian.com/30-seconds-of-css/

30s CSS

前几天一个 vue 项目需要实现中英文切换，在这里记录一下自己的实现过程。



## 环境

使用 `vue-cli` 构建项目，`webpack` 模板。

多语言插件采用 [vue-i18n](https://link.jianshu.com/?t=https://kazupon.github.io/vue-i18n/en/).

## 安装

```
$ npm install vue-i18n --save

```

其他安装方法详见文档的 [Installation](https://link.jianshu.com/?t=https://kazupon.github.io/vue-i18n/en/installation.html) 篇。

## 使用

由于语言文件的代码比较多，就不直接写在`main.js`里面了，`src`目录下创建`i18n.js`文件，代码如下：

```JavaScript
import Vue from 'vue'
import VueI18n from 'vue-i18n'
Vue.use(VueI18n)

// 哪些地方需要切换，以及各个语言的版本
const messages = {
  zh: {
    message: {
      text: '免费获取 SGC'
    }
  },
  en: {
    message: {
      text: 'Get Free SGC'
    }
  }
}

// 以下为语言包单独设置的场景，单独设置时语言包需单独引入
const messages: {
  'zh-CN': require('./common/lang/zh'),   // 中文语言包
  'en-US': require('./common/lang/en')    // 英文语言包
}

// 最后 export default，这一步肯定要写的。
export default new VueI18n({
  locale: 'en', // set locale 默认显示英文
  messages // set locale messages
})

```

`main.js`中代码如下：

```JavaScript
import Vue from 'vue'
import App from './App'
import i18n from './i18n'

/* eslint-disable no-new */
new Vue({
  el: '#app',
  components: { App },
  template: '<App/>',
  i18n  // 添加到每个 Vue 实例，便可以使用 this.$i18n
})
```

上面的代码正式将 `vue-i18n` 引入 vue 项目中，创建一个 `i18n` 实例对象，方便全局调用。

HTML 中使用模版：

```html
<div id="#app">
  <p>{{ $t("message.text") }}</p>
</div>
...
<div class="lang">
  <div class="english" @click="langToggle">English</div>
  <div class="china" @click="langToggle">简体中文</div>
</div>
```

我们可以通过 `this.$i18n.locale` 来进行语言的切换，就是通过点击事件，切换 `locale` 的值。

切换方法示例：

```JavaScript
methods: {
  langToggle() {
    if (this.$i18n.locale === 'en') {
      this.$i18n.locale = 'zh'
    } else {
      this.$i18n.locale = 'en'
    }
  }
}
```

现在点击按钮便可以切换语言了.

vue 多语言切换，国际化实现

跟平常使用差别不大，只是需要转换一下。



## 步骤

- 下载 font-awesome 字体包；
- 打开`font-awesome.css`文件，将`字符编码以上部分`复制到`app.wxss`；
- 打开 [Transfonter](https://transfonter.org/) 网站，上传字体`fontawesome-webfont.ttf`（理论其它文件格式也可以转换，并未尝试），选择`base64`编码，`formats`只选择`TTF`，`convert`后下载；
- [Transfonter](https://transfonter.org/) 网站下载得到的文件中有`style`文件，打开后将其中`@font-face`部分的代码复制，替换掉`app.wxss`中的`@font-face`部分；
- 对照`font-awesome.css`中的字符编码内容，加入到微信小程序的`app.wxss`文件中，使用哪个就加哪个.
- 然后在小程序中使用`class="fa fa-user"`即可，如`<text class="fa fa-user"></text>`。

## 目录结构参考

```
E:.
│  app.js
│  app.json
│  app.wxss
│  config.js
│
├─font-awesome-4.7.0
│  ├─css
│  │      font-awesome.css
│  │      font-awesome.min.css
│  │
│  └─fonts
│          fontawesome-webfont.eot
│          fontawesome-webfont.svg
│          fontawesome-webfont.ttf
│          fontawesome-webfont.woff
│          fontawesome-webfont.woff2
│          FontAwesome.otf
│
├─pages
│  └─index
│          index.js
│          index.wxml
│          index.wxss
```

------------


参考：
- [小程序社区](http://www.wxapp-union.com/forum.php?mod=viewthread&tid=2709&highlight=%E5%AD%97%E4%BD%93)
- [CSDN](http://blog.csdn.net/shmily__35/article/details/76691209)

小程序使用 font-awesome 图标库

“一个人在五岁之前，其生活经验已经决定了他（她）成年后解释自身遭遇和回应的方式，对于“对这个世界和自己应该期待些什么”有了基本的答案。” ——阿尔弗雷德•阿德勒



阿尔弗雷德•阿德勒是著名的奥地利心理学家，个体心理学派的创始人。他在思想最成熟的1932年写出了《自卑与超越》一书。他认为，由于身体缺陷、骄纵、忽略所引起的自卑，有可能摧毁一个人，使人或自甘堕落，或发生精神异常。但另一方面，自卑也有可能使人发愤图强，力求振作，以补偿自己的弱点。


## 各章概述

- 前言
  - 每个人都有不同程度的自卑感，而优越感则是对自卑感的补偿。
  - 弗洛伊德的精神分析以性驱动解释和说明一切，在阿德勒的学说里，追求内在价值、拓展社会兴趣本身作为一种内驱力与一个人的情绪、认知、生活风格相统一。


- 一、生命的意义
  - 没有绝对客观的世界，我们感受到的世界，都是我们主观解释后的世界。
  - 个体心理学认为人类的所有问题，都可以归因于生命中的三大问题：职业、交际、两性。
  - 真正的生命的意义：可以与他人分享，并且能够得到大多数人认可的（对他人有意义）。
  - 儿童发展到五岁便开始形成固定的行为模式，来面对外界的事物。
  - `生活经验`对于我们没有太大用处，起决定作用的是我们赋予经验的认知和意义。
  - 残疾、溺爱和被人忽略的儿童最容易形成错误的认知观念。
  - 合作是防止神经症产生的唯一保障。


- 二、心灵与肉体
  - 肉体和精神是一种相互合作的关系，是一个不可分割的整体。
  - 一个人四五岁时候，精神和身体就会形成一个固定的联系，心智模式和对人生的态度基本形成，行为模式、情绪基调和身体特征也相应形成。


- 三、自卑和优越
  - 每个人都有不同程度的自卑感。面对自卑，应该探寻产生自卑的真正原因并去克服，而不是在其他方面寻找优越感来进行补偿，这样只会使自卑感更强烈。
  - 自卑情结是指一个人在意识到他要面对一个无法解决的问题时，所表现出的无所适从。
  - 人人都在追求属于自己独有的那一份优越感，它取决于人们赋予生命的意义。
  - 在追求优越感的过程中，只有为了他人的利益而前进的人，和那些为了社会发展而奋斗的人，才是能够超越生活，真正获得优越感的人。


- 四、早期的记忆
  - 记忆最能够反应真实的自我，有助于个体更高效的认知自我，更准确的理解周围环境的意义。
  - 一个人的众多行为表现可能是不一样的，但是这些行为所表现出的人格是一致的。


- 五、梦
  - 佛洛依德学派任务意识和潜意识是相互独立的，梦与白天所经历的思维规律完全不同。作者认为这一点很不科学。
  - 作者认为做梦时的目标和白天的目标是一致的，梦是我们生命意义的另一种表达方式，同时也有利于我们生命意义的塑造和达成。
  - 一个人在梦中的表现也是他人生态度的体现，每个梦都依照我们现实生活中遇到的问题反映出人生态度想要加强的一面。


- 六、家庭的影响
  - 家庭中的早期训练，以其竞争与合作程度不同，塑造了后来社会生活中的角色雏形。
  - 举例分析了多种情况下孩子、父母可能会形成的性格和行为。


- 七、学校的影响
  - 学校是家庭教育的补充，学习父母所不具备的知识。
  - 正确的培养方式是重兴趣而轻天赋，培养学生的合作能力。


- 八、青春期
  - 叛逆：并不是孩子们对父母的态度转变了，而是一直不认同自己的父母，在有对抗能力的时候表现了出来。
  - 青春期出现的问题，都是由于在人生的三大问题上缺乏适当的训练和准备所造成的。要多鼓励和指引。
  - 以合作的视角看，青春期是个机会，而非威胁。


- 九、犯罪及其预防
  - 犯罪即“缺乏社会兴趣而又未学会合作之道的个人，在追求着虚假的个人优越感”。
  - 预防之道：改善就业与教育，抑制贫富差距，避免挑战式处理等。


- 十、职业；十一、人及其同伴；十二、爱情与婚姻
  - 该三章概括：“我们对于一个'人'的所有要求，以及我们能够给他的最高荣誉，就是他必须身为良好的工作者，所有其他人的朋友和爱情与婚姻中的真正伴侣。”

## 要点

- 什么是自卑？
阿德勒在本书中提出的定义是，“当个人面对一个他无法应付的问题时，他表示他绝对无法解决这个问题，此时出现的情绪便是自卑。”

- 人生三大问题
  人类生活在“意义”之中，每个人为自己构建的“生活意义”各不相同。但是，思考生活的意义，不能忽略三个基本事实：
  - 人类生活在资源贫瘠、物少人多、竞争激烈的地球上；
  - 个人很脆弱，受到种种限制，在多数情况下无法单独地完成自己的目标。假如一个人孤零零地活着，并且想只凭借自己的力量来应付一切问题，他只能面对失败和灭亡；
  - 人类有两种性别，个体和人类集体生命的存续都必须依赖于这一事实。由于这一事实的存在，人类社会才产生了爱情和婚姻这两种联系。

  由上述三个基本事实进行延伸思考，我们可以发现，其实人类在生活中遇到的大部分问题都可归为三个类别：职业、社会合作、亲密关系。


- 我们常常希望改进目前的地位，这种想法可以说是一种广义的自卑感。在理想的情况下，我们能通过这种心态的驱使改造环境、改善自己，从而获得安全感、建立优越感。这也是人类生存和进步的主线。然而在某些情况下，我们为了摆脱自卑选择了错误的方式和目标，问题就随之而来。当人们在职业、社会合作、亲密关系这三个方面频频遭遇问题，他会表现出一种自卑的人格气质。

- **非理性的自卑何以让人无法自拔？**
阿德勒认为，一个人在五岁之前，其生活经验已经决定了他（她）成年后解释自身遭遇和回应的方式，对于“对这个世界和自己应该期待些什么”有了基本的答案。作者将器官缺陷、娇纵、忽视归纳为儿童时期最容易碰到的三种问题。存在以上问题的儿童，他们在早期获得安全感优越感的方式可能是强调自己的身体缺陷、依赖他人的肯定、哭闹淘气以引起他人注意等等，缺乏通过自己正常努力或是奉献、对别人发生兴趣和互助合作来达到目的的成功经验，并更容易感受到挫败。结果在之后的生活中，错误的“行为-目的”环路不断被强化、放大。

- **那么，一个人应该如何超越自卑？**
阿德勒从教育者和治疗者的角度讨论这个问题的。作者否定了遗传或者性压抑决定性格的观念，认为自卑是有希望被纠正的。简而言之，人们需要判断哪些行为其实是自卑的表现，患者的潜在愿望是什么，患者的哪些早期经验造成了现在的错误反应模式，然后向患者指出错误所在，鼓励其建立正确的反馈模式——即作者通篇强调的“合作”，以达到一种利人利己的普世价值。

  具体而言，阿德勒强调母亲在养育孩子的关键作用：第一步，母亲爱护孩子，让孩子与外界建立一种初步的、积极的联系；第二步，母亲将孩子的兴趣转移到父亲身上，引入另外一个合作的角色；第三步，母亲引导孩子进一步扩大社会接触，对他人产生兴趣。然而作者也认为比教导父母可行性更强的是对教师进行指导，鼓励教师在学校生活中发现孩子的问题，判断孩子的真正需求，与家庭合作加以引导。


## 不足

《自卑与超越》一书是个体心理学的重要典籍，久负盛名，但亦有缺憾。

第一，阿德勒的思想内容虽然相当丰富，能够对人类生活及成长的细节深入探讨，不过他的理论只是由几个基本概念组成，再加上几个个案而已，没有构建一个完整的系统，缺乏足够的说服力。

第二，阿德勒认为从自卑感到优越感或安全感的追求主宰着一切行为，这可能是一种确定论，忽视了随机因素的作用。

第三，阿德勒认为人必须与异性合作，把通过婚姻的形式存续生命作为重大责任，这似乎是受到其犹太教徒身份的影响。如果此说成立，则耶稣和佛陀何以自处？在留下身体血脉和精神血脉之间，何者对人类的贡献更大？

第四，阿德勒过分强调“合作”的价值，忽略了“孤独”的价值。通过法国心理学家古斯塔夫•勒旁的《乌合之众：大众心理研究》一书，我们知道，人在群体中，智能和道德水平往往会急速下降，变成受人愚弄和操纵的“木偶”。如果在这样的群体中强调“合作”，有何意义和价值？因此，我仍然服膺于卡尔维诺在《树上的男爵》中的隽语：“一个人只有远离人群，才能真正和他们在一起。”

## 自我启发

下面一段引用来自豆瓣某网友，跟我的情况真是及其相似，所以偷个懒 ~

> 因为具有对事情拥有特殊见解和观察及把握别人心理的能力（抖机灵），我在日常生活中收益不少，并且受到其它人的称赞，所以，我的优越感也随着时间的增长而强化。

> 而这样的优越感必须拓展到各方面：学习，生活，友谊。当我试图将自己的优越感建立在学习上时，我明显地感到困难。预期中，我应该是取得很好的成绩，同时不需要付出什么努力。这样想的原因是我先天的认为自己要比别人优秀。很快的，我发现自己并不能在学习上建立优越感。众所周知，学习是需要付出极大努力的，而我，恰恰缺乏用功，成绩可想而知。虽然客观上说，不算差，但与自己的预期有极大的差距。

> 自卑感在学习上又产生了，如何消除呢？我可以选择努力学习，获得好成绩来消除它。但显然，我选择了另外一条路。通过在其它方面获得的成就来建立优越感，以此抵消先前产生的自卑感。

跟这位网友一样，最初的我为了补偿自己在学习上的自卑感，而去选择一些其他的方法来获得优越感。虽然自卑感看起来是减少了，其实是在增加，因为引起自卑的根本原因“不努力学习”并没有得到改变。包括我的偏科，其实也是一样的道理，语文好数学差，我并没有努力学习数学让它也好起来，而是依然在努力学习语文，并且安慰自己：没事，虽然他们数学比我好，但是我的语文比他们都好。

现在看来，这是一个多么浅显的道理。然而当时的我，并不知道这些。