|
|
! x# ?9 q+ b4 e/ l* ]可以将 SpeciaTheme 中 Heropress Pro 主题转换成 Typecho 主题,下面是具体的实现过程:4 T; ]' s: g/ M @% ?1 `* ~/ E/ O( Z
1 K* {: }. m6 U8 I# S
1.下载主题文件: P# N4 B0 X4 o+ ^' F
$ ] H2 d# M7 g* y
在 SpeciaTheme 网站购买 Heropress Pro 主题后,从下载链接中下载主题文件压缩包。+ u1 J# B: N2 y, H
3 N- @; I- `7 }0 u H: K' f
2.创建 Typecho 主题目录5 J' {1 g4 [$ U: W
9 e, b7 [; Y' Q6 p6 s' R
在 Typecho 根目录下的 usr/themes 目录中新建一个名为 heropress-pro 的文件夹,这将是新的主题目录。' u. _) i& C! r4 Q2 _. P
^, K9 J* D; J( _% J: i: M- O
3.解压主题文件. R" _: _- F! ?5 k2 D2 X7 T
. |/ }5 N3 l& v. Q
将下载的 Heropress Pro 主题文件压缩包解压缩,然后复制文件到 heropress-pro 目录中。应该会有以下文件和目录:0 _2 g# X. s3 g1 V! a
1 N3 A# W5 \1 n3 D6 A
assets/5 k$ c# Q& c3 Z2 p( I
dist/9 D ~1 J5 W c; z# A4 D7 x
inc/
0 W. ^5 o1 Q. ?2 }node_modules/: F; a }, @& P: y% Q
partials/
9 B0 g$ S. O7 q9 @templates/
1 ]8 C6 e6 M. Z6 k b.babelrc" U$ Q, f0 X f) }7 P) G
.eslintrc.js( z' J& A" f9 ?: y8 V
gulpfile.js
; m7 B0 z% e2 s; `8 J0 V. R( j- Fpackage.json
* |7 _0 |" W7 A& Q5 W. ]webpack.config.js
2 L) s; w9 `6 J/ @7 a( y% g4.修改主题样式表文件
) i) N1 S1 a7 E7 x, b( c( @& m7 X4 [/ |
修改主题样式表文件 assets/css/style.css,将其中所有图片、字体等路径都指向 Typecho 主题所在的地址。例如:
" m! ]7 e. d4 k, a8 ^; J
( {. l- N: E( f/ Vcss
8 Z* G* r9 \ C+ Ybackground-image: url('https://example.com/usr/themes/heropress-pro/assets/images/bg.jpg');& S% ~/ D% y- g! k" J& Y) @) ]
修改为:
% l5 i$ E5 X! F$ U& s' E
0 F l. _6 M# A5 Z) ocss
9 E* V# L X0 U3 `; G' G* Abackground-image: url('/usr/themes/heropress-pro/assets/images/bg.jpg');
7 W' q& c' W1 z) X. y5.创建 Typecho 主题配置文件2 X n! v, d7 `: y, C! ^
) `$ y3 T# N9 U
在主题目录中创建一个名为 config.inc.php 的文件,并添加以下代码:5 c# h2 x, |# E3 _
+ N+ q9 t6 v/ R1 z% V3 Z; v" f( xphp
0 `# o9 D/ ^# N( g1 O% {<?php; P) }3 S' g6 U" d. z
return array() {. q( G5 q1 O
'name' => 'Heropress Pro',& e- s* _9 I0 ^* H9 ~3 W3 U2 B6 Y
'description' => 'Typecho adaptation of Heropress Pro theme',
F, |/ G, F/ n8 c' q9 n+ t8 H 'version' => '1.0',
: a- p( h- ~% N 'author' =>'Your Name',6 x3 D3 r' g) j( }
);
0 R% Q b" T, y3 k& P9 w6.配置主题布局文件0 H5 W5 h5 z2 ?' q
+ ^5 u0 V1 `& t, D; E" G2 Z在 heropress-pro 目录中创建一个名为 index.php 的文件,并添加以下代码:
. _+ ?* {) i3 w! P2 N$ W$ ?' n
. ]2 e" m2 }, _/ kphp' O: K- R: X2 S- k) D* B* E
<?php while ($this->next()): ?>
& p$ G; A. T# l7 [<div class="post"># m; e1 c4 ^, x. l& g' ^0 R) h
<h2 class="post-title">" S9 M6 {! s8 L9 d0 t
<a href="<?php $this->permalink() ?>"><?php $this->title() ?></a>1 Q( b! _1 I: g" a4 H) t& i: I3 F
</h2>9 }+ N4 Z* _" }. {
<div class="post-meta">
5 c8 \8 Y( g. U( M# }8 i4 _ <span><?php $this->date('F j, Y'); ?></span>2 m* s4 P' `/ I! U! s2 p9 u
<?php if($this->tags): ?>
3 s- r3 u; V, X$ g5 j* A <span class="post-tags">
, L, [5 j6 ^8 f: e$ V <?php $this->tags(', ', true, 'none'); ?>
L" e( W7 g/ f F1 T* @+ g </span>
l. C6 c8 H( E. D2 y <?php endif; ?> D* x9 N" d g& x0 H- U% ^
</div>
; C( ^! k9 D+ B1 i- O! B) V <div class="post-content">
6 g7 x% P0 g8 H <?php $this->content('Read more »'); ?>
1 I2 H6 ]6 ~# J2 T9 S6 ?+ q </div>/ y' d! F4 F1 i) g0 `
</div>
; N" n! I1 T3 ~' b<?php endwhile; ?>% f" u# A3 L- v# ~
7.调用 Typecho 函数4 }0 Y" M) o0 g/ I2 C: O& S% ~% k
0 X2 K! c( c' t. S& l在 index.php 文件中,将需要显示文章的地方改为 Typecho 的函数。例如:
4 t+ N3 I$ N2 t% Y9 f& {' d1 A7 e1 A7 S# r: s& O8 X: I
用 the_title() 替换 get_the_title()。
2 `3 x2 O; j, Y u/ M; \ k
K0 x% ]: t& C& _8 s用 the_permalink() 替换 get_permalink()。, c' y8 ^, ^& ^* o/ ~# Y1 {; @, R
* }: N3 B+ u3 @9 r0 o6 x用 $this->date('F j, Y'); 替换 the_time('F j, Y')。# M% L/ D$ ^3 K+ c9 k, K, A
1 u2 ?0 Z( H+ i1 [; ^. K8 m
用 $this->content('Read more »'); 替换 the_content('Read more »')。8 n4 j: u: z+ K, ~
5 v2 Z4 _3 v' d8.添加 Typecho 标记8 p& p# e" \/ k# q( {
& R. b7 v' f( ^+ q在 index.php 文件中,添加 Typecho 的头部和页面循环,以及必要的 js 和 css 文件:! N: E# K$ J; n& w9 I' J
' ?; w' V* v1 {$ r! y% V1 U1 pphp
1 F7 H! y& L; g4 d3 \% x<?php if (!defined('__TYPECHO_ROOT_DIR__')) exit; ?>1 M: S5 b4 q* B/ t$ N. C( H
<?php $this->need('header.php'); ?>
) f8 b9 k2 I7 |<div id="main" class="container">
4 Q+ z- o8 Z/ \/ a- j" I <div id="content" class="row">6 ~4 h, M' L- G- R: D8 n+ L* H( x; u+ R
<?php while ($this->next()): ?>
' k8 n9 ^* |& J* A( w' O <div class="col-md-8 col-md-offset-2">
- y9 C6 m* {5 \4 B <div class="post">: \9 @2 p# @, |1 N, O w5 N
<h2 class="post-title">
, K' W! w( w8 n9 [- t <a href="<?php $this->permalink() ?>"><?php $this->title() ?></a>
1 r9 t/ Q3 X9 y S/ I: t% c </h2>
( c6 v$ }, M" }) u9 q( N <div class="post-meta">2 P' i. d9 r2 P6 B( F( A
<span><?php $this->date('F j, Y'); ?></span>
7 A) `7 x, O6 u; S4 ^; x <?php if($this->tags): ?>
* g0 K" P3 { p2 ?) N! u <span class="post-tags">; N }9 }) y* A4 A
<?php $this->tags(', ', true, 'none'); ?>
M" \6 Y8 a6 t7 Y1 T a: J </span>
4 R+ H0 i, P9 O! a8 z3 ]. b1 C4 A <?php endif; ?>
( N* J5 |) a) h% B7 _+ A1 [5 E, } </div>$ k7 C: W% S0 {- E4 W
<div class="post-content">. ^1 O$ U- P5 R# l% e; ^
<?php $this->content('Read more »'); ?>
8 O. r) Q6 H% G. r9 p" L; `3 n i </div>2 S5 t9 z9 k8 u: N. G/ _% R
</div>6 \' P' V: f, \) O. X
</div>! X" a' U l- e1 @4 G5 j
<?php endwhile; ?>8 ^" t" G& j7 D7 m
</div>
# p7 M. a3 q8 [1 m& x6 v; Q</div>
9 R1 ~) @0 u3 a3 y<?php $this->need('footer.php'); ?> R" w* P" p( \; y+ U6 v6 e2 F7 U
9.调整其他可能需要的文件和代码 {9 Z1 X3 S% M! H# P
4 e) n4 ^" C& A( }5 h根据 Typecho 的特点,需要调整主题中的一些文件和代码。例如,需要将 header.php 中的 <title> 标签改为:
. `1 G0 D/ z& ~' E: u
6 W! n6 m- @# k. F% r! y8 j6 Qhtml2 u, X4 g& x# D' t" h) h9 s! m/ V
<title><?php $this->archiveTitle(array(8 a: o( d: X: Z( @5 c
'category' => _t('%s'),
5 j$ ]* J9 S$ k& X9 c' x8 M 'search' => _t('Search "%s"'),# _# J% Y, N% Z1 Y, k+ v+ a
'tag' => _t('Tag "%s"'),/ v: j8 \# b8 g9 G3 G
'author' => _t('Author "%s"'),0 [! R# r4 i! j N* x* h
'date' => _t('Archive "%s"'),
. A6 g; {5 ]7 m$ H2 ` 'default' => ''
3 p L. z- t: z: p" G ), '', ' - '); ?><?php $this->options->title(); ?>
/ K4 m. v2 M) J2 |- x1 [</title>7 T) d! @+ Z I9 p
10.使用主题
, m. o; O7 q. A% p. B, D( G; L. X* ]8 g: |" p3 R) S! J$ k- M
登录 Typecho 管理页面,选择外观,找到 Heropress Pro 主题,并选择该主题即可。
8 |5 q' x6 I) ` s/ H. u( l$ Q2 B" m; w- d1 v
以上就是将 Heropress Pro 主题转换成 Typecho 主题的具体过程,希望对你有所帮助。( o2 v( A- A8 m
, S5 k& j( ^# n9 }( u& n+ Y3 G0 I |
|