### Valine Configuration Example

Source: https://github.com/xcss/valine/blob/master/docs/avatar/index.html

A basic example showing the structure for initializing Valine with custom settings, including the avatar parameter.

```javascript
new Valine({
    // ...
    avatar: '' // (''/mm/identicon/monsterid/wavatar/retro/hide)
});
```

--------------------------------

### Valine Initialization Example

Source: https://github.com/xcss/valine/blob/master/docs/configuration/index.html

Demonstrates how to initialize the Valine commenting system with essential configuration parameters like element selector, App ID, and App Key. It also shows optional settings for notifications, placeholder text, and avatar styles.

```javascript
var valine = new Valine();
valine.init({
  el: '#valine_thread',
  appId: '3GiiCyXCrGbOIH3EelCfJ6yw-gzGzoHsz',
  appKey: 'iuneD4hXPQImdHQSRE0aOcRF',
  notify: true,
  placeholder: 'ヾﾉ≧∀≦)o来啊，快活啊!',
  avatar: 'mm' // 1.1.7 新增(mm/identicon/monsterid/wavatar/retro)
});
```

--------------------------------

### Valine Initialization Example

Source: https://github.com/xcss/valine/blob/master/docs/cdn/index.html

This JavaScript code demonstrates how to initialize Valine with essential configuration options, including the target element, App ID, App Key, notification settings, placeholder text, and avatar style.

```javascript
var valine = new Valine();
valine.init({
  el: '#valine_thread',
  appId: '3GiiCyXCrGbOIH3EelCfJ6yw-gzGzoHsz',
  appKey: 'iuneD4hXPQImdHQSRE0aOcRF',
  notify: true,
  placeholder: 'ヾﾉ≧∀≦)o来啊，快活啊!',
  avatar: 'mm' // Options: mm/identicon/monsterid/wavatar/retro
});
```

--------------------------------

### Initialize Application and Baidu Analytics

Source: https://github.com/xcss/valine/blob/master/docs/404.html

This code initializes an application with a specified version and base URL, and then asynchronously loads the Baidu Analytics tracking script. It's a common pattern for application setup and web analytics integration.

```javascript
app.initialize({version:"0.17.3",url:{base:""}})
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js?3a67769b7760c62aafb6fa58d51da74c";
  var s = document.getElementsByTagName("script")[0];
  s.parentNode.insertBefore(hm, s);
})();
```

--------------------------------

### Initialize Valine with Email Notifications (JavaScript)

Source: https://github.com/xcss/valine/wiki/Valine-评论系统中的邮件提醒设置

Initializes the Valine comment system with email notification and CAPTCHA verification enabled. Requires the Valine library. The `notify` option set to `true` activates email alerts, which also implicitly enables `verify`. Note that due to Leancloud's limitations, email links cannot direct users to specific articles.

```javascript
var valine = new Valine({
    el: '.comment',
    notify: true, // 邮件提醒!!!
    verify: true, // 验证码
    app_id: 'your appid',
    app_key: 'your appkey',
    placeholder: 'ヾﾉ≧∀≦)o来啊，快活啊!'
})
```

--------------------------------

### Valine CDN - Latest Version

Source: https://github.com/xcss/valine/blob/master/docs/cdn/index.html

This snippet shows how to include the latest version of Valine using the unpkg CDN. It's the recommended approach for automatically getting the most recent updates.

```html
<script src="//unpkg.com/valine/dist/Valine.min.js"></script>
```

--------------------------------

### Valine Email Reply Template (HTML)

Source: https://github.com/xcss/valine/wiki/Valine-评论系统中的邮件提醒设置

This HTML snippet defines the structure for email notifications sent by Valine when a new comment reply is received. It includes placeholders for the username and application name, and a link to view the reply. Ensure the link placeholder is updated to your blog or website's homepage.

```html
<p>Hi, {{username}}</p>
<p>
你在 {{appname}} 的评论收到了新的回复，请点击查看：
</p>
<p><a href="你的网址首页链接" style="display: inline-block; padding: 10px 20px; border-radius: 4px; background-color: #3090e4; color: #fff; text-decoration: none;">马上查看</a></p>
```

--------------------------------

### Valine Initialization Methods

Source: https://github.com/xcss/valine/blob/master/docs/configuration/index.html

Valine supports two primary initialization methods: direct instantiation using the constructor or calling the init method on an existing instance. Both methods allow for passing configuration options to set up the comment system.

```javascript
new Valine({
    el:'#comment',
    appId:'your appid',
    appKey:'your appkey'
})
```

```javascript
var valine = new Valine();
valine.init({
    el:'#comment',
    appId:'your appid',
    appKey:'your appkey'
})
```

--------------------------------

### Project Initialization and Analytics

Source: https://github.com/xcss/valine/blob/master/docs/contact/index.html

Initializes the project with version and URL configuration, and loads Baidu analytics script for tracking website usage.

```javascript
app.initialize({version:"0.17.3",url:{base:".."}})
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js?3a67769b7760c62aafb6fa58d51da74c";
  var s = document.getElementsByTagName("script")[0];
  s.parentNode.insertBefore(hm, s);
})();
```

--------------------------------

### Initialize Valine Comment System

Source: https://github.com/xcss/valine/blob/master/index.html

Initializes the Valine comment system using JavaScript. It requires the Valine library and configuration options like Leancloud app ID and key, element selector, and path.

```javascript
var valine = new Valine();
valine.init({
  el: '.comment',
  app_id: '3GiiCyXCrGbOIH3EelCfJ6yw-gzGzoHsz',
  app_key: 'iuneD4hXPQImdHQSRE0aOcRF',
  placeholder: 'ヾﾉ≧∀≦)o来啊，快活啊!',
  path: window.location.pathname,
  avatar:'mm' // 1.1.7 新增(mm/identicon/monsterid/wavatar/retro)
  // guest_info: ['nick'] // 默认 ['nick', 'mail', 'link']
});
```

--------------------------------

### Valine Initialization with Avatar

Source: https://github.com/xcss/valine/blob/master/docs/avatar/index.html

Demonstrates how to initialize Valine with specific configuration options, including setting the avatar style.

```javascript
var valine = new Valine();
valine.init({
    el: '#valine_thread',
    appId: 'YOUR_APP_ID',
    appKey: 'YOUR_APP_KEY',
    notify: true,
    placeholder: 'ヾﾉ≧∀≦)o来啊，快活啊!',
    avatar: 'mm' // Example: setting avatar to 'mm'
});
```

--------------------------------

### Initialize Valine Comment System

Source: https://github.com/xcss/valine/blob/master/docs/faq/index.html

This JavaScript snippet demonstrates how to initialize the Valine comment system on a webpage. It requires specifying the target element, application ID, and application key from a service like Leancloud. Optional parameters include notification settings, placeholder text, and avatar styles.

```javascript
var valine = new Valine();
valine.init({
  el: '#valine_thread',
  appId: '3GiiCyXCrGbOIH3EelCfJ6yw-gzGzoHsz',
  appKey: 'iuneD4hXPQImdHQSRE0aOcRF',
  notify:true,
  placeholder: 'ヾﾉ≧∀≦)o来啊，快活啊!',
  avatar:'mm' // 1.1.7 新增(mm/identicon/monsterid/wavatar/retro)
})
```

--------------------------------

### Initialize Valine Comment System

Source: https://github.com/xcss/valine/blob/master/docs/index.html

Initializes the Valine comment system with essential configuration parameters such as element selector, Leancloud appId and appKey, notification settings, placeholder text, and avatar style.

```javascript
var valine = new Valine();
valine.init({
  el: '#valine_thread',
  appId: '3GiiCyXCrGbOIH3EelCfJ6yw-gzGzoHsz',
  appKey: 'iuneD4hXPQImdHQSRE0aOcRF',
  notify:true,
  placeholder: 'ヾﾉ≧∀≦)o来啊，快活啊!',
  avatar:'mm' // 1.1.7 新增(mm/identicon/monsterid/wavatar/retro)
})
```

--------------------------------

### Baidu Analytics Initialization

Source: https://github.com/xcss/valine/blob/master/docs/hexo/index.html

This JavaScript code snippet initializes Baidu Analytics tracking for the website. It dynamically creates a script tag and appends it to the document's head, pointing to the Baidu analytics script URL.

```javascript
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js?3a67769b7760c62aafb6fa58d51da74c";
  var s = document.getElementsByTagName("script")[0];
  s.parentNode.insertBefore(hm, s);
})();
```

--------------------------------

### Initialize Valine Comment System

Source: https://github.com/xcss/valine/blob/master/docs/404.html

This snippet demonstrates how to initialize the Valine comment system on a webpage. It requires specifying the target element, application ID, application key, and optional configuration for notifications, placeholders, and avatars.

```javascript
var valine = new Valine();
valine.init({
  el: '#valine_thread',
  appId: '3GiiCyXCrGbOIH3EelCfJ6yw-gzGzoHsz',
  appKey: 'iuneD4hXPQImdHQSRE0aOcRF',
  notify:true,
  placeholder: 'ヾﾉ≧∀≦)o来啊，快活啊!',
  avatar:'mm' // 1.1.7 新增(mm/identicon/monsterid/wavatar/retro)
})
```

--------------------------------

### Configure GitHub Star/Follow Buttons

Source: https://github.com/xcss/valine/blob/master/index.html

Dynamically sets the `src` attribute for iframe elements to load GitHub star and follow buttons. This is executed after the window loads to ensure the iframes are present in the DOM.

```javascript
window.onload = function() {
  var iframes = document.querySelectorAll('iframe');
  iframes[0].setAttribute('src', 'https://ghbtns.com/github-btn.html?user=xCss&repo=valine&type=watch&count=true');
  iframes[1].setAttribute('src', 'https://ghbtns.com/github-btn.html?user=xCss&type=follow&count=true');
}
```

--------------------------------

### Initialize Valine Comment System

Source: https://github.com/xcss/valine/blob/master/docs/hexo/index.html

This snippet demonstrates how to initialize the Valine comment system on a webpage. It requires specifying the target element, application ID, and application key. Optional parameters like notification and placeholder text can also be configured.

```javascript
var valine = new Valine();
valine.init({
  el: '#valine_thread',
  appId: '3GiiCyXCrGbOIH3EelCfJ6yw-gzGzoHsz',
  appKey: 'iuneD4hXPQImdHQSRE0aOcRF',
  notify: true,
  placeholder: 'ヾﾉ≧∀≦)o来啊，快活啊!',
  avatar: 'mm' // Supports mm/identicon/monsterid/wavatar/retro
});
```

--------------------------------

### Valine CDN - Specific Version

Source: https://github.com/xcss/valine/blob/master/docs/cdn/index.html

This snippet demonstrates how to include a specific version of Valine using the unpkg CDN. This is useful for maintaining stability and avoiding unexpected changes from updates.

```html
<script src="//unpkg.com/valine@VERSION/dist/Valine.min.js"></script>
```

--------------------------------

### Baidu Analytics Initialization

Source: https://github.com/xcss/valine/blob/master/docs/faq/index.html

This JavaScript code initializes Baidu Analytics tracking for the website. It dynamically creates and inserts a script tag pointing to the Baidu Analytics tracking ID.

```javascript
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js?3a67769b7760c62aafb6fa58d51da74c";
  var s = document.getElementsByTagName("script")[0];
  s.parentNode.insertBefore(hm, s);
})();
```

--------------------------------

### Valine CSS Styling

Source: https://github.com/xcss/valine/blob/master/index.html

Provides essential CSS styles for the Valine comment system and its surrounding elements. It includes basic layout, typography, and responsive adjustments for different screen sizes.

```css
body { background-color: rgb(238, 238, 238); }
header { background: #fff; }
a { color: #999; text-decoration: none; border-bottom: 1px dotted #dedede; }
.logo { display: inline-block; height: 60px; font-size: 24px; line-height: 60px; color: #4285f4; vertical-align: base-line; }
.sub { font-size: 12px; color: #9c9c9c; padding: 0 5px; }
.market { background-color: #4285f4; height: 398px; position: absolute; top: 60px; width: 100%; outline: none; display: block; z-index: -1; }
.container { width: 80%; }
.placeholder { height: 56px; }
@media screen and (max-width:720px) {
  header { text-align: center; }
  .sub { display: block; padding-bottom: 10px; }
  .container { width: 100%; }
  .placeholder, .market { display: none; }
}
.content { background: #fff; padding: 10px; }
ul, li { list-style: none; }
.prolist { padding: 10px 20px 20px 20px; font-weight: 400; font-size: 16px; font-family: -apple-system, BlinkMacSystemFont, 'Mirages Custom', 'Merriweather', 'Open Sans', "Segoe UI", Roboto, "PingFang SC", "Microsoft Yahei", "WenQuanYi Micro Hei", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", Helvetica, Arial, sans-serif;
line-height: 1.5; }
blockquote { margin: 10px 0; padding: 0 1em; color: #6a737d; border-left: 0.25em solid #dfe2e5; }
#github { padding: 20px 0; }
.copy { line-height: 60px; text-align: center; font-size: 14px; color: #9c9c9c; }
```

--------------------------------

### Valine Initialization

Source: https://github.com/xcss/valine/blob/master/docs/contact/index.html

Initializes the Valine comment system with specified application ID, key, and other configuration options like placeholder and avatar style.

```javascript
var valine = new Valine();
valine.init({
  el: '#valine_thread',
  appId: '3GiiCyXCrGbOIH3EelCfJ6yw-gzGzoHsz',
  appKey: 'iuneD4hXPQImdHQSRE0aOcRF',
  notify:true,
  placeholder: 'ヾﾉ≧∀≦)o来啊，快活啊!',
  avatar:'mm' // 1.1.7 新增(mm/identicon/monsterid/wavatar/retro)
})
```

--------------------------------

### Valine CDN - jsDelivr Alternative

Source: https://github.com/xcss/valine/blob/master/docs/cdn/index.html

This snippet provides an alternative CDN link for Valine using jsDelivr, which supports both domestic and international access.

```html
<script src="https://cdn.jsdelivr.net/npm/valine/dist/Valine.min.js"></script>
```

--------------------------------

### Baidu Analytics Script

Source: https://github.com/xcss/valine/blob/master/docs/configuration/index.html

Includes a standard JavaScript snippet for integrating Baidu Analytics tracking into a web page. This code initializes the tracking script with a specific ID.

```javascript
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js?3a67769b7760c62aafb6fa58d51da74c";
  var s = document.getElementsByTagName("script")[0];
  s.parentNode.insertBefore(hm, s);
})();
```

--------------------------------

### path Configuration Option

Source: https://github.com/xcss/valine/blob/master/docs/configuration/index.html

Defines the path used to identify the current article page. This is crucial for ensuring that comments are correctly associated with their respective pages. Defaults to the current window location pathname.

```APIDOC
path:
  Type: String
  Default: "window.location.pathname"
  Required: false
  Description: The path identifying the current article page for comment retrieval.
  Options:
    - "window.location.pathname": Recommended default.
    - "window.location.href": Uses the full URL.
    - "Custom": Allows specifying a custom path.
  Info:
    - Ensure uniqueness of paths to avoid loading incorrect comment lists.
    - Using "window.location.href" might treat pages with different query parameters as distinct.
  Supported from: v1.1.5+
```

--------------------------------

### Initialize Valine with Mail Notification

Source: https://github.com/xcss/valine/blob/master/docs/notify/index.html

Initializes the Valine comment system with specific configuration options, including enabling the mail notification feature. Requires Leancloud appId and appKey.

```javascript
var valine = new Valine();
valine.init({
  el: '#valine_thread',
  appId: '3GiiCyXCrGbOIH3EelCfJ6yw-gzGzoHsz',
  appKey: 'iuneD4hXPQImdHQSRE0aOcRF',
  notify: true,
  placeholder: 'ヾﾉ≧∀≦)o来啊，快活啊!',
  avatar: 'mm' // 1.1.7 新增(mm/identicon/monsterid/wavatar/retro)
});
```

--------------------------------

### appKey Configuration Option

Source: https://github.com/xcss/valine/blob/master/docs/configuration/index.html

The Application Key obtained from your LeanCloud application. This key is used for authentication with the LeanCloud backend.

```APIDOC
appKey:
  Type: String
  Default: null
  Required: true
  Description: Your LeanCloud Application Key.
  Example: "your leancloud appkey"
  Reference: "Refer to LeanCloud documentation for obtaining appId and appKey."
```

--------------------------------

### Include Baidu Analytics Script

Source: https://github.com/xcss/valine/blob/master/index.html

Conditionally includes the Baidu Analytics tracking script. The script is only loaded if the application is not running on localhost, ensuring analytics are collected for production environments.

```javascript
if (!/^http:\/\/localhost/.test(location.href)) {
  var _hmt = _hmt || [];
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js?fc2301b16d1a46c7899ef2b5afb651cc";
  var s = document.getElementsByTagName("script")[0];
  s.parentNode.insertBefore(hm, s);
}
```

--------------------------------

### guest_info Configuration Option

Source: https://github.com/xcss/valine/blob/master/docs/configuration/index.html

Configuration related to displaying information for guest users. This option is part of managing user data and display within the comment system.

```APIDOC
guest_info:
  Type: Object (or specific fields)
  Default: null
  Required: false
  Description: Configuration for guest user information display.
```

--------------------------------

### el Configuration Option

Source: https://github.com/xcss/valine/blob/master/docs/configuration/index.html

Specifies the DOM element where Valine will be mounted. It's crucial that this element is unique on the page to ensure correct rendering and functionality.

```APIDOC
el:
  Type: String
  Default: "#comment"
  Required: true
  Description: The CSS selector for the target element to initialize Valine.
  Warning: Ensure the specified element is unique on the page.
```

--------------------------------

### placeholder Configuration Option

Source: https://github.com/xcss/valine/blob/master/docs/configuration/index.html

Sets the placeholder text displayed in the comment input field when it is empty. This provides a hint to the user about what to enter.

```APIDOC
placeholder:
  Type: String
  Default: null
  Required: false
  Description: Placeholder text for the comment input box.
  Example: "Just so so"
```

--------------------------------

### Valine 初始化与自定义选项

Source: https://github.com/xcss/valine/blob/master/docs/i18n/index.html

展示了 Valine 的一个更全面的初始化配置，包括评论容器、LeanCloud App ID 和 Key、通知功能、占位符文本以及头像设置。

```javascript
var valine = new Valine();
valine.init({
    el: '#valine_thread',
    appId: '3GiiCyXCrGbOIH3EelCfJ6yw-gzGzoHsz',
    appKey: 'iuneD4hXPQImdHQSRE0aOcRF',
    notify:true,
    placeholder: 'ヾﾉ≧∀≦)o来啊，快活啊!',
    avatar:'mm' // 1.1.7 新增(mm/identicon/monsterid/wavatar/retro)
})
```

--------------------------------

### avatar_cdn Configuration Option

Source: https://github.com/xcss/valine/blob/master/docs/configuration/index.html

Specifies a CDN URL for fetching Gravatar avatars. This can improve loading performance and reliability by using a mirror service.

```APIDOC
avatar_cdn:
  Type: String
  Default: "https://gravatar.loli.net/avatar/"
  Required: false
  Description: CDN mirror URL for Gravatar avatars.
  Supported from: v1.1.9-beta5+
```

--------------------------------

### verify Configuration Option

Source: https://github.com/xcss/valine/blob/master/docs/configuration/index.html

Enables or disables the CAPTCHA verification service for comments. This helps in preventing spam and automated submissions.

```APIDOC
verify:
  Type: Boolean
  Default: false
  Required: false
  Description: Enables or disables CAPTCHA verification for comments.
```

--------------------------------

### Valine Avatar Configuration Options

Source: https://github.com/xcss/valine/blob/master/docs/avatar/index.html

Details the available parameters for configuring user avatars in Valine, primarily using Gravatar. It lists supported values for the `avatar` parameter, their visual output, and any specific version requirements or default behaviors.

```APIDOC
Valine Avatar Options:

Valine uses Gravatar for comment avatars, with several display styles available via the `avatar` configuration parameter.

Supported `avatar` parameter values:

- `''` (Empty string): Displays the default Gravatar graphic.
- `mm`: Displays a mystery person (grey and white avatar).
- `identicon`: Generates an abstract geometric pattern based on email or nickname.
- `monsterid`: Displays a small monster graphic.
- `wavatar`: Generates an avatar combining different faces and backgrounds based on email or nickname.
- `retro`: Displays an 8-bit pixelated retro avatar based on email or nickname.
- `hide`: Hides the avatar display. (Supported from v1.1.8-beta onwards).

If the `avatar` parameter is set to a value not in the list, it defaults to `mm`.

Example Usage:
```javascript
new Valine({
    // ... other configurations
    avatar: '' // or 'mm', 'identicon', 'monsterid', 'wavatar', 'retro', 'hide'
});
```
```

--------------------------------

### lang Configuration Option

Source: https://github.com/xcss/valine/blob/master/docs/configuration/index.html

Specifies the language for the Valine interface. This allows users to view the comment system in their preferred language.

```APIDOC
lang:
  Type: String
  Default: null
  Required: false
  Description: Language code for the Valine interface.
  Reference: "See Multi-language Support documentation."
```

--------------------------------

### appId Configuration Option

Source: https://github.com/xcss/valine/blob/master/docs/configuration/index.html

The Application ID obtained from your LeanCloud application. This is essential for connecting Valine to your backend data storage.

```APIDOC
appId:
  Type: String
  Default: null
  Required: true
  Description: Your LeanCloud Application ID.
  Example: "your leancloud appid"
  Reference: "Refer to LeanCloud documentation for obtaining appId and appKey."
```

--------------------------------

### pageSize Configuration Option

Source: https://github.com/xcss/valine/blob/master/docs/configuration/index.html

Sets the number of comments to display per page. This controls the pagination of the comment list, affecting how many comments are loaded at once.

```APIDOC
pageSize:
  Type: Number
  Default: null
  Required: false
  Description: Number of comments to display per page.
```

--------------------------------

### Leancloud Email Template for Valine Notifications

Source: https://github.com/xcss/valine/blob/master/docs/notify/index.html

An HTML template for email notifications sent via Leancloud. It includes placeholders for the username and application name, and requires the user to update the link to their website's homepage.

```html
<p>Hi, {{username}}</p>
<p>
你在 {{appname}} 的评论收到了新的回复，请点击查看：
</p>
<p><a href="你的网址首页链接" style="display: inline-block; padding: 10px 20px; border-radius: 4px; background-color: #3090e4; color: #fff; text-decoration: none;">马上查看</a></p>
```

--------------------------------

### region Configuration Option

Source: https://github.com/xcss/valine/blob/master/docs/configuration/index.html

Specifies the LeanCloud server region. Defaults to the China mainland region ('cn'). Supports overseas regions ('us'). This setting affects data access latency.

```APIDOC
region:
  Type: String
  Default: "cn"
  Required: false
  Description: The LeanCloud server region.
  Options:
    - "cn": China mainland region
    - "us": Overseas region
  Info: You can test connectivity by pinging "oip6cvm7.api.lncld.net".
  Supported from: v1.1.9-beta4
```