|
|
& E5 k6 R; r+ @, R" S7 P% B可以将 SpeciaTheme 中 Heropress Pro 主题转换成 Typecho 主题,下面是具体的实现过程:
2 G5 Y% H/ H- R+ i U9 T& B& _) N) P& f( _# I
1.下载主题文件
$ S7 D4 L* k: o9 M$ ]
0 m: c* v+ r; t/ h& |在 SpeciaTheme 网站购买 Heropress Pro 主题后,从下载链接中下载主题文件压缩包。9 i# w* l- h$ Z! y$ s, d4 e0 x
& D& ?" w2 O0 \0 O- H( L" U2.创建 Typecho 主题目录; W) ^* f8 w) M) C+ J/ U) a. F
, U) q" I* O9 ^3 m在 Typecho 根目录下的 usr/themes 目录中新建一个名为 heropress-pro 的文件夹,这将是新的主题目录。8 v" M- x9 P! n6 W, Q' T
: P! h. K, b+ y9 [2 w& O7 _/ i L+ G
3.解压主题文件
; z" ]" G$ e% B+ ?
' X& B, i7 \, M; u, X将下载的 Heropress Pro 主题文件压缩包解压缩,然后复制文件到 heropress-pro 目录中。应该会有以下文件和目录:- y0 _1 R' \8 u' Z
$ v) `& v1 ^/ w) G' m: c7 |$ g
assets/7 d+ F. j' t7 n( m1 W: _( d7 I
dist/
" ?4 G! L7 A# n; W9 y, R. ginc/
% k' w; X2 d$ C' Rnode_modules/
" j" Q7 Q" ] u5 |: v' n% opartials/
+ x# b3 I) V2 z: E4 O$ G' ?templates/. K! m- i) \' Y/ e. Q
.babelrc( q" Z: e5 O& w
.eslintrc.js
) z h- D( D/ e7 {. n. e) vgulpfile.js
! T# Y' V' [9 V1 p6 lpackage.json
2 Z' c! H Z& m; t+ T) p5 m+ ^0 Vwebpack.config.js( `7 C5 O* W( j0 {
4.修改主题样式表文件6 n2 n+ ]4 g9 L) Z. Q
1 Z8 i" @/ q( W0 j6 E: ?, v) F
修改主题样式表文件 assets/css/style.css,将其中所有图片、字体等路径都指向 Typecho 主题所在的地址。例如:
0 |4 Z9 k) c. Y5 T( X Q2 V* d: H
. V7 k: x5 m( T/ L1 hcss
$ H" a3 f9 S. jbackground-image: url('https://example.com/usr/themes/heropress-pro/assets/images/bg.jpg');; R" A& ]! U: a+ c) l' q( C
修改为:
) x; u7 S4 f' [( [. E% L2 Y S& m/ f
1 G: s' c9 d5 ~6 }- Rcss5 U! q1 Y* E- S; A
background-image: url('/usr/themes/heropress-pro/assets/images/bg.jpg');
+ D$ f3 ]# y9 W8 \6 p- Z: W5.创建 Typecho 主题配置文件
$ _! q0 V2 W8 @! _, l2 E* [
; j5 q" T3 p: t& K& i/ [在主题目录中创建一个名为 config.inc.php 的文件,并添加以下代码:
# T l9 T; f! _2 k! b
# E- Y7 x) m% u7 {php
; {' M" _- G. ~$ l8 X<?php" l$ l* O# m) v i; x" H
return array(
. l3 l$ V3 B- C" o& e3 k0 { 'name' => 'Heropress Pro',, v; s, c8 `5 l
'description' => 'Typecho adaptation of Heropress Pro theme',& }( G. o$ D, ^' q3 [
'version' => '1.0',
/ m2 {( ^% w$ T9 t) w 'author' =>'Your Name',
5 W+ o* |3 A2 l' i3 t);
5 i7 A5 |1 a# ^/ S: V6.配置主题布局文件
{4 J8 H: v" o$ x* B i9 {% Z
# X9 K( C h! j2 w; L7 A在 heropress-pro 目录中创建一个名为 index.php 的文件,并添加以下代码:% R; P* p) U) i- a8 `
0 f8 @6 f9 M! F
php
4 F0 T+ l6 w3 {/ n! u1 q) d<?php while ($this->next()): ?>2 r2 T2 R3 A/ }, A# t3 q) T
<div class="post">
. C2 f1 `% y: V3 q0 ?( x <h2 class="post-title">
% Z' ]: ]/ B9 N5 N, i3 w7 [/ P <a href="<?php $this->permalink() ?>"><?php $this->title() ?></a>0 Z1 t, ?0 M- |
</h2>
' T$ ?! c# ~9 D8 j0 E5 ^! B' S <div class="post-meta">) m/ j+ Z s6 O: j" S/ v
<span><?php $this->date('F j, Y'); ?></span>! z; I9 l; ^# |
<?php if($this->tags): ?>) ~' i9 |. |; b: j) t4 _7 E, P
<span class="post-tags">
( s6 ~: W d8 ] <?php $this->tags(', ', true, 'none'); ?>6 c8 I( `3 w+ B+ J3 l
</span>* Z" }0 D' k0 U
<?php endif; ?>0 R Q1 e! ?" A( P7 `# l4 P% |
</div>" p! Z: ?3 O2 Q3 [, \3 X
<div class="post-content">
* U. t3 Q/ H w% A( |9 \. F <?php $this->content('Read more »'); ?>- @8 v' t$ b, ?. j( C
</div>1 F# L& D! G. A5 h# r2 s( r
</div>
% Z# F/ l# k* N* e, t& I9 R<?php endwhile; ?>
, m( ]- _7 |. r7.调用 Typecho 函数
5 Q. B- D; M, f7 k5 w% K
3 x. D' c3 o/ H) q1 L& @5 ~在 index.php 文件中,将需要显示文章的地方改为 Typecho 的函数。例如:
6 i: z4 I1 q4 s& J; S! Z+ B2 Q) h1 E% x b* ?/ r
用 the_title() 替换 get_the_title()。' W) t3 ?1 D/ x7 f* f- `! B7 D1 h
X6 R! _* O" k& h2 g! o7 S5 r
用 the_permalink() 替换 get_permalink()。
8 U. i9 ~( x& R3 M( a
, z5 M$ D5 j0 E/ l用 $this->date('F j, Y'); 替换 the_time('F j, Y')。
2 G/ a5 [1 u) n) Z+ u) j. S8 Y6 R2 H. S: G0 S, P6 o7 E
用 $this->content('Read more »'); 替换 the_content('Read more »')。, B2 C0 M ?+ b0 J
; j2 p2 K3 o! n3 w/ {7 H8.添加 Typecho 标记
8 d& S5 @6 B q3 T2 B" B V" {1 |1 Y/ n! p
在 index.php 文件中,添加 Typecho 的头部和页面循环,以及必要的 js 和 css 文件:
+ ], p: K# k/ `" y* R2 s9 p
' g% I% |, O7 mphp
1 N& D0 r. k$ O' s6 W" M<?php if (!defined('__TYPECHO_ROOT_DIR__')) exit; ?>
: L, j6 e* @. @/ {6 t<?php $this->need('header.php'); ?>- S2 J: w }4 Y7 f: D5 N, S
<div id="main" class="container">( Q2 X1 i/ I+ X5 ~9 o' S( h
<div id="content" class="row">
1 W" Z% l1 ~* j. c <?php while ($this->next()): ?> |4 a7 i& L4 ^: k" y# [
<div class="col-md-8 col-md-offset-2">
/ m y6 X3 ?! V0 B; T6 P <div class="post">
( f: ]- V6 I0 J( U6 D: z( b <h2 class="post-title">* B, g/ w) A/ B! C. K
<a href="<?php $this->permalink() ?>"><?php $this->title() ?></a>
& v' i0 [7 C& ?- _2 Z5 X; G, B$ U </h2>! `3 G' i) U L5 r
<div class="post-meta">
# l; _: ?& D( _+ _ <span><?php $this->date('F j, Y'); ?></span>
5 J: v( M5 g) L, D4 }* j <?php if($this->tags): ?>9 ?" j, V! p4 d- l9 g3 ^0 ]! k
<span class="post-tags">* X( z+ p9 Z9 q, x
<?php $this->tags(', ', true, 'none'); ?>5 B1 `- z) w$ I& R. C/ K$ E" o c
</span> R$ M: q; I% D* b
<?php endif; ?>
4 w4 W1 i, J1 {/ c </div>1 g* I" R2 S8 J9 A o. C
<div class="post-content">* O. `# F- B. O+ ^/ `* S
<?php $this->content('Read more »'); ?>' A9 p, r, B$ P: C. _( N- f" k' M( r
</div>! N' L0 [' T0 _8 h& [
</div>
, I+ H+ y6 @6 v5 A' L* p3 ^) [ </div>
* U5 C$ A! D ~1 ], m <?php endwhile; ?>
# x6 J! ]* B$ z" h! ~8 s( B </div>
# Y; w* r# W( {( Y2 H5 X</div>; @( v, J( _3 X, i
<?php $this->need('footer.php'); ?>4 T3 T( k1 W( \! ^+ f
9.调整其他可能需要的文件和代码
# O o5 ` V- W/ [0 ]2 `
& i& Y0 ]/ A) V3 r根据 Typecho 的特点,需要调整主题中的一些文件和代码。例如,需要将 header.php 中的 <title> 标签改为:
9 B! D: d7 P0 W2 J7 \6 q L9 \4 v1 {8 Z0 x
html
1 k+ f. o0 g3 \ q% x<title><?php $this->archiveTitle(array(. q! a$ t5 c1 c0 H, `
'category' => _t('%s'),- ]6 R) M1 z4 O7 C
'search' => _t('Search "%s"'),
" k, w6 o6 v1 |$ k 'tag' => _t('Tag "%s"'),
& o! _) i# |6 p9 K8 O 'author' => _t('Author "%s"'),. l" O, x+ P; U! E# x" [- \
'date' => _t('Archive "%s"'),
" R" a7 i7 B* d- v8 X 'default' => '': x1 ` y9 c O4 S" R# F
), '', ' - '); ?><?php $this->options->title(); ?>* |! c S! b. l- D$ D8 {
</title>
* z/ l/ t* i: [" C* [* l10.使用主题
5 ?6 x/ Q' e$ x/ I4 r; g
3 k1 ~* j3 ], b( U2 M登录 Typecho 管理页面,选择外观,找到 Heropress Pro 主题,并选择该主题即可。
2 R* E; [$ e) B( a2 j
9 H6 F# x, z3 M+ k1 O' R d* A以上就是将 Heropress Pro 主题转换成 Typecho 主题的具体过程,希望对你有所帮助。
1 K* P: K9 p5 e1 y5 I
- r' p+ H& E7 O+ p8 o9 V. X. X |
|